@sbb-esta/lyne-elements-dev 5.4.0-dev.1785707710 → 5.4.0-dev.1785742243

package/development/chip.pure.js

@@ -389,12 +389,10 @@ let SbbChipGroupElement = (() => {
 			}
 			switch (event.key) {
 				case "Backspace":
-				case "Delete":
-					if (!eventTarget.readOnly && !eventTarget.disabled) {
-						event.preventDefault();
-						this._deleteChip(eventTarget);
-					}
-					break;
+				case "Delete": if (!eventTarget.readOnly && !eventTarget.disabled) {
+					event.preventDefault();
+					this._deleteChip(eventTarget);
+				}
 			}
 		}
 		/**
@@ -406,9 +404,7 @@ let SbbChipGroupElement = (() => {
 				case "ArrowLeft":
 					if (!this._inputElement.value) this._focusChip();
 					break;
-				case "Enter":
-					event.preventDefault();
-					break;
+				case "Enter": event.preventDefault();
 			}
 			if (this.separatorKeys.includes(event.key)) {
 				event.preventDefault();

package/development/core/testing.js

@@ -81,7 +81,7 @@ const testIf = (condition, title, fn) => {
 
 //#endregion
 //#region src/elements/core/testing/wait-for-condition.ts
-async function waitForCondition(condition, interval = 30, timeoutInMilliseconds = 2 * 1e3) {
+async function waitForCondition(condition, interval = 30, timeoutInMilliseconds = 2e3) {
 	const start = /* @__PURE__ */ new Date();
 	let counter = 0;
 	function checkCondition() {
@@ -125,7 +125,7 @@ const isSafari = !isServer && /safari/i.test(navigator.userAgent) && isWebkit;
 
 //#endregion
 //#region src/elements/core/testing/wait-for-image-ready.ts
-async function waitForImageReady(element, timeoutInMilliseconds = 2 * 1e3) {
+async function waitForImageReady(element, timeoutInMilliseconds = 2e3) {
 	const imgElement = element.localName === "sbb-image" ? element.shadowRoot?.querySelector(".sbb-image__img") ?? null : element;
 	if (!imgElement) throw new Error("img tag not found");
 	if (!imgElement.complete) await new Promise((resolve, reject) => {

package/development/core.js

@@ -3813,14 +3813,12 @@ var SbbOverlayPositionController = class {
 					};
 					break;
 				case "right span-bottom":
-				case "inline-end span-block-end":
-					result = {
-						position,
-						left: triggerOffsetLeft + triggerWidth,
-						top: triggerOffsetTop,
-						fits: overlayWidth <= rightSpace && overlayHeightNet <= bottomSpace
-					};
-					break;
+				case "inline-end span-block-end": result = {
+					position,
+					left: triggerOffsetLeft + triggerWidth,
+					top: triggerOffsetTop,
+					fits: overlayWidth <= rightSpace && overlayHeightNet <= bottomSpace
+				};
 			}
 			if (result.fits) return result;
 			firstPosition ??= result;
@@ -5411,7 +5409,8 @@ const SbbFormAssociatedRadioButtonMixin = (superClass) => {
 				if (!isArrowKeyPressed(evt)) return;
 				evt.preventDefault();
 				const enabledRadios = this._interactableGroupedRadios().filter((r) => !r.disabled && !r.formDisabled);
-				const nextIndex = getNextElementIndex(evt, enabledRadios.indexOf(this), enabledRadios.length);
+				const current = enabledRadios.indexOf(this);
+				const nextIndex = getNextElementIndex(evt, current, enabledRadios.length);
 				await this.navigateByKeyboard(enabledRadios[nextIndex]);
 			}
 		};
@@ -5994,7 +5993,7 @@ function getElementPositionHorizontal(element, trigger, container, properties) {
 	const availableSpaceRight = document.documentElement.clientWidth - triggerParentRec.right;
 	const availableSpaceBelow = document.documentElement.clientHeight - (triggerRec.top - verticalOffset);
 	const availableVerticalSpace = document.documentElement.clientHeight;
-	const elementMaxHeight = `${availableVerticalSpace - maxHeightOffset * 2}px`;
+	const elementMaxHeight = `${availableVerticalSpace - 32}px`;
 	const alignment = {
 		horizontal: "end",
 		vertical: "above"

package/development/image.pure.js

@@ -729,9 +729,10 @@ let SbbImageElement = (() => {
           ${pictureSizeConfigs.map((config) => {
 				const imageHeight = config.image.height;
 				const imageWidth = config.image.width;
+				const mediaQuery = this._createMediaQueryString(config.mediaQueries);
 				return html`
               <source
-                media=${`${this._createMediaQueryString(config.mediaQueries)}`}
+                media=${`${mediaQuery}`}
                 sizes=${`${imageWidth}px`}
                 srcset=${`${imageUrlWithParams}&w=${imageWidth}&h=${imageHeight}&q=${this._config.nonRetinaQuality} ${imageWidth}w, ${imageUrlWithParams}&w=${imageWidth * 2}&h=${imageHeight * 2}&q=${this._config.retinaQuality} ${imageWidth * 2}w`}
               ></source>`;

package/development/menu.pure.js

@@ -289,9 +289,7 @@ let SbbMenuElement = (() => {
 					nextIndex = 0;
 					break;
 				case "End":
-				case "PageDown":
-					nextIndex = enabledActions.length - 1;
-					break;
+				case "PageDown": nextIndex = enabledActions.length - 1;
 			}
 			if (nextIndex !== void 0) enabledActions[nextIndex].focus();
 		}

package/development/navigation.pure.js

@@ -558,7 +558,8 @@ let SbbNavigationSectionElement = (() => {
 			if (this.state === "opened" && event.key === "Escape") this.close();
 		}
 		_checkActiveAction() {
-			ɵstateController(this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active"))?.toggle("action-active", true);
+			const element = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+			ɵstateController(element)?.toggle("action-active", true);
 		}
 		connectedCallback() {
 			super.connectedCallback();

package/development/option.pure.js

@@ -556,9 +556,12 @@ let SbbOptionBaseElement = (() => {
 			if (!this._highlightString || !this._highlightString.trim()) return html`${this.label}`;
 			const matchIndex = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
 			if (matchIndex === -1) return html`${this.label}`;
+			const prefix = this.label.substring(0, matchIndex);
+			const highlighted = this.label.substring(matchIndex, matchIndex + this._highlightString.length);
+			const postfix = this.label.substring(matchIndex + this._highlightString.length);
 			return html`
-      <span class="sbb-option__label--highlight">${this.label.substring(0, matchIndex)}</span><span>${this.label.substring(matchIndex, matchIndex + this._highlightString.length)}</span
-      ><span class="sbb-option__label--highlight">${this.label.substring(matchIndex + this._highlightString.length)}</span>
+      <span class="sbb-option__label--highlight">${prefix}</span><span>${highlighted}</span
+      ><span class="sbb-option__label--highlight">${postfix}</span>
     `;
 		}
 		renderIcon() {
@@ -577,7 +580,14 @@ let SbbOptionBaseElement = (() => {
         <span class="sbb-option__label">
           <slot @slotchange=${this.handleHighlightState}></slot>
           <span
-            aria-hidden=${isBlink ? "true" : nothing}
+            aria-hidden=${
+			/**
+			* Screen readers with Chromium read the option twice.
+			* We therefore have to hide the option for the screen readers.
+			* TODO: Recheck periodically if this is still necessary.
+			* https://issues.chromium.org/issues/460165741
+			*/
+			isBlink ? "true" : nothing}
           >
             ${this.renderLabel()}
           </span>

package/development/select.pure.js

@@ -622,7 +622,6 @@ let SbbSelectElement = (() => {
 				case "ArrowUp":
 					event.preventDefault();
 					this.open();
-					break;
 			}
 		}
 		_openedPanelKeyboardInteraction(event) {
@@ -651,7 +650,6 @@ let SbbSelectElement = (() => {
 				case "PageDown":
 					event.preventDefault();
 					this._setNextActiveOption(event, this._selectableOptions().length - 1);
-					break;
 			}
 		}
 		_checkForLetterSelection(event) {
@@ -750,10 +748,7 @@ let SbbSelectElement = (() => {
 					this.close();
 					break;
 				case "closing":
-				case "closed":
-					this.open();
-					break;
-				default: break;
+				case "closed": this.open();
 			}
 		}
 		_spreadDeferredDisplayValue(placeholder) {

package/development/stepper.pure.js

@@ -717,7 +717,8 @@ let SbbStepperElement = (() => {
 			const enabledSteps = this._enabledSteps;
 			if (!enabledSteps || evt.target !== this && evt.target.parentElement !== this) return;
 			if (isArrowKeyPressed(evt)) {
-				const nextIndex = getNextElementIndex(evt, enabledSteps.indexOf(this.selected), enabledSteps.length);
+				const current = enabledSteps.indexOf(this.selected);
+				const nextIndex = getNextElementIndex(evt, current, enabledSteps.length);
 				this._select(enabledSteps[nextIndex]);
 				evt.preventDefault();
 			}

package/development/tabs.pure.js

@@ -277,7 +277,8 @@ let SbbTabGroupElement = (() => {
 			const enabledTabs = this._enabledTabs();
 			if (!enabledTabs || evt.target !== this && evt.target.parentElement !== this) return;
 			if (isArrowKeyPressed(evt)) {
-				const nextIndex = getNextElementIndex(evt, enabledTabs.findIndex((t) => t.active), enabledTabs.length);
+				const current = enabledTabs.findIndex((t) => t.active);
+				const nextIndex = getNextElementIndex(evt, current, enabledTabs.length);
 				enabledTabs[nextIndex]?.activate();
 				enabledTabs[nextIndex]?.focus();
 				evt.preventDefault();

package/file-selector.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{ref as a}from"lit/directives/ref.js";import{html as o,unsafeStatic as s}from"lit/static-html.js";import{SbbSecondaryButtonElement as c,SbbSecondaryButtonStaticElement as l}from"./button.pure.js";import{SbbDisabledMixin as u,SbbElement as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,forceType as m,forwardEvent as h,i18nFileSelectorButtonLabel as g,i18nFileSelectorButtonLabelMultiple as _,i18nFileSelectorCurrentlySelected as v,i18nFileSelectorDeleteFile as y,i18nFileSelectorSubtitleLabel as b,i18nFileSelectorSubtitleLabelMultiple as x,sbbInputModalityDetector as S,screenReaderOnlyStyles as C,ɵstateController as w}from"./core.js";import{SbbIconElement as T}from"./icon.pure.js";var E=`:host{--sbb-file-selector-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));width:20rem;display:block}@media (forced-colors:active){:host(:disabled){--sbb-file-selector-color:GrayText;--sbb-file-selector-subtitle-color:GrayText;--sbb-file-selector-border-color:GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color:var(--sbb-background-color-3);--sbb-file-selector-border-color:light-dark(var(--sbb-color-storm),var(--sbb-color-anthracite))}@media (forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color:Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex}.sbb-file-selector__file-list{row-gap:var(--sbb-spacing-fixed-3x);padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);flex-direction:column;margin-block:0;display:flex}.sbb-file-selector__file{gap:var(--sbb-spacing-fixed-4x);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-s);justify-content:space-between;align-items:center;display:flex}.sbb-file-selector__file-details{justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);flex:1;display:flex;overflow:auto}.sbb-file-selector__file-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-file-selector__file-size{white-space:nowrap;color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}
-`,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},T,O),e(this,null,k,{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},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e,t=!1){let n=Array.from(e);!this.multiple&&e.length>1||this.accept&&n.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?this.files=n:this.files=n.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent(),t&&this._dispatchNativeEvents())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this._dispatchNativeEvents(),this._dispatchFileChangedEvent()}_dispatchNativeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
+`,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},T,O),e(this,null,k,{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},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e,t=!1){let n=Array.from(e);!this.multiple&&e.length>1||this.accept&&n.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(this.files=!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?n:n.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent(),t&&this._dispatchNativeEvents())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this._dispatchNativeEvents(),this._dispatchFileChangedEvent()}_dispatchNativeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
       <${s(e.WRAPPER)} class="sbb-file-selector__file-list">
         ${this.files.map(t=>o`
             <${s(e.ELEMENT)} class="sbb-file-selector__file">

package/header.pure.js

@@ -12,7 +12,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
         <slot></slot>
       </span>
     `}},C=class extends y(d){static{this.elementName=`sbb-header-link`}},w=`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);line-height:var(--sbb-typo-line-height-text);padding-block-start:calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));display:block}:host([size=s]){--sbb-header-height:var(--sbb-header-height-s)}:host([size=m]){--sbb-header-height:var(--sbb-header-height-m)}:host([hide-on-scroll]){--sbb-header-position:absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position:fixed;--sbb-header-animation-name:hide;--sbb-header-transform:translate3d(0, -100%, 0);--sbb-header-inset-inline-end:var(--sbb-scrollbar-width,0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing:cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name:show;--sbb-header-transform:translate3d(0, 0, 0);--sbb-header-transition-timing:cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration:0;--sbb-header-transform:translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index,10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing);padding-block-start:var(--sbb-header-padding-block-start)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media (forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{height:var(--sbb-header-height);justify-content:flex-start;align-items:center;display:flex}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:none}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){padding-block:var(--sbb-spacing-fixed-3x);display:block;position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";inset:var(--sbb-spacing-fixed-3x) 0;display:block;position:absolute}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translateY(-100%)}to{transform:translate(0,0)}}@keyframes hide{0%{transform:translate(0,0)}to{transform:translateY(-100%)}}
-`;let T=(()=>{let s=l,c,d=[],f=[],g,_=[],v=[],y,b=[],x=[],S,C=[],T=[],E,D=[],O=[];return class l extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[p(),a({reflect:!0,type:Boolean})],g=[m(),a({attribute:`scroll-origin`})],y=[p(),a({attribute:`hide-on-scroll`,reflect:!0,type:Boolean})],S=[a({reflect:!0})],E=[o()],e(this,null,c,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},d,f),e(this,null,g,{kind:`accessor`,name:`scrollOrigin`,static:!1,private:!1,access:{has:e=>`scrollOrigin`in e,get:e=>e.scrollOrigin,set:(e,t)=>{e.scrollOrigin=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`hideOnScroll`,static:!1,private:!1,access:{has:e=>`hideOnScroll`in e,get:e=>e.hideOnScroll,set:(e,t)=>{e.hideOnScroll=t}},metadata:t},b,x),e(this,null,S,{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},C,T),e(this,null,E,{kind:`accessor`,name:`_headerOnTop`,static:!1,private:!1,access:{has:e=>`_headerOnTop`in e,get:e=>e._headerOnTop,set:(e,t)=>{e._headerOnTop=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-header`}static{this.styles=[i(w)]}static{this._headerScrollOrigins=new Set}static{this._headerElements=new Set}static{r||h(()=>this._initializeScrollOriginObserver())}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get scrollOrigin(){return this.#t}set scrollOrigin(e){this.#t=e}#n;get hideOnScroll(){return this.#n}set hideOnScroll(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get _headerOnTop(){return this.#i}set _headerOnTop(e){this.#i=e}constructor(){super(),this.#e=t(this,d,!1),this.#t=(t(this,f),t(this,_,null)),this.#n=(t(this,v),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this.#i=(t(this,T),t(this,D,!0)),this._scrollElement=t(this,O),this._lastScroll=0,this._scrollOriginFromObserver=null,this.addController(new u(this))}static _initializeScrollOriginObserver(){new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleScrollOriginElement(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleScrollOriginElement(e),this._findAndHandleScrollOrigins(e);this._updateHeaderElements()}).observe(document.documentElement,{attributeFilter:[`sbb-header-scroll-origin`],childList:!0,subtree:!0}),this._findAndHandleScrollOrigins(document.body),this._updateHeaderElements()}static _findAndHandleScrollOrigins(e){e.querySelectorAll(`[sbb-header-scroll-origin]`).forEach(e=>this._handleScrollOriginElement(e))}static _handleScrollOriginElement(e){e.isConnected&&e.hasAttribute(`sbb-header-scroll-origin`)?this._headerScrollOrigins.add(e):this._headerScrollOrigins.delete(e)}static _updateHeaderElements(){for(let e of this._headerElements)this._headerScrollOrigins.size===0?e._scrollOriginFromObserver=null:this._headerScrollOrigins.size===1?e._scrollOriginFromObserver=this._headerScrollOrigins.values().next().value??null:e._scrollOriginFromObserver=Array.from(this._headerScrollOrigins).sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_CONTAINS).at(-1)??null,e._updateScrollListener()}connectedCallback(){super.connectedCallback(),l._headerElements.add(this),this.hasUpdated&&this._updateScrollListener()}disconnectedCallback(){super.disconnectedCallback(),this._scrollElement=null,this._scrollEventsController?.abort(),l._headerElements.delete(this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`scrollOrigin`)&&this.hasUpdated&&this._updateScrollListener()}firstUpdated(e){super.firstUpdated(e),this._updateScrollListener()}_updateScrollListener(){let e=this.scrollOrigin??this._scrollOriginFromObserver??document;if(e===this._scrollElement||(this._scrollEventsController?.abort(),this._scrollElement=e,!this._scrollElement))return;this._scrollEventsController=new AbortController,this._scrollFunction=this._getScrollFunction.bind(this),this._scrollElement.addEventListener(`scroll`,this._scrollFunction,{passive:!0,signal:this._scrollEventsController.signal});let t=this._getCurrentScrollProperty(`scrollTop`);this._lastScroll=t<=0?0:t}_getScrollFunction(){return this.hideOnScroll?this._scrollListener():this._scrollShadowListener()}_getCurrentScrollProperty(e){return this._scrollElement instanceof Document?this._scrollElement.documentElement[e]||this._scrollElement.body[e]:this._scrollElement?.[e]||0}_scrollListener(){let e=this._getCurrentScrollProperty(`scrollTop`);this._getCurrentScrollProperty(`scrollHeight`)-window.innerHeight-e<=0||(this.toggleState(`shadow`,e!==0),e>this.offsetHeight&&e>0&&this._lastScroll<e&&this._closeOpenOverlays(),e>this.offsetHeight*2?(this._headerOnTop=!1,e>0&&this._lastScroll<e?[`shadow`,`visible`].forEach(e=>this.internals.states.delete(e)):[`fixed`,`shadow`,`animated`,`visible`].forEach(e=>this.internals.states.add(e))):(e===0&&(this._headerOnTop=!0),this._headerOnTop&&[`shadow`,`animated`,`fixed`,`visible`].forEach(e=>this.internals.states.delete(e))),this._lastScroll=e<=0?0:e)}_scrollShadowListener(){this.toggleState(`shadow`,this._getCurrentScrollProperty(`scrollTop`)!==0)}_closeOpenOverlays(){if(this.matches(`:is(:state(has-visible-focus-within),[state--has-visible-focus-within])`))return;let e=Array.from(this.querySelectorAll(`[aria-controls][aria-expanded='true']`));for(let t of e){let e=t.ariaControlsElements[0];typeof e?.close==`function`&&e.close()}}render(){return n`
+`;let T=(()=>{let s=l,c,d=[],f=[],g,_=[],v=[],y,b=[],x=[],S,C=[],T=[],E,D=[],O=[];return class l extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[p(),a({reflect:!0,type:Boolean})],g=[m(),a({attribute:`scroll-origin`})],y=[p(),a({attribute:`hide-on-scroll`,reflect:!0,type:Boolean})],S=[a({reflect:!0})],E=[o()],e(this,null,c,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},d,f),e(this,null,g,{kind:`accessor`,name:`scrollOrigin`,static:!1,private:!1,access:{has:e=>`scrollOrigin`in e,get:e=>e.scrollOrigin,set:(e,t)=>{e.scrollOrigin=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`hideOnScroll`,static:!1,private:!1,access:{has:e=>`hideOnScroll`in e,get:e=>e.hideOnScroll,set:(e,t)=>{e.hideOnScroll=t}},metadata:t},b,x),e(this,null,S,{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},C,T),e(this,null,E,{kind:`accessor`,name:`_headerOnTop`,static:!1,private:!1,access:{has:e=>`_headerOnTop`in e,get:e=>e._headerOnTop,set:(e,t)=>{e._headerOnTop=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-header`}static{this.styles=[i(w)]}static{this._headerScrollOrigins=new Set}static{this._headerElements=new Set}static{r||h(()=>this._initializeScrollOriginObserver())}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get scrollOrigin(){return this.#t}set scrollOrigin(e){this.#t=e}#n;get hideOnScroll(){return this.#n}set hideOnScroll(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get _headerOnTop(){return this.#i}set _headerOnTop(e){this.#i=e}constructor(){super(),this.#e=t(this,d,!1),this.#t=(t(this,f),t(this,_,null)),this.#n=(t(this,v),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this.#i=(t(this,T),t(this,D,!0)),this._scrollElement=t(this,O),this._lastScroll=0,this._scrollOriginFromObserver=null,this.addController(new u(this))}static _initializeScrollOriginObserver(){new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleScrollOriginElement(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleScrollOriginElement(e),this._findAndHandleScrollOrigins(e);this._updateHeaderElements()}).observe(document.documentElement,{attributeFilter:[`sbb-header-scroll-origin`],childList:!0,subtree:!0}),this._findAndHandleScrollOrigins(document.body),this._updateHeaderElements()}static _findAndHandleScrollOrigins(e){e.querySelectorAll(`[sbb-header-scroll-origin]`).forEach(e=>this._handleScrollOriginElement(e))}static _handleScrollOriginElement(e){e.isConnected&&e.hasAttribute(`sbb-header-scroll-origin`)?this._headerScrollOrigins.add(e):this._headerScrollOrigins.delete(e)}static _updateHeaderElements(){for(let e of this._headerElements)e._scrollOriginFromObserver=this._headerScrollOrigins.size===0?null:this._headerScrollOrigins.size===1?this._headerScrollOrigins.values().next().value??null:Array.from(this._headerScrollOrigins).sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_CONTAINS).at(-1)??null,e._updateScrollListener()}connectedCallback(){super.connectedCallback(),l._headerElements.add(this),this.hasUpdated&&this._updateScrollListener()}disconnectedCallback(){super.disconnectedCallback(),this._scrollElement=null,this._scrollEventsController?.abort(),l._headerElements.delete(this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`scrollOrigin`)&&this.hasUpdated&&this._updateScrollListener()}firstUpdated(e){super.firstUpdated(e),this._updateScrollListener()}_updateScrollListener(){let e=this.scrollOrigin??this._scrollOriginFromObserver??document;if(e===this._scrollElement||(this._scrollEventsController?.abort(),this._scrollElement=e,!this._scrollElement))return;this._scrollEventsController=new AbortController,this._scrollFunction=this._getScrollFunction.bind(this),this._scrollElement.addEventListener(`scroll`,this._scrollFunction,{passive:!0,signal:this._scrollEventsController.signal});let t=this._getCurrentScrollProperty(`scrollTop`);this._lastScroll=t<=0?0:t}_getScrollFunction(){return this.hideOnScroll?this._scrollListener():this._scrollShadowListener()}_getCurrentScrollProperty(e){return this._scrollElement instanceof Document?this._scrollElement.documentElement[e]||this._scrollElement.body[e]:this._scrollElement?.[e]||0}_scrollListener(){let e=this._getCurrentScrollProperty(`scrollTop`);this._getCurrentScrollProperty(`scrollHeight`)-window.innerHeight-e<=0||(this.toggleState(`shadow`,e!==0),e>this.offsetHeight&&e>0&&this._lastScroll<e&&this._closeOpenOverlays(),e>this.offsetHeight*2?(this._headerOnTop=!1,e>0&&this._lastScroll<e?[`shadow`,`visible`].forEach(e=>this.internals.states.delete(e)):[`fixed`,`shadow`,`animated`,`visible`].forEach(e=>this.internals.states.add(e))):(e===0&&(this._headerOnTop=!0),this._headerOnTop&&[`shadow`,`animated`,`fixed`,`visible`].forEach(e=>this.internals.states.delete(e))),this._lastScroll=e<=0?0:e)}_scrollShadowListener(){this.toggleState(`shadow`,this._getCurrentScrollProperty(`scrollTop`)!==0)}_closeOpenOverlays(){if(this.matches(`:is(:state(has-visible-focus-within),[state--has-visible-focus-within])`))return;let e=Array.from(this.querySelectorAll(`[aria-controls][aria-expanded='true']`));for(let t of e){let e=t.ariaControlsElements[0];typeof e?.close==`function`&&e.close()}}render(){return n`
       <header class="sbb-header">
         <div class="sbb-header__wrapper">
           <slot></slot>

package/image.pure.js

@@ -64,9 +64,9 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
 
         <picture>
           <!-- render picture element sources -->
-          ${i.map(e=>{let r=e.image.height,i=e.image.width;return n`
+          ${i.map(e=>{let r=e.image.height,i=e.image.width,a=this._createMediaQueryString(e.mediaQueries);return n`
               <source
-                media=${`${this._createMediaQueryString(e.mediaQueries)}`}
+                media=${`${a}`}
                 sizes=${`${i}px`}
                 srcset=${`${t}&w=${i}&h=${r}&q=${this._config.nonRetinaQuality} ${i}w, ${t}&w=${i*2}&h=${r*2}&q=${this._config.retinaQuality} ${i*2}w`}
               ></source>`})}

package/menu.pure.js

@@ -10,7 +10,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
           </span>
         </span>
       `}}return r};var B=class extends s(z(r)){static{this.elementName=`sbb-menu-button`}static{this.role=`menuitem`}},V=class extends a(z(f)){constructor(){super(...arguments),this.anchorRole=`menuitem`}static{this.elementName=`sbb-menu-link`}},H=`:host{--sbb-menu-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--_sbb-menu-inset:0 auto auto 0;display:contents}@media (width>=64rem){:host{--sbb-menu-back-button-display:none}}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-visibility:visible;--sbb-menu-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 20%, transparent)}@media (width>=64rem){:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-backdrop-color:transparent}}:host(:not(:is(:state(nested),[state--nested]))){--sbb-menu-back-button-display:none}:host(:not(:is(:state(state-closed),[state--state-closed]))){--_sbb-menu-inset:0}:host(:is(:state(dark),[state--dark])) .sbb-scrollbar-negative{--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-black) 60%, transparent)}@media (width<=63.9375rem){:host(:is(:state(skip-animation),[state--skip-animation])){--sbb-menu-animation-duration:0s}:host(:is(:state(nested-child),[state--nested-child])){--sbb-menu-transform-x:-100%}:host(:is(:state(nested),[state--nested]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-menu-open-animation-name:open-sideways}:host(:is(:state(state-closing),[state--state-closing]):is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))){--sbb-menu-close-animation-name:close-sideways}}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){padding-inline:var(--sbb-spacing-fixed-5x);display:block}sbb-divider,::slotted(sbb-divider){--sbb-divider-color:var(--sbb-background-color-4-inverted);margin-block:var(--sbb-spacing-fixed-2x)}sbb-divider,#sbb-menu__back-button{display:var(--sbb-menu-back-button-display,block)}.sbb-menu__container{pointer-events:none;inset:var(--_sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility,hidden);pointer-events:all;inset:var(--_sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color,transparent);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility;position:fixed}:host(:is(:state(nested),[state--nested])) .sbb-menu__container:before{display:none}.sbb-menu{opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;color:var(--sbb-menu-color);border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-menu-background-color);translate:var(--sbb-menu-transform-x,0) 0;transition:translate var(--sbb-menu-animation-duration);border:none;padding:0;display:none;position:absolute;inset-block-start:unset;inset-block-end:0;inset-inline-start:0;inset-inline-end:unset;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-menu{opacity:1;pointer-events:all;animation-name:var(--sbb-menu-open-animation-name,open);animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-menu{pointer-events:none;animation-name:var(--sbb-menu-close-animation-name,close)}@media (forced-colors:active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (width>=64rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;border-radius:var(--sbb-menu-border-radius);max-height:fit-content}:host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu{top:var(--sbb-menu-position-y,0);left:var(--sbb-menu-position-x,0);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);outline:none;overflow:auto}.sbb-menu__content:after{content:"";height:var(--sbb-spacing-fixed-8x);display:block}@media (width>=64rem){.sbb-menu__content{max-height:fit-content}:host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}::slotted(:is(:is(:state(sbb-link),[state--sbb-link]),:is(:state(sbb-button),[state--sbb-button]))){color-scheme:light only}@keyframes open{0%{opacity:0;translate:0 var(--sbb-menu-transform-y,100%)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-menu-transform-y,100%)}}@keyframes open-sideways{0%{translate:100%}to{translate:0}}@keyframes close-sideways{0%{translate:0}to{translate:100%}}
-`;const U=[`A`,`BUTTON`,`SBB-BUTTON`,`SBB-BUTTON-LINK`,`SBB-LINK`,`SBB-BLOCK-LINK`,`SBB-LINK-BUTTON`,`SBB-BLOCK-LINK-BUTTON`,`SBB-MENU-BUTTON`,`SBB-MENU-LINK`];let W=(()=>{let r=h,a,o=[],s=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[S(),F()],N(this,null,a,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-menu`}static{this.elementDependencies=[L,B]}static{this.styles=[D,k,n(H)]}static{this.role=`menu`}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}constructor(){super(),this.#e=P(this,o,null),this._menu=P(this,s),this._triggerElement=null,this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new c(this),this._focusTrapController=new l(this),this._scrollHandler=new g,this._inertController=new u(this),this._mobileBreakpoint=m,this._mediaMatcher=new p(this,{[this._mobileBreakpoint]:e=>{e&&(this.state===`opening`||this.state===`opened`)?this._scrollHandler.disableScroll():this._scrollHandler.enableScroll()}}),this._darkModeController=new i(this,()=>this._syncNegative()),this._language=new d(this),this._nestedMenu=null,this._pointerDownListener=e=>{let t=e.target.closest(`sbb-menu`);this._isPointerDownEventOnMenu=T(this._menu,e)||this._nestedMenus().some(e=>t===e)},this._closeOnBackdropClick=e=>{let t=e.target;!this._isPointerDownEventOnMenu&&!T(this._menu,e)&&!this._nestedMenus().some(e=>e===t)&&this.closeAll()},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}escapeStrategy(){this.closeAll()}open(){if(!(this.state===`closing`||this.state===`opened`||!this._menu||!this.dispatchBeforeOpenEvent())){if(this._isNested()){let e=this._parentMenu();e.internals.states.add(`nested-child`),e._nestedMenu!==this&&e._nestedMenu?.close(),e._nestedMenu=this}this.showPopover?.(),this.state=`opening`,this._setMenuPosition(),this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isMobile()&&this._scrollHandler.disableScroll(),this._isZeroAnimationDuration()&&this._handleOpening()}}close(){this._close()}closeAll(){this._mainMenu()._close(!0)}_close(e=!1){if(!(this.state===`opening`&&!this._isNested()||!this.dispatchBeforeCloseEvent())){if(this._nestedMenu?._close(e),this._isNested()){let t=this._parentMenu();e?(this.internals.states.add(`close-all`),t.internals.states.add(`skip-animation`)):(this.internals.states.delete(`close-all`),t.internals.states.delete(`skip-animation`)),t.internals.states.delete(`nested-child`),t._nestedMenu=null}this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()}}_isZeroAnimationDuration(){return E(this,`--sbb-menu-animation-duration`)}_handleOpening(){this.state=`opened`,this._isNested()?this._updateNestedInert():this._inertController.activate(),this._escapableOverlayController.connect(),this._focusTrapController.focusInitialElement(),this._focusTrapController.enabled=!0,this._attachWindowEvents(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.internals.states.delete(`skip-animation`),this.internals.states.delete(`close-all`),this.hidePopover?.(),this._menu?.firstElementChild?.scrollTo(0,0),this._isNested()?this._updateNestedInert():this._inertController.deactivate(),this._triggerElement?.focus({preventScroll:[`sbb-header-button`,`sbb-header-link`].includes(this._triggerElement.localName)}),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._windowEventsController?.abort(),this._focusTrapController.enabled=!1,this._scrollHandler.enableScroll()}_handleKeyDown(e){if(!w(e))return;e.preventDefault();let t=Array.from(this.querySelectorAll(`sbb-menu-button, sbb-menu-link`)).concat(this.shadowRoot.querySelector(`sbb-menu-button`)).filter(e=>(!e.disabled||e.disabledInteractive)&&C.isVisible(e)),n=t.findIndex(t=>t===e.target),r;switch(e.key){case`ArrowUp`:case`ArrowDown`:r=b(e,n,t.length);break;case`ArrowLeft`:this._isNested()&&this.close();break;case`ArrowRight`:e.target.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&e.target.click();break;case`PageUp`:case`Home`:r=0;break;case`End`:case`PageDown`:r=t.length-1;break}r!==void 0&&t[r].focus()}createRenderRoot(){let e=super.createRenderRoot();return this.shadowRoot?.addEventListener(`slotchange`,()=>this._syncNegative(),{capture:!0}),e}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort(),this._scrollHandler.enableScroll()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),O(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(A(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.toggleState(`nested`,[`sbb-menu-button`,`sbb-menu-link`].includes(this._triggerElement.localName)),j(this._triggerElement).add(`sbb-menu-trigger`)))}_attachWindowEvents(){this._windowEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal}),this._isNested()||(window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._windowEventsController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._windowEventsController.signal}))}_interactiveElementClick(e){let t=e.target;U.includes(t.nodeName)&&!t.hasAttribute(`disabled`)&&!t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&t.id!==`sbb-menu__back-button`&&this.closeAll()}_nestedMenus(){let e=[],t=this._nestedMenu;for(;t;)e.push(t),t=t._nestedMenu;return e}_parentMenu(){return this._triggerElement?.closest(`sbb-menu`)??null}_mainMenu(){return this._isNested()?this._parentMenu()?._mainMenu()??this:this}_isNested(){return!!this._parentMenu()}_updateNestedInert(){this._inertController.restoreAllExempted(),this._mainMenu()._nestedMenus().forEach(e=>this._inertController.exempt(e))}_handleMouseOver(e){let t=e.target,n=this._isMobile();!n&&this._nestedMenu&&!t.classList.contains(`sbb-menu__content`)&&t.ariaExpanded!==`true`&&this._nestedMenu.close(),t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&!n&&t.click()}_onMenuAnimationEnd(e){(e.animationName===`open`||e.animationName===`open-sideways`)&&this.state===`opening`?this._handleOpening():(e.animationName===`close`||e.animationName===`close-sideways`)&&this.state===`closing`&&this._handleClosing()}_setMenuPosition(){if(this._isMobile()||!this._menu||!this._triggerElement||this.state===`closing`)return;let e=this._isNested()?y(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{horizontalOffset:8,verticalOffset:-4,contentSelector:`.sbb-menu__content`}):v(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{verticalOffset:8});this.style.setProperty(`--sbb-menu-position-x`,`${e.left}px`),this.style.setProperty(`--sbb-menu-position-y`,`${e.top}px`),this.style.setProperty(`--sbb-menu-max-height`,e.maxHeight)}_syncNegative(){this.querySelectorAll(`:is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button])`)?.forEach(e=>{customElements.upgrade(e),e.negative=!this._darkModeController.matches()})}_isMobile(){return this._mediaMatcher.matches(this._mobileBreakpoint)??!0}render(){return e`
+`;const U=[`A`,`BUTTON`,`SBB-BUTTON`,`SBB-BUTTON-LINK`,`SBB-LINK`,`SBB-BLOCK-LINK`,`SBB-LINK-BUTTON`,`SBB-BLOCK-LINK-BUTTON`,`SBB-MENU-BUTTON`,`SBB-MENU-LINK`];let W=(()=>{let r=h,a,o=[],s=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[S(),F()],N(this,null,a,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-menu`}static{this.elementDependencies=[L,B]}static{this.styles=[D,k,n(H)]}static{this.role=`menu`}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}constructor(){super(),this.#e=P(this,o,null),this._menu=P(this,s),this._triggerElement=null,this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new c(this),this._focusTrapController=new l(this),this._scrollHandler=new g,this._inertController=new u(this),this._mobileBreakpoint=m,this._mediaMatcher=new p(this,{[this._mobileBreakpoint]:e=>{e&&(this.state===`opening`||this.state===`opened`)?this._scrollHandler.disableScroll():this._scrollHandler.enableScroll()}}),this._darkModeController=new i(this,()=>this._syncNegative()),this._language=new d(this),this._nestedMenu=null,this._pointerDownListener=e=>{let t=e.target.closest(`sbb-menu`);this._isPointerDownEventOnMenu=T(this._menu,e)||this._nestedMenus().some(e=>t===e)},this._closeOnBackdropClick=e=>{let t=e.target;!this._isPointerDownEventOnMenu&&!T(this._menu,e)&&!this._nestedMenus().some(e=>e===t)&&this.closeAll()},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}escapeStrategy(){this.closeAll()}open(){if(!(this.state===`closing`||this.state===`opened`||!this._menu||!this.dispatchBeforeOpenEvent())){if(this._isNested()){let e=this._parentMenu();e.internals.states.add(`nested-child`),e._nestedMenu!==this&&e._nestedMenu?.close(),e._nestedMenu=this}this.showPopover?.(),this.state=`opening`,this._setMenuPosition(),this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isMobile()&&this._scrollHandler.disableScroll(),this._isZeroAnimationDuration()&&this._handleOpening()}}close(){this._close()}closeAll(){this._mainMenu()._close(!0)}_close(e=!1){if(!(this.state===`opening`&&!this._isNested()||!this.dispatchBeforeCloseEvent())){if(this._nestedMenu?._close(e),this._isNested()){let t=this._parentMenu();e?(this.internals.states.add(`close-all`),t.internals.states.add(`skip-animation`)):(this.internals.states.delete(`close-all`),t.internals.states.delete(`skip-animation`)),t.internals.states.delete(`nested-child`),t._nestedMenu=null}this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()}}_isZeroAnimationDuration(){return E(this,`--sbb-menu-animation-duration`)}_handleOpening(){this.state=`opened`,this._isNested()?this._updateNestedInert():this._inertController.activate(),this._escapableOverlayController.connect(),this._focusTrapController.focusInitialElement(),this._focusTrapController.enabled=!0,this._attachWindowEvents(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.internals.states.delete(`skip-animation`),this.internals.states.delete(`close-all`),this.hidePopover?.(),this._menu?.firstElementChild?.scrollTo(0,0),this._isNested()?this._updateNestedInert():this._inertController.deactivate(),this._triggerElement?.focus({preventScroll:[`sbb-header-button`,`sbb-header-link`].includes(this._triggerElement.localName)}),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._windowEventsController?.abort(),this._focusTrapController.enabled=!1,this._scrollHandler.enableScroll()}_handleKeyDown(e){if(!w(e))return;e.preventDefault();let t=Array.from(this.querySelectorAll(`sbb-menu-button, sbb-menu-link`)).concat(this.shadowRoot.querySelector(`sbb-menu-button`)).filter(e=>(!e.disabled||e.disabledInteractive)&&C.isVisible(e)),n=t.findIndex(t=>t===e.target),r;switch(e.key){case`ArrowUp`:case`ArrowDown`:r=b(e,n,t.length);break;case`ArrowLeft`:this._isNested()&&this.close();break;case`ArrowRight`:e.target.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&e.target.click();break;case`PageUp`:case`Home`:r=0;break;case`End`:case`PageDown`:r=t.length-1}r!==void 0&&t[r].focus()}createRenderRoot(){let e=super.createRenderRoot();return this.shadowRoot?.addEventListener(`slotchange`,()=>this._syncNegative(),{capture:!0}),e}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort(),this._scrollHandler.enableScroll()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),O(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(A(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.toggleState(`nested`,[`sbb-menu-button`,`sbb-menu-link`].includes(this._triggerElement.localName)),j(this._triggerElement).add(`sbb-menu-trigger`)))}_attachWindowEvents(){this._windowEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal}),this._isNested()||(window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._windowEventsController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._windowEventsController.signal}))}_interactiveElementClick(e){let t=e.target;U.includes(t.nodeName)&&!t.hasAttribute(`disabled`)&&!t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&t.id!==`sbb-menu__back-button`&&this.closeAll()}_nestedMenus(){let e=[],t=this._nestedMenu;for(;t;)e.push(t),t=t._nestedMenu;return e}_parentMenu(){return this._triggerElement?.closest(`sbb-menu`)??null}_mainMenu(){return this._isNested()?this._parentMenu()?._mainMenu()??this:this}_isNested(){return!!this._parentMenu()}_updateNestedInert(){this._inertController.restoreAllExempted(),this._mainMenu()._nestedMenus().forEach(e=>this._inertController.exempt(e))}_handleMouseOver(e){let t=e.target,n=this._isMobile();!n&&this._nestedMenu&&!t.classList.contains(`sbb-menu__content`)&&t.ariaExpanded!==`true`&&this._nestedMenu.close(),t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&!n&&t.click()}_onMenuAnimationEnd(e){(e.animationName===`open`||e.animationName===`open-sideways`)&&this.state===`opening`?this._handleOpening():(e.animationName===`close`||e.animationName===`close-sideways`)&&this.state===`closing`&&this._handleClosing()}_setMenuPosition(){if(this._isMobile()||!this._menu||!this._triggerElement||this.state===`closing`)return;let e=this._isNested()?y(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{horizontalOffset:8,verticalOffset:-4,contentSelector:`.sbb-menu__content`}):v(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{verticalOffset:8});this.style.setProperty(`--sbb-menu-position-x`,`${e.left}px`),this.style.setProperty(`--sbb-menu-position-y`,`${e.top}px`),this.style.setProperty(`--sbb-menu-max-height`,e.maxHeight)}_syncNegative(){this.querySelectorAll(`:is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button])`)?.forEach(e=>{customElements.upgrade(e),e.negative=!this._darkModeController.matches()})}_isMobile(){return this._mediaMatcher.matches(this._mobileBreakpoint)??!0}render(){return e`
       <div class="sbb-menu__container">
         <div
           @animationend=${this._onMenuAnimationEnd}

package/mini-calendar.pure.js

@@ -7,4 +7,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,uns
       </div>
       <div class="sbb-mini-calendar-month-label-month">${this._monthLabel}</div>
     `}}})();var y=`:host{gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x);flex-wrap:wrap;display:flex}
-`;let b=(()=>{let a=o,s,l=[],d=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[i({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:t},l,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar`}static{this.styles=[r(y)]}#e;get orientation(){return this.#e}set orientation(e){this.#e=e}constructor(){super(),this.#e=t(this,l,`horizontal`),this._keydownAbortController=(t(this,d),null),this._dateAdapter=f().datetime?.dateAdapter??c,this.addController(new m(this,{config:{childList:!0,subtree:!0},callback:()=>this._setMonthsShowYear()}))}_getMiniCalendarMonths(){return Array.from(this.querySelectorAll?.(`sbb-mini-calendar-month`)??[])}_getMiniCalendarDays(){return Array.from(this._getMiniCalendarMonths().flatMap(e=>Array.from(e.querySelectorAll?.(`sbb-mini-calendar-day`)??[])))}_setMonthsShowYear(){this._getMiniCalendarMonths().forEach((e,t)=>{let n=e.date.split(`-`);n.length>0&&(t===0||+n[1]==1?p(e).add(`show-year`):p(e).delete(`show-year`))})}_handleKeydownCalendarDay(e){u(e)&&e.preventDefault();let t=this._getMiniCalendarDays(),n=t.find(t=>t===e.target),r=this._navigateByKeyboardDayView(t,n,e),i=document.activeElement;r!==i&&(r.tabIndex=0,r?.focus(),i.tabIndex=-1)}_navigateByKeyboardDayView(e,t,n){let r=this.orientation===`horizontal`?{leftRight:1,upDown:7}:{leftRight:7,upDown:1},i=this._dateAdapter.parse(t.date),a=this._dateAdapter.getDate(i),o=this._dateAdapter.getFirstWeekOffset(i);switch(n.key){case`ArrowUp`:return this._findDayArrowKeys(e,t,-r.upDown);case`ArrowDown`:return this._findDayArrowKeys(e,t,r.upDown);case`ArrowLeft`:return this._findDayArrowKeys(e,t,-r.leftRight);case`ArrowRight`:return this._findDayArrowKeys(e,t,r.leftRight);case`PageUp`:if(this.orientation===`horizontal`){let n=a-(a%7||7);return this._findDaySpecialKeys(e,t,-n,r.upDown)}else{let n=(Math.ceil((a+o)/7)-1)*7-o+1-a;return this._findDaySpecialKeys(e,t,n,r.upDown)}case`PageDown`:if(this.orientation===`horizontal`){let n=this._dateAdapter.getNumDaysInMonth(i),o=n-a-(n-a)%7;return this._findDaySpecialKeys(e,t,o,-r.upDown)}else{let n=Math.ceil((a+o)/7)*7-o-a;return this._findDaySpecialKeys(e,t,n,-r.upDown)}case`Home`:{let n=a-1;return this._findDaySpecialKeys(e,t,-n,1)}case`End`:{let n=this._dateAdapter.getNumDaysInMonth(i);return this._findDaySpecialKeys(e,t,n-a,-1)}default:return t}}_findDayArrowKeys(e,t,n){let r=this._dateAdapter.addCalendarDays(this._dateAdapter.deserialize(t.date),n),i=this._dateAdapter.toIso8601(r);return e.find(e=>e.date===i)||t}_findDaySpecialKeys(e,t,n,r){let i=this._dateAdapter.addCalendarDays(this._dateAdapter.deserialize(t.date),n),a=this._dateAdapter.toIso8601(i);return e.find(e=>e.date===a)||this._findDaySpecialKeys(e,t,n+r,r)}_handleSlotchange(){this._setupKeydownListener()}_setupKeydownListener(){this._keydownAbortController?.abort(),this._keydownAbortController=new AbortController,this._getMiniCalendarDays().forEach((e,t)=>{e.addEventListener(`keydown`,e=>this._handleKeydownCalendarDay(e),{signal:this._keydownAbortController.signal}),t!==0&&(e.tabIndex=-1)})}focus(){this._getMiniCalendarDays()?.find(e=>e.tabIndex===0)?.focus()}connectedCallback(){super.connectedCallback(),this._setupKeydownListener()}disconnectedCallback(){super.disconnectedCallback(),this._keydownAbortController?.abort()}render(){return n`<slot @slotchange=${this._handleSlotchange}></slot>`}}})();export{g as SbbMiniCalendarDayElement,b as SbbMiniCalendarElement,v as SbbMiniCalendarMonthElement};
+`;let b=(()=>{let a=o,s,l=[],d=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[i({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:t},l,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar`}static{this.styles=[r(y)]}#e;get orientation(){return this.#e}set orientation(e){this.#e=e}constructor(){super(),this.#e=t(this,l,`horizontal`),this._keydownAbortController=(t(this,d),null),this._dateAdapter=f().datetime?.dateAdapter??c,this.addController(new m(this,{config:{childList:!0,subtree:!0},callback:()=>this._setMonthsShowYear()}))}_getMiniCalendarMonths(){return Array.from(this.querySelectorAll?.(`sbb-mini-calendar-month`)??[])}_getMiniCalendarDays(){return Array.from(this._getMiniCalendarMonths().flatMap(e=>Array.from(e.querySelectorAll?.(`sbb-mini-calendar-day`)??[])))}_setMonthsShowYear(){this._getMiniCalendarMonths().forEach((e,t)=>{let n=e.date.split(`-`);n.length>0&&(t===0||+n[1]==1?p(e).add(`show-year`):p(e).delete(`show-year`))})}_handleKeydownCalendarDay(e){u(e)&&e.preventDefault();let t=this._getMiniCalendarDays(),n=t.find(t=>t===e.target),r=this._navigateByKeyboardDayView(t,n,e),i=document.activeElement;r!==i&&(r.tabIndex=0,r?.focus(),i.tabIndex=-1)}_navigateByKeyboardDayView(e,t,n){let r=this.orientation===`horizontal`?{leftRight:1,upDown:7}:{leftRight:7,upDown:1},i=this._dateAdapter.parse(t.date),a=this._dateAdapter.getDate(i),o=this._dateAdapter.getFirstWeekOffset(i);switch(n.key){case`ArrowUp`:return this._findDayArrowKeys(e,t,-r.upDown);case`ArrowDown`:return this._findDayArrowKeys(e,t,r.upDown);case`ArrowLeft`:return this._findDayArrowKeys(e,t,-r.leftRight);case`ArrowRight`:return this._findDayArrowKeys(e,t,r.leftRight);case`PageUp`:if(this.orientation===`horizontal`){let n=a-(a%7||7);return this._findDaySpecialKeys(e,t,-n,r.upDown)}{let n=(Math.ceil((a+o)/7)-1)*7-o+1-a;return this._findDaySpecialKeys(e,t,n,r.upDown)}case`PageDown`:if(this.orientation===`horizontal`){let n=this._dateAdapter.getNumDaysInMonth(i),o=n-a-(n-a)%7;return this._findDaySpecialKeys(e,t,o,-r.upDown)}{let n=Math.ceil((a+o)/7)*7-o-a;return this._findDaySpecialKeys(e,t,n,-r.upDown)}case`Home`:{let n=a-1;return this._findDaySpecialKeys(e,t,-n,1)}case`End`:{let n=this._dateAdapter.getNumDaysInMonth(i);return this._findDaySpecialKeys(e,t,n-a,-1)}default:return t}}_findDayArrowKeys(e,t,n){let r=this._dateAdapter.addCalendarDays(this._dateAdapter.deserialize(t.date),n),i=this._dateAdapter.toIso8601(r);return e.find(e=>e.date===i)||t}_findDaySpecialKeys(e,t,n,r){let i=this._dateAdapter.addCalendarDays(this._dateAdapter.deserialize(t.date),n),a=this._dateAdapter.toIso8601(i);return e.find(e=>e.date===a)||this._findDaySpecialKeys(e,t,n+r,r)}_handleSlotchange(){this._setupKeydownListener()}_setupKeydownListener(){this._keydownAbortController?.abort(),this._keydownAbortController=new AbortController,this._getMiniCalendarDays().forEach((e,t)=>{e.addEventListener(`keydown`,e=>this._handleKeydownCalendarDay(e),{signal:this._keydownAbortController.signal}),t!==0&&(e.tabIndex=-1)})}focus(){this._getMiniCalendarDays()?.find(e=>e.tabIndex===0)?.focus()}connectedCallback(){super.connectedCallback(),this._setupKeydownListener()}disconnectedCallback(){super.disconnectedCallback(),this._keydownAbortController?.abort()}render(){return n`<slot @slotchange=${this._handleSlotchange}></slot>`}}})();export{g as SbbMiniCalendarDayElement,b as SbbMiniCalendarElement,v as SbbMiniCalendarMonthElement};

package/navigation.pure.js

@@ -7,7 +7,7 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{html
       ${this.renderList({class:`sbb-navigation-list__content`,ariaLabelledby:`sbb-navigation-link-label-id`})}
     `}constructor(){super(...arguments),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,i,``),I(this,a)}}})();var J=`:host{--sbb-navigation-marker-margin-block:calc(1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2);display:block}:host([size=s]){--sbb-navigation-action-gap:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width:.5rem;--sbb-navigation-marker-typo-line-height:var(--sbb-typo-line-height-text);--sbb-navigation-margin-inline-start:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x:calc(var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x));--sbb-navigation-marker-padding-inline-start:calc(var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x));--sbb-navigation-marker-font-size:var(--sbb-text-font-size-xxs);--sbb-navigation-marker-letter-spacing:var(--sbb-typo-letter-spacing-text);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-text)}:host([size=l]){--sbb-navigation-marker-font-size:var(--sbb-heading-font-size-4);--sbb-navigation-marker-letter-spacing:var(--sbb-typo-letter-spacing-heading);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-marker{align-items:flex-start;gap:var(--sbb-navigation-action-gap);font-size:var(--sbb-navigation-marker-font-size);line-height:var(--sbb-navigation-marker-line-height);letter-spacing:var(--sbb-navigation-marker-letter-spacing);flex-direction:column;padding-inline-start:var(--sbb-navigation-marker-padding-inline-start);font-weight:700;display:flex;position:relative}.sbb-navigation-marker:before{content:"";opacity:0;width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-5);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));transition-property:opacity,inset-block-start;transition-timing-function:ease;position:absolute;inset-block-start:var(--sbb-navigation-marker-position-y);inset-inline-start:var(--sbb-navigation-marker-position-x)}:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker:before{opacity:1}@media (forced-colors:active){.sbb-navigation-marker:before{border-color:canvastext}}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}
 `;let Y=(()=>{let e=g(c),t,n=[],i=[];return class extends e{static{let r=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[L({reflect:!0})],F(this,null,t,{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:r},n,i),r&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:r})}static{this.elementName=`sbb-navigation-marker`}static{this.styles=[r(J)]}#e;get size(){return this.#e}set size(e){this.#e=e}constructor(){super(),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,n,`l`),this._currentActiveAction=I(this,i),this.addController(new z(this,{skipInitial:!0,callback:()=>this._setMarkerPosition()}))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&this._updateMarkerActions(),this.toggleState(`has-active-action`,!!this._currentActiveAction)}_updateMarkerActions(){this._currentActiveAction=this.listChildren.find(e=>e.matches(`:is(:state(action-active),[state--action-active])`)),this._setMarkerPosition()}connectedCallback(){super.connectedCallback(),this._checkActiveAction()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);e&&this.select(e)}select(e){e&&(this.reset(),N(e).add(`action-active`),this._currentActiveAction=e,setTimeout(()=>this._setMarkerPosition()))}firstUpdated(e){super.firstUpdated(e),setTimeout(()=>this._setMarkerPosition())}reset(){this._currentActiveAction&&=(N(this._currentActiveAction).delete(`action-active`),this._currentActiveAction.connectedSection?.close(),void 0)}_setMarkerPosition(){if(!this._currentActiveAction)return;let e=this.listChildren.indexOf(this._currentActiveAction),t=this.shadowRoot.querySelector(`li:nth-child(${e+1})`)?.offsetTop;t!=null&&this.style?.setProperty(`--sbb-navigation-marker-position-y`,`${t}px`)}render(){return this.renderList()}}})();var X=`:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:var(--sbb-navigation-section-display,none);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index));inset-block-start:0;inset-inline-start:0}@media (width>=64rem){:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-navigation-section-width:calc(100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive));translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events:all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position:absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display:block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{width:100%;height:100%;color:var(--sbb-navigation-color,var(--sbb-color-1-negative));background-color:#0000;border:none;margin:0;padding:0;display:none;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media (forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color:transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start);display:flex;position:relative}@media (width>=64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (width>=90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;position:absolute}@media (width>=64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{font-weight:700;font-size:var(--sbb-navigation-section-font-size);letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-section__content{gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline);grid-template-columns:1fr;display:grid}@media (width>=64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0}}@media (width>=90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0}}@keyframes close{0%{translate:0}to{translate:var(--sbb-navigation-section-translate) 0}}
-`;let Z=(()=>{let i=b(_),o,s=[],c=[],l,d=[],p=[],g,v=[],y=[],S,T=[],O=[];return class extends i{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;o=[x(),L({attribute:`title-content`,reflect:!0,converter:D})],l=[w(),L()],g=[x(),L({attribute:`accessibility-label`})],S=[x(),L({attribute:`accessibility-back-label`})],F(this,null,o,{kind:`accessor`,name:`titleContent`,static:!1,private:!1,access:{has:e=>`titleContent`in e,get:e=>e.titleContent,set:(e,t)=>{e.titleContent=t}},metadata:e},s,c),F(this,null,l,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},d,p),F(this,null,g,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:e},v,y),F(this,null,S,{kind:`accessor`,name:`accessibilityBackLabel`,static:!1,private:!1,access:{has:e=>`accessibilityBackLabel`in e,get:e=>e.accessibilityBackLabel,set:(e,t)=>{e.accessibilityBackLabel=t}},metadata:e},T,O),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation-section`}static{this.elementDependencies=[B]}static{this.styles=[j,r(X)]}#e;get titleContent(){return this.#e}set titleContent(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get accessibilityLabel(){return this.#n}set accessibilityLabel(e){this.#n=e}#r;get accessibilityBackLabel(){return this.#r}set accessibilityBackLabel(e){this.#r=e}set state(e){super.state=e,this.internals.ariaHidden=this.state===`opened`?null:`true`}get state(){return super.state}constructor(){super(),this.#e=I(this,s,``),this.#t=(I(this,c),I(this,d,null)),this.#n=(I(this,p),I(this,v,``)),this.#r=(I(this,y),I(this,T,``)),this._firstLevelNavigation=(I(this,O),null),this._triggerElement=null,this._language=new f(this),this._focusTrapController=new u(this),this._lastKeydownEvent=null,this._mediaMatcherController=new m(this,{[h]:e=>{this.state!==`closed`&&this._setNavigationInert(e)}}),this._handleNavigationSectionClose=e=>{e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||!e.hasAttribute(`disabled`)&&(e.hasAttribute(`sbb-navigation-close`)||e.hasAttribute(`sbb-navigation-section-close`))))&&this.close()},this.addEventListener?.(`keydown`,e=>{this._lastKeydownEvent=e}),this.addEventListener?.(`focusout`,e=>{if(e.relatedTarget instanceof HTMLElement&&!this.contains(e.relatedTarget)&&A.mostRecentModality===`keyboard`&&this._lastKeydownEvent?.key===`Tab`&&this._triggerElement){let e=this.closest(`sbb-navigation`),t=Array.from(e?.querySelectorAll(a)??[]).filter(e=>!this.contains(e));this._lastKeydownEvent.shiftKey||!t.length?this._triggerElement?.focus():(t[t.indexOf(this._triggerElement)+1]??e.closeButton)?.focus()}})}open(){this.state!==`closed`||!this.hasUpdated||!this.dispatchBeforeOpenEvent()||(this._isNavigationButton(this._triggerElement)&&this._triggerElement?.marker?.select(this._triggerElement),this._closePreviousNavigationSection(),this.state=`opening`,this.dispatchEvent(new Event(`ɵnavigationsectionopening`)),this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening())}_isZeroAnimationDuration(){return E(this,`--sbb-navigation-section-animation-duration`)}_handleOpening(){this.state=`opened`,this.inert=!1,this._attachWindowEvents(),this._setNavigationInert(),this._focusTrapController.focusInitialElement(),this._checkActiveAction(),this.completeUpdate(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`.sbb-navigation-section__container`)?.scrollTo(0,0),this._windowEventsController?.abort(),this._resetLists(),this._setNavigationInert(),this._isBelowLarge()&&this._triggerElement&&this._triggerElement.focus(),this.completeUpdate(),this.dispatchCloseEvent()}_closePreviousNavigationSection(){this._firstLevelNavigation?.activeNavigationSection?.close()}close(){this.state!==`opened`||!this.dispatchBeforeCloseEvent()||(this.dispatchEvent(new Event(`ɵnavigationsectionclosing`)),this.state=`closing`,this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing())}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),k(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(M(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._isNavigationButton(this._triggerElement)&&(this._triggerElement.connectedSection=this),this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this._firstLevelNavigation=this._triggerElement?.closest?.(`sbb-navigation`)))}_isNavigationButton(e){return e?.localName===`sbb-navigation-button`}_setNavigationInert(e=this._isBelowLarge()){let t=this._firstLevelNavigation?.navigationContent;t&&(t.inert=e&&this.state!==`closed`)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_resetLists(){Array.from(this.querySelectorAll(`:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])`)??[]).forEach(e=>N(e).delete(`action-active`))}_attachWindowEvents(){this._windowEventsController=new AbortController,window.addEventListener(`keydown`,e=>this._onKeydownEvent(e),{signal:this._windowEventsController.signal}),window.addEventListener(`click`,this._handleNavigationSectionClose,{signal:this._windowEventsController.signal})}_isBelowLarge(){return this._mediaMatcherController.matches(h)??!1}_onKeydownEvent(e){this.state===`opened`&&e.key===`Escape`&&this.close()}_checkActiveAction(){N(this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`))?.toggle(`action-active`,!0)}connectedCallback(){super.connectedCallback(),this.slot||=`navigation-section`,this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}render(){return e`
+`;let Z=(()=>{let i=b(_),o,s=[],c=[],l,d=[],p=[],g,v=[],y=[],S,T=[],O=[];return class extends i{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;o=[x(),L({attribute:`title-content`,reflect:!0,converter:D})],l=[w(),L()],g=[x(),L({attribute:`accessibility-label`})],S=[x(),L({attribute:`accessibility-back-label`})],F(this,null,o,{kind:`accessor`,name:`titleContent`,static:!1,private:!1,access:{has:e=>`titleContent`in e,get:e=>e.titleContent,set:(e,t)=>{e.titleContent=t}},metadata:e},s,c),F(this,null,l,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},d,p),F(this,null,g,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:e},v,y),F(this,null,S,{kind:`accessor`,name:`accessibilityBackLabel`,static:!1,private:!1,access:{has:e=>`accessibilityBackLabel`in e,get:e=>e.accessibilityBackLabel,set:(e,t)=>{e.accessibilityBackLabel=t}},metadata:e},T,O),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation-section`}static{this.elementDependencies=[B]}static{this.styles=[j,r(X)]}#e;get titleContent(){return this.#e}set titleContent(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get accessibilityLabel(){return this.#n}set accessibilityLabel(e){this.#n=e}#r;get accessibilityBackLabel(){return this.#r}set accessibilityBackLabel(e){this.#r=e}set state(e){super.state=e,this.internals.ariaHidden=this.state===`opened`?null:`true`}get state(){return super.state}constructor(){super(),this.#e=I(this,s,``),this.#t=(I(this,c),I(this,d,null)),this.#n=(I(this,p),I(this,v,``)),this.#r=(I(this,y),I(this,T,``)),this._firstLevelNavigation=(I(this,O),null),this._triggerElement=null,this._language=new f(this),this._focusTrapController=new u(this),this._lastKeydownEvent=null,this._mediaMatcherController=new m(this,{[h]:e=>{this.state!==`closed`&&this._setNavigationInert(e)}}),this._handleNavigationSectionClose=e=>{e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||!e.hasAttribute(`disabled`)&&(e.hasAttribute(`sbb-navigation-close`)||e.hasAttribute(`sbb-navigation-section-close`))))&&this.close()},this.addEventListener?.(`keydown`,e=>{this._lastKeydownEvent=e}),this.addEventListener?.(`focusout`,e=>{if(e.relatedTarget instanceof HTMLElement&&!this.contains(e.relatedTarget)&&A.mostRecentModality===`keyboard`&&this._lastKeydownEvent?.key===`Tab`&&this._triggerElement){let e=this.closest(`sbb-navigation`),t=Array.from(e?.querySelectorAll(a)??[]).filter(e=>!this.contains(e));this._lastKeydownEvent.shiftKey||!t.length?this._triggerElement?.focus():(t[t.indexOf(this._triggerElement)+1]??e.closeButton)?.focus()}})}open(){this.state!==`closed`||!this.hasUpdated||!this.dispatchBeforeOpenEvent()||(this._isNavigationButton(this._triggerElement)&&this._triggerElement?.marker?.select(this._triggerElement),this._closePreviousNavigationSection(),this.state=`opening`,this.dispatchEvent(new Event(`ɵnavigationsectionopening`)),this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening())}_isZeroAnimationDuration(){return E(this,`--sbb-navigation-section-animation-duration`)}_handleOpening(){this.state=`opened`,this.inert=!1,this._attachWindowEvents(),this._setNavigationInert(),this._focusTrapController.focusInitialElement(),this._checkActiveAction(),this.completeUpdate(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`.sbb-navigation-section__container`)?.scrollTo(0,0),this._windowEventsController?.abort(),this._resetLists(),this._setNavigationInert(),this._isBelowLarge()&&this._triggerElement&&this._triggerElement.focus(),this.completeUpdate(),this.dispatchCloseEvent()}_closePreviousNavigationSection(){this._firstLevelNavigation?.activeNavigationSection?.close()}close(){this.state!==`opened`||!this.dispatchBeforeCloseEvent()||(this.dispatchEvent(new Event(`ɵnavigationsectionclosing`)),this.state=`closing`,this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing())}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),k(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(M(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._isNavigationButton(this._triggerElement)&&(this._triggerElement.connectedSection=this),this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this._firstLevelNavigation=this._triggerElement?.closest?.(`sbb-navigation`)))}_isNavigationButton(e){return e?.localName===`sbb-navigation-button`}_setNavigationInert(e=this._isBelowLarge()){let t=this._firstLevelNavigation?.navigationContent;t&&(t.inert=e&&this.state!==`closed`)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_resetLists(){Array.from(this.querySelectorAll(`:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])`)??[]).forEach(e=>N(e).delete(`action-active`))}_attachWindowEvents(){this._windowEventsController=new AbortController,window.addEventListener(`keydown`,e=>this._onKeydownEvent(e),{signal:this._windowEventsController.signal}),window.addEventListener(`click`,this._handleNavigationSectionClose,{signal:this._windowEventsController.signal})}_isBelowLarge(){return this._mediaMatcherController.matches(h)??!1}_onKeydownEvent(e){this.state===`opened`&&e.key===`Escape`&&this.close()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);N(e)?.toggle(`action-active`,!0)}connectedCallback(){super.connectedCallback(),this.slot||=`navigation-section`,this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}render(){return e`
       <div class="sbb-navigation-section__container">
         <nav
           @animationend=${this._onAnimationEnd}

package/option.pure.js

@@ -14,9 +14,9 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
         <slot></slot>
       </span>
     `}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:var(--sbb-options-panel-origin-height);--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--sbb-options-panel-margin-block-start:calc(-1 * var(--sbb-spacing-fixed-2x))}:host([preserve-icon-space]){--sbb-option-icon-container-display:block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-option-panel__overlay-container{pointer-events:none;z-index:var(--sbb-options-panel-internal-z-index);position:fixed;inset:0}.sbb-option-panel__overlay-container:after{content:"";top:var(--sbb-options-panel-origin-position-y);left:var(--sbb-options-panel-origin-position-x);width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-origin-height);border-radius:var(--sbb-options-panel-border-radius);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);background-color:#0000;display:block;position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container:after{box-shadow:var(--sbb-options-panel-box-shadow)}.sbb-option-panel__overlay{visibility:var(--sbb-options-panel-visibility,visible);border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width,fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);box-shadow:var(--sbb-options-panel-box-shadow);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:var(--sbb-options-pointer-events);animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);border:none;margin-block-start:var(--sbb-options-panel-margin-block-start);padding-inline:0;display:block;position:absolute;overflow:hidden auto}@media (forced-colors:active){.sbb-option-panel__overlay{border:var(--sbb-border-width-1x) solid CanvasText}}@keyframes open{0%{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}}
-`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup?0:null),this.updateAriaDisabled())}firstUpdated(e){super.firstUpdated(e),this._updateAriaSelected()}updateDisableHighlight(e){this.disableLabelHighlight=e,this.toggleState(`disable-highlight`,e)}setActive(e){this.toggleState(`active`,e)}updateAriaDisabled(){this.internals.ariaDisabled=this.disabled||this.disabledFromGroup?`true`:null,this.dispatchEvent(new Event(`ɵdisabledchange`,{bubbles:!0}))}_updateAriaSelected(){this.internals.ariaSelected=`${this.selected}`}handleHighlightState(){let e=Array.from(this.childNodes??[]).filter(e=>e.nodeType!==Node.COMMENT_NODE&&(!(e instanceof Element)||e.slot!==`icon`)),t=e.filter(e=>e.nodeType===Node.TEXT_NODE);if(t.length===0||e.filter(e=>!(e instanceof Element)||e.localName!==`template`).length!==t.length){this.updateDisableHighlight(!0);return}this.label=t.map(e=>e.wholeText).filter(e=>e.trim()).join(``)}getHighlightedLabel(){if(!this._highlightString||!this._highlightString.trim())return n`${this.label}`;let e=this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());return e===-1?n`${this.label}`:n`
-      <span class="sbb-option__label--highlight">${this.label.substring(0,e)}</span><span>${this.label.substring(e,e+this._highlightString.length)}</span
-      ><span class="sbb-option__label--highlight">${this.label.substring(e+this._highlightString.length)}</span>
+`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup?0:null),this.updateAriaDisabled())}firstUpdated(e){super.firstUpdated(e),this._updateAriaSelected()}updateDisableHighlight(e){this.disableLabelHighlight=e,this.toggleState(`disable-highlight`,e)}setActive(e){this.toggleState(`active`,e)}updateAriaDisabled(){this.internals.ariaDisabled=this.disabled||this.disabledFromGroup?`true`:null,this.dispatchEvent(new Event(`ɵdisabledchange`,{bubbles:!0}))}_updateAriaSelected(){this.internals.ariaSelected=`${this.selected}`}handleHighlightState(){let e=Array.from(this.childNodes??[]).filter(e=>e.nodeType!==Node.COMMENT_NODE&&(!(e instanceof Element)||e.slot!==`icon`)),t=e.filter(e=>e.nodeType===Node.TEXT_NODE);if(t.length===0||e.filter(e=>!(e instanceof Element)||e.localName!==`template`).length!==t.length){this.updateDisableHighlight(!0);return}this.label=t.map(e=>e.wholeText).filter(e=>e.trim()).join(``)}getHighlightedLabel(){if(!this._highlightString||!this._highlightString.trim())return n`${this.label}`;let e=this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());if(e===-1)return n`${this.label}`;let t=this.label.substring(0,e),r=this.label.substring(e,e+this._highlightString.length),i=this.label.substring(e+this._highlightString.length);return n`
+      <span class="sbb-option__label--highlight">${t}</span><span>${r}</span
+      ><span class="sbb-option__label--highlight">${i}</span>
     `}renderIcon(){return n`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}renderLabel(){return this.label&&!this.disableLabelHighlight?this.getHighlightedLabel():r}renderTick(){return r}render(){return n`
       <div class="sbb-option">
         ${this.renderIcon()}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.4.0-dev.1785707710",
+  "version": "5.4.0-dev.1785742243",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/28e65ee9a47ca79f70c9c3ea173256826b6929d6"
+    "https://github.com/sbb-design-systems/lyne-components/commit/a61111eacbd169a8d92608337751ce14a461f18b"
   ],
   "type": "module",
   "exports": {

package/select.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{MutationController as n}from"@lit-labs/observers/mutation-controller.js";import{ResizeController as r}from"@lit-labs/observers/resize-controller.js";import{html as i,isServer as a,nothing as o,unsafeCSS as s}from"lit";import{property as c,state as l}from"lit/decorators.js";import{ref as u}from"lit/directives/ref.js";import{until as d}from"lit/directives/until.js";import{SbbDisabledMixin as ee,SbbEscapableOverlayController as f,SbbFormAssociatedMixin as p,SbbLanguageController as te,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,SbbReadonlyMixin as _,SbbRequiredMixin as v,SbbUpdateSchedulerMixin as y,forceType as b,getNextElementIndex as x,getOverride as S,handleDistinctChange as C,i18nSelectionRequired as w,isEventOnElement as T,isNextjs as E,isSafari as D,isZeroAnimationDuration as O,popoverResetStyles as k,scrollbarStyles as A,setOrRemoveAttribute as j,setOverlayPosition as ne}from"./core.js";import{optionPanelStyles as M}from"./option.pure.js";var re=`: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))}
-`;const N=D;let ie=0,P=(()=>{let D=y(ee(m(v(_(p(h)))))),P=[],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(),c()],R=[b(),C((e,t)=>e._onMultipleChanged(t)),c({reflect:!0,type:Boolean})],V=[c({attribute:!1})],W=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),c({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],q=[c()],J=[c({reflect:!0})],Z=[l()],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,P),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.role=N?`listbox`:null}static{this.styles=[k,A,M,s(re)]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#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,P),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 r(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()})),this._originElement=null,this._triggerElement=null,this._escapableOverlayController=new f(this),this._overlayId=`sbb-select-${++ie}`,this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new te(this),this._isValueManuallyAssigned=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=T(this._overlay,e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnMenu&&!T(this._overlay,e)&&!T(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._updateValueOptionState(),{capture:!0}),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&(this.close(),this.focus()):this._toggleOpening()}),this.addController(new n(this,{config:{attributeFilter:[`aria-labelledby`,`aria-label`,`aria-describedby`]},callback:()=>this._syncAriaLabels()})),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}}))}_syncAriaLabels(){!this._triggerElement||a||(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.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state===`closing`||this.state===`closed`||!this.dispatchBeforeCloseEvent()||(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();Array.isArray(e)?this._displayValue=e.map(e=>e.textContent?.trim()).join(`, `)||null:e?this._displayValue=e?.textContent?.trim()||null:this._displayValue=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(),E()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){E()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),N&&(this.id||=this._overlayId),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`,w[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&&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._triggerElement?.setAttribute(`aria-expanded`,`true`),this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement?.setAttribute(`aria-expanded`,`false`),this._resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_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();break}}_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);break}}}_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):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._setActiveElement(i,a),this.multiple?e?.shiftKey&&i.selectViaUserInteraction(!i.selected):this._setSelectedElement(i,a),this._activeItemIndex=r}_setActiveElement(e,t=null,n=!0){e.setActive(!0),e.scrollIntoView({block:`nearest`}),n&&(this._triggerElement.ariaActiveDescendantElement=e),t&&!this.compareWith(t.value,e.value)&&t.setActive(!1)}_setSelectedElement(e,t){e.selectViaUserInteraction(!0),t&&!this.compareWith(t.value,e.value)&&t.selectViaUserInteraction(!1)}_resetActiveElement(){let e=this._selectableOptions()[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1,this._triggerElement&&(this._triggerElement.ariaActiveDescendantElement=null)}_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()}_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._triggerElement?.focus(),this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.open();break;default:break}}_spreadDeferredDisplayValue(e){return[this._deferredDisplayValue(e),e]}async _deferredDisplayValue(e){return this.hydrationRequired&&await this.hydrationComplete,this._displayValue?i`${this._displayValue}`:e}render(){return i`
+`;const N=D;let ie=0,P=(()=>{let D=y(ee(m(v(_(p(h)))))),P=[],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(),c()],R=[b(),C((e,t)=>e._onMultipleChanged(t)),c({reflect:!0,type:Boolean})],V=[c({attribute:!1})],W=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),c({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],q=[c()],J=[c({reflect:!0})],Z=[l()],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,P),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.role=N?`listbox`:null}static{this.styles=[k,A,M,s(re)]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#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,P),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 r(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()})),this._originElement=null,this._triggerElement=null,this._escapableOverlayController=new f(this),this._overlayId=`sbb-select-${++ie}`,this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new te(this),this._isValueManuallyAssigned=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=T(this._overlay,e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnMenu&&!T(this._overlay,e)&&!T(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._updateValueOptionState(),{capture:!0}),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&(this.close(),this.focus()):this._toggleOpening()}),this.addController(new n(this,{config:{attributeFilter:[`aria-labelledby`,`aria-label`,`aria-describedby`]},callback:()=>this._syncAriaLabels()})),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}}))}_syncAriaLabels(){!this._triggerElement||a||(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.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state===`closing`||this.state===`closed`||!this.dispatchBeforeCloseEvent()||(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(),E()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){E()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),N&&(this.id||=this._overlayId),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`,w[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&&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._triggerElement?.setAttribute(`aria-expanded`,`true`),this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement?.setAttribute(`aria-expanded`,`false`),this._resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_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):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._setActiveElement(i,a),this.multiple?e?.shiftKey&&i.selectViaUserInteraction(!i.selected):this._setSelectedElement(i,a),this._activeItemIndex=r}_setActiveElement(e,t=null,n=!0){e.setActive(!0),e.scrollIntoView({block:`nearest`}),n&&(this._triggerElement.ariaActiveDescendantElement=e),t&&!this.compareWith(t.value,e.value)&&t.setActive(!1)}_setSelectedElement(e,t){e.selectViaUserInteraction(!0),t&&!this.compareWith(t.value,e.value)&&t.selectViaUserInteraction(!1)}_resetActiveElement(){let e=this._selectableOptions()[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1,this._triggerElement&&(this._triggerElement.ariaActiveDescendantElement=null)}_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()}_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._triggerElement?.focus(),this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.open()}}_spreadDeferredDisplayValue(e){return[this._deferredDisplayValue(e),e]}async _deferredDisplayValue(e){return this.hydrationRequired&&await this.hydrationComplete,this._displayValue?i`${this._displayValue}`:e}render(){return i`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
       <div