@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/menu/menu-button/menu-button.d.ts

@@ -0,0 +1,20 @@
+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.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-menu-button`.
+ * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a `sbb-icon` will be used.
+ * @cssprop [--sbb-menu-action-outer-horizontal-padding=var(--sbb-spacing-fixed-3x)] - Can be used
+ * to modify horizontal padding.
+ */
+export declare class SbbMenuButtonElement extends SbbMenuButtonElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-menu-button': SbbMenuButtonElement;
+    }
+}
+export {};
+//# sourceMappingURL=menu-button.d.ts.map

package/menu/menu-button/menu-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu-button/menu-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAInE;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,yBAEzC;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/menu/menu-button.d.ts

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

package/menu/menu-button.d.ts.map

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

package/menu/menu-button.js

@@ -0,0 +1,19 @@
+import { customElement as s } from "lit/decorators.js";
+import { SbbButtonBaseElement as l } from "../core/base-elements.js";
+import { SbbDisabledTabIndexActionMixin as p } from "../core/mixins.js";
+import { SbbMenuActionCommonElementMixin as f } from "./common.js";
+var u = Object.defineProperty, c = Object.getOwnPropertyDescriptor, v = (b, t, o, n) => {
+  for (var e = n > 1 ? void 0 : n ? c(t, o) : t, r = b.length - 1, m; r >= 0; r--)
+    (m = b[r]) && (e = (n ? m(t, o, e) : m(e)) || e);
+  return n && e && u(t, o, e), e;
+};
+let i = class extends p(
+  f(l)
+) {
+};
+i = v([
+  s("sbb-menu-button")
+], i);
+export {
+  i as SbbMenuButtonElement
+};

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

@@ -0,0 +1,20 @@
+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.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-menu-link`.
+ * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a `sbb-icon` will be used.
+ * @cssprop [--sbb-menu-action-outer-horizontal-padding=var(--sbb-spacing-fixed-3x)] - Can be used
+ * to modify horizontal padding.
+ */
+export declare class SbbMenuLinkElement extends SbbMenuLinkElement_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-menu-link': SbbMenuLinkElement;
+    }
+}
+export {};
+//# sourceMappingURL=menu-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu-link/menu-link.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAGjE;;;;;;;GAOG;AACH,qBACa,kBAAmB,SAAQ,uBAAmD;CAAG;AAE9F,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/menu/menu-link.d.ts

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

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

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

package/menu/menu-link.js

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

package/menu/menu.d.ts

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

package/menu/menu.d.ts.map

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

package/menu/menu.js

@@ -0,0 +1,194 @@
+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) => {
+  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;
+};
+const I = 8, K = [
+  "A",
+  "BUTTON",
+  "SBB-BUTTON",
+  "SBB-BUTTON-LINK",
+  "SBB-LINK",
+  "SBB-BLOCK-LINK",
+  "SBB-LINK-BUTTON",
+  "SBB-BLOCK-LINK-BUTTON"
+];
+let D = 0, r = class extends N(k) {
+  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) => {
+      this._isPointerDownEventOnMenu = h(this._menu, e);
+    }, this._closeOnBackdropClick = (e) => {
+      !this._isPointerDownEventOnMenu && !h(this._menu, e) && this.close();
+    };
+  }
+  set trigger(e) {
+    const t = this._trigger;
+    this._trigger = e, this._removeTriggerClickListener(this._trigger, t);
+  }
+  get trigger() {
+    return this._trigger;
+  }
+  /**
+   * Opens the menu on trigger click.
+   */
+  open() {
+    var e;
+    this.state === "closing" || !this._menu || this.willOpen.emit() && (this.state = "opening", this._setMenuPosition(), (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), d("medium") || this._scrollHandler.disableScroll());
+  }
+  /**
+   * Closes the menu.
+   */
+  close() {
+    var e;
+    this.state !== "opening" && this.willClose.emit() && (this.state = "closing", (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "false"));
+  }
+  /**
+   * Handles click and checks if its target is a sbb-menu-button/sbb-menu-link.
+   */
+  _onClick(e) {
+    const t = e.target;
+    ((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))
+      return;
+    e.preventDefault();
+    const t = Array.from(
+      this.querySelectorAll(
+        "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);
+    t[s].focus();
+  }
+  // Closes the menu on "Esc" key pressed and traps focus within the menu.
+  async _onKeydownEvent(e) {
+    if (this.state === "opened" && e.key === "Escape") {
+      this.close();
+      return;
+    }
+  }
+  // Removes trigger click listener on trigger change.
+  _removeTriggerClickListener(e, t) {
+    var n, s;
+    e !== t && ((n = this._menuController) == null || n.abort(), (s = this._windowEventsController) == null || s.abort(), this._configure(this.trigger));
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback();
+    const e = this._abort.signal;
+    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);
+  }
+  disconnectedCallback() {
+    var e, t;
+    super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), u();
+  }
+  _checkListCase(e) {
+    var t;
+    (t = this.children) != null && t.length && Array.from(this.children ?? []).every(
+      (n) => n.localName === "sbb-menu-button" || n.localName === "sbb-menu-link"
+    ) || (e.stopImmediatePropagation(), this.listChildren.length && (this.listChildren.forEach((n) => n.removeAttribute("slot")), this.listChildren = []));
+  }
+  // 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-${D++}`, B(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
+    })));
+  }
+  _attachWindowEvents() {
+    this._windowEventsController = new AbortController(), document.addEventListener("scroll", () => this._setMenuPosition(), {
+      passive: !0,
+      signal: this._windowEventsController.signal
+    }), window.addEventListener("resize", () => this._setMenuPosition(), {
+      passive: !0,
+      signal: this._windowEventsController.signal
+    }), window.addEventListener("keydown", (e) => this._onKeydownEvent(e), {
+      signal: this._windowEventsController.signal
+    }), window.addEventListener("pointerdown", this._pointerDownListener, {
+      signal: this._windowEventsController.signal
+    }), window.addEventListener("pointerup", this._closeOnBackdropClick, {
+      signal: this._windowEventsController.signal
+    });
+  }
+  // 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();
+  }
+  // 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.
+  // 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.
+  _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({
+      // 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);
+    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(
+      this.shadowRoot.querySelector(".sbb-menu__content"),
+      this._triggerElement,
+      this.shadowRoot.querySelector(".sbb-menu__container"),
+      {
+        verticalOffset: I
+      }
+    );
+    this.style.setProperty("--sbb-menu-position-x", `${e.left}px`), this.style.setProperty("--sbb-menu-position-y", `${e.top}px`), this.style.setProperty("--sbb-menu-max-height", e.maxHeight);
+  }
+  render() {
+    return l`
+      <div class="sbb-menu__container">
+        <div
+          @animationend=${(e) => this._onMenuAnimationEnd(e)}
+          class="sbb-menu"
+          ${_((e) => this._menu = e)}
+        >
+          <div
+            @click=${(e) => this._closeOnInteractiveElementClick(e)}
+            class="sbb-menu__content"
+          >
+            ${this.listChildren.length ? this.renderList({ class: "sbb-menu-list", ariaLabel: this.listAccessibilityLabel }) : l`<slot></slot>`}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = T;
+b([
+  g()
+], r.prototype, "trigger", 1);
+b([
+  g({ attribute: "list-accessibility-label" })
+], r.prototype, "listAccessibilityLabel", 2);
+r = b([
+  p("sbb-menu")
+], r);
+export {
+  r as SbbMenuElement
+};

package/menu.d.ts

@@ -0,0 +1,5 @@
+export * from './menu/menu.js';
+export * from './menu/menu-button.js';
+export * from './menu/menu-link.js';
+export * from './menu/common.js';
+//# sourceMappingURL=menu.d.ts.map

package/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/elements/menu.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}

package/menu.js

@@ -0,0 +1,4 @@
+export * from "./menu/menu.js";
+export * from "./menu/menu-button.js";
+export * from "./menu/menu-link.js";
+export * from "./menu/common.js";

package/message/message.d.ts

@@ -0,0 +1,26 @@
+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.
+ *
+ * @slot image - Use this slot to provide a sbb-image component.
+ * @slot title - Use this slot to provide title text for the component.
+ * @slot subtitle - Use this slot to provide a subtitle, must be a paragraph.
+ * @slot legend - Use this slot to provide a legend, must be a paragraph.
+ * @slot action - Use this slot to provide a sbb-button.
+ */
+export declare class SbbMessageElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Content of title. */
+    titleContent?: string;
+    /** Level of title, it will be rendered as heading tag (e.g., h3). Defaults to level 3. */
+    titleLevel: SbbTitleLevel;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-message': SbbMessageElement;
+    }
+}
+//# sourceMappingURL=message.d.ts.map

package/message/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/elements/message/message.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,CAAC;AAIrB;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,0FAA0F;IAC3C,UAAU,EAAE,aAAa,CAAO;cAE5D,MAAM,IAAI,cAAc;CAa5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/message.d.ts

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

package/message.d.ts.map

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

package/message.js

@@ -0,0 +1,40 @@
+import { css as g, LitElement as m, html as c } from "lit";
+import { property as n, customElement as v } from "lit/decorators.js";
+import "./title.js";
+const p = g`*,:before,:after{box-sizing:border-box}:host{--sbb-message-subtitle-color: var(--sbb-color-granite);--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;display:block}.sbb-message__container{text-align:center}.sbb-message__title{margin:0}::slotted([slot=title]){margin:0}::slotted([slot=image]){margin-block:var(--sbb-message-image-margin-block);width:100%}::slotted([slot=subtitle]){--sbb-text-font-size: var(--sbb-font-size-text-s);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);color:var(--sbb-message-subtitle-color);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding:0;color:var(--sbb-color-granite);margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`;
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (r, s, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? x(s, l) : s, b = r.length - 1, i; b >= 0; b--)
+    (i = r[b]) && (t = (o ? i(s, l, t) : i(t)) || t);
+  return o && t && f(s, l, t), t;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.titleLevel = "3";
+  }
+  render() {
+    return c`
+      <div class="sbb-message__container">
+        <slot name="image"></slot>
+        <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-message__title">
+          <slot name="title">${this.titleContent}</slot>
+        </sbb-title>
+        <slot name="subtitle"></slot>
+        <slot name="legend"></slot>
+        <slot name="action"></slot>
+      </div>
+    `;
+  }
+};
+e.styles = p;
+a([
+  n({ attribute: "title-content" })
+], e.prototype, "titleContent", 2);
+a([
+  n({ attribute: "title-level" })
+], e.prototype, "titleLevel", 2);
+e = a([
+  v("sbb-message")
+], e);
+export {
+  e as SbbMessageElement
+};

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

@@ -0,0 +1,14 @@
+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;
+    get marker(): SbbNavigationMarkerElement | null;
+    get section(): SbbNavigationSectionElement | null;
+    connectedSection: SbbNavigationSectionElement | null;
+}
+export declare const SbbNavigationActionCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbNavigationActionCommonElementMixinType> & T;
+//# sourceMappingURL=navigation-action-common.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/common/navigation-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAI5E,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,yCAAyC;IACrD,IAAI,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAW,MAAM,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACvD,IAAW,OAAO,IAAI,2BAA2B,GAAG,IAAI,CAAC;IAClD,gBAAgB,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAC7D;AAGD,eAAO,MAAM,qCAAqC,oEAGpC,CAAC,KACZ,oBAAoB,yCAAyC,CAAC,GAAG,CA4DnE,CAAC"}

package/navigation/common.d.ts

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

package/navigation/common.d.ts.map

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

package/navigation/common.js

@@ -0,0 +1,51 @@
+import { property as e } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
+import { SbbConnectedAbortController as r } from "../core/controllers.js";
+import { css as l } from "lit";
+import "../icon.js";
+const c = l`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-color: var(--sbb-color-cloud);--sbb-navigation-action-icon-display: none;display:block;outline:none!important}:host([data-section-action][data-action-active].sbb-active){--sbb-navigation-action-icon-display: block}:host([data-action-active]){--sbb-navigation-action-color: var(--sbb-color-storm)}@media (forced-colors: active){:host([data-action-active]){--sbb-navigation-action-color: Highlight}}sbb-icon{display:var(--sbb-navigation-action-icon-display);position:absolute;inset-inline-start:calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2);transform:translateY(-50%)}@media (any-hover: hover){:host(:hover){--sbb-navigation-action-color: var(--sbb-color-storm)}}@media (forced-colors: active){:host([role=button]){--sbb-navigation-action-color: ButtonText}}:is(.sbb-navigation-button,.sbb-navigation-link){--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);cursor:pointer;position:relative;text-decoration:none;display:flex;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease;-webkit-hyphens:auto;hyphens:auto;text-align:left;color:var(--sbb-navigation-action-color);outline:none}@media (forced-colors: active){:is(.sbb-navigation-button,.sbb-navigation-link){transition:none}}:host([size=m]) :is(.sbb-navigation-button,.sbb-navigation-link){--sbb-text-font-size: var(--sbb-font-size-text-s);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}:host([size=s]) :is(.sbb-navigation-button,.sbb-navigation-link){--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}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-navigation-button,.sbb-navigation-link),:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
+var v = Object.defineProperty, g = (a, i, o, h) => {
+  for (var t = void 0, n = a.length - 1, s; n >= 0; n--)
+    (s = a[n]) && (t = s(i, o, t) || t);
+  return t && v(i, o, t), t;
+};
+const y = (a) => {
+  const o = class o extends a {
+    constructor() {
+      super(...arguments), this.size = "l", this._abort = new r(this), this._navigationMarker = null, this._navigationSection = null;
+    }
+    /** The navigation marker in which the action is nested. */
+    get marker() {
+      return this._navigationMarker;
+    }
+    /** The section in which the action is nested. */
+    get section() {
+      return this._navigationSection;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const t = this._abort.signal;
+      this.addEventListener(
+        "click",
+        () => {
+          var n;
+          !this.hasAttribute("data-action-active") && this._navigationMarker && !this.connectedSection && ((n = this.marker) == null || n.select(
+            this
+          ));
+        },
+        { signal: t }
+      ), this._navigationMarker = this.closest("sbb-navigation-marker"), this._navigationSection = this.closest("sbb-navigation-section"), this.toggleAttribute("data-section-action", !!this._navigationSection);
+    }
+    renderTemplate() {
+      return b`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`;
+    }
+  };
+  o.styles = c;
+  let i = o;
+  return g([
+    e({ reflect: !0 })
+  ], i.prototype, "size"), i;
+};
+export {
+  y as SbbNavigationActionCommonElementMixin
+};

package/navigation/navigation/navigation.d.ts

@@ -0,0 +1,82 @@
+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.
+ *
+ * @slot - Use the unnamed slot to add `sbb-navigation-button`/`sbb-navigation-link` elements into the sbb-navigation menu.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-navigation` begins the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-navigation` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-navigation` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-navigation` is closed.
+ * @cssprop [--sbb-navigation-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbNavigationElement extends SbbNavigationElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The element that will trigger the navigation.
+     * 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 close button element.
+     */
+    accessibilityCloseLabel: string | undefined;
+    /**
+     * Whether a navigation section is displayed.
+     */
+    private _activeNavigationSection;
+    get activeNavigationSection(): HTMLElement | null;
+    private _navigation;
+    private _navigationContentElement;
+    private _triggerElement;
+    private _navigationController;
+    private _windowEventsController;
+    private _abort;
+    private _language;
+    private _focusHandler;
+    private _scrollHandler;
+    private _isPointerDownEventOnNavigation;
+    private _resizeObserverTimeout;
+    private _navigationObserver;
+    private _navigationResizeObserver;
+    /**
+     * Opens the navigation.
+     */
+    open(): void;
+    private _checkActiveSection;
+    private _checkActiveActions;
+    /**
+     * Closes the navigation.
+     */
+    close(): void;
+    private _removeTriggerClickListener;
+    private _configure;
+    private _trapFocusFilter;
+    private _onAnimationEnd;
+    private _resetMarkers;
+    private _attachWindowEvents;
+    private _handleNavigationClose;
+    private _isCloseElement;
+    private _onKeydownEvent;
+    private _setNavigationFocus;
+    private _pointerDownListener;
+    private _closeOnBackdropClick;
+    private _onNavigationSectionChange;
+    private _onNavigationResize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-navigation': SbbNavigationElement;
+    }
+}
+export {};
+//# sourceMappingURL=navigation.d.ts.map

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

@@ -0,0 +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;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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-button/navigation-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,+BAE/C;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/navigation/navigation-button.d.ts

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

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

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

package/navigation/navigation-button.js

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