@sbb-esta/lyne-elements 5.0.1 → 5.1.0

package/development/autocomplete.pure.js

@@ -1,3 +1,776 @@
-import { n as SbbInputAutocompleteEvent, t as SbbAutocompleteBaseElement } from "./autocomplete-base-element-DtwUdjCd.js";
-import { SbbAutocompleteElement } from "./autocomplete/autocomplete.component.js";
-export { SbbAutocompleteBaseElement, SbbAutocompleteElement, SbbInputAutocompleteEvent };
+import { __esDecorate, __runInitializers } from "tslib";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { html, isServer, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
+import { optionPanelStyles } from "./option.pure.js";
+
+//#region src/elements/autocomplete/autocomplete-base-element.scss?inline
+var autocomplete_base_element_default = ":host {\n  display: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  display: block;\n}\n";
+
+//#endregion
+//#region src/elements/autocomplete/autocomplete-base-element.ts
+/**
+* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
+* On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
+*/
+const ariaRoleOnHost$1 = isSafari;
+var SbbInputAutocompleteEvent = class extends Event {
+	get option() {
+		return this._option;
+	}
+	constructor(option) {
+		super("inputAutocomplete", {
+			bubbles: true,
+			composed: true
+		});
+		this._option = option;
+	}
+};
+/**
+* Base class for autocomplete components.
+*
+* @event {Event} change - The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
+* @event {InputEvent} input - The input event fires  on the autocomplete's trigger when the value has been changed as a direct result of a user action.
+*/
+let SbbAutocompleteBaseElement = (() => {
+	let _classSuper = SbbNegativeMixin(SbbOpenCloseBaseElement);
+	let _origin_decorators;
+	let _origin_initializers = [];
+	let _origin_extraInitializers = [];
+	let _trigger_decorators;
+	let _trigger_initializers = [];
+	let _trigger_extraInitializers = [];
+	let _preserveIconSpace_decorators;
+	let _preserveIconSpace_initializers = [];
+	let _preserveIconSpace_extraInitializers = [];
+	let _autoActiveFirstOption_decorators;
+	let _autoActiveFirstOption_initializers = [];
+	let _autoActiveFirstOption_extraInitializers = [];
+	let _displayWith_decorators;
+	let _displayWith_initializers = [];
+	let _displayWith_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let _autoSelectActiveOption_decorators;
+	let _autoSelectActiveOption_initializers = [];
+	let _autoSelectActiveOption_extraInitializers = [];
+	let _autoSelectActiveOptionOnBlur_decorators;
+	let _autoSelectActiveOptionOnBlur_initializers = [];
+	let _autoSelectActiveOptionOnBlur_extraInitializers = [];
+	let _requireSelection_decorators;
+	let _requireSelection_initializers = [];
+	let _requireSelection_extraInitializers = [];
+	let _position_decorators;
+	let _position_initializers = [];
+	let _position_extraInitializers = [];
+	return class SbbAutocompleteBaseElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_origin_decorators = [idReference(), property()];
+			_trigger_decorators = [idReference(), property()];
+			_preserveIconSpace_decorators = [forceType(), property({
+				attribute: "preserve-icon-space",
+				reflect: true,
+				type: Boolean
+			})];
+			_autoActiveFirstOption_decorators = [forceType(), property({
+				attribute: "auto-active-first-option",
+				type: Boolean
+			})];
+			_displayWith_decorators = [property({ attribute: false })];
+			_size_decorators = [property({ reflect: true })];
+			_autoSelectActiveOption_decorators = [forceType(), property({
+				attribute: "auto-select-active-option",
+				type: Boolean
+			})];
+			_autoSelectActiveOptionOnBlur_decorators = [forceType(), property({
+				attribute: "auto-select-active-option-on-blur",
+				type: Boolean
+			})];
+			_requireSelection_decorators = [forceType(), property({
+				attribute: "require-selection",
+				type: Boolean
+			})];
+			_position_decorators = [property()];
+			__esDecorate(this, null, _origin_decorators, {
+				kind: "accessor",
+				name: "origin",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "origin" in obj,
+					get: (obj) => obj.origin,
+					set: (obj, value) => {
+						obj.origin = value;
+					}
+				},
+				metadata: _metadata
+			}, _origin_initializers, _origin_extraInitializers);
+			__esDecorate(this, null, _trigger_decorators, {
+				kind: "accessor",
+				name: "trigger",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "trigger" in obj,
+					get: (obj) => obj.trigger,
+					set: (obj, value) => {
+						obj.trigger = value;
+					}
+				},
+				metadata: _metadata
+			}, _trigger_initializers, _trigger_extraInitializers);
+			__esDecorate(this, null, _preserveIconSpace_decorators, {
+				kind: "accessor",
+				name: "preserveIconSpace",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "preserveIconSpace" in obj,
+					get: (obj) => obj.preserveIconSpace,
+					set: (obj, value) => {
+						obj.preserveIconSpace = value;
+					}
+				},
+				metadata: _metadata
+			}, _preserveIconSpace_initializers, _preserveIconSpace_extraInitializers);
+			__esDecorate(this, null, _autoActiveFirstOption_decorators, {
+				kind: "accessor",
+				name: "autoActiveFirstOption",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "autoActiveFirstOption" in obj,
+					get: (obj) => obj.autoActiveFirstOption,
+					set: (obj, value) => {
+						obj.autoActiveFirstOption = value;
+					}
+				},
+				metadata: _metadata
+			}, _autoActiveFirstOption_initializers, _autoActiveFirstOption_extraInitializers);
+			__esDecorate(this, null, _displayWith_decorators, {
+				kind: "accessor",
+				name: "displayWith",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "displayWith" in obj,
+					get: (obj) => obj.displayWith,
+					set: (obj, value) => {
+						obj.displayWith = value;
+					}
+				},
+				metadata: _metadata
+			}, _displayWith_initializers, _displayWith_extraInitializers);
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			__esDecorate(this, null, _autoSelectActiveOption_decorators, {
+				kind: "accessor",
+				name: "autoSelectActiveOption",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "autoSelectActiveOption" in obj,
+					get: (obj) => obj.autoSelectActiveOption,
+					set: (obj, value) => {
+						obj.autoSelectActiveOption = value;
+					}
+				},
+				metadata: _metadata
+			}, _autoSelectActiveOption_initializers, _autoSelectActiveOption_extraInitializers);
+			__esDecorate(this, null, _autoSelectActiveOptionOnBlur_decorators, {
+				kind: "accessor",
+				name: "autoSelectActiveOptionOnBlur",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "autoSelectActiveOptionOnBlur" in obj,
+					get: (obj) => obj.autoSelectActiveOptionOnBlur,
+					set: (obj, value) => {
+						obj.autoSelectActiveOptionOnBlur = value;
+					}
+				},
+				metadata: _metadata
+			}, _autoSelectActiveOptionOnBlur_initializers, _autoSelectActiveOptionOnBlur_extraInitializers);
+			__esDecorate(this, null, _requireSelection_decorators, {
+				kind: "accessor",
+				name: "requireSelection",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "requireSelection" in obj,
+					get: (obj) => obj.requireSelection,
+					set: (obj, value) => {
+						obj.requireSelection = value;
+					}
+				},
+				metadata: _metadata
+			}, _requireSelection_initializers, _requireSelection_extraInitializers);
+			__esDecorate(this, null, _position_decorators, {
+				kind: "accessor",
+				name: "position",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "position" in obj,
+					get: (obj) => obj.position,
+					set: (obj, value) => {
+						obj.position = value;
+					}
+				},
+				metadata: _metadata
+			}, _position_initializers, _position_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.styles = [
+				popoverResetStyles,
+				scrollbarStyles,
+				optionPanelStyles,
+				unsafeCSS(autocomplete_base_element_default)
+			];
+		}
+		#origin_accessor_storage;
+		/**
+		* The element where the autocomplete will attach.
+		* If not set, as fallback there are two elements which can act as origin with following priority order:
+		* 1. `sbb-form-field` if it is an ancestor.
+		* 2. trigger element if set.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get origin() {
+			return this.#origin_accessor_storage;
+		}
+		set origin(value) {
+			this.#origin_accessor_storage = value;
+		}
+		#trigger_accessor_storage;
+		/**
+		* The input element that will trigger the autocomplete opening.
+		* By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
+		* If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get trigger() {
+			return this.#trigger_accessor_storage;
+		}
+		set trigger(value) {
+			this.#trigger_accessor_storage = value;
+		}
+		#preserveIconSpace_accessor_storage;
+		/** Whether the icon space is preserved when no icon is set. */
+		get preserveIconSpace() {
+			return this.#preserveIconSpace_accessor_storage;
+		}
+		set preserveIconSpace(value) {
+			this.#preserveIconSpace_accessor_storage = value;
+		}
+		#autoActiveFirstOption_accessor_storage;
+		/** Whether the first option is automatically activated when the autocomplete is opened. */
+		get autoActiveFirstOption() {
+			return this.#autoActiveFirstOption_accessor_storage;
+		}
+		set autoActiveFirstOption(value) {
+			this.#autoActiveFirstOption_accessor_storage = value;
+		}
+		#displayWith_accessor_storage;
+		/** Function that maps an option's control value to its display value in the trigger. */
+		get displayWith() {
+			return this.#displayWith_accessor_storage;
+		}
+		set displayWith(value) {
+			this.#displayWith_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size variant, either s (lean theme default) or m (standard theme default).
+		* When placed inside an `<sbb-form-field>`, the size is inherited from the form field.
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		#autoSelectActiveOption_accessor_storage;
+		/** Whether the active option should be selected as the user is navigating. */
+		get autoSelectActiveOption() {
+			return this.#autoSelectActiveOption_accessor_storage;
+		}
+		set autoSelectActiveOption(value) {
+			this.#autoSelectActiveOption_accessor_storage = value;
+		}
+		#autoSelectActiveOptionOnBlur_accessor_storage;
+		/**
+		* When enabled, the active option is automatically selected on blur.
+		* This is an experimental feature. It might be subject to changes.
+		*/
+		get autoSelectActiveOptionOnBlur() {
+			return this.#autoSelectActiveOptionOnBlur_accessor_storage;
+		}
+		set autoSelectActiveOptionOnBlur(value) {
+			this.#autoSelectActiveOptionOnBlur_accessor_storage = value;
+		}
+		#requireSelection_accessor_storage;
+		/**
+		* Whether the user is required to make a selection when they're interacting with the
+		* autocomplete. If the user moves away from the autocomplete without selecting an option from
+		* the list, the value will be reset. If the user opens the panel and closes it without
+		* interacting or selecting a value, the initial value will be kept.
+		*/
+		get requireSelection() {
+			return this.#requireSelection_accessor_storage;
+		}
+		set requireSelection(value) {
+			this.#requireSelection_accessor_storage = value;
+		}
+		#position_accessor_storage;
+		/**
+		* The position of the autocomplete panel relative to the trigger.
+		* @default 'auto'
+		*/
+		get position() {
+			return this.#position_accessor_storage;
+		}
+		set position(value) {
+			this.#position_accessor_storage = value;
+		}
+		/** Returns the element where the autocomplete overlay is attached to. */
+		get originElement() {
+			return this.origin ?? this.closest?.("sbb-form-field")?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.trigger ?? null;
+		}
+		/** Returns the trigger element. */
+		get triggerElement() {
+			return this._triggerElement ?? null;
+		}
+		constructor() {
+			super();
+			this.#origin_accessor_storage = __runInitializers(this, _origin_initializers, null);
+			this.#trigger_accessor_storage = (__runInitializers(this, _origin_extraInitializers), __runInitializers(this, _trigger_initializers, null));
+			this.#preserveIconSpace_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _preserveIconSpace_initializers, false));
+			this.#autoActiveFirstOption_accessor_storage = (__runInitializers(this, _preserveIconSpace_extraInitializers), __runInitializers(this, _autoActiveFirstOption_initializers, false));
+			this.#displayWith_accessor_storage = (__runInitializers(this, _autoActiveFirstOption_extraInitializers), __runInitializers(this, _displayWith_initializers, null));
+			this.#size_accessor_storage = (__runInitializers(this, _displayWith_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this.#autoSelectActiveOption_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _autoSelectActiveOption_initializers, false));
+			this.#autoSelectActiveOptionOnBlur_accessor_storage = (__runInitializers(this, _autoSelectActiveOption_extraInitializers), __runInitializers(this, _autoSelectActiveOptionOnBlur_initializers, false));
+			this.#requireSelection_accessor_storage = (__runInitializers(this, _autoSelectActiveOptionOnBlur_extraInitializers), __runInitializers(this, _requireSelection_initializers, false));
+			this.#position_accessor_storage = (__runInitializers(this, _requireSelection_extraInitializers), __runInitializers(this, _position_initializers, "auto"));
+			this._triggerElement = __runInitializers(this, _position_extraInitializers);
+			this.activeOption = null;
+			this.pendingAutoSelectedOption = null;
+			this._resizeObserver = new ResizeController(this, {
+				target: null,
+				skipInitial: true,
+				callback: (() => {
+					let timeoutId;
+					return () => {
+						clearTimeout(timeoutId);
+						timeoutId = setTimeout(() => {
+							if (this.state !== "closed") this._setOverlayPosition();
+						}, 10);
+					};
+				})()
+			});
+			/** Listens to the changes on the `disabled` or `readonly` attribute of the trigger. */
+			this._triggerAttributeObserver = !isServer ? new MutationObserver((mutations) => {
+				const input = mutations[0].target;
+				if (input.hasAttribute("disabled") || input.hasAttribute("readonly")) this.close();
+			}) : null;
+			this._isPointerDownEventOnMenu = false;
+			this._escapableOverlayController = new SbbEscapableOverlayController(this);
+			this._optionsCount = 0;
+			/** Tracks input from keyboard. */
+			this._lastUserInput = null;
+			/** If true, the 'change' event source is an option selection or a 'requireSelection' field cleanup */
+			this._isCustomChangeEvent = false;
+			this._pointerDownListener = (event) => {
+				this._isPointerDownEventOnMenu = isEventOnElement(this._overlay, event);
+			};
+			this._closeOnBackdropClick = (event) => {
+				if (!this._isPointerDownEventOnMenu && !isEventOnElement(this._overlay, event) && !isEventOnElement(this.originElement, event)) this.close();
+			};
+			this.addEventListener?.("optionselected", (e) => this.onOptionSelected(e));
+			this.addEventListener?.("ɵoptgroupslotchange", () => this._handleSlotchange(), { capture: true });
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-form-field"), {
+				negative: (e) => {
+					this.negative = e.negative;
+					this.syncNegative();
+				},
+				borderless: (e) => this.toggleState("option-panel-origin-borderless", e.borderless)
+			}));
+		}
+		/** Opens the autocomplete. */
+		open() {
+			if (this.state === "opening" || this.state === "opened" || !this._overlay || this.options.length === 0 || this._readonly() || !this.dispatchBeforeOpenEvent()) return;
+			this.showPopover?.();
+			this.state = "opening";
+			this.triggerElement?.toggleAttribute("data-expanded", true);
+			const originElement = this.originElement;
+			if (!originElement) throw new Error("Cannot find the origin element. Please specify a valid element or check the usage of the \"origin\" property from the documentation");
+			this._setOverlayPosition(originElement);
+			this._setNextActiveOptionIfAutoActiveFirstOption();
+			this._attachOpenPanelEvents();
+			this._escapableOverlayController.connect();
+			if (this._isZeroAnimationDuration()) this._handleOpening();
+		}
+		/** Closes the autocomplete. */
+		close() {
+			if (this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent()) return;
+			if (this.pendingAutoSelectedOption) {
+				this.pendingAutoSelectedOption.selected = true;
+				this._setValueAndDispatchEvents(this.pendingAutoSelectedOption, true);
+			}
+			this.state = "closing";
+			this.triggerElement?.removeAttribute("data-expanded");
+			this._openPanelEventsController.abort();
+			if (this.originElement) this._resizeObserver.unobserve(this.originElement);
+			if (this._isZeroAnimationDuration()) this._handleClosing();
+		}
+		_isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-options-panel-animation-duration");
+		}
+		connectedCallback() {
+			this.popover = "manual";
+			super.connectedCallback();
+			if (ariaRoleOnHost$1) this.id ||= this.overlayId;
+			if (this.hasUpdated) this._componentSetup();
+			this.syncNegative();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("negative")) this.syncNegative();
+			if (changedProperties.has("autoActiveFirstOption") && this.isOpen) this._setNextActiveOptionIfAutoActiveFirstOption();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._componentSetup();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._triggerElement = null;
+			this._triggerAbortController?.abort();
+			this._openPanelEventsController?.abort();
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (isServer || !this.hasUpdated) return;
+			if (!name || name === "trigger") this._configureTrigger();
+			else if ((!name || name === "origin") && this.isOpen) this._setOverlayPosition();
+		}
+		/** When an option is selected, update the input value and close the autocomplete. */
+		onOptionSelected(event) {
+			const target = event.target;
+			this._setValueAndDispatchEvents(target);
+			this.close();
+		}
+		/**
+		* A 'pending selection' sets the option value in the input element without emitting events.
+		* A 'pending selection' is confirmed when the panel closes. Any other user interaction
+		* will reset the pending value.
+		*/
+		setPendingSelection(activeOption) {
+			this.pendingAutoSelectedOption = activeOption;
+			this._setInputValue(activeOption);
+		}
+		_setValueAndDispatchEvents(selectedOption, preventFocus = false) {
+			this.options.filter((option) => option !== selectedOption && option.selected).forEach((option) => option.selected = false);
+			this.pendingAutoSelectedOption = null;
+			if (this.triggerElement) {
+				this._setInputValue(selectedOption);
+				this._isCustomChangeEvent = true;
+				this.triggerElement.dispatchEvent(new Event("change", { bubbles: true }));
+				this.triggerElement.dispatchEvent(new InputEvent("input", {
+					bubbles: true,
+					composed: true
+				}));
+				this._lastUserInput = null;
+				this.triggerElement.dispatchEvent(new SbbInputAutocompleteEvent(selectedOption));
+				if (!preventFocus) this.triggerElement.focus();
+			}
+		}
+		/** Set the option value within the input element */
+		_setInputValue(option) {
+			if (!this.triggerElement) return;
+			const toDisplay = this.displayWith?.(option.value) ?? option.value;
+			Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.triggerElement, toDisplay);
+		}
+		_handleSlotchange() {
+			this._highlightOptions(this.triggerElement?.value);
+			const currentElements = Array.from(this.querySelectorAll("*"));
+			this._previousElements?.forEach((e) => this._resizeObserver.unobserve(e));
+			this._previousElements = currentElements;
+			this._previousElements.forEach((e) => this._resizeObserver.observe(e));
+			/**
+			* It's possible to filter out options with an opened panel on input change.
+			* In this case, the panel's position must be recalculated considering the new option's list.
+			*/
+			if (this.isOpen) {
+				this._setOverlayPosition();
+				this._setNextActiveOptionIfAutoActiveFirstOption();
+				if (this._optionsCount > 0 && this.options.length === 0) this.close();
+			} else if (document?.activeElement === this.triggerElement && this._optionsCount === 0 && this.options.length > 0) this.open();
+			this._optionsCount = this.options.length;
+		}
+		_setNextActiveOptionIfAutoActiveFirstOption() {
+			if (this.autoActiveFirstOption) {
+				this.resetActiveElement();
+				this.setNextActiveOption();
+			}
+		}
+		/** The autocomplete should inherit 'readonly' state from the trigger. */
+		_readonly() {
+			return this.triggerElement?.hasAttribute("readonly") ?? false;
+		}
+		_componentSetup() {
+			if (isServer) return;
+			this._configureTrigger();
+		}
+		_configureTrigger() {
+			const triggerElement = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
+			if (triggerElement === this.triggerElement) return;
+			this._triggerAbortController?.abort();
+			removeAriaComboBoxAttributes(this.triggerElement);
+			this.triggerElement?.removeAttribute("data-expanded");
+			this._triggerElement = triggerElement;
+			if (!this.triggerElement) return;
+			const originElement = this.originElement;
+			if (this.triggerElement === originElement && this.isOpen) this._setOverlayPosition(originElement);
+			this._triggerAttributeObserver?.observe(this.triggerElement, {
+				attributes: true,
+				attributeFilter: ["disabled", "readonly"]
+			});
+			this.setTriggerAttributes(this.triggerElement);
+			this._triggerAbortController = new AbortController();
+			this.triggerElement.addEventListener("focus", () => this.open(), { signal: this._triggerAbortController.signal });
+			this.triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal });
+			this.triggerElement.addEventListener("input", (event) => {
+				const value = event.target.value;
+				if (value && event.isTrusted) this.open();
+				this._highlightOptions(value);
+				this._lastUserInput = value;
+				this.pendingAutoSelectedOption = null;
+			}, { signal: this._triggerAbortController.signal });
+			this.triggerElement.addEventListener("change", (event) => {
+				/**
+				* In 'requireSelection' mode, we block the native change events and
+				* let only pass the ones that come with a valid value (when an option is selected)
+				*/
+				if (this.requireSelection && !this._isCustomChangeEvent) event.stopImmediatePropagation();
+				this._isCustomChangeEvent = false;
+			}, {
+				signal: this._triggerAbortController.signal,
+				capture: true
+			});
+			this.triggerElement.addEventListener("keydown", (event) => this._closedPanelKeyboardInteraction(event), {
+				signal: this._triggerAbortController.signal,
+				capture: true
+			});
+			this.triggerElement.addEventListener("blur", (e) => {
+				if (this.contains(e.relatedTarget)) return;
+				if (this.autoSelectActiveOptionOnBlur && this.activeOption && this._lastUserInput && this.triggerElement?.value) {
+					this.activeOption.selected = true;
+					this._setValueAndDispatchEvents(this.activeOption, true);
+				}
+				if (this.requireSelection && this.triggerElement && this._lastUserInput != null && !this.pendingAutoSelectedOption) {
+					Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.triggerElement, "");
+					this._highlightOptions("");
+					this._isCustomChangeEvent = true;
+					this.triggerElement.dispatchEvent(new Event("change", { bubbles: true }));
+					this.triggerElement.dispatchEvent(new InputEvent("input", {
+						bubbles: true,
+						composed: true
+					}));
+				}
+				this.close();
+			}, {
+				signal: this._triggerAbortController.signal,
+				capture: true
+			});
+		}
+		_setOverlayPosition(originElement = this.originElement) {
+			if (!originElement) return;
+			setOverlayPosition(this._overlay, originElement, this._overlay, this.shadowRoot.querySelector(".sbb-option-panel__overlay-container"), this, this.position);
+		}
+		/**
+		* On open/close animation end.
+		* In rare cases it can be that the animationEnd event is triggered twice.
+		* To avoid entering a corrupt state, exit when state is not expected.
+		*/
+		_onAnimationEnd(event) {
+			if (event.animationName === "open" && this.state === "opening") this._handleOpening();
+			else if (event.animationName === "close" && this.state === "closing") this._handleClosing();
+		}
+		_handleOpening() {
+			this.state = "opened";
+			if (this.originElement) this._resizeObserver.observe(this.originElement);
+			this.triggerElement?.setAttribute("aria-expanded", "true");
+			this.dispatchOpenEvent();
+		}
+		_handleClosing() {
+			this.state = "closed";
+			this.hidePopover?.();
+			this.triggerElement?.setAttribute("aria-expanded", "false");
+			this.resetActiveElement();
+			this._overlay.scrollTop = 0;
+			this._escapableOverlayController.disconnect();
+			this.dispatchCloseEvent();
+		}
+		_attachOpenPanelEvents() {
+			this._openPanelEventsController = new AbortController();
+			document.addEventListener("scroll", () => this._setOverlayPosition(), {
+				passive: true,
+				signal: this._openPanelEventsController.signal,
+				capture: true
+			});
+			window.addEventListener("resize", () => this._setOverlayPosition(), {
+				passive: true,
+				signal: this._openPanelEventsController.signal
+			});
+			window.addEventListener("pointerdown", (ev) => this._pointerDownListener(ev), { signal: this._openPanelEventsController.signal });
+			window.addEventListener("pointerup", (ev) => this._closeOnBackdropClick(ev), { signal: this._openPanelEventsController.signal });
+			this.addEventListener("ɵdisabledchange", () => {
+				if (this.activeOption?.disabled) this.resetActiveElement();
+				this._setNextActiveOptionIfAutoActiveFirstOption();
+			}, { signal: this._openPanelEventsController.signal });
+			this.triggerElement?.addEventListener("keydown", (event) => this.openedPanelKeyboardInteraction(event), {
+				signal: this._openPanelEventsController.signal,
+				capture: true
+			});
+		}
+		_closedPanelKeyboardInteraction(event) {
+			if (this.state === "opening" || this.state === "opened") return;
+			switch (event.key) {
+				case "ArrowDown":
+				case "ArrowUp":
+					this.open();
+					break;
+			}
+		}
+		/** Highlight the searched text on the options. */
+		_highlightOptions(searchTerm) {
+			if (searchTerm === null || searchTerm === void 0) return;
+			this.options.forEach((option) => option.highlight(searchTerm));
+		}
+		render() {
+			return html`
+      <div class="sbb-option-panel__overlay-container">
+        <div
+          class="sbb-option-panel__overlay ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
+          role=${!ariaRoleOnHost$1 ? this.panelRole : nothing}
+          id=${!ariaRoleOnHost$1 ? this.overlayId : nothing}
+          tabindex="-1"
+          @animationend=${this._onAnimationEnd}
+          ${ref((overlayRef) => this._overlay = overlayRef)}
+        >
+          <slot @slotchange=${this._handleSlotchange}></slot>
+        </div>
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/autocomplete/autocomplete.component.ts
+let nextId = 0;
+/**
+* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
+* On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
+*/
+const ariaRoleOnHost = isSafari;
+/**
+* Combined with a native input, it displays a panel with a list of available options.
+*
+* @slot - Use the unnamed slot to add `sbb-option` or `sbb-optgroup` elements to the `sbb-autocomplete`.
+* @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+* @cssprop [--sbb-options-panel-max-height] - Maximum height of the options panel.
+* If the calculated remaining space is smaller, the value gets ignored.
+*/
+var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
+	constructor() {
+		super(...arguments);
+		this.overlayId = `sbb-autocomplete-${++nextId}`;
+		this.panelRole = "listbox";
+	}
+	static {
+		this.elementName = "sbb-autocomplete";
+	}
+	static {
+		this.role = ariaRoleOnHost ? "listbox" : null;
+	}
+	get options() {
+		return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
+	}
+	syncNegative() {
+		this.querySelectorAll?.("sbb-divider, sbb-option-hint").forEach((el) => el.negative = this.negative);
+	}
+	openedPanelKeyboardInteraction(event) {
+		if (!this.isOpen) return;
+		switch (event.key) {
+			case "Enter":
+				this.selectByKeyboard(event);
+				break;
+			case "ArrowDown":
+			case "ArrowUp":
+				this.setNextActiveOption(event);
+				break;
+		}
+	}
+	selectByKeyboard(event) {
+		if (this.activeOption) {
+			event.preventDefault();
+			this.activeOption["selectViaUserInteraction"](true);
+		}
+	}
+	setNextActiveOption(event) {
+		const enabledOptions = this.options.filter((opt) => !opt.matches(":is(:state(disabled),[state--disabled])"));
+		this.activeOption?.setActive(false);
+		this.triggerElement.ariaActiveDescendantElement = null;
+		if (!enabledOptions.length) {
+			this.activeOption = null;
+			return;
+		}
+		const next = getNextElementIndex(event, this.activeOption ? enabledOptions.indexOf(this.activeOption) : -1, enabledOptions.length);
+		this.activeOption = enabledOptions[next];
+		this.activeOption.setActive(true);
+		this.triggerElement.ariaActiveDescendantElement = this.activeOption;
+		this.activeOption.scrollIntoView({ block: "nearest" });
+		if (event) event.preventDefault();
+		if (this.autoSelectActiveOption && event) this.setPendingSelection(this.activeOption);
+	}
+	resetActiveElement() {
+		this.activeOption?.setActive(false);
+		this.activeOption = null;
+		if (this.triggerElement) this.triggerElement.ariaActiveDescendantElement = null;
+	}
+	setTriggerAttributes(element) {
+		setAriaComboBoxAttributes(element, ariaRoleOnHost ? this.id : this.overlayId, false);
+	}
+};
+
+//#endregion
+export { SbbAutocompleteBaseElement, SbbAutocompleteElement, SbbInputAutocompleteEvent };