@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

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

@@ -1,2 +1,156 @@
-import { t as e } from "../../expansion-panel.component-Bs4icI9T.js";
-export { e as SbbExpansionPanelElement };
+var S = (a) => {
+  throw TypeError(a);
+};
+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();
+      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 f(this, d);
+    }
+    set titleLevel(t) {
+      r(this, d, t);
+    }
+    /** The background color of the panel. */
+    get color() {
+      return f(this, b);
+    }
+    set color(t) {
+      r(this, b, t);
+    }
+    /** Whether the panel is expanded. */
+    set expanded(t) {
+      this._expanded = t, this._onExpandedChange();
+    }
+    get expanded() {
+      return this._expanded;
+    }
+    /** Whether the panel is disabled, so its expanded state can't be changed. */
+    set disabled(t) {
+      this._disabled = t, this._updateDisabledOnHeader(this._disabled);
+    }
+    get disabled() {
+      return this._disabled;
+    }
+    /** Whether the panel has no border. */
+    get borderless() {
+      return f(this, p);
+    }
+    set borderless(t) {
+      r(this, p, t);
+    }
+    /**
+     * Size variant, either l or s.
+     * @default 'l' / 's' (lean)
+     */
+    get size() {
+      return f(this, c);
+    }
+    set size(t) {
+      r(this, c, t);
+    }
+    /** The state of the component. */
+    set _state(t) {
+      this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = t, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
+    }
+    get _state() {
+      return this._stateInternal;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.toggleState("accordion", !!this.closest?.("sbb-accordion"));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.internals.states.delete("accordion");
+    }
+    _toggleExpanded() {
+      this.expanded = !this.expanded;
+    }
+    _onExpandedChange() {
+      this._headerRef?.setAttribute("aria-expanded", String(this.expanded)), this._contentRef?.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this._open() : this._state === "opened" && this._close();
+    }
+    _open() {
+      this._state = "opening", this.dispatchEvent(new Event("beforeopen")), (!this.hasUpdated || this._isZeroAnimationDuration()) && this._handleOpening();
+    }
+    _close() {
+      this._state = "closing", this.dispatchEvent(new Event("beforeclose")), this._isZeroAnimationDuration() && this._handleClosing();
+    }
+    _isZeroAnimationDuration() {
+      return G(this, "--sbb-expansion-panel-animation-duration");
+    }
+    _handleOpening() {
+      this._state = "opened", this.dispatchEvent(new Event("open"));
+    }
+    _handleClosing() {
+      this._state = "closed", this.dispatchEvent(new Event("close"));
+    }
+    _updateDisabledOnHeader(t) {
+      this._headerRef && (this._headerRef.disabled = t);
+    }
+    _handleSlotchange() {
+      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 H`
+      <${O(t)} class="sbb-expansion-panel__header">
+        <slot name="header" @slotchange=${this._handleSlotchange}></slot>
+      </${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>
+        </span>
+      </div>
+    `;
+    }
+  }, 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"
+  }, i;
+})();
+export {
+  te as SbbExpansionPanelElement
+};

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

@@ -1,2 +1,24 @@
-import { t as e } from "../../expansion-panel-content.component-CbWIxgH4.js";
-export { e as SbbExpansionPanelContentElement };
+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 {
+  e as SbbExpansionPanelContentElement
+};

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

@@ -1,4 +1,7 @@
-import { t as e } from "../expansion-panel-content.component-CbWIxgH4.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/expansion-panel/expansion-panel-content.js' has been deprecated.\nUse either '@sbb-esta/elements/expansion-panel.js' or '@sbb-esta/elements/expansion-panel.pure.js' instead.");
-//#endregion
-export { e as SbbExpansionPanelContentElement };
+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 {
+  e as SbbExpansionPanelContentElement
+};

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

@@ -1,2 +1,57 @@
-import { t as e } from "../../expansion-panel-header.component-CxLeXeGi.js";
-export { e as SbbExpansionPanelHeaderElement };
+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 ? r : n`<span class="sbb-expansion-panel-header__toggle">
+            <sbb-icon
+              name="chevron-small-down-medium"
+              class="sbb-expansion-panel-header__toggle-icon"
+            >
+            </sbb-icon>
+          </span>`}
+    `;
+  }
+};
+s.elementName = "sbb-expansion-panel-header", s.styles = [c, g], s.events = {
+  toggleexpanded: "toggleexpanded"
+};
+let t = s;
+export {
+  t as SbbExpansionPanelHeaderElement
+};

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

@@ -1,4 +1,7 @@
-import { t as e } from "../expansion-panel-header.component-CxLeXeGi.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/expansion-panel/expansion-panel-header.js' has been deprecated.\nUse either '@sbb-esta/elements/expansion-panel.js' or '@sbb-esta/elements/expansion-panel.pure.js' instead.");
-//#endregion
-export { e as SbbExpansionPanelHeaderElement };
+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 {
+  e as SbbExpansionPanelHeaderElement
+};

package/expansion-panel/expansion-panel.js

@@ -1,4 +1,7 @@
-import { t as e } from "../expansion-panel.component-Bs4icI9T.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/expansion-panel/expansion-panel.js' has been deprecated.\nUse either '@sbb-esta/elements/expansion-panel.js' or '@sbb-esta/elements/expansion-panel.pure.js' instead.");
-//#endregion
-export { e as SbbExpansionPanelElement };
+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 {
+  e as SbbExpansionPanelElement
+};

package/expansion-panel.js

@@ -1,7 +1,11 @@
-import { t as e } from "./expansion-panel-content.component-CbWIxgH4.js";
-import { t } from "./expansion-panel-header.component-CxLeXeGi.js";
-import { t as n } from "./expansion-panel.component-Bs4icI9T.js";
-import "./expansion-panel.pure.js";
-n.define(), e.define(), t.define();
-//#endregion
-export { e as SbbExpansionPanelContentElement, n as SbbExpansionPanelElement, t as SbbExpansionPanelHeaderElement };
+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";
+o.define();
+e.define();
+n.define();
+export {
+  e as SbbExpansionPanelContentElement,
+  o as SbbExpansionPanelElement,
+  n as SbbExpansionPanelHeaderElement
+};

package/expansion-panel.pure.js

@@ -1,4 +1,8 @@
-import { t as e } from "./expansion-panel-content.component-CbWIxgH4.js";
-import { t } from "./expansion-panel-header.component-CxLeXeGi.js";
-import { t as n } from "./expansion-panel.component-Bs4icI9T.js";
-export { e as SbbExpansionPanelContentElement, n as SbbExpansionPanelElement, t as SbbExpansionPanelHeaderElement };
+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
+};

package/file-selector/common/file-selector-common.js

@@ -1,2 +1,245 @@
-import { n as e, t } from "../../file-selector-common-C-gZH55c.js";
-export { t as SbbFileSelectorCommonElementMixin, e as fileSelectorCommonStyle };
+var j = (s) => {
+  throw TypeError(s);
+};
+var V = (s, a, r) => a.has(s) || j("Cannot " + r);
+var m = (s, a, r) => (V(s, a, "read from private field"), r ? r.call(s) : a.get(s)), g = (s, a, r) => a.has(s) ? j("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), o = (s, a, r, h) => (V(s, a, "write to private field"), h ? h.call(s, r) : a.set(s, r), r);
+import { __runInitializers as c, __esDecorate as n } from "tslib";
+import { css as O, nothing as z } from "lit";
+import { property as b } from "lit/decorators.js";
+import { ref as q } from "lit/directives/ref.js";
+import { unsafeStatic as v, html as y } from "lit/static-html.js";
+import { sbbInputModalityDetector as H } from "../../core/a11y.js";
+import "../../core/base-elements.js";
+import { SbbLanguageController as J } from "../../core/controllers.js";
+import { forceType as E } from "../../core/decorators.js";
+import { isLean as K } from "../../core/dom.js";
+import { forwardEvent as Q } from "../../core/eventing.js";
+import { i18nFileSelectorButtonLabelMultiple as U, i18nFileSelectorButtonLabel as X, i18nFileSelectorCurrentlySelected as Y, i18nFileSelectorDeleteFile as Z } from "../../core/i18n.js";
+import { SbbDisabledMixin as ee, SbbFormAssociatedMixin as te, ɵstateController as k } from "../../core/mixins.js";
+import "../../button/secondary-button.js";
+const ge = O`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-file-selector-background-color: var(--sbb-background-color-1);--sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}`, ve = (s) => (() => {
+  var d, f, u, p, _, l;
+  let r = ee(te(s)), h = [], L, $ = [], M = [], F, w = [], D = [], R, T = [], B = [], I, S = [], A = [], P, C = [], G = [], N, W;
+  return l = class extends r {
+    constructor() {
+      super(...arguments);
+      g(this, d);
+      g(this, f);
+      g(this, u);
+      g(this, p);
+      g(this, _);
+      o(this, d, (c(this, h), c(this, $, K() ? "s" : "m"))), o(this, f, (c(this, M), c(this, w, !1))), o(this, u, (c(this, D), c(this, T, "default"))), o(this, p, (c(this, B), c(this, S, ""))), o(this, _, (c(this, A), c(this, C, ""))), this._files = (c(this, G), []), this._suffixes = ["B", "kB", "MB", "GB", "TB"], this.language = new J(this), this._counter = 0;
+    }
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return m(this, d);
+    }
+    set size(t) {
+      o(this, d, t);
+    }
+    /** Whether more than one file can be selected. */
+    get multiple() {
+      return m(this, f);
+    }
+    set multiple(t) {
+      o(this, f, t);
+    }
+    /** Whether the newly added files should override the previously added ones. */
+    get multipleMode() {
+      return m(this, u);
+    }
+    set multipleMode(t) {
+      o(this, u, t);
+    }
+    /** A comma-separated list of allowed unique file type specifiers. */
+    get accept() {
+      return m(this, p);
+    }
+    set accept(t) {
+      o(this, p, t);
+    }
+    /** This will be forwarded as aria-label to the native input element. */
+    get accessibilityLabel() {
+      return m(this, _);
+    }
+    set accessibilityLabel(t) {
+      o(this, _, t);
+    }
+    /** The path of the first selected file. Empty string ('') if no file is selected */
+    set value(t) {
+      this._hiddenInput.value = t ?? "", t || (this.files = []);
+    }
+    get value() {
+      return this._hiddenInput?.value;
+    }
+    /** The list of selected files. */
+    set files(t) {
+      this._files = t ?? [];
+      const e = new DataTransfer();
+      this.files.forEach((i) => e.items.add(i)), this._hiddenInput.files = e.files, this.updateFormValue();
+    }
+    get files() {
+      return this._files;
+    }
+    /**
+     * Form type of element.
+     * @default 'file'
+     */
+    get type() {
+      return "file";
+    }
+    formResetCallback() {
+      this.files = [];
+    }
+    formStateRestoreCallback(t, e) {
+      t && (this.files = t.getAll(this.name));
+    }
+    updateFormValue() {
+      const t = new FormData();
+      this.files.forEach((e) => t.append(this.name, e)), this.internals.setFormValue(t);
+    }
+    _checkFileEquality(t, e) {
+      return t.name === e.name && t.size === e.size && t.lastModified === e.lastModified;
+    }
+    _onFocus() {
+      H.mostRecentModality === "keyboard" && k(this.loadButton).add("focus-visible");
+    }
+    _onBlur() {
+      k(this.loadButton).delete("focus-visible");
+    }
+    _readFiles(t) {
+      const e = t.target;
+      e.files && this.createFileList(e.files), Q(t, this);
+    }
+    createFileList(t) {
+      const e = Array.from(t);
+      !this.multiple && t.length > 1 || this.accept && e.some((i) => !this.accept.split(",").some((x) => i.name.endsWith(x.trim()))) || (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = e : this.files = e.filter(
+        // Remove duplicates
+        (i) => this.files.findIndex((x) => this._checkFileEquality(i, x)) === -1
+      ).concat(this.files), this._updateA11yLiveRegion(), this._dispatchFileChangedEvent());
+    }
+    getButtonLabel() {
+      return this.multiple ? U[this.language.current] : X[this.language.current];
+    }
+    _removeFile(t) {
+      this.files = this.files.filter((e) => !this._checkFileEquality(t, e)), this._updateA11yLiveRegion(), this.dispatchEvent(new InputEvent("input", {
+        bubbles: !0,
+        composed: !0
+      })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._dispatchFileChangedEvent();
+    }
+    _dispatchFileChangedEvent() {
+      this.dispatchEvent(new CustomEvent("filechanged", {
+        bubbles: !0,
+        composed: !0,
+        detail: this.files
+      }));
+    }
+    /** Calculates the correct unit for the file's size. */
+    _formatFileSize(t) {
+      const e = Math.floor(Math.log(t) / Math.log(1024));
+      return `${(t / Math.pow(1024, e)).toFixed(0)} ${this._suffixes[e]}`;
+    }
+    _updateA11yLiveRegion() {
+      this._liveRegion.innerText = Y(this.files.map((t) => t.name))[this.language.current];
+    }
+    _renderFileList() {
+      const t = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
+      return y`
+      <${v(t.WRAPPER)} class='sbb-file-selector__file-list'>
+        ${this.files.map((e) => y`
+            <${v(t.ELEMENT)} class='sbb-file-selector__file'>
+                <span class='sbb-file-selector__file-details'>
+                  <span class='sbb-file-selector__file-name'>${e.name}</span>
+                  <span class='sbb-file-selector__file-size'>${this._formatFileSize(e.size)}</span>
+                </span>
+              <sbb-secondary-button
+                size='${this.size}'
+                icon-name='trash-small'
+                @click='${() => this._removeFile(e)}'
+                aria-label='${`${Z[this.language.current]} - ${e.name}`}'
+              ></sbb-secondary-button>
+            </${v(t.ELEMENT)}>`)}
+      </${v(t.WRAPPER)}>
+    `;
+    }
+    _onDragEnter(t) {
+      this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(t.target, !0), this._blockEvent(t));
+    }
+    _onDragLeave(t) {
+      this._counter--, !this.disabled && !this.formDisabled && t.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(t));
+    }
+    _onFileDrop(t) {
+      this._counter = 0, !this.disabled && !this.formDisabled && (this._setDragState(), this._blockEvent(t), this.createFileList(t.dataTransfer.files));
+    }
+    _blockEvent(t) {
+      t.stopPropagation(), t.preventDefault();
+    }
+    _setDragState(t = void 0, e = !1) {
+      this._dragTarget = t, this.toggleState("active", e), k(this.loadButton).toggle("active", e);
+    }
+    render() {
+      const t = this.accessibilityLabel ? `${this.getButtonLabel()} - ${this.accessibilityLabel}` : void 0;
+      return y`
+        <div class="sbb-file-selector">
+          <div
+            class="sbb-file-selector__input-container"
+            @dragenter=${this._onDragEnter}
+            @dragover=${this._blockEvent}
+            @dragleave=${this._onDragLeave}
+            @drop=${this._onFileDrop}
+          >
+            ${this.renderTemplate(y`<input
+                class="sbb-file-selector__visually-hidden"
+                type="file"
+                ?disabled="${this.disabled || this.formDisabled}"
+                ?multiple="${this.multiple}"
+                accept="${this.accept || z}"
+                aria-label="${t || z}"
+                @change="${this._readFiles}"
+                @focus="${this._onFocus}"
+                @blur="${this._onBlur}"
+                ${q((e) => {
+        this._hiddenInput = e;
+      })}
+              />`)}
+          </div>
+          <p
+            role="status"
+            class="sbb-file-selector__visually-hidden"
+            ${q((e) => this._liveRegion = e)}
+          ></p>
+          ${this.files.length > 0 ? this._renderFileList() : z}
+          <div class="sbb-file-selector__error">
+            <slot name="error"></slot>
+          </div>
+        </div>
+      `;
+    }
+  }, d = new WeakMap(), f = new WeakMap(), u = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    L = [b({ reflect: !0 })], F = [E(), b({ type: Boolean })], R = [b({ attribute: "multiple-mode" })], I = [E(), b()], P = [E(), b({ attribute: "accessibility-label" })], N = [b({ attribute: !1 })], W = [b({ attribute: !1 })], n(l, null, L, { 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 }, $, M), n(l, null, F, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (e) => "multiple" in e, get: (e) => e.multiple, set: (e, i) => {
+      e.multiple = i;
+    } }, metadata: t }, w, D), n(l, null, R, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (e) => "multipleMode" in e, get: (e) => e.multipleMode, set: (e, i) => {
+      e.multipleMode = i;
+    } }, metadata: t }, T, B), n(l, null, I, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (e) => "accept" in e, get: (e) => e.accept, set: (e, i) => {
+      e.accept = i;
+    } }, metadata: t }, S, A), n(l, null, P, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, i) => {
+      e.accessibilityLabel = i;
+    } }, metadata: t }, C, G), n(l, null, N, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+      e.value = i;
+    } }, metadata: t }, null, h), n(l, null, W, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (e) => "files" in e, set: (e, i) => {
+      e.files = i;
+    } }, metadata: t }, null, h), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.events = {
+    filechanged: "filechanged"
+  }, l;
+})();
+export {
+  ve as SbbFileSelectorCommonElementMixin,
+  ge as fileSelectorCommonStyle
+};

package/file-selector/common.js

@@ -1,5 +1,7 @@
-import { n as e, t } from "../file-selector-common-C-gZH55c.js";
-//#region src/elements/file-selector/common.ts
-console.warn("The entrypoint '@sbb-esta/elements/file-selector/common.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
-//#endregion
-export { t as SbbFileSelectorCommonElementMixin, e as fileSelectorCommonStyle };
+import { SbbFileSelectorCommonElementMixin as t, fileSelectorCommonStyle as o } from "./common/file-selector-common.js";
+console.warn(`The entrypoint '@sbb-esta/elements/file-selector/common.js' has been deprecated.
+Use either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.`);
+export {
+  t as SbbFileSelectorCommonElementMixin,
+  o as fileSelectorCommonStyle
+};