@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/checkbox/checkbox/checkbox.js

@@ -0,0 +1,80 @@
+var y = (e) => {
+  throw TypeError(e);
+};
+var S = (e, t, s) => t.has(e) || y("Cannot " + s);
+var m = (e, t, s) => (S(e, t, "read from private field"), s ? s.call(e) : t.get(e)), h = (e, t, s) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), d = (e, t, s, i) => (S(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
+import { __esDecorate as _, __runInitializers as b } from "tslib";
+import { css as w, LitElement as I, html as E } from "lit";
+import { customElement as $, property as P } from "lit/decorators.js";
+import { slotState as j, getOverride as C } from "../../core/decorators.js";
+import { isLean as D } from "../../core/dom.js";
+import { SbbIconNameMixin as O } from "../../icon.js";
+import { SbbCheckboxCommonElementMixin as L, checkboxCommonStyle as M } from "../common.js";
+import "../../visual-checkbox.js";
+const N = w`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
+let R = (() => {
+  var o, l, c;
+  let e = [$("sbb-checkbox"), j()], t, s = [], i, u = L(O(I)), p, x = [], f = [], k, v = [], z = [];
+  return c = class extends u {
+    constructor() {
+      super(...arguments);
+      h(this, o, b(this, x, D() ? "xs" : "m"));
+      h(this, l, (b(this, f), b(this, v, "end")));
+      b(this, z);
+    }
+    /**
+     * Size variant, either m, s or xs.
+     * @default 'm' / 'xs' (lean)
+     */
+    get size() {
+      return m(this, o);
+    }
+    set size(n) {
+      d(this, o, n);
+    }
+    /** The label position relative to the labelIcon. Defaults to end */
+    get iconPlacement() {
+      return m(this, l);
+    }
+    set iconPlacement(n) {
+      d(this, l, n);
+    }
+    render() {
+      return E`
+      <span class="sbb-checkbox-wrapper">
+        <span class="sbb-checkbox">
+          <span class="sbb-checkbox__inner">
+            <span class="sbb-checkbox__aligner">
+              <sbb-visual-checkbox
+                ?checked=${this.checked}
+                ?indeterminate=${this.indeterminate}
+                ?disabled=${this.disabled || this.formDisabled}
+                size=${this.size}
+              ></sbb-visual-checkbox>
+            </span>
+            <span class="sbb-checkbox__label">
+              <slot></slot>
+              <span class="sbb-checkbox__label--icon sbb-checkbox__aligner"
+                >${this.renderIconSlot()}</span
+              >
+            </span>
+          </span>
+        </span>
+      </span>
+    `;
+    }
+  }, o = new WeakMap(), l = new WeakMap(), i = c, (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    p = [P({ reflect: !0 }), C((a, r) => {
+      var g;
+      return ((g = a.group) == null ? void 0 : g.size) ?? r;
+    })], k = [P({ attribute: "icon-placement", reflect: !0 })], _(c, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, r) => {
+      a.size = r;
+    } }, metadata: n }, x, f), _(c, null, k, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (a) => "iconPlacement" in a, get: (a) => a.iconPlacement, set: (a, r) => {
+      a.iconPlacement = r;
+    } }, metadata: n }, v, z), _(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: n }, null, s), i = t.value, n && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), c.styles = [M, N], b(i, s), i;
+})();
+export {
+  R as SbbCheckboxElement
+};

package/checkbox/checkbox-group/checkbox-group.js

@@ -0,0 +1,113 @@
+var U = (i) => {
+  throw TypeError(i);
+};
+var A = (i, r, a) => r.has(i) || U("Cannot " + a);
+var m = (i, r, a) => (A(i, r, "read from private field"), a ? a.call(i) : r.get(i)), u = (i, r, a) => r.has(i) ? U("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), x = (i, r, a, n) => (A(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
+import { __esDecorate as p, __runInitializers as c } from "tslib";
+import { css as j, LitElement as N, html as O } from "lit";
+import { customElement as T, property as g } from "lit/decorators.js";
+import { interactivityChecker as B, isArrowKeyPressed as G, getNextElementIndex as M } from "../../core/a11y.js";
+import { slotState as V, forceType as H } from "../../core/decorators.js";
+import { isLean as J } from "../../core/dom.js";
+import { SbbDisabledMixin as Q } from "../../core/mixins.js";
+const R = j`*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto;--sbb-checkbox-group-width: max-content;--sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host([orientation=vertical]){--sbb-checkbox-group-orientation: column;--sbb-checkbox-group-width: 100%;--sbb-checkbox-group-checkbox-width: 100%}:host([orientation=vertical]) ::slotted(sbb-checkbox-panel){width:100%}:host([data-has-panel]){--sbb-checkbox-group-width: 100%}:host([data-has-panel]) ::slotted(sbb-checkbox-panel){flex:auto}:host([data-has-panel][orientation=vertical]){--sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=zero]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=zero]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=micro]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=micro]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=small]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=small]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=medium]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=medium]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=large]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=large]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=wide]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=wide]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=ultra]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}.sbb-checkbox-group{display:flex;flex-direction:var(--sbb-checkbox-group-orientation);gap:var(--sbb-checkbox-group-gap);align-items:flex-start;width:var(--sbb-checkbox-group-width)}.sbb-checkbox-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-checkbox-group__error{display:none}::slotted(sbb-checkbox){width:var(--sbb-checkbox-group-checkbox-width)}`;
+let it = (() => {
+  var l, h, b, d, s;
+  let i = [T("sbb-checkbox-group"), V()], r, a = [], n, f = Q(N), z, w = [], _ = [], v, y = [], q = [], E, F = [], S = [], I, D = [], C = [];
+  return s = class extends f {
+    constructor() {
+      var e;
+      super();
+      u(this, l, c(this, w, !1));
+      u(this, h, (c(this, _), c(this, y, J() ? "xs" : "m")));
+      u(this, b, (c(this, q), c(this, F, null)));
+      u(this, d, (c(this, S), c(this, D, "horizontal")));
+      c(this, C), (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleKeyDown(t));
+    }
+    /** Whether the checkbox group is required. */
+    get required() {
+      return m(this, l);
+    }
+    set required(e) {
+      x(this, l, e);
+    }
+    /**
+     * Size variant, either m, s or xs.
+     * @default 'm' / 'xs' (lean)
+     */
+    get size() {
+      return m(this, h);
+    }
+    set size(e) {
+      x(this, h, e);
+    }
+    /** Overrides the behaviour of `orientation` property. */
+    get horizontalFrom() {
+      return m(this, b);
+    }
+    set horizontalFrom(e) {
+      x(this, b, e);
+    }
+    /** Indicates the orientation of the checkboxes inside the `<sbb-checkbox-group>`. */
+    get orientation() {
+      return m(this, d);
+    }
+    set orientation(e) {
+      x(this, d, e);
+    }
+    /** List of contained checkbox elements. */
+    get checkboxes() {
+      var e;
+      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-checkbox, sbb-checkbox-panel")) ?? []).filter((t) => t.closest("sbb-checkbox-group") === this);
+    }
+    connectedCallback() {
+      var e;
+      super.connectedCallback(), this.toggleAttribute("data-has-panel", !!((e = this.querySelector) != null && e.call(this, "sbb-checkbox-panel")));
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("disabled") && this.checkboxes.forEach((t) => {
+        var o;
+        return (o = t.requestUpdate) == null ? void 0 : o.call(t, "disabled");
+      }), e.has("required") && this.checkboxes.forEach((t) => {
+        var o;
+        return (o = t.requestUpdate) == null ? void 0 : o.call(t, "required");
+      }), e.has("size") && this.checkboxes.forEach((t) => {
+        var o;
+        return (o = t.requestUpdate) == null ? void 0 : o.call(t, "size");
+      });
+    }
+    _handleKeyDown(e) {
+      var o;
+      const t = this.checkboxes.filter((k) => !k.disabled && B.isVisible(k));
+      if (!(!t || // don't trap nested handling
+      e.target !== this && e.target.parentElement !== this && e.target.parentElement.localName !== "sbb-selection-expansion-panel") && G(e)) {
+        const k = t.findIndex((L) => L === e.target), K = M(e, k, t.length);
+        (o = t[K]) == null || o.focus();
+      }
+    }
+    render() {
+      return O`
+      <div class="sbb-checkbox-group">
+        <slot></slot>
+      </div>
+      <div class="sbb-checkbox-group__error">
+        <slot name="error"></slot>
+      </div>
+    `;
+    }
+  }, l = new WeakMap(), h = new WeakMap(), b = new WeakMap(), d = new WeakMap(), n = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    z = [H(), g({ reflect: !0, type: Boolean })], v = [g()], E = [g({ attribute: "horizontal-from", reflect: !0 })], I = [g({ reflect: !0 })], p(s, null, z, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, o) => {
+      t.required = o;
+    } }, metadata: e }, w, _), p(s, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
+      t.size = o;
+    } }, metadata: e }, y, q), p(s, null, E, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, o) => {
+      t.horizontalFrom = o;
+    } }, metadata: e }, F, S), p(s, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, o) => {
+      t.orientation = o;
+    } }, metadata: e }, D, C), p(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = R, c(n, a), n;
+})();
+export {
+  it as SbbCheckboxGroupElement
+};

package/checkbox/checkbox-group.d.ts

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

package/checkbox/checkbox-group.d.ts.map

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

package/checkbox/checkbox-group.js

@@ -1,113 +1,4 @@
-var U = (i) => {
-  throw TypeError(i);
-};
-var A = (i, r, a) => r.has(i) || U("Cannot " + a);
-var m = (i, r, a) => (A(i, r, "read from private field"), a ? a.call(i) : r.get(i)), u = (i, r, a) => r.has(i) ? U("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), x = (i, r, a, n) => (A(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
-import { __esDecorate as p, __runInitializers as c } from "tslib";
-import { css as j, LitElement as N, html as O } from "lit";
-import { customElement as T, property as g } from "lit/decorators.js";
-import { interactivityChecker as B, isArrowKeyPressed as G, getNextElementIndex as M } from "../core/a11y.js";
-import { slotState as V, forceType as H } from "../core/decorators.js";
-import { isLean as J } from "../core/dom.js";
-import { SbbDisabledMixin as Q } from "../core/mixins.js";
-const R = j`*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto;--sbb-checkbox-group-width: max-content;--sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host([orientation=vertical]){--sbb-checkbox-group-orientation: column;--sbb-checkbox-group-width: 100%;--sbb-checkbox-group-checkbox-width: 100%}:host([orientation=vertical]) ::slotted(sbb-checkbox-panel){width:100%}:host([data-has-panel]){--sbb-checkbox-group-width: 100%}:host([data-has-panel]) ::slotted(sbb-checkbox-panel){flex:auto}:host([data-has-panel][orientation=vertical]){--sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=zero]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=zero]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=micro]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=micro]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=small]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=small]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=medium]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=medium]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=large]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=large]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=wide]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=wide]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-checkbox-group-orientation: row;--sbb-checkbox-group-checkbox-width: auto}:host([orientation=vertical][horizontal-from=ultra]) ::slotted(sbb-checkbox-panel){width:initial}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-panel])){--sbb-checkbox-group-width: max-content}}.sbb-checkbox-group{display:flex;flex-direction:var(--sbb-checkbox-group-orientation);gap:var(--sbb-checkbox-group-gap);align-items:flex-start;width:var(--sbb-checkbox-group-width)}.sbb-checkbox-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-checkbox-group__error{display:none}::slotted(sbb-checkbox){width:var(--sbb-checkbox-group-checkbox-width)}`;
-let it = (() => {
-  var l, h, b, d, s;
-  let i = [T("sbb-checkbox-group"), V()], r, a = [], n, f = Q(N), z, w = [], _ = [], v, y = [], q = [], E, F = [], S = [], I, D = [], C = [];
-  return s = class extends f {
-    constructor() {
-      var e;
-      super();
-      u(this, l, c(this, w, !1));
-      u(this, h, (c(this, _), c(this, y, J() ? "xs" : "m")));
-      u(this, b, (c(this, q), c(this, F, null)));
-      u(this, d, (c(this, S), c(this, D, "horizontal")));
-      c(this, C), (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleKeyDown(t));
-    }
-    /** Whether the checkbox group is required. */
-    get required() {
-      return m(this, l);
-    }
-    set required(e) {
-      x(this, l, e);
-    }
-    /**
-     * Size variant, either m, s or xs.
-     * @default 'm' / 'xs' (lean)
-     */
-    get size() {
-      return m(this, h);
-    }
-    set size(e) {
-      x(this, h, e);
-    }
-    /** Overrides the behaviour of `orientation` property. */
-    get horizontalFrom() {
-      return m(this, b);
-    }
-    set horizontalFrom(e) {
-      x(this, b, e);
-    }
-    /** Indicates the orientation of the checkboxes inside the `<sbb-checkbox-group>`. */
-    get orientation() {
-      return m(this, d);
-    }
-    set orientation(e) {
-      x(this, d, e);
-    }
-    /** List of contained checkbox elements. */
-    get checkboxes() {
-      var e;
-      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-checkbox, sbb-checkbox-panel")) ?? []).filter((t) => t.closest("sbb-checkbox-group") === this);
-    }
-    connectedCallback() {
-      var e;
-      super.connectedCallback(), this.toggleAttribute("data-has-panel", !!((e = this.querySelector) != null && e.call(this, "sbb-checkbox-panel")));
-    }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("disabled") && this.checkboxes.forEach((t) => {
-        var o;
-        return (o = t.requestUpdate) == null ? void 0 : o.call(t, "disabled");
-      }), e.has("required") && this.checkboxes.forEach((t) => {
-        var o;
-        return (o = t.requestUpdate) == null ? void 0 : o.call(t, "required");
-      }), e.has("size") && this.checkboxes.forEach((t) => {
-        var o;
-        return (o = t.requestUpdate) == null ? void 0 : o.call(t, "size");
-      });
-    }
-    _handleKeyDown(e) {
-      var o;
-      const t = this.checkboxes.filter((k) => !k.disabled && B.isVisible(k));
-      if (!(!t || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this && e.target.parentElement.localName !== "sbb-selection-expansion-panel") && G(e)) {
-        const k = t.findIndex((L) => L === e.target), K = M(e, k, t.length);
-        (o = t[K]) == null || o.focus();
-      }
-    }
-    render() {
-      return O`
-      <div class="sbb-checkbox-group">
-        <slot></slot>
-      </div>
-      <div class="sbb-checkbox-group__error">
-        <slot name="error"></slot>
-      </div>
-    `;
-    }
-  }, l = new WeakMap(), h = new WeakMap(), b = new WeakMap(), d = new WeakMap(), n = s, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    z = [H(), g({ reflect: !0, type: Boolean })], v = [g()], E = [g({ attribute: "horizontal-from", reflect: !0 })], I = [g({ reflect: !0 })], p(s, null, z, { kind: "accessor", name: "required", static: !1, private: !1, access: { has: (t) => "required" in t, get: (t) => t.required, set: (t, o) => {
-      t.required = o;
-    } }, metadata: e }, w, _), p(s, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
-      t.size = o;
-    } }, metadata: e }, y, q), p(s, null, E, { kind: "accessor", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, get: (t) => t.horizontalFrom, set: (t, o) => {
-      t.horizontalFrom = o;
-    } }, metadata: e }, F, S), p(s, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, o) => {
-      t.orientation = o;
-    } }, metadata: e }, D, C), p(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), s.styles = R, c(n, a), n;
-})();
+import { SbbCheckboxGroupElement as b } from "./checkbox-group/checkbox-group.js";
 export {
-  it as SbbCheckboxGroupElement
+  b as SbbCheckboxGroupElement
 };

package/checkbox/checkbox-panel/checkbox-panel.js

@@ -0,0 +1,82 @@
+var k = (e) => {
+  throw TypeError(e);
+};
+var x = (e, t, s) => t.has(e) || k("Cannot " + s);
+var f = (e, t, s) => (x(e, t, "read from private field"), s ? s.call(e) : t.get(e)), g = (e, t, s) => t.has(e) ? k("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), b = (e, t, s, i) => (x(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
+import { __runInitializers as h, __esDecorate as z } from "tslib";
+import { LitElement as v, nothing as y, html as S } from "lit";
+import { customElement as C, property as E } from "lit/decorators.js";
+import { slotState as w, getOverride as $ } from "../../core/decorators.js";
+import { isLean as D } from "../../core/dom.js";
+import { EventEmitter as I } from "../../core/eventing.js";
+import { SbbPanelMixin as M, SbbUpdateSchedulerMixin as O, panelCommonStyle as U } from "../../core/mixins.js";
+import { SbbCheckboxCommonElementMixin as j, checkboxCommonStyle as L } from "../common.js";
+import "../../screen-reader-only.js";
+import "../../visual-checkbox.js";
+let R = (() => {
+  var c, l;
+  let e = [C("sbb-checkbox-panel"), w()], t, s = [], i, m = M(j(O(v))), d, p = [], u = [];
+  var o = (l = class extends m {
+    constructor() {
+      super(...arguments);
+      g(this, c);
+      b(this, c, h(this, p, D() ? "s" : "m")), this.stateChange = (h(this, u), new I(this, o.events.stateChange, { bubbles: !0 }));
+    }
+    /**
+     * Size variant, either m or s.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return f(this, c);
+    }
+    set size(a) {
+      b(this, c, a);
+    }
+    willUpdate(a) {
+      super.willUpdate(a), a.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== a.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), a.has("disabled") && this.disabled !== a.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
+    }
+    render() {
+      return S`
+      <span class="sbb-selection-panel">
+        <div class="sbb-selection-panel__badge">
+          <slot name="badge"></slot>
+        </div>
+        <span class="sbb-checkbox-wrapper">
+          <span class="sbb-checkbox">
+            <span class="sbb-checkbox__inner">
+              <span class="sbb-checkbox__aligner">
+                <sbb-visual-checkbox
+                  ?checked=${this.checked}
+                  ?indeterminate=${this.indeterminate}
+                  ?disabled=${this.disabled || this.formDisabled}
+                ></sbb-visual-checkbox>
+              </span>
+              <span class="sbb-checkbox__label">
+                <slot></slot>
+                <slot name="suffix"></slot>
+              </span>
+            </span>
+            <slot name="subtext"></slot>
+            ${this.expansionState ? S`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : y}
+          </span>
+        </span>
+      </span>
+    `;
+    }
+  }, c = new WeakMap(), i = l, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    d = [E({ reflect: !0 }), $((n, r) => {
+      var _;
+      return (_ = n.group) != null && _.size ? n.group.size === "xs" ? "s" : n.group.size : r;
+    })], z(l, null, d, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, r) => {
+      n.size = r;
+    } }, metadata: a }, p, u), z(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: a }, null, s), o = i = t.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), l.styles = [L, U], l.events = {
+    stateChange: "stateChange",
+    panelConnected: "panelConnected"
+  }, h(i, s), l);
+  return o = i;
+})();
+export {
+  R as SbbCheckboxPanelElement
+};

package/checkbox/checkbox-panel.d.ts

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

package/checkbox/checkbox-panel.d.ts.map

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

package/checkbox/checkbox-panel.js

@@ -1,82 +1,4 @@
-var k = (e) => {
-  throw TypeError(e);
-};
-var x = (e, t, s) => t.has(e) || k("Cannot " + s);
-var f = (e, t, s) => (x(e, t, "read from private field"), s ? s.call(e) : t.get(e)), g = (e, t, s) => t.has(e) ? k("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), b = (e, t, s, i) => (x(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
-import { __runInitializers as h, __esDecorate as z } from "tslib";
-import { LitElement as v, nothing as y, html as S } from "lit";
-import { customElement as C, property as E } from "lit/decorators.js";
-import { slotState as w, getOverride as $ } from "../core/decorators.js";
-import { isLean as D } from "../core/dom.js";
-import { EventEmitter as I } from "../core/eventing.js";
-import { SbbPanelMixin as M, SbbUpdateSchedulerMixin as O, panelCommonStyle as U } from "../core/mixins.js";
-import { SbbCheckboxCommonElementMixin as j, checkboxCommonStyle as L } from "./common.js";
-import "../screen-reader-only.js";
-import "../visual-checkbox.js";
-let R = (() => {
-  var c, l;
-  let e = [C("sbb-checkbox-panel"), w()], t, s = [], i, m = M(j(O(v))), d, p = [], u = [];
-  var o = (l = class extends m {
-    constructor() {
-      super(...arguments);
-      g(this, c);
-      b(this, c, h(this, p, D() ? "s" : "m")), this.stateChange = (h(this, u), new I(this, o.events.stateChange, { bubbles: !0 }));
-    }
-    /**
-     * Size variant, either m or s.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return f(this, c);
-    }
-    set size(a) {
-      b(this, c, a);
-    }
-    willUpdate(a) {
-      super.willUpdate(a), a.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== a.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), a.has("disabled") && this.disabled !== a.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
-    }
-    render() {
-      return S`
-      <span class="sbb-selection-panel">
-        <div class="sbb-selection-panel__badge">
-          <slot name="badge"></slot>
-        </div>
-        <span class="sbb-checkbox-wrapper">
-          <span class="sbb-checkbox">
-            <span class="sbb-checkbox__inner">
-              <span class="sbb-checkbox__aligner">
-                <sbb-visual-checkbox
-                  ?checked=${this.checked}
-                  ?indeterminate=${this.indeterminate}
-                  ?disabled=${this.disabled || this.formDisabled}
-                ></sbb-visual-checkbox>
-              </span>
-              <span class="sbb-checkbox__label">
-                <slot></slot>
-                <slot name="suffix"></slot>
-              </span>
-            </span>
-            <slot name="subtext"></slot>
-            ${this.expansionState ? S`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : y}
-          </span>
-        </span>
-      </span>
-    `;
-    }
-  }, c = new WeakMap(), i = l, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    d = [E({ reflect: !0 }), $((n, r) => {
-      var _;
-      return (_ = n.group) != null && _.size ? n.group.size === "xs" ? "s" : n.group.size : r;
-    })], z(l, null, d, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, r) => {
-      n.size = r;
-    } }, metadata: a }, p, u), z(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: a }, null, s), o = i = t.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), l.styles = [L, U], l.events = {
-    stateChange: "stateChange",
-    panelConnected: "panelConnected"
-  }, h(i, s), l);
-  return o = i;
-})();
+import { SbbCheckboxPanelElement as o } from "./checkbox-panel/checkbox-panel.js";
 export {
-  R as SbbCheckboxPanelElement
+  o as SbbCheckboxPanelElement
 };

package/checkbox/checkbox.d.ts

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

package/checkbox/checkbox.d.ts.map

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

package/checkbox/checkbox.js

@@ -1,80 +1,4 @@
-var y = (e) => {
-  throw TypeError(e);
-};
-var S = (e, t, s) => t.has(e) || y("Cannot " + s);
-var m = (e, t, s) => (S(e, t, "read from private field"), s ? s.call(e) : t.get(e)), h = (e, t, s) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), d = (e, t, s, i) => (S(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
-import { __esDecorate as u, __runInitializers as b } from "tslib";
-import { css as w, LitElement as I, html as E } from "lit";
-import { customElement as $, property as P } from "lit/decorators.js";
-import { slotState as j, getOverride as C } from "../core/decorators.js";
-import { isLean as D } from "../core/dom.js";
-import { SbbIconNameMixin as O } from "../icon.js";
-import { SbbCheckboxCommonElementMixin as L, checkboxCommonStyle as M } from "./common.js";
-import "../visual-checkbox.js";
-const N = w`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
-let R = (() => {
-  var n, l, c;
-  let e = [$("sbb-checkbox"), j()], t, s = [], i, _ = L(O(I)), p, f = [], x = [], k, g = [], v = [];
-  return c = class extends _ {
-    constructor() {
-      super(...arguments);
-      h(this, n, b(this, f, D() ? "xs" : "m"));
-      h(this, l, (b(this, x), b(this, g, "end")));
-      b(this, v);
-    }
-    /**
-     * Size variant, either m, s or xs.
-     * @default 'm' / 'xs' (lean)
-     */
-    get size() {
-      return m(this, n);
-    }
-    set size(o) {
-      d(this, n, o);
-    }
-    /** The label position relative to the labelIcon. Defaults to end */
-    get iconPlacement() {
-      return m(this, l);
-    }
-    set iconPlacement(o) {
-      d(this, l, o);
-    }
-    render() {
-      return E`
-      <span class="sbb-checkbox-wrapper">
-        <span class="sbb-checkbox">
-          <span class="sbb-checkbox__inner">
-            <span class="sbb-checkbox__aligner">
-              <sbb-visual-checkbox
-                ?checked=${this.checked}
-                ?indeterminate=${this.indeterminate}
-                ?disabled=${this.disabled || this.formDisabled}
-                size=${this.size}
-              ></sbb-visual-checkbox>
-            </span>
-            <span class="sbb-checkbox__label">
-              <slot></slot>
-              <span class="sbb-checkbox__label--icon sbb-checkbox__aligner"
-                >${this.renderIconSlot()}</span
-              >
-            </span>
-          </span>
-        </span>
-      </span>
-    `;
-    }
-  }, n = new WeakMap(), l = new WeakMap(), i = c, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    p = [P({ reflect: !0 }), C((a, r) => {
-      var z;
-      return ((z = a.group) == null ? void 0 : z.size) ?? r;
-    })], k = [P({ attribute: "icon-placement", reflect: !0 })], u(c, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, r) => {
-      a.size = r;
-    } }, metadata: o }, f, x), u(c, null, k, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (a) => "iconPlacement" in a, get: (a) => a.iconPlacement, set: (a, r) => {
-      a.iconPlacement = r;
-    } }, metadata: o }, g, v), u(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: o }, null, s), i = t.value, o && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), c.styles = [M, N], b(i, s), i;
-})();
+import { SbbCheckboxElement as o } from "./checkbox/checkbox.js";
 export {
-  R as SbbCheckboxElement
+  o as SbbCheckboxElement
 };