@schukai/monster 4.150.8 → 4.151.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",
@@ -2974,6 +2987,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 +3541,7 @@ function initOptionObserver() {
 				}
 
 				setSummaryAndControlText.call(self);
+				updateCreateOptionAction.call(self);
 			}).run();
 		}),
 	);
@@ -3351,6 +3659,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 +3708,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 +3734,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 +3781,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 +4236,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 +4336,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 +4381,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 +4668,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 +5582,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 +6010,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 +6104,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 +6313,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 +6407,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/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);
     }
 }