@sbb-esta/lyne-elements 2.5.1 → 2.6.0

package/header/header.js

@@ -1,27 +1,29 @@
-var H = (s) => {
+var F = (s) => {
   throw TypeError(s);
 };
-var D = (s, a, r) => a.has(s) || H("Cannot " + r);
-var m = (s, a, r) => (D(s, a, "read from private field"), r ? r.call(s) : a.get(s)), _ = (s, a, r) => a.has(s) ? H("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), d = (s, a, r, l) => (D(s, a, "write to private field"), l ? l.call(s, r) : a.set(s, r), r);
-import { __runInitializers as n, __esDecorate as f } from "tslib";
-import { css as B, LitElement as M, isServer as F, html as N } from "lit";
-import { customElement as R, property as g, state as U } from "lit/decorators.js";
-import { SbbFocusVisibleWithinController as Z } from "../core/a11y.js";
+var U = (s, r, a) => r.has(s) || F("Cannot " + a);
+var m = (s, r, a) => (U(s, r, "read from private field"), a ? a.call(s) : r.get(s)), _ = (s, r, a) => r.has(s) ? F("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), l = (s, r, a, d) => (U(s, r, "write to private field"), d ? d.call(s, a) : r.set(s, a), a);
+import { __esDecorate as p, __runInitializers as n } from "tslib";
+import { css as q, LitElement as B, isServer as R, html as M } from "lit";
+import { customElement as N, property as v, state as Z } from "lit/decorators.js";
+import { SbbFocusVisibleWithinController as Q } from "../core/a11y.js";
+import { SbbIdReferenceController as V } from "../core/controllers.js";
 import { forceType as j } from "../core/decorators.js";
-import { isLean as q, findReferencedElement as Q } from "../core/dom.js";
-import { SbbHydrationMixin as V } from "../core/mixins.js";
-const W = B`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-fixed]){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-visible]){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll][data-fixed][data-has-visible-focus-within]){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-color-white);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, Y = "[aria-controls][aria-expanded='true']";
-let ae = (() => {
-  var h, b, c, u, o;
-  let s = [R("sbb-header")], a, r = [], l, v = V(M), x = [], w, O = [], S = [], y, E, z = [], k = [], T, C = [], A = [], I, L = [], P = [];
-  return o = class extends v {
+import { isLean as W } from "../core/dom.js";
+import { SbbHydrationMixin as Y } from "../core/mixins.js";
+const G = q`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-fixed]){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-visible]){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll][data-fixed][data-has-visible-focus-within]){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-color-white);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, J = "[aria-controls][aria-expanded='true']";
+let le = (() => {
+  var h, c, b, f, u, o;
+  let s = [N("sbb-header")], r, a = [], d, x = Y(B), w, O = [], S = [], y, E = [], z = [], k, T = [], C = [], I, L = [], A = [], H, P = [], D = [];
+  return o = class extends x {
     constructor() {
-      super(...arguments);
+      super();
       _(this, h);
-      _(this, b);
       _(this, c);
+      _(this, b);
+      _(this, f);
       _(this, u);
-      d(this, h, (n(this, x), n(this, O, !1))), this._scrollOrigin = (n(this, S), F ? null : document), d(this, b, n(this, z, !1)), d(this, c, (n(this, k), n(this, C, q() ? "s" : "m"))), d(this, u, (n(this, A), n(this, L, !0))), this._scrollElement = n(this, P), this._lastScroll = 0;
+      l(this, h, n(this, O, !1)), l(this, c, (n(this, S), n(this, E, R ? null : document))), l(this, b, (n(this, z), n(this, T, !1))), l(this, f, (n(this, C), n(this, L, W() ? "s" : "m"))), l(this, u, (n(this, A), n(this, P, !0))), this._scrollElement = n(this, D), this._lastScroll = 0, this._scrollOriginIdReferenceController = new V(this, "scrollOrigin"), this.addController(new Q(this));
     }
     /**
      * Whether to allow the header content to stretch to full width.
@@ -30,72 +32,72 @@ let ae = (() => {
     get expanded() {
       return m(this, h);
     }
-    set expanded(t) {
-      d(this, h, t);
+    set expanded(e) {
+      l(this, h, e);
     }
+    // TODO: Remove the document as default assignment and refactor logic to return document
     /** The element's id or the element on which the scroll listener is attached. */
-    set scrollOrigin(t) {
-      const e = this._scrollOrigin;
-      this._scrollOrigin = t, this._updateScrollOrigin(this._scrollOrigin, e);
-    }
     get scrollOrigin() {
-      return this._scrollOrigin;
+      return m(this, c);
+    }
+    set scrollOrigin(e) {
+      l(this, c, e);
     }
     /** Whether the header should hide and show on scroll. */
     get hideOnScroll() {
       return m(this, b);
     }
-    set hideOnScroll(t) {
-      d(this, b, t);
+    set hideOnScroll(e) {
+      l(this, b, e);
     }
     /**
      * Size of the header, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return m(this, c);
+      return m(this, f);
     }
-    set size(t) {
-      d(this, c, t);
+    set size(e) {
+      l(this, f, e);
     }
     get _headerOnTop() {
       return m(this, u);
     }
-    set _headerOnTop(t) {
-      d(this, u, t);
-    }
-    _updateScrollOrigin(t, e) {
-      if (t !== e) {
-        this._setListenerOnScrollElement(t);
-        const i = this._getCurrentScrollProperty("scrollTop");
-        this._lastScroll = i <= 0 ? 0 : i;
-      }
+    set _headerOnTop(e) {
+      l(this, u, e);
     }
     /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
     connectedCallback() {
-      super.connectedCallback(), this._setListenerOnScrollElement(this.scrollOrigin), new Z(this);
+      super.connectedCallback(), this._updateScrollListener();
     }
     /** Removes the scroll listener, if previously attached. */
     disconnectedCallback() {
-      var t;
-      super.disconnectedCallback(), (t = this._scrollEventsController) == null || t.abort();
+      var e;
+      super.disconnectedCallback(), this._scrollElement = null, (e = this._scrollEventsController) == null || e.abort();
     }
-    /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
-    _setListenerOnScrollElement(t) {
-      var e, i;
-      (e = this._scrollEventsController) == null || e.abort(), this._scrollEventsController = new AbortController(), this._scrollElement = Q(t) || (F ? null : document), this._scrollFunction = this._getScrollFunction.bind(this), (i = this._scrollElement) == null || i.addEventListener("scroll", this._scrollFunction, {
+    requestUpdate(e, t, i) {
+      super.requestUpdate(e, t, i), !R && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
+    }
+    _updateScrollListener() {
+      var i;
+      const e = this.scrollOrigin instanceof HTMLElement ? this.scrollOrigin : this._scrollOriginIdReferenceController.find() ?? document;
+      if (e === this._scrollElement || ((i = this._scrollEventsController) == null || i.abort(), this._scrollElement = e, !this._scrollElement))
+        return;
+      this._scrollEventsController = new AbortController(), this._scrollFunction = this._getScrollFunction.bind(this), this._scrollElement.addEventListener("scroll", this._scrollFunction, {
         passive: !0,
         signal: this._scrollEventsController.signal
       });
+      const t = this._getCurrentScrollProperty("scrollTop");
+      this._lastScroll = t <= 0 ? 0 : t;
     }
     /** Returns the correct function to attach on scroll. */
     _getScrollFunction() {
       return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
     }
     /** Returns the requested property of the scrollContext. */
-    _getCurrentScrollProperty(t) {
-      var e;
-      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[t] || this._scrollElement.body[t] : ((e = this._scrollElement) == null ? void 0 : e[t]) || 0;
+    _getCurrentScrollProperty(e) {
+      var t;
+      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : ((t = this._scrollElement) == null ? void 0 : t[e]) || 0;
     }
     /**
      * Sets the correct value for `scrollTop`, then:
@@ -104,8 +106,8 @@ let ae = (() => {
      * - shows the header and re-apply the shadow if the element/document has been scrolled up.
      */
     _scrollListener() {
-      const t = this._getCurrentScrollProperty("scrollTop");
-      this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - t <= 0 || (this.toggleAttribute("data-shadow", t !== 0), t > this.offsetHeight && t > 0 && this._lastScroll < t && this._closeOpenOverlays(), t > this.offsetHeight * 2 ? (this._headerOnTop = !1, t > 0 && this._lastScroll < t ? ["data-shadow", "data-visible"].forEach((e) => this.removeAttribute(e)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach((e) => this.toggleAttribute(e, !0))) : (t === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach((e) => this.removeAttribute(e))), this._lastScroll = t <= 0 ? 0 : t);
+      const e = this._getCurrentScrollProperty("scrollTop");
+      this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleAttribute("data-shadow", e !== 0), e > this.offsetHeight && e > 0 && this._lastScroll < e && this._closeOpenOverlays(), e > this.offsetHeight * 2 ? (this._headerOnTop = !1, e > 0 && this._lastScroll < e ? ["data-shadow", "data-visible"].forEach((t) => this.removeAttribute(t)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach((t) => this.toggleAttribute(t, !0))) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach((t) => this.removeAttribute(t))), this._lastScroll = e <= 0 ? 0 : e);
     }
     /** Apply the shadow if the element/document has been scrolled down. */
     _scrollShadowListener() {
@@ -114,14 +116,14 @@ let ae = (() => {
     _closeOpenOverlays() {
       if (this.hasAttribute("data-has-visible-focus-within"))
         return;
-      const t = Array.from(this.querySelectorAll(Y));
-      for (const e of t) {
-        const i = e.getAttribute("aria-controls"), p = document.getElementById(i);
-        typeof (p == null ? void 0 : p.close) == "function" && p.close();
+      const e = Array.from(this.querySelectorAll(J));
+      for (const t of e) {
+        const i = t.getAttribute("aria-controls"), g = document.getElementById(i);
+        typeof (g == null ? void 0 : g.close) == "function" && g.close();
       }
     }
     render() {
-      return N`
+      return M`
       <header class="sbb-header">
         <div class="sbb-header__wrapper">
           <slot></slot>
@@ -129,21 +131,21 @@ let ae = (() => {
       </header>
     `;
     }
-  }, h = new WeakMap(), b = new WeakMap(), c = new WeakMap(), u = new WeakMap(), l = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    w = [j(), g({ reflect: !0, type: Boolean })], y = [g({ attribute: "scroll-origin" })], E = [j(), g({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], T = [g({ reflect: !0 })], I = [U()], f(o, null, w, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
-      e.expanded = i;
-    } }, metadata: t }, O, S), f(o, null, y, { kind: "setter", name: "scrollOrigin", static: !1, private: !1, access: { has: (e) => "scrollOrigin" in e, set: (e, i) => {
-      e.scrollOrigin = i;
-    } }, metadata: t }, null, x), f(o, null, E, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (e) => "hideOnScroll" in e, get: (e) => e.hideOnScroll, set: (e, i) => {
-      e.hideOnScroll = i;
-    } }, metadata: t }, z, k), f(o, null, T, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
-      e.size = i;
-    } }, metadata: t }, C, A), f(o, null, I, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (e) => "_headerOnTop" in e, get: (e) => e._headerOnTop, set: (e, i) => {
-      e._headerOnTop = i;
-    } }, metadata: t }, L, P), f(null, a = { value: l }, s, { kind: "class", name: l.name, metadata: t }, null, r), l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = W, n(l, r), l;
+  }, h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), u = new WeakMap(), d = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    w = [j(), v({ reflect: !0, type: Boolean })], y = [v({ attribute: "scroll-origin" })], k = [j(), v({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], I = [v({ reflect: !0 })], H = [Z()], p(o, null, w, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, i) => {
+      t.expanded = i;
+    } }, metadata: e }, O, S), p(o, null, y, { kind: "accessor", name: "scrollOrigin", static: !1, private: !1, access: { has: (t) => "scrollOrigin" in t, get: (t) => t.scrollOrigin, set: (t, i) => {
+      t.scrollOrigin = i;
+    } }, metadata: e }, E, z), p(o, null, k, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (t) => "hideOnScroll" in t, get: (t) => t.hideOnScroll, set: (t, i) => {
+      t.hideOnScroll = i;
+    } }, metadata: e }, T, C), p(o, null, I, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
+      t.size = i;
+    } }, metadata: e }, L, A), p(o, null, H, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (t) => "_headerOnTop" in t, get: (t) => t._headerOnTop, set: (t, i) => {
+      t._headerOnTop = i;
+    } }, metadata: e }, P, D), p(null, r = { value: d }, s, { kind: "class", name: d.name, metadata: e }, null, a), d = r.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = G, n(d, a), d;
 })();
 export {
-  ae as SbbHeaderElement
+  le as SbbHeaderElement
 };

package/index.d.ts

@@ -34,6 +34,8 @@ import { SbbCheckboxElement } from "./checkbox/checkbox.js";
 import { SbbCheckboxGroupElement } from "./checkbox/checkbox-group.js";
 import { SbbCheckboxPanelElement } from "./checkbox/checkbox-panel.js";
 import { SbbChipLabelElement } from "./chip-label.js";
+import { SbbChipElement } from "./chip/chip.js";
+import { SbbChipGroupElement } from "./chip/chip-group.js";
 import { SbbClockElement } from "./clock.js";
 import { SbbContainerElement } from "./container/container.js";
 import { SbbStickyBarElement } from "./container/sticky-bar.js";
@@ -180,6 +182,8 @@ declare global {
   var SbbCheckboxGroupElement: SbbCheckboxGroupElement;
   var SbbCheckboxPanelElement: SbbCheckboxPanelElement;
   var SbbChipLabelElement: SbbChipLabelElement;
+  var SbbChipElement: SbbChipElement;
+  var SbbChipGroupElement: SbbChipGroupElement;
   var SbbClockElement: SbbClockElement;
   var SbbContainerElement: SbbContainerElement;
   var SbbStickyBarElement: SbbStickyBarElement;

package/index.js

@@ -34,6 +34,8 @@ import { SbbCheckboxElement } from "./checkbox/checkbox.js";
 import { SbbCheckboxGroupElement } from "./checkbox/checkbox-group.js";
 import { SbbCheckboxPanelElement } from "./checkbox/checkbox-panel.js";
 import { SbbChipLabelElement } from "./chip-label.js";
+import { SbbChipElement } from "./chip/chip.js";
+import { SbbChipGroupElement } from "./chip/chip-group.js";
 import { SbbClockElement } from "./clock.js";
 import { SbbContainerElement } from "./container/container.js";
 import { SbbStickyBarElement } from "./container/sticky-bar.js";
@@ -179,6 +181,8 @@ globalThis.SbbCheckboxElement = SbbCheckboxElement;
 globalThis.SbbCheckboxGroupElement = SbbCheckboxGroupElement;
 globalThis.SbbCheckboxPanelElement = SbbCheckboxPanelElement;
 globalThis.SbbChipLabelElement = SbbChipLabelElement;
+globalThis.SbbChipElement = SbbChipElement;
+globalThis.SbbChipGroupElement = SbbChipGroupElement;
 globalThis.SbbClockElement = SbbClockElement;
 globalThis.SbbContainerElement = SbbContainerElement;
 globalThis.SbbStickyBarElement = SbbStickyBarElement;

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,10 +30,11 @@ 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 _escapableOverlayController;
     private _focusHandler;
     private _scrollHandler;
     private _inertController;
@@ -57,12 +56,12 @@ 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;

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;AAYb,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,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;cA2CH,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAWrD,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAS5B,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,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"}