@sbb-esta/lyne-elements 4.0.0-next.3 → 4.0.0-next.4

package/menu/menu/menu.component.js

@@ -4,8 +4,8 @@ var p = (s) => {
 var v = (s, n, i) => n.has(s) || p("Cannot " + i);
 var f = (s, n, i) => (v(s, n, "read from private field"), i ? i.call(s) : n.get(s)), w = (s, n, i) => n.has(s) ? p("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, i), d = (s, n, i, o) => (v(s, n, "write to private field"), o ? o.call(s, i) : n.set(s, i), i);
 import { __esDecorate as k, __runInitializers as u } from "tslib";
-import { css as x, isServer as M, html as S } from "lit";
-import { customElement as C, property as N } from "lit/decorators.js";
+import { css as x, isServer as C, html as M } from "lit";
+import { customElement as S, property as N } from "lit/decorators.js";
 import { ref as A } from "lit/directives/ref.js";
 import { SbbFocusTrapController as O, isArrowKeyOrPageKeysPressed as B, interactivityChecker as T, getNextElementIndex as I } from "../../core/a11y.js";
 import { SbbOpenCloseBaseElement as L } from "../../core/base-elements.js";
@@ -14,11 +14,12 @@ import { idReference as H } from "../../core/decorators.js";
 import { SbbScrollHandler as $, isZeroAnimationDuration as q } from "../../core/dom.js";
 import { forwardEvent as F } from "../../core/eventing.js";
 import { i18nGoBack as Z } from "../../core/i18n/i18n.js";
-import { isEventOnElement as y, removeAriaOverlayTriggerAttributes as j, setAriaOverlayTriggerAttributes as V, getElementPosition as W, getElementPositionHorizontal as G } from "../../core/overlay.js";
-import { boxSizingStyles as Q } from "../../core/styles.js";
+import { ɵstateController as j } from "../../core/mixins.js";
+import { isEventOnElement as y, removeAriaOverlayTriggerAttributes as V, setAriaOverlayTriggerAttributes as W, getElementPosition as G, getElementPositionHorizontal as Q } from "../../core/overlay.js";
+import { boxSizingStyles as J } from "../../core/styles.js";
 import "../../divider.js";
 import "../menu-button.js";
-const J = x`:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-menu-animation-easing: ease;--sbb-menu-transform-y: 100%;--sbb-menu-transform-x: 0%;--sbb-menu-max-width: 100%;--sbb-menu-min-width: 100%;--sbb-menu-inset: 0 auto auto 0;--sbb-menu-container-height: 100dvh;--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;--sbb-menu-color: var(--sbb-color-2-inverted);--sbb-menu-background-color: var(--sbb-background-color-1-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent}@media(min-width:64rem){:host{--sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem;--sbb-menu-back-button-display: none}}:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 20%, transparent)}@media(min-width:64rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-backdrop-color: transparent}}:host(:not(:is(:state(nested),[state--nested]))){--sbb-menu-back-button-display: none}:host(:not([data-state=closed])){--sbb-menu-inset: 0}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent)}@media(max-width:63.9375rem){:host(:is(:state(skip-animation),[state--skip-animation])){--sbb-menu-animation-duration: 0ms}:host(:is(:state(nested-child),[state--nested-child])){--sbb-menu-transform-x: -100%}:host(:is(:state(nested),[state--nested])[data-state]:not([data-state=closed])){--sbb-menu-open-animation-name: open-sideways}:host([data-state][data-state=closing]:is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))){--sbb-menu-close-animation-name: close-sideways}}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}sbb-divider,::slotted(sbb-divider){--sbb-divider-color: var(--sbb-background-color-4-inverted);margin-block:var(--sbb-spacing-fixed-2x)}sbb-divider,#sbb-menu__back-button{display:var(--sbb-menu-back-button-display, block)}.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}:host(:is(:state(nested),[state--nested])) .sbb-menu__container:before{display:none}.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-menu-color);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-menu-background-color);padding:0;overflow:hidden;translate:var(--sbb-menu-transform-x) 0;transition:translate var(--sbb-menu-animation-duration)}:host([data-state]:not([data-state=closed])) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:var(--sbb-menu-open-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:var(--sbb-menu-close-animation-name, close)}@media(forced-colors:active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media(min-width:64rem){.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-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:64rem){.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}}::slotted(:is([data-sbb-link],[data-sbb-button])){color-scheme:only light}@keyframes open{0%{opacity:0;translate:0 var(--sbb-menu-transform-y)}to{opacity:1;translate:0 0}}@keyframes close{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 var(--sbb-menu-transform-y)}}@keyframes open-sideways{0%{translate:100% 0}to{translate:0 0}}@keyframes close-sideways{0%{translate:0 0}to{translate:100% 0}}`, E = 8, X = -4, Y = [
+const X = x`:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-menu-animation-easing: ease;--sbb-menu-transform-y: 100%;--sbb-menu-transform-x: 0%;--sbb-menu-max-width: 100%;--sbb-menu-min-width: 100%;--sbb-menu-inset: 0 auto auto 0;--sbb-menu-container-height: 100dvh;--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;--sbb-menu-color: var(--sbb-color-2-inverted);--sbb-menu-background-color: var(--sbb-background-color-1-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent}@media(min-width:64rem){:host{--sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem;--sbb-menu-back-button-display: none}}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 20%, transparent)}@media(min-width:64rem){:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-backdrop-color: transparent}}:host(:not(:is(:state(nested),[state--nested]))){--sbb-menu-back-button-display: none}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-menu-inset: 0}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent)}@media(max-width:63.9375rem){:host(:is(:state(skip-animation),[state--skip-animation])){--sbb-menu-animation-duration: 0ms}:host(:is(:state(nested-child),[state--nested-child])){--sbb-menu-transform-x: -100%}:host(:is(:state(nested),[state--nested]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-menu-open-animation-name: open-sideways}:host(:is(:state(state-closing),[state--state-closing]):is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))){--sbb-menu-close-animation-name: close-sideways}}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}sbb-divider,::slotted(sbb-divider){--sbb-divider-color: var(--sbb-background-color-4-inverted);margin-block:var(--sbb-spacing-fixed-2x)}sbb-divider,#sbb-menu__back-button{display:var(--sbb-menu-back-button-display, block)}.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}:host(:is(:state(nested),[state--nested])) .sbb-menu__container:before{display:none}.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-menu-color);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-menu-background-color);padding:0;overflow:hidden;translate:var(--sbb-menu-transform-x) 0;transition:translate var(--sbb-menu-animation-duration)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:var(--sbb-menu-open-animation-name, open);animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-menu{pointer-events:none;animation-name:var(--sbb-menu-close-animation-name, close)}@media(forced-colors:active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media(min-width:64rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;max-height:fit-content;border-radius:var(--sbb-menu-border-radius)}:host(:not(:is(:state(state-closed),[state--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-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:64rem){.sbb-menu__content{max-height:fit-content}:host(:not(:is(:state(state-closed),[state--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}}::slotted(:is(:is(:state(sbb-link),[state--sbb-link]),:is(:state(sbb-button),[state--sbb-button]))){color-scheme:only light}@keyframes open{0%{opacity:0;translate:0 var(--sbb-menu-transform-y)}to{opacity:1;translate:0 0}}@keyframes close{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 var(--sbb-menu-transform-y)}}@keyframes open-sideways{0%{translate:100% 0}to{translate:0 0}}@keyframes close-sideways{0%{translate:0 0}to{translate:100% 0}}`, E = 8, Y = -4, ee = [
   "A",
   "BUTTON",
   "SBB-BUTTON",
@@ -30,10 +31,10 @@ const J = x`:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-
   "SBB-MENU-BUTTON",
   "SBB-MENU-LINK"
 ];
-let ee = 0, ve = (() => {
+let te = 0, we = (() => {
   var l, a;
-  let s = [C("sbb-menu")], n, i = [], o, h = L, m, g = [], _ = [];
-  return a = class extends h {
+  let s = [S("sbb-menu")], n, i = [], o, m = L, h, g = [], _ = [];
+  return a = class extends m {
     constructor() {
       super();
       w(this, l);
@@ -73,7 +74,7 @@ let ee = 0, ve = (() => {
       if (!(this.state === "closing" || this.state === "opened" || !this._menu || !this.dispatchBeforeOpenEvent())) {
         if (this._isNested()) {
           const e = this._parentMenu();
-          e.toggleState("nested-child", !0), e._nestedMenu !== this && e._nestedMenu?.close(), e._nestedMenu = this;
+          e.internals.states.add("nested-child"), e._nestedMenu !== this && e._nestedMenu?.close(), e._nestedMenu = this;
         }
         this.showPopover?.(), this.state = "opening", this._setMenuPosition(), this._triggerElement?.setAttribute("aria-expanded", "true"), this._isMobile() && this._scrollHandler.disableScroll(), this._isZeroAnimationDuration() && this._handleOpening();
       }
@@ -82,7 +83,7 @@ let ee = 0, ve = (() => {
     close() {
       this._close();
     }
-    /** Closes the menu and all related menus  nested and parent menus). */
+    /** Closes the menu and all related menus (nested and parent menus). */
     closeAll() {
       this._mainMenu()._close(!0);
     }
@@ -91,7 +92,7 @@ let ee = 0, ve = (() => {
       if (!(this.state === "opening" && !this._isNested() || !this.dispatchBeforeCloseEvent())) {
         if (this._nestedMenu?._close(e), this._isNested()) {
           const t = this._parentMenu();
-          this.toggleState("close-all", e), t.toggleState("skip-animation", e), t.toggleState("nested-child", !1), t._nestedMenu = null;
+          e ? (this.internals.states.add("close-all"), t.internals.states.add("skip-animation")) : (this.internals.states.delete("close-all"), t.internals.states.delete("skip-animation")), t.internals.states.delete("nested-child"), t._nestedMenu = null;
         }
         this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing();
       }
@@ -103,7 +104,7 @@ let ee = 0, ve = (() => {
       this.state = "opened", this._isNested() ? this._updateNestedInert() : this._inertController.activate(), this._escapableOverlayController.connect(), this._focusTrapController.focusInitialElement(), this._focusTrapController.enabled = !0, this._attachWindowEvents(), this.dispatchOpenEvent();
     }
     _handleClosing() {
-      this.state = "closed", this.toggleState("skip-animation", !1), this.toggleState("close-all", !1), this.hidePopover?.(), this._menu?.firstElementChild?.scrollTo(0, 0), this._isNested() ? this._updateNestedInert() : this._inertController.deactivate(), this._triggerElement?.focus({
+      this.state = "closed", this.internals.states.delete("skip-animation"), this.internals.states.delete("close-all"), this.hidePopover?.(), this._menu?.firstElementChild?.scrollTo(0, 0), this._isNested() ? this._updateNestedInert() : this._inertController.deactivate(), this._triggerElement?.focus({
         // When inside the sbb-header, we prevent the scroll to avoid the snapping to the top of the page
         preventScroll: ["sbb-header-button", "sbb-header-link"].includes(this._triggerElement.localName)
       }), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._windowEventsController?.abort(), this._focusTrapController.enabled = !1, this._scrollHandler.enableScroll();
@@ -123,7 +124,7 @@ let ee = 0, ve = (() => {
           this._isNested() && this.close();
           break;
         case "ArrowRight":
-          e.target.hasAttribute("data-sbb-menu-trigger") && e.target.click();
+          e.target.matches(":is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])") && e.target.click();
           break;
         case "PageUp":
         case "Home":
@@ -142,19 +143,19 @@ let ee = 0, ve = (() => {
       return this.shadowRoot?.addEventListener("slotchange", () => this._syncNegative(), { capture: !0 }), e;
     }
     connectedCallback() {
-      this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-menu-${ee++}`, this.hasUpdated && this._configureTrigger();
+      this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-menu-${te++}`, this.hasUpdated && this._configureTrigger();
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort(), this._scrollHandler.enableScroll();
     }
     requestUpdate(e, t, r) {
-      super.requestUpdate(e, t, r), !M && (!e || e === "trigger") && this.hasUpdated && this._configureTrigger();
+      super.requestUpdate(e, t, r), !C && (!e || e === "trigger") && this.hasUpdated && this._configureTrigger();
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), j(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (V(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), V(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (W(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
         signal: this._triggerAbortController.signal
-      }), this.toggleState("nested", ["sbb-menu-button", "sbb-menu-link"].includes(this._triggerElement.localName)), this._triggerElement.toggleAttribute("data-sbb-menu-trigger", !0)));
+      }), this.toggleState("nested", ["sbb-menu-button", "sbb-menu-link"].includes(this._triggerElement.localName)), j(this._triggerElement).add("sbb-menu-trigger")));
     }
     _attachWindowEvents() {
       this._windowEventsController = new AbortController(), document.addEventListener("scroll", () => this._setMenuPosition(), {
@@ -175,7 +176,7 @@ let ee = 0, ve = (() => {
     // Close menu at any click on an interactive element inside the <sbb-menu> that bubbles to the container.
     _interactiveElementClick(e) {
       const t = e.target;
-      Y.includes(t.nodeName) && !t.hasAttribute("disabled") && !t.hasAttribute("data-sbb-menu-trigger") && t.id !== "sbb-menu__back-button" && this.closeAll();
+      ee.includes(t.nodeName) && !t.hasAttribute("disabled") && !t.matches(":is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])") && t.id !== "sbb-menu__back-button" && this.closeAll();
     }
     /** Converts the linked list into an array of SbbMenuElement. */
     _nestedMenus() {
@@ -201,7 +202,7 @@ let ee = 0, ve = (() => {
     // Check if nested menu should be closed.
     _handleMouseOver(e) {
       const t = e.target, r = this._isMobile();
-      !r && this._nestedMenu && !t.classList.contains("sbb-menu__content") && t.getAttribute("aria-expanded") !== "true" && this._nestedMenu.close(), t.hasAttribute("data-sbb-menu-trigger") && !r && t.click();
+      !r && this._nestedMenu && !t.classList.contains("sbb-menu__content") && t.getAttribute("aria-expanded") !== "true" && this._nestedMenu.close(), t.matches(":is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])") && !r && t.click();
     }
     // 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.
@@ -214,17 +215,17 @@ let ee = 0, ve = (() => {
     _setMenuPosition() {
       if (this._isMobile() || !this._menu || !this._triggerElement || this.state === "closing")
         return;
-      const e = this._isNested() ? G(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
+      const e = this._isNested() ? Q(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
         horizontalOffset: E,
-        verticalOffset: X,
+        verticalOffset: Y,
         contentSelector: ".sbb-menu__content"
-      }) : W(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
+      }) : G(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
         verticalOffset: E
       });
       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);
     }
     _syncNegative() {
-      this.querySelectorAll("[data-sbb-link], [data-sbb-button]")?.forEach((e) => {
+      this.querySelectorAll(":is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button])")?.forEach((e) => {
         customElements.upgrade(e), e.negative = !this._darkModeController.matches();
       });
     }
@@ -232,7 +233,7 @@ let ee = 0, ve = (() => {
       return this._mediaMatcher.matches(this._mobileBreakpoint) ?? !0;
     }
     render() {
-      return S`
+      return M`
       <div class="sbb-menu__container">
         <div
           @animationend=${this._onMenuAnimationEnd}
@@ -260,12 +261,12 @@ let ee = 0, ve = (() => {
     `;
     }
   }, l = new WeakMap(), o = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    m = [H(), N()], k(a, null, m, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, r) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    h = [H(), N()], k(a, null, h, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, r) => {
       t.trigger = r;
     } }, metadata: e }, g, _), k(null, n = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, i), o = n.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = [Q, J], a.role = "menu", u(o, i), o;
+  })(), a.styles = [J, X], a.role = "menu", u(o, i), o;
 })();
 export {
-  ve as SbbMenuElement
+  we as SbbMenuElement
 };

package/mini-button-common-Bb4ri3Rn.js

@@ -0,0 +1,10 @@
+import { css as o } from "lit";
+const t = o`:host{display:inline-block;outline:none!important;--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);--sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);--sbb-button-color-disabled-background: var(--sbb-background-color-3);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: var(--sbb-border-width-2x);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-min-height: var(--sbb-size-element-m);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);--sbb-button-gap: var(--sbb-spacing-fixed-2x);--sbb-button-box-shadow: transparent 0 0;--sbb-button-box-shadow-definition: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--sbb-button-loading-border-width: var(--sbb-border-width-3x);--sbb-button-loading-delay: .3s;--_width: unset;--_min-height-modifier: 0rem;--_border-color: var(--sbb-button-color-default-border);--_background-color: var(--sbb-button-color-default-background);--_color: var(--sbb-button-color-default-text);--_button-inset: 0;--_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid var(--_border-color)}@media(min-width:64rem){:host{--sbb-button-padding-inline: var(--sbb-spacing-fixed-10x)}}@media(forced-colors:active){:host{--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-default-background: Canvas !important;--sbb-button-color-hover-background: Canvas !important;--sbb-button-color-active-background: Canvas !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-text: GrayText !important;--sbb-button-color-loading-border: Highlight !important;--sbb-button-color-default-text: CanvasText !important;--sbb-button-color-hover-text: CanvasText !important;--sbb-button-color-active-text: CanvasText !important;--sbb-button-border-overlap-fix: 0rem}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-hover-text: ButtonText !important;--sbb-button-color-active-text: ButtonText !important}}@media(forced-colors:active){:host(:is(:state(link),[state--link])){--sbb-button-color-default-text: LinkText !important;--sbb-button-color-hover-text: LinkText !important;--sbb-button-color-active-text: LinkText !important}}:host([negative]){--sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text: var(--sbb-color-aluminium)}:host([size=m]){--sbb-button-min-height: var(--sbb-size-element-s);--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}@media(min-width:64rem){:host([size=m]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x)}}:host([size=s]){--sbb-button-min-height: var(--sbb-size-element-xs);--sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}@media(min-width:64rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline: 0;--_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier))}@media(any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover: -.0625rem;--sbb-button-shadow-1-offset-y: calc( .5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y) );--sbb-button-shadow-1-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor: var(--sbb-cursor-pointer);--_border-color: var(--sbb-button-color-hover-border);--_color: var(--sbb-button-color-hover-text);--_background-color: var(--sbb-button-color-hover-background);--_button-inset: calc(var(--sbb-button-border-width) * -1)}}@media(forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: var(--sbb-cursor-default);--_color: var(--sbb-button-color-disabled-text);--_background-color: var(--sbb-button-color-disabled-background);--_border-color: var(--sbb-button-color-disabled-border);--_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color: var(--sbb-button-color-active-text);--_background-color: var(--sbb-button-color-active-background);--_border-color: var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));--sbb-button-focus-outline-offset-override: calc( var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width) );--_border: none;--_transform-style: preserve-3d}.sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;white-space:nowrap;text-decoration:none;min-height:calc(var(--sbb-button-min-height) + var(--_min-height-modifier));outline:none;width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color,background-color;transform-style:var(--_transform-style, flat);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);position:relative}.sbb-action-base:before{content:"";position:absolute;inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{margin:var(--sbb-button-loading-border-width);padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));transition-property:none}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset))}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}.sbb-button-loading-border{position:absolute;inset:calc(-1 * var(--sbb-button-loading-border-width));clip-path:border-box;border-radius:var(--sbb-button-border-radius);background:var(--_background-color);transform:translateZ(-1px);z-index:-1;container-type:inline-size;contain:paint;animation:background-fade-in var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) linear;animation-fill-mode:forwards}.sbb-button-loading-border:before{content:"";display:block;width:64cqmin;max-height:var(--sbb-button-min-height);aspect-ratio:2/1;position:absolute;background:radial-gradient(100% 100% at right,var(--sbb-button-color-active-text),transparent 50%);offset-path:border-box;offset-anchor:100% 50%;opacity:0;animation:snake-fade-in var(--sbb-disable-animation-duration, calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration, calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing),snake-position var(--sbb-disable-animation-duration, calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, .5)*3s) ) infinite linear;animation-fill-mode:forwards;transform-style:preserve-3d}@keyframes snake-position{to{offset-distance:100%}}@keyframes snake-fade-in{to{opacity:1}}@keyframes background-fade-in{to{background:var(--sbb-button-color-loading-border)}}`, r = o`:host{--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) );--sbb-button-color-loading-border: light-dark( color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) ), color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) ) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, a = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-3);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-active-text: light-dark( var(--sbb-color-anthracite), var(--sbb-color-graphite) );--sbb-button-color-default-background: var(--sbb-background-color-1);--sbb-button-color-default-border: var(--sbb-border-color-4-inverted);--sbb-button-color-default-text: var(--sbb-color-3);--sbb-button-color-hover-background: var(--sbb-background-color-1);--sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text: var(--sbb-color-4);--sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-border-overlap-fix: 0rem}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-2-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-graphite);--sbb-button-color-default-background: var(--sbb-background-color-1-negative);--sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text: var(--sbb-color-3-negative);--sbb-button-color-hover-background: var(--sbb-background-color-1-negative);--sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-4-negative);--sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, n = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));--sbb-button-color-default-background: var(--sbb-background-color-3-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3);--sbb-button-color-default-text: var(--sbb-color-1-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3);--sbb-button-color-hover-text: var(--sbb-color-3-inverted);--sbb-button-color-loading-border: var(--sbb-color-iron);--sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1-negative);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3-negative);--sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative);--sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, s = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-4);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-1);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1);--sbb-button-color-hover-background: var(--sbb-background-color-3);--sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text: var(--sbb-color-1);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-1-negative);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-1-negative);--sbb-button-color-loading-border: var(--sbb-color-granite)}`, e = o`:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-mini-button-color-text: var(--sbb-color-3);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3);--sbb-mini-button-color-active-background: var(--sbb-background-color-4);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-granite);--sbb-mini-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-smoke) );--sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);--sbb-mini-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);--sbb-mini-button-color-background: var(--sbb-mini-button-color-default-background);--sbb-mini-button-color: var(--sbb-mini-button-color-text)}@media(forced-colors:active){:host{--sbb-mini-button-color-text: ButtonText !important;--sbb-mini-button-color-hover-background: Highlight !important;--sbb-mini-button-color-active-background: Highlight !important;--sbb-mini-button-color-disabled-background: Canvas !important;--sbb-mini-button-color-disabled-border: GrayText !important;--sbb-mini-button-color-disabled-text: GrayText !important}}:host([negative]){--sbb-mini-button-color-text: var(--sbb-color-3-negative);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-5)}@media(any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover: -.0625rem;--sbb-mini-button-color-background: var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border: var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color: var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events: none;--sbb-mini-button-cursor: var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style: initial}.sbb-action-base{display:flex;position:relative;color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-mini-button-pointer-events, auto);cursor:var(--sbb-mini-button-cursor, var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function)}.sbb-action-base:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);transition-property:inset,background-color;border:var(--sbb-mini-button-border)}:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(sbb-icon),sbb-icon{display:flex;transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0rem)}`;
+export {
+  n as a,
+  t as b,
+  e as m,
+  r as p,
+  a as s,
+  s as t
+};

package/mini-calendar/mini-calendar/mini-calendar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mini-calendar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/mini-calendar/mini-calendar/mini-calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAM/D;;;;GAIG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+CAA+C;IAC/C,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D,OAAO,CAAC,uBAAuB,CAAgC;IAC/D,OAAO,CAAC,YAAY,CAA4E;;IAahG,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,0BAA0B;IAwDlC,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAa7B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAMb,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKzB,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"mini-calendar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/mini-calendar/mini-calendar/mini-calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAO/D;;;;GAIG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+CAA+C;IAC/C,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D,OAAO,CAAC,uBAAuB,CAAgC;IAC/D,OAAO,CAAC,YAAY,CAA4E;;IAahG,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,0BAA0B;IAwDlC,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAa7B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAMb,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKzB,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/mini-calendar/mini-calendar/mini-calendar.component.js

@@ -2,30 +2,31 @@ var A = (a) => {
   throw TypeError(a);
 };
 var C = (a, i, o) => i.has(a) || A("Cannot " + o);
-var S = (a, i, o) => (C(a, i, "read from private field"), o ? o.call(a) : i.get(a)), k = (a, i, o) => i.has(a) ? A("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, o), y = (a, i, o, d) => (C(a, i, "write to private field"), d ? d.call(a, o) : i.set(a, o), o);
-import { __esDecorate as K, __runInitializers as w } from "tslib";
-import { MutationController as M } from "@lit-labs/observers/mutation-controller.js";
-import { css as x, LitElement as I, html as z } from "lit";
-import { customElement as v, property as E } from "lit/decorators.js";
-import { isArrowKeyOrPageKeysPressed as O } from "../../core/a11y.js";
-import { readConfig as L } from "../../core/config/config.js";
-import { defaultDateAdapter as N } from "../../core/datetime/native-date-adapter.js";
-const P = x`:host{display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x)}`;
-let H = (() => {
+var k = (a, i, o) => (C(a, i, "read from private field"), o ? o.call(a) : i.get(a)), K = (a, i, o) => i.has(a) ? A("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, o), y = (a, i, o, d) => (C(a, i, "write to private field"), d ? d.call(a, o) : i.set(a, o), o);
+import { __esDecorate as S, __runInitializers as w } from "tslib";
+import { MutationController as x } from "@lit-labs/observers/mutation-controller.js";
+import { css as I, LitElement as z, html as v } from "lit";
+import { customElement as E, property as O } from "lit/decorators.js";
+import { isArrowKeyOrPageKeysPressed as L } from "../../core/a11y.js";
+import { readConfig as N } from "../../core/config/config.js";
+import { defaultDateAdapter as P } from "../../core/datetime/native-date-adapter.js";
+import { ɵstateController as M } from "../../core/mixins.js";
+const R = I`:host{display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x)}`;
+let $ = (() => {
   var u, f;
-  let a = [v("sbb-mini-calendar")], i, o = [], d, D = I, m, b = [], g = [];
+  let a = [E("sbb-mini-calendar")], i, o = [], d, D = z, m, b = [], g = [];
   return f = class extends D {
     constructor() {
       super();
-      k(this, u);
-      y(this, u, w(this, b, "horizontal")), this._keydownAbortController = (w(this, g), null), this._dateAdapter = L().datetime?.dateAdapter ?? N, this.addController(new M(this, {
+      K(this, u);
+      y(this, u, w(this, b, "horizontal")), this._keydownAbortController = (w(this, g), null), this._dateAdapter = N().datetime?.dateAdapter ?? P, this.addController(new x(this, {
         config: { childList: !0, subtree: !0 },
         callback: () => this._setMonthsShowYear()
       }));
     }
     /** The orientation of days in the calendar. */
     get orientation() {
-      return S(this, u);
+      return k(this, u);
     }
     set orientation(t) {
       y(this, u, t);
@@ -39,11 +40,11 @@ let H = (() => {
     _setMonthsShowYear() {
       this._getMiniCalendarMonths().forEach((t, e) => {
         const s = t.date.split("-");
-        s.length > 0 && (e === 0 || +s[1] == 1 ? t.toggleState("show-year", !0) : t.toggleState("show-year", !1));
+        s.length > 0 && (e === 0 || +s[1] == 1 ? M(t).add("show-year") : M(t).delete("show-year"));
       });
     }
     _handleKeydownCalendarDay(t) {
-      O(t) && t.preventDefault();
+      L(t) && t.preventDefault();
       const e = this._getMiniCalendarDays(), s = e.find((n) => n === t.target), r = this._navigateByKeyboardDayView(e, s, t), c = document.activeElement;
       r !== c && (r.tabIndex = 0, r?.focus(), c.tabIndex = -1);
     }
@@ -115,15 +116,15 @@ let H = (() => {
       super.disconnectedCallback(), this._keydownAbortController?.abort();
     }
     render() {
-      return z`<slot @slotchange=${this._handleSlotchange}></slot>`;
+      return v`<slot @slotchange=${this._handleSlotchange}></slot>`;
     }
   }, u = new WeakMap(), d = f, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(D[Symbol.metadata] ?? null) : void 0;
-    m = [E({ reflect: !0 })], K(f, null, m, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (e) => "orientation" in e, get: (e) => e.orientation, set: (e, s) => {
+    m = [O({ reflect: !0 })], S(f, null, m, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (e) => "orientation" in e, get: (e) => e.orientation, set: (e, s) => {
       e.orientation = s;
-    } }, metadata: t }, b, g), K(null, i = { value: d }, a, { kind: "class", name: d.name, metadata: t }, null, o), d = i.value, t && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), f.styles = P, w(d, o), d;
+    } }, metadata: t }, b, g), S(null, i = { value: d }, a, { kind: "class", name: d.name, metadata: t }, null, o), d = i.value, t && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), f.styles = R, w(d, o), d;
 })();
 export {
-  H as SbbMiniCalendarElement
+  $ as SbbMiniCalendarElement
 };

package/navigation/common/navigation-action-common.js

@@ -3,22 +3,22 @@ var v = (t) => {
 };
 var h = (t, i, e) => i.has(t) || v("Cannot " + e);
 var g = (t, i, e) => (h(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), b = (t, i, e, s) => (h(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
-import { __esDecorate as d, __runInitializers as u } from "tslib";
-import { property as p } from "lit/decorators.js";
+import { __esDecorate as p, __runInitializers as u } from "tslib";
+import { property as d } from "lit/decorators.js";
 import { html as y } from "lit/static-html.js";
 import { isLean as z } from "../../core/dom.js";
 import { boxSizingStyles as x } from "../../core/styles.js";
 import { css as k } from "lit";
 import "../../icon.js";
-const _ = k`:host{--sbb-navigation-action-color: var(--sbb-color-4-negative);--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-5)}@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-text) / 2);translate:0 -50%}@media(any-hover:hover){:host(:hover){--sbb-navigation-action-color: var(--sbb-color-5)}}@media(forced-colors:active){:host([data-button]){--sbb-navigation-action-color: ButtonText}}:is(.sbb-navigation-button,.sbb-navigation-link){--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);cursor:var(--sbb-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-duration, 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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`, O = (t) => (() => {
+const _ = k`:host{--sbb-navigation-action-color: var(--sbb-color-4-negative);--sbb-navigation-action-icon-display: none;display:block;outline:none!important}:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active){--sbb-navigation-action-icon-display: block}:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color: var(--sbb-color-5)}@media(forced-colors:active){:host(:is(:state(action-active),[state--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-text) / 2);translate:0 -50%}@media(any-hover:hover){:host(:hover){--sbb-navigation-action-color: var(--sbb-color-5)}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-navigation-action-color: ButtonText}}:is(.sbb-navigation-button,.sbb-navigation-link){--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);cursor:var(--sbb-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-duration, 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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`, T = (t) => (() => {
   var n, a;
-  let e = t, s, l = [], c = [];
+  let e = t, s, c = [], l = [];
   return a = class extends e {
     constructor(...o) {
       super(...o);
       f(this, n);
-      b(this, n, u(this, l, z() ? "s" : "l")), this.connectedSection = u(this, c), this._navigationMarker = null, this._navigationSection = null, this.addEventListener?.("click", () => {
-        !this.hasAttribute("data-action-active") && this._navigationMarker && !this.connectedSection && this.marker?.select(this);
+      b(this, n, u(this, c, z() ? "s" : "l")), this.connectedSection = u(this, l), this._navigationMarker = null, this._navigationSection = null, this.addEventListener?.("click", () => {
+        !this.matches(":is(:state(action-active),[state--action-active])") && this._navigationMarker && !this.connectedSection && this.marker?.select(this);
       });
     }
     /**
@@ -40,18 +40,18 @@ const _ = k`:host{--sbb-navigation-action-color: var(--sbb-color-4-negative);--s
       return this._navigationSection;
     }
     connectedCallback() {
-      super.connectedCallback(), this._navigationMarker = this.closest("sbb-navigation-marker"), this._navigationSection = this.closest("sbb-navigation-section"), this.toggleAttribute("data-section-action", !!this._navigationSection);
+      super.connectedCallback(), this._navigationMarker = this.closest("sbb-navigation-marker"), this._navigationSection = this.closest("sbb-navigation-section"), this.toggleState("section-action", !!this._navigationSection);
     }
     renderTemplate() {
       return y`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`;
     }
   }, n = new WeakMap(), (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    s = [p({ reflect: !0 })], d(a, null, s, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, m) => {
+    s = [d({ reflect: !0 })], p(a, null, s, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, m) => {
       r.size = m;
-    } }, metadata: o }, l, c), o && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+    } }, metadata: o }, c, l), o && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
   })(), a.styles = [x, _], a;
 })();
 export {
-  O as SbbNavigationActionCommonElementMixin
+  T as SbbNavigationActionCommonElementMixin
 };

package/navigation/navigation/navigation.component.d.ts

@@ -57,7 +57,6 @@ export declare class SbbNavigationElement extends SbbNavigationElement_base {
     private _isCloseElement;
     private _pointerDownListener;
     private _closeOnBackdropClick;
-    private _onNavigationSectionChange;
     private _onNavigationResize;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAkBtE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAI5E,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;GAOG;AACH,qBAEM,oBAAqB,SAAQ,yBAAgD;IACjF,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,iDAAiD;IACxC,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAA4C;IAE9F,qDAAqD;IACrD,IAAW,uBAAuB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;IAED,wCAAwC;IACxC,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,8CAA8C;IAC9C,IAAW,iBAAiB,IAAI,WAAW,GAAG,IAAI,CAEjD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,yBAAyB,CAG9B;;IAkBH,4BAA4B;IACrB,IAAI,IAAI,IAAI;IAyBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B,6BAA6B;IACtB,KAAK,IAAI,IAAI;IAgBpB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAO5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}
+{"version":3,"file":"navigation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAkBtE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAI5E,OAAO,oCAAoC,CAAC;;AAK5C;;;;;;;GAOG;AACH,qBAEM,oBAAqB,SAAQ,yBAAgD;IACjF,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,iDAAiD;IACxC,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAA4C;IAE9F,qDAAqD;IACrD,IAAW,uBAAuB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;IAED,wCAAwC;IACxC,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,8CAA8C;IAC9C,IAAW,iBAAiB,IAAI,WAAW,GAAG,IAAI,CAEjD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,yBAAyB,CAG9B;;IA2BH,4BAA4B;IACrB,IAAI,IAAI,IAAI;IAsBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B,6BAA6B;IACtB,KAAK,IAAI,IAAI;IAgBpB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAO5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}