@sbb-esta/lyne-elements 1.7.0 → 1.8.0

package/navigation/navigation.js

@@ -1,33 +1,33 @@
-import { css as p, html as v } from "lit";
-import { property as m, state as u, customElement as _ } from "lit/decorators.js";
+import { css as h, html as v } from "lit";
+import { property as d, state as m, customElement as p } from "lit/decorators.js";
 import { ref as c } from "lit/directives/ref.js";
-import { SbbFocusHandler as f, setModalityOnNextFocus as g } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as w } from "../core/base-elements.js";
-import { SbbConnectedAbortController as k, SbbLanguageController as y } from "../core/controllers.js";
-import { hostAttributes as E } from "../core/decorators.js";
-import { SbbScrollHandler as x, findReferencedElement as C } from "../core/dom.js";
-import { i18nCloseNavigation as O } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as S } from "../core/mixins.js";
-import { AgnosticMutationObserver as A, AgnosticResizeObserver as N } from "../core/observers.js";
-import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as z, setAriaOverlayTriggerAttributes as T, applyInertMechanism as d, removeInertMechanism as h } from "../core/overlay.js";
+import { SbbFocusHandler as u, setModalityOnNextFocus as g } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as _ } from "../core/base-elements.js";
+import { SbbConnectedAbortController as f, SbbLanguageController as w, SbbInertController as k } from "../core/controllers.js";
+import { hostAttributes as y } from "../core/decorators.js";
+import { SbbScrollHandler as E, findReferencedElement as x } from "../core/dom.js";
+import { i18nCloseNavigation as C } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as O } from "../core/mixins.js";
+import { AgnosticMutationObserver as S, AgnosticResizeObserver as A } from "../core/observers.js";
+import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as N, setAriaOverlayTriggerAttributes as z } from "../core/overlay.js";
 import "../button/transparent-button.js";
-const L = p`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__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-navigation__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-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
-var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
-  for (var e = a > 1 ? void 0 : a ? B(i, n) : i, r = t.length - 1, b; r >= 0; r--)
-    (b = t[r]) && (e = (a ? b(i, n, e) : b(e)) || e);
-  return a && e && H(i, n, e), e;
+const T = h`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__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-navigation__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-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
+var L = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? H(i, n) : i, r = t.length - 1, b; r >= 0; r--)
+    (b = t[r]) && (o = (a ? b(i, n, o) : b(o)) || o);
+  return a && o && L(i, n, o), o;
 };
-const I = {
+const B = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
 let P = 0;
 const R = 150;
-let o = class extends S(w) {
+let e = class extends O(_) {
   constructor() {
-    super(...arguments), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new k(this), this._language = new y(this), this._focusHandler = new f(), this._scrollHandler = new x(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationObserver = new A(
+    super(...arguments), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new f(this), this._language = new w(this), this._inertController = new k(this), this._focusHandler = new u(), this._scrollHandler = new E(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationObserver = new S(
       (t) => this._onNavigationSectionChange(t)
-    ), this._navigationResizeObserver = new N(() => this._onNavigationResize()), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
+    ), this._navigationResizeObserver = new A(() => this._onNavigationResize()), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
       var i, n;
       this._isPointerDownEventOnNavigation = l(this._navigation, t) || l(
         (n = (i = this.querySelector(
@@ -87,7 +87,7 @@ let o = class extends S(w) {
   // Check if the trigger is valid and attach click event listeners.
   _configure(t) {
     var i;
-    z(this._triggerElement), t && (this._triggerElement = C(t), this._triggerElement && (T(this._triggerElement, "menu", this.id, this.state), (i = this._navigationController) == null || i.abort(), this._navigationController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+    N(this._triggerElement), t && (this._triggerElement = x(t), this._triggerElement && (z(this._triggerElement, "menu", this.id, this.state), (i = this._navigationController) == null || i.abort(), this._navigationController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
       signal: this._navigationController.signal
     })));
   }
@@ -95,7 +95,7 @@ let o = class extends S(w) {
   // To avoid entering a corrupt state, exit when state is not expected.
   _onAnimationEnd(t) {
     var i, n;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), d(this), this._focusHandler.trap(this, { filter: this._trapFocusFilter }), this._attachWindowEvents(), this._setNavigationFocus()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", this._navigationContentElement.scrollTo(0, 0), g(this._triggerElement), h(), (i = this._triggerElement) == null || i.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (n = this._windowEventsController) == null || n.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll()), this.completeUpdate();
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), this._inertController.activate(), this._focusHandler.trap(this, { filter: this._trapFocusFilter }), this._attachWindowEvents(), this._setNavigationFocus()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", this._navigationContentElement.scrollTo(0, 0), g(this._triggerElement), this._inertController.deactivate(), (i = this._triggerElement) == null || i.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (n = this._windowEventsController) == null || n.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll()), this.completeUpdate();
   }
   _resetMarkers() {
     const t = Array.from(
@@ -146,18 +146,18 @@ let o = class extends S(w) {
   connectedCallback() {
     super.connectedCallback(), this.id || (this.id = `sbb-navigation-${P++}`);
     const t = this._abort.signal;
-    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this._navigationObserver.observe(this, I), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t }), this.state === "opened" && d(this);
+    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this._navigationObserver.observe(this, B), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t });
   }
   disconnectedCallback() {
     var t, i;
-    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), h(), this._scrollHandler.enableScroll();
+    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), this._scrollHandler.enableScroll();
   }
   render() {
     const t = v`
       <sbb-transparent-button
         id="sbb-navigation-close-button"
         class="sbb-navigation__close"
-        aria-label=${this.accessibilityCloseLabel || O[this._language.current]}
+        aria-label=${this.accessibilityCloseLabel || C[this._language.current]}
         aria-controls="sbb-navigation-overlay"
         negative
         size="m"
@@ -189,22 +189,22 @@ let o = class extends S(w) {
     `;
   }
 };
-o.styles = L;
+e.styles = T;
 s([
-  m()
-], o.prototype, "trigger", 1);
+  d()
+], e.prototype, "trigger", 1);
 s([
-  m({ attribute: "accessibility-close-label" })
-], o.prototype, "accessibilityCloseLabel", 2);
+  d({ attribute: "accessibility-close-label" })
+], e.prototype, "accessibilityCloseLabel", 2);
 s([
-  u()
-], o.prototype, "_activeNavigationSection", 2);
-o = s([
-  _("sbb-navigation"),
-  E({
+  m()
+], e.prototype, "_activeNavigationSection", 2);
+e = s([
+  p("sbb-navigation"),
+  y({
     role: "navigation"
   })
-], o);
+], e);
 export {
-  o as SbbNavigationElement
+  e as SbbNavigationElement
 };

package/overlay/overlay-base-element.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValues } from 'lit';
 import { SbbFocusHandler } from '../core/a11y.js';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
-import { SbbLanguageController } from '../core/controllers.js';
+import { SbbInertController, SbbLanguageController } from '../core/controllers.js';
 import { SbbScrollHandler } from '../core/dom.js';
 import { EventEmitter } from '../core/eventing.js';
 import { SbbOverlayCloseEventDetails } from '../core/interfaces.js';
@@ -23,6 +23,7 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected ariaLiveRefToggle: boolean;
     protected ariaLiveRef: SbbScreenReaderOnlyElement;
     protected language: SbbLanguageController;
+    protected inertController: SbbInertController;
     protected abstract onOverlayAnimationEnd(event: AnimationEvent): void;
     protected abstract setOverlayFocus(): void;
     protected abstract closeAttribute: string;

package/overlay/overlay-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAGzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAC3D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IAErD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAUtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAU5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;CAStD"}
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAC3D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IACrD,SAAS,CAAC,eAAe,qBAAgC;IAEzD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAS5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;CAStD"}

package/overlay/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,qBAAqB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,4DAA4D;IACE,UAAU,UAAS;IAEjF,wEAAwE;IACX,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd,uEAAuE;IACX,sBAAsB,EAC9E,MAAM,GACN,SAAS,CAAC;IAEd,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IAyBnB,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAgC5D,SAAS,CAAC,eAAe,IAAI,IAAI;cAUd,MAAM,IAAI,cAAc;CAyD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,qBAAqB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,4DAA4D;IACE,UAAU,UAAS;IAEjF,wEAAwE;IACX,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd,uEAAuE;IACX,sBAAsB,EAC9E,MAAM,GACN,SAAS,CAAC;IAEd,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IAyBnB,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAgC5D,SAAS,CAAC,eAAe,IAAI,IAAI;cAUd,MAAM,IAAI,cAAc;CAyD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

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-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 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.8.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/toggle/toggle/toggle.d.ts

@@ -45,7 +45,8 @@ export declare class SbbToggleElement extends LitElement {
     /** Emits whenever the toggle value changes. */
     private _change;
     private _abort;
-    private _setCheckedPillPosition;
+    /** @internal */
+    updatePillPosition(resizing: boolean): void;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     disconnectedCallback(): void;

package/toggle/toggle/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,uBAAuB;IA6Bf,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAO7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAAmE;IAEhG,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/toggle/toggle-option/toggle-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-option.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAWhD;;;;;GAKG;AACH,qBAKa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,OAAO,UAAS;IAEvB,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,8BAA8B;IAC9B,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,OAAO,CAAC,CAAmB;IACnC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"toggle-option.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAWhD;;;;;GAKG;AACH,qBAKa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,OAAO,UAAS;IAEvB,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,8BAA8B;IAC9B,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,OAAO,CAAC,CAAmB;IACnC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/toggle/toggle-option.js

@@ -5,10 +5,10 @@ import { hostAttributes as f, slotState as v } from "../core/decorators.js";
 import { setOrRemoveAttribute as m } from "../core/dom.js";
 import { SbbIconNameMixin as _ } from "../icon.js";
 const y = h`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-option-cursor: pointer;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);--sbb-toggle-option-border-radius: var(--sbb-border-radius-infinity);--sbb-toggle-option-line-height: calc(1em * var(--sbb-typo-line-height-body-text));display:inline-block;min-width:var(--sbb-toggle-min-width);overflow:hidden;z-index:1}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-charcoal)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-granite)}input[type=radio]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-toggle-option{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-toggle-option-cursor);display:flex;justify-content:center;align-items:center;height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);border-radius:var(--sbb-toggle-option-border-radius);color:var(--sbb-toggle-option-color)}:host([data-slot-names~=unnamed]:where([data-slot-names~=icon],[icon-name])) .sbb-toggle-option{gap:var(--sbb-spacing-fixed-1x)}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-toggle-option__label:before{content:"";position:absolute;pointer-events:none;inset:calc(var(--sbb-focus-outline-offset) * -2);border:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-toggle-option-border-radius)}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}`;
-var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, i, l) => {
-  for (var o = l > 1 ? void 0 : l ? w(t, i) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (o = (l ? a(t, i, o) : a(o)) || o);
-  return l && o && x(t, i, o), o;
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, o, l) => {
+  for (var i = l > 1 ? void 0 : l ? w(t, o) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (l ? a(t, o, i) : a(i)) || i);
+  return l && i && x(t, o, i), i;
 };
 let s = class extends _(c) {
   constructor() {
@@ -25,8 +25,8 @@ let s = class extends _(c) {
     super.connectedCallback();
     const e = this._abort.signal;
     this.addEventListener("input", () => this._handleInput(), { signal: e }), this.addEventListener("click", () => {
-      var i;
-      return (i = this.shadowRoot.querySelector("label")) == null ? void 0 : i.click();
+      var o;
+      return (o = this.shadowRoot.querySelector("label")) == null ? void 0 : o.click();
     }, {
       signal: e
     }), this._toggle = ((t = this.closest) == null ? void 0 : t.call(this, "sbb-toggle")) ?? void 0, this._verifyTabindex();
@@ -35,8 +35,8 @@ let s = class extends _(c) {
     super.willUpdate(e), e.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this._verifyTabindex(), this.checked && this._uncheckOtherOptions()), e.has("disabled") && this._handleDisabledChange();
   }
   _uncheckOtherOptions() {
-    var e;
-    (e = this._toggle) == null || e.options.filter((t) => t !== this).forEach((t) => t.checked = !1);
+    var e, t;
+    (e = this._toggle) == null || e.options.filter((o) => o !== this).forEach((o) => o.checked = !1), (t = this._toggle) == null || t.updatePillPosition(!1);
   }
   _handleDisabledChange() {
     this._toggle && (this._toggle.disabled && !this.disabled ? this.disabled = !0 : !this._toggle.disabled && this.disabled && (this.disabled = !1)), m(this, "aria-disabled", this.disabled ? "true" : null), this._verifyTabindex();

package/toggle/toggle.js

@@ -1,21 +1,19 @@
 import { css as u, LitElement as v, isServer as c, html as m } from "lit";
-import { property as a, customElement as f } from "lit/decorators.js";
-import { interactivityChecker as y, isArrowKeyPressed as _, getNextElementIndex as w } from "../core/a11y.js";
+import { property as b, customElement as f } from "lit/decorators.js";
+import { interactivityChecker as y, isArrowKeyPressed as w, getNextElementIndex as _ } from "../core/a11y.js";
 import { SbbConnectedAbortController as x } from "../core/controllers.js";
 import { hostAttributes as k } from "../core/decorators.js";
 import { EventEmitter as p } from "../core/eventing.js";
 import { AgnosticResizeObserver as C } from "../core/observers.js";
 const z = u`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity)}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
-var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
+var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
   for (var o = i > 1 ? void 0 : i ? E(t, s) : t, n = e.length - 1, l; n >= 0; n--)
     (l = e[n]) && (o = (i ? l(t, s, o) : l(o)) || o);
   return i && o && P(t, s, o), o;
 };
 let r = class extends v {
   constructor() {
-    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new C(
-      () => this._setCheckedPillPosition(!0)
-    ), this._didChange = new p(this, r.events.didChange, {
+    super(...arguments), this._disabled = !1, this.even = !1, this.size = "m", this._value = null, this._loaded = !1, this._toggleResizeObserver = new C(() => this.updatePillPosition(!0)), this._didChange = new p(this, r.events.didChange, {
       bubbles: !0,
       composed: !0
     }), this._change = new p(this, r.events.change, {
@@ -45,13 +43,14 @@ let r = class extends v {
     const t = this.options, s = t.find(
       (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
     ) ?? t.find((i) => i.checked) ?? t[0];
-    s && (s.checked || (s.checked = !0), this._setCheckedPillPosition(!1));
+    s && (s.checked || (s.checked = !0), this.updatePillPosition(!1));
   }
   _updateDisabled() {
     for (const e of this.options)
       e.disabled = this.disabled;
   }
-  _setCheckedPillPosition(e) {
+  /** @internal */
+  updatePillPosition(e) {
     var g, h;
     if (!this._loaded)
       return;
@@ -68,7 +67,7 @@ let r = class extends v {
     this.addEventListener("input", () => this._handleInput(), { signal: e, passive: !0 }), this.addEventListener("keydown", (t) => this._handleKeyDown(t), { signal: e }), this.options.forEach((t) => this._toggleResizeObserver.observe(t)), this._updateToggle();
   }
   async firstUpdated(e) {
-    super.firstUpdated(e), await this.updateComplete, this._loaded = !0;
+    super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.updatePillPosition(!1);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._toggleResizeObserver.disconnect();
@@ -77,17 +76,17 @@ let r = class extends v {
     this._valueChanged(this.value), this._updateDisabled();
   }
   _handleInput() {
-    this._setCheckedPillPosition(!1), this._change.emit(), this._didChange.emit();
+    this.updatePillPosition(!1), this._change.emit(), this._didChange.emit();
   }
   _handleKeyDown(e) {
     const t = this.options.filter(
       (s) => !s.disabled && y.isVisible(s)
     );
     if (!(!t || // don't trap nested handling
-    e.target !== this && e.target.parentElement !== this) && _(e)) {
+    e.target !== this && e.target.parentElement !== this) && w(e)) {
       const s = t.findIndex(
         (o) => o.checked
-      ), i = w(e, s, t.length);
+      ), i = _(e, s, t.length);
       t[i].checked || (t[i].checked = !0, t[i].focus(), t[i].dispatchEvent(
         new InputEvent("input", { bubbles: !0, composed: !0 })
       )), e.preventDefault();
@@ -106,19 +105,19 @@ r.events = {
   didChange: "didChange",
   change: "change"
 };
-b([
-  a({ reflect: !0, type: Boolean })
+a([
+  b({ reflect: !0, type: Boolean })
 ], r.prototype, "disabled", 1);
-b([
-  a({ reflect: !0, type: Boolean })
+a([
+  b({ reflect: !0, type: Boolean })
 ], r.prototype, "even", 2);
-b([
-  a({ reflect: !0 })
+a([
+  b({ reflect: !0 })
 ], r.prototype, "size", 2);
-b([
-  a()
+a([
+  b()
 ], r.prototype, "value", 1);
-r = b([
+r = a([
   f("sbb-toggle"),
   k({
     role: "radiogroup"