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

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",

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

@@ -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. */

package/development/select.pure.js

@@ -437,9 +437,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;
@@ -714,7 +711,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 +722,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 +768,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 +790,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 +802,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();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.13.0-dev.1793605199",
+  "version": "5.13.0-dev.1793605208",
   "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/f41051760a0885369cde0367effd04a7d410583b"
   ],
   "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`
+`;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??``}_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.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()}}_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`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
       <sbb-select-trigger