@sbb-esta/lyne-elements-dev 5.13.0-dev.1793605199 → 5.13.0-dev.1793608592

package/custom-elements.json

@@ -63909,16 +63909,6 @@
               },
               "description": "Gets the current displayed value."
             },
-            {
-              "kind": "method",
-              "name": "_selectableOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "SbbOptionElement<T>[]"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "_onOptionChanged",
@@ -63963,7 +63953,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               }
             },
@@ -64465,42 +64455,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "_spreadDeferredDisplayValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "(TemplateResult | Promise<TemplateResult>)[]"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "placeholder",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_deferredDisplayValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<TemplateResult>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "placeholder",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "_updatePromise",

package/development/select/select.component.d.ts

@@ -51,7 +51,7 @@ export declare class SbbSelectElement<T = string> extends SbbSelectElement_base
      */
     get type(): string;
     /** The value displayed by the component. */
-    private accessor _displayValue;
+    private _displayValue;
     private _resizeObserver;
     private _overlay?;
     private _originElement;
@@ -88,7 +88,6 @@ export declare class SbbSelectElement<T = string> extends SbbSelectElement_base
     private _isZeroAnimationDuration;
     /** Gets the current displayed value. */
     getDisplayValue(): string;
-    private _selectableOptions;
     /** Listens to option changes. */
     private _onOptionChanged;
     /** Listens to option changes. */
@@ -180,8 +179,6 @@ export declare class SbbSelectElement<T = string> extends SbbSelectElement_base
     private _updateValueOptionState;
     private _getSelected;
     private _toggleOpening;
-    private _spreadDeferredDisplayValue;
-    private _deferredDisplayValue;
     protected render(): TemplateResult;
 }
 declare global {

package/development/select.pure.js

@@ -1,9 +1,8 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { html, isServer, nothing, unsafeCSS } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
-import { until } from "lit/directives/until.js";
 import { SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbFormAssociatedMixin, SbbLanguageController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbUpdateSchedulerMixin, forceType, getNextElementIndex, getOverride, handleDistinctChange, i18nMultipleSelectionPossible, i18nSelectionRequired, isEventOnElement, isNextjs, isZeroAnimationDuration, popoverResetStyles, scrollbarStyles, setOrRemoveAttribute, setOverlayPosition } from "./core.js";
 import { optionPanelStyles } from "./option.pure.js";
 
@@ -93,9 +92,6 @@ let SbbSelectElement = (() => {
 	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;
@@ -120,7 +116,6 @@ let SbbSelectElement = (() => {
 			];
 			_set_value_decorators = [property()];
 			_size_decorators = [property({ reflect: true })];
-			__displayValue_decorators = [state()];
 			__esDecorate(this, null, _placeholder_decorators, {
 				kind: "accessor",
 				name: "placeholder",
@@ -204,20 +199,6 @@ let SbbSelectElement = (() => {
 				},
 				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,
@@ -311,14 +292,6 @@ let SbbSelectElement = (() => {
 		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
@@ -343,8 +316,9 @@ let SbbSelectElement = (() => {
 			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, {
+			/** The value displayed by the component. */
+			this._displayValue = (__runInitializers(this, _size_extraInitializers), null);
+			this._resizeObserver = new ResizeController(this, {
 				target: null,
 				skipInitial: true,
 				callback: (() => {
@@ -356,7 +330,7 @@ let SbbSelectElement = (() => {
 						}, 10);
 					};
 				})()
-			}));
+			});
 			this._originElement = null;
 			this._escapableOverlayController = new SbbEscapableOverlayController(this);
 			this._activeItemIndex = -1;
@@ -374,7 +348,7 @@ let SbbSelectElement = (() => {
 			};
 			this.addEventListener?.("optionselectionchange", (e) => this._onOptionChanged(e));
 			this.addEventListener?.("optionLabelChanged", (e) => this._onOptionLabelChanged(e));
-			/** Forces the sbb-select to update his value. */
+			/** Forces the sbb-select to update its value. */
 			this.addEventListener?.("ɵoptionvaluechange", () => this._updateValueOptionState());
 			this.addEventListener?.("ɵoptgroupslotchange", () => this._handleSlotchange(), { capture: true });
 			this.addEventListener?.("focusin", (e) => this._onFocusIn(e));
@@ -437,9 +411,6 @@ let SbbSelectElement = (() => {
 		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;
@@ -453,7 +424,7 @@ let SbbSelectElement = (() => {
 			if (!Array.isArray(selected) && target !== selected || Array.isArray(selected) && !selected.includes(target)) return;
 			this._updateDisplayValue();
 		}
-		_updateDisplayValue() {
+		async _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;
@@ -464,6 +435,9 @@ let SbbSelectElement = (() => {
 				bubbles: true,
 				composed: true
 			}));
+			if (this.hydrationRequired) await this.hydrationComplete;
+			const displayValueElements = [this._triggerElement?.querySelector?.("span"), this.shadowRoot?.querySelector?.(".sbb-select__trigger")];
+			for (const displayValueElement of displayValueElements) if (displayValueElement) displayValueElement.textContent = this._displayValue ?? this.placeholder;
 		}
 		/**
 		* The `value` property should be adapted when the `multiple` property changes:
@@ -714,7 +688,7 @@ let SbbSelectElement = (() => {
 				case "End":
 				case "PageDown":
 					event.preventDefault();
-					this._setNextActiveOption(event, this._selectableOptions().length - 1);
+					this._setNextActiveOption(event, this.options.length - 1);
 			}
 		}
 		_checkForLetterSelection(event) {
@@ -725,36 +699,38 @@ let SbbSelectElement = (() => {
 			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 options = this.options;
+			const filteredOptionsSorted = [...options.slice(indexForSlice), ...options.slice(0, indexForSlice)];
 			const match = filteredOptionsSorted.find((option) => option.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase()) === 0);
-			if (match) this._setNextActiveOption(event, selectableOptions.indexOf(match));
+			if (match) this._setNextActiveOption(event, options.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));
+				if (firstMatch) this._setNextActiveOption(event, options.indexOf(firstMatch));
 			} else {
 				clearTimeout(this._searchTimeout);
 				this._searchString = "";
 			}
 		}
 		_selectByKeyboard() {
-			const activeOption = this._selectableOptions()[this._activeItemIndex];
-			if (this.multiple) activeOption?.["selectViaUserInteraction"](!activeOption.selected);
-			else {
-				if (activeOption && !activeOption.selected) activeOption["selectViaUserInteraction"](true);
-				this.close();
+			const activeOption = this.options[this._activeItemIndex];
+			if (!activeOption || activeOption.disabled) return;
+			if (this.multiple) {
+				activeOption["selectViaUserInteraction"](!activeOption.selected);
+				return;
 			}
+			if (!activeOption.selected) activeOption["selectViaUserInteraction"](true);
+			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];
+			const options = this.options;
+			const nextIndex = index ?? getNextElementIndex(event, this._activeItemIndex, options.length);
+			const activeOption = options[this._activeItemIndex];
+			const nextOption = options[nextIndex];
 			this._activeItemIndex = nextIndex;
 			this._setActiveElement(nextOption, activeOption);
+			if (nextOption.disabled) return;
 			if (!this.multiple) nextOption["selectViaUserInteraction"](true);
-			else if (event?.shiftKey) nextOption["selectViaUserInteraction"](!nextOption.selected);
+			else if (event.shiftKey) nextOption["selectViaUserInteraction"](!nextOption.selected);
 		}
 		_setActiveElement(nextActiveOption, lastActiveOption = null) {
 			nextActiveOption.focus({ preventScroll: true });
@@ -769,15 +745,15 @@ let SbbSelectElement = (() => {
 		_onFocusIn(event) {
 			const target = event.target;
 			if (target?.localName !== "sbb-option") return;
-			const selectableOptions = this._selectableOptions();
+			const options = this.options;
 			const focusedOption = target;
-			const index = selectableOptions.indexOf(focusedOption);
+			const index = options.indexOf(focusedOption);
 			if (index === -1) return;
 			this._activeItemIndex = index;
-			selectableOptions.forEach((option) => option.setActive(false));
+			options.forEach((option) => option.setActive(false));
 		}
 		_resetActiveElement() {
-			const activeElement = this._selectableOptions()[this._activeItemIndex];
+			const activeElement = this.options[this._activeItemIndex];
 			if (activeElement) activeElement.setActive(false);
 			this._activeItemIndex = -1;
 		}
@@ -791,7 +767,7 @@ let SbbSelectElement = (() => {
 			this._updateDisplayValue();
 			if (!Array.isArray(this.value)) {
 				const value = this.value;
-				this._activeItemIndex = this._selectableOptions().findIndex((option) => this.compareWith(option.value, value));
+				this._activeItemIndex = this.options.findIndex((option) => this.compareWith(option.value, value));
 			}
 		}
 		_updateValueFromOptions() {
@@ -803,7 +779,7 @@ let SbbSelectElement = (() => {
 					this._value = value;
 				}
 			} else if (selected) {
-				this._activeItemIndex = this._selectableOptions().findIndex((option) => option === selected);
+				this._activeItemIndex = this.options.findIndex((option) => option === selected);
 				this._value = selected.value;
 			}
 			this._updateDisplayValue();
@@ -833,15 +809,7 @@ let SbbSelectElement = (() => {
 					this.open();
 			}
 		}
-		_spreadDeferredDisplayValue(placeholder) {
-			return [this._deferredDisplayValue(placeholder), placeholder];
-		}
-		async _deferredDisplayValue(placeholder) {
-			if (this.hydrationRequired) await this.hydrationComplete;
-			return this._displayValue ? html`${this._displayValue}` : placeholder;
-		}
 		render() {
-			const displayValue = until(...this._spreadDeferredDisplayValue(html`${this.placeholder}`));
 			return html`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
@@ -852,11 +820,16 @@ let SbbSelectElement = (() => {
         @click=${this._toggleOpening}
         ${ref((ref) => this._triggerElement = ref)}
       >
-        ${displayValue}${this.multiple && !this.disabled && !this.readOnly ? html`<p>${i18nMultipleSelectionPossible[this._languageController.current]}</p>` : nothing}
+        <span></span>${this.multiple && !this.disabled && !this.readOnly ? html`<p>${i18nMultipleSelectionPossible[this._languageController.current]}</p>` : nothing}
       </sbb-select-trigger>
 
-      <!-- Visually display the value -->
-      <div class="sbb-select__trigger" aria-hidden="true">${displayValue}</div>
+      <!--
+        Visually display the value.
+        The span is replaced after the first render. It is only here to avoid a Lit warning
+        about changing Lit-controlled content, because we update it directly.
+        The placeholder must be rendered here so it is transferred from server-side rendering.
+      -->
+      <div class="sbb-select__trigger" aria-hidden="true"><span>${this.placeholder}</span></div>
 
       <div class="sbb-option-panel__overlay-container sbb-popover-reset" popover="manual">
         <div

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.13.0-dev.1793605199",
+  "version": "5.13.0-dev.1793608592",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/4ff1e730c7baf3ce3c2a2e4d712535f6d69a7624"
+    "https://github.com/sbb-design-systems/lyne-components/commit/e81d72a3738b7d1d1cbbab2ac81619b903f0b739"
   ],
   "type": "module",
   "exports": {

package/select.pure.js

@@ -1,6 +1,6 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,nothing as a,unsafeCSS as o}from"lit";import{property as s,state as c}from"lit/decorators.js";import{ref as l}from"lit/directives/ref.js";import{until as u}from"lit/directives/until.js";import{SbbDisabledMixin as ee,SbbElement as d,SbbEscapableOverlayController as f,SbbFormAssociatedMixin as p,SbbLanguageController as m,SbbNegativeMixin as h,SbbOpenCloseBaseElement as te,SbbPropertyWatcherController as g,SbbReadonlyMixin as _,SbbRequiredMixin as v,SbbUpdateSchedulerMixin as y,forceType as b,getNextElementIndex as x,getOverride as S,handleDistinctChange as C,i18nMultipleSelectionPossible as w,i18nSelectionRequired as T,isEventOnElement as E,isNextjs as D,isZeroAnimationDuration as O,popoverResetStyles as k,scrollbarStyles as A,setOrRemoveAttribute as j,setOverlayPosition as ne}from"./core.js";import{optionPanelStyles as re}from"./option.pure.js";var M=`:host{display:block;width:100%!important;height:var(--sbb-size-element-xs)!important}:host(:is(:state(in-form-field),[state--in-form-field])){top:0}
-`,N=class extends d{static{this.elementName=`sbb-select-trigger`}static{this.role=`combobox`}static{this.styles=[o(M)]}set select(e){if(e===this._select||(this._selectPropertyWatcher&&this.removeController(this._selectPropertyWatcher),this.internals.ariaControlsElements=null,this._select=e,!this._select))return;this._selectPropertyWatcher=new g(this,()=>this._select,{required:e=>this.internals.ariaRequired=e.required?`${e.required}`:null});let t=this._select.shadowRoot.querySelector(`.sbb-option-panel__overlay`);this.internals.ariaControlsElements=[t]}get select(){return this._select}constructor(){super(),this._select=null,this._selectPropertyWatcher=null,this.internals.ariaExpanded=`false`}connectedCallback(){super.connectedCallback(),this.toggleState(`in-form-field`,!!this.closest(`sbb-form-field`))}render(){return r`<slot></slot>`}},P=`:host{--sbb-select-placeholder-fallback-color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));display:block}:host([negative]){--sbb-select-placeholder-fallback-color:var(--sbb-color-5)}.sbb-select__trigger{white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text));overflow:hidden}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color))}
-`;let F=(()=>{let d=y(ee(h(v(_(p(te)))))),M=[],F,I=[],L=[],R,z=[],B=[],V,H=[],U=[],W,G=[],K=[],q,J,Y=[],X=[],Z,Q=[],$=[];return class extends d{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;F=[b(),s()],R=[b(),C((e,t)=>e._onMultipleChanged(t)),s({reflect:!0,type:Boolean})],V=[s({attribute:!1})],W=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),s({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],q=[s()],J=[s({reflect:!0})],Z=[c()],e(this,null,F,{kind:`accessor`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:t},I,L),e(this,null,R,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},z,B),e(this,null,V,{kind:`accessor`,name:`compareWith`,static:!1,private:!1,access:{has:e=>`compareWith`in e,get:e=>e.compareWith,set:(e,t)=>{e.compareWith=t}},metadata:t},H,U),e(this,null,W,{kind:`accessor`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:t},G,K),e(this,null,q,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,M),e(this,null,J,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`_displayValue`,static:!1,private:!1,access:{has:e=>`_displayValue`in e,get:e=>e._displayValue,set:(e,t)=>{e._displayValue=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-select`}static{this.styles=[k,A,re,o(P)]}static{this.elementDependencies=[N]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}static get observedAttributes(){return super.observedAttributes.concat(`aria-label`,`aria-labelledby`,`aria-describedby`)}#e;get placeholder(){return this.#e}set placeholder(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get compareWith(){return this.#n}set compareWith(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}set value(e){this._value=e,this._isValueManuallyAssigned=!0,this._updateOptionsFromValue()}get value(){return this._value}#i;get size(){return this.#i}set size(e){this.#i=e}get type(){return this.multiple?`select-multiple`:`select-one`}#a;get _displayValue(){return this.#a}set _displayValue(e){this.#a=e}get inputElement(){return this._triggerElement??null}get options(){let e=[];return this.querySelectorAll?.(`sbb-option`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}constructor(){super(),this.#e=(t(this,M),t(this,I,``)),this.#t=(t(this,L),t(this,z,!1)),this.#n=(t(this,B),t(this,H,(e,t)=>e===t)),this.#r=(t(this,U),t(this,G,!1)),this._value=(t(this,K),null),this.#i=t(this,Y,null),this.#a=(t(this,X),t(this,Q,null)),this._resizeObserver=(t(this,$),new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()})),this._originElement=null,this._escapableOverlayController=new f(this),this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new m(this),this._isValueManuallyAssigned=!1,this._restoreFocusOnClose=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=E(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||E(this._overlay,e)||E(this._originElement,e)||this.close()},this.addEventListener?.(`optionselectionchange`,e=>this._onOptionChanged(e)),this.addEventListener?.(`optionLabelChanged`,e=>this._onOptionLabelChanged(e)),this.addEventListener?.(`ɵoptionvaluechange`,()=>this._updateValueOptionState()),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addEventListener?.(`focusin`,e=>this._onFocusIn(e)),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&this._close(!0):this._toggleOpening()}),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}})),this.addEventListener(`keydown`,e=>this._onKeyDown(e))}attributeChangedCallback(e,t,n){e===`aria-label`||e===`aria-labelledby`||e===`aria-describedby`?this._syncAriaLabels():super.attributeChangedCallback(e,t,n)}_syncAriaLabels(){this._triggerElement&&!i&&(j(this._triggerElement,`aria-labelledby`,this.getAttribute(`aria-labelledby`)),j(this._triggerElement,`aria-label`,this.getAttribute(`aria-label`)),j(this._triggerElement,`aria-describedby`,this.getAttribute(`aria-describedby`)),!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.internals.labels.length&&this._triggerElement?.setAttribute(`aria-label`,Array.from(this.internals.labels,e=>e.textContent).join(`, `)))}open(){this.state!==`opening`&&this.state!==`opened`&&this._overlay&&this.options.length!==0&&!this.disabled&&!this.formDisabled&&this.dispatchBeforeOpenEvent()&&(this.shadowRoot?.querySelector(`[popover]`)?.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`true`),this.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._close()}_close(e=!1){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this._restoreFocusOnClose=e,this.state=`closing`,this.internals.states.delete(`expanded`),this._openPanelEventsController?.abort(),this._originElement&&this._resizeObserver.unobserve(this._originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return O(this,`--sbb-options-panel-animation-duration`)}getDisplayValue(){return this._displayValue??``}_selectableOptions(){return this.options.filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`))}_onOptionChanged(e){let t=e.target;t.selected?this._onOptionSelected(t):this._onOptionDeselected(t)}_onOptionLabelChanged(e){let t=e.target,n=this._getSelected();!Array.isArray(n)&&t!==n||Array.isArray(n)&&!n.includes(t)||this._updateDisplayValue()}_updateDisplayValue(){let e=this._getSelected();this._displayValue=Array.isArray(e)?e.map(e=>e.textContent?.trim()).join(`, `)||null:e&&e?.textContent?.trim()||null,this.toggleState(`has-display-value`,!!this._displayValue),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0}))}_onMultipleChanged(e){e?this._value=this._isValueManuallyAssigned||this.value!=null?[this.value]:[]:Array.isArray(this.value)&&(this._value=this.value.length?this.value[0]:null),this._updateDisplayValue()}_closeOnDisabledReadonlyChanged(e){(this.state===`opening`||this.state===`opened`)&&e&&this.close()}firstUpdated(e){super.firstUpdated(e),this._updateValueOptionState(),this._triggerElement&&(this._syncAriaLabels(),this._triggerElement.select=this),D()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){D()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),this._syncNegative(),this._syncAriaLabels(),this._didLoad&&(this._setupOrigin(),this._setupTrigger())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!e&&this.hasUpdated&&setTimeout(()=>this._syncAriaLabels())}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`readOnly`)&&this._closeOnDisabledReadonlyChanged(this.readOnly)}disconnectedCallback(){this._triggerElement&&this.prepend(this._triggerElement),super.disconnectedCallback(),this._openPanelEventsController?.abort()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){try{let{value:t,manuallyAssigned:n}=JSON.parse(e);this._isValueManuallyAssigned=n,this._value=t,this._updateOptionsFromValue()}catch{console.warn(`Failed to restore sbb-select with state ${e}`)}}formState(){return JSON.stringify({value:this.value,manuallyAssigned:this._isValueManuallyAssigned})}_syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate();let e=Array.isArray(this.value)?this.value:this.value===null?[]:[this.value];this.required&&(this.options.every(t=>e.every(e=>!this.compareWith(e,t.value)))||!this._isValueManuallyAssigned&&this.value==null)?this.setValidityFlag(`valueMissing`,T[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}_setupSelect(){this._setupOrigin(),this._setupTrigger(),this._didLoad=!0,this.completeUpdate()}_setupOrigin(){let e=this.closest?.(`sbb-form-field`);this._originElement&&this._resizeObserver.unobserve(this._originElement),this._originElement=e?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.parentElement,this._originElement&&(this.toggleState(`option-panel-origin-borderless`,e?.hasAttribute?.(`borderless`)),this.isOpen&&this._resizeObserver.observe(this._originElement))}_setupTrigger(){this.parentElement&&this._triggerElement&&this.parentElement.insertBefore?.(this._triggerElement,this)}_setOverlayPosition(){this._originElement&&this._overlay&&ne(this._overlay,this._originElement,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){let e=this._restoreFocusOnClose||this._isFocusWithin();this._restoreFocusOnClose=!1,this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`false`),this._resetActiveElement(),e&&this.focus(),this._overlay&&(this._overlay.scrollTop=0),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_isFocusWithin(){let e=this.getRootNode().activeElement;return!!e&&(e===this._triggerElement||this.contains(e))}_onOptionSelected(e){this.multiple?this.value?Array.isArray(this.value)&&!this.value.some(t=>this.compareWith(t,e.value))&&(this._value=[...this.value,e.value]):this._value=[e.value]:this._value=e.value,this._updateOptionsFromValue(),this._dispatchInputEvents()}_onOptionDeselected(e){this.multiple&&Array.isArray(this.value)&&(this._value=this.value.filter(t=>!this.compareWith(t,e.value)),this._updateOptionsFromValue(),this._dispatchInputEvents())}_dispatchInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal})}_onKeyDown(e){this.readOnly||(this.state===`opening`||this.state===`opened`?this._openedPanelKeyboardInteraction(e):(this.state===`closed`||this.state===`closing`)&&this._closedPanelKeyboardInteraction(e))}_closedPanelKeyboardInteraction(e){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.open()}}_openedPanelKeyboardInteraction(e){if(!this.readOnly){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Tab`:this.close();break;case`Enter`:case` `:e.preventDefault(),this._selectByKeyboard();break;case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._setNextActiveOption(e);break;case`Home`:case`PageUp`:e.preventDefault(),this._setNextActiveOption(e,0);break;case`End`:case`PageDown`:e.preventDefault(),this._setNextActiveOption(e,this._selectableOptions().length-1)}}}_checkForLetterSelection(e){return e.key===`Backspace`||e.key===`Clear`||e.key.length===1&&e.key!==` `&&!e.altKey&&!e.ctrlKey&&!e.metaKey}_setNextActiveOptionByText(e){typeof this._searchTimeout==typeof setTimeout&&clearTimeout(this._searchTimeout),this._searchTimeout=setTimeout(()=>this._searchString=``,1e3),this._searchString+=e.key;let t=this._activeItemIndex+1,n=this._selectableOptions(),r=[...n.slice(t),...n.slice(0,t)],i=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase())===0);if(i)this._setNextActiveOption(e,n.indexOf(i));else if(this._searchString.length>1&&RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)){let t=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase())===0);t&&this._setNextActiveOption(e,n.indexOf(t))}else clearTimeout(this._searchTimeout),this._searchString=``}_selectByKeyboard(){let e=this._selectableOptions()[this._activeItemIndex];this.multiple?e?.selectViaUserInteraction(!e.selected):(e&&!e.selected&&e.selectViaUserInteraction(!0),this.close())}_setNextActiveOption(e,t){let n=this._selectableOptions();if(n.length===0)return;let r=t??x(e,this._activeItemIndex,n.length),i=n[r],a=n[this._activeItemIndex];this._activeItemIndex=r,this._setActiveElement(i,a),this.multiple?e?.shiftKey&&i.selectViaUserInteraction(!i.selected):i.selectViaUserInteraction(!0)}_setActiveElement(e,t=null){e.focus({preventScroll:!0}),e.scrollIntoView({block:`nearest`}),e.setActive(!0),t&&t!==e&&t.setActive(!1)}_onFocusIn(e){let t=e.target;if(t?.localName!==`sbb-option`)return;let n=this._selectableOptions(),r=t,i=n.indexOf(r);i!==-1&&(this._activeItemIndex=i,n.forEach(e=>e.setActive(!1)))}_resetActiveElement(){let e=this._selectableOptions()[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1}_updateOptionsFromValue(){let e=Array.isArray(this.value)?this.value:[this.value],t=[];for(let n of this.options)n.selected=e.some(e=>this.compareWith(e,n.value)),n.selected&&t.push(n);if(this._updateDisplayValue(),!Array.isArray(this.value)){let e=this.value;this._activeItemIndex=this._selectableOptions().findIndex(t=>this.compareWith(t.value,e))}}_updateValueFromOptions(){let e=this._getSelected();if(Array.isArray(e)){if(e&&e.length>0){let t=[];for(let n of e)t.push(n.value);this._value=t}}else e&&(this._activeItemIndex=this._selectableOptions().findIndex(t=>t===e),this._value=e.value);this._updateDisplayValue()}_handleSlotchange(){this.options.forEach(e=>e.tabIndex=-1),this._updateValueOptionState()}_updateValueOptionState(){this._isValueManuallyAssigned?this._updateOptionsFromValue():this._updateValueFromOptions()}_getSelected(){return this.multiple?this.options.filter(e=>e.selected):this.options.find(e=>e.selected)??null}_toggleOpening(){if(!(this.disabled||this.formDisabled||this.readOnly))switch(this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.focus(),this.open()}}_spreadDeferredDisplayValue(e){return[this._deferredDisplayValue(e),e]}async _deferredDisplayValue(e){return this.hydrationRequired&&await this.hydrationComplete,this._displayValue?r`${this._displayValue}`:e}render(){let e=u(...this._spreadDeferredDisplayValue(r`${this.placeholder}`));return r`
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,nothing as a,unsafeCSS as o}from"lit";import{property as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{SbbDisabledMixin as l,SbbElement as u,SbbEscapableOverlayController as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,SbbReadonlyMixin as _,SbbRequiredMixin as v,SbbUpdateSchedulerMixin as y,forceType as b,getNextElementIndex as x,getOverride as S,handleDistinctChange as C,i18nMultipleSelectionPossible as w,i18nSelectionRequired as T,isEventOnElement as E,isNextjs as D,isZeroAnimationDuration as O,popoverResetStyles as k,scrollbarStyles as A,setOrRemoveAttribute as j,setOverlayPosition as M}from"./core.js";import{optionPanelStyles as N}from"./option.pure.js";var P=`:host{display:block;width:100%!important;height:var(--sbb-size-element-xs)!important}:host(:is(:state(in-form-field),[state--in-form-field])){top:0}
+`,F=class extends u{static{this.elementName=`sbb-select-trigger`}static{this.role=`combobox`}static{this.styles=[o(P)]}set select(e){if(e===this._select||(this._selectPropertyWatcher&&this.removeController(this._selectPropertyWatcher),this.internals.ariaControlsElements=null,this._select=e,!this._select))return;this._selectPropertyWatcher=new g(this,()=>this._select,{required:e=>this.internals.ariaRequired=e.required?`${e.required}`:null});let t=this._select.shadowRoot.querySelector(`.sbb-option-panel__overlay`);this.internals.ariaControlsElements=[t]}get select(){return this._select}constructor(){super(),this._select=null,this._selectPropertyWatcher=null,this.internals.ariaExpanded=`false`}connectedCallback(){super.connectedCallback(),this.toggleState(`in-form-field`,!!this.closest(`sbb-form-field`))}render(){return r`<slot></slot>`}},I=`:host{--sbb-select-placeholder-fallback-color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));display:block}:host([negative]){--sbb-select-placeholder-fallback-color:var(--sbb-color-5)}.sbb-select__trigger{white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text));overflow:hidden}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color))}
+`;let L=(()=>{let u=y(l(m(v(_(f(h)))))),P=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[],Y,X,Z=[],Q=[];return class extends u{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;L=[b(),s()],B=[b(),C((e,t)=>e._onMultipleChanged(t)),s({reflect:!0,type:Boolean})],U=[s({attribute:!1})],K=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),s({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],Y=[s()],X=[s({reflect:!0})],e(this,null,L,{kind:`accessor`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:t},R,z),e(this,null,B,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},V,H),e(this,null,U,{kind:`accessor`,name:`compareWith`,static:!1,private:!1,access:{has:e=>`compareWith`in e,get:e=>e.compareWith,set:(e,t)=>{e.compareWith=t}},metadata:t},W,G),e(this,null,K,{kind:`accessor`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:t},q,J),e(this,null,Y,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,P),e(this,null,X,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},Z,Q),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-select`}static{this.styles=[k,A,N,o(I)]}static{this.elementDependencies=[F]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}static get observedAttributes(){return super.observedAttributes.concat(`aria-label`,`aria-labelledby`,`aria-describedby`)}#e;get placeholder(){return this.#e}set placeholder(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get compareWith(){return this.#n}set compareWith(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}set value(e){this._value=e,this._isValueManuallyAssigned=!0,this._updateOptionsFromValue()}get value(){return this._value}#i;get size(){return this.#i}set size(e){this.#i=e}get type(){return this.multiple?`select-multiple`:`select-one`}get inputElement(){return this._triggerElement??null}get options(){let e=[];return this.querySelectorAll?.(`sbb-option`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}constructor(){super(),this.#e=(t(this,P),t(this,R,``)),this.#t=(t(this,z),t(this,V,!1)),this.#n=(t(this,H),t(this,W,(e,t)=>e===t)),this.#r=(t(this,G),t(this,q,!1)),this._value=(t(this,J),null),this.#i=t(this,Z,null),this._displayValue=(t(this,Q),null),this._resizeObserver=new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()}),this._originElement=null,this._escapableOverlayController=new d(this),this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new p(this),this._isValueManuallyAssigned=!1,this._restoreFocusOnClose=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=E(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||E(this._overlay,e)||E(this._originElement,e)||this.close()},this.addEventListener?.(`optionselectionchange`,e=>this._onOptionChanged(e)),this.addEventListener?.(`optionLabelChanged`,e=>this._onOptionLabelChanged(e)),this.addEventListener?.(`ɵoptionvaluechange`,()=>this._updateValueOptionState()),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addEventListener?.(`focusin`,e=>this._onFocusIn(e)),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&this._close(!0):this._toggleOpening()}),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}})),this.addEventListener(`keydown`,e=>this._onKeyDown(e))}attributeChangedCallback(e,t,n){e===`aria-label`||e===`aria-labelledby`||e===`aria-describedby`?this._syncAriaLabels():super.attributeChangedCallback(e,t,n)}_syncAriaLabels(){this._triggerElement&&!i&&(j(this._triggerElement,`aria-labelledby`,this.getAttribute(`aria-labelledby`)),j(this._triggerElement,`aria-label`,this.getAttribute(`aria-label`)),j(this._triggerElement,`aria-describedby`,this.getAttribute(`aria-describedby`)),!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.internals.labels.length&&this._triggerElement?.setAttribute(`aria-label`,Array.from(this.internals.labels,e=>e.textContent).join(`, `)))}open(){this.state!==`opening`&&this.state!==`opened`&&this._overlay&&this.options.length!==0&&!this.disabled&&!this.formDisabled&&this.dispatchBeforeOpenEvent()&&(this.shadowRoot?.querySelector(`[popover]`)?.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`true`),this.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._close()}_close(e=!1){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this._restoreFocusOnClose=e,this.state=`closing`,this.internals.states.delete(`expanded`),this._openPanelEventsController?.abort(),this._originElement&&this._resizeObserver.unobserve(this._originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return O(this,`--sbb-options-panel-animation-duration`)}getDisplayValue(){return this._displayValue??``}_onOptionChanged(e){let t=e.target;t.selected?this._onOptionSelected(t):this._onOptionDeselected(t)}_onOptionLabelChanged(e){let t=e.target,n=this._getSelected();!Array.isArray(n)&&t!==n||Array.isArray(n)&&!n.includes(t)||this._updateDisplayValue()}async _updateDisplayValue(){let e=this._getSelected();this._displayValue=Array.isArray(e)?e.map(e=>e.textContent?.trim()).join(`, `)||null:e&&e?.textContent?.trim()||null,this.toggleState(`has-display-value`,!!this._displayValue),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0})),this.hydrationRequired&&await this.hydrationComplete;let t=[this._triggerElement?.querySelector?.(`span`),this.shadowRoot?.querySelector?.(`.sbb-select__trigger`)];for(let e of t)e&&(e.textContent=this._displayValue??this.placeholder)}_onMultipleChanged(e){e?this._value=this._isValueManuallyAssigned||this.value!=null?[this.value]:[]:Array.isArray(this.value)&&(this._value=this.value.length?this.value[0]:null),this._updateDisplayValue()}_closeOnDisabledReadonlyChanged(e){(this.state===`opening`||this.state===`opened`)&&e&&this.close()}firstUpdated(e){super.firstUpdated(e),this._updateValueOptionState(),this._triggerElement&&(this._syncAriaLabels(),this._triggerElement.select=this),D()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){D()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),this._syncNegative(),this._syncAriaLabels(),this._didLoad&&(this._setupOrigin(),this._setupTrigger())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!e&&this.hasUpdated&&setTimeout(()=>this._syncAriaLabels())}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`readOnly`)&&this._closeOnDisabledReadonlyChanged(this.readOnly)}disconnectedCallback(){this._triggerElement&&this.prepend(this._triggerElement),super.disconnectedCallback(),this._openPanelEventsController?.abort()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){try{let{value:t,manuallyAssigned:n}=JSON.parse(e);this._isValueManuallyAssigned=n,this._value=t,this._updateOptionsFromValue()}catch{console.warn(`Failed to restore sbb-select with state ${e}`)}}formState(){return JSON.stringify({value:this.value,manuallyAssigned:this._isValueManuallyAssigned})}_syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate();let e=Array.isArray(this.value)?this.value:this.value===null?[]:[this.value];this.required&&(this.options.every(t=>e.every(e=>!this.compareWith(e,t.value)))||!this._isValueManuallyAssigned&&this.value==null)?this.setValidityFlag(`valueMissing`,T[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}_setupSelect(){this._setupOrigin(),this._setupTrigger(),this._didLoad=!0,this.completeUpdate()}_setupOrigin(){let e=this.closest?.(`sbb-form-field`);this._originElement&&this._resizeObserver.unobserve(this._originElement),this._originElement=e?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.parentElement,this._originElement&&(this.toggleState(`option-panel-origin-borderless`,e?.hasAttribute?.(`borderless`)),this.isOpen&&this._resizeObserver.observe(this._originElement))}_setupTrigger(){this.parentElement&&this._triggerElement&&this.parentElement.insertBefore?.(this._triggerElement,this)}_setOverlayPosition(){this._originElement&&this._overlay&&M(this._overlay,this._originElement,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){let e=this._restoreFocusOnClose||this._isFocusWithin();this._restoreFocusOnClose=!1,this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`false`),this._resetActiveElement(),e&&this.focus(),this._overlay&&(this._overlay.scrollTop=0),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_isFocusWithin(){let e=this.getRootNode().activeElement;return!!e&&(e===this._triggerElement||this.contains(e))}_onOptionSelected(e){this.multiple?this.value?Array.isArray(this.value)&&!this.value.some(t=>this.compareWith(t,e.value))&&(this._value=[...this.value,e.value]):this._value=[e.value]:this._value=e.value,this._updateOptionsFromValue(),this._dispatchInputEvents()}_onOptionDeselected(e){this.multiple&&Array.isArray(this.value)&&(this._value=this.value.filter(t=>!this.compareWith(t,e.value)),this._updateOptionsFromValue(),this._dispatchInputEvents())}_dispatchInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal})}_onKeyDown(e){this.readOnly||(this.state===`opening`||this.state===`opened`?this._openedPanelKeyboardInteraction(e):(this.state===`closed`||this.state===`closing`)&&this._closedPanelKeyboardInteraction(e))}_closedPanelKeyboardInteraction(e){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.open()}}_openedPanelKeyboardInteraction(e){if(!this.readOnly){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Tab`:this.close();break;case`Enter`:case` `:e.preventDefault(),this._selectByKeyboard();break;case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._setNextActiveOption(e);break;case`Home`:case`PageUp`:e.preventDefault(),this._setNextActiveOption(e,0);break;case`End`:case`PageDown`:e.preventDefault(),this._setNextActiveOption(e,this.options.length-1)}}}_checkForLetterSelection(e){return e.key===`Backspace`||e.key===`Clear`||e.key.length===1&&e.key!==` `&&!e.altKey&&!e.ctrlKey&&!e.metaKey}_setNextActiveOptionByText(e){typeof this._searchTimeout==typeof setTimeout&&clearTimeout(this._searchTimeout),this._searchTimeout=setTimeout(()=>this._searchString=``,1e3),this._searchString+=e.key;let t=this._activeItemIndex+1,n=this.options,r=[...n.slice(t),...n.slice(0,t)],i=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase())===0);if(i)this._setNextActiveOption(e,n.indexOf(i));else if(this._searchString.length>1&&RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)){let t=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase())===0);t&&this._setNextActiveOption(e,n.indexOf(t))}else clearTimeout(this._searchTimeout),this._searchString=``}_selectByKeyboard(){let e=this.options[this._activeItemIndex];e&&!e.disabled&&(this.multiple?e.selectViaUserInteraction(!e.selected):(e.selected||e.selectViaUserInteraction(!0),this.close()))}_setNextActiveOption(e,t){let n=this.options,r=t??x(e,this._activeItemIndex,n.length),i=n[this._activeItemIndex],a=n[r];this._activeItemIndex=r,this._setActiveElement(a,i),a.disabled||(this.multiple?e.shiftKey&&a.selectViaUserInteraction(!a.selected):a.selectViaUserInteraction(!0))}_setActiveElement(e,t=null){e.focus({preventScroll:!0}),e.scrollIntoView({block:`nearest`}),e.setActive(!0),t&&t!==e&&t.setActive(!1)}_onFocusIn(e){let t=e.target;if(t?.localName!==`sbb-option`)return;let n=this.options,r=t,i=n.indexOf(r);i!==-1&&(this._activeItemIndex=i,n.forEach(e=>e.setActive(!1)))}_resetActiveElement(){let e=this.options[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1}_updateOptionsFromValue(){let e=Array.isArray(this.value)?this.value:[this.value],t=[];for(let n of this.options)n.selected=e.some(e=>this.compareWith(e,n.value)),n.selected&&t.push(n);if(this._updateDisplayValue(),!Array.isArray(this.value)){let e=this.value;this._activeItemIndex=this.options.findIndex(t=>this.compareWith(t.value,e))}}_updateValueFromOptions(){let e=this._getSelected();if(Array.isArray(e)){if(e&&e.length>0){let t=[];for(let n of e)t.push(n.value);this._value=t}}else e&&(this._activeItemIndex=this.options.findIndex(t=>t===e),this._value=e.value);this._updateDisplayValue()}_handleSlotchange(){this.options.forEach(e=>e.tabIndex=-1),this._updateValueOptionState()}_updateValueOptionState(){this._isValueManuallyAssigned?this._updateOptionsFromValue():this._updateValueFromOptions()}_getSelected(){return this.multiple?this.options.filter(e=>e.selected):this.options.find(e=>e.selected)??null}_toggleOpening(){if(!(this.disabled||this.formDisabled||this.readOnly))switch(this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.focus(),this.open()}}render(){return r`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
       <sbb-select-trigger
@@ -8,13 +8,18 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
         tabindex=${this.disabled||this.formDisabled?a:`0`}
         @keydown=${this._onKeyDown}
         @click=${this._toggleOpening}
-        ${l(e=>this._triggerElement=e)}
+        ${c(e=>this._triggerElement=e)}
       >
-        ${e}${this.multiple&&!this.disabled&&!this.readOnly?r`<p>${w[this._languageController.current]}</p>`:a}
+        <span></span>${this.multiple&&!this.disabled&&!this.readOnly?r`<p>${w[this._languageController.current]}</p>`:a}
       </sbb-select-trigger>
 
-      <!-- Visually display the value -->
-      <div class="sbb-select__trigger" aria-hidden="true">${e}</div>
+      <!--
+        Visually display the value.
+        The span is replaced after the first render. It is only here to avoid a Lit warning
+        about changing Lit-controlled content, because we update it directly.
+        The placeholder must be rendered here so it is transferred from server-side rendering.
+      -->
+      <div class="sbb-select__trigger" aria-hidden="true"><span>${this.placeholder}</span></div>
 
       <div class="sbb-option-panel__overlay-container sbb-popover-reset" popover="manual">
         <div
@@ -23,9 +28,9 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
           aria-multiselectable=${this.multiple?`true`:a}
           tabindex="-1"
           @animationend=${this._onAnimationEnd}
-          ${l(e=>this._overlay=e)}
+          ${c(e=>this._overlay=e)}
         >
           <slot @slotchange=${this._handleSlotchange}></slot>
         </div>
       </div>
-    `}}})();export{F as SbbSelectElement,N as SbbSelectTriggerElement};
+    `}}})();export{L as SbbSelectElement,F as SbbSelectTriggerElement};