@sbb-esta/lyne-elements 2.6.0 → 2.7.1

package/selection-expansion-panel/selection-expansion-panel.js

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

package/selection-expansion-panel.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './selection-expansion-panel/selection-expansion-panel.js';
 //# sourceMappingURL=selection-expansion-panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../src/elements/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA,cAAc,0DAA0D,CAAC"}
+{"version":3,"file":"selection-expansion-panel.d.ts","sourceRoot":"","sources":["../../src/elements/selection-expansion-panel.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0DAA0D,CAAC"}

package/selection-expansion-panel.js

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

package/sidebar/common.d.ts

@@ -1 +1,4 @@
+/**
+ * @entrypoint
+ */
 //# sourceMappingURL=common.d.ts.map

package/sidebar/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/sidebar/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAC3G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AACvG,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,qDAAqD,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/sidebar/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAC3G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AACvG,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,qDAAqD,CAAC"}

package/sidebar/common.js

@@ -1,7 +1,6 @@
-import { css as o } from "lit";
-const i = o`*,:before,:after{box-sizing:border-box}:host{position:absolute;top:0;right:0;bottom:0;left:0}`, b = o`*,:before,:after{box-sizing:border-box}:host{position:relative;display:block;height:100%;overflow:auto;outline-color:var(--sbb-focus-outline-color)}`, n = o`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-icon-sidebar-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color: var(--sbb-color-granite);--sbb-icon-sidebar-button-current-color: var(--sbb-color-charcoal);--sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start: 0;--sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color);--sbb-icon-sidebar-button__outline-width: 0}@media (forced-colors: active){:host{--sbb-icon-sidebar-button-current-color: Highlight !important}}@media (forced-colors: active){:host([data-button]){--sbb-icon-sidebar-button-color: ButtonText !important}}@media (forced-colors: active){:host([data-link]){--sbb-icon-sidebar-button-color: LinkText !important}}@media (any-hover: hover){:host(:not(:active,[data-active]):hover){--sbb-icon-sidebar-button__hover-shift: .0625rem;--sbb-icon-sidebar-button__cursor: pointer}}:host([data-focus-visible]),:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])),:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-action-base:focus-visible{--sbb-icon-sidebar-button__outline-width: var(--sbb-focus-outline-width)}.sbb-action-base{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);outline:var(--sbb-focus-outline-color) solid var(--sbb-icon-sidebar-button__outline-width);outline-offset:calc(-1 * var(--sbb-icon-sidebar-button__outline-width) - .3125rem);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);transition-property:color,padding}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";display:block;position:absolute;inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor}`;
+import { i as n, s as t, a } from "../icon-sidebar-button-common-DG8bnrBu.js";
 export {
   n as iconSidebarButtonCommonStyle,
-  i as sidebarContainerCommonStyle,
-  b as sidebarContentCommonStyle
+  t as sidebarContainerCommonStyle,
+  a as sidebarContentCommonStyle
 };

package/sidebar/icon-sidebar/icon-sidebar.js

@@ -0,0 +1,47 @@
+var m = (t) => {
+  throw TypeError(t);
+};
+var h = (t, e, r) => e.has(t) || m("Cannot " + r);
+var f = (t, e, r) => (h(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), p = (t, e, r, s) => (h(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
+import { __esDecorate as v, __runInitializers as c } from "tslib";
+import { css as g, LitElement as k, html as y } from "lit";
+import { customElement as S, property as z } from "lit/decorators.js";
+const w = g`*,:before,:after{box-sizing:border-box}:host{display:flex;flex-direction:column;flex-shrink:0;width:var(--sbb-size-element-m);overflow-y:auto;background-color:var(--sbb-color-white);margin-block-start:var(--sbb-spacing-fixed-3x);padding-block-start:var(--sbb-spacing-fixed-1x);border-start-end-radius:var(--sbb-icon-sidebar-border-radius);border-start-start-radius:0;--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x)}:host([color=milk]){background-color:var(--sbb-color-milk)}`;
+let L = (() => {
+  var l, a;
+  let t = [S("sbb-icon-sidebar")], e, r = [], s, n = k, b, d = [], u = [];
+  return a = class extends n {
+    constructor() {
+      super();
+      _(this, l, c(this, d, "white"));
+      c(this, u);
+      const o = this.attachInternals();
+      o.role = "navigation";
+    }
+    /** Background color of the icon sidebar. Either `white` or `milk`. **/
+    get color() {
+      return f(this, l);
+    }
+    set color(o) {
+      p(this, l, o);
+    }
+    /** Returns the SbbIconSidebarContainerElement where this icon-sidebar is contained. */
+    get container() {
+      return this.closest("sbb-icon-sidebar-container");
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.classList.add("sbb-scrollbar");
+    }
+    render() {
+      return y`<slot></slot>`;
+    }
+  }, l = new WeakMap(), s = a, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    b = [z({ reflect: !0 })], v(a, null, b, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, x) => {
+      i.color = x;
+    } }, metadata: o }, d, u), v(null, e = { value: s }, t, { kind: "class", name: s.name, metadata: o }, null, r), s = e.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), a.styles = w, c(s, r), s;
+})();
+export {
+  L as SbbIconSidebarElement
+};

package/sidebar/icon-sidebar-button/icon-sidebar-button.js

@@ -0,0 +1,20 @@
+import { __esDecorate as n, __runInitializers as i } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../../core/base-elements.js";
+import { SbbIconNameMixin as u } from "../../icon.js";
+import { iconSidebarButtonCommonStyle as b } from "../common.js";
+let y = (() => {
+  var e;
+  let s = [m("sbb-icon-sidebar-button")], r, l = [], t, o = u(c);
+  return e = class extends o {
+    renderTemplate() {
+      return super.renderIconSlot();
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, r = { value: t }, s, { kind: "class", name: t.name, metadata: a }, null, l), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = b, i(t, l), t;
+})();
+export {
+  y as SbbIconSidebarButtonElement
+};

package/sidebar/icon-sidebar-button.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './icon-sidebar-button/icon-sidebar-button.js';
 //# sourceMappingURL=icon-sidebar-button.d.ts.map

package/sidebar/icon-sidebar-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-sidebar-button.d.ts","sourceRoot":"","sources":["../../../src/elements/sidebar/icon-sidebar-button.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC"}
+{"version":3,"file":"icon-sidebar-button.d.ts","sourceRoot":"","sources":["../../../src/elements/sidebar/icon-sidebar-button.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8CAA8C,CAAC"}

package/sidebar/icon-sidebar-button.js

@@ -1,20 +1,4 @@
-import { __esDecorate as n, __runInitializers as i } from "tslib";
-import { customElement as m } from "lit/decorators.js";
-import { SbbButtonBaseElement as c } from "../core/base-elements.js";
-import { SbbIconNameMixin as u } from "../icon.js";
-import { iconSidebarButtonCommonStyle as b } from "./common.js";
-let y = (() => {
-  var e;
-  let s = [m("sbb-icon-sidebar-button")], r, l = [], t, o = u(c);
-  return e = class extends o {
-    renderTemplate() {
-      return super.renderIconSlot();
-    }
-  }, t = e, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    n(null, r = { value: t }, s, { kind: "class", name: t.name, metadata: a }, null, l), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), e.styles = b, i(t, l), t;
-})();
+import { SbbIconSidebarButtonElement as t } from "./icon-sidebar-button/icon-sidebar-button.js";
 export {
-  y as SbbIconSidebarButtonElement
+  t as SbbIconSidebarButtonElement
 };

package/sidebar/icon-sidebar-container/icon-sidebar-container.js

@@ -0,0 +1,35 @@
+import { __esDecorate as n, __runInitializers as o } from "tslib";
+import { css as m, LitElement as c, html as b } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { sidebarContainerCommonStyle as u } from "../common.js";
+const h = m`:host{display:flex}`;
+let S = (() => {
+  var l;
+  let i = [d("sbb-icon-sidebar-container")], s, a = [], e, r = c;
+  return l = class extends r {
+    /** The icon-sidebar children. */
+    get sidebars() {
+      var t;
+      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, ":scope > sbb-icon-sidebar")) ?? []);
+    }
+    /** The icon-sidebar child at the start position. */
+    get start() {
+      var t;
+      return ((t = this.firstElementChild) == null ? void 0 : t.localName) === "sbb-icon-sidebar" ? this.firstElementChild : null;
+    }
+    /** The icon-sidebar child at the end position. */
+    get end() {
+      var t;
+      return ((t = this.lastElementChild) == null ? void 0 : t.localName) === "sbb-icon-sidebar" ? this.lastElementChild : null;
+    }
+    render() {
+      return b`<slot></slot>`;
+    }
+  }, e = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n(null, s = { value: e }, i, { kind: "class", name: e.name, metadata: t }, null, a), e = s.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = [u, h], o(e, a), e;
+})();
+export {
+  S as SbbIconSidebarContainerElement
+};

package/sidebar/icon-sidebar-container.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './icon-sidebar-container/icon-sidebar-container.js';
 //# sourceMappingURL=icon-sidebar-container.d.ts.map

package/sidebar/icon-sidebar-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-sidebar-container.d.ts","sourceRoot":"","sources":["../../../src/elements/sidebar/icon-sidebar-container.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC"}
+{"version":3,"file":"icon-sidebar-container.d.ts","sourceRoot":"","sources":["../../../src/elements/sidebar/icon-sidebar-container.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oDAAoD,CAAC"}

package/sidebar/icon-sidebar-container.js

@@ -1,35 +1,4 @@
-import { __esDecorate as n, __runInitializers as o } from "tslib";
-import { css as m, LitElement as c, html as b } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { sidebarContainerCommonStyle as u } from "./common.js";
-const h = m`:host{display:flex}`;
-let S = (() => {
-  var l;
-  let i = [d("sbb-icon-sidebar-container")], s, a = [], e, r = c;
-  return l = class extends r {
-    /** The icon-sidebar children. */
-    get sidebars() {
-      var t;
-      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, ":scope > sbb-icon-sidebar")) ?? []);
-    }
-    /** The icon-sidebar child at the start position. */
-    get start() {
-      var t;
-      return ((t = this.firstElementChild) == null ? void 0 : t.localName) === "sbb-icon-sidebar" ? this.firstElementChild : null;
-    }
-    /** The icon-sidebar child at the end position. */
-    get end() {
-      var t;
-      return ((t = this.lastElementChild) == null ? void 0 : t.localName) === "sbb-icon-sidebar" ? this.lastElementChild : null;
-    }
-    render() {
-      return b`<slot></slot>`;
-    }
-  }, e = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    n(null, s = { value: e }, i, { kind: "class", name: e.name, metadata: t }, null, a), e = s.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = [u, h], o(e, a), e;
-})();
+import { SbbIconSidebarContainerElement as o } from "./icon-sidebar-container/icon-sidebar-container.js";
 export {
-  S as SbbIconSidebarContainerElement
+  o as SbbIconSidebarContainerElement
 };

package/sidebar/icon-sidebar-content/icon-sidebar-content.js

@@ -0,0 +1,23 @@
+import { __esDecorate as n, __runInitializers as c } from "tslib";
+import { css as i, LitElement as m, html as b } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { sidebarContentCommonStyle as d } from "../common.js";
+const f = i`:host{flex-grow:1}`;
+let h = (() => {
+  var e;
+  let o = [u("sbb-icon-sidebar-content")], l, s = [], t, r = m;
+  return e = class extends r {
+    connectedCallback() {
+      super.connectedCallback(), this.classList.add("sbb-scrollbar");
+    }
+    render() {
+      return b`<slot></slot>`;
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n(null, l = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, s), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [d, f], c(t, s), t;
+})();
+export {
+  h as SbbIconSidebarContentElement
+};

package/sidebar/icon-sidebar-content.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './icon-sidebar-content/icon-sidebar-content.js';
 //# sourceMappingURL=icon-sidebar-content.d.ts.map