@sbb-esta/lyne-elements 5.0.1 → 5.1.0

package/development/option.pure.js

@@ -1,7 +1,719 @@
-import { t as SbbOptgroupBaseElement } from "./optgroup-base-element--G8myprb.js";
-import { SbbOptGroupElement } from "./option/optgroup/optgroup.component.js";
-import { t as SbbOptionHintElement } from "./option-hint.component-DyCue4gx.js";
-import { t as optionPanelStyles } from "./option-styles-CJMae7_-.js";
-import { SbbOptionBaseElement } from "./option/option/option-base-element.js";
-import { t as SbbOptionElement } from "./option.component-BSHq97Of.js";
-export { SbbOptGroupElement, SbbOptgroupBaseElement, SbbOptionBaseElement, SbbOptionElement, SbbOptionHintElement, optionPanelStyles };
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { SbbDisabledMixin, SbbElement, SbbNegativeMixin, SbbPropertyWatcherController, forceType, isAndroid, isBlink, isSafari, screenReaderOnlyStyles, setOrRemoveAttribute } from "./core.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+import { SbbVisualCheckboxElement } from "./visual-checkbox.pure.js";
+
+//#region src/elements/option/optgroup/optgroup-base-element.scss?inline
+var optgroup_base_element_default = ":host {\n  display: block;\n}\n\n:host(:first-child) {\n  --sbb-optgroup-divider-display: none;\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n  --sbb-optgroup-label-color: var(--sbb-color-5);\n  --sbb-optgroup-divider-color: var(--sbb-divider-color-negative);\n}\n\n:host::before {\n  content: \"\";\n  display: var(--sbb-optgroup-divider-display, block);\n  margin-block: var(--sbb-options-panel-divider-margin-block);\n  border-block-start: var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color);\n}\n\n.sbb-optgroup {\n  margin-block: var(--sbb-spacing-fixed-4x);\n  margin-inline: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-optgroup__label {\n  display: flex;\n  column-gap: var(--sbb-spacing-responsive-xxxs);\n  font-size: var(--sbb-optgroup-label-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  color: var(--sbb-optgroup-label-color);\n  -webkit-text-fill-color: var(--sbb-optgroup-label-color);\n  padding-inline: var(--sbb-optgroup-label-padding-inline);\n  padding-block-end: var(--sbb-optgroup-label-padding-end);\n}\n\n.sbb-optgroup__icon-space {\n  display: var(--sbb-option-icon-container-display, none);\n  min-width: var(--sbb-size-icon-ui-small);\n}\n\n::slotted(sbb-divider) {\n  margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n";
+
+//#endregion
+//#region src/elements/option/optgroup/optgroup-base-element.ts
+/**
+* On Safari, the groups labels are not read by VoiceOver.
+* To solve the problem, we remove the role="group" and add a hidden span containing the group name
+* TODO: We should periodically check if it has been solved and, if so, remove the property.
+*/
+const inertAriaGroups$1 = isSafari;
+let SbbOptgroupBaseElement = (() => {
+	let _classSuper = SbbDisabledMixin(SbbElement);
+	let _label_decorators;
+	let _label_initializers = [];
+	let _label_extraInitializers = [];
+	let __inertAriaGroups_decorators;
+	let __inertAriaGroups_initializers = [];
+	let __inertAriaGroups_extraInitializers = [];
+	return class SbbOptgroupBaseElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_label_decorators = [forceType(), property()];
+			__inertAriaGroups_decorators = [state()];
+			__esDecorate(this, null, _label_decorators, {
+				kind: "accessor",
+				name: "label",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "label" in obj,
+					get: (obj) => obj.label,
+					set: (obj, value) => {
+						obj.label = value;
+					}
+				},
+				metadata: _metadata
+			}, _label_initializers, _label_extraInitializers);
+			__esDecorate(this, null, __inertAriaGroups_decorators, {
+				kind: "accessor",
+				name: "_inertAriaGroups",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_inertAriaGroups" in obj,
+					get: (obj) => obj._inertAriaGroups,
+					set: (obj, value) => {
+						obj._inertAriaGroups = value;
+					}
+				},
+				metadata: _metadata
+			}, __inertAriaGroups_initializers, __inertAriaGroups_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.role = !inertAriaGroups$1 ? "group" : null;
+		}
+		static {
+			this.styles = [unsafeCSS(optgroup_base_element_default)];
+		}
+		#label_accessor_storage;
+		/** Option group label. */
+		get label() {
+			return this.#label_accessor_storage;
+		}
+		set label(value) {
+			this.#label_accessor_storage = value;
+		}
+		#_inertAriaGroups_accessor_storage;
+		get _inertAriaGroups() {
+			return this.#_inertAriaGroups_accessor_storage;
+		}
+		set _inertAriaGroups(value) {
+			this.#_inertAriaGroups_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#label_accessor_storage = __runInitializers(this, _label_initializers, "");
+			this.#_inertAriaGroups_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, __inertAriaGroups_initializers, false));
+			this._previousSize = (__runInitializers(this, __inertAriaGroups_extraInitializers), null);
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete, sbb-autocomplete-grid, sbb-select"), { size: (e) => {
+				if (this._previousSize) this.internals.states.delete(`size-${this._previousSize}`);
+				this._previousSize = e.size;
+				if (this._previousSize) this.internals.states.add(`size-${this._previousSize}`);
+			} }));
+			if (inertAriaGroups$1) if (this.hydrationRequired) this.hydrationComplete.then(() => this._inertAriaGroups = inertAriaGroups$1);
+			else this._inertAriaGroups = inertAriaGroups$1;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._updateAriaLabel();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("disabled")) {
+				if (!this._inertAriaGroups) this.internals.ariaDisabled = this.disabled ? "true" : null;
+			}
+			if (changedProperties.has("label")) this._updateAriaLabel();
+		}
+		_handleSlotchange() {
+			this._updateAriaLabel();
+			this._highlightOptions();
+			/** @internal */
+			this.dispatchEvent(new Event("ɵoptgroupslotchange"));
+		}
+		_updateAriaLabel() {
+			this.internals.ariaLabel = !this._inertAriaGroups ? this.label : null;
+		}
+		_highlightOptions() {
+			const autocomplete = this.getAutocompleteParent();
+			if (!autocomplete) return;
+			const value = autocomplete.triggerElement?.value;
+			if (!value) return;
+			this.options.forEach((opt) => opt.highlight(value));
+		}
+		render() {
+			return html`
+      ${this.label ? html`
+            <div class="sbb-optgroup__label" aria-hidden="true">
+              <div class="sbb-optgroup__icon-space"></div>
+              <span>${this.label}</span>
+            </div>
+          ` : nothing}
+      <slot @slotchange=${this._handleSlotchange}></slot>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/option/optgroup/optgroup.component.ts
+/**
+* It can be used as a container for one or more `sbb-option`.
+*
+* @slot - Use the unnamed slot to add `sbb-option` elements to the `sbb-optgroup`.
+*/
+var SbbOptGroupElement = class extends SbbOptgroupBaseElement {
+	static {
+		this.elementName = "sbb-optgroup";
+	}
+	get options() {
+		return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
+	}
+	constructor() {
+		super();
+		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this._handleNegativeChange(e) }));
+		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-select"), {
+			multiple: (ancestor) => this.toggleState("multiple", ancestor.multiple),
+			negative: (e) => this._handleNegativeChange(e)
+		}));
+	}
+	_handleNegativeChange(ancestor) {
+		this.toggleState("negative", ancestor.negative);
+		this.requestUpdate();
+	}
+	getAutocompleteParent() {
+		return this.closest?.("sbb-autocomplete") || null;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const variant = this.closest?.("sbb-autocomplete") ? "autocomplete" : this.closest?.("sbb-select") ? "select" : null;
+		this.internals.states.delete("variant-autocomplete");
+		this.internals.states.delete("variant-select");
+		if (variant) this.internals.states.add(`variant-${variant}`);
+	}
+};
+
+//#endregion
+//#region src/elements/option/option-hint/option-hint.scss?inline
+var option_hint_default = ":host {\n  display: flex;\n  column-gap: var(--sbb-option-hint-column-gap);\n  padding-inline: var(--sbb-option-hint-padding-inline);\n  padding-block-end: var(--sbb-option-hint-padding-block-end);\n  font-size: var(--sbb-option-hint-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n\n:host([negative]) {\n  --sbb-option-hint-color: var(--sbb-color-5);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);\n}\n\n.sbb-optgroup__icon-space {\n  display: var(--sbb-option-icon-container-display, none);\n  min-width: var(--sbb-size-icon-ui-small);\n}\n\n.sbb-option-hint {\n  color: var(--sbb-option-hint-color);\n  -webkit-text-fill-color: var(--sbb-option-hint-color);\n  flex-grow: 1;\n}\n";
+
+//#endregion
+//#region src/elements/option/option-hint/option-hint.component.ts
+/**
+* Display a textual hint inside a `sbb-autocomplete` or a `sbb-select`.
+*
+* @slot - Use the unnamed slot to display the hint message.
+*/
+var SbbOptionHintElement = class extends SbbNegativeMixin(SbbElement) {
+	static {
+		this.elementName = "sbb-option-hint";
+	}
+	static {
+		this.styles = [unsafeCSS(option_hint_default)];
+	}
+	constructor() {
+		super();
+		this._previousSize = null;
+		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete, sbb-autocomplete-grid, sbb-select"), { size: (e) => {
+			if (this._previousSize) this.internals.states.delete(`size-${this._previousSize}`);
+			this._previousSize = e.size;
+			if (this._previousSize) this.internals.states.add(`size-${this._previousSize}`);
+		} }));
+	}
+	render() {
+		return html`
+      <div class="sbb-optgroup__icon-space"></div>
+      <span class="sbb-option-hint">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/option/option-panel-common.scss?inline
+var option_panel_common_default = ":host {\n  --sbb-options-panel-position-x: 0;\n  --sbb-options-panel-position-y: 0;\n  --sbb-options-pointer-events: all;\n  --_sbb-options-panel-max-height: min(\n    var(--sbb-options-panel-max-height-calculated),\n    var(--sbb-options-panel-max-height, 100000em)\n  );\n  --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);\n  --sbb-options-panel-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  --sbb-options-panel-internal-z-index: var(\n    --sbb-select-z-index,\n    var(--sbb-overlay-default-z-index)\n  );\n  font-weight: normal;\n}\n\n:host([negative]) {\n  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);\n  --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))),\n:host(:is(:state(state-closed),[state--state-closed])) {\n  --sbb-options-panel-visibility: hidden;\n  --sbb-options-pointer-events: none;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n  --sbb-options-panel-animation-name: open;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n  --sbb-options-panel-animation-name: close;\n}\n\n:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) {\n  --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) {\n  --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));\n  --sbb-options-panel-margin-block-start: calc(-1 * var(--sbb-spacing-fixed-2x));\n}\n\n:host([preserve-icon-space]) {\n  --sbb-option-icon-container-display: block;\n}\n\n::slotted(sbb-divider) {\n  margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n\n.sbb-option-panel__overlay-container {\n  position: fixed;\n  pointer-events: none;\n  inset: 0;\n  z-index: var(--sbb-options-panel-internal-z-index);\n}\n.sbb-option-panel__overlay-container::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: var(--sbb-options-panel-origin-position-y);\n  left: var(--sbb-options-panel-origin-position-x);\n  width: var(--sbb-options-panel-width);\n  height: var(--sbb-options-panel-origin-height);\n  background-color: transparent;\n  border-radius: var(--sbb-options-panel-border-radius);\n  transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container::after {\n  box-shadow: var(--sbb-options-panel-box-shadow);\n}\n\n.sbb-option-panel__overlay {\n  display: block;\n  position: absolute;\n  visibility: var(--sbb-options-panel-visibility, visible);\n  border: none;\n  border-radius: var(--sbb-options-panel-border-radius);\n  top: var(--sbb-options-panel-position-y);\n  left: var(--sbb-options-panel-position-x);\n  width: var(--sbb-options-panel-width, fit-content);\n  transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n  box-shadow: var(--sbb-options-panel-box-shadow);\n  background-color: var(--sbb-options-panel-background-color);\n  margin-block-start: var(--sbb-options-panel-margin-block-start);\n  padding-block: var(--sbb-options-panel-padding-block);\n  padding-inline: 0;\n  max-height: var(--_sbb-options-panel-max-height);\n  min-height: var(--sbb-options-panel-min-height);\n  pointer-events: var(--sbb-options-pointer-events);\n  overflow: hidden auto;\n  animation-name: var(--sbb-options-panel-animation-name);\n  animation-duration: var(--sbb-options-panel-animation-duration);\n  animation-timing-function: var(--sbb-options-panel-animation-timing-function);\n}\n@media (forced-colors: active) {\n  .sbb-option-panel__overlay {\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n@keyframes open {\n  from {\n    translate: 0 var(--sbb-options-panel-animation-translate);\n    opacity: 0;\n  }\n  to {\n    translate: 0;\n    opacity: 1;\n  }\n}\n@keyframes close {\n  from {\n    translate: 0;\n    opacity: 1;\n  }\n  to {\n    translate: 0 var(--sbb-options-panel-animation-translate);\n    opacity: 0;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/option/option-styles.ts
+const optionPanelStyles = unsafeCSS(option_panel_common_default);
+
+//#endregion
+//#region src/elements/option/option/option-base-element.ts
+/**
+* On Safari, the groups labels are not read by VoiceOver.
+* To solve the problem, we remove the role="group" and add an hidden span containing the group name
+* TODO: We should periodically check if it has been solved and, if so, remove the property.
+*/
+const inertAriaGroups = isSafari;
+/** Configuration for the attribute to look at if component is nested in an option group */
+const optionObserverConfig = {
+	childList: true,
+	subtree: true,
+	characterData: true
+};
+let SbbOptionBaseElement = (() => {
+	let _classSuper = SbbDisabledMixin(SbbIconNameMixin(SbbElement));
+	let _instanceExtraInitializers = [];
+	let _set_value_decorators;
+	let _set_selected_decorators;
+	let _disabledFromGroup_decorators;
+	let _disabledFromGroup_initializers = [];
+	let _disabledFromGroup_extraInitializers = [];
+	let _groupLabel_decorators;
+	let _groupLabel_initializers = [];
+	let _groupLabel_extraInitializers = [];
+	let _label_decorators;
+	let _label_initializers = [];
+	let _label_extraInitializers = [];
+	let _disableLabelHighlight_decorators;
+	let _disableLabelHighlight_initializers = [];
+	let _disableLabelHighlight_extraInitializers = [];
+	let __highlightString_decorators;
+	let __highlightString_initializers = [];
+	let __highlightString_extraInitializers = [];
+	let __inertAriaGroups_decorators;
+	let __inertAriaGroups_initializers = [];
+	let __inertAriaGroups_extraInitializers = [];
+	return class SbbOptionBaseElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_value_decorators = [property()];
+			_set_selected_decorators = [property({ type: Boolean })];
+			_disabledFromGroup_decorators = [state()];
+			_groupLabel_decorators = [state()];
+			_label_decorators = [state()];
+			_disableLabelHighlight_decorators = [state()];
+			__highlightString_decorators = [state()];
+			__inertAriaGroups_decorators = [state()];
+			__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, _set_selected_decorators, {
+				kind: "setter",
+				name: "selected",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "selected" in obj,
+					set: (obj, value) => {
+						obj.selected = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _disabledFromGroup_decorators, {
+				kind: "accessor",
+				name: "disabledFromGroup",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "disabledFromGroup" in obj,
+					get: (obj) => obj.disabledFromGroup,
+					set: (obj, value) => {
+						obj.disabledFromGroup = value;
+					}
+				},
+				metadata: _metadata
+			}, _disabledFromGroup_initializers, _disabledFromGroup_extraInitializers);
+			__esDecorate(this, null, _groupLabel_decorators, {
+				kind: "accessor",
+				name: "groupLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "groupLabel" in obj,
+					get: (obj) => obj.groupLabel,
+					set: (obj, value) => {
+						obj.groupLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _groupLabel_initializers, _groupLabel_extraInitializers);
+			__esDecorate(this, null, _label_decorators, {
+				kind: "accessor",
+				name: "label",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "label" in obj,
+					get: (obj) => obj.label,
+					set: (obj, value) => {
+						obj.label = value;
+					}
+				},
+				metadata: _metadata
+			}, _label_initializers, _label_extraInitializers);
+			__esDecorate(this, null, _disableLabelHighlight_decorators, {
+				kind: "accessor",
+				name: "disableLabelHighlight",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "disableLabelHighlight" in obj,
+					get: (obj) => obj.disableLabelHighlight,
+					set: (obj, value) => {
+						obj.disableLabelHighlight = value;
+					}
+				},
+				metadata: _metadata
+			}, _disableLabelHighlight_initializers, _disableLabelHighlight_extraInitializers);
+			__esDecorate(this, null, __highlightString_decorators, {
+				kind: "accessor",
+				name: "_highlightString",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_highlightString" in obj,
+					get: (obj) => obj._highlightString,
+					set: (obj, value) => {
+						obj._highlightString = value;
+					}
+				},
+				metadata: _metadata
+			}, __highlightString_initializers, __highlightString_extraInitializers);
+			__esDecorate(this, null, __inertAriaGroups_decorators, {
+				kind: "accessor",
+				name: "_inertAriaGroups",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_inertAriaGroups" in obj,
+					get: (obj) => obj._inertAriaGroups,
+					set: (obj, value) => {
+						obj._inertAriaGroups = value;
+					}
+				},
+				metadata: _metadata
+			}, __inertAriaGroups_initializers, __inertAriaGroups_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.events = { optionselected: "optionselected" };
+		}
+		static {
+			this.styles = [screenReaderOnlyStyles];
+		}
+		/**
+		* Value of the option.
+		*
+		* @description Developer note: In this case updating the attribute must be synchronous.
+		* Due to this, it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+		*/
+		set value(value) {
+			if (typeof value === "string") {
+				this.setAttribute("value", `${value}`);
+				this._value = null;
+			} else this._value = value;
+			/** @internal */
+			this.dispatchEvent(new Event("ɵoptionvaluechange", { bubbles: true }));
+		}
+		get value() {
+			return this._value ?? this.getAttribute("value");
+		}
+		/** Whether the option is selected. */
+		set selected(value) {
+			this.toggleAttribute("selected", value);
+			this._updateAriaSelected();
+		}
+		get selected() {
+			return this.hasAttribute("selected");
+		}
+		#disabledFromGroup_accessor_storage;
+		/** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+		get disabledFromGroup() {
+			return this.#disabledFromGroup_accessor_storage;
+		}
+		set disabledFromGroup(value) {
+			this.#disabledFromGroup_accessor_storage = value;
+		}
+		#groupLabel_accessor_storage;
+		get groupLabel() {
+			return this.#groupLabel_accessor_storage;
+		}
+		set groupLabel(value) {
+			this.#groupLabel_accessor_storage = value;
+		}
+		#label_accessor_storage;
+		get label() {
+			return this.#label_accessor_storage;
+		}
+		set label(value) {
+			this.#label_accessor_storage = value;
+		}
+		#disableLabelHighlight_accessor_storage;
+		/** Disable the highlight of the label. */
+		get disableLabelHighlight() {
+			return this.#disableLabelHighlight_accessor_storage;
+		}
+		set disableLabelHighlight(value) {
+			this.#disableLabelHighlight_accessor_storage = value;
+		}
+		#_highlightString_accessor_storage;
+		/** The portion of the highlighted label. */
+		get _highlightString() {
+			return this.#_highlightString_accessor_storage;
+		}
+		set _highlightString(value) {
+			this.#_highlightString_accessor_storage = value;
+		}
+		#_inertAriaGroups_accessor_storage;
+		get _inertAriaGroups() {
+			return this.#_inertAriaGroups_accessor_storage;
+		}
+		set _inertAriaGroups(value) {
+			this.#_inertAriaGroups_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this._value = (__runInitializers(this, _instanceExtraInitializers), null);
+			this.#disabledFromGroup_accessor_storage = __runInitializers(this, _disabledFromGroup_initializers, false);
+			this.#groupLabel_accessor_storage = (__runInitializers(this, _disabledFromGroup_extraInitializers), __runInitializers(this, _groupLabel_initializers, ""));
+			this.#label_accessor_storage = (__runInitializers(this, _groupLabel_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+			this.#disableLabelHighlight_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _disableLabelHighlight_initializers, false));
+			this.#_highlightString_accessor_storage = (__runInitializers(this, _disableLabelHighlight_extraInitializers), __runInitializers(this, __highlightString_initializers, null));
+			this.#_inertAriaGroups_accessor_storage = (__runInitializers(this, __highlightString_extraInitializers), __runInitializers(this, __inertAriaGroups_initializers, false));
+			this._previousSize = (__runInitializers(this, __inertAriaGroups_extraInitializers), null);
+			this.addEventListener?.("click", (e) => this.selectByClick(e), { passive: true });
+			this.addController(new MutationController(this, {
+				config: optionObserverConfig,
+				callback: () => {
+					this.handleHighlightState();
+					/** @internal */
+					this.dispatchEvent(new Event("optionLabelChanged", { bubbles: true }));
+				}
+			}));
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete, sbb-autocomplete-grid"), { negative: (e) => this.toggleState("negative", e.negative) }));
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete, sbb-autocomplete-grid, sbb-select"), { size: (e) => {
+				if (this._previousSize) this.internals.states.delete(`size-${this._previousSize}`);
+				this._previousSize = e.size;
+				if (this._previousSize) this.internals.states.add(`size-${this._previousSize}`);
+			} }));
+			if (inertAriaGroups) if (this.hydrationRequired) this.hydrationComplete.then(() => this._inertAriaGroups = inertAriaGroups);
+			else this._inertAriaGroups = inertAriaGroups;
+		}
+		attributeChangedCallback(name, old, value) {
+			if (name !== "value" || old !== value) super.attributeChangedCallback(name, old, value);
+		}
+		/**
+		* Highlight the label of the option
+		* @param value the highlighted portion of the label
+		* @internal
+		*/
+		highlight(value) {
+			this._highlightString = value;
+		}
+		selectViaUserInteraction(selected) {
+			this.selected = selected;
+			if (this.selected)
+ /** Emits when an option was selected by user. */
+			this.dispatchEvent(new Event("optionselected", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (name === "disabled" || name === "disabledFromGroup") {
+				this.toggleState("disabled", this.disabled || this.disabledFromGroup);
+				setOrRemoveAttribute(this, "tabindex", isAndroid && !this.disabled && !this.disabledFromGroup ? 0 : null);
+				this.updateAriaDisabled();
+			}
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._updateAriaSelected();
+		}
+		updateDisableHighlight(disabled) {
+			this.disableLabelHighlight = disabled;
+			this.toggleState("disable-highlight", disabled);
+		}
+		/**
+		* Whether the option is currently active.
+		* @internal
+		*/
+		setActive(value) {
+			this.toggleState("active", value);
+		}
+		updateAriaDisabled() {
+			this.internals.ariaDisabled = this.disabled || this.disabledFromGroup ? "true" : null;
+			/** @internal */
+			this.dispatchEvent(new Event("ɵdisabledchange", { bubbles: true }));
+		}
+		_updateAriaSelected() {
+			this.internals.ariaSelected = `${this.selected}`;
+		}
+		handleHighlightState() {
+			const slotNodes = Array.from(this.childNodes ?? []).filter((n) => n.nodeType !== Node.COMMENT_NODE && (!(n instanceof Element) || n.slot !== "icon"));
+			const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE);
+			if (labelNodes.length === 0 || slotNodes.filter((n) => !(n instanceof Element) || n.localName !== "template").length !== labelNodes.length) {
+				this.updateDisableHighlight(true);
+				return;
+			}
+			this.label = labelNodes.map((l) => l.wholeText).filter((l) => l.trim()).join("");
+		}
+		getHighlightedLabel() {
+			if (!this._highlightString || !this._highlightString.trim()) return html`${this.label}`;
+			const matchIndex = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
+			if (matchIndex === -1) return html`${this.label}`;
+			return html`
+      <span class="sbb-option__label--highlight">${this.label.substring(0, matchIndex)}</span><span>${this.label.substring(matchIndex, matchIndex + this._highlightString.length)}</span
+      ><span class="sbb-option__label--highlight">${this.label.substring(matchIndex + this._highlightString.length)}</span>
+    `;
+		}
+		renderIcon() {
+			return html`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+		}
+		renderLabel() {
+			return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : nothing;
+		}
+		renderTick() {
+			return nothing;
+		}
+		render() {
+			return html`
+      <div class="sbb-option">
+        ${this.renderIcon()}
+        <span class="sbb-option__label">
+          <slot @slotchange=${this.handleHighlightState}></slot>
+          <span
+            aria-hidden=${isBlink ? "true" : nothing}
+          >
+            ${this.renderLabel()}
+          </span>
+          ${this._inertAriaGroups && this.groupLabel ? html`<span class="sbb-screen-reader-only"> (${this.groupLabel})</span>` : nothing}
+        </span>
+        ${this.renderTick()}
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/option/option/option.scss?inline
+var option_default = ":host {\n  --sbb-focus-outline-offset: var(--sbb-option-focus-outline-offset);\n  display: block;\n  background-color: var(--sbb-option-background-color);\n  font-size: var(--sbb-option-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n  --sbb-option-color: var(--sbb-color-3-negative);\n  --sbb-option-icon-color: var(--sbb-color-5);\n  --sbb-option-background-color-hover: var(--sbb-color-midnight);\n  --sbb-option-background-color-active: var(--sbb-background-color-4-negative);\n  --sbb-option-disabled-border-color: var(--sbb-border-color-5);\n  --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n  --sbb-option-min-height: var(--sbb-size-element-xxs);\n  --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));\n  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n  --sbb-option-min-height: var(--sbb-size-element-s);\n  --sbb-option-focus-outline-offset: inherit;\n  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover:not(:is(:state(disabled),[state--disabled]))) {\n    --sbb-option-background-color: var(--sbb-option-background-color-hover);\n  }\n}\n\n:host(:active:not(:is(:state(disabled),[state--disabled]))) {\n  --sbb-option-background-color: var(--sbb-option-background-color-active);\n}\n\n:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot {\n  display: none;\n}\n\n:host(:is(:state(disabled),[state--disabled])) {\n  --sbb-option-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n  :host(:is(:state(disabled),[state--disabled])) {\n    --sbb-option-color: GrayText;\n  }\n}\n\n:host(:is(:state(variant-select),[state--variant-select])) {\n  --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);\n  --sbb-option-justify-content: space-between;\n}\n\n:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])) {\n  --sbb-option-justify-content: start;\n}\n\n:host(:is(:state(active),[state--active])) {\n  --sbb-option-focus-outline-color: var(--sbb-focus-outline-color);\n}\n\n:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n  font-weight: bold;\n}\n@media (forced-colors: active) {\n  :host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n    color: Highlight;\n  }\n}\n\n.sbb-option {\n  position: relative;\n  display: flex;\n  min-height: var(--sbb-option-min-height);\n  align-items: center;\n  column-gap: var(--sbb-option-column-gap);\n  padding-inline: var(--sbb-option-padding-inline);\n  justify-content: var(--sbb-option-justify-content);\n  color: var(--sbb-option-color);\n  cursor: var(--sbb-option-cursor);\n  -webkit-tap-highlight-color: transparent;\n  -webkit-text-fill-color: var(--sbb-option-color);\n}\n.sbb-option::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: var(--sbb-option-focus-outline-inset);\n  pointer-events: none;\n  border: var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);\n  border-radius: var(--sbb-option-border-radius);\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option {\n  position: relative;\n  z-index: 0;\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0.375rem;\n  border: var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);\n  border-radius: var(--sbb-border-radius-2x);\n  background-color: var(--sbb-option-disabled-background-color);\n  z-index: -1;\n}\n@media (forced-colors: active) {\n  :host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n    border-color: GrayText;\n  }\n}\n\n.sbb-option__icon {\n  display: flex;\n  min-width: var(--sbb-size-icon-ui-small);\n  min-height: var(--sbb-size-icon-ui-small);\n  color: var(--sbb-option-icon-color);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon {\n  display: var(--sbb-option-icon-container-display, none);\n}\n\n.sbb-option__label {\n  text-overflow: var(--sbb-option-text-overflow);\n  overflow: var(--sbb-option-overflow);\n  white-space: var(--sbb-option-white-space, initial);\n}\n";
+
+//#endregion
+//#region src/elements/option/option/option.component.ts
+/**
+* It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
+*
+* @slot - Use the unnamed slot to add content to the option label.
+* @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
+* @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
+* when preserve-icon-space on autocomplete is not set or iconName is not set.
+* @overrideType value - (T = string) | null
+*/
+var SbbOptionElement = class extends SbbOptionBaseElement {
+	static {
+		this.elementName = "sbb-option";
+	}
+	static {
+		this.elementDependencies = [SbbVisualCheckboxElement];
+	}
+	static {
+		this.role = "option";
+	}
+	static {
+		this.styles = [unsafeCSS(option_default)];
+	}
+	static {
+		this.events = {
+			optionselectionchange: "optionselectionchange",
+			optionselected: "optionselected"
+		};
+	}
+	set _variant(variant) {
+		if (this._variantInternal) this.internals.states.delete(`variant-${this._variantInternal}`);
+		this._variantInternal = variant;
+		if (this._variantInternal) this.internals.states.add(`variant-${this._variantInternal}`);
+	}
+	get _variant() {
+		return this._variantInternal ?? null;
+	}
+	constructor() {
+		super();
+		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-optgroup"), {
+			disabled: (p) => this.disabledFromGroup = p.disabled,
+			label: (p) => this.groupLabel = p.label
+		}));
+		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-select"), {
+			multiple: (ancestor) => {
+				this.toggleState("multiple", ancestor.multiple);
+				this.requestUpdate();
+			},
+			negative: (e) => this._handleNegativeChange(e)
+		}));
+	}
+	_isMultiple() {
+		return !this.hydrationRequired && this.matches?.(":is(:state(multiple),[state--multiple])");
+	}
+	_handleNegativeChange(ancestor) {
+		this.toggleState("negative", ancestor.negative);
+		this.requestUpdate();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hydrationRequired) this.hydrationComplete.then(() => this._init());
+		else this._init();
+	}
+	_init() {
+		this._setVariantByContext();
+		this.handleHighlightState();
+	}
+	selectByClick(event) {
+		if (this.disabled || this.disabledFromGroup) {
+			event.stopPropagation();
+			return;
+		}
+		if (this._isMultiple()) {
+			event.stopPropagation();
+			this.selectViaUserInteraction(!this.selected);
+		} else this.selectViaUserInteraction(true);
+	}
+	selectViaUserInteraction(selected) {
+		super.selectViaUserInteraction(selected);
+		/** The optionselectionchange event is dispatched when the option selection status changes. */
+		this.dispatchEvent(new Event("optionselectionchange", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_setVariantByContext() {
+		if (this.closest?.("sbb-autocomplete")) this._variant = "autocomplete";
+		else if (this.closest?.("sbb-select")) this._variant = "select";
+	}
+	handleHighlightState() {
+		if (this._variant !== "autocomplete") {
+			this.updateDisableHighlight(true);
+			return;
+		}
+		super.handleHighlightState();
+	}
+	renderIcon() {
+		return html`
+      <!-- Icon -->
+      ${!this._isMultiple() ? html` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>` : nothing}
+
+      <!-- Checkbox -->
+      ${this._isMultiple() ? html`
+            <sbb-visual-checkbox
+              ?checked=${this.selected}
+              ?disabled=${this.disabled || this.disabledFromGroup}
+              ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
+            ></sbb-visual-checkbox>
+          ` : nothing}
+    `;
+	}
+	renderLabel() {
+		if (this._variant !== "autocomplete") return nothing;
+		return super.renderLabel();
+	}
+	renderTick() {
+		return this._variant === "select" && !this._isMultiple() && this.selected ? html`<sbb-icon name="tick-small"></sbb-icon>` : nothing;
+	}
+};
+
+//#endregion
+export { SbbOptGroupElement, SbbOptgroupBaseElement, SbbOptionBaseElement, SbbOptionElement, SbbOptionHintElement, optionPanelStyles };