@sbb-esta/lyne-elements 1.14.1 → 1.15.1

package/map-container.js

@@ -4,23 +4,23 @@ var y = (a) => {
 var B = (a, i, o) => i.has(a) || y("Cannot " + o);
 var m = (a, i, o) => (B(a, i, "read from private field"), o ? o.call(a) : i.get(a)), p = (a, i, o) => i.has(a) ? y("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, o), c = (a, i, o, s) => (B(a, i, "write to private field"), s ? s.call(a, o) : i.set(a, o), o);
 import { __runInitializers as d, __esDecorate as u } from "tslib";
-import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
-import { css as x, html as U, nothing as V, LitElement as z } from "lit";
+import { IntersectionController as x } from "@lit-labs/observers/intersection-controller.js";
+import { css as S, html as U, nothing as V, LitElement as z } from "lit";
 import { customElement as I, property as C, state as E } from "lit/decorators.js";
 import { SbbLanguageController as O } from "./core/controllers.js";
 import { forceType as $ } from "./core/decorators.js";
 import { i18nMapContainerButtonLabel as D } from "./core/i18n.js";
 import "./button/tertiary-button.js";
-const L = x`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius) );--sbb-map-container-mobile-sticky-block-start: 0}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));height:calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)))}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-map-container__sidebar{grid-column:1/3;grid-row:2/3;width:100%;overflow:hidden auto;position:relative;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;grid-row:1/2;grid-column:1/3}@media (max-width: 52.4375rem){.sbb-map-container__map{inset-block-start:var(--sbb-map-container-mobile-sticky-block-start);height:var(--sbb-map-container-map-height)}}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;position:relative}}`;
+const L = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius) );--sbb-map-container-mobile-sticky-block-start: 0}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));position:fixed;inset:var(--sbb-map-container-margin-start, var(--sbb-header-height)) 0 0 0}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-map-container__sidebar{grid-column:1/3;grid-row:2/3;width:100%;overflow:hidden auto;position:relative;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;grid-row:1/2;grid-column:1/3}@media (max-width: 52.4375rem){.sbb-map-container__map{inset-block-start:var(--sbb-map-container-mobile-sticky-block-start);height:var(--sbb-map-container-map-height)}}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;position:relative}}`;
 let J = (() => {
   var b, n, e;
-  let a = [I("sbb-map-container")], i, o = [], s, h = z, v, _ = [], g = [], w, f = [], k = [];
+  let a = [I("sbb-map-container")], i, o = [], s, h = z, _, v = [], g = [], w, f = [], k = [];
   return e = class extends h {
     constructor() {
       super(...arguments);
       p(this, b);
       p(this, n);
-      c(this, b, d(this, _, !1)), c(this, n, (d(this, g), d(this, f, !1))), this._language = (d(this, k), new O(this)), this._observer = new S(this, {
+      c(this, b, d(this, v, !1)), c(this, n, (d(this, g), d(this, f, !1))), this._language = (d(this, k), new O(this)), this._observer = new x(this, {
         target: null,
         callback: (r) => this._toggleButtonVisibilityOnIntersect(r)
       });
@@ -96,9 +96,9 @@ let J = (() => {
     }
   }, b = new WeakMap(), n = new WeakMap(), s = e, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    v = [$(), C({ attribute: "hide-scroll-up-button", reflect: !0, type: Boolean })], w = [E()], u(e, null, v, { kind: "accessor", name: "hideScrollUpButton", static: !1, private: !1, access: { has: (t) => "hideScrollUpButton" in t, get: (t) => t.hideScrollUpButton, set: (t, l) => {
+    _ = [$(), C({ attribute: "hide-scroll-up-button", reflect: !0, type: Boolean })], w = [E()], u(e, null, _, { kind: "accessor", name: "hideScrollUpButton", static: !1, private: !1, access: { has: (t) => "hideScrollUpButton" in t, get: (t) => t.hideScrollUpButton, set: (t, l) => {
       t.hideScrollUpButton = l;
-    } }, metadata: r }, _, g), u(e, null, w, { kind: "accessor", name: "_scrollUpButtonVisible", static: !1, private: !1, access: { has: (t) => "_scrollUpButtonVisible" in t, get: (t) => t._scrollUpButtonVisible, set: (t, l) => {
+    } }, metadata: r }, v, g), u(e, null, w, { kind: "accessor", name: "_scrollUpButtonVisible", static: !1, private: !1, access: { has: (t) => "_scrollUpButtonVisible" in t, get: (t) => t._scrollUpButtonVisible, set: (t, l) => {
       t._scrollUpButtonVisible = l;
     } }, metadata: r }, f, k), u(null, i = { value: s }, a, { kind: "class", name: s.name, metadata: r }, null, o), s = i.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), e.styles = L, d(s, o), s;

package/menu/menu/menu.d.ts

@@ -39,6 +39,7 @@ export declare class SbbMenuElement extends SbbMenuElement_base {
     private _focusHandler;
     private _scrollHandler;
     private _inertController;
+    private _mediaMatcher;
     /**
      * Opens the menu on trigger click.
      */

package/menu/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAWtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBAEM,cAAe,SAAQ,mBAGH;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IAExD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAqBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;IAQ5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAgBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBAEM,cAAe,SAAQ,mBAGH;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAQlB;IAEH;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAqBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;IAQ5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/menu/menu.js

@@ -1,20 +1,20 @@
-var w = (s) => {
+var y = (s) => {
   throw TypeError(s);
 };
-var y = (s, n, r) => n.has(s) || w("Cannot " + r);
-var k = (s, n, r) => (y(s, n, "read from private field"), r ? r.call(s) : n.get(s)), x = (s, n, r) => n.has(s) ? w("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, r), m = (s, n, r, o) => (y(s, n, "write to private field"), o ? o.call(s, r) : n.set(s, r), r);
-import { __runInitializers as d, __esDecorate as h } from "tslib";
-import { css as N, html as E } from "lit";
-import { customElement as O, property as C } from "lit/decorators.js";
+var k = (s, n, r) => n.has(s) || y("Cannot " + r);
+var x = (s, n, r) => (k(s, n, "read from private field"), r ? r.call(s) : n.get(s)), E = (s, n, r) => n.has(s) ? y("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, r), h = (s, n, r, o) => (k(s, n, "write to private field"), o ? o.call(s, r) : n.set(s, r), r);
+import { __runInitializers as d, __esDecorate as m } from "tslib";
+import { css as N, html as C } from "lit";
+import { customElement as O, property as L } from "lit/decorators.js";
 import { ref as B } from "lit/directives/ref.js";
-import { SbbFocusHandler as T, isArrowKeyPressed as I, interactivityChecker as M, getNextElementIndex as P, setModalityOnNextFocus as L, IS_FOCUSABLE_QUERY as z } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as K } from "../core/base-elements.js";
-import { SbbConnectedAbortController as D, SbbInertController as H } from "../core/controllers.js";
-import { forceType as F } from "../core/decorators.js";
-import { SbbScrollHandler as U, isBreakpoint as A, findReferencedElement as $ } from "../core/dom.js";
-import { SbbNamedSlotListMixin as R } from "../core/mixins.js";
-import { isEventOnElement as S, removeAriaOverlayTriggerAttributes as Y, setAriaOverlayTriggerAttributes as q, getElementPosition as V } from "../core/overlay.js";
-const j = N`*,:before,:after{box-sizing:border-box}:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-menu-animation-easing: ease;--sbb-menu-transform: translateY(100%);--sbb-menu-max-width: 100%;--sbb-menu-min-width: 100%;--sbb-menu-inset: 0 auto auto 0;--sbb-menu-container-height: 100vh;--sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-menu-min-height: 3.03125rem;--sbb-menu-border-radius: var(--sbb-border-radius-4x);--sbb-menu-visibility: hidden;--sbb-menu-backdrop-color: transparent}@supports (height: 100dvh){:host{--sbb-menu-container-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-menu-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem}}:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: var(--sbb-color-black-alpha-20)}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-backdrop-color: transparent}}:host(:not([data-state=closed])){--sbb-menu-inset: 0}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}::slotted(sbb-divider){--sbb-divider-color: var(--sbb-color-iron);margin-block:var(--sbb-spacing-fixed-2x)}.sbb-menu__container{position:fixed;pointer-events:none;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index))}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility);pointer-events:all;position:fixed;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility}.sbb-menu{display:none;opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;position:absolute;inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:unset;color:var(--sbb-color-white);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-color-black);padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:open;animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing)}:host([data-state][data-state=closing]) .sbb-menu{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;max-height:fit-content;border-radius:var(--sbb-menu-border-radius)}:host(:not([data-state=closed])) .sbb-menu{top:var(--sbb-menu-position-y);left:var(--sbb-menu-position-x);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{--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-menu__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__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-menu__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-menu__content::-webkit-scrollbar-button,.sbb-menu__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-menu__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);overflow:auto;outline:none}.sbb-menu__content:after{content:"";display:block;height:var(--sbb-spacing-fixed-8x)}@media (min-width: 52.5rem){.sbb-menu__content{max-height:fit-content}:host(:not([data-state=closed])) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}.sbb-menu-list{list-style:none;margin:0;padding:0;font-size:inherit}@keyframes open{0%{opacity:0;transform:var(--sbb-menu-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-menu-transform)}}`, W = 8, Q = [
+import { SbbFocusHandler as M, isArrowKeyPressed as T, interactivityChecker as I, getNextElementIndex as P, setModalityOnNextFocus as S, IS_FOCUSABLE_QUERY as H } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as z } from "../core/base-elements.js";
+import { SbbConnectedAbortController as K, SbbInertController as D, SbbMediaMatcherController as F, SbbMediaQueryBreakpointSmallAndBelow as u } from "../core/controllers.js";
+import { forceType as U } from "../core/decorators.js";
+import { SbbScrollHandler as $, findReferencedElement as R } from "../core/dom.js";
+import { SbbNamedSlotListMixin as Y } from "../core/mixins.js";
+import { isEventOnElement as A, removeAriaOverlayTriggerAttributes as q, setAriaOverlayTriggerAttributes as V, getElementPosition as j } from "../core/overlay.js";
+const Q = N`*,:before,:after{box-sizing:border-box}:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-menu-animation-easing: ease;--sbb-menu-transform: translateY(100%);--sbb-menu-max-width: 100%;--sbb-menu-min-width: 100%;--sbb-menu-inset: 0 auto auto 0;--sbb-menu-container-height: 100dvh;--sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-menu-min-height: 3.03125rem;--sbb-menu-border-radius: var(--sbb-border-radius-4x);--sbb-menu-visibility: hidden;--sbb-menu-backdrop-color: transparent}@media (min-width: 52.5rem){:host{--sbb-menu-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem}}:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: var(--sbb-color-black-alpha-20)}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-backdrop-color: transparent}}:host(:not([data-state=closed])){--sbb-menu-inset: 0}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}::slotted(sbb-divider){--sbb-divider-color: var(--sbb-color-iron);margin-block:var(--sbb-spacing-fixed-2x)}.sbb-menu__container{position:fixed;pointer-events:none;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index))}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility);pointer-events:all;position:fixed;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility}.sbb-menu{display:none;opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;position:absolute;inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:unset;color:var(--sbb-color-white);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-color-black);padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:open;animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing)}:host([data-state][data-state=closing]) .sbb-menu{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;max-height:fit-content;border-radius:var(--sbb-menu-border-radius)}:host(:not([data-state=closed])) .sbb-menu{top:var(--sbb-menu-position-y);left:var(--sbb-menu-position-x);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{--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-menu__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__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-menu__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-menu__content::-webkit-scrollbar-button,.sbb-menu__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-menu__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);overflow:auto;outline:none}.sbb-menu__content:after{content:"";display:block;height:var(--sbb-spacing-fixed-8x)}@media (min-width: 52.5rem){.sbb-menu__content{max-height:fit-content}:host(:not([data-state=closed])) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}.sbb-menu-list{list-style:none;margin:0;padding:0;font-size:inherit}@keyframes open{0%{opacity:0;transform:var(--sbb-menu-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-menu-transform)}}`, W = 8, G = [
   "A",
   "BUTTON",
   "SBB-BUTTON",
@@ -24,17 +24,21 @@ const j = N`*,:before,:after{box-sizing:border-box}:host{display:contents;--sbb-
   "SBB-LINK-BUTTON",
   "SBB-BLOCK-LINK-BUTTON"
 ];
-let G = 0, ct = (() => {
+let J = 0, dt = (() => {
   var c, a;
-  let s = [O("sbb-menu")], n, r = [], o, u = R(K), g = [], _, v, p = [], f = [];
-  return a = class extends u {
+  let s = [O("sbb-menu")], n, r = [], o, g = Y(z), _ = [], v, p, f = [], w = [];
+  return a = class extends g {
     constructor() {
       super(...arguments);
-      x(this, c);
-      this.listChildLocalNames = (d(this, g), ["sbb-menu-button", "sbb-menu-link"]), this._trigger = null, m(this, c, d(this, p, "")), this._menu = d(this, f), this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new D(this), this._focusHandler = new T(), this._scrollHandler = new U(), this._inertController = new H(this), this._pointerDownListener = (t) => {
-        this._isPointerDownEventOnMenu = S(this._menu, t);
+      E(this, c);
+      this.listChildLocalNames = (d(this, _), ["sbb-menu-button", "sbb-menu-link"]), this._trigger = null, h(this, c, d(this, f, "")), this._menu = d(this, w), this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new K(this), this._focusHandler = new M(), this._scrollHandler = new $(), this._inertController = new D(this), this._mediaMatcher = new F(this, {
+        [u]: (t) => {
+          t && (this.state === "opening" || this.state === "opened") ? this._scrollHandler.disableScroll() : this._scrollHandler.enableScroll();
+        }
+      }), this._pointerDownListener = (t) => {
+        this._isPointerDownEventOnMenu = A(this._menu, t);
       }, this._closeOnBackdropClick = (t) => {
-        !this._isPointerDownEventOnMenu && !S(this._menu, t) && this.close();
+        !this._isPointerDownEventOnMenu && !A(this._menu, t) && this.close();
       };
     }
     /**
@@ -53,17 +57,17 @@ let G = 0, ct = (() => {
      * Used only if the menu automatically renders the actions inside as a list.
      */
     get listAccessibilityLabel() {
-      return k(this, c);
+      return x(this, c);
     }
     set listAccessibilityLabel(t) {
-      m(this, c, t);
+      h(this, c, t);
     }
     /**
      * Opens the menu on trigger click.
      */
     open() {
       var t;
-      this.state === "closing" || !this._menu || this.willOpen.emit() && (this.state = "opening", this._setMenuPosition(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"), A("medium") || this._scrollHandler.disableScroll());
+      this.state === "closing" || !this._menu || this.willOpen.emit() && (this.state = "opening", this._setMenuPosition(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"), this._mediaMatcher.matches(u) && this._scrollHandler.disableScroll());
     }
     /**
      * Closes the menu.
@@ -80,10 +84,10 @@ let G = 0, ct = (() => {
       ((e == null ? void 0 : e.localName) === "sbb-menu-button" || (e == null ? void 0 : e.localName) === "sbb-menu-link") && this.close();
     }
     _handleKeyDown(t) {
-      if (!I(t))
+      if (!T(t))
         return;
       t.preventDefault();
-      const e = Array.from(this.querySelectorAll("sbb-menu-button, sbb-menu-link")).filter((l) => (!l.disabled || l.disabledInteractive) && M.isVisible(l)), i = e.findIndex((l) => l === t.target), b = P(t, i, e.length);
+      const e = Array.from(this.querySelectorAll("sbb-menu-button, sbb-menu-link")).filter((l) => (!l.disabled || l.disabledInteractive) && I.isVisible(l)), i = e.findIndex((l) => l === t.target), b = P(t, i, e.length);
       e[b].focus();
     }
     // Closes the menu on "Esc" key pressed and traps focus within the menu.
@@ -118,7 +122,7 @@ let G = 0, ct = (() => {
     // Check if the trigger is valid and attach click event listeners.
     _configure(t) {
       var e;
-      Y(this._triggerElement), t && (this._triggerElement = $(t), this._triggerElement && (this.id = this.id || `sbb-menu-${G++}`, q(this._triggerElement, "menu", this.id, this.state), (e = this._menuController) == null || e.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+      q(this._triggerElement), t && (this._triggerElement = R(t), this._triggerElement && (this.id = this.id || `sbb-menu-${J++}`, V(this._triggerElement, "menu", this.id, this.state), (e = this._menuController) == null || e.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
         signal: this._menuController.signal
       })));
     }
@@ -140,7 +144,7 @@ let G = 0, ct = (() => {
     // Close menu at any click on an interactive element inside the <sbb-menu> that bubbles to the container.
     _closeOnInteractiveElementClick(t) {
       const e = t.target;
-      Q.includes(e.nodeName) && !e.hasAttribute("disabled") && this.close();
+      G.includes(e.nodeName) && !e.hasAttribute("disabled") && this.close();
     }
     // Set menu position (x, y) to '0' once the menu is closed and the transition ended to prevent the
     // viewport from overflowing. And set the focus to the first focusable element once the menu is open.
@@ -148,27 +152,27 @@ let G = 0, ct = (() => {
     // To avoid entering a corrupt state, exit when state is not expected.
     _onMenuAnimationEnd(t) {
       var e, i, b, l;
-      t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._inertController.activate(), this._setMenuFocus(), this._focusHandler.trap(this), this._attachWindowEvents()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", (i = (e = this._menu) == null ? void 0 : e.firstElementChild) == null || i.scrollTo(0, 0), this._inertController.deactivate(), L(this._triggerElement), (b = this._triggerElement) == null || b.focus({
+      t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._inertController.activate(), this._setMenuFocus(), this._focusHandler.trap(this), this._attachWindowEvents()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", (i = (e = this._menu) == null ? void 0 : e.firstElementChild) == null || i.scrollTo(0, 0), this._inertController.deactivate(), S(this._triggerElement), (b = this._triggerElement) == null || b.focus({
         // When inside the sbb-header, we prevent the scroll to avoid the snapping to the top of the page
         preventScroll: this._triggerElement.localName === "sbb-header-button" || this._triggerElement.localName === "sbb-header-link"
       }), this.didClose.emit(), (l = this._windowEventsController) == null || l.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll());
     }
     // Set focus on the first focusable element.
     _setMenuFocus() {
-      const t = this.querySelector(z);
-      L(t), t.focus();
+      const t = this.querySelector(H);
+      S(t), t.focus();
     }
     // Set menu position and max height if the breakpoint is medium-ultra.
     _setMenuPosition() {
-      if (!A("medium") || !this._menu || !this._triggerElement || this.state === "closing")
+      if ((this._mediaMatcher.matches(u) ?? !0) || !this._menu || !this._triggerElement || this.state === "closing")
         return;
-      const t = V(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
+      const t = j(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
         verticalOffset: W
       });
       this.style.setProperty("--sbb-menu-position-x", `${t.left}px`), this.style.setProperty("--sbb-menu-position-y", `${t.top}px`), this.style.setProperty("--sbb-menu-max-height", t.maxHeight);
     }
     render() {
-      return E`
+      return C`
       <div class="sbb-menu__container">
         <div
           @animationend=${(t) => this._onMenuAnimationEnd(t)}
@@ -179,21 +183,21 @@ let G = 0, ct = (() => {
             @click=${(t) => this._closeOnInteractiveElementClick(t)}
             class="sbb-menu__content"
           >
-            ${this.listChildren.length ? this.renderList({ class: "sbb-menu-list", ariaLabel: this.listAccessibilityLabel }) : E`<slot></slot>`}
+            ${this.listChildren.length ? this.renderList({ class: "sbb-menu-list", ariaLabel: this.listAccessibilityLabel }) : C`<slot></slot>`}
           </div>
         </div>
       </div>
     `;
     }
   }, c = new WeakMap(), o = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    _ = [C()], v = [F(), C({ attribute: "list-accessibility-label" })], h(a, null, _, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, set: (e, i) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    v = [L()], p = [U(), L({ attribute: "list-accessibility-label" })], m(a, null, v, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, set: (e, i) => {
       e.trigger = i;
-    } }, metadata: t }, null, g), h(a, null, v, { kind: "accessor", name: "listAccessibilityLabel", static: !1, private: !1, access: { has: (e) => "listAccessibilityLabel" in e, get: (e) => e.listAccessibilityLabel, set: (e, i) => {
+    } }, metadata: t }, null, _), m(a, null, p, { kind: "accessor", name: "listAccessibilityLabel", static: !1, private: !1, access: { has: (e) => "listAccessibilityLabel" in e, get: (e) => e.listAccessibilityLabel, set: (e, i) => {
       e.listAccessibilityLabel = i;
-    } }, metadata: t }, p, f), h(null, n = { value: o }, s, { kind: "class", name: o.name, metadata: t }, null, r), o = n.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = j, d(o, r), o;
+    } }, metadata: t }, f, w), m(null, n = { value: o }, s, { kind: "class", name: o.name, metadata: t }, null, r), o = n.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = Q, d(o, r), o;
 })();
 export {
-  ct as SbbMenuElement
+  dt as SbbMenuElement
 };

package/navigation/navigation-section.js

@@ -16,19 +16,19 @@ import { SbbUpdateSchedulerMixin as et } from "../core/mixins.js";
 import { removeAriaOverlayTriggerAttributes as at, setAriaOverlayTriggerAttributes as nt } from "../core/overlay.js";
 import "../button/transparent-button.js";
 import "../divider.js";
-const st = U`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / 5;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-transform: translateX(100%);--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100vw;--sbb-navigation-section-height: 100vh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@supports (width: 100dvw){:host{--sbb-navigation-section-width: 100dvw}}@supports (height: 100dvh){:host{--sbb-navigation-section-height: 100dvh}}@media (min-width: 64rem){:host{--sbb-navigation-section-column: 5 / 9;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-transform: translateX(0%);--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );transform:translate(calc(var(--sbb-grid-base-gutter-responsive) * -1))}}@media (min-width: 80rem){:host{--sbb-navigation-section-column: 5 / 13}}@media (min-width: 90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host([data-state=opened]){--sbb-navigation-section-pointer-events: all}:host([data-state=opening]){--sbb-navigation-section-position: absolute}:host(:is([data-state=opening],[data-state=closing])){--sbb-navigation-section-pointer-events: none}:host([data-state]:not([data-state=closed])){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted([data-sbb-button]){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-color-white);background-color:transparent;padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation-section{animation-name:close}@media (forced-colors: active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--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-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-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-section__wrapper::-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-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is([data-state=opening],[data-state=closing])) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media (min-width: 64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (min-width: 80rem){.sbb-navigation-section__header{grid-column:1/4}}:host(:not([data-slot-names~=title],[title-content])) .sbb-navigation-section__header{display:none}.sbb-navigation-section__back{position:absolute;transform:translate(calc((100% + var(--sbb-spacing-fixed-1x)) * -1))}@media (min-width: 64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}@media (min-width: 64rem){.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;grid-gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media (min-width: 64rem){.sbb-navigation-section__content{opacity:0;transform:translateY(var(--sbb-spacing-fixed-3x));transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,transform}:host([data-state=opened]) .sbb-navigation-section__content{opacity:1;transform:translateY(0)}}@media (min-width: 80rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host([data-state=closing]) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{transform:var(--sbb-navigation-section-transform)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:var(--sbb-navigation-section-transform)}}`;
+const st = U`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / 5;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-transform: translateX(100%);--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100dvw;--sbb-navigation-section-height: 100dvh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-navigation-section-column: 5 / 9;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-transform: translateX(0%);--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );transform:translate(calc(var(--sbb-grid-base-gutter-responsive) * -1))}}@media (min-width: 80rem){:host{--sbb-navigation-section-column: 5 / 13}}@media (min-width: 90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host([data-state=opened]){--sbb-navigation-section-pointer-events: all}:host([data-state=opening]){--sbb-navigation-section-position: absolute}:host(:is([data-state=opening],[data-state=closing])){--sbb-navigation-section-pointer-events: none}:host([data-state]:not([data-state=closed])){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted([data-sbb-button]){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-color-white);background-color:transparent;padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation-section{animation-name:close}@media (forced-colors: active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--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-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-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-section__wrapper::-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-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is([data-state=opening],[data-state=closing])) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media (min-width: 64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (min-width: 80rem){.sbb-navigation-section__header{grid-column:1/4}}:host(:not([data-slot-names~=title],[title-content])) .sbb-navigation-section__header{display:none}.sbb-navigation-section__back{position:absolute;transform:translate(calc((100% + var(--sbb-spacing-fixed-1x)) * -1))}@media (min-width: 64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}@media (min-width: 64rem){.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;grid-gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media (min-width: 64rem){.sbb-navigation-section__content{opacity:0;transform:translateY(var(--sbb-spacing-fixed-3x));transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,transform}:host([data-state=opened]) .sbb-navigation-section__content{opacity:1;transform:translateY(0)}}@media (min-width: 80rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host([data-state=closing]) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{transform:var(--sbb-navigation-section-transform)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:var(--sbb-navigation-section-transform)}}`;
 let ot = 0, kt = (() => {
   var c, g, d, o;
   let a = [G("sbb-navigation-section"), W({
     slot: "navigation-section"
-  }), X()], n, s = [], r, w = et(Z), y = [], k, E = [], x = [], L, C, S = [], A = [], N, z = [], B = [];
-  return o = class extends w {
+  }), X()], n, s = [], r, y = et(Z), w = [], k, E = [], x = [], L, C, S = [], A = [], N, z = [], B = [];
+  return o = class extends y {
     constructor() {
       super(...arguments);
       _(this, c);
       _(this, g);
       _(this, d);
-      b(this, c, (l(this, y), l(this, E, ""))), this._trigger = (l(this, x), null), b(this, g, l(this, S, "")), b(this, d, (l(this, A), l(this, z, ""))), this._firstLevelNavigation = (l(this, B), null), this._triggerElement = null, this._language = new V(this), this._handleNavigationSectionClose = (t) => {
+      b(this, c, (l(this, w), l(this, E, ""))), this._trigger = (l(this, x), null), b(this, g, l(this, S, "")), b(this, d, (l(this, A), l(this, z, ""))), this._firstLevelNavigation = (l(this, B), null), this._triggerElement = null, this._language = new V(this), this._handleNavigationSectionClose = (t) => {
         t.composedPath().filter((e) => e instanceof window.HTMLElement).some((e) => this._isCloseElement(e)) && this.close();
       };
     }
@@ -139,7 +139,7 @@ let ot = 0, kt = (() => {
       return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
     }
     _isZeroToLargeBreakpoint() {
-      return tt("zero", "large");
+      return tt("zero", "large") ?? !1;
     }
     // Closes the navigation on "Esc" key pressed.
     _onKeydownEvent(t) {
@@ -210,12 +210,12 @@ let ot = 0, kt = (() => {
     `;
     }
   }, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
     k = [f(), p({ attribute: "title-content", reflect: !0, converter: Y })], L = [p()], C = [f(), p({ attribute: "accessibility-label" })], N = [f(), p({ attribute: "accessibility-back-label" })], v(o, null, k, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, e) => {
       i.titleContent = e;
     } }, metadata: t }, E, x), v(o, null, L, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, e) => {
       i.trigger = e;
-    } }, metadata: t }, null, y), v(o, null, C, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, e) => {
+    } }, metadata: t }, null, w), v(o, null, C, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, e) => {
       i.accessibilityLabel = e;
     } }, metadata: t }, S, A), v(o, null, N, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, e) => {
       i.accessibilityBackLabel = e;

package/navigation/navigation.js

@@ -18,23 +18,23 @@ import { i18nCloseNavigation as V } from "../core/i18n.js";
 import { SbbUpdateSchedulerMixin as G } from "../core/mixins.js";
 import { isEventOnElement as m, removeAriaOverlayTriggerAttributes as K, setAriaOverlayTriggerAttributes as W } from "../core/overlay.js";
 import "../button/transparent-button.js";
-const J = 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%)}}`, Q = {
+const J = 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: 100dvh;--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}@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: 100dvw;--sbb-navigation-content-transform: translateX(0%)}}: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%)}}`, Q = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
 let Y = 0;
 const Z = 150;
-let ut = (() => {
+let pt = (() => {
   var b, l, r;
   let n = [B("sbb-navigation"), $({
     role: "navigation"
-  })], e, o = [], s, p = G(R), u = [], _, f, w = [], k = [], y, C = [], E = [];
-  return r = class extends p {
+  })], e, o = [], s, u = G(R), p = [], _, f, w = [], k = [], y, C = [], E = [];
+  return r = class extends u {
     constructor() {
       super();
       h(this, b);
       h(this, l);
-      this._trigger = (c(this, u), null), v(this, b, c(this, w, "")), v(this, l, (c(this, k), c(this, C, null))), this._navigation = c(this, E), this._triggerElement = null, this._abort = new q(this), this._language = new M(this), this._inertController = new P(this), this._focusHandler = new F(), this._scrollHandler = new X(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new I(this, {
+      this._trigger = (c(this, p), null), v(this, b, c(this, w, "")), v(this, l, (c(this, k), c(this, C, null))), this._navigation = c(this, E), this._triggerElement = null, this._abort = new q(this), this._language = new M(this), this._inertController = new P(this), this._focusHandler = new F(), this._scrollHandler = new X(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new I(this, {
         skipInitial: !0,
         callback: () => this._onNavigationResize()
       }), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
@@ -205,10 +205,10 @@ let ut = (() => {
     `;
     }
   }, b = new WeakMap(), l = new WeakMap(), s = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
     _ = [A()], f = [U(), A({ attribute: "accessibility-close-label" })], y = [D()], g(r, null, _, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, a) => {
       i.trigger = a;
-    } }, metadata: t }, null, u), g(r, null, f, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (i) => "accessibilityCloseLabel" in i, get: (i) => i.accessibilityCloseLabel, set: (i, a) => {
+    } }, metadata: t }, null, p), g(r, null, f, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (i) => "accessibilityCloseLabel" in i, get: (i) => i.accessibilityCloseLabel, set: (i, a) => {
       i.accessibilityCloseLabel = a;
     } }, metadata: t }, w, k), g(r, null, y, { kind: "accessor", name: "_activeNavigationSection", static: !1, private: !1, access: { has: (i) => "_activeNavigationSection" in i, get: (i) => i._activeNavigationSection, set: (i, a) => {
       i._activeNavigationSection = a;
@@ -216,5 +216,5 @@ let ut = (() => {
   })(), r.styles = J, c(s, o), s;
 })();
 export {
-  ut as SbbNavigationElement
+  pt as SbbNavigationElement
 };

package/package.json

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

package/paginator/paginator/paginator.d.ts

@@ -9,17 +9,13 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
     static styles: CSSResultGroup;
     static readonly events: Record<string, string>;
     /** The available `pageSize` choices. */
-    set pageSizeOptions(value: number[]);
-    get pageSizeOptions(): number[] | undefined;
-    private _pageSizeOptions?;
+    accessor pageSizeOptions: number[];
     /**
      * Position of the prev/next buttons: if `pageSizeOptions` is set,
      * the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
      */
     accessor pagerPosition: 'start' | 'end';
-    private _paginatorOptionsLabel;
     private _markForFocus;
-    private _updateSelectAriaLabelledBy;
     protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,

package/paginator/paginator/paginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAMrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,IACW,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAGzC;IACD,IAAW,eAAe,IAAI,MAAM,EAAE,GAAG,SAAS,CAEjD;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAW;IAEpC;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,sBAAsB,CAA6C;IAC3E,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,2BAA2B,CAAkB;cAElC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA0BzE;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA+BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBzE;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}