@sbb-esta/lyne-elements 0.0.0 → 0.52.0

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

@@ -0,0 +1,17 @@
+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.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-navigation-link`.
+ */
+export declare class SbbNavigationLinkElement extends SbbNavigationLinkElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-navigation-link': SbbNavigationLinkElement;
+    }
+}
+export {};
+//# sourceMappingURL=navigation-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-link.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-link/navigation-link.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAGjE;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAE7C;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/navigation/navigation-link.d.ts

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

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

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

package/navigation/navigation-link.js

@@ -0,0 +1,18 @@
+import { customElement as l } from "lit/decorators.js";
+import { SbbLinkBaseElement as s } from "../core/base-elements.js";
+import { SbbNavigationActionCommonElementMixin as a } from "./common.js";
+var p = Object.defineProperty, v = Object.getOwnPropertyDescriptor, f = (m, n, o, t) => {
+  for (var e = t > 1 ? void 0 : t ? v(n, o) : n, r = m.length - 1, i; r >= 0; r--)
+    (i = m[r]) && (e = (t ? i(n, o, e) : i(e)) || e);
+  return t && e && p(n, o, e), e;
+};
+let b = class extends a(
+  s
+) {
+};
+b = f([
+  l("sbb-navigation-link")
+], b);
+export {
+  b as SbbNavigationLinkElement
+};

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

@@ -0,0 +1,30 @@
+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`.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-navigation-list`.
+ * @slot label - Use this to provide a label element.
+ */
+export declare class SbbNavigationListElement extends SbbNavigationListElement_base {
+    static styles: CSSResultGroup;
+    protected readonly listChildLocalNames: string[];
+    /**
+     * The label to be shown before the action list.
+     */
+    label?: string;
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-navigation-list': SbbNavigationListElement;
+    }
+}
+export {};
+//# sourceMappingURL=navigation-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-list.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-list/navigation-list.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;AAItE;;;;;GAKG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAG7C;IAEF;;OAEG;IACiC,KAAK,CAAC,EAAE,MAAM,CAAC;;cAOhC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/navigation/navigation-list.d.ts

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

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

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

package/navigation/navigation-list.js

@@ -0,0 +1,42 @@
+import { css as r, LitElement as p, html as f } from "lit";
+import { property as c, customElement as d } from "lit/decorators.js";
+import { SbbSlotStateController as g } from "../core/controllers.js";
+import { SbbNamedSlotListMixin as v } from "../core/mixins.js";
+const m = r`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-navigation-list__content{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-spacing-fixed-2x);margin-block:var(--sbb-spacing-fixed-1x)}.sbb-navigation-list__label{--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;display:block;color:var(--sbb-color-storm);padding-block-end:var(--sbb-spacing-fixed-2x)}:host(:not([data-slot-names~=label],[label])) .sbb-navigation-list__label{display:none}`;
+var x = Object.defineProperty, h = Object.getOwnPropertyDescriptor, b = (e, i, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? h(i, a) : i, n = e.length - 1, o; n >= 0; n--)
+    (o = e[n]) && (t = (s ? o(i, a, t) : o(t)) || t);
+  return s && t && x(i, a, t), t;
+};
+let l = class extends v(p) {
+  constructor() {
+    super(), this.listChildLocalNames = [
+      "sbb-navigation-button",
+      "sbb-navigation-link"
+    ], new g(this);
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("listChildren") && this.listChildren.forEach((i) => i.size = "m");
+  }
+  render() {
+    return f`
+      <span class="sbb-navigation-list__label" id="sbb-navigation-link-label-id">
+        <slot name="label">${this.label}</slot>
+      </span>
+      ${this.renderList({
+      class: "sbb-navigation-list__content",
+      ariaLabelledby: "sbb-navigation-link-label-id"
+    })}
+    `;
+  }
+};
+l.styles = m;
+b([
+  c({ reflect: !0 })
+], l.prototype, "label", 2);
+l = b([
+  d("sbb-navigation-list")
+], l);
+export {
+  l as SbbNavigationListElement
+};

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

@@ -0,0 +1,38 @@
+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`.
+ *
+ * @slot - Use the unnamed slot to add `sbb-navigation-button`/`sbb-navigation-link` elements into the `sbb-navigation-marker`.
+ */
+export declare class SbbNavigationMarkerElement extends SbbNavigationMarkerElement_base {
+    static styles: CSSResultGroup;
+    protected readonly listChildLocalNames: string[];
+    /**
+     * Marker size variant.
+     */
+    size?: 'l' | 's';
+    private _currentActiveAction?;
+    private _navigationMarkerResizeObserver;
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    private _updateMarkerActions;
+    connectedCallback(): void;
+    private _checkActiveAction;
+    disconnectedCallback(): void;
+    select(action: SbbNavigationButtonElement | SbbNavigationLinkElement): void;
+    protected firstUpdated(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    reset(): void;
+    private _setMarkerPosition;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-navigation-marker': SbbNavigationMarkerElement;
+    }
+}
+export {};
+//# sourceMappingURL=navigation-marker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-marker/navigation-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;AAItE;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,+BAGnC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAG7C;IAEF;;OAEG;IACiC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAElD,OAAO,CAAC,oBAAoB,CAAC,CAAwD;IAE9F,OAAO,CAAC,+BAA+B,CAErC;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAS9F,OAAO,CAAC,oBAAoB;IAWZ,iBAAiB,IAAI,IAAI;IAMzC,OAAO,CAAC,kBAAkB;IASV,oBAAoB,IAAI,IAAI;IAKrC,MAAM,CAAC,MAAM,EAAE,0BAA0B,GAAG,wBAAwB,GAAG,IAAI;cAU/D,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAKzF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,kBAAkB;cAcP,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/navigation/navigation-marker.d.ts

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

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

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

package/navigation/navigation-marker.js

@@ -0,0 +1,77 @@
+import { css as c, LitElement as l } from "lit";
+import { property as v, state as g, customElement as h } from "lit/decorators.js";
+import { SbbNamedSlotListMixin as d } from "../core/mixins.js";
+import { AgnosticResizeObserver as p } from "../core/observers.js";
+const m = c`*,: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;-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);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-zero-time, 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)}`;
+var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, b = (t, i, n, e) => {
+  for (var a = e > 1 ? void 0 : e ? k(i, n) : i, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (a = (e ? o(i, n, a) : o(a)) || a);
+  return e && a && f(i, n, a), a;
+};
+let r = class extends d(l) {
+  constructor() {
+    super(...arguments), this.listChildLocalNames = [
+      "sbb-navigation-button",
+      "sbb-navigation-link"
+    ], this.size = "l", this._navigationMarkerResizeObserver = new p(
+      () => this._setMarkerPosition()
+    );
+  }
+  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._navigationMarkerResizeObserver.observe(this), this._checkActiveAction();
+  }
+  _checkActiveAction() {
+    const t = this.querySelector(
+      ":is(sbb-navigation-button, sbb-navigation-link).sbb-active"
+    );
+    t && this.select(t);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._navigationMarkerResizeObserver.disconnect();
+  }
+  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 n, e;
+    if (!this._currentActiveAction)
+      return;
+    const t = this.listChildren.indexOf(this._currentActiveAction), i = (n = this.shadowRoot.querySelector(
+      `li:nth-child(${t + 1})`
+    )) == null ? void 0 : n.offsetTop;
+    i != null && ((e = this.style) == null || e.setProperty("--sbb-navigation-marker-position-y", `${i}px`));
+  }
+  render() {
+    return this.renderList();
+  }
+};
+r.styles = m;
+b([
+  v({ reflect: !0 })
+], r.prototype, "size", 2);
+b([
+  g()
+], r.prototype, "_currentActiveAction", 2);
+r = b([
+  h("sbb-navigation-marker")
+], r);
+export {
+  r as SbbNavigationMarkerElement
+};

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

@@ -0,0 +1,76 @@
+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`.
+ *
+ * @slot - Use the unnamed slot to add content into the `sbb-navigation-section`.
+ */
+export declare class SbbNavigationSectionElement extends SbbNavigationSectionElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The label to be shown before the action list.
+     */
+    titleContent?: string;
+    /**
+     * The element that will trigger the navigation section.
+     * Accepts both a string (id of an element) or an HTML element.
+     */
+    set trigger(value: string | HTMLElement | null);
+    get trigger(): string | HTMLElement | null;
+    private _trigger;
+    /**
+     * This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
+     */
+    accessibilityLabel: string | undefined;
+    /**
+     * This will be forwarded as aria-label to the back button element.
+     */
+    accessibilityBackLabel: string | undefined;
+    /**
+     * The state of the navigation section.
+     */
+    private set _state(value);
+    private get _state();
+    private _firstLevelNavigation?;
+    private _navigationSection;
+    private _navigationSectionContainerElement;
+    private _triggerElement;
+    private _navigationSectionController;
+    private _windowEventsController;
+    private _language;
+    constructor();
+    /**
+     * Opens the navigation section on trigger click.
+     */
+    open(): void;
+    private _setActiveNavigationAction;
+    private _closePreviousNavigationSection;
+    /**
+     * Closes the navigation section.
+     */
+    close(): void;
+    private _removeTriggerClickListener;
+    private _configure;
+    private _setNavigationInert;
+    private _onAnimationEnd;
+    private _resetLists;
+    private _attachWindowEvents;
+    private _handleNavigationSectionClose;
+    private _isCloseElement;
+    private _isZeroToLargeBreakpoint;
+    private _onKeydownEvent;
+    private _setNavigationSectionFocus;
+    private _checkActiveAction;
+    private _handleNavigationSectionFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-navigation-section': SbbNavigationSectionElement;
+    }
+}
+export {};
+//# sourceMappingURL=navigation-section.d.ts.map

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

@@ -0,0 +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;AAyB1F,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAIa,2BAA4B,SAAQ,gCAAmC;IAClF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IAC6D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF;;;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;IACoD,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F;;OAEG;IACyD,sBAAsB,EAC9E,MAAM,GACN,SAAS,CAAC;IAEd;;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;IAanB,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,+BAA+B;IAIvC;;OAEG;IACI,KAAK,IAAI,IAAI;IAYpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,eAAe;IAsBvB,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"}

package/navigation/navigation-section.d.ts

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

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

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

package/navigation/navigation-section.js

@@ -0,0 +1,205 @@
+import { css as _, LitElement as u, html as f, nothing as v } from "lit";
+import { property as l, customElement as w } from "lit/decorators.js";
+import { ref as d } from "lit/directives/ref.js";
+import { setModalityOnNextFocus as h, getFirstFocusableElement as y, getFocusableElements as m } from "../core/a11y.js";
+import { SbbLanguageController as k, SbbSlotStateController as E } from "../core/controllers.js";
+import { hostAttributes as x } from "../core/decorators.js";
+import { setOrRemoveAttribute as C, findReferencedElement as A, isBreakpoint as S } from "../core/dom.js";
+import { i18nGoBack as N } from "../core/i18n.js";
+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)}}`;
+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);
+  return a && e && B(i, n, e), e;
+};
+let P = 0, o = class extends L(u) {
+  constructor() {
+    super(), this._trigger = null, this._firstLevelNavigation = null, this._triggerElement = null, this._language = new k(this), this._handleNavigationSectionClose = (t) => {
+      t.composedPath().filter((n) => n instanceof window.HTMLElement).some((n) => this._isCloseElement(n)) && this.close();
+    }, new E(this);
+  }
+  set trigger(t) {
+    const i = this._trigger;
+    this._trigger = t, this._removeTriggerClickListener(this._trigger, i);
+  }
+  get trigger() {
+    return this._trigger;
+  }
+  /**
+   * The state of the navigation section.
+   */
+  set _state(t) {
+    this.setAttribute("data-state", t), C(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;
+    this._state !== "closed" || !this._navigationSection || (this._setActiveNavigationAction(), this._closePreviousNavigationSection(), this._state = "opening", this.startUpdate(), this.inert = !0, (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"));
+  }
+  _setActiveNavigationAction() {
+    var t, i;
+    (i = (t = this._triggerElement) == null ? void 0 : t.marker) == null || i.select(this._triggerElement);
+  }
+  _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"));
+  }
+  // Removes trigger click listener on trigger change.
+  _removeTriggerClickListener(t, i) {
+    var n, a;
+    t !== i && ((n = this._navigationSectionController) == null || n.abort(), (a = this._windowEventsController) == null || a.abort(), this._configure(this.trigger));
+  }
+  // Check if the trigger is valid and attach click event listeners.
+  _configure(t) {
+    var i;
+    z(this._triggerElement), t && (this._triggerElement = A(t), this._triggerElement && (T(this._triggerElement, "menu", this.id, this._state), (i = this._navigationSectionController) == null || i.abort(), this._navigationSectionController = new AbortController(), this._triggerElement.connectedSection = this, this._triggerElement.addEventListener("click", () => this.open(), {
+      signal: this._navigationSectionController.signal
+    }), this.addEventListener("keydown", (n) => this._handleNavigationSectionFocus(n), {
+      signal: this._navigationSectionController.signal
+    })));
+  }
+  _setNavigationInert() {
+    this._firstLevelNavigation && (this._firstLevelNavigation.shadowRoot.querySelector(
+      ".sbb-navigation__content"
+    ).inert = this._isZeroToLargeBreakpoint() && 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) {
+    var i;
+    t.animationName === "open" && this._state === "opening" ? (this._state = "opened", this.inert = !1, this._attachWindowEvents(), this._setNavigationInert(), this._setNavigationSectionFocus(), this._checkActiveAction()) : t.animationName === "close" && this._state === "closing" && (this._state = "closed", this._navigationSectionContainerElement.scrollTo(0, 0), (i = this._windowEventsController) == null || i.abort(), this._resetLists(), this._setNavigationInert(), this._isZeroToLargeBreakpoint() && this._triggerElement && (h(this._triggerElement), this._triggerElement.focus())), this.completeUpdate();
+  }
+  _resetLists() {
+    const t = Array.from(
+      this.querySelectorAll("[data-section-action][data-action-active]")
+    );
+    t == null || t.forEach((i) => i.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"));
+  }
+  _isZeroToLargeBreakpoint() {
+    return S("zero", "large");
+  }
+  // Closes the navigation on "Esc" key pressed.
+  _onKeydownEvent(t) {
+    this._state === "opened" && t.key === "Escape" && this.close();
+  }
+  // Set focus on the first focusable element.
+  _setNavigationSectionFocus() {
+    const t = y(
+      [this.shadowRoot.querySelector("#sbb-navigation-section-back-button")].concat(Array.from(this.children)).filter((i) => i instanceof window.HTMLElement)
+    );
+    t && (h(t), t.focus());
+  }
+  _checkActiveAction() {
+    var t;
+    (t = this.querySelector(
+      ":is(sbb-navigation-button, sbb-navigation-link).sbb-active"
+    )) == null || t.toggleAttribute("data-action-active", !0);
+  }
+  _handleNavigationSectionFocus(t) {
+    if (t.key !== "Tab" || this._isZeroToLargeBreakpoint())
+      return;
+    const i = Array.from(
+      this.closest("sbb-navigation").shadowRoot.children
+    ), n = m(i, {
+      filter: (p) => p.nodeName !== "SBB-NAVIGATION-SECTION"
+    }), a = Array.from(this.shadowRoot.children), e = m(a), s = e[0], r = e[e.length - 1], c = t.shiftKey ? this._triggerElement : n[n.indexOf(this._triggerElement) + 1], g = t.shiftKey ? s : r;
+    c && (s.getRootNode().activeElement === g || r.getRootNode().activeElement === g) && (c.focus(), t.preventDefault());
+  }
+  connectedCallback() {
+    var t, i;
+    super.connectedCallback(), this.id || (this.id = `sbb-navigation-section-${P++}`), this._state || (this._state = "closed"), this._configure(this.trigger), 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(), (t = this._navigationSectionController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort();
+  }
+  render() {
+    return f`
+      <div
+        class="sbb-navigation-section__container"
+        ${d((t) => this._navigationSectionContainerElement = t)}
+      >
+        <nav
+          @animationend=${(t) => this._onAnimationEnd(t)}
+          class="sbb-navigation-section"
+          aria-labelledby=${this.accessibilityLabel ? v : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : v}
+          ${d(
+      (t) => this._navigationSection = t
+    )}
+        >
+          <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 || N[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>
+    `;
+  }
+};
+o.styles = F;
+b([
+  l({ attribute: "title-content", reflect: !0 })
+], o.prototype, "titleContent", 2);
+b([
+  l()
+], o.prototype, "trigger", 1);
+b([
+  l({ attribute: "accessibility-label" })
+], o.prototype, "accessibilityLabel", 2);
+b([
+  l({ attribute: "accessibility-back-label" })
+], o.prototype, "accessibilityBackLabel", 2);
+o = b([
+  w("sbb-navigation-section"),
+  x({
+    slot: "navigation-section"
+  })
+], o);
+export {
+  o as SbbNavigationSectionElement
+};

package/navigation/navigation.d.ts

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

package/navigation/navigation.d.ts.map

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