@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/menu/menu.js

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

package/message/message.d.ts

@@ -12,9 +12,9 @@ import { SbbTitleLevel } from '../title.js';
 export declare class SbbMessageElement extends LitElement {
     static styles: CSSResultGroup;
     /** Content of title. */
-    titleContent?: string;
+    accessor titleContent: string;
     /** Level of title, it will be rendered as heading tag (e.g., h3). Defaults to level 3. */
-    titleLevel: SbbTitleLevel;
+    accessor titleLevel: SbbTitleLevel;
     protected render(): TemplateResult;
 }
 declare global {

package/message/message.d.ts.map

@@ -1 +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"}
+{"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;AAIvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,CAAC;AAIrB;;;;;;;;GAQG;AACH,qBAEM,iBAAkB,SAAQ,UAAU;IACxC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,0FAA0F;IAC1F,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,MAAM,IAAI,cAAc;CAa5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/message.js

@@ -1,18 +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;
+var z = (t) => {
+  throw TypeError(t);
 };
-let e = class extends m {
-  constructor() {
-    super(...arguments), this.titleLevel = "3";
-  }
-  render() {
-    return c`
+var k = (t, e, s) => e.has(t) || z("Cannot " + s);
+var m = (t, e, s) => (k(t, e, "read from private field"), s ? s.call(t) : e.get(t)), g = (t, e, s) => e.has(t) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), v = (t, e, s, i) => (k(t, e, "write to private field"), i ? i.call(t, s) : e.set(t, s), s);
+import { __esDecorate as d, __runInitializers as b } from "tslib";
+import { css as C, html as S, LitElement as w } from "lit";
+import { customElement as E, property as L } from "lit/decorators.js";
+import { forceType as I } from "./core/decorators.js";
+import "./title.js";
+const D = C`*,: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)}`;
+let A = (() => {
+  var n, r, a;
+  let t = [E("sbb-message")], e, s = [], i, f = w, p, _ = [], u = [], h, x = [], y = [];
+  return a = class extends f {
+    constructor() {
+      super(...arguments);
+      g(this, n, b(this, _, ""));
+      g(this, r, (b(this, u), b(this, x, "3")));
+      b(this, y);
+    }
+    /** Content of title. */
+    get titleContent() {
+      return m(this, n);
+    }
+    set titleContent(o) {
+      v(this, n, o);
+    }
+    /** Level of title, it will be rendered as heading tag (e.g., h3). Defaults to level 3. */
+    get titleLevel() {
+      return m(this, r);
+    }
+    set titleLevel(o) {
+      v(this, r, o);
+    }
+    render() {
+      return S`
       <div class="sbb-message__container">
         <slot name="image"></slot>
         <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-message__title">
@@ -23,18 +45,16 @@ let e = class extends m {
         <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);
+    }
+  }, n = new WeakMap(), r = new WeakMap(), i = a, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    p = [I(), L({ attribute: "title-content" })], h = [L({ attribute: "title-level" })], d(a, null, p, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (l) => "titleContent" in l, get: (l) => l.titleContent, set: (l, c) => {
+      l.titleContent = c;
+    } }, metadata: o }, _, u), d(a, null, h, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (l) => "titleLevel" in l, get: (l) => l.titleLevel, set: (l, c) => {
+      l.titleLevel = c;
+    } }, metadata: o }, x, y), d(null, e = { value: i }, t, { kind: "class", name: i.name, metadata: o }, null, s), i = e.value, o && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), a.styles = D, b(i, s), i;
+})();
 export {
-  e as SbbMessageElement
+  A as SbbMessageElement
 };

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

@@ -4,7 +4,7 @@ import { SbbNavigationMarkerElement } from '../navigation-marker.js';
 import { SbbNavigationSectionElement } from '../navigation-section.js';
 export type SbbNavigationActionSize = 's' | 'm' | 'l';
 export declare class SbbNavigationActionCommonElementMixinType {
-    size?: SbbNavigationActionSize;
+    accessor size: SbbNavigationActionSize;
     get marker(): SbbNavigationMarkerElement | null;
     get section(): SbbNavigationSectionElement | null;
     connectedSection: SbbNavigationSectionElement | null;

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

@@ -1 +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,GAChD,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,yCAAyC,CAAC,GAAG,CA4DnE,CAAC"}
+{"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;IAC5D,SAAgB,IAAI,EAAE,uBAAuB,CAAC;IAC9C,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,GAChD,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,yCAAyC,CAAC,GAAG,CA4DnE,CAAC"}

package/navigation/common.js

@@ -1,18 +1,29 @@
-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;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;
+var v = (t) => {
+  throw TypeError(t);
 };
-const y = (a) => {
-  const o = class o extends a {
+var g = (t, i, o) => i.has(t) || v("Cannot " + o);
+var h = (t, i, o) => (g(t, i, "read from private field"), o ? o.call(t) : i.get(t)), f = (t, i, o) => i.has(t) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, o), b = (t, i, o, r) => (g(t, i, "write to private field"), r ? r.call(t, o) : i.set(t, o), o);
+import { __runInitializers as u, __esDecorate as m } from "tslib";
+import { property as p } from "lit/decorators.js";
+import { html as y } from "lit/static-html.js";
+import { SbbConnectedAbortController as z } from "../core/controllers.js";
+import { css as k } from "lit";
+import "../icon.js";
+const x = k`*,: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;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))}`, I = (t) => (() => {
+  var s, e;
+  let o = t, r, l = [], c = [];
+  return e = class extends o {
     constructor() {
-      super(...arguments), this.size = "l", this._abort = new r(this), this._navigationMarker = null, this._navigationSection = null;
+      super(...arguments);
+      f(this, s);
+      b(this, s, u(this, l, "l")), this.connectedSection = u(this, c), this._abort = new z(this), this._navigationMarker = null, this._navigationSection = null;
+    }
+    /** Action size variant. */
+    get size() {
+      return h(this, s);
+    }
+    set size(n) {
+      b(this, s, n);
     }
     /** The navigation marker in which the action is nested. */
     get marker() {
@@ -24,28 +35,22 @@ const y = (a) => {
     }
     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);
+      const n = this._abort.signal;
+      this.addEventListener("click", () => {
+        var a;
+        !this.hasAttribute("data-action-active") && this._navigationMarker && !this.connectedSection && ((a = this.marker) == null || a.select(this));
+      }, { signal: n }), 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>`;
+      return y`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`;
     }
-  };
-  o.styles = c;
-  let i = o;
-  return g([
-    e({ reflect: !0 })
-  ], i.prototype, "size"), i;
-};
+  }, s = new WeakMap(), (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    r = [p({ reflect: !0 })], m(e, null, r, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, d) => {
+      a.size = d;
+    } }, metadata: n }, l, c), n && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), e.styles = x, e;
+})();
 export {
-  y as SbbNavigationActionCommonElementMixin
+  I as SbbNavigationActionCommonElementMixin
 };