@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/select.pure.js

@@ -1,2 +1,810 @@
-import { t as SbbSelectElement } from "./select.component-3S8E6UwN.js";
-export { SbbSelectElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { html, isServer, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { until } from "lit/directives/until.js";
+import { SbbDisabledMixin, SbbEscapableOverlayController, SbbFormAssociatedMixin, SbbLanguageController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbUpdateSchedulerMixin, forceType, getNextElementIndex, getOverride, handleDistinctChange, i18nSelectionRequired, isEventOnElement, isNextjs, isSafari, isZeroAnimationDuration, popoverResetStyles, scrollbarStyles, setOrRemoveAttribute, setOverlayPosition } from "./core.js";
+import { optionPanelStyles } from "./option.pure.js";
+
+//#region src/elements/select/select.scss?inline
+var select_default = ":host {\n  --sbb-select-placeholder-fallback-color: var(--sbb-color-metal);\n  --sbb-select-placeholder-fallback-color: light-dark(\n    var(--sbb-color-metal),\n    var(--sbb-color-smoke)\n  );\n  --sbb-options-panel-internal-z-index: var(\n    --sbb-select-z-index,\n    var(--sbb-overlay-default-z-index)\n  );\n  display: block;\n}\n\n:host([negative]) {\n  --sbb-select-placeholder-fallback-color: var(--sbb-color-5);\n}\n\n.sbb-select__trigger {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: var(--sbb-cursor-default);\n  height: calc(1em * var(--sbb-typo-line-height-text));\n}\n:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger {\n  color: var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));\n  -webkit-text-fill-color: var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));\n}\n";
+
+//#endregion
+//#region src/elements/select/select.component.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 an "immediate parent" to the options, or else optgroups won't work.
+*/
+const ariaRoleOnHost = isSafari;
+let nextId = 0;
+/**
+* It displays a panel with selectable options.
+*
+* @slot - Use the unnamed slot to add options.
+* @cssprop [--sbb-select-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.
+* @overrideType value - (T = string | string[]) | null
+*/
+let SbbSelectElement = (() => {
+	let _classSuper = SbbUpdateSchedulerMixin(SbbDisabledMixin(SbbNegativeMixin(SbbRequiredMixin(SbbReadonlyMixin(SbbFormAssociatedMixin(SbbOpenCloseBaseElement))))));
+	let _instanceExtraInitializers = [];
+	let _placeholder_decorators;
+	let _placeholder_initializers = [];
+	let _placeholder_extraInitializers = [];
+	let _multiple_decorators;
+	let _multiple_initializers = [];
+	let _multiple_extraInitializers = [];
+	let _compareWith_decorators;
+	let _compareWith_initializers = [];
+	let _compareWith_extraInitializers = [];
+	let _disabled_decorators;
+	let _disabled_initializers = [];
+	let _disabled_extraInitializers = [];
+	let _set_value_decorators;
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let __displayValue_decorators;
+	let __displayValue_initializers = [];
+	let __displayValue_extraInitializers = [];
+	return class SbbSelectElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_placeholder_decorators = [forceType(), property()];
+			_multiple_decorators = [
+				forceType(),
+				handleDistinctChange((e, newValue) => e._onMultipleChanged(newValue)),
+				property({
+					reflect: true,
+					type: Boolean
+				})
+			];
+			_compareWith_decorators = [property({ attribute: false })];
+			_disabled_decorators = [
+				forceType(),
+				handleDistinctChange((e, newValue) => e._closeOnDisabledReadonlyChanged(newValue)),
+				property({
+					reflect: true,
+					type: Boolean
+				}),
+				getOverride((e, v) => v || e.isDisabledExternally())
+			];
+			_set_value_decorators = [property()];
+			_size_decorators = [property({ reflect: true })];
+			__displayValue_decorators = [state()];
+			__esDecorate(this, null, _placeholder_decorators, {
+				kind: "accessor",
+				name: "placeholder",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "placeholder" in obj,
+					get: (obj) => obj.placeholder,
+					set: (obj, value) => {
+						obj.placeholder = value;
+					}
+				},
+				metadata: _metadata
+			}, _placeholder_initializers, _placeholder_extraInitializers);
+			__esDecorate(this, null, _multiple_decorators, {
+				kind: "accessor",
+				name: "multiple",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "multiple" in obj,
+					get: (obj) => obj.multiple,
+					set: (obj, value) => {
+						obj.multiple = value;
+					}
+				},
+				metadata: _metadata
+			}, _multiple_initializers, _multiple_extraInitializers);
+			__esDecorate(this, null, _compareWith_decorators, {
+				kind: "accessor",
+				name: "compareWith",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "compareWith" in obj,
+					get: (obj) => obj.compareWith,
+					set: (obj, value) => {
+						obj.compareWith = value;
+					}
+				},
+				metadata: _metadata
+			}, _compareWith_initializers, _compareWith_extraInitializers);
+			__esDecorate(this, null, _disabled_decorators, {
+				kind: "accessor",
+				name: "disabled",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "disabled" in obj,
+					get: (obj) => obj.disabled,
+					set: (obj, value) => {
+						obj.disabled = value;
+					}
+				},
+				metadata: _metadata
+			}, _disabled_initializers, _disabled_extraInitializers);
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__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, __displayValue_decorators, {
+				kind: "accessor",
+				name: "_displayValue",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_displayValue" in obj,
+					get: (obj) => obj._displayValue,
+					set: (obj, value) => {
+						obj._displayValue = value;
+					}
+				},
+				metadata: _metadata
+			}, __displayValue_initializers, __displayValue_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-select";
+		}
+		static {
+			this.role = ariaRoleOnHost ? "listbox" : null;
+		}
+		static {
+			this.styles = [
+				popoverResetStyles,
+				scrollbarStyles,
+				optionPanelStyles,
+				unsafeCSS(select_default)
+			];
+		}
+		static {
+			this.events = {
+				change: "change",
+				input: "input",
+				displayvaluechange: "displayvaluechange",
+				beforeopen: "beforeopen",
+				open: "open",
+				beforeclose: "beforeclose",
+				close: "close"
+			};
+		}
+		#placeholder_accessor_storage;
+		/** The placeholder used if no value has been selected. */
+		get placeholder() {
+			return this.#placeholder_accessor_storage;
+		}
+		set placeholder(value) {
+			this.#placeholder_accessor_storage = value;
+		}
+		#multiple_accessor_storage;
+		/** Whether the select allows for multiple selection. */
+		get multiple() {
+			return this.#multiple_accessor_storage;
+		}
+		set multiple(value) {
+			this.#multiple_accessor_storage = value;
+		}
+		#compareWith_accessor_storage;
+		/** Function used to compare option values. */
+		get compareWith() {
+			return this.#compareWith_accessor_storage;
+		}
+		set compareWith(value) {
+			this.#compareWith_accessor_storage = value;
+		}
+		#disabled_accessor_storage;
+		get disabled() {
+			return this.#disabled_accessor_storage;
+		}
+		set disabled(value) {
+			this.#disabled_accessor_storage = value;
+		}
+		/** Value of the form element. */
+		set value(value) {
+			this._value = value;
+			this._isValueManuallyAssigned = true;
+			this._updateOptionsFromValue();
+		}
+		get value() {
+			return this._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;
+		}
+		/**
+		* Form type of element.
+		* @default 'select-one / select-multiple'
+		*/
+		get type() {
+			return this.multiple ? "select-multiple" : "select-one";
+		}
+		#_displayValue_accessor_storage;
+		/** The value displayed by the component. */
+		get _displayValue() {
+			return this.#_displayValue_accessor_storage;
+		}
+		set _displayValue(value) {
+			this.#_displayValue_accessor_storage = value;
+		}
+		/**
+		* The 'combobox' input element
+		* @internal
+		*/
+		get inputElement() {
+			return this._triggerElement ?? null;
+		}
+		/** Returns all SbbOptionElements from this sbb-select instance. */
+		get options() {
+			const options = [];
+			this.querySelectorAll?.("sbb-option").forEach((option) => {
+				customElements.upgrade(option);
+				options.push(option);
+			});
+			return options;
+		}
+		constructor() {
+			super();
+			this.#placeholder_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _placeholder_initializers, ""));
+			this.#multiple_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+			this.#compareWith_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _compareWith_initializers, (v1, v2) => v1 === v2));
+			this.#disabled_accessor_storage = (__runInitializers(this, _compareWith_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+			this._value = (__runInitializers(this, _disabled_extraInitializers), null);
+			this.#size_accessor_storage = __runInitializers(this, _size_initializers, null);
+			this.#_displayValue_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, __displayValue_initializers, null));
+			this._resizeObserver = (__runInitializers(this, __displayValue_extraInitializers), new ResizeController(this, {
+				target: null,
+				skipInitial: true,
+				callback: (() => {
+					let timeoutId;
+					return () => {
+						clearTimeout(timeoutId);
+						timeoutId = setTimeout(() => {
+							if (this.state !== "closed") this._setOverlayPosition();
+						}, 10);
+					};
+				})()
+			}));
+			this._originElement = null;
+			this._triggerElement = null;
+			this._escapableOverlayController = new SbbEscapableOverlayController(this);
+			this._overlayId = `sbb-select-${++nextId}`;
+			this._activeItemIndex = -1;
+			this._searchString = "";
+			this._didLoad = false;
+			this._isPointerDownEventOnMenu = false;
+			this._languageController = new SbbLanguageController(this);
+			this._isValueManuallyAssigned = 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?.("optionselectionchange", (e) => this._onOptionChanged(e));
+			this.addEventListener?.("optionLabelChanged", (e) => this._onOptionLabelChanged(e));
+			/** Forces the sbb-select to update his value. */
+			this.addEventListener?.("ɵoptionvaluechange", () => this._updateValueOptionState());
+			this.addEventListener?.("ɵoptgroupslotchange", () => this._updateValueOptionState(), { capture: true });
+			this.addEventListener?.("click", (e) => {
+				const target = e.target;
+				if (target.localName === "sbb-option") {
+					if (!this.multiple && !target.disabled) {
+						this.close();
+						this.focus();
+					}
+				} else this._toggleOpening();
+			});
+			this.addController(new MutationController(this, {
+				config: { attributeFilter: [
+					"aria-labelledby",
+					"aria-label",
+					"aria-describedby"
+				] },
+				callback: () => this._syncAriaLabels()
+			}));
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-form-field"), { negative: (e) => {
+				this.negative = e.negative;
+				this._syncNegative();
+			} }));
+		}
+		_syncAriaLabels() {
+			if (!this._triggerElement || isServer) return;
+			setOrRemoveAttribute(this._triggerElement, "aria-labelledby", this.getAttribute("aria-labelledby"));
+			setOrRemoveAttribute(this._triggerElement, "aria-label", this.getAttribute("aria-label"));
+			setOrRemoveAttribute(this._triggerElement, "aria-describedby", this.getAttribute("aria-describedby"));
+			if (!this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && this.internals.labels.length) this._triggerElement?.setAttribute("aria-label", Array.from(this.internals.labels, (label) => label.textContent).join(", "));
+		}
+		/** Opens the selection panel. */
+		open() {
+			if (this.state === "opening" || this.state === "opened" || !this._overlay || this.options.length === 0 || this.disabled || this.formDisabled || !this.dispatchBeforeOpenEvent()) return;
+			this.shadowRoot?.querySelector("[popover]")?.showPopover?.();
+			this.state = "opening";
+			this.internals.states.add("expanded");
+			this._setOverlayPosition();
+			this._escapableOverlayController.connect();
+			this._attachOpenPanelEvents();
+			if (this._isZeroAnimationDuration()) this._handleOpening();
+		}
+		/** Closes the selection panel. */
+		close() {
+			if (this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent()) return;
+			this.state = "closing";
+			this.internals.states.delete("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");
+		}
+		/** Gets the current displayed value. */
+		getDisplayValue() {
+			return this._displayValue ?? "";
+		}
+		_selectableOptions() {
+			return this.options.filter((opt) => !opt.matches(":is(:state(disabled),[state--disabled])"));
+		}
+		/** Listens to option changes. */
+		_onOptionChanged(event) {
+			const target = event.target;
+			if (target.selected) this._onOptionSelected(target);
+			else this._onOptionDeselected(target);
+		}
+		/** Listens to option changes. */
+		_onOptionLabelChanged(event) {
+			const target = event.target;
+			const selected = this._getSelected();
+			if (!Array.isArray(selected) && target !== selected || Array.isArray(selected) && !selected.includes(target)) return;
+			this._updateDisplayValue();
+		}
+		_updateDisplayValue() {
+			const selected = this._getSelected();
+			if (Array.isArray(selected)) this._displayValue = selected.map((o) => o.textContent?.trim()).join(", ") || null;
+			else if (selected) this._displayValue = selected?.textContent?.trim() || null;
+			else this._displayValue = null;
+			this.toggleState("has-display-value", !!this._displayValue);
+			/** @internal */
+			this.dispatchEvent(new Event("displayvaluechange", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+		/**
+		* The `value` property should be adapted when the `multiple` property changes:
+		*   - if it changes to true, the 'value' is set to an array;
+		*   - if it changes to false, the first available option is set as 'value' otherwise it's set to null.
+		*/
+		_onMultipleChanged(isChangingToMultiple) {
+			if (isChangingToMultiple) this._value = this._isValueManuallyAssigned || this.value != null ? [this.value] : [];
+			else if (Array.isArray(this.value)) this._value = this.value.length ? this.value[0] : null;
+			this._updateDisplayValue();
+		}
+		/**
+		* If the `disabled` or the `readonly` properties are set, and the panel is open, close it.
+		*/
+		_closeOnDisabledReadonlyChanged(newValue) {
+			if ((this.state === "opening" || this.state === "opened") && newValue) this.close();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._updateValueOptionState();
+			if (!isNextjs()) {
+				this.startUpdate();
+				this._setupSelect();
+			}
+		}
+		/** @internal */
+		focus() {
+			this._triggerElement?.focus();
+		}
+		/** @internal */
+		blur() {
+			this._triggerElement?.blur();
+		}
+		/**
+		* Removes element's first attribute whose qualified name is qualifiedName.
+		*
+		* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute)
+		* @internal We need to override this due to a hydration issue with Next.js.
+		*/
+		removeAttribute(qualifiedName) {
+			if (isNextjs() && qualifiedName === "defer-hydration" && !this._didLoad) this.updateComplete.then(() => this._setupSelect());
+			super.removeAttribute(qualifiedName);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			if (ariaRoleOnHost) this.id ||= this._overlayId;
+			this._syncNegative();
+			this._syncAriaLabels();
+			if (this._didLoad) {
+				this._setupOrigin();
+				this._setupTrigger();
+			}
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (!name && this.hasUpdated) setTimeout(() => this._syncAriaLabels());
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("negative")) this._syncNegative();
+			if (changedProperties.has("readOnly")) this._closeOnDisabledReadonlyChanged(this.readOnly);
+		}
+		disconnectedCallback() {
+			if (this._triggerElement) this.prepend(this._triggerElement);
+			super.disconnectedCallback();
+			this._openPanelEventsController?.abort();
+		}
+		/**
+		* The reset value is the attribute value (the setup value), null otherwise.
+		* @internal
+		*/
+		formResetCallback() {
+			this.value = this.hasAttribute("value") ? this.getAttribute("value") : null;
+		}
+		/**
+		* @internal
+		*/
+		formStateRestoreCallback(state, _reason) {
+			try {
+				const { value, manuallyAssigned } = JSON.parse(state);
+				this._isValueManuallyAssigned = manuallyAssigned;
+				this._value = value;
+				this._updateOptionsFromValue();
+			} catch {
+				console.warn(`Failed to restore sbb-select with state ${state}`);
+			}
+		}
+		formState() {
+			return JSON.stringify({
+				value: this.value,
+				manuallyAssigned: this._isValueManuallyAssigned
+			});
+		}
+		_syncNegative() {
+			this.querySelectorAll?.("sbb-divider, sbb-option-hint").forEach((el) => el.negative = this.negative);
+		}
+		shouldValidate(name) {
+			return super.shouldValidate(name) || name === "value" || name === "required";
+		}
+		validate() {
+			super.validate();
+			const value = Array.isArray(this.value) ? this.value : this.value === null ? [] : [this.value];
+			if (this.required && (this.options.every((o) => value.every((v) => !this.compareWith(v, o.value))) || !this._isValueManuallyAssigned && this.value == null)) this.setValidityFlag("valueMissing", i18nSelectionRequired[this._languageController.current]);
+			else this.removeValidityFlag("valueMissing");
+		}
+		_setupSelect() {
+			this._setupOrigin();
+			this._setupTrigger();
+			this._didLoad = true;
+			this.completeUpdate();
+		}
+		/** Sets the originElement; if the component is used in a sbb-form-field uses it, otherwise uses the parentElement. */
+		_setupOrigin() {
+			const formField = this.closest?.("sbb-form-field");
+			if (this._originElement) this._resizeObserver.unobserve(this._originElement);
+			this._originElement = formField?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.parentElement;
+			if (this._originElement) {
+				this.toggleState("option-panel-origin-borderless", formField?.hasAttribute?.("borderless"));
+				if (this.isOpen) this._resizeObserver.observe(this._originElement);
+			}
+		}
+		/**
+		* To assess screen-readers problems caused by the interaction between aria patterns and shadow DOM,
+		* we are forced to move the 'combobox' trigger element to the light DOM
+		*/
+		_setupTrigger() {
+			if (this.parentElement && this._triggerElement) this.parentElement.insertBefore?.(this._triggerElement, this);
+		}
+		_setOverlayPosition() {
+			if (!this._originElement) return;
+			setOverlayPosition(this._overlay, this._originElement, this._overlay, this.shadowRoot.querySelector(".sbb-option-panel__overlay-container"), this);
+		}
+		_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";
+			this._triggerElement?.setAttribute("aria-expanded", "true");
+			if (this._originElement) this._resizeObserver.observe(this._originElement);
+			this.dispatchOpenEvent();
+		}
+		_handleClosing() {
+			this.state = "closed";
+			this.shadowRoot?.querySelector("[popover]")?.hidePopover?.();
+			this._triggerElement?.setAttribute("aria-expanded", "false");
+			this._resetActiveElement();
+			this._overlay.scrollTop = 0;
+			this._escapableOverlayController.disconnect();
+			this.dispatchCloseEvent();
+		}
+		/** When an option is selected, updates the displayValue; it also closes the select if not `multiple`. */
+		_onOptionSelected(option) {
+			if (!this.multiple) this._value = option.value;
+			else if (!this.value) this._value = [option.value];
+			else if (Array.isArray(this.value) && !this.value.some((v) => this.compareWith(v, option.value))) this._value = [...this.value, option.value];
+			this._updateOptionsFromValue();
+			this._dispatchInputEvents();
+		}
+		/** When an option is unselected in `multiple`, removes it from value and updates displayValue. */
+		_onOptionDeselected(optionSelectionChange) {
+			if (this.multiple && Array.isArray(this.value)) {
+				this._value = this.value.filter((el) => !this.compareWith(el, optionSelectionChange.value));
+				this._updateOptionsFromValue();
+				this._dispatchInputEvents();
+			}
+		}
+		_dispatchInputEvents() {
+			/** The input event fires when the value has been changed as a direct result of a user action. */
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true
+			}));
+			/**
+			* The change event is fired 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.
+			*/
+			this.dispatchEvent(new Event("change", { bubbles: true }));
+		}
+		_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 });
+		}
+		_onKeyDown(event) {
+			if (this.readOnly) return;
+			if (this.state === "opening" || this.state === "opened") this._openedPanelKeyboardInteraction(event);
+			else if (this.state === "closed" || this.state === "closing") this._closedPanelKeyboardInteraction(event);
+		}
+		_closedPanelKeyboardInteraction(event) {
+			if (this._checkForLetterSelection(event)) return this._setNextActiveOptionByText(event);
+			switch (event.key) {
+				case "Enter":
+				case " ":
+				case "ArrowDown":
+				case "ArrowUp":
+					event.preventDefault();
+					this.open();
+					break;
+			}
+		}
+		_openedPanelKeyboardInteraction(event) {
+			if (this.readOnly) return;
+			if (this._checkForLetterSelection(event)) return this._setNextActiveOptionByText(event);
+			switch (event.key) {
+				case "Tab":
+					this.close();
+					break;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					this._selectByKeyboard();
+					break;
+				case "ArrowDown":
+				case "ArrowUp":
+					event.preventDefault();
+					this._setNextActiveOption(event);
+					break;
+				case "Home":
+				case "PageUp":
+					event.preventDefault();
+					this._setNextActiveOption(event, 0);
+					break;
+				case "End":
+				case "PageDown":
+					event.preventDefault();
+					this._setNextActiveOption(event, this._selectableOptions().length - 1);
+					break;
+			}
+		}
+		_checkForLetterSelection(event) {
+			return event.key === "Backspace" || event.key === "Clear" || event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
+		}
+		_setNextActiveOptionByText(event) {
+			if (typeof this._searchTimeout === typeof setTimeout) clearTimeout(this._searchTimeout);
+			this._searchTimeout = setTimeout(() => this._searchString = "", 1e3);
+			this._searchString += event.key;
+			const indexForSlice = this._activeItemIndex + 1;
+			const selectableOptions = this._selectableOptions();
+			const filteredOptionsSorted = [...selectableOptions.slice(indexForSlice), ...selectableOptions.slice(0, indexForSlice)];
+			const match = filteredOptionsSorted.find((option) => option.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase()) === 0);
+			if (match) this._setNextActiveOption(event, selectableOptions.indexOf(match));
+			else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
+				const firstMatch = filteredOptionsSorted.find((option) => option.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase()) === 0);
+				if (firstMatch) this._setNextActiveOption(event, selectableOptions.indexOf(firstMatch));
+			} else {
+				clearTimeout(this._searchTimeout);
+				this._searchString = "";
+			}
+		}
+		_selectByKeyboard() {
+			const activeOption = this._selectableOptions()[this._activeItemIndex];
+			if (this.multiple) activeOption?.["selectViaUserInteraction"](!activeOption.selected);
+			else this.close();
+		}
+		_setNextActiveOption(event, index) {
+			const filteredOptions = this._selectableOptions();
+			if (filteredOptions.length === 0) return;
+			const nextIndex = index ?? getNextElementIndex(event, this._activeItemIndex, filteredOptions.length);
+			const nextOption = filteredOptions[nextIndex];
+			const activeOption = filteredOptions[this._activeItemIndex];
+			this._setActiveElement(nextOption, activeOption);
+			if (!this.multiple) this._setSelectedElement(nextOption, activeOption);
+			else if (event?.shiftKey) nextOption["selectViaUserInteraction"](!nextOption.selected);
+			this._activeItemIndex = nextIndex;
+		}
+		_setActiveElement(nextActiveOption, lastActiveOption = null, setActiveDescendant = true) {
+			nextActiveOption.setActive(true);
+			nextActiveOption.scrollIntoView({ block: "nearest" });
+			if (setActiveDescendant) this._triggerElement.ariaActiveDescendantElement = nextActiveOption;
+			if (lastActiveOption && !this.compareWith(lastActiveOption.value, nextActiveOption.value)) lastActiveOption.setActive(false);
+		}
+		_setSelectedElement(nextActiveOption, lastActiveOption) {
+			nextActiveOption["selectViaUserInteraction"](true);
+			if (lastActiveOption && !this.compareWith(lastActiveOption.value, nextActiveOption.value)) lastActiveOption["selectViaUserInteraction"](false);
+		}
+		_resetActiveElement() {
+			const activeElement = this._selectableOptions()[this._activeItemIndex];
+			if (activeElement) activeElement.setActive(false);
+			this._activeItemIndex = -1;
+			if (this._triggerElement) this._triggerElement.ariaActiveDescendantElement = null;
+		}
+		_updateOptionsFromValue() {
+			const value = Array.isArray(this.value) ? this.value : [this.value];
+			const displayValues = [];
+			for (const option of this.options) {
+				option.selected = value.some((v) => this.compareWith(v, option.value));
+				if (option.selected) displayValues.push(option);
+			}
+			this._updateDisplayValue();
+			if (!Array.isArray(this.value)) {
+				const value = this.value;
+				this._activeItemIndex = this._selectableOptions().findIndex((option) => this.compareWith(option.value, value));
+			}
+		}
+		_updateValueFromOptions() {
+			const selected = this._getSelected();
+			if (Array.isArray(selected)) {
+				if (selected && selected.length > 0) {
+					const value = [];
+					for (const option of selected) value.push(option.value);
+					this._value = value;
+				}
+			} else if (selected) {
+				this._activeItemIndex = this._selectableOptions().findIndex((option) => option === selected);
+				this._value = selected.value;
+			}
+			this._updateDisplayValue();
+		}
+		_updateValueOptionState() {
+			if (this._isValueManuallyAssigned) this._updateOptionsFromValue();
+			else this._updateValueFromOptions();
+		}
+		_getSelected() {
+			if (this.multiple) return this.options.filter((option) => option.selected);
+			else return this.options.find((option) => option.selected) ?? null;
+		}
+		_toggleOpening() {
+			if (this.disabled || this.formDisabled || this.readOnly) return;
+			this._triggerElement?.focus();
+			switch (this.state) {
+				case "opening":
+				case "opened":
+					this.close();
+					break;
+				case "closing":
+				case "closed":
+					this.open();
+					break;
+				default: break;
+			}
+		}
+		_spreadDeferredDisplayValue(placeholder) {
+			return [this._deferredDisplayValue(placeholder), placeholder];
+		}
+		async _deferredDisplayValue(placeholder) {
+			if (this.hydrationRequired) await this.hydrationComplete;
+			return this._displayValue ? html`${this._displayValue}` : placeholder;
+		}
+		render() {
+			return html`
+      <!-- This element is visually hidden and will be appended to the light DOM to allow screen
+      readers to work properly -->
+      <div
+        class="sbb-screen-reader-only sbb-select-trigger"
+        tabindex=${this.disabled || this.formDisabled ? nothing : "0"}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded="false"
+        aria-required=${this.required.toString()}
+        aria-controls=${this._overlayId}
+        aria-owns=${this._overlayId}
+        @keydown=${this._onKeyDown}
+        @click=${this._toggleOpening}
+        ${ref((ref) => this._triggerElement = ref)}
+      >
+        ${until(...this._spreadDeferredDisplayValue(html`${this.placeholder}`))}
+      </div>
+
+      <!-- Visually display the value -->
+      <div class="sbb-select__trigger" aria-hidden="true">
+        ${until(...this._spreadDeferredDisplayValue(html`${this.placeholder}`))}
+      </div>
+
+      <div class="sbb-option-panel__overlay-container sbb-popover-reset" popover="manual">
+        <div
+          class="sbb-option-panel__overlay ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
+          id=${!ariaRoleOnHost ? this._overlayId : nothing}
+          role=${!ariaRoleOnHost ? "listbox" : nothing}
+          ?aria-multiselectable=${this.multiple}
+          tabindex="-1"
+          @animationend=${this._onAnimationEnd}
+          ${ref((dialogRef) => this._overlay = dialogRef)}
+        >
+          <slot @slotchange=${this._updateValueOptionState}></slot>
+        </div>
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbSelectElement };