@sbb-esta/lyne-elements 1.6.0 → 1.8.0

package/link-list/link-list.d.ts

@@ -1,39 +1,2 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
-import { WithListChildren } from '../core/mixins.js';
-import { SbbBlockLinkButtonElement, SbbBlockLinkElement, SbbBlockLinkStaticElement, SbbLinkSize } from '../link.js';
-import { SbbTitleLevel } from '../title.js';
-
-declare const SbbLinkListElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNamedSlotListMixinType<SbbBlockLinkElement | SbbBlockLinkButtonElement | SbbBlockLinkStaticElement>> & typeof LitElement;
-/**
- * It displays a list of `sbb-block-link`.
- *
- * @slot - Use the unnamed slot to add one or more `sbb-block-link`.
- * @slot title - Use this slot to provide a title.
- */
-export declare class SbbLinkListElement extends SbbLinkListElement_base {
-    static styles: CSSResultGroup;
-    protected readonly listChildLocalNames: string[];
-    /** The title text we want to show before the list. */
-    titleContent?: string;
-    /** The semantic level of the title, e.g. 2 = h2. */
-    titleLevel: SbbTitleLevel;
-    /**
-     * Text size of the nested sbb-block-link instances. This will overwrite the size attribute of
-     * nested sbb-block-link instances.
-     */
-    size: SbbLinkSize;
-    /** Selected breakpoint from which the list is rendered horizontally. */
-    horizontalFrom?: SbbHorizontalFrom;
-    /** The orientation in which the list will be shown vertical or horizontal. */
-    orientation: SbbOrientation;
-    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sbb-link-list': SbbLinkListElement;
-    }
-}
-export {};
+export * from './link-list/link-list.js';
 //# sourceMappingURL=link-list.d.ts.map

package/link-list/link-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.d.ts","sourceRoot":"","sources":["../../../src/elements/link-list/link-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAA2C,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,KAAK,EACV,yBAAyB,EACzB,mBAAmB,EACnB,yBAAyB,EACzB,WAAW,EACZ,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;;AAErB;;;;;GAKG;AACH,qBAEa,kBAAmB,SAAQ,uBAKvC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAI7C;IAEF,sDAAsD;IACU,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,oDAAoD;IACL,UAAU,EAAE,aAAa,CAAO;IAE/E;;;OAGG;IACiC,IAAI,EAAE,WAAW,CAAO;IAE5D,wEAAwE;IAEjE,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C,8EAA8E;IAC1C,WAAW,EAAE,cAAc,CAAc;cAE1D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAe3E,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"link-list.d.ts","sourceRoot":"","sources":["../../../src/elements/link-list/link-list.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/link-list/link-list.js

@@ -0,0 +1,27 @@
+import { property as p, customElement as h } from "lit/decorators.js";
+import { linkListBaseStyle as w, SbbLinkListBaseElement as d } from "./common.js";
+import { css as b } from "lit";
+const m = b`:host{--sbb-link-list-flex-flow: column nowrap}:host([orientation=horizontal]){--sbb-link-list-flex-flow: row wrap}:host([orientation=horizontal]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-link-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-8x);flex-flow:var(--sbb-link-list-flex-flow)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=zero]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=micro]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=small]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=medium]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=large]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=wide]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=ultra]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}`;
+var f = Object.defineProperty, c = Object.getOwnPropertyDescriptor, a = (s, o, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? c(o, e) : o, l = s.length - 1, n; l >= 0; l--)
+    (n = s[l]) && (i = (r ? n(o, e, i) : n(i)) || i);
+  return r && i && f(o, e, i), i;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.orientation = "vertical";
+  }
+};
+t.styles = [w, m];
+a([
+  p({ attribute: "horizontal-from", reflect: !0 })
+], t.prototype, "horizontalFrom", 2);
+a([
+  p({ reflect: !0 })
+], t.prototype, "orientation", 2);
+t = a([
+  h("sbb-link-list")
+], t);
+export {
+  t as SbbLinkListElement
+};

package/link-list.d.ts

@@ -1,2 +1,4 @@
 export * from './link-list/link-list.js';
+export * from './link-list/link-list-anchor.js';
+export * from './link-list/common.js';
 //# sourceMappingURL=link-list.d.ts.map

package/link-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.d.ts","sourceRoot":"","sources":["../../src/elements/link-list.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"link-list.d.ts","sourceRoot":"","sources":["../../src/elements/link-list.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC"}

package/link-list.js

@@ -1,66 +1,3 @@
-import { css as b, LitElement as h, html as d, nothing as m } from "lit";
-import { property as r, customElement as w } from "lit/decorators.js";
-import { slotState as f } from "./core/decorators.js";
-import { SbbNegativeMixin as c, SbbNamedSlotListMixin as x } from "./core/mixins.js";
-import "./title.js";
-const v = b`*,:before,:after{box-sizing:border-box}:host{--sbb-link-list-flex-flow: column nowrap;display:block}:host([orientation=horizontal]){--sbb-link-list-flex-flow: row wrap}:host([orientation=horizontal]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-link-list-wrapper{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-3x)}.sbb-link-list-title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-link-list-title{display:none}.sbb-link-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-8x);flex-flow:var(--sbb-link-list-flex-flow)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=zero]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=micro]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=small]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=medium]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=large]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=wide]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-link-list-flex-flow: row wrap}:host([orientation=vertical][horizontal-from=ultra]) .sbb-link-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}`;
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, e, s, n) => {
-  for (var o = n > 1 ? void 0 : n ? k(e, s) : e, a = t.length - 1, p; a >= 0; a--)
-    (p = t[a]) && (o = (n ? p(e, s, o) : p(o)) || o);
-  return n && o && g(e, s, o), o;
-};
-let i = class extends c(
-  x(h)
-) {
-  constructor() {
-    super(...arguments), this.listChildLocalNames = [
-      "sbb-block-link",
-      "sbb-block-link-button",
-      "sbb-block-link-static"
-    ], this.titleLevel = "2", this.size = "s", this.orientation = "vertical";
-  }
-  willUpdate(t) {
-    if (super.willUpdate(t), t.has("size") || t.has("negative") || t.has("listChildren"))
-      for (const e of this.listChildren)
-        e.negative = this.negative, e.size = this.size;
-  }
-  render() {
-    return d`
-      <div class="sbb-link-list-wrapper">
-        <sbb-title
-          class="sbb-link-list-title"
-          level=${this.titleLevel || m}
-          visual-level="5"
-          ?negative=${this.negative}
-          id="sbb-link-list-title-id"
-        >
-          <slot name="title">${this.titleContent}</slot>
-        </sbb-title>
-        ${this.renderList({ ariaLabelledby: "sbb-link-list-title-id" })}
-      </div>
-    `;
-  }
-};
-i.styles = v;
-l([
-  r({ attribute: "title-content", reflect: !0 })
-], i.prototype, "titleContent", 2);
-l([
-  r({ attribute: "title-level" })
-], i.prototype, "titleLevel", 2);
-l([
-  r({ reflect: !0 })
-], i.prototype, "size", 2);
-l([
-  r({ attribute: "horizontal-from", reflect: !0 })
-], i.prototype, "horizontalFrom", 2);
-l([
-  r({ reflect: !0 })
-], i.prototype, "orientation", 2);
-i = l([
-  w("sbb-link-list"),
-  f()
-], i);
-export {
-  i as SbbLinkListElement
-};
+export * from "./link-list/link-list.js";
+export * from "./link-list/link-list-anchor.js";
+export * from "./link-list/common.js";

package/loading-indicator/loading-indicator.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-
 /**
  * It displays a loading indicator.
  */

package/logo/logo.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbProtectiveRoom } from '../core/interfaces.js';
-
 declare const SbbLogoElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**
  * It displays the SBB logo.

package/logo.js

@@ -1,7 +1,7 @@
 import { css as h, LitElement as g, html as n } from "lit";
 import { property as c, customElement as v } from "lit/decorators.js";
 import { SbbNegativeMixin as p } from "./core/mixins.js";
-const m = h`*,:before,:after{box-sizing:border-box}:host{--sbb-logo-panel-color: var(--sbb-color-red);--sbb-logo-panel-stroke-color: var(--sbb-color-red);--sbb-logo-signet-color: var(--sbb-color-white);--sbb-logo-word-mark-color: var(--sbb-color-black);--sbb-logo-aspect-ratio: 454 / 48;--sbb-logo-svg-container-width: 100%;--sbb-logo-svg-container-height: auto;--sbb-logo-background-color: none;display:block;height:var(--sbb-logo-height)}@media (forced-colors: active){:host{--sbb-logo-panel-color: ButtonText !important;--sbb-logo-panel-stroke-color: ButtonText !important;--sbb-logo-signet-color: Canvas !important;--sbb-logo-word-mark-color: ButtonText !important}}:host([negative]){--sbb-logo-word-mark-color: var(--sbb-color-white)}:host([protective-room=minimal]){--sbb-logo-aspect-ratio: 502 / 96;--sbb-logo-svg-container-height: 50%}:host([protective-room=ideal]){--sbb-logo-aspect-ratio: 550 / 144;--sbb-logo-svg-container-height: calc(48 / 144 * 100%)}.sbb-logo{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-logo-background-color);aspect-ratio:var(--sbb-logo-aspect-ratio);height:100%;width:100%}.sbb-logo .sbb-logo__svg-container{display:flex;height:var(--sbb-logo-svg-container-height)}.sbb-logo svg{width:100%;height:100%}#sbb-logo__word-mark{fill:var(--sbb-logo-word-mark-color)}#sbb-logo__panel{fill:var(--sbb-logo-panel-color);stroke:var(--sbb-logo-panel-stroke-color)}#sbb-logo__signet{fill:var(--sbb-logo-signet-color)}`;
+const m = h`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-logo-height);--sbb-logo-panel-color: var(--sbb-color-red);--sbb-logo-panel-stroke-color: var(--sbb-color-red);--sbb-logo-signet-color: var(--sbb-color-white);--sbb-logo-word-mark-color: var(--sbb-color-black);--sbb-logo-aspect-ratio: 454 / 48;--sbb-logo-svg-container-width: 100%;--sbb-logo-svg-container-height: auto;--sbb-logo-background-color: none}@media (forced-colors: active){:host{--sbb-logo-panel-color: ButtonText !important;--sbb-logo-panel-stroke-color: ButtonText !important;--sbb-logo-signet-color: Canvas !important;--sbb-logo-word-mark-color: ButtonText !important}}:host([negative]){--sbb-logo-word-mark-color: var(--sbb-color-white)}:host([protective-room=minimal]){--sbb-logo-aspect-ratio: 502 / 96;--sbb-logo-svg-container-height: 50%}:host([protective-room=ideal]){--sbb-logo-aspect-ratio: 550 / 144;--sbb-logo-svg-container-height: calc(48 / 144 * 100%)}.sbb-logo{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-logo-background-color);aspect-ratio:var(--sbb-logo-aspect-ratio);height:100%;width:100%}.sbb-logo .sbb-logo__svg-container{display:flex;height:var(--sbb-logo-svg-container-height)}.sbb-logo svg{width:100%;height:100%}#sbb-logo__word-mark{fill:var(--sbb-logo-word-mark-color)}#sbb-logo__panel{fill:var(--sbb-logo-panel-color);stroke:var(--sbb-logo-panel-stroke-color)}#sbb-logo__signet{fill:var(--sbb-logo-signet-color)}`;
 var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (i, e, s, l) => {
   for (var o = l > 1 ? void 0 : l ? _(e, s) : e, r = i.length - 1, b; r >= 0; r--)
     (b = i[r]) && (o = (l ? b(e, s, o) : b(o)) || o);

package/map-container/map-container.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-
 /**
  * It can be used as a container for maps.
  *

package/map-container.js

@@ -5,7 +5,7 @@ import { SbbLanguageController as _ } from "./core/controllers.js";
 import { i18nMapContainerButtonLabel as g } from "./core/i18n.js";
 import { AgnosticIntersectionObserver as w } from "./core/observers.js";
 import "./button/tertiary-button.js";
-const f = m`*,:before,:after{box-sizing:border-box}:host{--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) );display:block}@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);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)}.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)}}@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{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 f = m`*,: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) )}@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{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}}`;
 var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, t, i, b) => {
   for (var a = b > 1 ? void 0 : b ? y(t, i) : t, s = r.length - 1, e; s >= 0; s--)
     (e = r[s]) && (a = (b ? e(t, i, a) : e(a)) || a);

package/menu/common/menu-action-common.d.ts

@@ -1,7 +1,6 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { AbstractConstructor, SbbDisabledMixinType } from '../../core/mixins.js';
 import { SbbIconNameMixinType } from '../../icon.js';
-
 export declare class SbbMenuActionCommonElementMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbIconNameMixinType> {
     amount?: string;
     disabled: boolean;

package/menu/menu/menu.d.ts

@@ -2,7 +2,6 @@ import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../../core/base-elements.js';
 import { SbbMenuButtonElement } from '../menu-button.js';
 import { SbbMenuLinkElement } from '../menu-link.js';
-
 declare const SbbMenuElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbMenuButtonElement | SbbMenuLinkElement>> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays a contextual menu with one or more action element.
@@ -39,6 +38,7 @@ export declare class SbbMenuElement extends SbbMenuElement_base {
     private _abort;
     private _focusHandler;
     private _scrollHandler;
+    private _inertController;
     /**
      * 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;AAYtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAGV;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;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F,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;IAEhD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAsBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAS5C,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;AAUtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAGV;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;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F,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;YAsBR,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-button/menu-button.d.ts

@@ -1,5 +1,4 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-
 declare const SbbMenuButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbMenuActionCommonElementMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a button element that can be used in the `sbb-menu` component.

package/menu/menu-link/menu-link.d.ts

@@ -1,5 +1,4 @@
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
-
 declare const SbbMenuLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbMenuActionCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a link element that can be used in the `sbb-menu` component.

package/menu/menu.js

@@ -1,19 +1,19 @@
-import { css as v, html as l } from "lit";
-import { property as g, customElement as p } from "lit/decorators.js";
-import { ref as _ } from "lit/directives/ref.js";
-import { SbbFocusHandler as f, isArrowKeyPressed as w, interactivityChecker as E, getNextElementIndex as x, setModalityOnNextFocus as c, IS_FOCUSABLE_QUERY as y } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as k } from "../core/base-elements.js";
-import { SbbConnectedAbortController as C } from "../core/controllers.js";
-import { SbbScrollHandler as L, isBreakpoint as d, findReferencedElement as O } from "../core/dom.js";
-import { SbbNamedSlotListMixin as N } from "../core/mixins.js";
-import { isEventOnElement as h, applyInertMechanism as m, removeInertMechanism as u, removeAriaOverlayTriggerAttributes as S, setAriaOverlayTriggerAttributes as B, getElementPosition as A } from "../core/overlay.js";
-const T = v`*,:before,:after{box-sizing:border-box}:host{--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;display:contents}@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);max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);overflow:auto;outline:none}.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: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)}}`;
-var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, b = (e, t, n, s) => {
+import { css as u, html as l } from "lit";
+import { property as m, customElement as g } from "lit/decorators.js";
+import { ref as v } from "lit/directives/ref.js";
+import { SbbFocusHandler as _, isArrowKeyPressed as p, interactivityChecker as f, getNextElementIndex as w, setModalityOnNextFocus as c, IS_FOCUSABLE_QUERY as E } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as x } from "../core/base-elements.js";
+import { SbbConnectedAbortController as y, SbbInertController as k } from "../core/controllers.js";
+import { SbbScrollHandler as C, isBreakpoint as d, findReferencedElement as L } from "../core/dom.js";
+import { SbbNamedSlotListMixin as O } from "../core/mixins.js";
+import { isEventOnElement as h, removeAriaOverlayTriggerAttributes as S, setAriaOverlayTriggerAttributes as N, getElementPosition as B } from "../core/overlay.js";
+const A = u`*,: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)}}`;
+var T = Object.defineProperty, P = Object.getOwnPropertyDescriptor, b = (e, t, n, s) => {
   for (var i = s > 1 ? void 0 : s ? P(t, n) : t, o = e.length - 1, a; o >= 0; o--)
     (a = e[o]) && (i = (s ? a(t, n, i) : a(i)) || i);
-  return s && i && M(t, n, i), i;
+  return s && i && T(t, n, i), i;
 };
-const I = 8, K = [
+const I = 8, M = [
   "A",
   "BUTTON",
   "SBB-BUTTON",
@@ -23,9 +23,9 @@ const I = 8, K = [
   "SBB-LINK-BUTTON",
   "SBB-BLOCK-LINK-BUTTON"
 ];
-let H = 0, r = class extends N(k) {
+let K = 0, r = class extends O(x) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], this._trigger = null, this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new C(this), this._focusHandler = new f(), this._scrollHandler = new L(), this._pointerDownListener = (e) => {
+    super(...arguments), this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], this._trigger = null, this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new y(this), this._focusHandler = new _(), this._scrollHandler = new C(), this._inertController = new k(this), this._pointerDownListener = (e) => {
       this._isPointerDownEventOnMenu = h(this._menu, e);
     }, this._closeOnBackdropClick = (e) => {
       !this._isPointerDownEventOnMenu && !h(this._menu, e) && this.close();
@@ -60,7 +60,7 @@ let H = 0, r = class extends N(k) {
     ((t == null ? void 0 : t.localName) === "sbb-menu-button" || (t == null ? void 0 : t.localName) === "sbb-menu-link") && this.close();
   }
   _handleKeyDown(e) {
-    if (!w(e))
+    if (!p(e))
       return;
     e.preventDefault();
     const t = Array.from(
@@ -68,8 +68,8 @@ let H = 0, r = class extends N(k) {
         "sbb-menu-button, sbb-menu-link"
       )
     ).filter(
-      (i) => !i.disabled && E.isVisible(i)
-    ), n = t.findIndex((i) => i === e.target), s = x(e, n, t.length);
+      (i) => !i.disabled && f.isVisible(i)
+    ), n = t.findIndex((i) => i === e.target), s = w(e, n, t.length);
     t[s].focus();
   }
   // Closes the menu on "Esc" key pressed and traps focus within the menu.
@@ -91,11 +91,11 @@ let H = 0, r = class extends N(k) {
     this.addEventListener("click", (n) => this._onClick(n), { signal: e }), this.addEventListener("keydown", (n) => this._handleKeyDown(n), { signal: e }), (t = this.shadowRoot) == null || t.addEventListener("slotchange", (n) => this._checkListCase(n), {
       signal: e,
       capture: !0
-    }), this._configure(this.trigger), this.state === "opened" && m(this);
+    }), this._configure(this.trigger);
   }
   disconnectedCallback() {
     var e, t;
-    super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), u(), this._scrollHandler.enableScroll();
+    super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll();
   }
   _checkListCase(e) {
     var t;
@@ -106,7 +106,7 @@ let H = 0, r = class extends N(k) {
   // Check if the trigger is valid and attach click event listeners.
   _configure(e) {
     var t;
-    S(this._triggerElement), e && (this._triggerElement = O(e), this._triggerElement && (this.id = this.id || `sbb-menu-${H++}`, B(this._triggerElement, "menu", this.id, this.state), (t = this._menuController) == null || t.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+    S(this._triggerElement), e && (this._triggerElement = L(e), this._triggerElement && (this.id = this.id || `sbb-menu-${K++}`, N(this._triggerElement, "menu", this.id, this.state), (t = this._menuController) == null || t.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
       signal: this._menuController.signal
     })));
   }
@@ -128,7 +128,7 @@ let H = 0, r = class extends N(k) {
   // Close menu at any click on an interactive element inside the <sbb-menu> that bubbles to the container.
   _closeOnInteractiveElementClick(e) {
     const t = e.target;
-    K.includes(t.nodeName) && !t.hasAttribute("disabled") && this.close();
+    M.includes(t.nodeName) && !t.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.
@@ -136,21 +136,21 @@ let H = 0, r = class extends N(k) {
   // To avoid entering a corrupt state, exit when state is not expected.
   _onMenuAnimationEnd(e) {
     var t, n, s, i;
-    e.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), m(this), this._setMenuFocus(), this._focusHandler.trap(this), this._attachWindowEvents()) : e.animationName === "close" && this.state === "closing" && (this.state = "closed", (n = (t = this._menu) == null ? void 0 : t.firstElementChild) == null || n.scrollTo(0, 0), u(), c(this._triggerElement), (s = this._triggerElement) == null || s.focus({
+    e.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._inertController.activate(), this._setMenuFocus(), this._focusHandler.trap(this), this._attachWindowEvents()) : e.animationName === "close" && this.state === "closing" && (this.state = "closed", (n = (t = this._menu) == null ? void 0 : t.firstElementChild) == null || n.scrollTo(0, 0), this._inertController.deactivate(), c(this._triggerElement), (s = this._triggerElement) == null || s.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(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll());
   }
   // Set focus on the first focusable element.
   _setMenuFocus() {
-    const e = this.querySelector(y);
+    const e = this.querySelector(E);
     c(e), e.focus();
   }
   // Set menu position and max height if the breakpoint is medium-ultra.
   _setMenuPosition() {
     if (!d("medium") || !this._menu || !this._triggerElement || this.state === "closing")
       return;
-    const e = A(
+    const e = B(
       this.shadowRoot.querySelector(".sbb-menu__content"),
       this._triggerElement,
       this.shadowRoot.querySelector(".sbb-menu__container"),
@@ -166,7 +166,7 @@ let H = 0, r = class extends N(k) {
         <div
           @animationend=${(e) => this._onMenuAnimationEnd(e)}
           class="sbb-menu"
-          ${_((e) => this._menu = e)}
+          ${v((e) => this._menu = e)}
         >
           <div
             @click=${(e) => this._closeOnInteractiveElementClick(e)}
@@ -179,15 +179,15 @@ let H = 0, r = class extends N(k) {
     `;
   }
 };
-r.styles = T;
+r.styles = A;
 b([
-  g()
+  m()
 ], r.prototype, "trigger", 1);
 b([
-  g({ attribute: "list-accessibility-label" })
+  m({ attribute: "list-accessibility-label" })
 ], r.prototype, "listAccessibilityLabel", 2);
 r = b([
-  p("sbb-menu")
+  g("sbb-menu")
 ], r);
 export {
   r as SbbMenuElement

package/message/message.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTitleLevel } from '../title.js';
-
 /**
  * It displays a complex message combining a title, an image, an action and some content.
  *

package/navigation/common/navigation-action-common.d.ts

@@ -2,7 +2,6 @@ import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { AbstractConstructor } from '../../core/mixins.js';
 import { SbbNavigationMarkerElement } from '../navigation-marker.js';
 import { SbbNavigationSectionElement } from '../navigation-section.js';
-
 export type SbbNavigationActionSize = 's' | 'm' | 'l';
 export declare class SbbNavigationActionCommonElementMixinType {
     size?: SbbNavigationActionSize;

package/navigation/navigation/navigation.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../../core/base-elements.js';
-
 declare const SbbNavigationElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays a navigation menu, wrapping one or more `sbb-navigation-*` components.
@@ -39,6 +38,7 @@ export declare class SbbNavigationElement extends SbbNavigationElement_base {
     private _windowEventsController;
     private _abort;
     private _language;
+    private _inertController;
     private _focusHandler;
     private _scrollHandler;
     private _isPointerDownEventOnNavigation;

package/navigation/navigation/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAmBtE,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;;;;;GAWG;AACH,qBAIa,oBAAqB,SAAQ,yBAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;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;;OAEG;IAC0D,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd;;OAEG;IACM,OAAO,CAAC,wBAAwB,CAA4B;IAErE,IAAW,uBAAuB,IAAI,WAAW,GAAG,IAAI,CAEvD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,yBAAyB,CAAe;IAChD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,yBAAyB,CAAgE;IAEjG;;OAEG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACI,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAWzB,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAqBtE,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;;;;;GAWG;AACH,qBAIa,oBAAqB,SAAQ,yBAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;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;;OAEG;IAC0D,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd;;OAEG;IACM,OAAO,CAAC,wBAAwB,CAA4B;IAErE,IAAW,uBAAuB,IAAI,WAAW,GAAG,IAAI,CAEvD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,yBAAyB,CAAe;IAChD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,yBAAyB,CAAgE;IAEjG;;OAEG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACI,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;cAUzB,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}

package/navigation/navigation-button/navigation-button.d.ts

@@ -1,5 +1,4 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-
 declare const SbbNavigationButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbNavigationActionCommonElementMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a button element that can be used in the `sbb-navigation` component.

package/navigation/navigation-link/navigation-link.d.ts

@@ -1,5 +1,4 @@
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
-
 declare const SbbNavigationLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbNavigationActionCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a link element that can be used in the `sbb-navigation` component.

package/navigation/navigation-list/navigation-list.d.ts

@@ -2,7 +2,6 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { WithListChildren } from '../../core/mixins.js';
 import { SbbNavigationButtonElement } from '../navigation-button.js';
 import { SbbNavigationLinkElement } from '../navigation-link.js';
-
 declare const SbbNavigationListElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbNavigationLinkElement | SbbNavigationButtonElement>> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-navigation-button`/`sbb-navigation-link` within a `sbb-navigation-section`.

package/navigation/navigation-marker/navigation-marker.d.ts

@@ -2,7 +2,6 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { WithListChildren } from '../../core/mixins.js';
 import { SbbNavigationButtonElement } from '../navigation-button.js';
 import { SbbNavigationLinkElement } from '../navigation-link.js';
-
 declare const SbbNavigationMarkerElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbNavigationLinkElement | SbbNavigationButtonElement>> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-navigation-button`/`sbb-navigation-link` within a `sbb-navigation`.

package/navigation/navigation-section/navigation-section.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-
 declare const SbbNavigationSectionElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
 /**
  * It can be used as a container for `sbb-navigation-list` within a `sbb-navigation`.

package/navigation/navigation-section.js

@@ -10,7 +10,7 @@ import { SbbUpdateSchedulerMixin as L } from "../core/mixins.js";
 import { removeAriaOverlayTriggerAttributes as z, setAriaOverlayTriggerAttributes as T } from "../core/overlay.js";
 import "../button/transparent-button.js";
 import "../divider.js";
-const F = _`*,: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);height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}.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)}}: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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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 F = _`*,: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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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)}}`;
 var B = Object.defineProperty, O = Object.getOwnPropertyDescriptor, b = (t, i, n, a) => {
   for (var e = a > 1 ? void 0 : a ? O(i, n) : i, s = t.length - 1, r; s >= 0; s--)
     (r = t[s]) && (e = (a ? r(i, n, e) : r(e)) || e);