@sbb-esta/lyne-elements-dev 5.13.0-dev.1793604746 → 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/paginator.pure.js

@@ -10,7 +10,7 @@ import { SbbOptionElement } from "./option.pure.js";
 import { SbbSelectElement } from "./select.pure.js";
 
 // src/elements/paginator/common/paginator-common.scss?inline
-var paginator_common_default = ":host([size=s]) {\n  --sbb-paginator-height: var(--sbb-size-element-xs);\n}\n\n:host([size=m]) {\n  --sbb-paginator-height: var(--sbb-size-element-m);\n}\n\n:host([negative]) {\n  --sbb-paginator-color: var(--sbb-color-5);\n}\n";
+var paginator_common_default = ":host([size=s]) {\n  --sbb-paginator-height: var(--sbb-paginator-height-s);\n}\n\n:host([size=m]) {\n  --sbb-paginator-height: var(--sbb-paginator-height-m);\n}\n\n:host([negative]) {\n  --sbb-paginator-color: var(--sbb-paginator-color-negative);\n}\n";
 
 // src/elements/paginator/common/paginator-common.ts
 var SbbPaginatorPageEvent = class extends Event {

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/lean-off-brand-theme.css

@@ -1712,7 +1712,10 @@ summary {
   --sbb-overlay-animation-easing: ease;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: var(--sbb-size-element-xs);
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
+  --sbb-paginator-height: var(--sbb-paginator-height-s);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);

package/lean-safety-theme.css

@@ -1732,7 +1732,10 @@ summary {
   --sbb-overlay-animation-easing: ease;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: var(--sbb-size-element-xs);
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
+  --sbb-paginator-height: var(--sbb-paginator-height-s);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);

package/lean-theme.css

@@ -1732,7 +1732,10 @@ summary {
   --sbb-overlay-animation-easing: ease;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: var(--sbb-size-element-xs);
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
+  --sbb-paginator-height: var(--sbb-paginator-height-s);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);

package/off-brand-theme.css

@@ -1712,7 +1712,10 @@ summary {
   --sbb-overlay-animation-easing: ease;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: var(--sbb-size-element-m);
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
+  --sbb-paginator-height: var(--sbb-paginator-height-m);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.13.0-dev.1793604746",
+  "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/ac4cd44bf6a0d408fe986cf8006f8c37e37a754a"
+    "https://github.com/sbb-design-systems/lyne-components/commit/f41051760a0885369cde0367effd04a7d410583b"
   ],
   "type": "module",
   "exports": {

package/paginator/_paginator.global.scss

@@ -4,10 +4,13 @@ $theme: 'standard' !default;
 
 @mixin base {
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
   --sbb-paginator-height: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-size-element-m),
-        'lean': var(--sbb-size-element-xs),
+        'standard': var(--sbb-paginator-height-m),
+        'lean': var(--sbb-paginator-height-s),
       ),
       $theme
     )};

package/paginator.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbMiniButtonElement as o,SbbMiniButtonGroupElement as s}from"./button.pure.js";import{SbbDisabledMixin as c,SbbElement as l,SbbLanguageController as u,SbbNegativeMixin as d,buttonResetStyles as f,forceType as p,i18nItemsPerPage as m,i18nNextPage as h,i18nPage as g,i18nPaginatorOf as _,i18nPaginatorSelected as v,i18nPreviousPage as y,listResetStyles as b,sbbInputModalityDetector as x,screenReaderOnlyStyles as S}from"./core.js";import{SbbDividerElement as C}from"./divider.pure.js";import{repeat as w}from"lit/directives/repeat.js";import{SbbFormFieldElement as T}from"./form-field.pure.js";import{SbbOptionElement as E}from"./option.pure.js";import{SbbSelectElement as D}from"./select.pure.js";var O=`:host([size=s]){--sbb-paginator-height:var(--sbb-size-element-xs)}:host([size=m]){--sbb-paginator-height:var(--sbb-size-element-m)}:host([negative]){--sbb-paginator-color:var(--sbb-color-5)}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbMiniButtonElement as o,SbbMiniButtonGroupElement as s}from"./button.pure.js";import{SbbDisabledMixin as c,SbbElement as l,SbbLanguageController as u,SbbNegativeMixin as d,buttonResetStyles as f,forceType as p,i18nItemsPerPage as m,i18nNextPage as h,i18nPage as g,i18nPaginatorOf as _,i18nPaginatorSelected as v,i18nPreviousPage as y,listResetStyles as b,sbbInputModalityDetector as x,screenReaderOnlyStyles as S}from"./core.js";import{SbbDividerElement as C}from"./divider.pure.js";import{repeat as w}from"lit/directives/repeat.js";import{SbbFormFieldElement as T}from"./form-field.pure.js";import{SbbOptionElement as E}from"./option.pure.js";import{SbbSelectElement as D}from"./select.pure.js";var O=`:host([size=s]){--sbb-paginator-height:var(--sbb-paginator-height-s)}:host([size=m]){--sbb-paginator-height:var(--sbb-paginator-height-m)}:host([negative]){--sbb-paginator-color:var(--sbb-paginator-color-negative)}
 `,k=class extends Event{get length(){return this._length}get pageSize(){return this._pageSize}get pageIndex(){return this._pageIndex}get previousPageIndex(){return this._previousPageIndex}constructor({length:e,pageSize:t,pageIndex:n,previousPageIndex:r}){super(`page`,{bubbles:!0,composed:!0}),this._length=e,this._pageSize=t,this._pageIndex=n,this._previousPageIndex=r}};const A=l=>(()=>{let f=d(c(l)),m,_=[],b=[],w,T=[],E=[],D,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H=[],U=[],W,G=[],K=[];return class extends f{constructor(){super(...arguments),this.#e=t(this,_,0),this.#t=(t(this,b),t(this,T,10)),this.#n=(t(this,E),t(this,A,0)),this.#r=(t(this,j),t(this,N,`start`)),this.#i=(t(this,P),t(this,I,null)),this.#a=(t(this,L),t(this,z,``)),this.#o=(t(this,B),t(this,H,``)),this.#s=(t(this,U),t(this,G,``)),this.language=(t(this,K),new u(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;m=[p(),a({type:Number})],w=[p(),a({attribute:`page-size`,type:Number})],D=[p(),a({attribute:`page-index`,type:Number})],M=[a({attribute:`pager-position`,reflect:!0})],F=[a({reflect:!0})],R=[p(),a({attribute:`accessibility-page-label`})],V=[p(),a({attribute:`accessibility-previous-page-label`})],W=[p(),a({attribute:`accessibility-next-page-label`})],e(this,null,m,{kind:`accessor`,name:`length`,static:!1,private:!1,access:{has:e=>`length`in e,get:e=>e.length,set:(e,t)=>{e.length=t}},metadata:t},_,b),e(this,null,w,{kind:`accessor`,name:`pageSize`,static:!1,private:!1,access:{has:e=>`pageSize`in e,get:e=>e.pageSize,set:(e,t)=>{e.pageSize=t}},metadata:t},T,E),e(this,null,D,{kind:`accessor`,name:`pageIndex`,static:!1,private:!1,access:{has:e=>`pageIndex`in e,get:e=>e.pageIndex,set:(e,t)=>{e.pageIndex=t}},metadata:t},A,j),e(this,null,M,{kind:`accessor`,name:`pagerPosition`,static:!1,private:!1,access:{has:e=>`pagerPosition`in e,get:e=>e.pagerPosition,set:(e,t)=>{e.pagerPosition=t}},metadata:t},N,P),e(this,null,F,{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},I,L),e(this,null,R,{kind:`accessor`,name:`accessibilityPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityPageLabel`in e,get:e=>e.accessibilityPageLabel,set:(e,t)=>{e.accessibilityPageLabel=t}},metadata:t},z,B),e(this,null,V,{kind:`accessor`,name:`accessibilityPreviousPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityPreviousPageLabel`in e,get:e=>e.accessibilityPreviousPageLabel,set:(e,t)=>{e.accessibilityPreviousPageLabel=t}},metadata:t},H,U),e(this,null,W,{kind:`accessor`,name:`accessibilityNextPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityNextPageLabel`in e,get:e=>e.accessibilityNextPageLabel,set:(e,t)=>{e.accessibilityNextPageLabel=t}},metadata:t},G,K),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[S,i(O)]}static{this.elementDependencies=[s,o,C]}static{this.role=`group`}#e;get length(){return this.#e}set length(e){this.#e=e}#t;get pageSize(){return this.#t}set pageSize(e){this.#t=e}#n;get pageIndex(){return this.#n}set pageIndex(e){this.#n=e}#r;get pagerPosition(){return this.#r}set pagerPosition(e){this.#r=e}#i;get size(){return this.#i}set size(e){this.#i=e}#a;get accessibilityPageLabel(){return this.#a}set accessibilityPageLabel(e){this.#a=e}#o;get accessibilityPreviousPageLabel(){return this.#o}set accessibilityPreviousPageLabel(e){this.#o=e}#s;get accessibilityNextPageLabel(){return this.#s}set accessibilityNextPageLabel(e){this.#s=e}willUpdate(e){super.willUpdate(e);let t=null;if(e.has(`length`)&&this.length!==e.get(`length`)&&(this.length=isNaN(this.length)||this.length<0?0:this.length,this.pageIndex=this._coercePageIndexInRange(this.pageIndex)),e.has(`pageSize`)&&this.pageSize!==e.get(`pageSize`)){let n=e.get(`pageSize`);this.pageSize=isNaN(this.pageSize)||this.pageSize<0?0:this.pageSize,n&&!e.has(`pageIndex`)&&(this.pageIndex=Math.floor(this.pageIndex*n/this.pageSize)||0),t=this.pageIndex}e.has(`pageIndex`)&&this.pageIndex!==e.get(`pageIndex`)&&(this.pageIndex=this._coercePageIndexInRange(this.pageIndex),t=e.get(`pageIndex`)),t!==null&&this._emitPageEvent(t)}updated(e){super.updated(e),this.shadowRoot.querySelector(`.sbb-screen-reader-only#status`).textContent=this._currentPageLabel()}_coercePageIndexInRange(e){return Math.max(Math.min(Math.max(isNaN(e)?0:e,0),this.numberOfPages()-1),0)}_currentPageLabel(){return`${this.accessibilityPageLabel?this.accessibilityPageLabel:g[this.language.current]} ${this.pageIndex+1} ${v[this.language.current]}.`}nextPage(){this.pageIndex+=1}previousPage(){--this.pageIndex}firstPage(){this.pageIndex=0}lastPage(){this.pageIndex=this.numberOfPages()-1}selectPage(e){this.pageIndex=e}hasPreviousPage(){return this.pageIndex>=1&&this.pageSize!==0}hasNextPage(){let e=this.numberOfPages()-1;return this.pageIndex<e&&this.pageSize!==0}numberOfPages(){return this.pageSize?Math.ceil(this.length/this.pageSize):0}_emitPageEvent(e){if(this.hasUpdated){let t={previousPageIndex:e,pageIndex:this.pageIndex,length:this.length,pageSize:this.pageSize};this.dispatchEvent(new k(t))}}renderPrevNextButtons(){return n`
         <sbb-mini-button-group ?negative=${this.negative} size=${this.size||r}>
           <sbb-mini-button

package/safety-theme.css

@@ -1732,7 +1732,10 @@ summary {
   --sbb-overlay-animation-easing: ease;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: var(--sbb-size-element-m);
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
+  --sbb-paginator-height: var(--sbb-paginator-height-m);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);

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

package/standard-theme.css

@@ -1732,7 +1732,10 @@ summary {
   --sbb-overlay-animation-easing: ease;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-paginator-height: var(--sbb-size-element-m);
+  --sbb-paginator-color-negative: var(--sbb-color-5);
+  --sbb-paginator-height-s: var(--sbb-size-element-xs);
+  --sbb-paginator-height-m: var(--sbb-size-element-s);
+  --sbb-paginator-height: var(--sbb-paginator-height-m);
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);