@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773157346

package/expansion-panel/expansion-panel/expansion-panel.component.js

@@ -1,44 +1,45 @@
-var H = (s) => {
-  throw TypeError(s);
+var S = (a) => {
+  throw TypeError(a);
 };
-var N = (s, n, o) => n.has(s) || H("Cannot " + o);
-var u = (s, n, o) => (N(s, n, "read from private field"), o ? o.call(s) : n.get(s)), f = (s, n, o) => n.has(s) ? H("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, o), d = (s, n, o, r) => (N(s, n, "write to private field"), r ? r.call(s, o) : n.set(s, o), o);
-import { __esDecorate as b, __runInitializers as l } from "tslib";
-import { css as B, LitElement as G } from "lit";
-import { customElement as M, property as x } from "lit/decorators.js";
-import { unsafeStatic as T, html as j } from "lit/static-html.js";
-import { forceType as P } from "../../core/decorators.js";
-import { isLean as U, isZeroAnimationDuration as q } from "../../core/dom.js";
-import { SbbHydrationMixin as F, SbbElementInternalsMixin as J, ɵstateController as Z } from "../../core/mixins.js";
-import { boxSizingStyles as K } from "../../core/styles.js";
-const Q = B`:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);--_sbb-expansion-panel-display: grid;display:block;background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default)}@media(forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color: GrayText;--sbb-expansion-panel-border-block-start-color: GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded: var(--_sbb-expansion-panel-display)}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent;--sbb-expansion-panel-start-end-radius: 0;--sbb-expansion-panel-start-start-radius: 0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=white]){--sbb-expansion-panel-background-color: var(--sbb-background-color-1);--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3)}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-background-color-3);--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-1)}:host([borderless]){--sbb-expansion-panel-border-width: 0;--sbb-expansion-panel-border-color: transparent;--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent}@media(forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media(forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){background-color:var(--sbb-expansion-panel-background-color-hover)}@media(forced-colors:active){:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded, none);grid-template-rows:0fr;opacity:0}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display);visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{min-height:0}@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 V = 0, re = (() => {
-  var p, c, h, _, i;
-  let s = [M("sbb-expansion-panel")], n, o = [], r, v = F(J(G)), g = [], k, y = [], w = [], z, E = [], I = [], R, S, A, L = [], C = [], $, D = [], O = [];
-  return i = class extends v {
+var D = (a, n, o) => n.has(a) || S("Cannot " + o);
+var f = (a, n, o) => (D(a, n, "read from private field"), o ? o.call(a) : n.get(a)), g = (a, n, o) => n.has(a) ? S("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, o), r = (a, n, o, x) => (D(a, n, "write to private field"), x ? x.call(a, o) : n.set(a, o), o);
+import { __esDecorate as h, __runInitializers as l } from "tslib";
+import { property as _ } from "lit/decorators.js";
+import { unsafeStatic as O, html as H } from "lit/static-html.js";
+import { SbbElement as T } from "../../core/base-elements.js";
+import { forceType as Z } from "../../core/decorators.js";
+import { isLean as B, isZeroAnimationDuration as G } from "../../core/dom.js";
+import { ɵstateController as N } from "../../core/mixins.js";
+import { boxSizingStyles as j } from "../../core/styles.js";
+import { css as E } from "lit";
+const M = E`:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);--_sbb-expansion-panel-display: grid;display:block;background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default)}@media(forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color: GrayText;--sbb-expansion-panel-border-block-start-color: GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded: var(--_sbb-expansion-panel-display)}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent;--sbb-expansion-panel-start-end-radius: 0;--sbb-expansion-panel-start-start-radius: 0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=white]){--sbb-expansion-panel-background-color: var(--sbb-background-color-1);--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3)}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-background-color-3);--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-1)}:host([borderless]){--sbb-expansion-panel-border-width: 0;--sbb-expansion-panel-border-color: transparent;--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent}@media(forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media(forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){background-color:var(--sbb-expansion-panel-background-color-hover)}@media(forced-colors:active){:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded, none);grid-template-rows:0fr;opacity:0}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display);visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{min-height:0}@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 U = 0, te = (() => {
+  var d, b, p, c, i;
+  let a = T, n = [], o, x = [], v = [], m, k = [], y = [], w, z, R, I = [], A = [], L, C = [], $ = [];
+  return i = class extends a {
     constructor() {
       super();
-      f(this, p);
-      f(this, c);
-      f(this, h);
-      f(this, _);
-      d(this, p, (l(this, g), l(this, y, null))), d(this, c, (l(this, w), l(this, E, "white"))), this._expanded = (l(this, I), !1), this._disabled = !1, d(this, h, l(this, L, !1)), d(this, _, (l(this, C), l(this, D, U() ? "s" : "l"))), this._stateInternal = l(this, O), this._progressiveId = `-${++V}`, this._state = "closed", this.addEventListener?.("toggleexpanded", (t) => {
+      g(this, d);
+      g(this, b);
+      g(this, p);
+      g(this, c);
+      r(this, d, (l(this, n), l(this, x, null))), r(this, b, (l(this, v), l(this, k, "white"))), this._expanded = (l(this, y), !1), this._disabled = !1, r(this, p, l(this, I, !1)), r(this, c, (l(this, A), l(this, C, B() ? "s" : "l"))), this._stateInternal = l(this, $), this._progressiveId = `-${++U}`, this._state = "closed", this.addEventListener?.("toggleexpanded", (t) => {
         t.target === this._headerRef && this._toggleExpanded();
       });
     }
     /** Heading level; if unset, a `div` will be rendered. */
     get titleLevel() {
-      return u(this, p);
+      return f(this, d);
     }
     set titleLevel(t) {
-      d(this, p, t);
+      r(this, d, t);
     }
     /** The background color of the panel. */
     get color() {
-      return u(this, c);
+      return f(this, b);
     }
     set color(t) {
-      d(this, c, t);
+      r(this, b, t);
     }
     /** Whether the panel is expanded. */
     set expanded(t) {
@@ -56,20 +57,20 @@ let V = 0, re = (() => {
     }
     /** Whether the panel has no border. */
     get borderless() {
-      return u(this, h);
+      return f(this, p);
     }
     set borderless(t) {
-      d(this, h, t);
+      r(this, p, t);
     }
     /**
      * Size variant, either l or s.
      * @default 'l' / 's' (lean)
      */
     get size() {
-      return u(this, _);
+      return f(this, c);
     }
     set size(t) {
-      d(this, _, t);
+      r(this, c, t);
     }
     /** The state of the component. */
     set _state(t) {
@@ -97,7 +98,7 @@ let V = 0, re = (() => {
       this._state = "closing", this.dispatchEvent(new Event("beforeclose")), this._isZeroAnimationDuration() && this._handleClosing();
     }
     _isZeroAnimationDuration() {
-      return q(this, "--sbb-expansion-panel-animation-duration");
+      return G(this, "--sbb-expansion-panel-animation-duration");
     }
     _handleOpening() {
       this._state = "opened", this.dispatchEvent(new Event("open"));
@@ -109,18 +110,18 @@ let V = 0, re = (() => {
       this._headerRef && (this._headerRef.disabled = t);
     }
     _handleSlotchange() {
-      const t = Array.from(this.children ?? []), e = t.find((m) => m.localName === "sbb-expansion-panel-header"), a = t.find((m) => m.localName === "sbb-expansion-panel-content");
-      this._headerRef === e && this._contentRef === a || (e && this._headerRef !== e && (e.id ||= `sbb-expansion-panel-header${this._progressiveId}`, e.setAttribute("aria-expanded", String(this.expanded)), e.toggleAttribute("disabled", this.disabled)), a && this._contentRef !== a && (a.id ||= `sbb-expansion-panel-content${this._progressiveId}`, a.setAttribute("aria-hidden", String(!this.expanded))), this._headerRef = e, this._contentRef = a, this._headerRef && this._contentRef && (this._headerRef.setAttribute("aria-controls", this._contentRef.id), this._contentRef.setAttribute("aria-labelledby", this._headerRef.id), Z(this._contentRef).toggle("icon-space", Z(this._headerRef).has("icon"))));
+      const t = Array.from(this.children ?? []), e = t.find((u) => u.localName === "sbb-expansion-panel-header"), s = t.find((u) => u.localName === "sbb-expansion-panel-content");
+      this._headerRef === e && this._contentRef === s || (e && this._headerRef !== e && (e.id ||= `sbb-expansion-panel-header${this._progressiveId}`, e.setAttribute("aria-expanded", String(this.expanded)), e.toggleAttribute("disabled", this.disabled)), s && this._contentRef !== s && (s.id ||= `sbb-expansion-panel-content${this._progressiveId}`, s.setAttribute("aria-hidden", String(!this.expanded))), this._headerRef = e, this._contentRef = s, this._headerRef && this._contentRef && (this._headerRef.setAttribute("aria-controls", this._contentRef.id), this._contentRef.setAttribute("aria-labelledby", this._headerRef.id), N(this._contentRef).toggle("icon-space", N(this._headerRef).has("icon"))));
     }
     _onAnimationEnd(t) {
       t.animationName === "open-opacity" && this._state === "opening" ? this._handleOpening() : t.animationName === "close" && this._state === "closing" && this._handleClosing();
     }
     render() {
       const t = this.titleLevel ? `h${this.titleLevel}` : "div";
-      return j`
-      <${T(t)} class="sbb-expansion-panel__header">
+      return H`
+      <${O(t)} class="sbb-expansion-panel__header">
         <slot name="header" @slotchange=${this._handleSlotchange}></slot>
-      </${T(t)}>
+      </${O(t)}>
       <div class="sbb-expansion-panel__content-wrapper" @animationend=${this._onAnimationEnd}>
         <span class="sbb-expansion-panel__content">
           <slot name="content" @slotchange=${this._handleSlotchange}></slot>
@@ -128,28 +129,28 @@ let V = 0, re = (() => {
       </div>
     `;
     }
-  }, p = new WeakMap(), c = new WeakMap(), h = new WeakMap(), _ = new WeakMap(), r = i, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    k = [x({ attribute: "title-level" })], z = [x({ reflect: !0 })], R = [x({ reflect: !0, type: Boolean })], S = [x({ reflect: !0, type: Boolean })], A = [P(), x({ reflect: !0, type: Boolean })], $ = [x({ reflect: !0 })], b(i, null, k, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, a) => {
-      e.titleLevel = a;
-    } }, metadata: t }, y, w), b(i, null, z, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, a) => {
-      e.color = a;
-    } }, metadata: t }, E, I), b(i, null, R, { kind: "setter", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, set: (e, a) => {
-      e.expanded = a;
-    } }, metadata: t }, null, g), b(i, null, S, { kind: "setter", name: "disabled", static: !1, private: !1, access: { has: (e) => "disabled" in e, set: (e, a) => {
-      e.disabled = a;
-    } }, metadata: t }, null, g), b(i, null, A, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, a) => {
-      e.borderless = a;
-    } }, metadata: t }, L, C), b(i, null, $, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, a) => {
-      e.size = a;
-    } }, metadata: t }, D, O), b(null, n = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, o), r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.styles = [K, Q], i.events = {
+  }, d = new WeakMap(), b = new WeakMap(), p = new WeakMap(), c = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    o = [_({ attribute: "title-level" })], m = [_({ reflect: !0 })], w = [_({ reflect: !0, type: Boolean })], z = [_({ reflect: !0, type: Boolean })], R = [Z(), _({ reflect: !0, type: Boolean })], L = [_({ reflect: !0 })], h(i, null, o, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, s) => {
+      e.titleLevel = s;
+    } }, metadata: t }, x, v), h(i, null, m, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, s) => {
+      e.color = s;
+    } }, metadata: t }, k, y), h(i, null, w, { kind: "setter", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, set: (e, s) => {
+      e.expanded = s;
+    } }, metadata: t }, null, n), h(i, null, z, { kind: "setter", name: "disabled", static: !1, private: !1, access: { has: (e) => "disabled" in e, set: (e, s) => {
+      e.disabled = s;
+    } }, metadata: t }, null, n), h(i, null, R, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, s) => {
+      e.borderless = s;
+    } }, metadata: t }, I, A), h(i, null, L, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, s) => {
+      e.size = s;
+    } }, metadata: t }, C, $), t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.elementName = "sbb-expansion-panel", i.styles = [j, M], i.events = {
     beforeopen: "beforeopen",
     open: "open",
     beforeclose: "beforeclose",
     close: "close"
-  }, l(r, o), r;
+  }, i;
 })();
 export {
-  re as SbbExpansionPanelElement
+  te as SbbExpansionPanelElement
 };

package/expansion-panel/expansion-panel-content/expansion-panel-content.component.js

@@ -1,32 +1,24 @@
-import { __esDecorate as o, __runInitializers as r } from "tslib";
-import { css as p, LitElement as c, html as b } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbPropertyWatcherController as m } from "../../core/controllers.js";
-import { SbbElementInternalsMixin as u } from "../../core/mixins.js";
-import { boxSizingStyles as h } from "../../core/styles.js";
-const x = p`:host{--sbb-expansion-panel-content-padding-inline-start: var( --sbb-expansion-panel-content-padding-inline );display:block;padding-block-end:var(--sbb-expansion-panel-content-padding-block-end);padding-inline:var(--sbb-expansion-panel-content-padding-inline-start) var(--sbb-expansion-panel-content-padding-inline)}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-content-padding-inline: var(--sbb-expansion-panel-content-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-content-padding-inline: var(--sbb-expansion-panel-content-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-content-padding-inline: var( --sbb-expansion-panel-content-padding-inline-default )}@media(min-width:37.5rem){:host(:is(:state(icon-space),[state--icon-space])){--sbb-expansion-panel-content-padding-inline-start: calc( var(--sbb-expansion-panel-content-padding-inline) + var(--sbb-expansion-panel-icon-size) + var(--sbb-expansion-panel-title-gap) )}}::slotted(:is(p,sbb-title):first-child){margin-block-start:0}`;
-let y = (() => {
-  var e;
-  let l = [d("sbb-expansion-panel-content")], s, i = [], n, a = u(c);
-  return e = class extends a {
-    constructor() {
-      super(), this.addController(new m(this, () => this.closest("sbb-expansion-panel"), {
-        size: (t) => {
-          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
-        }
-      }));
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.slot ||= "content";
-    }
-    render() {
-      return b` <slot></slot> `;
-    }
-  }, n = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    o(null, s = { value: n }, l, { kind: "class", name: n.name, metadata: t }, null, i), n = s.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "region", e.styles = [h, x], r(n, i), n;
-})();
+import { css as i, html as t } from "lit";
+import { SbbElement as a } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as o } from "../../core/controllers.js";
+import { boxSizingStyles as p } from "../../core/styles.js";
+const l = i`:host{--sbb-expansion-panel-content-padding-inline-start: var( --sbb-expansion-panel-content-padding-inline );display:block;padding-block-end:var(--sbb-expansion-panel-content-padding-block-end);padding-inline:var(--sbb-expansion-panel-content-padding-inline-start) var(--sbb-expansion-panel-content-padding-inline)}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-content-padding-inline: var(--sbb-expansion-panel-content-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-content-padding-inline: var(--sbb-expansion-panel-content-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-content-padding-inline: var( --sbb-expansion-panel-content-padding-inline-default )}@media(min-width:37.5rem){:host(:is(:state(icon-space),[state--icon-space])){--sbb-expansion-panel-content-padding-inline-start: calc( var(--sbb-expansion-panel-content-padding-inline) + var(--sbb-expansion-panel-icon-size) + var(--sbb-expansion-panel-title-gap) )}}::slotted(:is(p,sbb-title):first-child){margin-block-start:0}`, n = class n extends a {
+  constructor() {
+    super(), this.addController(new o(this, () => this.closest("sbb-expansion-panel"), {
+      size: (s) => {
+        this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = s.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+      }
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.slot ||= "content";
+  }
+  render() {
+    return t` <slot></slot> `;
+  }
+};
+n.elementName = "sbb-expansion-panel-content", n.role = "region", n.styles = [p, l];
+let e = n;
 export {
-  y as SbbExpansionPanelContentElement
+  e as SbbExpansionPanelContentElement
 };

package/expansion-panel/expansion-panel-content.js

@@ -1,4 +1,7 @@
-import { SbbExpansionPanelContentElement as o } from "./expansion-panel-content/expansion-panel-content.component.js";
+import { SbbExpansionPanelContentElement as e } from "./expansion-panel-content/expansion-panel-content.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/expansion-panel/expansion-panel-content.js' has been deprecated.
+Use either '@sbb-esta/elements/expansion-panel.js' or '@sbb-esta/elements/expansion-panel.pure.js' instead.`);
 export {
-  o as SbbExpansionPanelContentElement
+  e as SbbExpansionPanelContentElement
 };

package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js

@@ -1,50 +1,44 @@
-import { __esDecorate as p, __runInitializers as d } from "tslib";
-import { css as h, nothing as c, html as r } from "lit";
-import { customElement as x } from "lit/decorators.js";
-import { SbbButtonBaseElement as v } from "../../core/base-elements.js";
-import { SbbMediaMatcherController as g, SbbMediaQueryHover as l, SbbPropertyWatcherController as m } from "../../core/controllers.js";
-import { SbbDisabledTabIndexActionMixin as u, ɵstateController as _ } from "../../core/mixins.js";
-import { boxSizingStyles as f } from "../../core/styles.js";
-import { SbbIconNameMixin as z } from "../../icon.js";
-const S = h`:host{display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-s);--sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-s);--sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-l);--sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-l);--sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-default);--sbb-expansion-panel-header-padding-block: var( --sbb-expansion-panel-header-padding-block-default );--sbb-expansion-panel-header-padding-inline: var( --sbb-expansion-panel-header-padding-inline-default )}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color: var(--sbb-color-granite);--sbb-expansion-panel-header-text-color: light-dark( var(--sbb-color-granite), var(--sbb-color-storm) )}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{display:flex;justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);font-size:var(--sbb-expansion-panel-header-font-size);font-weight:400;letter-spacing:var(--sbb-typo-letter-spacing-text);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden;min-height:var(--sbb-size-icon-ui-medium)}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`;
-let j = (() => {
-  var a;
-  let b = [x("sbb-expansion-panel-header")], n, t = [], s, i = u(z(v));
-  return a = class extends i {
-    constructor() {
-      super(), this._mediaMatcher = new g(this, {
-        [l]: (e) => this._isHover = e
-      }), this._isHover = this._mediaMatcher.matches(l) ?? !1, this.addEventListener?.("click", () => this._emitExpandedEvent()), this.addEventListener?.("mouseenter", () => this._onMouseMovement(!0)), this.addEventListener?.("mouseleave", () => this._onMouseMovement(!1)), this.addEventListener?.("slottedchange", () => this._setIconState()), this.addController(new m(this, () => this.closest("sbb-expansion-panel"), {
-        size: (e) => {
-          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
-        }
-      }));
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.slot ||= "header";
-    }
-    _emitExpandedEvent() {
-      this.disabled || this.dispatchEvent(new Event("toggleexpanded", { bubbles: !0, composed: !0 }));
-    }
-    _onMouseMovement(e) {
-      const o = this.closest("sbb-expansion-panel");
-      (!e || o && this._isHover) && _(o).toggle("toggle-hover", e);
-    }
-    /**
-     * The :is(:state(icon),[state--icon]) is used by the 'sbb-expansion-panel'.
-     * It needs to be set before the @slotchange event bubbles to the 'expansion-panel'
-     * but after the 'SbbSlotStateController' has run.
-     */
-    _setIconState() {
-      this.toggleState("icon", !!(this.iconName || this.internals.states.has("icon")));
-    }
-    renderTemplate() {
-      return this._setIconState(), r`
+import { css as o, nothing as r, html as n } from "lit";
+import { SbbButtonBaseElement as l } from "../../core/base-elements.js";
+import { SbbMediaMatcherController as b, SbbMediaQueryHover as i, SbbPropertyWatcherController as p } from "../../core/controllers.js";
+import { SbbDisabledTabIndexActionMixin as d, ɵstateController as h } from "../../core/mixins.js";
+import { boxSizingStyles as c } from "../../core/styles.js";
+import { SbbIconNameMixin as x } from "../../icon.js";
+const g = o`:host{display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-s);--sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-s);--sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-l);--sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-l);--sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-default);--sbb-expansion-panel-header-padding-block: var( --sbb-expansion-panel-header-padding-block-default );--sbb-expansion-panel-header-padding-inline: var( --sbb-expansion-panel-header-padding-inline-default )}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color: var(--sbb-color-granite);--sbb-expansion-panel-header-text-color: light-dark( var(--sbb-color-granite), var(--sbb-color-storm) )}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{display:flex;justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);font-size:var(--sbb-expansion-panel-header-font-size);font-weight:400;letter-spacing:var(--sbb-typo-letter-spacing-text);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden;min-height:var(--sbb-size-icon-ui-medium)}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`, s = class s extends d(x(l)) {
+  constructor() {
+    super(), this._mediaMatcher = new b(this, {
+      [i]: (e) => this._isHover = e
+    }), this._isHover = this._mediaMatcher.matches(i) ?? !1, this.addEventListener?.("click", () => this._emitExpandedEvent()), this.addEventListener?.("mouseenter", () => this._onMouseMovement(!0)), this.addEventListener?.("mouseleave", () => this._onMouseMovement(!1)), this.addEventListener?.("slottedchange", () => this._setIconState()), this.addController(new p(this, () => this.closest("sbb-expansion-panel"), {
+      size: (e) => {
+        this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+      }
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.slot ||= "header";
+  }
+  _emitExpandedEvent() {
+    this.disabled || this.dispatchEvent(new Event("toggleexpanded", { bubbles: !0, composed: !0 }));
+  }
+  _onMouseMovement(e) {
+    const a = this.closest("sbb-expansion-panel");
+    (!e || a && this._isHover) && h(a).toggle("toggle-hover", e);
+  }
+  /**
+   * The :is(:state(icon),[state--icon]) is used by the 'sbb-expansion-panel'.
+   * It needs to be set before the @slotchange event bubbles to the 'expansion-panel'
+   * but after the 'SbbSlotStateController' has run.
+   */
+  _setIconState() {
+    this.toggleState("icon", !!(this.iconName || this.internals.states.has("icon")));
+  }
+  renderTemplate() {
+    return this._setIconState(), n`
       <span class="sbb-expansion-panel-header__title">
         <span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
         <slot></slot>
       </span>
-      ${this.disabled ? c : r`<span class="sbb-expansion-panel-header__toggle">
+      ${this.disabled ? r : n`<span class="sbb-expansion-panel-header__toggle">
             <sbb-icon
               name="chevron-small-down-medium"
               class="sbb-expansion-panel-header__toggle-icon"
@@ -52,14 +46,12 @@ let j = (() => {
             </sbb-icon>
           </span>`}
     `;
-    }
-  }, s = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    p(null, n = { value: s }, b, { kind: "class", name: s.name, metadata: e }, null, t), s = n.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = [f, S], a.events = {
-    toggleexpanded: "toggleexpanded"
-  }, d(s, t), s;
-})();
+  }
+};
+s.elementName = "sbb-expansion-panel-header", s.styles = [c, g], s.events = {
+  toggleexpanded: "toggleexpanded"
+};
+let t = s;
 export {
-  j as SbbExpansionPanelHeaderElement
+  t as SbbExpansionPanelHeaderElement
 };

package/expansion-panel/expansion-panel-header.js

@@ -1,4 +1,7 @@
-import { SbbExpansionPanelHeaderElement as a } from "./expansion-panel-header/expansion-panel-header.component.js";
+import { SbbExpansionPanelHeaderElement as e } from "./expansion-panel-header/expansion-panel-header.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/expansion-panel/expansion-panel-header.js' has been deprecated.
+Use either '@sbb-esta/elements/expansion-panel.js' or '@sbb-esta/elements/expansion-panel.pure.js' instead.`);
 export {
-  a as SbbExpansionPanelHeaderElement
+  e as SbbExpansionPanelHeaderElement
 };

package/expansion-panel/expansion-panel.js

@@ -1,4 +1,7 @@
-import { SbbExpansionPanelElement as o } from "./expansion-panel/expansion-panel.component.js";
+import { SbbExpansionPanelElement as e } from "./expansion-panel/expansion-panel.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/expansion-panel/expansion-panel.js' has been deprecated.
+Use either '@sbb-esta/elements/expansion-panel.js' or '@sbb-esta/elements/expansion-panel.pure.js' instead.`);
 export {
-  o as SbbExpansionPanelElement
+  e as SbbExpansionPanelElement
 };

package/expansion-panel.js

@@ -1,8 +1,11 @@
+import { SbbExpansionPanelContentElement as e } from "./expansion-panel/expansion-panel-content/expansion-panel-content.component.js";
+import { SbbExpansionPanelHeaderElement as n } from "./expansion-panel/expansion-panel-header/expansion-panel-header.component.js";
 import { SbbExpansionPanelElement as o } from "./expansion-panel/expansion-panel/expansion-panel.component.js";
-import { SbbExpansionPanelContentElement as a } from "./expansion-panel/expansion-panel-content/expansion-panel-content.component.js";
-import { SbbExpansionPanelHeaderElement as b } from "./expansion-panel/expansion-panel-header/expansion-panel-header.component.js";
+o.define();
+e.define();
+n.define();
 export {
-  a as SbbExpansionPanelContentElement,
+  e as SbbExpansionPanelContentElement,
   o as SbbExpansionPanelElement,
-  b as SbbExpansionPanelHeaderElement
+  n as SbbExpansionPanelHeaderElement
 };

package/expansion-panel.pure.js

@@ -0,0 +1,8 @@
+import { SbbExpansionPanelContentElement as o } from "./expansion-panel/expansion-panel-content/expansion-panel-content.component.js";
+import { SbbExpansionPanelHeaderElement as a } from "./expansion-panel/expansion-panel-header/expansion-panel-header.component.js";
+import { SbbExpansionPanelElement as b } from "./expansion-panel/expansion-panel/expansion-panel.component.js";
+export {
+  o as SbbExpansionPanelContentElement,
+  b as SbbExpansionPanelElement,
+  a as SbbExpansionPanelHeaderElement
+};