@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/menu/menu.js

@@ -1,19 +1,19 @@
 import { css as v, html as l } from "lit";
-import { property as p, customElement as g } from "lit/decorators.js";
-import { ref as f } from "lit/directives/ref.js";
-import { SbbFocusHandler as w, isArrowKeyPressed as x, interactivityChecker as y, getNextElementIndex as k, setModalityOnNextFocus as c, IS_FOCUSABLE_QUERY as _ } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as E } from "../core/base-elements.js";
-import { SbbConnectedAbortController as N } from "../core/controllers.js";
-import { SbbScrollHandler as S, isBreakpoint as h, findReferencedElement as C } from "../core/dom.js";
-import { SbbNamedSlotListMixin as L } from "../core/mixins.js";
-import { isEventOnElement as d, applyInertMechanism as m, removeInertMechanism as u, removeAriaOverlayTriggerAttributes as B, setAriaOverlayTriggerAttributes as A, getElementPosition as O } from "../core/overlay.js";
+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 I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, b = (t, e, s, n) => {
-  for (var i = n > 1 ? void 0 : n ? P(e, s) : e, o = t.length - 1, a; o >= 0; o--)
-    (a = t[o]) && (i = (n ? a(e, s, i) : a(i)) || i);
-  return n && i && I(e, s, i), i;
+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 K = 8, U = [
+const I = 8, K = [
   "A",
   "BUTTON",
   "SBB-BUTTON",
@@ -23,153 +23,153 @@ const K = 8, U = [
   "SBB-LINK-BUTTON",
   "SBB-BLOCK-LINK-BUTTON"
 ];
-let z = 0, r = class extends L(E) {
+let D = 0, r = class extends N(k) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], this.e = null, this.a = null, this.h = !1, this.l = new N(this), this.f = new w(), this.i = new S(), this.r = (t) => {
-      this.h = d(this.c, t);
-    }, this.s = (t) => {
-      !this.h && !d(this.c, t) && this.close();
+    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(t) {
-    const e = this.e;
-    this.e = t, this.k(this.e, e);
+  set trigger(e) {
+    const t = this._trigger;
+    this._trigger = e, this._removeTriggerClickListener(this._trigger, t);
   }
   get trigger() {
-    return this.e;
+    return this._trigger;
   }
   /**
    * Opens the menu on trigger click.
    */
   open() {
-    var t;
-    this.state === "closing" || !this.c || this.willOpen.emit() && (this.state = "opening", this.g(), (t = this.a) == null || t.setAttribute("aria-expanded", "true"), h("medium") || this.i.disableScroll());
+    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 t;
-    this.state !== "opening" && this.willClose.emit() && (this.state = "closing", (t = this.a) == null || t.setAttribute("aria-expanded", "false"));
+    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.
    */
-  m(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();
+  _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();
   }
-  n(t) {
-    if (!x(t))
+  _handleKeyDown(e) {
+    if (!w(e))
       return;
-    t.preventDefault();
-    const e = Array.from(
+    e.preventDefault();
+    const t = Array.from(
       this.querySelectorAll(
         "sbb-menu-button, sbb-menu-link"
       )
     ).filter(
-      (i) => !i.disabled && y.isVisible(i)
-    ), s = e.findIndex((i) => i === t.target), n = k(t, s, e.length);
-    e[n].focus();
+      (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 o(t) {
-    if (this.state === "opened" && t.key === "Escape") {
+  async _onKeydownEvent(e) {
+    if (this.state === "opened" && e.key === "Escape") {
       this.close();
       return;
     }
   }
   // Removes trigger click listener on trigger change.
-  k(t, e) {
-    var s, n;
-    t !== e && ((s = this.d) == null || s.abort(), (n = this.b) == null || n.abort(), this.j(this.trigger));
+  _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 e;
+    var t;
     super.connectedCallback();
-    const t = this.l.signal;
-    this.addEventListener("click", (s) => this.m(s), { signal: t }), this.addEventListener("keydown", (s) => this.n(s), { signal: t }), (e = this.shadowRoot) == null || e.addEventListener("slotchange", (s) => this.p(s), {
-      signal: t,
+    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.j(this.trigger), this.state === "opened" && m(this);
+    }), this._configure(this.trigger), this.state === "opened" && m(this);
   }
   disconnectedCallback() {
-    var t, e;
-    super.disconnectedCallback(), (t = this.d) == null || t.abort(), (e = this.b) == null || e.abort(), this.f.disconnect(), u();
+    var e, t;
+    super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), u();
   }
-  p(t) {
-    var e;
-    (e = this.children) != null && e.length && Array.from(this.children ?? []).every(
-      (s) => s.localName === "sbb-menu-button" || s.localName === "sbb-menu-link"
-    ) || (t.stopImmediatePropagation(), this.listChildren.length && (this.listChildren.forEach((s) => s.removeAttribute("slot")), this.listChildren = []));
+  _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.
-  j(t) {
-    var e;
-    B(this.a), t && (this.a = C(t), this.a && (this.id = this.id || `sbb-menu-${z++}`, A(this.a, "menu", this.id, this.state), (e = this.d) == null || e.abort(), this.d = new AbortController(), this.a.addEventListener("click", () => this.open(), {
-      signal: this.d.signal
+  _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
     })));
   }
-  q() {
-    this.b = new AbortController(), document.addEventListener("scroll", () => this.g(), {
+  _attachWindowEvents() {
+    this._windowEventsController = new AbortController(), document.addEventListener("scroll", () => this._setMenuPosition(), {
       passive: !0,
-      signal: this.b.signal
-    }), window.addEventListener("resize", () => this.g(), {
+      signal: this._windowEventsController.signal
+    }), window.addEventListener("resize", () => this._setMenuPosition(), {
       passive: !0,
-      signal: this.b.signal
-    }), window.addEventListener("keydown", (t) => this.o(t), {
-      signal: this.b.signal
-    }), window.addEventListener("pointerdown", this.r, {
-      signal: this.b.signal
-    }), window.addEventListener("pointerup", this.s, {
-      signal: this.b.signal
+      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.
-  t(t) {
-    const e = t.target;
-    U.includes(e.nodeName) && !e.hasAttribute("disabled") && this.close();
+  _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.
-  u(t) {
-    var e, s, n, i;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), m(this), this.v(), this.f.trap(this), this.q()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", (s = (e = this.c) == null ? void 0 : e.firstElementChild) == null || s.scrollTo(0, 0), u(), c(this.a), (n = this.a) == null || n.focus({
+  _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.a.localName === "sbb-header-button" || this.a.localName === "sbb-header-link"
-    }), this.didClose.emit(), (i = this.b) == null || i.abort(), this.f.disconnect(), this.i.enableScroll());
+      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.
-  v() {
-    const t = this.querySelector(_);
-    c(t), t.focus();
+  _setMenuFocus() {
+    const e = this.querySelector(y);
+    c(e), e.focus();
   }
   // Set menu position and max height if the breakpoint is medium-ultra.
-  g() {
-    if (!h("medium") || !this.c || !this.a || this.state === "closing")
+  _setMenuPosition() {
+    if (!d("medium") || !this._menu || !this._triggerElement || this.state === "closing")
       return;
-    const t = O(
+    const e = A(
       this.shadowRoot.querySelector(".sbb-menu__content"),
-      this.a,
+      this._triggerElement,
       this.shadowRoot.querySelector(".sbb-menu__container"),
       {
-        verticalOffset: K
+        verticalOffset: I
       }
     );
-    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);
+    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=${(t) => this.u(t)}
+          @animationend=${(e) => this._onMenuAnimationEnd(e)}
           class="sbb-menu"
-          ${f((t) => this.c = t)}
+          ${_((e) => this._menu = e)}
         >
           <div
-            @click=${(t) => this.t(t)}
+            @click=${(e) => this._closeOnInteractiveElementClick(e)}
             class="sbb-menu__content"
           >
             ${this.listChildren.length ? this.renderList({ class: "sbb-menu-list", ariaLabel: this.listAccessibilityLabel }) : l`<slot></slot>`}
@@ -181,13 +181,13 @@ let z = 0, r = class extends L(E) {
 };
 r.styles = T;
 b([
-  p()
+  g()
 ], r.prototype, "trigger", 1);
 b([
-  p({ attribute: "list-accessibility-label" })
+  g({ attribute: "list-accessibility-label" })
 ], r.prototype, "listAccessibilityLabel", 2);
 r = b([
-  g("sbb-menu")
+  p("sbb-menu")
 ], r);
 export {
   r as SbbMenuElement

package/navigation/common.js

@@ -1,40 +1,40 @@
-import { property as a } from "lit/decorators.js";
+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 h = Object.defineProperty, v = (n, i, o, g) => {
-  for (var t = void 0, s = n.length - 1, e; s >= 0; s--)
-    (e = n[s]) && (t = e(i, o, t) || t);
-  return t && h(i, o, t), t;
+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 = (n) => {
-  const o = class o extends n {
+const y = (a) => {
+  const o = class o extends a {
     constructor() {
-      super(...arguments), this.size = "l", this.c = new r(this), this.a = null, this.b = null;
+      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.a;
+      return this._navigationMarker;
     }
     /** The section in which the action is nested. */
     get section() {
-      return this.b;
+      return this._navigationSection;
     }
     connectedCallback() {
       super.connectedCallback();
-      const t = this.c.signal;
+      const t = this._abort.signal;
       this.addEventListener(
         "click",
         () => {
-          var s;
-          !this.hasAttribute("data-action-active") && this.a && !this.connectedSection && ((s = this.marker) == null || s.select(
+          var n;
+          !this.hasAttribute("data-action-active") && this._navigationMarker && !this.connectedSection && ((n = this.marker) == null || n.select(
             this
           ));
         },
         { signal: t }
-      ), this.a = this.closest("sbb-navigation-marker"), this.b = this.closest("sbb-navigation-section"), this.toggleAttribute("data-section-action", !!this.b);
+      ), 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>`;
@@ -42,8 +42,8 @@ const y = (n) => {
   };
   o.styles = c;
   let i = o;
-  return v([
-    a({ reflect: !0 })
+  return g([
+    e({ reflect: !0 })
   ], i.prototype, "size"), i;
 };
 export {

package/navigation/navigation-marker.js

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