@schukai/monster 4.46.8 → 4.47.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 
 
+## [4.47.1] - 2025-11-25
+
+### Bug Fixes
+
+- rollback updater [#343](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/343)
+- **select:** return if selection no array
+
+
+
+## [4.47.0] - 2025-11-25
+
+### Add Features
+
+- add loglevel to save-button
+
+
+
 ## [4.46.8] - 2025-11-23
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.46.8"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.47.1"}

package/source/components/datatable/save-button.mjs

@@ -17,9 +17,9 @@ import { diff } from "../../data/diff.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+  assembleMethodSymbol,
+  CustomElement,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
 import { isString, isArray } from "../../types/is.mjs";
@@ -35,8 +35,8 @@ import { SaveButtonStyleSheet } from "./stylesheet/save-button.mjs";
 import "../form/state-button.mjs";
 
 import {
-	handleDataSourceChanges,
-	datasourceLinkedElementSymbol,
+  handleDataSourceChanges,
+  datasourceLinkedElementSymbol,
 } from "./util.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 
@@ -73,270 +73,273 @@ const badgeElementSymbol = Symbol("badgeElement");
  * @summary This is a save button component that can be used to save changes to a datasource.
  */
 class SaveButton extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/datatable/save-button@@instance",
-		);
-	}
-
-	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {object} datasource The datasource
-	 * @property {string} datasource.selector The selector of the datasource
-	 * @property {string} labels.button The button label
-	 * @property {Object} classes The classes
-	 * @property {string} classes.bar The bar class
-	 * @property {string} classes.badge The badge class
-	 * @property {Array} ignoreChanges The ignore changes (regex)
-	 * @property {Array} data The data
-	 * @property {boolean} disabled The disabled state
-	 * @property {string} logLevel The log level (off, debug)
-	 * @return {Object}
-	 */
-	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			labels: getTranslations(),
-
-			classes: {
-				bar: "monster-button-primary",
-				badge: "monster-badge-secondary hidden",
-			},
-
-			datasource: {
-				selector: null,
-			},
-
-			changes: "0",
-
-			ignoreChanges: [],
-
-			data: {},
-
-			disabled: false,
-
-			logLevel: "off",
-		});
-
-		updateOptionsFromArguments.call(this, obj);
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datasource-save-button";
-	}
-
-	/**
-	 * This method is responsible for assembling the component.
-	 *
-	 * It calls the parent's assemble method first, then initializes control references and event handlers.
-	 * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
-	 * element in the DOM using that selector.
-	 *
-	 * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
-	 *
-	 * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
-	 * attaches an observer to the datasource's changes.
-	 *
-	 * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
-	 * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
-	 * method in the component's context.
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		const self = this;
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-
-		const selector = this.getOption("datasource.selector");
-
-		if (isString(selector)) {
-			const element = findElementWithSelectorUpwards(this, selector);
-			if (element === null) {
-				throw new Error("the selector must match exactly one element");
-			}
-
-			if (!(element instanceof Datasource)) {
-				throw new TypeError("the element must be a datasource");
-			}
-
-			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", (event) => {
-					self[originValuesSymbol] = null;
-				});
-			}
-
-			this[datasourceLinkedElementSymbol] = element;
-			element.datasource.attachObserver(
-				new Observer(handleDataSourceChanges.bind(this)),
-			);
-
-			self[originValuesSymbol] = null;
-
-			element.datasource.attachObserver(
-				new Observer(function () {
-					if (!self[originValuesSymbol]) {
-						self[originValuesSymbol] = clone(
-							self[datasourceLinkedElementSymbol].data,
-						);
-					}
-
-					const currentValues = this.getRealSubject();
-					const ignoreChanges = self.getOption("ignoreChanges");
-
-					const result = diff(self[originValuesSymbol], currentValues);
-					if (self.getOption("logLevel") === "debug") {
-						console.groupCollapsed("SaveButton");
-						console.log(
-							"originValues",
-							JSON.parse(JSON.stringify(currentValues)),
-						);
-						console.log("result of diff", result);
-						console.log("ignoreChanges", ignoreChanges);
-
-						if (isArray(result) && result.length > 0) {
-							const formattedDiff = result.map((change) => ({
-								Operator: change?.operator,
-								Path: change?.path?.join("."),
-								"First Value": change?.first?.value,
-								"First Type": change?.first?.type,
-								"Second Value": change?.second?.value,
-								"Second Type": change?.second?.type,
-							}));
-
-							console.table(formattedDiff);
-						} else {
-							console.log("There are no changes to save");
-						}
-						console.groupEnd();
-					}
-
-					if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
-						const itemsToRemove = [];
-						for (const item of result) {
-							for (const ignorePattern of ignoreChanges) {
-								const p = new RegExp(ignorePattern);
-
-								let matchPath = item.path;
-								if (isArray(item.path)) {
-									matchPath = item.path.join(".");
-								}
-
-								if (p.test(matchPath)) {
-									itemsToRemove.push(item);
-									break;
-								}
-							}
-						}
-
-						for (const itemToRemove of itemsToRemove) {
-							const index = result.indexOf(itemToRemove);
-							if (index > -1) {
-								result.splice(index, 1);
-							}
-						}
-					}
-
-					if (isArray(result) && result.length > 0) {
-						self[stateButtonElementSymbol].setState("changed");
-						self[stateButtonElementSymbol].setOption("disabled", false);
-						self.setOption("changes", result.length);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.remove("hidden")
-								.toString(),
-						);
-					} else {
-						self[stateButtonElementSymbol].removeState();
-						self[stateButtonElementSymbol].setOption("disabled", true);
-						self.setOption("changes", 0);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.add("hidden")
-								.toString(),
-						);
-					}
-				}),
-			);
-		}
-
-		this.attachObserver(
-			new Observer(() => {
-				handleDataSourceChanges.call(this);
-			}),
-		);
-	}
-
-	/**
-	 *
-	 * @return [CSSStyleSheet]
-	 */
-	static getCSSStyleSheet() {
-		return [SaveButtonStyleSheet, BadgeStyleSheet];
-	}
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for(
+      "@schukai/monster/components/datatable/save-button@@instance",
+    );
+  }
+
+  /**
+   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+   *
+   * The individual configuration values can be found in the table.
+   *
+   * @property {Object} templates Template definitions
+   * @property {string} templates.main Main template
+   * @property {object} datasource The datasource
+   * @property {string} datasource.selector The selector of the datasource
+   * @property {string} labels.button The button label
+   * @property {Object} classes The classes
+   * @property {string} classes.bar The bar class
+   * @property {string} classes.badge The badge class
+   * @property {Array} ignoreChanges The ignore changes (regex)
+   * @property {Array} data The data
+   * @property {boolean} disabled The disabled state
+   * @property {string} logLevel The log level (off, debug)
+   * @return {Object}
+   */
+  get defaults() {
+    const obj = Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+
+      labels: getTranslations(),
+
+      classes: {
+        bar: "monster-button-primary",
+        badge: "monster-badge-secondary hidden",
+      },
+
+      datasource: {
+        selector: null,
+      },
+
+      changes: "0",
+
+      ignoreChanges: [],
+
+      data: {},
+
+      disabled: false,
+
+      logLevel: "off",
+    });
+
+    updateOptionsFromArguments.call(this, obj);
+    return obj;
+  }
+
+  /**
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-datasource-save-button";
+  }
+
+  /**
+   * This method is responsible for assembling the component.
+   *
+   * It calls the parent's assemble method first, then initializes control references and event handlers.
+   * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
+   * element in the DOM using that selector.
+   *
+   * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
+   *
+   * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
+   * attaches an observer to the datasource's changes.
+   *
+   * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
+   * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
+   * method in the component's context.
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    const self = this;
+
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+
+    const selector = this.getOption("datasource.selector");
+
+    if (isString(selector)) {
+      const element = findElementWithSelectorUpwards(this, selector);
+      if (element === null) {
+        throw new Error("the selector must match exactly one element");
+      }
+
+      if (!(element instanceof Datasource)) {
+        throw new TypeError("the element must be a datasource");
+      }
+
+      if (element instanceof RestDatasource) {
+        element.addEventListener("monster-datasource-fetch", (event) => {
+          self[originValuesSymbol] = null;
+        });
+      }
+
+      this[datasourceLinkedElementSymbol] = element;
+      element.datasource.attachObserver(
+        new Observer(handleDataSourceChanges.bind(this)),
+      );
+
+      self[originValuesSymbol] = null;
+
+      element.datasource.attachObserver(
+        new Observer(function () {
+          if (!self[originValuesSymbol]) {
+            self[originValuesSymbol] = clone(
+              self[datasourceLinkedElementSymbol].data,
+            );
+          }
+
+          const currentValues = this.getRealSubject();
+          const ignoreChanges = self.getOption("ignoreChanges");
+
+          const result = diff(self[originValuesSymbol], currentValues);
+          if (
+            self.getOption("logLevel") === "debug" ||
+            location.search.includes("logLevel=debug")
+          ) {
+            console.groupCollapsed("SaveButton");
+            console.log(
+              "originValues",
+              JSON.parse(JSON.stringify(currentValues)),
+            );
+            console.log("result of diff", result);
+            console.log("ignoreChanges", ignoreChanges);
+
+            if (isArray(result) && result.length > 0) {
+              const formattedDiff = result.map((change) => ({
+                Operator: change?.operator,
+                Path: change?.path?.join("."),
+                "First Value": change?.first?.value,
+                "First Type": change?.first?.type,
+                "Second Value": change?.second?.value,
+                "Second Type": change?.second?.type,
+              }));
+
+              console.table(formattedDiff);
+            } else {
+              console.log("There are no changes to save");
+            }
+            console.groupEnd();
+          }
+
+          if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
+            const itemsToRemove = [];
+            for (const item of result) {
+              for (const ignorePattern of ignoreChanges) {
+                const p = new RegExp(ignorePattern);
+
+                let matchPath = item.path;
+                if (isArray(item.path)) {
+                  matchPath = item.path.join(".");
+                }
+
+                if (p.test(matchPath)) {
+                  itemsToRemove.push(item);
+                  break;
+                }
+              }
+            }
+
+            for (const itemToRemove of itemsToRemove) {
+              const index = result.indexOf(itemToRemove);
+              if (index > -1) {
+                result.splice(index, 1);
+              }
+            }
+          }
+
+          if (isArray(result) && result.length > 0) {
+            self[stateButtonElementSymbol].setState("changed");
+            self[stateButtonElementSymbol].setOption("disabled", false);
+            self.setOption("changes", result.length);
+            self.setOption(
+              "classes.badge",
+              new TokenList(self.getOption("classes.badge"))
+                .remove("hidden")
+                .toString(),
+            );
+          } else {
+            self[stateButtonElementSymbol].removeState();
+            self[stateButtonElementSymbol].setOption("disabled", true);
+            self.setOption("changes", 0);
+            self.setOption(
+              "classes.badge",
+              new TokenList(self.getOption("classes.badge"))
+                .add("hidden")
+                .toString(),
+            );
+          }
+        }),
+      );
+    }
+
+    this.attachObserver(
+      new Observer(() => {
+        handleDataSourceChanges.call(this);
+      }),
+    );
+  }
+
+  /**
+   *
+   * @return [CSSStyleSheet]
+   */
+  static getCSSStyleSheet() {
+    return [SaveButtonStyleSheet, BadgeStyleSheet];
+  }
 }
 
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				button: "Speichern",
-			};
-		case "fr":
-			return {
-				button: "Enregistrer",
-			};
-		case "sp":
-			return {
-				button: "Guardar",
-			};
-		case "it":
-			return {
-				button: "Salva",
-			};
-		case "pl":
-			return {
-				button: "Zapisz",
-			};
-		case "no":
-			return {
-				button: "Lagre",
-			};
-		case "dk":
-			return {
-				button: "Gem",
-			};
-		case "sw":
-			return {
-				button: "Spara",
-			};
-		default:
-		case "en":
-			return {
-				button: "Save",
-			};
-	}
+  const locale = getLocaleOfDocument();
+  switch (locale.language) {
+    case "de":
+      return {
+        button: "Speichern",
+      };
+    case "fr":
+      return {
+        button: "Enregistrer",
+      };
+    case "sp":
+      return {
+        button: "Guardar",
+      };
+    case "it":
+      return {
+        button: "Salva",
+      };
+    case "pl":
+      return {
+        button: "Zapisz",
+      };
+    case "no":
+      return {
+        button: "Lagre",
+      };
+    case "dk":
+      return {
+        button: "Gem",
+      };
+    case "sw":
+      return {
+        button: "Spara",
+      };
+    default:
+    case "en":
+      return {
+        button: "Save",
+      };
+  }
 }
 
 /**
@@ -350,71 +353,71 @@ function getTranslations() {
  * @throws {Error} the selector must match exactly one element
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=state-button]",
-	);
-
-	this[badgeElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=badge]",
-	);
-
-	if (this[stateButtonElementSymbol]) {
-		queueMicrotask(() => {
-			const states = {
-				changed: new State(
-					"changed",
-					'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">' +
-						'<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>' +
-						'<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>' +
-						"</svg>",
-				),
-			};
-
-			this[stateButtonElementSymbol].removeState();
-			this[stateButtonElementSymbol].setOption("disabled", "disabled");
-			this[stateButtonElementSymbol].setOption("states", states);
-			this[stateButtonElementSymbol].setOption(
-				"labels.button",
-				this.getOption("labels.button"),
-			);
-		});
-	}
-
-	return this;
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+
+  this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=state-button]",
+  );
+
+  this[badgeElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=badge]",
+  );
+
+  if (this[stateButtonElementSymbol]) {
+    queueMicrotask(() => {
+      const states = {
+        changed: new State(
+          "changed",
+          '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">' +
+            '<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>' +
+            '<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>' +
+            "</svg>",
+        ),
+      };
+
+      this[stateButtonElementSymbol].removeState();
+      this[stateButtonElementSymbol].setOption("disabled", "disabled");
+      this[stateButtonElementSymbol].setOption("states", states);
+      this[stateButtonElementSymbol].setOption(
+        "labels.button",
+        this.getOption("labels.button"),
+      );
+    });
+  }
+
+  return this;
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	queueMicrotask(() => {
-		this[stateButtonElementSymbol].setOption("actions.click", () => {
-			this[datasourceLinkedElementSymbol]
-				.write()
-				.then(() => {
-					this[originValuesSymbol] = null;
-					this[originValuesSymbol] = clone(
-						this[datasourceLinkedElementSymbol].data,
-					);
-					this[stateButtonElementSymbol].removeState();
-					this[stateButtonElementSymbol].setOption("disabled", true);
-					this.setOption("changes", 0);
-					this.setOption(
-						"classes.badge",
-						new TokenList(this.getOption("classes.badge"))
-							.add("hidden")
-							.toString(),
-					);
-				})
-				.catch((error) => {
-					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
-				});
-		});
-	});
+  queueMicrotask(() => {
+    this[stateButtonElementSymbol].setOption("actions.click", () => {
+      this[datasourceLinkedElementSymbol]
+        .write()
+        .then(() => {
+          this[originValuesSymbol] = null;
+          this[originValuesSymbol] = clone(
+            this[datasourceLinkedElementSymbol].data,
+          );
+          this[stateButtonElementSymbol].removeState();
+          this[stateButtonElementSymbol].setOption("disabled", true);
+          this.setOption("changes", 0);
+          this.setOption(
+            "classes.badge",
+            new TokenList(this.getOption("classes.badge"))
+              .add("hidden")
+              .toString(),
+          );
+        })
+        .catch((error) => {
+          addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
+        });
+    });
+  });
 }
 
 /**
@@ -422,10 +425,10 @@ function initEventHandler() {
  * @deprecated 2024-12-31
  */
 function updateOptionsFromArguments(options) {
-	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
-	if (selector) {
-		options.datasource.selector = selector;
-	}
+  const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+  if (selector) {
+    options.datasource.selector = selector;
+  }
 }
 
 /**
@@ -433,8 +436,8 @@ function updateOptionsFromArguments(options) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
 		<div data-monster-role="control" part="control"
 			 data-monster-attributes="disabled path:disabled | if:true">
 			<monster-state-button data-monster-role="state-button"></monster-state-button>

package/source/components/form/select.mjs

@@ -3056,11 +3056,8 @@ function setSelection(selection) {
   }
 
   if (!isArray(selection)) {
-    console.warn(
-      "selection is not an array, resetting to empty array",
-      selection,
-    );
-    selection = [];
+    addErrorAttribute(this, "selection is not an array");
+    return Promise.reject(new Error("selection is not an array"));
   }
 
   let resultSelection = [];

package/source/components/form/stylesheet/select.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { SelectStyleSheet };
+export {SelectStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { SelectStyleSheet };
 const SelectStyleSheet = new CSSStyleSheet();
 
 try {
-	SelectStyleSheet.insertRule(
-		`
+  SelectStyleSheet.insertRule(`
 @layer select { 
 .block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;transition:height .3s ease}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}[data-monster-role=selection-messages]:empty:before,[data-monster-role=summary-messages]:empty:before{content:\"\u00A0\"}.in-button-bar{border-color:var(--monster-bg-color-primary-4)!important;border-style:var(--monster-border-style)!important;border-width:var(--monster-border-width)!important}[data-monster-role=pagination]::part(nav){justify-content:flex-start}[data-monster-role=pagination]::part(list){margin-bottom:0;margin-top:0} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/dom/updater.mjs

@@ -72,24 +72,6 @@ const pendingDiffsSymbol = Symbol("pendingDiffs");
  */
 const processingSymbol = Symbol("processing");
 
-/**
- * @private
- * @type {symbol}
- */
-const pipeCacheSymbol = Symbol("pipeCache");
-
-/**
- * @private
- * @type {symbol}
- */
-const processingScheduledSymbol = Symbol("processingScheduled");
-
-/**
- * @private
- * Performance optimization: static Set for boolean checks
- */
-const TRUE_VALUES = new Set(["true", "1", "on"]);
-
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -149,9 +131,6 @@ class Updater extends Base {
 
     this[pendingDiffsSymbol] = [];
     this[processingSymbol] = false;
-    this[processingScheduledSymbol] = false;
-    this[pipeCacheSymbol] = new Map();
-    this[timerElementEventHandlerSymbol] = new WeakMap();
 
     this[internalSymbol].subject.attachObserver(
       new Observer(() => {
@@ -159,19 +138,7 @@ class Updater extends Base {
         const diffResult = diff(this[internalSymbol].last, real);
         this[internalSymbol].last = clone(real);
         this[pendingDiffsSymbol].push(diffResult);
-
-        if (!this[processingScheduledSymbol]) {
-          this[processingScheduledSymbol] = true;
-
-          return new Promise((resolve) => {
-            queueMicrotask(() => {
-              this[processingScheduledSymbol] = false;
-              this.#processQueue().finally(resolve);
-            });
-          });
-        }
-
-        return Promise.resolve();
+        return this.#processQueue();
       }),
     );
   }
@@ -227,7 +194,7 @@ class Updater extends Base {
    *
    * ```js
    * updater.run().then(() => {
-   * updater.enableEventProcessing();
+   *   updater.enableEventProcessing();
    * });
    * ```
    *
@@ -276,7 +243,7 @@ class Updater extends Base {
    *
    * ```js
    * updater.run().then(() => {
-   * updater.enableEventProcessing();
+   *   updater.enableEventProcessing();
    * });
    * ```
    *
@@ -328,20 +295,6 @@ class Updater extends Base {
     this[internalSymbol].callbacks.set(name, callback);
     return this;
   }
-
-  /**
-   * @private
-   * @param {string} cmd
-   * @returns {Pipe}
-   */
-  getPipe(cmd) {
-    let pipe = this[pipeCacheSymbol].get(cmd);
-    if (!pipe) {
-      pipe = new Pipe(cmd);
-      this[pipeCacheSymbol].set(cmd, pipe);
-    }
-    return pipe;
-  }
 }
 
 /**
@@ -355,9 +308,8 @@ function getCheckStateCallback() {
   return function (current) {
     // this is a reference to the current object (therefore no array function here)
     if (this instanceof HTMLInputElement) {
-      if (["radio", "checkbox"].includes(this.type)) {
-        if (current == null) return undefined;
-        return String(this.value) === String(current) ? "true" : undefined;
+      if (["radio", "checkbox"].indexOf(this.type) !== -1) {
+        return `${this.value}` === `${current}` ? "true" : undefined;
       }
     } else if (this instanceof HTMLOptionElement) {
       if (isArray(current) && current.indexOf(this.value) !== -1) {
@@ -397,26 +349,22 @@ function getControlEventHandler() {
       return;
     }
 
-    const switches = this[timerElementEventHandlerSymbol];
-    let dms = switches.get(element);
-
-    if (dms instanceof DeadMansSwitch) {
+    if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
       try {
-        dms.touch();
+        this[timerElementEventHandlerSymbol].touch();
         return;
       } catch (e) {
-        switches.delete(element);
+        delete this[timerElementEventHandlerSymbol];
       }
     }
 
-    dms = new DeadMansSwitch(50, () => {
+    this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
       try {
         retrieveAndSetValue.call(this, element);
       } catch (e) {
         addErrorAttribute(element, e);
       }
     });
-    switches.set(element, dms);
   };
 
   return this[symbol];
@@ -499,21 +447,18 @@ function retrieveAndSetValue(element) {
     case "int":
     case "float":
     case "integer":
-      const num = Number(value);
-      if (value === "" || value === null || value === undefined) {
-        value = undefined;
-      } else if (Number.isNaN(num)) {
-        value = undefined;
-      } else {
-        value = num;
+      value = Number(value);
+      if (isNaN(value)) {
+        value = 0;
       }
       break;
     case "boolean":
     case "bool":
     case "checkbox":
-      // Use static set (Performance fix)
-      value = TRUE_VALUES.has(String(value).toLowerCase()) || value === true;
+      value =
+        value === "true" || value === "1" || value === "on" || value === true;
       break;
+
     case "string[]":
     case "[]string":
       if (isString(value)) {
@@ -564,14 +509,11 @@ function retrieveAndSetValue(element) {
     case "object":
     case "json":
       if (isString(value)) {
-        try {
-          value = JSON.parse(value);
-        } catch (e) {
-          throw new Error("unsupported value for object");
-        }
+        value = JSON.parse(value);
       } else {
         throw new Error("unsupported value for object");
       }
+
       break;
     default:
       break;
@@ -593,11 +535,21 @@ function retrieveAndSetValue(element) {
  * @private
  */
 function parseIntArray(val) {
-  if (val === undefined || val === null) return [];
-
-  const list = isArray(val) ? val : String(val).split(",");
-
-  return list.map((v) => parseInt(v, 10)).filter((v) => !Number.isNaN(v));
+  if (isString(val)) {
+    return val.trim() === ""
+      ? []
+      : val
+          .split(",")
+          .map((v) => parseInt(v, 10))
+          .filter((v) => !isNaN(v));
+  } else if (isInteger(val)) {
+    return [val];
+  } else if (val === undefined || val === null) {
+    return [];
+  } else if (isArray(val)) {
+    return val.map((v) => parseInt(v, 10)).filter((v) => !isNaN(v));
+  }
+  throw new Error("unsupported value for int array");
 }
 
 /**
@@ -698,7 +650,7 @@ function insertElement(change) {
           throw new Error("pipes are not allowed when cloning a node.");
         }
 
-        const pipe = this.getPipe(cmd);
+        const pipe = new Pipe(cmd);
         this[internalSymbol].callbacks.forEach((f, n) => {
           pipe.setCallback(n, f);
         });
@@ -878,18 +830,25 @@ function runUpdateContent(container, parts, subject) {
 
     // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
     const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
+    const e = container.querySelectorAll(`${query}`);
 
-    // Performance optimization: avoid new Set([...NodeList])
-    const elements = container.querySelectorAll(`${query}`);
+    const iterator = new Set([...e]);
 
-    const process = (element) => {
+    if (container.matches(query)) {
+      iterator.add(container);
+    }
+
+    /**
+     * @type {HTMLElement}
+     */
+    for (const [element] of iterator.entries()) {
       if (mem.has(element)) return;
       mem.add(element);
 
       const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
       const cmd = trimSpaces(attributes);
 
-      const pipe = this.getPipe(cmd);
+      const pipe = new Pipe(cmd);
       this[internalSymbol].callbacks.forEach((f, n) => {
         pipe.setCallback(n, f);
       });
@@ -915,16 +874,6 @@ function runUpdateContent(container, parts, subject) {
       } else {
         element.innerHTML = value;
       }
-    };
-
-    // Iterate NodeList directly
-    for (const element of elements) {
-      process(element);
-    }
-
-    // Check container
-    if (container.matches(query)) {
-      process(container);
     }
   }
 }
@@ -959,18 +908,27 @@ function runUpdateAttributes(container, parts, subject) {
     const current = parts.join(".");
     parts.pop();
 
+    let iterator = new Set();
+
     const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
 
-    // Performance optimization: avoid new Set([...NodeList])
-    const elements = container.querySelectorAll(query);
+    const e = container.querySelectorAll(query);
+
+    if (e.length > 0) {
+      iterator = new Set([...e]);
+    }
 
-    const process = (element) => {
+    if (container.matches(query)) {
+      iterator.add(container);
+    }
+
+    for (const [element] of iterator.entries()) {
       if (mem.has(element)) return;
       mem.add(element);
 
       // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
       if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
-        return;
+        continue;
       }
 
       const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
@@ -981,7 +939,7 @@ function runUpdateAttributes(container, parts, subject) {
         const name = trimSpaces(def.substr(0, i));
         const cmd = trimSpaces(def.substr(i));
 
-        const pipe = this.getPipe(cmd);
+        const pipe = new Pipe(cmd);
 
         this[internalSymbol].callbacks.forEach((f, n) => {
           pipe.setCallback(n, f, element);
@@ -995,30 +953,14 @@ function runUpdateAttributes(container, parts, subject) {
           addErrorAttribute(element, e);
         }
 
-        const shouldRemove =
-          value === undefined || value === null || Number.isNaN(value);
-
-        if (shouldRemove) {
+        if (value === undefined) {
           element.removeAttribute(name);
-        } else {
-          const strValue = String(value);
-
-          if (element.getAttribute(name) !== strValue) {
-            element.setAttribute(name, strValue);
-          }
+        } else if (element.getAttribute(name) !== value) {
+          element.setAttribute(name, value);
         }
+
         handleInputControlAttributeUpdate.call(this, element, name, value);
       }
-    };
-
-    // Iterate NodeList directly
-    for (const element of elements) {
-      process(element);
-    }
-
-    // Check container
-    if (container.matches(query)) {
-      process(container);
     }
   }
 }
@@ -1031,59 +973,52 @@ function runUpdateAttributes(container, parts, subject) {
  * @return {void}
  * @this Updater
  */
-function handleInputControlAttributeUpdate(element, name, value) {
-  // Prevent NaN warnings by normalizing invalid numbers to undefined
-  if (typeof value === "number" && isNaN(value)) {
-    value = undefined;
-  }
 
+function handleInputControlAttributeUpdate(element, name, value) {
   if (element instanceof HTMLSelectElement) {
     switch (element.type) {
       case "select-multiple":
-        // Ensure value is an array before calling indexOf to avoid errors
-        if (Array.isArray(value) || typeof value === "string") {
-          for (const [index, opt] of Object.entries(element.options)) {
-            opt.selected = value.indexOf(opt.value) !== -1;
-          }
+        for (const [index, opt] of Object.entries(element.options)) {
+          opt.selected = value.indexOf(opt.value) !== -1;
         }
+
         break;
       case "select-one":
         // Only one value may be selected
+
         for (const [index, opt] of Object.entries(element.options)) {
-          if (opt.value == value) {
-            // Loose equality to match string numbers
+          if (opt.value === value) {
             element.selectedIndex = index;
             break;
           }
         }
+
         break;
     }
   } else if (element instanceof HTMLInputElement) {
     switch (element.type) {
       case "radio":
         if (name === "checked") {
-          element.checked = value !== undefined && value !== null;
+          element.checked = value !== undefined;
         }
         break;
 
       case "checkbox":
         if (name === "checked") {
-          element.checked = value !== undefined && value !== null;
+          element.checked = value !== undefined;
         }
         break;
 
       case "text":
       default:
         if (name === "value") {
-          // Check for undefined, null, or NaN
-          element.value = value === undefined || value === null ? "" : value;
+          element.value = value === undefined ? "" : value;
         }
         break;
     }
   } else if (element instanceof HTMLTextAreaElement) {
     if (name === "value") {
-      // Check for undefined, null, or NaN
-      element.value = value === undefined || value === null ? "" : value;
+      element.value = value === undefined ? "" : value;
     }
   }
 }