@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

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

@@ -0,0 +1,155 @@
+var H = (s) => {
+  throw TypeError(s);
+};
+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 {
+    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) => {
+        t.target === this._headerRef && this._toggleExpanded();
+      });
+    }
+    /** Heading level; if unset, a `div` will be rendered. */
+    get titleLevel() {
+      return u(this, p);
+    }
+    set titleLevel(t) {
+      d(this, p, t);
+    }
+    /** The background color of the panel. */
+    get color() {
+      return u(this, c);
+    }
+    set color(t) {
+      d(this, c, 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 u(this, h);
+    }
+    set borderless(t) {
+      d(this, h, t);
+    }
+    /**
+     * Size variant, either l or s.
+     * @default 'l' / 's' (lean)
+     */
+    get size() {
+      return u(this, _);
+    }
+    set size(t) {
+      d(this, _, 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 q(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((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"))));
+    }
+    _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">
+        <slot name="header" @slotchange=${this._handleSlotchange}></slot>
+      </${T(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>
+    `;
+    }
+  }, 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 = {
+    beforeopen: "beforeopen",
+    open: "open",
+    beforeclose: "beforeclose",
+    close: "close"
+  }, l(r, o), r;
+})();
+export {
+  re as SbbExpansionPanelElement
+};

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

@@ -0,0 +1,32 @@
+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;
+})();
+export {
+  y as SbbExpansionPanelContentElement
+};

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

@@ -0,0 +1,4 @@
+import { SbbExpansionPanelContentElement as o } from "./expansion-panel-content/expansion-panel-content.component.js";
+export {
+  o as SbbExpansionPanelContentElement
+};

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

@@ -0,0 +1,65 @@
+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`
+      <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">
+            <sbb-icon
+              name="chevron-small-down-medium"
+              class="sbb-expansion-panel-header__toggle-icon"
+            >
+            </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;
+})();
+export {
+  j as SbbExpansionPanelHeaderElement
+};

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

@@ -0,0 +1,4 @@
+import { SbbExpansionPanelHeaderElement as a } from "./expansion-panel-header/expansion-panel-header.component.js";
+export {
+  a as SbbExpansionPanelHeaderElement
+};

package/expansion-panel/expansion-panel.js

@@ -0,0 +1,4 @@
+import { SbbExpansionPanelElement as o } from "./expansion-panel/expansion-panel.component.js";
+export {
+  o as SbbExpansionPanelElement
+};

package/expansion-panel.js

@@ -0,0 +1,8 @@
+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";
+export {
+  a as SbbExpansionPanelContentElement,
+  o as SbbExpansionPanelElement,
+  b as SbbExpansionPanelHeaderElement
+};

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

@@ -0,0 +1,243 @@
+var q = (s) => {
+  throw TypeError(s);
+};
+var j = (s, l, r) => l.has(s) || q("Cannot " + r);
+var b = (s, l, r) => (j(s, l, "read from private field"), r ? r.call(s) : l.get(s)), g = (s, l, r) => l.has(s) ? q("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(s) : l.set(s, r), n = (s, l, r, u) => (j(s, l, "write to private field"), u ? u.call(s, r) : l.set(s, r), r);
+import { __runInitializers as c, __esDecorate as o } from "tslib";
+import { nothing as L } from "lit";
+import { property as h } from "lit/decorators.js";
+import { ref as G } from "lit/directives/ref.js";
+import { unsafeStatic as v, html as y } from "lit/static-html.js";
+import { sbbInputModalityDetector as O } from "../../core/a11y.js";
+import { SbbLanguageController as H } from "../../core/controllers.js";
+import { forceType as $ } from "../../core/decorators.js";
+import { isLean as J } from "../../core/dom.js";
+import { forwardEvent as K } from "../../core/eventing.js";
+import { i18nFileSelectorButtonLabelMultiple as Q, i18nFileSelectorButtonLabel as U, i18nFileSelectorCurrentlySelected as X, i18nFileSelectorDeleteFile as Y } from "../../core/i18n.js";
+import { SbbDisabledMixin as Z, SbbFormAssociatedMixin as ee, SbbElementInternalsMixin as te, ɵstateController as M } from "../../core/mixins.js";
+import "../../button/secondary-button.js";
+const be = (s) => (() => {
+  var d, f, p, _, m, a;
+  let r = Z(ee(te(s))), u = [], z, F = [], k = [], D, x = [], I = [], R, B = [], A = [], S, T = [], P = [], w, C = [], N = [], W, V;
+  return a = class extends r {
+    constructor() {
+      super(...arguments);
+      g(this, d);
+      g(this, f);
+      g(this, p);
+      g(this, _);
+      g(this, m);
+      n(this, d, (c(this, u), c(this, F, J() ? "s" : "m"))), n(this, f, (c(this, k), c(this, x, !1))), n(this, p, (c(this, I), c(this, B, "default"))), n(this, _, (c(this, A), c(this, T, ""))), n(this, m, (c(this, P), c(this, C, ""))), this._files = (c(this, N), []), this._suffixes = ["B", "kB", "MB", "GB", "TB"], this.language = new H(this), this._counter = 0;
+    }
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return b(this, d);
+    }
+    set size(t) {
+      n(this, d, t);
+    }
+    /** Whether more than one file can be selected. */
+    get multiple() {
+      return b(this, f);
+    }
+    set multiple(t) {
+      n(this, f, t);
+    }
+    /** Whether the newly added files should override the previously added ones. */
+    get multipleMode() {
+      return b(this, p);
+    }
+    set multipleMode(t) {
+      n(this, p, t);
+    }
+    /** A comma-separated list of allowed unique file type specifiers. */
+    get accept() {
+      return b(this, _);
+    }
+    set accept(t) {
+      n(this, _, t);
+    }
+    /** This will be forwarded as aria-label to the native input element. */
+    get accessibilityLabel() {
+      return b(this, m);
+    }
+    set accessibilityLabel(t) {
+      n(this, m, 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() {
+      O.mostRecentModality === "keyboard" && M(this.loadButton).add("focus-visible");
+    }
+    _onBlur() {
+      M(this.loadButton).delete("focus-visible");
+    }
+    _readFiles(t) {
+      const e = t.target;
+      e.files && this.createFileList(e.files), K(t, this);
+    }
+    createFileList(t) {
+      const e = Array.from(t);
+      !this.multiple && t.length > 1 || this.accept && e.some((i) => !this.accept.split(",").some((E) => i.name.endsWith(E.trim()))) || (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = e : this.files = e.filter(
+        // Remove duplicates
+        (i) => this.files.findIndex((E) => this._checkFileEquality(i, E)) === -1
+      ).concat(this.files), this._updateA11yLiveRegion(), this._dispatchFileChangedEvent());
+    }
+    getButtonLabel() {
+      return this.multiple ? Q[this.language.current] : U[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 = X(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='${`${Y[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), M(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 || L}"
+                aria-label="${t || L}"
+                @change="${this._readFiles}"
+                @focus="${this._onFocus}"
+                @blur="${this._onBlur}"
+                ${G((e) => {
+        this._hiddenInput = e;
+      })}
+              />`)}
+          </div>
+          <p
+            role="status"
+            class="sbb-file-selector__visually-hidden"
+            ${G((e) => this._liveRegion = e)}
+          ></p>
+          ${this.files.length > 0 ? this._renderFileList() : L}
+          <div class="sbb-file-selector__error">
+            <slot name="error"></slot>
+          </div>
+        </div>
+      `;
+    }
+  }, d = new WeakMap(), f = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    z = [h({ reflect: !0 })], D = [$(), h({ type: Boolean })], R = [h({ attribute: "multiple-mode" })], S = [$(), h()], w = [$(), h({ attribute: "accessibility-label" })], W = [h({ attribute: !1 })], V = [h({ attribute: !1 })], o(a, null, z, { 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 }, F, k), o(a, null, D, { 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 }, x, I), o(a, 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 }, B, A), o(a, null, S, { 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 }, T, P), o(a, null, w, { 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, N), o(a, null, W, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+      e.value = i;
+    } }, metadata: t }, null, u), o(a, null, V, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (e) => "files" in e, set: (e, i) => {
+      e.files = i;
+    } }, metadata: t }, null, u), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.events = {
+    filechanged: "filechanged"
+  }, a;
+})();
+export {
+  be as SbbFileSelectorCommonElementMixin
+};

package/file-selector/common.js

@@ -0,0 +1,6 @@
+import { SbbFileSelectorCommonElementMixin as m } from "./common/file-selector-common.js";
+import { f as r } from "../file-selector-common-DbYkpr-x.js";
+export {
+  m as SbbFileSelectorCommonElementMixin,
+  r as fileSelectorCommonStyle
+};

package/file-selector/file-selector/file-selector.component.js

@@ -0,0 +1,39 @@
+import { __esDecorate as m, __runInitializers as n } from "tslib";
+import { LitElement as c } from "lit";
+import { customElement as b } from "lit/decorators.js";
+import { ref as d } from "lit/directives/ref.js";
+import { html as u } from "lit/static-html.js";
+import { boxSizingStyles as f } from "../../core/styles.js";
+import { SbbFileSelectorCommonElementMixin as p, fileSelectorCommonStyle as S } from "../common.js";
+import "../../button/secondary-button-static.js";
+let $ = (() => {
+  var e;
+  let o = [b("sbb-file-selector")], a, i = [], t, s = p(c);
+  return e = class extends s {
+    renderTemplate(l) {
+      return u`
+      <label>
+        <sbb-secondary-button-static
+          size=${this.size}
+          icon-name="folder-open-small"
+          ?disabled=${this.disabled || this.formDisabled}
+          ${d((r) => {
+        this.loadButton = r;
+      })}
+        >
+          ${this.getButtonLabel()}
+        </sbb-secondary-button-static>
+        ${l}
+      </label>
+    `;
+    }
+  }, t = e, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    m(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: l }, null, i), t = a.value, l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), e.styles = [f, S], e.events = {
+    filechanged: "filechanged"
+  }, n(t, i), t;
+})();
+export {
+  $ as SbbFileSelectorElement
+};