chore: doc and code tidy

nix/scripts/release.nix

@@ -26,11 +26,9 @@ in
 
         cd $CI_PROJECT_DIR || exit 1
 
-    ####    ${pkgs'.git}/bin/git remote set-url origin https://''${CI_REPOSITORY_URL#*@}
         echo_step "Set git remote url to https://pad:secret@''${CI_REPOSITORY_URL#*@}"
         ${pkgs'.git}/bin/git remote set-url origin https://pad:''${GITLAB_TOKEN}@''${CI_REPOSITORY_URL#*@}
 
-
         ${pkgs'.git}/bin/git fetch --all --tags --unshallow
         ${pkgs'.git}/bin/git reset --hard origin/master
         ${pkgs'.git}/bin/git clean -fd

source/components/form/context-error.mjs

@@ -228,7 +228,7 @@ class ContextError extends Popper {
 	}
 
 	/**
-	 * Returns the html tag of the control.
+	 * Returns the HTML Tag of the control.
 	 *
 	 * @return {string}
 	 */

source/components/form/field-set.mjs

@@ -67,39 +67,6 @@ const toggleSwitchElementSymbol = Symbol("toggleSwitchElement");
  */
 const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
 
-/**
- * This CustomControl creates a FieldSet element with a variety of options.
- *
- * <img src="./images/field-set.png">
- *
- * You can create this control either by specifying the HTML tag <monster-field-set />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-field-set');` method.
- *
- * ```html
- * <monster-field-set></monster-field-set>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {FieldSet} from '@schukai/monster/source/components/form/field-set.mjs';
- * document.createElement('monster-field-set');
- * ```
- *
- * @externalExample ../..../example/components/form/field-set.mjs
- * @startuml field-set.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- FieldSet
- * @enduml
- *
- * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A simple FieldSet
- */
-
 /**
  * A field set control that can be used to group form elements.
  *
@@ -143,6 +110,7 @@ class FieldSet extends CustomControl {
 	 * @property {Object} actions Callbacks
 	 * @property {string} actions.click="throw Error" Callback when clicked
 	 * @property {Object} features Features
+	 * @property {boolean} features.multipleColumns=true Multiple columns
 	 * @property {Object} classes CSS classes
 	 * @property {boolean} disabled=false Disabled state
 	 */
@@ -152,14 +120,16 @@ class FieldSet extends CustomControl {
 				main: getTemplate(),
 			},
 			labels: {
-				"toggle-switch-on": "✔",
-				"toggle-switch-off": "✖",
-				"toggle-switch-label": "Expand",
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expand",
 				title: "",
 			},
 			classes: {},
 			disabled: false,
-			features: {},
+			features: {
+				multipleColumns: true,
+			},
 			actions: {
 				click: () => {
 					throw new Error("the click action is not defined");
@@ -293,12 +263,12 @@ function updateExtendedFields() {
  */
 function initEventHandler() {
 	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-on",
-		this.getOption("labels.toggle-switch-on"),
+		"labels.toggleSwitchOn",
+		this.getOption("labels.toggleSwitchOn"),
 	);
 	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-off",
-		this.getOption("labels.toggle-switch-off"),
+		"labels.toggleSwitchOff",
+		this.getOption("labels.toggleSwitchOff"),
 	);
 
 	this[toggleSwitchElementSymbol].setOption("actions.on", () => {

source/components/form/toggle-switch.mjs

@@ -49,25 +49,6 @@ export const STATE_ON = "on";
  */
 export const STATE_OFF = "off";
 
-/**
- * This CustomControl creates a ToggleSwitch element
- *
- * <img src="./images/toggleswitch.png">
- *
- *
- * @startuml toggleswitch.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- ToggleSwitch
- * @enduml
- *
- * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A simple toggle switch
- */
-
 /**
  * A simple toggle switch
  *
@@ -120,8 +101,8 @@ class ToggleSwitch extends CustomControl {
                 off: "off",
             },
             labels: {
-				"toggle-switch-on": "ON",
-				"toggle-switch-off": "OFF",
+                toggleSwitchOn: "✔",
+                toggleSwitchOff: "✖",
             },
             templates: {
                 main: getTemplate(),
@@ -447,8 +428,8 @@ function getTemplate() {
         <div data-monster-role="control" part="control" tabindex="0">
             <div class="switch" data-monster-role="switch"
                  data-monster-attributes="data-monster-state path:value | call:state-callback">
-                <div class="label on" data-monster-replace="path:labels.toggle-switch-on"></div>
-                <div class="label off" data-monster-replace="path:labels.toggle-switch-off"></div>
+                <div class="label on" data-monster-replace="path:labels.toggleSwitchOn"></div>
+                <div class="label off" data-monster-replace="path:labels.toggleSwitchOff"></div>
                 <div data-monster-attributes="class path:classes.handle | suffix:\\ switch-slider"></div>
             </div>
         </div>`;

source/components/host/collapse.mjs

@@ -19,6 +19,6 @@ export { Collapse };
  * @since 1.10.0
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Form
- * @deprecated since 3.64.0 use {@link Monster.Components.Layout.Collapse}
+ * @deprecated since 3.64.0 use Layout.Collapse instead
  */
 class Collapse extends NewCollapse {}

source/components/state/log.mjs

@@ -71,10 +71,22 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  * @memberOf Monster.Components.State
  * @summary Log is a control to show a log message.
  */
-class Log extends CustomElement {
+
+
 /**
+ * A Log component
+ *
+ * @fragments /fragments/components/layout/collapse/
  *
-	 * @return {Monster.Components.State.State}
+ * @example /examples/components/layout/collapse-simple
+ *
+ * @since 3.74.0
+ * @copyright schukai GmbH
+ * @summary A Log component to show a log message.
+ */
+class Log extends CustomElement {
+    /**
+     * @return {void}
      */
     [assembleMethodSymbol]() {
         super[assembleMethodSymbol]();
@@ -88,7 +100,7 @@ class Log extends CustomElement {
      * @returns {symbol}
      */
     static get [instanceSymbol]() {
-		return Symbol.for("@schukai/component-state/log");
+        return Symbol.for("@schukai/monster/components/state/log@@instance");
     }
 
     /**
@@ -116,6 +128,9 @@ class Log extends CustomElement {
         });
     }
 
+    /**
+     * @return {void}
+     */
     connectedCallback() {
         super.connectedCallback();
 
@@ -136,6 +151,11 @@ class Log extends CustomElement {
         return this;
     }
 
+    /**
+     * Add an entry to the log
+     * @param entry
+     * @returns {Log}
+     */
     addEntry(entry) {
         validateInstance(entry, Entry);
 
@@ -150,9 +170,9 @@ class Log extends CustomElement {
 
     /**
      * Add a log message
-	 *
-	 * @param {string} message
-	 * @return {Log}
+     * @param message
+     * @param date
+     * @returns {Log}
      */
     addMessage(message, date) {
         if (!date) {
@@ -221,12 +241,6 @@ function initEventHandler() {
         }
     });
 
-	// self[buttonEventHandlerSymbol] = (event) => {
-	//     self.toggle();
-	// }
-	//
-	// self[buttonElementSymbol].addEventListener('click', self[buttonEventHandlerSymbol]);
-
     return this;
 }
 

source/components/state/state.mjs

@@ -29,44 +29,20 @@ export { State };
 export const stateElementSymbol = Symbol("state");
 
 /**
- * States tell users that there’s a state. that s it!
+ * A state component
  *
- * <img src="./images/state.png">
+ * @fragments /fragments/components/state/state/
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-state />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-state');` method.
- *
- * ```html
- * <monster-state></monster-state>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {State} from '@schukai/component-state/source/state.js';
- * document.createElement('monster-state');
- * ```
- *
- * @externalExample ../../../example/components/state/state.mjs
- * @startuml state.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- State
- * @enduml
+ * @example /examples/components/state/state-simple
  *
  * @since 1.5.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.State
- * @summary States tell users that there’s a state. that s it!
- */
+ * @summary States tell users that there’s a state. That's it!
+ * @summary The state control is used in the log control, among other things.
+ **/
 class State extends CustomControl {
 	/**
-	 *
-	 * @return {Monster.Components.State.State}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -77,7 +53,7 @@ class State extends CustomControl {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/component-state/state");
+		return Symbol.for("@schukai/monster/components/state/state@@instance"); 
 	}
 
 	/**