@sbb-esta/lyne-elements 1.7.0 → 1.9.0

package/overlay.js

@@ -1,51 +1,50 @@
-import { css as g, nothing as _ } from "lit";
-import { property as b, customElement as w } from "lit/decorators.js";
+import { css as u, nothing as f } from "lit";
+import { property as b, customElement as g } from "lit/decorators.js";
 import { html as d, unsafeStatic as v } from "lit/static-html.js";
-import { SbbFocusHandler as k, setModalityOnNextFocus as h, getFirstFocusableElement as C } from "./core/a11y.js";
+import { SbbFocusHandler as _, setModalityOnNextFocus as h, getFirstFocusableElement as w } from "./core/a11y.js";
 import { EventEmitter as p } from "./core/eventing.js";
-import { i18nDialog as x, i18nCloseDialog as O, i18nGoBack as E } from "./core/i18n.js";
-import { applyInertMechanism as m, removeInertMechanism as y } from "./core/overlay.js";
-import { SbbOpenCloseBaseElement as L } from "./core/base-elements.js";
-import { SbbLanguageController as $ } from "./core/controllers.js";
-import { SbbScrollHandler as A, hostContext as S } from "./core/dom.js";
-import { SbbNegativeMixin as R } from "./core/mixins.js";
+import { i18nDialog as k, i18nCloseDialog as C, i18nGoBack as x } from "./core/i18n.js";
+import { SbbOpenCloseBaseElement as O } from "./core/base-elements.js";
+import { SbbLanguageController as E, SbbInertController as L } from "./core/controllers.js";
+import { SbbScrollHandler as $, hostContext as A } from "./core/dom.js";
+import { SbbNegativeMixin as S } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./button/transparent-button.js";
 import "./container.js";
 import "./screen-reader-only.js";
-var B = Object.defineProperty, F = (t, e, o, r) => {
-  for (var a = void 0, n = t.length - 1, i; n >= 0; n--)
-    (i = t[n]) && (a = i(e, o, a) || a);
-  return a && B(e, o, a), a;
+var R = Object.defineProperty, B = (t, e, o, a) => {
+  for (var r = void 0, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (r = i(e, o, r) || r);
+  return r && R(e, o, r), r;
 };
-const l = [], u = class f extends R(L) {
+const l = [], m = class y extends S(O) {
   constructor() {
     super(...arguments), this.didClose = new p(
       this,
-      f.events.didClose
-    ), this.focusHandler = new k(), this.scrollHandler = new A(), this.ariaLiveRefToggle = !1, this.language = new $(this);
+      y.events.didClose
+    ), this.focusHandler = new _(), this.scrollHandler = new $(), this.ariaLiveRefToggle = !1, this.language = new E(this), this.inertController = new L(this);
   }
   /** Closes the component. */
   close(e, o) {
     if (this.state !== "opened")
       return;
     this.returnValue = e, this.overlayCloseElement = o;
-    const r = {
+    const a = {
       returnValue: this.returnValue,
       closeTarget: this.overlayCloseElement
     };
-    this.willClose.emit(r) && (this.state = "closing", this.removeAriaLiveRefContent());
+    this.willClose.emit(a) && (this.state = "closing", this.removeAriaLiveRefContent());
   }
   connectedCallback() {
     var e;
-    super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController(), this.state === "opened" && m(this);
+    super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController();
   }
   firstUpdated(e) {
     this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
   }
   disconnectedCallback() {
     var e, o;
-    super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), y(), this.scrollHandler.enableScroll();
+    super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
   }
   attachOpenOverlayEvents() {
     this.openOverlayController = new AbortController(), window.addEventListener(
@@ -71,32 +70,32 @@ const l = [], u = class f extends R(L) {
   }
   // Close the component on click of any element that has the `closeAttribute` attribute.
   closeOnSbbOverlayCloseClick(e) {
-    const o = e.composedPath().filter((a) => a instanceof window.HTMLElement).find(
-      (a) => a.hasAttribute(this.closeAttribute) && !a.hasAttribute("disabled")
+    const o = e.composedPath().filter((r) => r instanceof window.HTMLElement).find(
+      (r) => r.hasAttribute(this.closeAttribute) && !r.hasAttribute("disabled")
     );
     if (!o)
       return;
-    const r = o.getAttribute("type") === "submit" ? S("form", o) : void 0;
-    l[l.length - 1].close(r, o);
+    const a = o.getAttribute("type") === "submit" ? A("form", o) : void 0;
+    l[l.length - 1].close(a, o);
   }
   removeAriaLiveRefContent() {
     this.ariaLiveRef.textContent = "";
   }
   setAriaLiveRefContent(e) {
-    this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${x[this.language.current]}${e ? `, ${e}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
+    this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${k[this.language.current]}${e ? `, ${e}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
   }
 };
-F([
+B([
   b({ attribute: "accessibility-label" })
-], u.prototype, "accessibilityLabel");
-let H = u;
-const T = g`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc( var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl)}}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (t, e, o, r) => {
-  for (var a = r > 1 ? void 0 : r ? M(e, o) : e, n = t.length - 1, i; n >= 0; n--)
-    (i = t[n]) && (a = (r ? i(e, o, a) : i(a)) || a);
-  return r && a && z(e, o, a), a;
+], m.prototype, "accessibilityLabel");
+let F = m;
+const H = u`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+var T = Object.defineProperty, z = Object.getOwnPropertyDescriptor, c = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? z(e, o) : e, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (r = (a ? i(e, o, r) : i(r)) || r);
+  return a && r && T(e, o, r), r;
 };
-let s = class extends H {
+let s = class extends F {
   constructor() {
     super(...arguments), this.expanded = !1, this.backButton = !1, this.closeAttribute = "sbb-overlay-close", this._backClick = new p(
       this,
@@ -114,15 +113,15 @@ let s = class extends H {
   // In rare cases, it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
   onOverlayAnimationEnd(t) {
-    var e, o, r;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), m(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", y(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (r = this.openOverlayController) == null || r.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), l.length || this.scrollHandler.enableScroll(), this.didClose.emit({
+    var e, o, a;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this.inertController.activate(), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", this.inertController.deactivate(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (a = this.openOverlayController) == null || a.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), l.length || this.scrollHandler.enableScroll(), this.didClose.emit({
       returnValue: this.returnValue,
       closeTarget: this.overlayCloseElement
     }));
   }
   // Set focus on the first focusable element.
   setOverlayFocus() {
-    const t = C(
+    const t = w(
       Array.from(this.shadowRoot.children).filter(
         (e) => e instanceof window.HTMLElement
       )
@@ -133,7 +132,7 @@ let s = class extends H {
     const t = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", e = d`
       <${v(t)}
         class="sbb-overlay__close"
-        aria-label=${this.accessibilityCloseLabel || O[this.language.current]}
+        aria-label=${this.accessibilityCloseLabel || C[this.language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
@@ -143,7 +142,7 @@ let s = class extends H {
     `, o = d`
       <${v(t)}
         class="sbb-overlay__back"
-        aria-label=${this.accessibilityBackLabel || E[this.language.current]}
+        aria-label=${this.accessibilityBackLabel || x[this.language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
@@ -154,15 +153,15 @@ let s = class extends H {
     return d`
       <div
         class="sbb-overlay__container"
-        @animationend=${(r) => this.onOverlayAnimationEnd(r)}
+        @animationend=${(a) => this.onOverlayAnimationEnd(a)}
       >
         <div class="sbb-overlay">
           <div
-            @click=${(r) => this.closeOnSbbOverlayCloseClick(r)}
+            @click=${(a) => this.closeOnSbbOverlayCloseClick(a)}
             class="sbb-overlay__wrapper"
           >
             <div class="sbb-overlay__header">
-              ${this.backButton ? o : _} ${e}
+              ${this.backButton ? o : f} ${e}
             </div>
             <div class="sbb-overlay__content">
               <sbb-container
@@ -180,7 +179,7 @@ let s = class extends H {
     `;
   }
 };
-s.styles = T;
+s.styles = H;
 s.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
@@ -201,10 +200,10 @@ c([
   b({ attribute: "accessibility-back-label" })
 ], s.prototype, "accessibilityBackLabel", 2);
 s = c([
-  w("sbb-overlay")
+  g("sbb-overlay")
 ], s);
 export {
-  H as SbbOverlayBaseElement,
+  F as SbbOverlayBaseElement,
   s as SbbOverlayElement,
   l as overlayRefs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/popover/popover.js

@@ -87,7 +87,7 @@ let s = class extends L(E) {
     var e;
     if (!g) {
       if (this.hydrationRequired) {
-        this.hydrationComplete.then(() => this._configure);
+        this.hydrationComplete.then(() => this._configure());
         return;
       }
       O(this._triggerElement), this.trigger && (this._triggerElement = T(this.trigger), this._triggerElement && (S(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this._popoverController) == null || e.abort(), this._popoverController = new AbortController(), this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, {

package/select/select.d.ts

@@ -4,7 +4,7 @@ export interface SelectChange {
     type: 'value';
     value: string | string[];
 }
-declare const SbbSelectElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbUpdateSchedulerMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
+declare const SbbSelectElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbUpdateSchedulerMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays a panel with selectable options.
  *
@@ -128,6 +128,8 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
     private _closeOnBackdropClick;
     private _setValueFromSelectedOption;
     private _toggleOpening;
+    private _spreadDeferredDisplayValue;
+    private _deferredDisplayValue;
     protected render(): TemplateResult;
 }
 declare global {

package/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"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"}

package/select.js

@@ -1,23 +1,24 @@
-import { css as _, html as b, nothing as c } from "lit";
-import { property as d, state as g, customElement as m } from "lit/decorators.js";
+import { css as g, html as d, nothing as c } from "lit";
+import { property as b, state as m, customElement as w } from "lit/decorators.js";
 import { ref as v } from "lit/directives/ref.js";
-import { getNextElementIndex as w } from "./core/a11y.js";
-import { SbbOpenCloseBaseElement as y } from "./core/base-elements.js";
-import { SbbConnectedAbortController as x } from "./core/controllers.js";
-import { hostAttributes as E } from "./core/decorators.js";
-import { isNextjs as u, getDocumentWritingMode as O, isSafari as k } from "./core/dom.js";
+import { until as u } from "lit/directives/until.js";
+import { getNextElementIndex as y } from "./core/a11y.js";
+import { SbbOpenCloseBaseElement as x } from "./core/base-elements.js";
+import { SbbConnectedAbortController as E } from "./core/controllers.js";
+import { hostAttributes as O } from "./core/decorators.js";
+import { isNextjs as f, getDocumentWritingMode as k, isSafari as C } from "./core/dom.js";
 import { EventEmitter as p } from "./core/eventing.js";
-import { SbbUpdateSchedulerMixin as C, SbbDisabledMixin as A, SbbNegativeMixin as S } from "./core/mixins.js";
-import { isEventOnElement as f, setOverlayPosition as I, overlayGapFixCorners as P } from "./core/overlay.js";
-const $ = _`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;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);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;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);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`;
-var D = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (e, t, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? L(t, i) : t, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (o = (s ? l(t, i, o) : l(o)) || o);
-  return s && o && D(t, i, o), o;
+import { SbbUpdateSchedulerMixin as A, SbbDisabledMixin as S, SbbNegativeMixin as I, SbbHydrationMixin as D } from "./core/mixins.js";
+import { isEventOnElement as _, setOverlayPosition as P, overlayGapFixCorners as $ } from "./core/overlay.js";
+const L = g`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;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);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;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);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`;
+var V = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? T(t, i) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (o = (s ? l(t, i, o) : l(o)) || o);
+  return s && o && V(t, i, o), o;
 };
-const h = k;
-let T = 0, a = class extends C(
-  A(S(y))
+const h = C;
+let N = 0, a = class extends A(
+  S(I(D(x)))
 ) {
   constructor() {
     super(...arguments), this.multiple = !1, this.required = !1, this.readonly = !1, this._displayValue = null, this._didChange = new p(this, a.events.didChange), this._change = new p(this, a.events.change), this._input = new p(this, a.events.input), this._stateChange = new p(
@@ -26,10 +27,10 @@ let T = 0, a = class extends C(
       {
         composed: !1
       }
-    ), this._overlayId = `sbb-select-${++T}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new x(this), this._pointerDownListener = (e) => {
-      this._isPointerDownEventOnMenu = f(this._overlay, e);
+    ), this._overlayId = `sbb-select-${++N}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new E(this), this._pointerDownListener = (e) => {
+      this._isPointerDownEventOnMenu = _(this._overlay, e);
     }, this._closeOnBackdropClick = async (e) => {
-      !this._isPointerDownEventOnMenu && !f(this._overlay, e) && await this.close();
+      !this._isPointerDownEventOnMenu && !_(this._overlay, e) && await this.close();
     };
   }
   /**
@@ -59,7 +60,7 @@ let T = 0, a = class extends C(
   }
   /** Gets the current displayed value. */
   getDisplayValue() {
-    return this._displayValue ? this._displayValue : "";
+    return this._displayValue ?? "";
   }
   /** Listens to option changes. */
   _onOptionChanged(e) {
@@ -86,7 +87,7 @@ let T = 0, a = class extends C(
     this._stateChange.emit({ type: "value", value: e });
   }
   firstUpdated(e) {
-    super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), u() || (this.startUpdate(), this._setupSelect());
+    super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), f() || (this.startUpdate(), this._setupSelect());
   }
   /**
    * Removes element's first attribute whose qualified name is qualifiedName.
@@ -95,7 +96,7 @@ let T = 0, a = class extends C(
    * @internal We need to override this due to a hydration issue with Next.js.
    */
   removeAttribute(e) {
-    u() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
+    f() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
   }
   connectedCallback() {
     var i, s;
@@ -152,7 +153,7 @@ let T = 0, a = class extends C(
     this._triggerElement.style.top = "0px", this._triggerElement.style.height = `${e.offsetHeight}px`, this._triggerElement.style.width = `${e.offsetWidth}px`;
   }
   _setOverlayPosition() {
-    I(
+    P(
       this._overlay,
       this._originElement,
       this._optionContainer,
@@ -247,17 +248,17 @@ let T = 0, a = class extends C(
       ...this._filteredOptions.slice(0, t)
     ], s = i.find(
       (o) => {
-        var n;
-        return ((n = o.textContent) == null ? void 0 : n.toLowerCase().indexOf(this._searchString.toLowerCase())) === 0;
+        var r;
+        return ((r = o.textContent) == null ? void 0 : r.toLowerCase().indexOf(this._searchString.toLowerCase())) === 0;
       }
     );
     if (s)
       await this._setNextActiveOption(e, this._filteredOptions.indexOf(s));
     else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
       const o = i.find(
-        (n) => {
+        (r) => {
           var l;
-          return ((l = n.textContent) == null ? void 0 : l.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
+          return ((l = r.textContent) == null ? void 0 : l.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
         }
       );
       o && await this._setNextActiveOption(e, this._filteredOptions.indexOf(o));
@@ -269,7 +270,7 @@ let T = 0, a = class extends C(
     this.multiple ? await e.setSelectedViaUserInteraction(!e.selected) : await this.close();
   }
   async _setNextActiveOption(e, t) {
-    const i = t ?? w(e, this._activeItemIndex, this._filteredOptions.length), s = this._filteredOptions[i], o = this._filteredOptions[this._activeItemIndex];
+    const i = t ?? y(e, this._activeItemIndex, this._filteredOptions.length), s = this._filteredOptions[i], o = this._filteredOptions[this._activeItemIndex];
     this._setActiveElement(s, o), this.multiple ? e != null && e.shiftKey && await s.setSelectedViaUserInteraction(!s.selected) : await this._setSelectedElement(s, o), this._activeItemIndex = i;
   }
   _setActiveElement(e, t = null, i = !0) {
@@ -312,8 +313,14 @@ let T = 0, a = class extends C(
         }
       }
   }
+  _spreadDeferredDisplayValue(e) {
+    return [this._deferredDisplayValue(e), e];
+  }
+  async _deferredDisplayValue(e) {
+    return this.hydrationRequired && await this.hydrationComplete, this._displayValue ? d`${this._displayValue}` : e;
+  }
   render() {
-    return b`
+    return d`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
       <div
@@ -329,17 +336,21 @@ let T = 0, a = class extends C(
         @click=${this._toggleOpening}
         ${v((e) => this._triggerElement = e)}
       >
-        ${this._displayValue ? b`${this._displayValue}` : b`<span>${this.placeholder}</span>`}
+        ${u(...this._spreadDeferredDisplayValue(d`<span>${this.placeholder}</span>`))}
       </div>
 
       <!-- Visually display the value -->
       <div class="sbb-select__trigger" aria-hidden="true">
-        ${this._displayValue ? b`${this._displayValue}` : b`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`}
+        ${u(
+      ...this._spreadDeferredDisplayValue(
+        d`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`
+      )
+    )}
       </div>
 
       <div class="sbb-select__gap-fix"></div>
       <div class="sbb-select__container">
-        <div class="sbb-select__gap-fix">${P()}</div>
+        <div class="sbb-select__gap-fix">${$()}</div>
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-select__panel"
@@ -361,7 +372,7 @@ let T = 0, a = class extends C(
     `;
   }
 };
-a.styles = $;
+a.styles = L;
 a.events = {
   didChange: "didChange",
   change: "change",
@@ -372,28 +383,28 @@ a.events = {
   willClose: "willClose",
   didClose: "didClose"
 };
-r([
-  d()
+n([
+  b()
 ], a.prototype, "value", 2);
-r([
-  d()
+n([
+  b()
 ], a.prototype, "placeholder", 2);
-r([
-  d({ type: Boolean, reflect: !0 })
+n([
+  b({ type: Boolean, reflect: !0 })
 ], a.prototype, "multiple", 2);
-r([
-  d({ reflect: !0, type: Boolean })
+n([
+  b({ reflect: !0, type: Boolean })
 ], a.prototype, "required", 2);
-r([
-  d({ type: Boolean })
+n([
+  b({ type: Boolean })
 ], a.prototype, "readonly", 2);
-r([
-  g()
+n([
+  m()
 ], a.prototype, "_displayValue", 2);
-a = r([
-  m("sbb-select"),
-  E({
-    dir: O(),
+a = n([
+  w("sbb-select"),
+  O({
+    dir: k(),
     role: h ? "listbox" : null
   })
 ], a);

package/standard-theme.css

@@ -1321,6 +1321,7 @@ summary {
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
   --sbb-header-height: var(--sbb-spacing-fixed-14x);
   --sbb-time-input-max-width: 3.625rem;
+  --sbb-time-input-s-max-width: 3.1875rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-border-radius-infinity: 10000000em;
 }
@@ -1328,6 +1329,7 @@ summary {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
+    --sbb-time-input-s-max-width: 3.625rem;
   }
 }
 
@@ -1486,6 +1488,9 @@ sbb-title + p {
 input[data-sbb-time-input] {
   max-width: var(--sbb-time-input-max-width);
 }
+sbb-form-field[size=s] input[data-sbb-time-input] {
+  max-width: var(--sbb-time-input-s-max-width);
+}
 
 sub {
   bottom: -0.36em;
@@ -1685,6 +1690,7 @@ sup {
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
   --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
   --sbb-step-list-text-to-marker-block-offset: calc(
     0.5 *
       (
@@ -1714,11 +1720,18 @@ sup {
   position: relative;
   counter-increment: steps;
   background-color: var(--sbb-color-milk);
-  border-radius: var(--sbb-border-radius-4x);
   padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
   padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) + var(--sbb-step-list-marker-to-text-gap)) var(--sbb-step-list-padding-inline);
   min-height: calc(var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block));
 }
+.sbb-step-list > li:first-of-type {
+  border-start-start-radius: var(--sbb-step-list-border-radius);
+  border-start-end-radius: var(--sbb-step-list-border-radius);
+}
+.sbb-step-list > li:last-of-type {
+  border-end-start-radius: var(--sbb-step-list-border-radius);
+  border-end-end-radius: var(--sbb-step-list-border-radius);
+}
 .sbb-step-list > li::before {
   --sbb-text-font-size: var(--sbb-font-size-text-xxs);
   font-family: var(--sbb-typo-font-family);