@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/map-container.js

@@ -1,109 +1,4 @@
-var B = (a) => {
-  throw TypeError(a);
-};
-var y = (a, i, o) => i.has(a) || B("Cannot " + o);
-var m = (a, i, o) => (y(a, i, "read from private field"), o ? o.call(a) : i.get(a)), p = (a, i, o) => i.has(a) ? B("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, o), c = (a, i, o, s) => (y(a, i, "write to private field"), s ? s.call(a, o) : i.set(a, o), o);
-import { __runInitializers as d, __esDecorate as u } from "tslib";
-import { IntersectionController as x } from "@lit-labs/observers/intersection-controller.js";
-import { css as S, LitElement as V, nothing as z, html as U } from "lit";
-import { customElement as I, property as E, state as C } from "lit/decorators.js";
-import { SbbLanguageController as $ } from "./core/controllers.js";
-import { forceType as O } from "./core/decorators.js";
-import { forwardEvent as D } from "./core/eventing.js";
-import { i18nMapContainerButtonLabel as L } from "./core/i18n.js";
-import "./button/accent-button.js";
-const j = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius) );--sbb-map-container-mobile-sticky-block-start: 0}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));position:fixed;inset:var(--sbb-map-container-margin-start, var(--sbb-header-height)) 0 0 0}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-map-container__sidebar{grid-column:1/3;grid-row:2/3;width:100%;overflow:hidden auto;position:relative;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;grid-row:1/2;grid-column:1/3}@media (max-width: 52.4375rem){.sbb-map-container__map{inset-block-start:var(--sbb-map-container-mobile-sticky-block-start);height:var(--sbb-map-container-map-height)}}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;position:relative}}`;
-let N = (() => {
-  var n, b, e;
-  let a = [I("sbb-map-container")], i, o = [], s, h = V, v, _ = [], g = [], w, f = [], k = [];
-  return e = class extends h {
-    constructor() {
-      super(...arguments);
-      p(this, n);
-      p(this, b);
-      c(this, n, d(this, _, !1)), c(this, b, (d(this, g), d(this, f, !1))), this._language = (d(this, k), new $(this)), this._observer = new x(this, {
-        target: null,
-        callback: (r) => this._toggleButtonVisibilityOnIntersect(r)
-      });
-    }
-    /** Flag to show/hide the scroll up button inside the sidebar on mobile. */
-    get hideScrollUpButton() {
-      return m(this, n);
-    }
-    set hideScrollUpButton(r) {
-      c(this, n, r);
-    }
-    get _scrollUpButtonVisible() {
-      return m(this, b);
-    }
-    set _scrollUpButtonVisible(r) {
-      c(this, b, r);
-    }
-    willUpdate(r) {
-      if (super.willUpdate(r), r.has("hideScrollUpButton")) {
-        const t = this._intersector();
-        !this.hideScrollUpButton && t ? this._observer.observe(t) : t && this._observer.unobserve(t);
-      }
-    }
-    firstUpdated(r) {
-      super.firstUpdated(r), this.hideScrollUpButton || this._observer.observe(this._intersector());
-    }
-    _intersector() {
-      var r;
-      return ((r = this.shadowRoot) == null ? void 0 : r.querySelector("#intersector")) ?? null;
-    }
-    /**
-     * Button click callback to trigger the scroll to container top
-     * @private
-     */
-    _onScrollButtonClick() {
-      this.scrollIntoView({ behavior: "smooth" });
-    }
-    /**
-     * Intersection callback. Toggles the visibility.
-     * @param entries
-     * @private
-     */
-    _toggleButtonVisibilityOnIntersect(r) {
-      r.forEach((t) => {
-        const l = !t.isIntersecting;
-        this.toggleAttribute("data-scroll-up-button-visible", l), this._scrollUpButtonVisible = l;
-      });
-    }
-    render() {
-      return U`
-      <div class="sbb-map-container">
-        <div class="sbb-map-container__map">
-          <slot name="map"></slot>
-        </div>
-        <div class="sbb-map-container__sidebar" @scroll=${(r) => D(r, document)}>
-          <span id="intersector"></span>
-
-          <slot></slot>
-
-          ${this.hideScrollUpButton ? z : U`<sbb-accent-button
-                class="sbb-map-container__sidebar-button"
-                size="l"
-                icon-name="location-pin-map-small"
-                type="button"
-                @click=${() => this._onScrollButtonClick()}
-                ?inert=${!this._scrollUpButtonVisible}
-              >
-                ${L[this._language.current]}
-              </sbb-accent-button>`}
-        </div>
-      </div>
-    `;
-    }
-  }, n = new WeakMap(), b = new WeakMap(), s = e, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    v = [O(), E({ attribute: "hide-scroll-up-button", reflect: !0, type: Boolean })], w = [C()], u(e, null, v, { kind: "accessor", name: "hideScrollUpButton", static: !1, private: !1, access: { has: (t) => "hideScrollUpButton" in t, get: (t) => t.hideScrollUpButton, set: (t, l) => {
-      t.hideScrollUpButton = l;
-    } }, metadata: r }, _, g), u(e, null, w, { kind: "accessor", name: "_scrollUpButtonVisible", static: !1, private: !1, access: { has: (t) => "_scrollUpButtonVisible" in t, get: (t) => t._scrollUpButtonVisible, set: (t, l) => {
-      t._scrollUpButtonVisible = l;
-    } }, metadata: r }, f, k), u(null, i = { value: s }, a, { kind: "class", name: s.name, metadata: r }, null, o), s = i.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), e.styles = j, d(s, o), s;
-})();
+import { SbbMapContainerElement as o } from "./map-container/map-container.js";
 export {
-  N as SbbMapContainerElement
+  o as SbbMapContainerElement
 };

package/menu/common/menu-action-common.js

@@ -0,0 +1,53 @@
+var f = (t) => {
+  throw TypeError(t);
+};
+var v = (t, e, o) => e.has(t) || f("Cannot " + o);
+var g = (t, e, o) => (v(t, e, "read from private field"), o ? o.call(t) : e.get(t)), h = (t, e, o) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), x = (t, e, o, s) => (v(t, e, "write to private field"), s ? s.call(t, o) : e.set(t, o), o);
+import { __esDecorate as _, __runInitializers as c } from "tslib";
+import { css as w, nothing as k } from "lit";
+import { property as S } from "lit/decorators.js";
+import { html as y } from "lit/static-html.js";
+import { slotState as T, forceType as M } from "../../core/decorators.js";
+import { SbbDisabledMixin as I } from "../../core/mixins.js";
+import { SbbIconNameMixin as C } from "../../icon.js";
+const D = w`*,:before,:after{box-sizing:border-box}:host{outline:none!important;--sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);--sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);--sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);--sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);--sbb-menu-action-cursor: pointer;--sbb-menu-action-color: var(--sbb-color-white);--sbb-menu-action-forced-color-border-color: CanvasText;--sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);display:block}@media (any-hover: hover){:host(:hover:not([disabled],:disabled,[disabled-interactive])){--sbb-menu-background-color: var(--sbb-color-iron);--sbb-menu-action-forced-color-border-color: Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor: default;--sbb-menu-action-color: var(--sbb-color-graphite);--sbb-menu-action-forced-color-border-color: GrayText;pointer-events:none;cursor:default}@media (forced-colors: active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color: GrayText}}@media (forced-colors: active){:host([data-button]){--sbb-menu-action-color: ButtonText}}:host([sbb-badge]:not([icon-name],[data-slot-names~=icon])):after{inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important;translate:50% -50%}:host([sbb-badge]:is([icon-name],[data-slot-names~=icon])):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:is(.sbb-menu-button,.sbb-menu-link){text-decoration:none;display:block;width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none}.sbb-menu-action__content{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color)}:host(:focus-visible) .sbb-menu-action__content,:focus-visible .sbb-menu-action__content{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media (forced-colors: active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}.sbb-menu-action__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}.sbb-menu-action__amount{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;align-items:center;justify-content:center;padding-inline:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-color-red);color:var(--sbb-color-white);min-width:var(--sbb-spacing-fixed-4x);max-height:var(--sbb-spacing-fixed-4x);flex-shrink:0;margin-inline-start:auto}@media (forced-colors: active){.sbb-menu-action__amount{color:var(--sbb-menu-action-color)}}`, P = (t) => (() => {
+  var r, n;
+  let o = [T()], s, l = [], a, d = C(I(t)), u, m = [], p = [];
+  return n = class extends d {
+    constructor() {
+      super(...arguments);
+      h(this, r, c(this, m, ""));
+      c(this, p);
+    }
+    /**
+     * Value shown as badge at component end.
+     * @deprecated Will be removed with next major version. Use the sbb-badge attribute on a sbb-icon as alternative.
+     * @internal
+     */
+    get amount() {
+      return g(this, r);
+    }
+    set amount(i) {
+      x(this, r, i);
+    }
+    renderTemplate() {
+      return y`
+        <span class="sbb-menu-action__content">
+          <span class="sbb-menu-action__icon"> ${super.renderIconSlot()} </span>
+          <span class="sbb-menu-action__label">
+            <slot></slot>
+          </span>
+          ${this.amount && !this.disabled ? y`<span class="sbb-menu-action__amount">${this.amount}</span>` : k}
+        </span>
+      `;
+    }
+  }, r = new WeakMap(), a = n, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    u = [M(), S()], _(n, null, u, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (b) => "amount" in b, get: (b) => b.amount, set: (b, z) => {
+      b.amount = z;
+    } }, metadata: i }, m, p), _(null, s = { value: a }, o, { kind: "class", name: a.name, metadata: i }, null, l), a = s.value, i && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), n.styles = D, c(a, l), a;
+})();
+export {
+  P as SbbMenuActionCommonElementMixin
+};

package/menu/common.d.ts

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

package/menu/common.d.ts.map

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

package/menu/common.js

@@ -1,53 +1,4 @@
-var p = (t) => {
-  throw TypeError(t);
-};
-var v = (t, o, e) => o.has(t) || p("Cannot " + e);
-var g = (t, o, e) => (v(t, o, "read from private field"), e ? e.call(t) : o.get(t)), h = (t, o, e) => o.has(t) ? p("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, e), x = (t, o, e, s) => (v(t, o, "write to private field"), s ? s.call(t, e) : o.set(t, e), e);
-import { __esDecorate as _, __runInitializers as c } from "tslib";
-import { css as w, nothing as k } from "lit";
-import { property as S } from "lit/decorators.js";
-import { html as y } from "lit/static-html.js";
-import { slotState as T, forceType as M } from "../core/decorators.js";
-import { SbbDisabledMixin as I } from "../core/mixins.js";
-import { SbbIconNameMixin as C } from "../icon.js";
-const D = w`*,:before,:after{box-sizing:border-box}:host{outline:none!important;--sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);--sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);--sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);--sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);--sbb-menu-action-cursor: pointer;--sbb-menu-action-color: var(--sbb-color-white);--sbb-menu-action-forced-color-border-color: CanvasText;--sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);display:block}@media (any-hover: hover){:host(:hover:not([disabled],:disabled,[disabled-interactive])){--sbb-menu-background-color: var(--sbb-color-iron);--sbb-menu-action-forced-color-border-color: Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor: default;--sbb-menu-action-color: var(--sbb-color-graphite);--sbb-menu-action-forced-color-border-color: GrayText;pointer-events:none;cursor:default}@media (forced-colors: active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color: GrayText}}@media (forced-colors: active){:host([data-button]){--sbb-menu-action-color: ButtonText}}:host([sbb-badge]:not([icon-name],[data-slot-names~=icon])):after{inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important;translate:50% -50%}:host([sbb-badge]:is([icon-name],[data-slot-names~=icon])):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:is(.sbb-menu-button,.sbb-menu-link){text-decoration:none;display:block;width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none}.sbb-menu-action__content{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-menu-action__content,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :focus-visible .sbb-menu-action__content{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}.sbb-menu-action__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}.sbb-menu-action__amount{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;align-items:center;justify-content:center;padding-inline:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-color-red);color:var(--sbb-color-white);min-width:var(--sbb-spacing-fixed-4x);max-height:var(--sbb-spacing-fixed-4x);flex-shrink:0;margin-inline-start:auto}@media (forced-colors: active){.sbb-menu-action__amount{color:var(--sbb-menu-action-color)}}`, P = (t) => (() => {
-  var r, n;
-  let e = [T()], s, l = [], a, d = C(I(t)), u, m = [], f = [];
-  return n = class extends d {
-    constructor() {
-      super(...arguments);
-      h(this, r, c(this, m, ""));
-      c(this, f);
-    }
-    /**
-     * Value shown as badge at component end.
-     * @deprecated Will be removed with next major version. Use the sbb-badge attribute on a sbb-icon as alternative.
-     * @internal
-     */
-    get amount() {
-      return g(this, r);
-    }
-    set amount(i) {
-      x(this, r, i);
-    }
-    renderTemplate() {
-      return y`
-        <span class="sbb-menu-action__content">
-          <span class="sbb-menu-action__icon"> ${super.renderIconSlot()} </span>
-          <span class="sbb-menu-action__label">
-            <slot></slot>
-          </span>
-          ${this.amount && !this.disabled ? y`<span class="sbb-menu-action__amount">${this.amount}</span>` : k}
-        </span>
-      `;
-    }
-  }, r = new WeakMap(), a = n, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    u = [M(), S()], _(n, null, u, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (b) => "amount" in b, get: (b) => b.amount, set: (b, z) => {
-      b.amount = z;
-    } }, metadata: i }, m, f), _(null, s = { value: a }, e, { kind: "class", name: a.name, metadata: i }, null, l), a = s.value, i && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), n.styles = D, c(a, l), a;
-})();
+import { SbbMenuActionCommonElementMixin as e } from "./common/menu-action-common.js";
 export {
-  P as SbbMenuActionCommonElementMixin
+  e as SbbMenuActionCommonElementMixin
 };

package/menu/menu/menu.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { CSSResultGroup, PropertyDeclaration, TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../../core/base-elements.js';
 import { SbbMenuButtonElement } from '../menu-button.js';
 import { SbbMenuLinkElement } from '../menu-link.js';
@@ -22,9 +22,7 @@ export declare class SbbMenuElement extends SbbMenuElement_base {
      * The element that will trigger the menu overlay.
      * Accepts both a string (id of an element) or an HTML element.
      */
-    set trigger(value: string | HTMLElement | null);
-    get trigger(): string | HTMLElement | null;
-    private _trigger;
+    accessor trigger: string | HTMLElement | null;
     /**
      * This will be forwarded as aria-label to the inner list.
      * Used only if the menu automatically renders the actions inside as a list.
@@ -32,11 +30,12 @@ export declare class SbbMenuElement extends SbbMenuElement_base {
     accessor listAccessibilityLabel: string;
     private _menu;
     private _triggerElement;
+    private _triggerAbortController;
+    private _triggerIdReferenceController;
     private _isPointerDownEventOnMenu;
-    private _menuController;
     private _windowEventsController;
-    private _sbbEscapableOverlayController;
-    private _focusHandler;
+    private _escapableOverlayController;
+    private _focusTrapController;
     private _scrollHandler;
     private _inertController;
     private _mediaMatcher;
@@ -57,18 +56,17 @@ export declare class SbbMenuElement extends SbbMenuElement_base {
      */
     private _onClick;
     private _handleKeyDown;
-    private _removeTriggerClickListener;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     private _checkListCase;
-    private _configure;
+    private _configureTrigger;
     private _attachWindowEvents;
     private _closeOnInteractiveElementClick;
     private _pointerDownListener;
     private _closeOnBackdropClick;
     private _onMenuAnimationEnd;
-    private _setMenuFocus;
     private _setMenuPosition;
     protected render(): TemplateResult;
 }

package/menu/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAqBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBAKM,cAAe,SAAQ,mBAGH;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,8BAA8B,CAA2C;IACjF,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAQlB;;IAQH;;OAEG;IACI,IAAI,IAAI,IAAI;IAyBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAmBpB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAuBtB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,2BAA2B;cAWhB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAWrD,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAsB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAUb,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAkBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBAKM,cAAe,SAAQ,mBAGH;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,SACgB,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAE5D;;;OAGG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,6BAA6B,CAAiD;IACtF,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAQlB;;IAQH;;OAEG;IACI,IAAI,IAAI,IAAI;IAyBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAmBpB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAsBtB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;cA2CH,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAWrD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAQ5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAQP,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,iBAAiB;IAyBzB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAsB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/menu/menu/menu.js

@@ -0,0 +1,227 @@
+var C = (s) => {
+  throw TypeError(s);
+};
+var A = (s, r, n) => r.has(s) || C("Cannot " + n);
+var u = (s, r, n) => (A(s, r, "read from private field"), n ? n.call(s) : r.get(s)), g = (s, r, n) => r.has(s) ? C("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, n), d = (s, r, n, o) => (A(s, r, "write to private field"), o ? o.call(s, n) : r.set(s, n), n);
+import { __esDecorate as _, __runInitializers as m } from "tslib";
+import { css as T, isServer as N, html as L } from "lit";
+import { customElement as B, property as S } from "lit/decorators.js";
+import { ref as I } from "lit/directives/ref.js";
+import { SbbFocusTrapController as M, isArrowKeyOrPageKeysPressed as P, interactivityChecker as D, getNextElementIndex as R } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as z } from "../../core/base-elements.js";
+import { SbbIdReferenceController as K, SbbEscapableOverlayController as U, SbbInertController as H, SbbMediaMatcherController as $, SbbMediaQueryBreakpointSmallAndBelow as p } from "../../core/controllers.js";
+import { hostAttributes as q, forceType as Y } from "../../core/decorators.js";
+import { SbbScrollHandler as Z, isZeroAnimationDuration as F } from "../../core/dom.js";
+import { forwardEvent as j } from "../../core/eventing.js";
+import { SbbNamedSlotListMixin as V } from "../../core/mixins.js";
+import { isEventOnElement as O, removeAriaOverlayTriggerAttributes as W, setAriaOverlayTriggerAttributes as Q, getElementPosition as G } from "../../core/overlay.js";
+const J = T`*,:before,:after{box-sizing:border-box}:host{display:contents;--sbb-menu-position-x: 0;--sbb-menu-position-y: 0;--sbb-menu-animation-duration: var( --sbb-disable-animation-duration, 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: 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}@media (min-width: 52.5rem){:host{--sbb-menu-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-menu-max-width: 20rem;--sbb-menu-min-width: 11.25rem}}:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-visibility: visible;--sbb-menu-backdrop-color: var(--sbb-color-black-alpha-20)}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-menu-backdrop-color: transparent}}:host(:not([data-state=closed])){--sbb-menu-inset: 0}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){display:block;padding-inline:var(--sbb-spacing-fixed-5x)}::slotted(sbb-divider){--sbb-divider-color: var(--sbb-color-iron);margin-block:var(--sbb-spacing-fixed-2x)}.sbb-menu__container{position:fixed;pointer-events:none;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index))}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility);pointer-events:all;position:fixed;inset:var(--sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility}.sbb-menu{display:none;opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;position:absolute;inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:unset;color:var(--sbb-color-white);border:none;border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-color-black);padding:0;overflow:hidden}:host([data-state]:not([data-state=closed])) .sbb-menu{display:block;opacity:1;pointer-events:all;animation-name:open;animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing)}:host([data-state][data-state=closing]) .sbb-menu{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;max-height:fit-content;border-radius:var(--sbb-menu-border-radius)}:host(:not([data-state=closed])) .sbb-menu{top:var(--sbb-menu-position-y);left:var(--sbb-menu-position-x);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-menu__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-menu__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-menu__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-menu__content::-webkit-scrollbar-button,.sbb-menu__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-menu__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);overflow:auto;outline:none}.sbb-menu__content:after{content:"";display:block;height:var(--sbb-spacing-fixed-8x)}@media (min-width: 52.5rem){.sbb-menu__content{max-height:fit-content}:host(:not([data-state=closed])) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}.sbb-menu-list{list-style:none;margin:0;padding:0;font-size:inherit}@keyframes open{0%{opacity:0;transform:var(--sbb-menu-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-menu-transform)}}`, X = 8, ee = [
+  "A",
+  "BUTTON",
+  "SBB-BUTTON",
+  "SBB-BUTTON-LINK",
+  "SBB-LINK",
+  "SBB-BLOCK-LINK",
+  "SBB-LINK-BUTTON",
+  "SBB-BLOCK-LINK-BUTTON"
+];
+let te = 0, _e = (() => {
+  var c, h, a;
+  let s = [B("sbb-menu"), q({
+    popover: "manual"
+  })], r, n = [], o, v = V(z), f, w = [], y = [], k, x = [], E = [];
+  return a = class extends v {
+    constructor() {
+      var e, t;
+      super();
+      g(this, c);
+      g(this, h);
+      this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], d(this, c, m(this, w, null)), d(this, h, (m(this, y), m(this, x, ""))), this._menu = m(this, E), this._triggerElement = null, this._triggerIdReferenceController = new K(this, "trigger"), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new U(this), this._focusTrapController = new M(this), this._scrollHandler = new Z(), this._inertController = new H(this), this._mediaMatcher = new $(this, {
+        [p]: (i) => {
+          i && (this.state === "opening" || this.state === "opened") ? this._scrollHandler.disableScroll() : this._scrollHandler.enableScroll();
+        }
+      }), this._pointerDownListener = (i) => {
+        this._isPointerDownEventOnMenu = O(this._menu, i);
+      }, this._closeOnBackdropClick = (i) => {
+        !this._isPointerDownEventOnMenu && !O(this._menu, i) && this.close();
+      }, (e = this.addEventListener) == null || e.call(this, "click", (i) => this._onClick(i)), (t = this.addEventListener) == null || t.call(this, "keydown", (i) => this._handleKeyDown(i));
+    }
+    /**
+     * The element that will trigger the menu overlay.
+     * Accepts both a string (id of an element) or an HTML element.
+     */
+    get trigger() {
+      return u(this, c);
+    }
+    set trigger(e) {
+      d(this, c, e);
+    }
+    /**
+     * This will be forwarded as aria-label to the inner list.
+     * Used only if the menu automatically renders the actions inside as a list.
+     */
+    get listAccessibilityLabel() {
+      return u(this, h);
+    }
+    set listAccessibilityLabel(e) {
+      d(this, h, e);
+    }
+    /**
+     * Opens the menu on trigger click.
+     */
+    open() {
+      var e, t;
+      this.state === "closing" || !this._menu || this.willOpen.emit() && ((e = this.showPopover) == null || e.call(this), this.state = "opening", this._setMenuPosition(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"), this._mediaMatcher.matches(p) && this._scrollHandler.disableScroll(), this._isZeroAnimationDuration() && this._handleOpening());
+    }
+    /**
+     * Closes the menu.
+     */
+    close() {
+      var e;
+      this.state !== "opening" && this.willClose.emit() && (this.state = "closing", (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    _isZeroAnimationDuration() {
+      return F(this, "--sbb-menu-animation-duration");
+    }
+    _handleOpening() {
+      this.state = "opened", this._inertController.activate(), this._escapableOverlayController.connect(), this._focusTrapController.focusInitialElement(), this._focusTrapController.enabled = !0, this._attachWindowEvents(), this.didOpen.emit();
+    }
+    _handleClosing() {
+      var e, t, i, l, b;
+      this.state = "closed", (e = this.hidePopover) == null || e.call(this), (i = (t = this._menu) == null ? void 0 : t.firstElementChild) == null || i.scrollTo(0, 0), this._inertController.deactivate(), (l = this._triggerElement) == null || l.focus({
+        // When inside the sbb-header, we prevent the scroll to avoid the snapping to the top of the page
+        preventScroll: this._triggerElement.localName === "sbb-header-button" || this._triggerElement.localName === "sbb-header-link"
+      }), this._escapableOverlayController.disconnect(), this.didClose.emit(), (b = this._windowEventsController) == null || b.abort(), this._focusTrapController.enabled = !1, this._scrollHandler.enableScroll();
+    }
+    /**
+     * Handles click and checks if its target is a sbb-menu-button/sbb-menu-link.
+     */
+    _onClick(e) {
+      const t = e.target;
+      ((t == null ? void 0 : t.localName) === "sbb-menu-button" || (t == null ? void 0 : t.localName) === "sbb-menu-link") && this.close();
+    }
+    _handleKeyDown(e) {
+      if (!P(e))
+        return;
+      e.preventDefault();
+      const t = Array.from(this.querySelectorAll("sbb-menu-button, sbb-menu-link")).filter((b) => (!b.disabled || b.disabledInteractive) && D.isVisible(b)), i = t.findIndex((b) => b === e.target);
+      let l;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+          l = R(e, i, t.length);
+          break;
+        case "PageUp":
+        case "Home":
+          l = 0;
+          break;
+        case "End":
+        case "PageDown":
+          l = t.length - 1;
+          break;
+        // this should never happen since all the case allowed by `isArrowKeyOrPageKeysPressed` should be covered
+        default:
+          l = 0;
+      }
+      t[l].focus();
+    }
+    // Removes trigger click listener on trigger change.
+    createRenderRoot() {
+      var t;
+      const e = super.createRenderRoot();
+      return (t = this.shadowRoot) == null || t.addEventListener("slotchange", (i) => this._checkListCase(i), {
+        capture: !0
+      }), e;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id || (this.id = `sbb-menu-${te++}`), this._configureTrigger();
+    }
+    disconnectedCallback() {
+      var e, t;
+      super.disconnectedCallback(), this._triggerElement = null, (e = this._triggerAbortController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._scrollHandler.enableScroll();
+    }
+    requestUpdate(e, t, i) {
+      super.requestUpdate(e, t, i), !N && (!e || e === "trigger") && this.hasUpdated && this._configureTrigger();
+    }
+    _checkListCase(e) {
+      var t;
+      (t = this.children) != null && t.length && Array.from(this.children ?? []).every((i) => i.localName === "sbb-menu-button" || i.localName === "sbb-menu-link") || (e.stopImmediatePropagation(), this.listChildren.length && (this.listChildren.forEach((i) => i.removeAttribute("slot")), this.listChildren = []));
+    }
+    // Check if the trigger is valid and attach click event listeners.
+    _configureTrigger() {
+      var t;
+      const e = this.trigger instanceof HTMLElement ? this.trigger : this._triggerIdReferenceController.find();
+      e !== this._triggerElement && ((t = this._triggerAbortController) == null || t.abort(), W(this._triggerElement), this._triggerElement = e, this._triggerElement && (Q(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+        signal: this._triggerAbortController.signal
+      })));
+    }
+    _attachWindowEvents() {
+      this._windowEventsController = new AbortController(), document.addEventListener("scroll", () => this._setMenuPosition(), {
+        passive: !0,
+        signal: this._windowEventsController.signal,
+        // Without capture, other scroll contexts would not bubble to this event listener.
+        // Capture allows us to react to all scroll contexts in this DOM.
+        capture: !0
+      }), window.addEventListener("resize", () => this._setMenuPosition(), {
+        passive: !0,
+        signal: this._windowEventsController.signal
+      }), window.addEventListener("pointerdown", this._pointerDownListener, {
+        signal: this._windowEventsController.signal
+      }), window.addEventListener("pointerup", this._closeOnBackdropClick, {
+        signal: this._windowEventsController.signal
+      });
+    }
+    // Close menu at any click on an interactive element inside the <sbb-menu> that bubbles to the container.
+    _closeOnInteractiveElementClick(e) {
+      const t = e.target;
+      ee.includes(t.nodeName) && !t.hasAttribute("disabled") && this.close();
+    }
+    // Set menu position (x, y) to '0' once the menu is closed and the transition ended to prevent the
+    // viewport from overflowing. And set the focus to the first focusable element once the menu is open.
+    // In rare cases it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    _onMenuAnimationEnd(e) {
+      e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
+    }
+    // Set menu position and max height if the breakpoint is medium-ultra.
+    _setMenuPosition() {
+      if ((this._mediaMatcher.matches(p) ?? !0) || !this._menu || !this._triggerElement || this.state === "closing")
+        return;
+      const e = G(this.shadowRoot.querySelector(".sbb-menu__content"), this._triggerElement, this.shadowRoot.querySelector(".sbb-menu__container"), {
+        verticalOffset: X
+      });
+      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=${this._onMenuAnimationEnd}
+          class="sbb-menu"
+          ${I((e) => this._menu = e)}
+        >
+          <div
+            @click=${(e) => this._closeOnInteractiveElementClick(e)}
+            @scroll=${(e) => j(e, document)}
+            class="sbb-menu__content"
+          >
+            ${this.listChildren.length ? this.renderList({ class: "sbb-menu-list", ariaLabel: this.listAccessibilityLabel }) : L`<slot></slot>`}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+  }, c = new WeakMap(), h = new WeakMap(), o = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    f = [S()], k = [Y(), S({ attribute: "list-accessibility-label" })], _(a, null, f, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, i) => {
+      t.trigger = i;
+    } }, metadata: e }, w, y), _(a, null, k, { kind: "accessor", name: "listAccessibilityLabel", static: !1, private: !1, access: { has: (t) => "listAccessibilityLabel" in t, get: (t) => t.listAccessibilityLabel, set: (t, i) => {
+      t.listAccessibilityLabel = i;
+    } }, metadata: e }, x, E), _(null, r = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, n), o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = J, m(o, n), o;
+})();
+export {
+  _e as SbbMenuElement
+};

package/menu/menu-button/menu-button.js

@@ -0,0 +1,17 @@
+import { __esDecorate as i, __runInitializers as m } from "tslib";
+import { customElement as s } from "lit/decorators.js";
+import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
+import { SbbDisabledTabIndexActionMixin as u } from "../../core/mixins.js";
+import { SbbMenuActionCommonElementMixin as c } from "../common.js";
+let x = (() => {
+  var e;
+  let r = [s("sbb-menu-button")], l, n = [], t, o = u(c(b));
+  return e = class extends o {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    i(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, n), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), m(t, n);
+  })(), t;
+})();
+export {
+  x as SbbMenuButtonElement
+};

package/menu/menu-button.d.ts

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

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

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

package/menu/menu-button.js

@@ -1,17 +1,4 @@
-import { __esDecorate as i, __runInitializers as m } from "tslib";
-import { customElement as s } from "lit/decorators.js";
-import { SbbButtonBaseElement as b } from "../core/base-elements.js";
-import { SbbDisabledTabIndexActionMixin as u } from "../core/mixins.js";
-import { SbbMenuActionCommonElementMixin as c } from "./common.js";
-let x = (() => {
-  var e;
-  let r = [s("sbb-menu-button")], l, n = [], t, o = u(c(b));
-  return e = class extends o {
-  }, t = e, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    i(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, n), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), m(t, n);
-  })(), t;
-})();
+import { SbbMenuButtonElement as n } from "./menu-button/menu-button.js";
 export {
-  x as SbbMenuButtonElement
+  n as SbbMenuButtonElement
 };

package/menu/menu-link/menu-link.js

@@ -0,0 +1,17 @@
+import { __esDecorate as m, __runInitializers as o } from "tslib";
+import { customElement as s } from "lit/decorators.js";
+import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
+import { SbbDisabledInteractiveMixin as b } from "../../core/mixins.js";
+import { SbbMenuActionCommonElementMixin as u } from "../common.js";
+let y = (() => {
+  var t;
+  let n = [s("sbb-menu-link")], l, i = [], e, r = b(u(c));
+  return t = class extends r {
+  }, e = t, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    m(null, l = { value: e }, n, { kind: "class", name: e.name, metadata: a }, null, i), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), o(e, i);
+  })(), e;
+})();
+export {
+  y as SbbMenuLinkElement
+};

package/menu/menu-link.d.ts

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

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

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