@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/navigation/navigation-marker/navigation-marker.js

@@ -0,0 +1,82 @@
+var p = (i) => {
+  throw TypeError(i);
+};
+var f = (i, e, a) => e.has(i) || p("Cannot " + a);
+var u = (i, e, a) => (f(i, e, "read from private field"), a ? a.call(i) : e.get(i)), k = (i, e, a) => e.has(i) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, a), l = (i, e, a, s) => (f(i, e, "write to private field"), s ? s.call(i, a) : e.set(i, a), a);
+import { __esDecorate as x, __runInitializers as c } from "tslib";
+import { ResizeController as y } from "@lit-labs/observers/resize-controller.js";
+import { css as _, LitElement as A } from "lit";
+import { customElement as z, property as w } from "lit/decorators.js";
+import { isLean as S } from "../../core/dom.js";
+import { SbbNamedSlotListMixin as C } from "../../core/mixins.js";
+const M = _`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);--sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);--sbb-navigation-marker-position-y: unset;--sbb-navigation-marker-width: 1.0625rem;--sbb-navigation-marker-border: var(--sbb-border-width-1x);--sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-titles);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);--sbb-navigation-marker-margin-block: calc( 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 );display:block}:host([size=s]){--sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width: .5rem;--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-body-text);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x: calc( var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x) );--sbb-navigation-marker-padding-inline-start: calc( var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x) )}.sbb-navigation-marker{list-style:none;padding:0;font-size:inherit;--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);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-navigation-action-gap);padding-inline-start:var(--sbb-navigation-marker-padding-inline-start)}.sbb-navigation-marker:before{content:"";position:absolute;opacity:0;inset-inline-start:var(--sbb-navigation-marker-position-x);inset-block-start:var(--sbb-navigation-marker-position-y);width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-storm);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x));transition-timing-function:ease;transition-property:opacity,inset-block-start}:host([data-has-active-action]) .sbb-navigation-marker:before{opacity:1}@media (forced-colors: active){.sbb-navigation-marker:before{border-color:CanvasText}}:host([size=s]) .sbb-navigation-marker{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}`;
+let O = (() => {
+  var o, n;
+  let i = [z("sbb-navigation-marker")], e, a = [], s, v = C(A), g, d = [], m = [];
+  return n = class extends v {
+    constructor() {
+      super();
+      k(this, o);
+      this.listChildLocalNames = [
+        "sbb-navigation-button",
+        "sbb-navigation-link"
+      ], l(this, o, c(this, d, S() ? "s" : "l")), this._currentActiveAction = c(this, m), this.addController(new y(this, {
+        skipInitial: !0,
+        callback: () => this._setMarkerPosition()
+      }));
+    }
+    /**
+     * Marker size variant, either s or l.
+     * @default 'l' / 's' (lean)
+     */
+    get size() {
+      return u(this, o);
+    }
+    set size(t) {
+      l(this, o, t);
+    }
+    willUpdate(t) {
+      super.willUpdate(t), (t.has("size") || t.has("listChildren")) && this._updateMarkerActions(), this.toggleAttribute("data-has-active-action", !!this._currentActiveAction);
+    }
+    _updateMarkerActions() {
+      for (const t of this.listChildren)
+        t.size = this.size;
+      this._currentActiveAction = this.listChildren.find((t) => t.hasAttribute("data-action-active")), this._setMarkerPosition();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._checkActiveAction();
+    }
+    _checkActiveAction() {
+      const t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+      t && this.select(t);
+    }
+    select(t) {
+      t && (this.reset(), t.toggleAttribute("data-action-active", !0), this._currentActiveAction = t, setTimeout(() => this._setMarkerPosition()));
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), setTimeout(() => this._setMarkerPosition());
+    }
+    reset() {
+      var t;
+      this._currentActiveAction && (this._currentActiveAction.removeAttribute("data-action-active"), (t = this._currentActiveAction.connectedSection) == null || t.close(), this._currentActiveAction = void 0);
+    }
+    _setMarkerPosition() {
+      var b, h;
+      if (!this._currentActiveAction)
+        return;
+      const t = this.listChildren.indexOf(this._currentActiveAction), r = (b = this.shadowRoot.querySelector(`li:nth-child(${t + 1})`)) == null ? void 0 : b.offsetTop;
+      r != null && ((h = this.style) == null || h.setProperty("--sbb-navigation-marker-position-y", `${r}px`));
+    }
+    render() {
+      return this.renderList();
+    }
+  }, o = new WeakMap(), s = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    g = [w({ reflect: !0 })], x(n, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, b) => {
+      r.size = b;
+    } }, metadata: t }, d, m), x(null, e = { value: s }, i, { kind: "class", name: s.name, metadata: t }, null, a), s = e.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = M, c(s, a), s;
+})();
+export {
+  O as SbbNavigationMarkerElement
+};

package/navigation/navigation-marker.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './navigation-marker/navigation-marker.js';
 //# sourceMappingURL=navigation-marker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../src/elements/navigation/navigation-marker.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}
+{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../src/elements/navigation/navigation-marker.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0CAA0C,CAAC"}

package/navigation/navigation-marker.js

@@ -1,82 +1,4 @@
-var p = (i) => {
-  throw TypeError(i);
-};
-var f = (i, e, a) => e.has(i) || p("Cannot " + a);
-var u = (i, e, a) => (f(i, e, "read from private field"), a ? a.call(i) : e.get(i)), k = (i, e, a) => e.has(i) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, a), l = (i, e, a, s) => (f(i, e, "write to private field"), s ? s.call(i, a) : e.set(i, a), a);
-import { __esDecorate as x, __runInitializers as c } from "tslib";
-import { ResizeController as y } from "@lit-labs/observers/resize-controller.js";
-import { css as _, LitElement as A } from "lit";
-import { customElement as z, property as w } from "lit/decorators.js";
-import { isLean as S } from "../core/dom.js";
-import { SbbNamedSlotListMixin as C } from "../core/mixins.js";
-const M = _`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);--sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);--sbb-navigation-marker-position-y: unset;--sbb-navigation-marker-width: 1.0625rem;--sbb-navigation-marker-border: var(--sbb-border-width-1x);--sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-titles);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);--sbb-navigation-marker-margin-block: calc( 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 );display:block}:host([size=s]){--sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width: .5rem;--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-body-text);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x: calc( var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x) );--sbb-navigation-marker-padding-inline-start: calc( var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x) )}.sbb-navigation-marker{list-style:none;padding:0;font-size:inherit;--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);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-navigation-action-gap);padding-inline-start:var(--sbb-navigation-marker-padding-inline-start)}.sbb-navigation-marker:before{content:"";position:absolute;opacity:0;inset-inline-start:var(--sbb-navigation-marker-position-x);inset-block-start:var(--sbb-navigation-marker-position-y);width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-storm);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x));transition-timing-function:ease;transition-property:opacity,inset-block-start}:host([data-has-active-action]) .sbb-navigation-marker:before{opacity:1}@media (forced-colors: active){.sbb-navigation-marker:before{border-color:CanvasText}}:host([size=s]) .sbb-navigation-marker{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}`;
-let O = (() => {
-  var o, n;
-  let i = [z("sbb-navigation-marker")], e, a = [], s, v = C(A), g, m = [], d = [];
-  return n = class extends v {
-    constructor() {
-      super();
-      k(this, o);
-      this.listChildLocalNames = [
-        "sbb-navigation-button",
-        "sbb-navigation-link"
-      ], l(this, o, c(this, m, S() ? "s" : "l")), this._currentActiveAction = c(this, d), new y(this, {
-        skipInitial: !0,
-        callback: () => this._setMarkerPosition()
-      });
-    }
-    /**
-     * Marker size variant, either s or l.
-     * @default 'l' / 's' (lean)
-     */
-    get size() {
-      return u(this, o);
-    }
-    set size(t) {
-      l(this, o, t);
-    }
-    willUpdate(t) {
-      super.willUpdate(t), (t.has("size") || t.has("listChildren")) && this._updateMarkerActions(), this.toggleAttribute("data-has-active-action", !!this._currentActiveAction);
-    }
-    _updateMarkerActions() {
-      for (const t of this.listChildren)
-        t.size = this.size;
-      this._currentActiveAction = this.listChildren.find((t) => t.hasAttribute("data-action-active")), this._setMarkerPosition();
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._checkActiveAction();
-    }
-    _checkActiveAction() {
-      const t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
-      t && this.select(t);
-    }
-    select(t) {
-      t && (this.reset(), t.toggleAttribute("data-action-active", !0), this._currentActiveAction = t, setTimeout(() => this._setMarkerPosition()));
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), setTimeout(() => this._setMarkerPosition());
-    }
-    reset() {
-      var t;
-      this._currentActiveAction && (this._currentActiveAction.removeAttribute("data-action-active"), (t = this._currentActiveAction.connectedSection) == null || t.close(), this._currentActiveAction = void 0);
-    }
-    _setMarkerPosition() {
-      var b, h;
-      if (!this._currentActiveAction)
-        return;
-      const t = this.listChildren.indexOf(this._currentActiveAction), r = (b = this.shadowRoot.querySelector(`li:nth-child(${t + 1})`)) == null ? void 0 : b.offsetTop;
-      r != null && ((h = this.style) == null || h.setProperty("--sbb-navigation-marker-position-y", `${r}px`));
-    }
-    render() {
-      return this.renderList();
-    }
-  }, o = new WeakMap(), s = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    g = [w({ reflect: !0 })], x(n, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, b) => {
-      r.size = b;
-    } }, metadata: t }, m, d), x(null, e = { value: s }, i, { kind: "class", name: s.name, metadata: t }, null, a), s = e.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = M, c(s, a), s;
-})();
+import { SbbNavigationMarkerElement as a } from "./navigation-marker/navigation-marker.js";
 export {
-  O as SbbNavigationMarkerElement
+  a as SbbNavigationMarkerElement
 };

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import { CSSResultGroup, LitElement, PropertyDeclaration, 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`.
@@ -13,11 +13,9 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
     accessor titleContent: string;
     /**
      * The element that will trigger the navigation section.
-     * Accepts both a string (id of an element) or an HTML element.
+     * Accepts both a string (id of an element) or an SbbNavigationButtonElement.
      */
-    set trigger(value: string | HTMLElement | null);
-    get trigger(): string | HTMLElement | null;
-    private _trigger;
+    accessor trigger: string | HTMLElement | null;
     /**
      * This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
      */
@@ -32,12 +30,13 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
     private set _state(value);
     private get _state();
     private _firstLevelNavigation?;
-    private _navigationSection;
-    private _navigationSectionContainerElement;
     private _triggerElement;
-    private _navigationSectionController;
+    private _triggerAbortController;
+    private _triggerIdReferenceController;
     private _windowEventsController;
     private _language;
+    private _focusTrapController;
+    private _lastKeydownEvent;
     constructor();
     /**
      * Opens the navigation section on trigger click.
@@ -46,27 +45,25 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
     private _isZeroAnimationDuration;
     private _handleOpening;
     private _handleClosing;
-    private _setActiveNavigationAction;
     private _closePreviousNavigationSection;
     /**
      * Closes the navigation section.
      */
     close(): void;
-    private _removeTriggerClickListener;
-    private _configure;
+    private _configureTrigger;
+    private _isNavigationButton;
     private _setNavigationInert;
     private _onAnimationEnd;
     private _resetLists;
     private _attachWindowEvents;
     private _handleNavigationSectionClose;
     private _isCloseElement;
-    private _isZeroToLargeBreakpoint;
+    private _isBelowLarge;
     private _onKeydownEvent;
-    private _setNavigationSectionFocus;
     private _checkActiveAction;
-    private _handleNavigationSectionFocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-section.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-section/navigation-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AA8B1F,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAMM,2BAA4B,SAAQ,gCAAmC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IACH,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C;;;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;IACH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;OAEG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD;;OAEG;IACH,OAAO,KAAK,MAAM,QAGjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,qBAAqB,CAAC,CAAqC;IACnE,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,kCAAkC,CAAe;IACzD,OAAO,CAAC,eAAe,CAA2C;IAClE,OAAO,CAAC,4BAA4B,CAAmB;IACvD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,SAAS,CAAmC;;IAOpD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,+BAA+B;IAIvC;;OAEG;IACI,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,6BAA6B,CAOnC;IAEF,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,0BAA0B;IAYlC,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,6BAA6B;IAoCrB,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;cAMzB,MAAM,IAAI,cAAc;CA0C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}
+{"version":3,"file":"navigation-section.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-section/navigation-section.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EAEV,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AA6Bb,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAKM,2BAA4B,SAAQ,gCAAmC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IACH,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C;;;OAGG;IACH,SACgB,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAE5D;;OAEG;IACH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;OAEG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD;;OAEG;IACH,OAAO,KAAK,MAAM,QAGjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,qBAAqB,CAAC,CAAqC;IACnE,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,6BAA6B,CAAiD;IACtF,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,iBAAiB,CAA8B;;IA0CvD;;OAEG;IACI,IAAI,IAAI,IAAI;IAsBnB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,+BAA+B;IAIvC;;OAEG;IACI,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,6BAA6B,CASnC;IAEF,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,kBAAkB;IAMV,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}

package/navigation/navigation-section/navigation-section.js

@@ -0,0 +1,233 @@
+var K = (a) => {
+  throw TypeError(a);
+};
+var R = (a, n, s) => n.has(a) || K("Cannot " + s);
+var _ = (a, n, s) => (R(a, n, "read from private field"), s ? s.call(a) : n.get(a)), m = (a, n, s) => n.has(a) ? K("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, s), l = (a, n, s, r) => (R(a, n, "write to private field"), r ? r.call(a, s) : n.set(a, s), s);
+import { __esDecorate as p, __runInitializers as b } from "tslib";
+import { css as $, LitElement as P, isServer as Z, nothing as q, html as H } from "lit";
+import { customElement as j, property as f } from "lit/decorators.js";
+import { SbbFocusTrapController as F, sbbInputModalityDetector as Q, IS_FOCUSABLE_QUERY as W } from "../../core/a11y.js";
+import { SbbIdReferenceController as G, SbbLanguageController as Y, SbbMediaMatcherController as J, SbbMediaQueryBreakpointMediumAndBelow as V } from "../../core/controllers.js";
+import { hostAttributes as X, forceType as k, omitEmptyConverter as tt } from "../../core/decorators.js";
+import { setOrRemoveAttribute as it, isZeroAnimationDuration as et, isBreakpoint as at } from "../../core/dom.js";
+import { i18nGoBack as nt } from "../../core/i18n.js";
+import { SbbUpdateSchedulerMixin as st } from "../../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as ot, setAriaOverlayTriggerAttributes as rt } from "../../core/overlay.js";
+import "../../button/transparent-button.js";
+import "../../divider.js";
+const lt = $`*,: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-duration, 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-translate: 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-duration, 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-translate: 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) );translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}@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}}.sbb-navigation-section__back{position:absolute;translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0}@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;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host([data-state=opened]) .sbb-navigation-section__content{opacity:1;translate:0 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%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0 0}}@keyframes close{0%{translate:0 0}to{translate:var(--sbb-navigation-section-translate) 0}}`;
+let bt = 0, Ct = (() => {
+  var c, g, d, h, o;
+  let a = [j("sbb-navigation-section"), X({
+    slot: "navigation-section"
+  })], n, s = [], r, E = st(P), C, x = [], L = [], A, S = [], z = [], B, N = [], I = [], T, U = [], M = [];
+  return o = class extends E {
+    constructor() {
+      var t, i;
+      super();
+      m(this, c);
+      m(this, g);
+      m(this, d);
+      m(this, h);
+      l(this, c, b(this, x, "")), l(this, g, (b(this, L), b(this, S, null))), l(this, d, (b(this, z), b(this, N, ""))), l(this, h, (b(this, I), b(this, U, ""))), this._firstLevelNavigation = (b(this, M), null), this._triggerElement = null, this._triggerIdReferenceController = new G(this, "trigger"), this._language = new Y(this), this._focusTrapController = new F(this), this._lastKeydownEvent = null, this._handleNavigationSectionClose = (e) => {
+        e.composedPath().filter((v) => v instanceof HTMLElement).some((v) => this._isCloseElement(v)) && this.close();
+      }, this.addController(new J(this, {
+        [V]: (e) => {
+          this._state !== "closed" && this._setNavigationInert(e);
+        }
+      })), (t = this.addEventListener) == null || t.call(this, "keydown", (e) => {
+        this._lastKeydownEvent = e;
+      }), (i = this.addEventListener) == null || i.call(this, "focusout", (e) => {
+        var v, O, D;
+        if (e.relatedTarget instanceof HTMLElement && !this.contains(e.relatedTarget) && Q.mostRecentModality === "keyboard" && ((v = this._lastKeydownEvent) == null ? void 0 : v.key) === "Tab" && this._triggerElement) {
+          const u = this.closest("sbb-navigation"), y = Array.from((u == null ? void 0 : u.querySelectorAll(W)) ?? []).filter((w) => !this.contains(w));
+          if (this._lastKeydownEvent.shiftKey || !y.length)
+            (O = this._triggerElement) == null || O.focus();
+          else {
+            const w = y.indexOf(this._triggerElement);
+            (D = y[w + 1] ?? u.closeButton) == null || D.focus();
+          }
+        }
+      });
+    }
+    /**
+     * The label to be shown before the action list.
+     */
+    get titleContent() {
+      return _(this, c);
+    }
+    set titleContent(t) {
+      l(this, c, t);
+    }
+    /**
+     * The element that will trigger the navigation section.
+     * Accepts both a string (id of an element) or an SbbNavigationButtonElement.
+     */
+    get trigger() {
+      return _(this, g);
+    }
+    set trigger(t) {
+      l(this, g, t);
+    }
+    /**
+     * This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
+     */
+    get accessibilityLabel() {
+      return _(this, d);
+    }
+    set accessibilityLabel(t) {
+      l(this, d, t);
+    }
+    /**
+     * This will be forwarded as aria-label to the back button element.
+     */
+    get accessibilityBackLabel() {
+      return _(this, h);
+    }
+    set accessibilityBackLabel(t) {
+      l(this, h, t);
+    }
+    /**
+     * The state of the navigation section.
+     */
+    set _state(t) {
+      this.setAttribute("data-state", t), it(this, "aria-hidden", this._state !== "opened" ? "true" : null);
+    }
+    get _state() {
+      return this.getAttribute("data-state");
+    }
+    /**
+     * Opens the navigation section on trigger click.
+     */
+    open() {
+      var t, i, e;
+      this._state !== "closed" || !this.hasUpdated || (this._isNavigationButton(this._triggerElement) && ((i = (t = this._triggerElement) == null ? void 0 : t.marker) == null || i.select(this._triggerElement)), this._closePreviousNavigationSection(), this._state = "opening", this.startUpdate(), this.inert = !0, (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
+    }
+    _isZeroAnimationDuration() {
+      return et(this, "--sbb-navigation-section-animation-duration");
+    }
+    _handleOpening() {
+      this._state = "opened", this.inert = !1, this._attachWindowEvents(), this._setNavigationInert(), this._focusTrapController.focusInitialElement(), this._checkActiveAction(), this.completeUpdate();
+    }
+    _handleClosing() {
+      var t, i, e;
+      this._state = "closed", (i = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".sbb-navigation-section__container")) == null || i.scrollTo(0, 0), (e = this._windowEventsController) == null || e.abort(), this._resetLists(), this._setNavigationInert(), this._isBelowLarge() && this._triggerElement && this._triggerElement.focus(), this.completeUpdate();
+    }
+    _closePreviousNavigationSection() {
+      var t, i;
+      (i = (t = this._firstLevelNavigation) == null ? void 0 : t.activeNavigationSection) == null || i.close();
+    }
+    /**
+     * Closes the navigation section.
+     */
+    close() {
+      var t;
+      this._state === "opened" && (this._state = "closing", this.startUpdate(), this.inert = !0, (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    // Check if the trigger is valid and attach click event listeners.
+    _configureTrigger() {
+      var i;
+      const t = this.trigger instanceof HTMLElement ? this.trigger : this._triggerIdReferenceController.find();
+      t !== this._triggerElement && ((i = this._triggerAbortController) == null || i.abort(), ot(this._triggerElement), this._triggerElement = t, this._triggerElement && (rt(this._triggerElement, "menu", this.id, this._state), this._triggerAbortController = new AbortController(), this._isNavigationButton(this._triggerElement) && (this._triggerElement.connectedSection = this), this._triggerElement.addEventListener("click", () => this.open(), {
+        signal: this._triggerAbortController.signal
+      })));
+    }
+    _isNavigationButton(t) {
+      return (t == null ? void 0 : t.localName) === "sbb-navigation-button";
+    }
+    _setNavigationInert(t = this._isBelowLarge()) {
+      var e;
+      const i = (e = this._firstLevelNavigation) == null ? void 0 : e.navigationContent;
+      i && (i.inert = t && this._state !== "closed");
+    }
+    // In rare cases it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    _onAnimationEnd(t) {
+      t.animationName === "open" && this._state === "opening" ? this._handleOpening() : t.animationName === "close" && this._state === "closing" && this._handleClosing();
+    }
+    _resetLists() {
+      Array.from(this.querySelectorAll("[data-section-action][data-action-active]") ?? []).forEach((t) => t.removeAttribute("data-action-active"));
+    }
+    _attachWindowEvents() {
+      this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
+        signal: this._windowEventsController.signal
+      }), window.addEventListener("click", this._handleNavigationSectionClose, {
+        signal: this._windowEventsController.signal
+      });
+    }
+    _isCloseElement(t) {
+      return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
+    }
+    _isBelowLarge() {
+      return at("zero", "large") ?? !1;
+    }
+    // Closes the navigation on "Esc" key pressed.
+    _onKeydownEvent(t) {
+      this._state === "opened" && t.key === "Escape" && this.close();
+    }
+    _checkActiveAction() {
+      var t;
+      (t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")) == null || t.toggleAttribute("data-action-active", !0);
+    }
+    connectedCallback() {
+      var t, i;
+      super.connectedCallback(), this.id || (this.id = `sbb-navigation-section-${bt++}`), this._state || (this._state = "closed"), this._configureTrigger(), this._firstLevelNavigation = (i = (t = this._triggerElement) == null ? void 0 : t.closest) == null ? void 0 : i.call(t, "sbb-navigation");
+    }
+    disconnectedCallback() {
+      var t, i;
+      super.disconnectedCallback(), this._triggerElement = null, (t = this._triggerAbortController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort();
+    }
+    requestUpdate(t, i, e) {
+      super.requestUpdate(t, i, e), !Z && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
+    }
+    render() {
+      return H`
+      <div class="sbb-navigation-section__container">
+        <nav
+          @animationend=${this._onAnimationEnd}
+          class="sbb-navigation-section"
+          aria-labelledby=${this.accessibilityLabel ? q : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : q}
+        >
+          <div class="sbb-navigation-section__wrapper">
+            <div class="sbb-navigation-section__content">
+              <div class="sbb-navigation-section__header">
+                <!-- Back button -->
+                <sbb-transparent-button
+                  id="sbb-navigation-section-back-button"
+                  class="sbb-navigation-section__back"
+                  aria-label=${this.accessibilityBackLabel || nt[this._language.current]}
+                  negative
+                  size="m"
+                  type="button"
+                  icon-name="chevron-small-left-small"
+                  sbb-navigation-section-close
+                ></sbb-transparent-button>
+
+                <span class="sbb-navigation-section__title" id="title">
+                  <slot name="title">${this.titleContent}</slot>
+                </span>
+              </div>
+              <slot></slot>
+            </div>
+          </div>
+        </nav>
+      </div>
+    `;
+    }
+  }, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), r = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
+    C = [k(), f({ attribute: "title-content", reflect: !0, converter: tt })], A = [f()], B = [k(), f({ attribute: "accessibility-label" })], T = [k(), f({ attribute: "accessibility-back-label" })], p(o, null, C, { 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 }, x, L), p(o, null, A, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, e) => {
+      i.trigger = e;
+    } }, metadata: t }, S, z), p(o, null, B, { 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 }, N, I), p(o, null, T, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, e) => {
+      i.accessibilityBackLabel = e;
+    } }, metadata: t }, U, M), p(null, n = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, s), r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = lt, b(r, s), r;
+})();
+export {
+  Ct as SbbNavigationSectionElement
+};

package/navigation/navigation-section.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './navigation-section/navigation-section.js';
 //# sourceMappingURL=navigation-section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-section.d.ts","sourceRoot":"","sources":["../../../src/elements/navigation/navigation-section.ts"],"names":[],"mappings":"AAAA,cAAc,4CAA4C,CAAC"}
+{"version":3,"file":"navigation-section.d.ts","sourceRoot":"","sources":["../../../src/elements/navigation/navigation-section.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4CAA4C,CAAC"}