@schukai/monster 4.150.9 → 4.152.0

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","files":["source","test/cases","test/util","CHANGELOG.md"],"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.150.9"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","files":["source","test/cases","test/util","CHANGELOG.md"],"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.152.0"}

package/source/components/form/select.mjs

@@ -313,6 +313,9 @@ const selectionVersionSymbol = Symbol("selectionVersion");
 const closeOnSelectAutoSymbol = Symbol("closeOnSelectAuto");
 const lastFilterValueSymbol = Symbol("lastFilterValue");
 const filterInputVersionSymbol = Symbol("filterInputVersion");
+const createOptionElementSymbol = Symbol("createOptionElement");
+const createOptionCandidateSymbol = Symbol("createOptionCandidate");
+const createOptionEventsAttachedSymbol = Symbol("createOptionEventsAttached");
 
 /**
  * @private
@@ -422,6 +425,7 @@ const SELECT_VIEWPORT_PADDING = 12;
  * @fires monster-options-set this event is fired when the options are set
  * @fires monster-selection-removed
  * @fires monster-selection-cleared
+ * @fires monster-option-created
  */
 class Select extends CustomControl {
 	/**
@@ -555,6 +559,7 @@ class Select extends CustomControl {
 	 * @property {string} labels.select-an-option - Placeholder text when no selection has been made.
 	 * @property {string} labels.no-options - Message displayed when no options are available from slots or fetch.
 	 * @property {string} labels.no-options-found - Message displayed when the filter yields no matching options.
+	 * @property {string} labels.create-option - Template for the create action. `${label}` and `${value}` are replaced with the candidate data.
 	 * @property {string} labels.summary-text.zero - Pluralization template for zero selected entries (e.g., "No entries selected").
 	 * @property {string} labels.summary-text.one - Pluralization template for one selected entry.
 	 * @property {string} labels.summary-text.other - Pluralization template for multiple selected entries.
@@ -567,6 +572,7 @@ class Select extends CustomControl {
 	 * @property {boolean} features.storeFetchedData - If `true`, the raw fetched data is stored and can be retrieved via `getLastFetchedData()`.
 	 * @property {boolean} features.useStrictValueComparison - Uses strict comparison (`===`) when matching option values.
 	 * @property {boolean} features.showRemoteInfo - When `filter.mode === "remote"`, displays an info badge indicating that more options may exist on the server.
+	 * @property {boolean} features.createOption - Shows an action for creating and selecting a missing filtered option.
 	 * @property {Object} remoteInfo - Configuration for the remote info display.
 	 * @property {string|null} remoteInfo.url - URL to fetch the total count of remote options (used when `filter.mode === "remote"`).
 	 * @property {Object} placeholder - Placeholder texts for input fields.
@@ -601,12 +607,14 @@ class Select extends CustomControl {
 	 * @property {Array} empty.equivalents - Values that are considered "empty" (e.g., `undefined`, `null`, `""`, `NaN`) and are normalized to the default value. Matching is type-safe: a configured string `"0"` only matches the string `"0"`; configure numeric `0` explicitly, via `data-monster-options` JSON, `data-monster-properties`, or `setOption()`, when the number `0` should be treated as empty.
 	 * @property {Object} formatter - Functions for formatting display values.
 	 * @property {Function} formatter.selection - Callback `(value, option) => string` to format the display text of selected values.
+	 * @property {Function} formatter.createOption - Callback `(filterValue) => {label, value}|null` used to build a missing option. Return `null` to suppress creation.
 	 * @property {Object} classes - CSS classes for various elements.
 	 * @property {string} classes.badge - CSS class for selection badges.
 	 * @property {string} classes.badgeUnresolved - CSS class used for selection badges whose value could not be hydrated. By default this swaps the badge into a warning style while keeping the raw key visible.
 	 * @property {string} classes.statusOrRemoveBadge - CSS class for the status or remove badge.
 	 * @property {string} classes.remoteInfo - CSS class for the remote info badge.
 	 * @property {string} classes.noOptions - CSS class for the "no options" message.
+	 * @property {string} classes.createOption - Badge class for the create-option action.
 	 * @property {Object} messages - Internal messages for ARIA attributes and screen readers (should not normally be changed).
 	 * @property {string|null} messages.control - Message for the main control element.
 	 * @property {string|null} messages.selected - Message for the selected items area.
@@ -634,6 +642,7 @@ class Select extends CustomControl {
 					storeFetchedData: false,
 					useStrictValueComparison: false,
 					showRemoteInfo: true,
+					createOption: false,
 				},
 
 				placeholder: {
@@ -689,6 +698,7 @@ class Select extends CustomControl {
 					statusOrRemoveBadge: "empty",
 					remoteInfo: "monster-margin-start-4 monster-margin-top-4",
 					noOptions: "monster-margin-top-4 monster-margin-start-4",
+					createOption: "monster-badge-primary",
 				},
 
 				mapping: {
@@ -710,6 +720,7 @@ class Select extends CustomControl {
 
 				formatter: {
 					selection: buildSelectionLabel,
+					createOption: buildCreatedOption,
 				},
 
 				templates: {
@@ -1500,6 +1511,7 @@ function getTranslations() {
 		case "de":
 			return {
 				"cannot-be-loaded": "Kann nicht geladen werden",
+				"create-option": "„${label}“ hinzufügen",
 				"no-options-available": "Keine Optionen verfügbar.",
 				"click-to-load-options": "Klicken, um Optionen zu laden.",
 				"select-an-option": "Option auswählen",
@@ -1957,6 +1969,7 @@ function getTranslations() {
 			// Fallback to English if locale.language is unrecognized
 			return {
 				"cannot-be-loaded": "Cannot be loaded",
+				"create-option": "Add “${label}”",
 				"no-options-available": "No options available.",
 				"click-to-load-options": "Click to load options.",
 				"select-an-option": "Select an option",
@@ -2193,6 +2206,9 @@ function fetchIt(url, controlOptions) {
 						try {
 							importOptionsIntern.call(self, map);
 							processAndApplyPaginationData.call(self, map);
+							if (this.getOption("options", []).length > 0) {
+								removeErrorAttribute(this, "No options available.");
+							}
 						} catch (e) {
 							setStatusOrRemoveBadges.call(this, "error");
 							reject(e);
@@ -2974,6 +2990,300 @@ function buildSelectionItem(value, preferredLabel) {
 	};
 }
 
+/**
+ * @private
+ * @param {string} filterValue
+ * @returns {{label: string, value: string}}
+ */
+function buildCreatedOption(filterValue) {
+	return {
+		label: filterValue,
+		value: filterValue,
+	};
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+function getRawFilterInputValue() {
+	const element =
+		this.getOption("filter.position") === FILTER_POSITION_INLINE
+			? this[inlineFilterElementSymbol]
+			: this[popperFilterElementSymbol];
+
+	return element instanceof HTMLInputElement ? element.value.trim() : "";
+}
+
+/**
+ * @private
+ * @param {string} filterValue
+ * @returns {{label: string, value: *}|null}
+ */
+function buildCreateOptionCandidate(filterValue) {
+	const formatter = this.getOption("formatter.createOption");
+	if (!isFunction(formatter)) {
+		return null;
+	}
+
+	const result = formatter.call(this, filterValue);
+	if (result === null || result === undefined) {
+		return null;
+	}
+
+	const candidate = isObject(result)
+		? { ...result }
+		: { label: String(result), value: result };
+	if (candidate.value === undefined) {
+		candidate.value = candidate.label;
+	}
+	if (candidate.label === undefined) {
+		candidate.label = getSelectionValueLabel.call(this, candidate.value);
+	}
+
+	candidate.label = String(candidate.label).trim();
+	if (candidate.label === "" || isValueIsEmpty.call(this, candidate.value)) {
+		return null;
+	}
+
+	return candidate;
+}
+
+/**
+ * @private
+ * @param {{label: string, value: *}} candidate
+ * @param {string} filterValue
+ * @returns {boolean}
+ */
+function hasEquivalentCreateOption(candidate, filterValue) {
+	const normalizedFilter = filterValue.toLocaleLowerCase();
+	const options = this.getOption("options", []);
+	if (!isArray(options)) {
+		return false;
+	}
+
+	return options.some((option) => {
+		const value = isObject(option) ? option.value : option;
+		const label = isObject(option) ? option.label : option;
+		const normalizedLabel = String(label ?? "")
+			.trim()
+			.toLocaleLowerCase();
+
+		return (
+			normalizedLabel === normalizedFilter ||
+			areLookupValuesEqual.call(this, value, candidate.value)
+		);
+	});
+}
+
+/**
+ * @private
+ * @returns {HTMLElement|null}
+ */
+function ensureCreateOptionElement() {
+	if (!this.shadowRoot) {
+		return null;
+	}
+
+	const element = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="create-option"]`,
+	);
+	if (!(element instanceof HTMLElement)) {
+		return null;
+	}
+
+	if (this[createOptionEventsAttachedSymbol] !== true) {
+		const activate = (event) => {
+			if (this.getOption("disabled") === true) {
+				return;
+			}
+			event.preventDefault();
+			createFilteredOption.call(this).catch((error) => {
+				addErrorAttribute(this, error);
+			});
+		};
+		const types = new Set(["click", ...this.getOption("toggleEventType", [])]);
+		for (const type of types) {
+			element.addEventListener(type, activate);
+		}
+		this[createOptionEventsAttachedSymbol] = true;
+	}
+
+	this[createOptionElementSymbol] = element;
+	return element;
+}
+
+/**
+ * @private
+ */
+function updateCreateOptionAction() {
+	const element = ensureCreateOptionElement.call(this);
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+
+	let candidate = null;
+	const filterValue = getRawFilterInputValue.call(this);
+	if (
+		this.getOption("features.createOption") === true &&
+		this.getOption("disabled") !== true &&
+		getFilterMode.call(this) !== FILTER_MODE_DISABLED &&
+		filterValue !== ""
+	) {
+		try {
+			candidate = buildCreateOptionCandidate.call(this, filterValue);
+			if (
+				candidate &&
+				hasEquivalentCreateOption.call(this, candidate, filterValue)
+			) {
+				candidate = null;
+			}
+		} catch (error) {
+			addErrorAttribute(this, error);
+		}
+	}
+
+	this[createOptionCandidateSymbol] = candidate;
+	if (!candidate) {
+		element.setAttribute(`${ATTRIBUTE_PREFIX}visibility`, "hidden");
+		element.removeAttribute(`${ATTRIBUTE_PREFIX}focused`);
+		return;
+	}
+
+	const template = this.getOption("labels.create-option", "Add “${label}”");
+	const text = new Formatter({
+		label: candidate.label,
+		value: getSelectionValueLabel.call(this, candidate.value),
+	}).format(template);
+	const button = element.querySelector("button");
+	const label = element.querySelector(
+		`[${ATTRIBUTE_ROLE}="create-option-label"]`,
+	);
+	if (button instanceof HTMLButtonElement) {
+		button.className = this.getOption(
+			"classes.createOption",
+			"monster-badge-primary",
+		);
+		button.setAttribute("aria-label", text);
+	}
+	element.setAttribute("aria-label", text);
+	if (label instanceof HTMLElement) {
+		label.textContent = text;
+	}
+	element.setAttribute(`${ATTRIBUTE_PREFIX}visibility`, "visible");
+}
+
+/**
+ * Waits until the updater has projected a newly appended option.
+ *
+ * @private
+ * @param {*} value
+ * @returns {Promise<HTMLInputElement>}
+ */
+function waitForCreatedOptionControl(value) {
+	return new Promise((resolve, reject) => {
+		const startedAt = Date.now();
+		const find = () => {
+			for (const input of this[optionsElementSymbol].querySelectorAll(
+				`[${ATTRIBUTE_ROLE}="option-control"]`,
+			)) {
+				if (
+					input instanceof HTMLInputElement &&
+					input.value === String(value)
+				) {
+					return input;
+				}
+			}
+			return null;
+		};
+		const poll = () => {
+			const input = find();
+			if (input) {
+				resolve(input);
+				return;
+			}
+			if (Date.now() - startedAt >= 1000) {
+				reject(new Error("Created option was not rendered."));
+				return;
+			}
+			setTimeout(poll, 10);
+		};
+		poll();
+	});
+}
+
+/**
+ * @private
+ * @returns {Promise<boolean>}
+ */
+async function createFilteredOption() {
+	updateCreateOptionAction.call(this);
+	const candidate = this[createOptionCandidateSymbol];
+	if (!candidate) {
+		return false;
+	}
+
+	const options = this.getOption("options", []);
+	const nextOptions = (isArray(options) ? options : []).map((option) => {
+		return isObject(option) ? { ...option, filtered: undefined } : option;
+	});
+	nextOptions.push({
+		...candidate,
+		visibility: candidate.visibility ?? "visible",
+		filtered: undefined,
+	});
+
+	for (const input of [
+		this[inlineFilterElementSymbol],
+		this[popperFilterElementSymbol],
+	]) {
+		if (input instanceof HTMLInputElement) {
+			input.value = "";
+		}
+	}
+	this[lastFilterValueSymbol] = "";
+	bumpFilterInputVersion.call(this);
+	this[createOptionCandidateSymbol] = null;
+	this[createOptionElementSymbol]?.setAttribute(
+		`${ATTRIBUTE_PREFIX}visibility`,
+		"hidden",
+	);
+
+	this.setOption("options", nextOptions);
+	fireCustomEvent(this, "monster-options-set", { options: nextOptions });
+
+	const createdInput = await waitForCreatedOptionControl.call(
+		this,
+		candidate.value,
+	);
+	await new Promise((resolve) => setTimeout(resolve, 0));
+	const selection =
+		this.getOption("type") === "checkbox"
+			? [...this.getOption("selection", []), candidate]
+			: [candidate];
+	const selectedValues = new Set(
+		selection.map((item) => String(isObject(item) ? item.value : item)),
+	);
+	for (const input of this[optionsElementSymbol].querySelectorAll(
+		`[${ATTRIBUTE_ROLE}="option-control"]`,
+	)) {
+		if (input instanceof HTMLInputElement) {
+			input.checked = selectedValues.has(input.value);
+		}
+	}
+	createdInput.checked = true;
+	await setSelection.call(this, selection);
+	fireCustomEvent(this, "monster-option-created", { option: candidate });
+
+	if (this.getOption("features.closeOnSelect") === true) {
+		hide.call(this);
+	} else {
+		focusFilter.call(this, { preventScroll: true });
+	}
+
+	return true;
+}
+
 /**
  * @private
  * @param {string} value The value to look up.
@@ -3234,6 +3544,7 @@ function initOptionObserver() {
 				}
 
 				setSummaryAndControlText.call(self);
+				updateCreateOptionAction.call(self);
 			}).run();
 		}),
 	);
@@ -3351,6 +3662,34 @@ function getOptionElements() {
 	);
 }
 
+/**
+ * @private
+ * @returns {HTMLElement[]}
+ */
+function getNavigableOptionElements() {
+	if (!(this[optionsElementSymbol] instanceof HTMLElement)) {
+		return [];
+	}
+
+	const elements = Array.from(
+		this[optionsElementSymbol].querySelectorAll(`[${ATTRIBUTE_ROLE}=option]`),
+	);
+	const createOption = this.shadowRoot?.querySelector?.(
+		`[${ATTRIBUTE_ROLE}="create-option"]`,
+	);
+	if (createOption instanceof HTMLElement) {
+		elements.push(createOption);
+	}
+
+	return elements.filter((element) => {
+		return (
+			element instanceof HTMLElement &&
+			element.getAttribute(`${ATTRIBUTE_PREFIX}visibility`) === "visible" &&
+			element.getAttribute(`${ATTRIBUTE_PREFIX}filtered`) !== "true"
+		);
+	});
+}
+
 /**
  * With the help of this filter callback, values can be filtered out. Only if the filter function returns true, the value is taken for the map.
  *
@@ -3372,11 +3711,14 @@ function getOptionElements() {
  * @private
  */
 function calcAndSetOptionsDimension() {
-	const options = getOptionElements.call(this);
+	const options = Array.from(getOptionElements.call(this));
+	const createOption = this.shadowRoot?.querySelector?.(
+		`[${ATTRIBUTE_ROLE}="create-option"][${ATTRIBUTE_PREFIX}visibility="visible"]`,
+	);
 	const container = this[optionsElementSymbol];
 	const content =
 		this[popperElementSymbol]?.querySelector?.('[part="content"]');
-	if (!(container instanceof HTMLElement && options instanceof NodeList)) {
+	if (!(container instanceof HTMLElement && isArray(options))) {
 		return;
 	}
 
@@ -3395,7 +3737,7 @@ function calcAndSetOptionsDimension() {
 		visible++;
 	}
 
-	if (visible === 0) {
+	if (visible === 0 && !(createOption instanceof HTMLElement)) {
 		if (this.getOption("classes.statusOrRemoveBadge") === "error") {
 			this.setOption(
 				"messages.emptyOptions",
@@ -3442,11 +3784,21 @@ function calcAndSetOptionsDimension() {
 		geometry.availableHeight,
 		SELECT_MAX_POPPER_HEIGHT,
 	);
-	const listAvailableHeight = resolveSelectListAvailableHeight({
+	let listAvailableHeight = resolveSelectListAvailableHeight({
 		popperElement: this[popperElementSymbol],
 		contentElement: content,
 		popperMaxHeight,
 	});
+	if (createOption instanceof HTMLElement) {
+		const createStyle = getGlobal().getComputedStyle(createOption);
+		listAvailableHeight = Math.max(
+			0,
+			listAvailableHeight -
+				createOption.getBoundingClientRect().height -
+				readSelectBoxDimension(createStyle.marginTop) -
+				readSelectBoxDimension(createStyle.marginBottom),
+		);
+	}
 	const listDimension = resolveSelectListDimension({
 		visibleOptionHeights,
 		maxVisibleOptions: max,
@@ -3887,54 +4239,24 @@ function activateCurrentOption(direction) {
 		throw new Error("no shadow-root is defined");
 	}
 
-	let focused = this.shadowRoot.querySelector(`[${ATTRIBUTE_PREFIX}focused]`);
-
-	if (
-		!(focused instanceof HTMLElement) ||
-		focused.matches("[data-monster-visibility=hidden]")
-	) {
-		for (const [, e] of Object.entries(
-			this.shadowRoot.querySelectorAll(`[${ATTRIBUTE_ROLE}=option]`),
-		)) {
-			if (e.matches("[data-monster-visibility=visible]")) {
-				focused = e;
-				break;
-			}
-		}
+	const options = getNavigableOptionElements.call(this);
+	const current = this.shadowRoot.querySelector(`[${ATTRIBUTE_PREFIX}focused]`);
+	const currentIndex = options.indexOf(current);
+	let focused = null;
+	if (currentIndex === -1) {
+		focused = direction === FOCUS_DIRECTION_UP ? options.at(-1) : options[0];
+	} else if (direction === FOCUS_DIRECTION_DOWN) {
+		focused = options[currentIndex + 1] ?? current;
+	} else if (currentIndex > 0) {
+		focused = options[currentIndex - 1];
 	} else {
-		if (direction === FOCUS_DIRECTION_DOWN) {
-			while (focused.nextSibling) {
-				focused = focused.nextSibling;
-
-				if (
-					focused instanceof HTMLElement &&
-					focused.hasAttribute(ATTRIBUTE_ROLE) &&
-					focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
-					focused.matches("[data-monster-visibility=visible]") &&
-					focused.matches(":not([data-monster-filtered=true])")
-				) {
-					break;
-				}
-			}
-		} else {
-			let found = false;
-			while (focused.previousSibling) {
-				focused = focused.previousSibling;
-				if (
-					focused instanceof HTMLElement &&
-					focused.hasAttribute(ATTRIBUTE_ROLE) &&
-					focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
-					focused.matches("[data-monster-visibility=visible]") &&
-					focused.matches(":not([data-monster-filtered=true])")
-				) {
-					found = true;
-					break;
-				}
-			}
-			if (found === false) {
-				focusFilter.call(this, { preventScroll: true });
-			}
-		}
+		this.shadowRoot
+			.querySelectorAll(`[${ATTRIBUTE_PREFIX}focused]`)
+			.forEach((element) => {
+				element.removeAttribute(`${ATTRIBUTE_PREFIX}focused`);
+			});
+		focusFilter.call(this, { preventScroll: true });
+		return;
 	}
 
 	new Processing(() => {
@@ -4017,6 +4339,15 @@ function handleFilterKeyboardEvents(event) {
 	const shiftKey = event?.["shiftKey"];
 
 	switch (event?.["code"]) {
+		case "Enter":
+			updateCreateOptionAction.call(this);
+			if (this[createOptionCandidateSymbol]) {
+				createFilteredOption.call(this).catch((error) => {
+					addErrorAttribute(this, error);
+				});
+				event.preventDefault();
+			}
+			break;
 		case "Tab":
 			activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
 			event.preventDefault();
@@ -4053,6 +4384,7 @@ function handleFilterKeyboardEvents(event) {
  * @return {void} This method does not return anything.
  */
 function handleFilterInputEvents() {
+	updateCreateOptionAction.call(this);
 	const filterValue = getCurrentFilterInputValue.call(this);
 
 	if (filterValue === this[lastFilterValueSymbol]) {
@@ -4339,6 +4671,24 @@ function handleOptionKeyboardEvents(event) {
 	}
 }
 
+/**
+ * @private
+ * @param {KeyboardEvent} event
+ */
+function handleCreateOptionKeyboardEvents(event) {
+	switch (event?.code) {
+		case "Enter":
+		case "Space":
+			createFilteredOption.call(this).catch((error) => {
+				addErrorAttribute(this, error);
+			});
+			event.preventDefault();
+			break;
+		default:
+			handleOptionKeyboardEvents.call(this, event);
+	}
+}
+
 /**
  * @private
  * @return {string}
@@ -5235,8 +5585,7 @@ function show() {
 
 				delete this[lazyLoadRequestSymbol];
 				this[lazyLoadDoneSymbol] = false;
-				this[lazyLoadErrorSymbol] =
-					e instanceof Error ? e.message : String(e);
+				this[lazyLoadErrorSymbol] = e instanceof Error ? e.message : String(e);
 				addErrorAttribute(this, e);
 				setStatusOrRemoveBadges.call(this, "error");
 			});
@@ -5664,6 +6013,9 @@ function initEventHandler() {
 			case "filter":
 				handleFilterKeyboardEvents.call(self, event);
 				break;
+			case "create-option":
+				handleCreateOptionKeyboardEvents.call(self, event);
+				break;
 			case "option-label":
 			case "option-control":
 			case "option":
@@ -5755,6 +6107,8 @@ function initEventHandler() {
 	self.addEventListener("keydown", self[keyEventHandler]);
 
 	const callback = () => {
+		ensureCreateOptionElement.call(self);
+		updateCreateOptionAction.call(self);
 		if (this[debounceOptionsMutationObserverSymbol] instanceof DeadMansSwitch) {
 			try {
 				this[debounceOptionsMutationObserverSymbol].touch();
@@ -5962,6 +6316,8 @@ function initControlReferences() {
 	this[optionsElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=options]`,
 	);
+	ensureCreateOptionElement.call(this);
+	updateCreateOptionAction.call(this);
 	this[noOptionsAvailableElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}="no-options"]`,
 	);
@@ -6054,6 +6410,13 @@ function getTemplate() {
             <div part="content" class="flex" data-monster-replace="path:content">
                 <div part="options" data-monster-role="options" data-monster-insert="options path:options"
                      tabindex="-1"></div>
+                <div data-monster-role="create-option" role="option" aria-selected="false"
+                     data-monster-visibility="hidden" tabindex="-1">
+                    <button type="button" part="create-option" tabindex="-1">
+                        <span aria-hidden="true" data-monster-role="create-option-icon">+</span>
+                        <span data-monster-role="create-option-label"></span>
+                    </button>
+                </div>
             </div>
             <div part="pagination-footer" data-monster-role="pagination-footer">
                 <div part="remote-info"

package/source/components/form/state-button.mjs

@@ -14,6 +14,7 @@
 
 import { instanceSymbol } from "../../constants.mjs";
 import { registerCustomElement } from "../../dom/customelement.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
 import { isInteger } from "../../types/is.mjs";
 import { validateInstance, validateString } from "../../types/validate.mjs";
 import { Button } from "./button.mjs";
@@ -33,6 +34,7 @@ export { StateButton };
  * @since 1.5.0
  * @copyright Volker Schukai
  * @summary A beautiful button with icons
+ * @fires monster-state-changed - Fired when the visual state changes
  */
 class StateButton extends Button {
 	/**
@@ -111,7 +113,10 @@ class StateButton extends Button {
 			throw new Error("state not found");
 		}
 
-		this.setOption("current", validateInstance(obj, State));
+		const previousState = this.getState()?.state ?? "stateless";
+		const currentState = validateInstance(obj, State);
+		this.setOption("current", currentState);
+		dispatchStateChanged.call(this, previousState, currentState.state);
 
 		if (isInteger(timeout) && timeout > 0) {
 			this[timeoutSymbol] = setTimeout(() => {
@@ -128,7 +133,10 @@ class StateButton extends Button {
 	 * @return {StateButton}
 	 */
 	removeState() {
-		this.setOption("current", getStateInstanceFor("stateless"));
+		const previousState = this.getState()?.state ?? "stateless";
+		const currentState = getStateInstanceFor("stateless");
+		this.setOption("current", currentState);
+		dispatchStateChanged.call(this, previousState, currentState.state);
 		return this;
 	}
 
@@ -156,6 +164,23 @@ class StateButton extends Button {
 	}
 }
 
+/**
+ * @private
+ * @param {string} previousState
+ * @param {string} state
+ * @return {void}
+ */
+function dispatchStateChanged(previousState, state) {
+	if (previousState === state) {
+		return;
+	}
+
+	fireCustomEvent(this, "monster-state-changed", {
+		state,
+		previousState,
+	});
+}
+
 /**
  * @private
  * @return {string}

package/source/components/form/style/select.pcss

@@ -100,6 +100,10 @@ div[data-monster-role=popper] {
     z-index: var(--monster-z-index-popover);
 }
 
+div[data-monster-role=popper] > [part=content] {
+    flex-direction: column;
+}
+
 @media (prefers-color-scheme: light) {
     [data-monster-role=control] {
         background-color: var(--monster-bg-color-primary-1);
@@ -357,9 +361,44 @@ div[data-monster-role=selection] {
     outline-offset: -2px;
 }
 
+[data-monster-role=create-option] {
+    align-items: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    min-block-size: 2.75rem;
+    padding: var(--monster-select-option-padding, 2px 6px);
+    width: 100%;
+}
+
+[data-monster-role=create-option][data-monster-visibility=hidden] {
+    display: none;
+}
+
+[data-monster-role=create-option] > button {
+    appearance: none;
+    border: 0;
+    cursor: inherit;
+    display: inline-flex;
+    font-family: inherit;
+    gap: 0.4em;
+    pointer-events: none;
+}
+
+[data-monster-role=create-option][data-monster-focused=true] {
+    outline: 1px dashed var(--monster-color-selection-2);
+    outline-offset: -2px;
+}
+
+[data-monster-role=create-option-icon] {
+    font-size: 1.15em;
+    line-height: 0.75;
+}
+
 @media (prefers-color-scheme: dark) {
 
-    [data-monster-role=option][data-monster-focused=true] {
+    [data-monster-role=option][data-monster-focused=true],
+    [data-monster-role=create-option][data-monster-focused=true] {
         outline: 1px dashed var(--monster-color-selection-4);
     }
 }

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

@@ -29,11 +29,11 @@ try {
         --monster-select-control-min-block-size,var(--monster-control-min-block-size,2.5rem)
     );padding:var(--monster-select-control-padding,.4rem .6rem);margin:0;outline:none;box-sizing:border-box;accent-color:var(
         --monster-theme-accent,var(--monster-color-secondary-2)
-    );-o-border-image:initial;border-image:initial;border-width:var(--monster-theme-control-border-width);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-color:var(--monster-theme-control-border-color);background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:flex;align-items:center;overflow:hidden;width:-webkit-fill-available;width:-moz-available;width:fill-available}div[data-monster-role=popper]{z-index:var(--monster-z-index-popover)}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border-color:var(--monster-theme-control-border-color)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}:host([disabled]) [data-monster-role=control]{cursor:not-allowed}:host([disabled]) [data-monster-role=status-or-remove-badges],[data-monster-role=control][disabled] [data-monster-role=status-or-remove-badges]{display:none}div[data-monster-role=selection]{display:flex;gap:5px;margin:var(--monster-select-selection-margin,0 5px);flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:var(--monster-select-selection-flex-wrap,wrap);min-height:0}[data-monster-role=option-control]{block-size:var(--monster-select-option-control-size,1rem);flex:0 0 auto;inline-size:var(--monster-select-option-control-size,1rem);margin-right:8px;min-block-size:var(--monster-select-option-control-size,1rem);min-inline-size:var(--monster-select-option-control-size,1rem)}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;gap:7px}[data-monster-role=filter],[data-monster-role=popper-filter]{visibility:hidden;order:99999999;display:flex;flex-grow:200}[data-monster-role=filter].active{visibility:visible;min-width:40%;border:0;outline:none;background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);border-bottom:1px solid var(--monster-bg-color-primary-3)}.active[data-monster-role=filter][name=popper-filter]{width:calc(100% - var(--monster-border-width)*2);height:1.5em;padding:2px;margin:2.5em}.option-filter-control{margin:-1.1em -1.1em .3em;height:2.5em;background-color:var(--monster-bg-color-primary-2);display:flex;align-items:center}[data-monster-role=remove-badge]{order:2;height:16px;-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\");background-color:var(--monster-bg-color-primary-2);margin-left:5px}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{width:16px;min-height:16px;-webkit-mask-size:.8em;mask-size:.8em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center center;mask-position:center center}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-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\");background-color:var(--monster-bg-color-primary-4)}.open[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.empty[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.clear[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-error-1)}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-color-error-4)}}.loading[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4);animation-name:activity;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0,0,.2,1)}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;scrollbar-gutter:stable;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;overflow-x:hidden}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0}[data-monster-role=option]{padding:var(--monster-select-option-padding,2px 6px);align-items:center}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;min-width:0}[data-monster-role=option] label>div{justify-content:space-between;outline:none}[part=option-label]{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.selected{background-color:var(
+    );-o-border-image:initial;border-image:initial;border-width:var(--monster-theme-control-border-width);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-color:var(--monster-theme-control-border-color);background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:flex;align-items:center;overflow:hidden;width:-webkit-fill-available;width:-moz-available;width:fill-available}div[data-monster-role=popper]{z-index:var(--monster-z-index-popover)}div[data-monster-role=popper]>[part=content]{flex-direction:column}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border-color:var(--monster-theme-control-border-color)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}:host([disabled]) [data-monster-role=control]{cursor:not-allowed}:host([disabled]) [data-monster-role=status-or-remove-badges],[data-monster-role=control][disabled] [data-monster-role=status-or-remove-badges]{display:none}div[data-monster-role=selection]{display:flex;gap:5px;margin:var(--monster-select-selection-margin,0 5px);flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:var(--monster-select-selection-flex-wrap,wrap);min-height:0}[data-monster-role=option-control]{block-size:var(--monster-select-option-control-size,1rem);flex:0 0 auto;inline-size:var(--monster-select-option-control-size,1rem);margin-right:8px;min-block-size:var(--monster-select-option-control-size,1rem);min-inline-size:var(--monster-select-option-control-size,1rem)}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;gap:7px}[data-monster-role=filter],[data-monster-role=popper-filter]{visibility:hidden;order:99999999;display:flex;flex-grow:200}[data-monster-role=filter].active{visibility:visible;min-width:40%;border:0;outline:none;background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);border-bottom:1px solid var(--monster-bg-color-primary-3)}.active[data-monster-role=filter][name=popper-filter]{width:calc(100% - var(--monster-border-width)*2);height:1.5em;padding:2px;margin:2.5em}.option-filter-control{margin:-1.1em -1.1em .3em;height:2.5em;background-color:var(--monster-bg-color-primary-2);display:flex;align-items:center}[data-monster-role=remove-badge]{order:2;height:16px;-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\");background-color:var(--monster-bg-color-primary-2);margin-left:5px}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{width:16px;min-height:16px;-webkit-mask-size:.8em;mask-size:.8em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center center;mask-position:center center}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-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\");background-color:var(--monster-bg-color-primary-4)}.open[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.empty[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.clear[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-error-1)}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-color-error-4)}}.loading[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4);animation-name:activity;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0,0,.2,1)}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;scrollbar-gutter:stable;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;overflow-x:hidden}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0}[data-monster-role=option]{padding:var(--monster-select-option-padding,2px 6px);align-items:center}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;min-width:0}[data-monster-role=option] label>div{justify-content:space-between;outline:none}[part=option-label]{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.selected{background-color:var(
         --monster-theme-accent-subtle,var(--monster-bg-color-primary-2)
     );color:var(
         --monster-theme-accent,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{color:var(--monster-color-primary-2);background-color:var(--monster-bg-color-primary-2)}[data-monster-role=filter]::placeholder{color:var(--monster-color-primary-2);background-color:var(--monster-bg-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-width:var(--monster-border-width)!important;border-style:var(--monster-border-style)!important;border-color:var(--monster-bg-color-primary-4)!important}[data-monster-role=pagination-footer]{align-items:center;-moz-column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);display:flex;flex-wrap:wrap;justify-content:flex-end;min-width:0}[data-monster-role=remote-info]{flex:1 1 12rem;margin:var(--monster-select-pagination-footer-margin-top,.5rem) 0 0;min-width:0}[data-monster-role=remote-info]:empty{flex-basis:0;margin:0}[data-monster-role=remote-info] span{text-align:left;white-space:normal}[data-monster-role=pagination]{flex:0 0 auto;margin-left:auto;margin-top:var(--monster-select-pagination-footer-margin-top,.5rem);max-width:100%}[data-monster-role=pagination]::part(nav){justify-content:flex-end;width:auto}[data-monster-role=pagination]::part(list){grid-template-columns:repeat(3,auto);justify-content:end;margin-bottom:0;margin-top:0;width:auto}
+    )}[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}[data-monster-role=create-option]{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;min-block-size:2.75rem;padding:var(--monster-select-option-padding,2px 6px);width:100%}[data-monster-role=create-option][data-monster-visibility=hidden]{display:none}[data-monster-role=create-option]>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:inherit;display:inline-flex;font-family:inherit;gap:.4em;pointer-events:none}[data-monster-role=create-option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}[data-monster-role=create-option-icon]{font-size:1.15em;line-height:.75}@media (prefers-color-scheme:dark){[data-monster-role=create-option][data-monster-focused=true],[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{color:var(--monster-color-primary-2);background-color:var(--monster-bg-color-primary-2)}[data-monster-role=filter]::placeholder{color:var(--monster-color-primary-2);background-color:var(--monster-bg-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-width:var(--monster-border-width)!important;border-style:var(--monster-border-style)!important;border-color:var(--monster-bg-color-primary-4)!important}[data-monster-role=pagination-footer]{align-items:center;-moz-column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);display:flex;flex-wrap:wrap;justify-content:flex-end;min-width:0}[data-monster-role=remote-info]{flex:1 1 12rem;margin:var(--monster-select-pagination-footer-margin-top,.5rem) 0 0;min-width:0}[data-monster-role=remote-info]:empty{flex-basis:0;margin:0}[data-monster-role=remote-info] span{text-align:left;white-space:normal}[data-monster-role=pagination]{flex:0 0 auto;margin-left:auto;margin-top:var(--monster-select-pagination-footer-margin-top,.5rem);max-width:100%}[data-monster-role=pagination]::part(nav){justify-content:flex-end;width:auto}[data-monster-role=pagination]::part(list){grid-template-columns:repeat(3,auto);justify-content:end;margin-bottom:0;margin-top:0;width:auto}
 }`,
 		0,
 	);

package/test/cases/components/form/message-state-button.mjs

@@ -131,6 +131,40 @@ describe("MessageStateButton", function () {
 		});
 	});
 
+	describe("state changes", function () {
+		afterEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should expose inner state transitions on the public host", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			const events = [];
+			button.innerHTML = "Save";
+			button.addEventListener("monster-state-changed", (event) => {
+				events.push(event);
+			});
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					button.setState("successful");
+
+					expect(events).to.have.length(1);
+					expect(events[0].target).to.equal(button);
+					expect(events[0].detail).to.deep.equal({
+						state: "successful",
+						previousState: "stateless",
+					});
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
+
 	describe("lifecycle safety", function () {
 		afterEach(() => {
 			let mocks = document.getElementById("mocks");

package/test/cases/components/form/select.mjs

@@ -560,6 +560,147 @@ describe('Select', function () {
         }
     });
 
+    describe('Create missing filtered options', function () {
+        this.timeout(6000);
+
+        async function createSelect(options = {}) {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            const select = document.createElement('monster-select');
+            select.setOption('type', 'checkbox');
+            select.setOption('filter.mode', 'options');
+            select.setOption('filter.position', 'popper');
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'}
+            ]);
+            for (const [path, value] of Object.entries(options)) {
+                select.setOption(path, value);
+            }
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot?.querySelector(
+                    '[data-monster-role="filter"][name="popper-filter"]'
+                ) instanceof HTMLInputElement;
+            });
+
+            return select;
+        }
+
+        function enterFilterValue(select, value) {
+            const input = select.shadowRoot.querySelector(
+                '[data-monster-role="filter"][name="popper-filter"]'
+            );
+            input.value = value;
+            input.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+            return input;
+        }
+
+        afterEach(() => {
+            document.getElementById('mocks').innerHTML = '';
+        });
+
+        it('should stay opt-in and suppress empty or existing values', async function () {
+            const select = await createSelect();
+            const action = select.shadowRoot.querySelector(
+                '[data-monster-role="create-option"]'
+            );
+
+            enterFilterValue(select, 'Beta');
+            expect(action.getAttribute('data-monster-visibility')).to.equal('hidden');
+
+            select.setOption('features.createOption', true);
+            enterFilterValue(select, '   ');
+            expect(action.getAttribute('data-monster-visibility')).to.equal('hidden');
+
+            enterFilterValue(select, 'ALPHA');
+            expect(action.getAttribute('data-monster-visibility')).to.equal('hidden');
+        });
+
+        it('should create badge selections with mouse and touch', async function () {
+            const select = await createSelect({
+                'features.createOption': true,
+                'labels.create-option': 'Add tag: ${label}'
+            });
+
+            enterFilterValue(select, 'Beta Tag');
+            let action = select.shadowRoot.querySelector(
+                '[data-monster-role="create-option"]'
+            );
+            expect(action.getAttribute('data-monster-visibility')).to.equal('visible');
+            expect(action.textContent).to.contain('Add tag: Beta Tag');
+            expect(action.querySelector('button').className).to.contain('monster-badge-primary');
+            action.click();
+
+            await waitForCondition(() => select.value.includes('Beta Tag'));
+            expect(select.getOption('options').some((option) => {
+                return option.value === 'Beta Tag';
+            })).to.equal(true);
+
+            enterFilterValue(select, 'Touch Tag');
+            action = select.shadowRoot.querySelector(
+                '[data-monster-role="create-option"]'
+            );
+            action.dispatchEvent(new Event('touch', {
+                bubbles: true,
+                composed: true,
+                cancelable: true
+            }));
+
+            await waitForCondition(() => select.value.includes('Touch Tag'));
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll(
+                    '[data-monster-role="badge-label"]'
+                ).length === 2;
+            });
+            const badges = Array.from(select.shadowRoot.querySelectorAll(
+                '[data-monster-role="badge-label"]'
+            )).map((badge) => badge.textContent.trim());
+            expect(badges).to.include('Beta Tag');
+            expect(badges).to.include('Touch Tag');
+        });
+
+        it('should create a configured option from the filter with Enter', async function () {
+            const select = await createSelect({
+                'features.createOption': true,
+                'formatter.createOption': (filterValue) => ({
+                    label: filterValue.toUpperCase(),
+                    value: `tag:${filterValue.toLowerCase().replaceAll(' ', '-')}`
+                })
+            });
+            let createdOption;
+            select.addEventListener('monster-option-created', (event) => {
+                createdOption = event.detail.option;
+            });
+
+            const input = enterFilterValue(select, 'New Topic');
+            input.dispatchEvent(new KeyboardEvent('keydown', {
+                code: 'Enter',
+                bubbles: true,
+                composed: true,
+                cancelable: true
+            }));
+
+            await waitForCondition(() => select.value.includes('tag:new-topic'));
+            await waitForCondition(() => createdOption !== undefined);
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector(
+                    '[data-monster-role="badge-label"]'
+                );
+            });
+            expect(createdOption).to.deep.include({
+                label: 'NEW TOPIC',
+                value: 'tag:new-topic'
+            });
+            expect(select.shadowRoot.querySelector(
+                '[data-monster-role="badge-label"]'
+            ).textContent.trim()).to.equal('NEW TOPIC');
+        });
+    });
+
     describe('With fetch', function () {
 
         beforeEach((done) => {

package/test/cases/components/form/state-button.mjs

@@ -124,7 +124,52 @@ describe('StateButton', function () {
 
 
         });
+
+        it('should emit state transitions without duplicate events', function () {
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-state-button');
+            const events = [];
+            button.addEventListener('monster-state-changed', event => events.push(event));
+            mocks.appendChild(button);
+
+            button.setState('activity');
+            button.setState('activity');
+            button.setState('successful');
+            button.removeState();
+            button.removeState();
+
+            expect(events).to.have.length(3);
+            expect(events.map(event => event.detail)).to.deep.equal([
+                {state: 'activity', previousState: 'stateless'},
+                {state: 'successful', previousState: 'activity'},
+                {state: 'stateless', previousState: 'successful'},
+            ]);
+            expect(events.every(event => event.bubbles)).to.be.true;
+            expect(events.every(event => event.composed)).to.be.true;
+        });
+
+        it('should emit the automatic timeout transition', function (done) {
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-state-button');
+            const details = [];
+            button.addEventListener('monster-state-changed', event => details.push(event.detail));
+            mocks.appendChild(button);
+
+            button.setState('activity', 10);
+
+            setTimeout(() => {
+                try {
+                    expect(details).to.deep.equal([
+                        {state: 'activity', previousState: 'stateless'},
+                        {state: 'stateless', previousState: 'activity'},
+                    ]);
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            }, 30);
+        });
     });
 
 
-});
+});