@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/selection-expansion-panel/selection-expansion-panel.d.ts

@@ -14,11 +14,11 @@ export declare class SbbSelectionExpansionPanelElement extends SbbSelectionExpan
     static styles: CSSResultGroup;
     static readonly events: Record<string, string>;
     /** The background color of the panel. */
-    color: 'white' | 'milk';
+    accessor color: 'white' | 'milk';
     /** Whether the content section is always visible. */
-    forceOpen: boolean;
+    accessor forceOpen: boolean;
     /** Whether the unselected panel has a border. */
-    borderless: boolean;
+    accessor borderless: boolean;
     /** The state of the selection panel. */
     private set _state(value);
     private get _state();

package/selection-expansion-panel/selection-expansion-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9F,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAEa,iCAAkC,SAAQ,sCAA6B;IAElF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,sBAAsB,CAIrB;IAET,2CAA2C;IAC3C,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,KAAK,MAAM,GAIjB;IAEe,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;cAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAWtB;;;;;;OAMG;IACH,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}
+{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-expansion-panel/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9F,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAcvC,OAAO,eAAe,CAAC;;AAEvB;;;;;;;;;GASG;AACH,qBAGM,iCAAkC,SAAQ,sCAA6B;IAE3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACzC,SAA4B,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAE9D,qDAAqD;IACrD,SAEgB,SAAS,EAAE,OAAO,CAAS;IAE3C,iDAAiD;IACjD,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,sBAAsB,CAIrB;IAET,2CAA2C;IAC3C,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,KAAK,MAAM,GAIjB;IAEe,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;cAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAWtB;;;;;;OAMG;IACH,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,eAAe;YAUT,oBAAoB;cAoBf,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}

package/selection-expansion-panel.js

@@ -1,129 +1,143 @@
-import { css as d, LitElement as c, isServer as h, html as u } from "lit";
-import { property as p, state as _, customElement as m } from "lit/decorators.js";
-import { SbbLanguageController as g, SbbConnectedAbortController as v } from "./core/controllers.js";
-import { slotState as x } from "./core/decorators.js";
-import { EventEmitter as r } from "./core/eventing.js";
-import { i18nExpanded as f, i18nCollapsed as w } from "./core/i18n.js";
-import { SbbHydrationMixin as y } from "./core/mixins.js";
-import "./divider.js";
-const k = d`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-expansion-panel-background: var(--sbb-color-white);--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-selection-expansion-panel-inner-background: transparent;--sbb-selection-expansion-panel-inner-border-width: 0px;--sbb-selection-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-expansion-panel-content-visibility: hidden;--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([data-size=s]){--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-expansion-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-expansion-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud)}:host([borderless]:not([data-checked])){--sbb-selection-expansion-panel-border-color: transparent}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-expansion-panel-content-visibility: visible;--sbb-selection-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs)}.sbb-selection-expansion-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-expansion-panel-background);border-radius:var(--sbb-selection-expansion-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-expansion-panel-border-width) var(--sbb-selection-expansion-panel-border-color);transition-duration:var(--sbb-selection-expansion-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-expansion-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-expansion-panel-border-width) solid var(--sbb-selection-expansion-panel-border-color);border-radius:var(--sbb-selection-expansion-panel-border-radius)}}.sbb-selection-expansion-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-expansion-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-expansion-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-expansion-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-expansion-panel__content--wrapper{display:none}.sbb-selection-expansion-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-selection-expansion-panel-content-padding-block-end);transition:padding var(--sbb-selection-expansion-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
-var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? O(t, s) : t, l = e.length - 1, b; l >= 0; l--)
-    (b = e[l]) && (o = (i ? b(t, s, o) : b(o)) || o);
-  return i && o && C(t, s, o), o;
+var U = (s) => {
+  throw TypeError(s);
 };
-let n = class extends y(c) {
-  constructor() {
-    super(...arguments), this.color = "white", this.forceOpen = !1, this.borderless = !1, this._willOpen = new r(
-      this,
-      n.events.willOpen
-    ), this._didOpen = new r(
-      this,
-      n.events.didOpen
-    ), this._willClose = new r(
-      this,
-      n.events.willClose
-    ), this._didClose = new r(
-      this,
-      n.events.didClose
-    ), this._language = new g(this), this._abort = new v(this), this._initialized = !1, this._sizeAttributeObserver = h ? null : new MutationObserver(
-      (e) => this._onSizeAttributesChange(e)
-    );
-  }
-  set _state(e) {
-    this.setAttribute("data-state", e);
-  }
-  get _state() {
-    return this.getAttribute("data-state");
-  }
-  /** Whether the selection panel is checked. */
-  set _checked(e) {
-    this.toggleAttribute("data-checked", e);
-  }
-  get _checked() {
-    return this.hasAttribute("data-checked");
-  }
-  /** Whether the selection panel is disabled. */
-  set _disabled(e) {
-    this.toggleAttribute("data-disabled", e);
-  }
-  /** Whether it has an expandable content */
-  get _hasContent() {
-    var e;
-    return ((e = this.querySelectorAll) == null ? void 0 : e.call(this, '[slot="content"]').length) > 0;
-  }
-  get _group() {
-    return this.closest("sbb-radio-button-group, sbb-checkbox-group");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("panelConnected", this._initFromInput.bind(this), {
-      signal: this._abort.signal
-    }), this._state || (this._state = "closed");
-  }
-  disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), (e = this._sizeAttributeObserver) == null || e.disconnect();
-  }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("forceOpen") && this._updateState();
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this._initialized = !0;
-  }
-  _updateState() {
-    this._hasContent && (this.forceOpen || this._checked ? this._open(!this._initialized) : this._close(), this._updateExpandedLabel(this.forceOpen || this._checked));
-  }
-  _open(e = !1) {
-    this._state !== "closed" && this._state !== "closing" || (this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit()));
-  }
-  _close() {
-    this._state !== "opened" && this._state !== "opening" || (this._state = "closing", this._willClose.emit());
-  }
-  _initFromInput(e) {
-    var s, i;
-    const t = e.target;
-    this._checked = t.checked, this._disabled = t.disabled, (s = this._sizeAttributeObserver) == null || s.disconnect(), (i = this._sizeAttributeObserver) == null || i.observe(t, { attributeFilter: ["size"] }), this._updateState();
-  }
-  /**
-   * Set the data-size in two cases:
-   * - if there's no group, so the size change comes directly from a change on the inner panel;
-   * - if there's a wrapper group and its size changes, syncing it with the panel size.
-   *
-   * On the other hand, if there's a wrapper group and the size changes on the inner panel, the data-size doesn't change.
-   */
-  _onSizeAttributesChange(e) {
-    for (const t of e)
-      if (t.attributeName === "size") {
-        const s = this._group, i = t.target.getAttribute("size");
-        (!s || s.size === i) && this.setAttribute("data-size", i);
-      }
-  }
-  _onInputStateChange(e) {
-    if (e.detail.type === "disabled") {
-      this._disabled = e.detail.disabled;
-      return;
-    } else if (e.detail.type !== "checked")
-      return;
-    this._checked = e.detail.checked, this._updateState();
-  }
-  _onAnimationEnd(e) {
-    e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
-  }
-  async _updateExpandedLabel(e) {
-    await this.hydrationComplete;
-    const t = this.querySelector(
-      "sbb-radio-button-panel, sbb-checkbox-panel"
-    );
-    if (t) {
-      if (!this._hasContent) {
-        t.expansionState = "";
+var D = (s, n, i) => n.has(s) || U("Cannot " + i);
+var m = (s, n, i) => (D(s, n, "read from private field"), i ? i.call(s) : n.get(s)), g = (s, n, i) => n.has(s) ? U("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, i), c = (s, n, i, r) => (D(s, n, "write to private field"), r ? r.call(s, i) : n.set(s, i), i);
+import { __runInitializers as l, __esDecorate as u } from "tslib";
+import { css as N, LitElement as $, isServer as j, html as q } from "lit";
+import { customElement as B, property as x, state as M } from "lit/decorators.js";
+import { SbbLanguageController as P, SbbConnectedAbortController as T } from "./core/controllers.js";
+import { slotState as H, forceType as F } from "./core/decorators.js";
+import { EventEmitter as f } from "./core/eventing.js";
+import { i18nExpanded as G, i18nCollapsed as J } from "./core/i18n.js";
+import { SbbHydrationMixin as K } from "./core/mixins.js";
+import "./divider.js";
+const Q = N`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-expansion-panel-background: var(--sbb-color-white);--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-selection-expansion-panel-inner-background: transparent;--sbb-selection-expansion-panel-inner-border-width: 0px;--sbb-selection-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-expansion-panel-content-visibility: hidden;--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([data-size=s]){--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-expansion-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-expansion-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-expansion-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-expansion-panel-border-color: var(--sbb-color-cloud)}:host([borderless]:not([data-checked])){--sbb-selection-expansion-panel-border-color: transparent}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-expansion-panel-content-visibility: visible;--sbb-selection-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs)}.sbb-selection-expansion-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-expansion-panel-background);border-radius:var(--sbb-selection-expansion-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-expansion-panel-border-width) var(--sbb-selection-expansion-panel-border-color);transition-duration:var(--sbb-selection-expansion-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-expansion-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-expansion-panel-border-width) solid var(--sbb-selection-expansion-panel-border-color);border-radius:var(--sbb-selection-expansion-panel-border-radius)}}.sbb-selection-expansion-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-expansion-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-expansion-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-expansion-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-expansion-panel__content--wrapper{display:none}.sbb-selection-expansion-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-selection-expansion-panel-content-padding-block-end);transition:padding var(--sbb-selection-expansion-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+let ae = (() => {
+  var b, p, h, o;
+  let s = [B("sbb-selection-expansion-panel"), H()], n, i = [], r, v = K($), w = [], y, k = [], O = [], C, z = [], S = [], A, E = [], I = [], L;
+  var d = (o = class extends v {
+    constructor() {
+      super(...arguments);
+      g(this, b);
+      g(this, p);
+      g(this, h);
+      c(this, b, (l(this, w), l(this, k, "white"))), c(this, p, (l(this, O), l(this, z, !1))), c(this, h, (l(this, S), l(this, E, !1))), this._willOpen = (l(this, I), new f(this, d.events.willOpen)), this._didOpen = new f(this, d.events.didOpen), this._willClose = new f(this, d.events.willClose), this._didClose = new f(this, d.events.didClose), this._language = new P(this), this._abort = new T(this), this._initialized = !1, this._sizeAttributeObserver = j ? null : new MutationObserver((e) => this._onSizeAttributesChange(e));
+    }
+    /** The background color of the panel. */
+    get color() {
+      return m(this, b);
+    }
+    set color(e) {
+      c(this, b, e);
+    }
+    /** Whether the content section is always visible. */
+    get forceOpen() {
+      return m(this, p);
+    }
+    set forceOpen(e) {
+      c(this, p, e);
+    }
+    /** Whether the unselected panel has a border. */
+    get borderless() {
+      return m(this, h);
+    }
+    set borderless(e) {
+      c(this, h, e);
+    }
+    /** The state of the selection panel. */
+    set _state(e) {
+      this.setAttribute("data-state", e);
+    }
+    get _state() {
+      return this.getAttribute("data-state");
+    }
+    /** Whether the selection panel is checked. */
+    set _checked(e) {
+      this.toggleAttribute("data-checked", e);
+    }
+    get _checked() {
+      return this.hasAttribute("data-checked");
+    }
+    /** Whether the selection panel is disabled. */
+    set _disabled(e) {
+      this.toggleAttribute("data-disabled", e);
+    }
+    /** Whether it has an expandable content */
+    get _hasContent() {
+      var e;
+      return ((e = this.querySelectorAll) == null ? void 0 : e.call(this, '[slot="content"]').length) > 0;
+    }
+    get _group() {
+      return this.closest("sbb-radio-button-group, sbb-checkbox-group");
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.addEventListener("panelConnected", this._initFromInput.bind(this), {
+        signal: this._abort.signal
+      }), this._state || (this._state = "closed");
+    }
+    disconnectedCallback() {
+      var e;
+      super.disconnectedCallback(), (e = this._sizeAttributeObserver) == null || e.disconnect();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("forceOpen") && this._updateState();
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._initialized = !0;
+    }
+    _updateState() {
+      this._hasContent && (this.forceOpen || this._checked ? this._open(!this._initialized) : this._close(), this._updateExpandedLabel(this.forceOpen || this._checked));
+    }
+    _open(e = !1) {
+      this._state !== "closed" && this._state !== "closing" || (this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit()));
+    }
+    _close() {
+      this._state !== "opened" && this._state !== "opening" || (this._state = "closing", this._willClose.emit());
+    }
+    _initFromInput(e) {
+      var a, _;
+      const t = e.target;
+      this._checked = t.checked, this._disabled = t.disabled, (a = this._sizeAttributeObserver) == null || a.disconnect(), (_ = this._sizeAttributeObserver) == null || _.observe(t, { attributeFilter: ["size"] }), this._updateState();
+    }
+    /**
+     * Set the data-size in two cases:
+     * - if there's no group, so the size change comes directly from a change on the inner panel;
+     * - if there's a wrapper group and its size changes, syncing it with the panel size.
+     *
+     * On the other hand, if there's a wrapper group and the size changes on the inner panel, the data-size doesn't change.
+     */
+    _onSizeAttributesChange(e) {
+      for (const t of e)
+        if (t.attributeName === "size") {
+          const a = this._group, _ = t.target.getAttribute("size");
+          (!a || a.size === _) && this.setAttribute("data-size", _);
+        }
+    }
+    _onInputStateChange(e) {
+      if (e.detail.type === "disabled") {
+        this._disabled = e.detail.disabled;
         return;
+      } else if (e.detail.type !== "checked")
+        return;
+      this._checked = e.detail.checked, this._updateState();
+    }
+    _onAnimationEnd(e) {
+      e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
+    }
+    async _updateExpandedLabel(e) {
+      await this.hydrationComplete;
+      const t = this.querySelector("sbb-radio-button-panel, sbb-checkbox-panel");
+      if (t) {
+        if (!this._hasContent) {
+          t.expansionState = "";
+          return;
+        }
+        t.expansionState = e ? ", " + G[this._language.current] : ", " + J[this._language.current];
       }
-      t.expansionState = e ? ", " + f[this._language.current] : ", " + w[this._language.current];
     }
-  }
-  render() {
-    return u`
+    render() {
+      return q`
       <div class="sbb-selection-expansion-panel">
         <div class="sbb-selection-expansion-panel__input" @stateChange=${this._onInputStateChange}>
           <slot></slot>
@@ -140,31 +154,26 @@ let n = class extends y(c) {
         </div>
       </div>
     `;
-  }
-};
-n.styles = k;
-n.events = {
-  willOpen: "willOpen",
-  didOpen: "didOpen",
-  willClose: "willClose",
-  didClose: "didClose"
-};
-a([
-  p()
-], n.prototype, "color", 2);
-a([
-  p({ attribute: "force-open", type: Boolean })
-], n.prototype, "forceOpen", 2);
-a([
-  p({ reflect: !0, type: Boolean })
-], n.prototype, "borderless", 2);
-a([
-  _()
-], n.prototype, "_state", 1);
-n = a([
-  m("sbb-selection-expansion-panel"),
-  x()
-], n);
+    }
+  }, b = new WeakMap(), p = new WeakMap(), h = new WeakMap(), r = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    y = [x()], C = [F(), x({ attribute: "force-open", type: Boolean })], A = [F(), x({ reflect: !0, type: Boolean })], L = [M()], u(o, null, y, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (t) => "color" in t, get: (t) => t.color, set: (t, a) => {
+      t.color = a;
+    } }, metadata: e }, k, O), u(o, null, C, { kind: "accessor", name: "forceOpen", static: !1, private: !1, access: { has: (t) => "forceOpen" in t, get: (t) => t.forceOpen, set: (t, a) => {
+      t.forceOpen = a;
+    } }, metadata: e }, z, S), u(o, null, A, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, a) => {
+      t.borderless = a;
+    } }, metadata: e }, E, I), u(o, null, L, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (t) => "_state" in t, set: (t, a) => {
+      t._state = a;
+    } }, metadata: e }, null, w), u(null, n = { value: r }, s, { kind: "class", name: r.name, metadata: e }, null, i), d = r = n.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = Q, o.events = {
+    willOpen: "willOpen",
+    didOpen: "didOpen",
+    willClose: "willClose",
+    didClose: "didClose"
+  }, l(r, i), o);
+  return d = r;
+})();
 export {
-  n as SbbSelectionExpansionPanelElement
+  ae as SbbSelectionExpansionPanelElement
 };

package/signet/signet.d.ts

@@ -9,9 +9,9 @@ export type SbbSignetProtectiveRoom = SbbProtectiveRoom | 'panel';
 export declare class SbbSignetElement extends LitElement {
     static styles: CSSResultGroup;
     /** Visual protective room around signet. */
-    protectiveRoom?: SbbSignetProtectiveRoom;
+    accessor protectiveRoom: SbbSignetProtectiveRoom;
     /** Accessibility label which will be forwarded to the inner SVG signet. */
-    accessibilityLabel: string;
+    accessor accessibilityLabel: string;
     protected render(): TemplateResult;
 }
 declare global {

package/signet/signet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signet.d.ts","sourceRoot":"","sources":["../../../src/elements/signet/signet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI/D,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG,OAAO,CAAC;AAElE;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,cAAc,CAAC,EAAE,uBAAuB,CAAW;IAE1D,2EAA2E;IACpB,kBAAkB,SAAU;cAEhE,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"signet.d.ts","sourceRoot":"","sources":["../../../src/elements/signet/signet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI/D,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG,OAAO,CAAC;AAElE;;;;GAIG;AACH,qBAEM,gBAAiB,SAAQ,UAAU;IACvC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAC5C,SACgB,cAAc,EAAE,uBAAuB,CAAW;IAElE,2EAA2E;IAC3E,SAEgB,kBAAkB,EAAE,MAAM,CAAU;cAEjC,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/signet.js

@@ -1,20 +1,42 @@
-import { css as g, LitElement as p, html as b } from "lit";
-import { property as l, customElement as h } from "lit/decorators.js";
-const v = g`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-signet-height);--sbb-signet-background-color: var(--sbb-color-red);--sbb-signet-panel-color: var(--sbb-color-red);--sbb-signet-icon-color: var(--sbb-color-white);--sbb-signet-aspect-ratio: 2 / 1;--sbb-signet-svg-container-height: auto}@media (forced-colors: active){:host{--sbb-signet-background-color: ButtonText !important;--sbb-signet-panel-color: ButtonText !important;--sbb-signet-icon-color: Canvas !important}}:host([protective-room=minimal]){--sbb-signet-aspect-ratio: 108 / 64;--sbb-signet-svg-container-height: 68.75% }:host([protective-room=ideal]){--sbb-signet-aspect-ratio: 128 / 84;--sbb-signet-svg-container-height: calc(44 / 84 * 100%)}:host([protective-room=panel]){--sbb-signet-aspect-ratio: 143 / 48;--sbb-signet-background-color: unset}@media (forced-colors: active){:host([protective-room=panel]){--sbb-signet-background-color: unset !important}}.sbb-signet{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-signet-background-color);aspect-ratio:var(--sbb-signet-aspect-ratio);width:100%;height:100%}.sbb-signet .sbb-signet__svg-container{display:flex;height:var(--sbb-signet-svg-container-height)}.sbb-signet svg{width:100%;height:100%}#sbb-signet__panel{fill:var(--sbb-signet-panel-color);stroke:var(--sbb-signet-panel-color)}#sbb-signet__icon{fill:var(--sbb-signet-icon-color)}`;
-var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, a = (c, s, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? d(s, i) : s, r = c.length - 1, n; r >= 0; r--)
-    (n = c[r]) && (t = (o ? n(s, i, t) : n(t)) || t);
-  return o && t && m(s, i, t), t;
+var w = (t) => {
+  throw TypeError(t);
 };
-let e = class extends p {
-  constructor() {
-    super(...arguments), this.protectiveRoom = "ideal", this.accessibilityLabel = "Logo";
-  }
-  render() {
-    return b`
+var H = (t, e, s) => e.has(t) || w("Cannot " + s);
+var g = (t, e, s) => (H(t, e, "read from private field"), s ? s.call(t) : e.get(t)), p = (t, e, s) => e.has(t) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), h = (t, e, s, a) => (H(t, e, "write to private field"), a ? a.call(t, s) : e.set(t, s), s);
+import { __esDecorate as m, __runInitializers as n } from "tslib";
+import { css as R, html as v, LitElement as z } from "lit";
+import { customElement as V, property as k } from "lit/decorators.js";
+import { forceType as S } from "./core/decorators.js";
+const B = R`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-signet-height);--sbb-signet-background-color: var(--sbb-color-red);--sbb-signet-panel-color: var(--sbb-color-red);--sbb-signet-icon-color: var(--sbb-color-white);--sbb-signet-aspect-ratio: 2 / 1;--sbb-signet-svg-container-height: auto}@media (forced-colors: active){:host{--sbb-signet-background-color: ButtonText !important;--sbb-signet-panel-color: ButtonText !important;--sbb-signet-icon-color: Canvas !important}}:host([protective-room=minimal]){--sbb-signet-aspect-ratio: 108 / 64;--sbb-signet-svg-container-height: 68.75% }:host([protective-room=ideal]){--sbb-signet-aspect-ratio: 128 / 84;--sbb-signet-svg-container-height: calc(44 / 84 * 100%)}:host([protective-room=panel]){--sbb-signet-aspect-ratio: 143 / 48;--sbb-signet-background-color: unset}@media (forced-colors: active){:host([protective-room=panel]){--sbb-signet-background-color: unset !important}}.sbb-signet{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-signet-background-color);aspect-ratio:var(--sbb-signet-aspect-ratio);width:100%;height:100%}.sbb-signet .sbb-signet__svg-container{display:flex;height:var(--sbb-signet-svg-container-height)}.sbb-signet svg{width:100%;height:100%}#sbb-signet__panel{fill:var(--sbb-signet-panel-color);stroke:var(--sbb-signet-panel-color)}#sbb-signet__icon{fill:var(--sbb-signet-icon-color)}`;
+let M = (() => {
+  var c, l, o;
+  let t = [V("sbb-signet")], e, s = [], a, d = z, u, _ = [], f = [], y, L = [], x = [];
+  return o = class extends d {
+    constructor() {
+      super(...arguments);
+      p(this, c, n(this, _, "ideal"));
+      p(this, l, (n(this, f), n(this, L, "Logo")));
+      n(this, x);
+    }
+    /** Visual protective room around signet. */
+    get protectiveRoom() {
+      return g(this, c);
+    }
+    set protectiveRoom(r) {
+      h(this, c, r);
+    }
+    /** Accessibility label which will be forwarded to the inner SVG signet. */
+    get accessibilityLabel() {
+      return g(this, l);
+    }
+    set accessibilityLabel(r) {
+      h(this, l, r);
+    }
+    render() {
+      return v`
       <span class="sbb-signet">
         <span class="sbb-signet__svg-container">
-          ${this.protectiveRoom === "panel" ? b`
+          ${this.protectiveRoom === "panel" ? v`
                 <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
                   <title .textContent=${this.accessibilityLabel}></title>
                   <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
@@ -23,7 +45,7 @@ let e = class extends p {
                     d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
                   ></path>
                 </svg>
-              ` : b`
+              ` : v`
                 <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
                   <title .textContent=${this.accessibilityLabel}></title>
                   <path
@@ -35,18 +57,16 @@ let e = class extends p {
         </span>
       </span>
     `;
-  }
-};
-e.styles = v;
-a([
-  l({ attribute: "protective-room", reflect: !0 })
-], e.prototype, "protectiveRoom", 2);
-a([
-  l({ attribute: "accessibility-label" })
-], e.prototype, "accessibilityLabel", 2);
-e = a([
-  h("sbb-signet")
-], e);
+    }
+  }, c = new WeakMap(), l = new WeakMap(), a = o, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    u = [k({ attribute: "protective-room", reflect: !0 })], y = [S(), k({ attribute: "accessibility-label" })], m(o, null, u, { kind: "accessor", name: "protectiveRoom", static: !1, private: !1, access: { has: (i) => "protectiveRoom" in i, get: (i) => i.protectiveRoom, set: (i, b) => {
+      i.protectiveRoom = b;
+    } }, metadata: r }, _, f), m(o, null, y, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, b) => {
+      i.accessibilityLabel = b;
+    } }, metadata: r }, L, x), m(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: r }, null, s), a = e.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), o.styles = B, n(a, s), a;
+})();
 export {
-  e as SbbSignetElement
+  M as SbbSignetElement
 };

package/skiplink-list/skiplink-list.d.ts

@@ -16,9 +16,9 @@ export declare class SbbSkiplinkListElement extends SbbSkiplinkListElement_base
     static styles: CSSResultGroup;
     protected readonly listChildLocalNames: string[];
     /** The title text we want to place before the list. */
-    titleContent?: string;
+    accessor titleContent: string;
     /** The semantic level of the title, e.g. 2 = h2. */
-    titleLevel: SbbTitleLevel;
+    accessor titleLevel: SbbTitleLevel;
     protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
     protected render(): TemplateResult;
 }

package/skiplink-list/skiplink-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skiplink-list.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;;AAErB;;;;;;;;GAQG;AACH,qBAEa,sBAAuB,SAAQ,2BAG/B;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACS,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,oDAAoD;IACL,UAAU,EAAE,aAAa,CAAO;cAE5D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"skiplink-list.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;;AAErB;;;;;;;;GAQG;AACH,qBAGM,sBAAuB,SAAQ,2BAGxB;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACvD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,oDAAoD;IACpD,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/skiplink-list.js

@@ -1,29 +1,50 @@
-import { css as d, LitElement as v, html as p, nothing as k } from "lit";
-import { property as n, customElement as h } from "lit/decorators.js";
-import { slotState as c } from "./core/decorators.js";
-import { SbbNamedSlotListMixin as f } from "./core/mixins.js";
-import "./title.js";
-const w = d`*,:before,:after{box-sizing:border-box}:host{--sbb-skiplink-list-height: 0;--sbb-skiplink-list-overflow: hidden;--sbb-skiplink-list-background: transparent;--sbb-skiplink-list-border: unset;display:block}.sbb-skiplink-list__wrapper{position:fixed;inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-4x);z-index:calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-skiplink-list{list-style:none;margin:0;padding:0;font-size:inherit}.sbb-skiplink-list>:is(li,span){box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);height:var(--sbb-skiplink-list-height);overflow:var(--sbb-skiplink-list-overflow);border-radius:var(--sbb-border-radius-4x);background-color:var(--sbb-skiplink-list-background);border:var(--sbb-skiplink-list-border);width:fit-content}.sbb-skiplink-list>:is(li,span):focus-within{--sbb-skiplink-list-height: auto;--sbb-skiplink-list-overflow: visible;--sbb-skiplink-list-background: var(--sbb-color-black);--sbb-skiplink-list-border: var(--sbb-border-width-2x) solid var(--sbb-color-white)}::slotted([data-sbb-link]){--sbb-focus-outline-color: transparent;--sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs)}`;
-var u = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, s, b, t) => {
-  for (var i = t > 1 ? void 0 : t ? x(s, b) : s, o = e.length - 1, r; o >= 0; o--)
-    (r = e[o]) && (i = (t ? r(s, b, i) : r(i)) || i);
-  return t && i && u(s, b, i), i;
+var x = (t) => {
+  throw TypeError(t);
 };
-let l = class extends f(v) {
-  constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-block-link", "sbb-block-link-button"], this.titleLevel = "2";
-  }
-  willUpdate(e) {
-    if (super.willUpdate(e), e.has("listChildren"))
-      for (const s of this.listChildren)
-        s.size = "m", s.negative = !0;
-  }
-  render() {
-    return p`
+var y = (t, e, s) => e.has(t) || x("Cannot " + s);
+var c = (t, e, s) => (y(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), b = (t, e, s, a) => (y(t, e, "write to private field"), a ? a.call(t, s) : e.set(t, s), s);
+import { __esDecorate as k, __runInitializers as d } from "tslib";
+import { css as C, LitElement as z, html as S, nothing as E } from "lit";
+import { customElement as I, property as L } from "lit/decorators.js";
+import { slotState as D, forceType as $, omitEmptyConverter as j } from "./core/decorators.js";
+import { SbbNamedSlotListMixin as N } from "./core/mixins.js";
+import "./title.js";
+const O = C`*,:before,:after{box-sizing:border-box}:host{--sbb-skiplink-list-height: 0;--sbb-skiplink-list-overflow: hidden;--sbb-skiplink-list-background: transparent;--sbb-skiplink-list-border: unset;display:block}.sbb-skiplink-list__wrapper{position:fixed;inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-4x);z-index:calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-skiplink-list{list-style:none;margin:0;padding:0;font-size:inherit}.sbb-skiplink-list>:is(li,span){box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);height:var(--sbb-skiplink-list-height);overflow:var(--sbb-skiplink-list-overflow);border-radius:var(--sbb-border-radius-4x);background-color:var(--sbb-skiplink-list-background);border:var(--sbb-skiplink-list-border);width:fit-content}.sbb-skiplink-list>:is(li,span):focus-within{--sbb-skiplink-list-height: auto;--sbb-skiplink-list-overflow: visible;--sbb-skiplink-list-background: var(--sbb-color-black);--sbb-skiplink-list-border: var(--sbb-border-width-2x) solid var(--sbb-color-white)}::slotted([data-sbb-link]){--sbb-focus-outline-color: transparent;--sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs)}`;
+let H = (() => {
+  var o, n, r;
+  let t = [I("sbb-skiplink-list"), D()], e, s = [], a, p = N(z), u, f = [], m = [], w, _ = [], g = [];
+  return r = class extends p {
+    constructor() {
+      super(...arguments);
+      h(this, o);
+      h(this, n);
+      this.listChildLocalNames = ["sbb-block-link", "sbb-block-link-button"], b(this, o, d(this, f, "")), b(this, n, (d(this, m), d(this, _, "2"))), d(this, g);
+    }
+    /** The title text we want to place before the list. */
+    get titleContent() {
+      return c(this, o);
+    }
+    set titleContent(l) {
+      b(this, o, l);
+    }
+    /** The semantic level of the title, e.g. 2 = h2. */
+    get titleLevel() {
+      return c(this, n);
+    }
+    set titleLevel(l) {
+      b(this, n, l);
+    }
+    willUpdate(l) {
+      if (super.willUpdate(l), l.has("listChildren"))
+        for (const i of this.listChildren)
+          i.size = "m", i.negative = !0;
+    }
+    render() {
+      return S`
       <div class="sbb-skiplink-list__wrapper">
         <sbb-title
           class="sbb-link-list-title"
-          level=${this.titleLevel || k}
+          level=${this.titleLevel || E}
           visual-level="5"
           visually-hidden
           negative
@@ -34,19 +55,16 @@ let l = class extends f(v) {
         ${this.renderList({ ariaLabelledby: "sbb-skiplink-list-title-id" })}
       </div>
     `;
-  }
-};
-l.styles = w;
-a([
-  n({ attribute: "title-content", reflect: !0 })
-], l.prototype, "titleContent", 2);
-a([
-  n({ attribute: "title-level" })
-], l.prototype, "titleLevel", 2);
-l = a([
-  h("sbb-skiplink-list"),
-  c()
-], l);
+    }
+  }, o = new WeakMap(), n = new WeakMap(), a = r, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    u = [$(), L({ attribute: "title-content", reflect: !0, converter: j })], w = [L({ attribute: "title-level" })], k(r, null, u, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, v) => {
+      i.titleContent = v;
+    } }, metadata: l }, f, m), k(r, null, w, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (i) => "titleLevel" in i, get: (i) => i.titleLevel, set: (i, v) => {
+      i.titleLevel = v;
+    } }, metadata: l }, _, g), k(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: l }, null, s), a = e.value, l && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), r.styles = O, d(a, s), a;
+})();
 export {
-  l as SbbSkiplinkListElement
+  H as SbbSkiplinkListElement
 };