@sbb-esta/lyne-elements 0.52.2 → 1.0.0

package/checkbox/checkbox/checkbox.d.ts

@@ -1,17 +1,12 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { SbbCheckedStateChange, SbbDisabledStateChange, SbbIconPlacement, SbbStateChange } from '../../core/interfaces.js';
-import { SbbCheckboxGroupElement } from '../checkbox-group.js';
+import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
+import { SbbIconPlacement } from '../../core/interfaces.js';
 
-export type SbbCheckboxStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
-export type SbbCheckboxSize = 's' | 'm';
-declare const SbbCheckboxElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & import('../../core/mixins.js').Constructor<import('../../core/mixins.js').SbbFormAssociatedCheckboxMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+declare const SbbCheckboxElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**
  * It displays a checkbox enhanced with the SBB Design.
  *
  * @slot - Use the unnamed slot to add content to the `sbb-checkbox`.
  * @slot icon - Slot used to render the checkbox icon (disabled inside a selection panel).
- * @slot subtext - Slot used to render a subtext under the label (only visible within a selection panel).
- * @slot suffix - Slot used to render additional content after the label (only visible within a selection panel).
  * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
@@ -20,48 +15,10 @@ export declare class SbbCheckboxElement extends SbbCheckboxElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
         readonly didChange: "didChange";
-        readonly stateChange: "stateChange";
-        readonly checkboxLoaded: "checkboxLoaded";
     };
-    /** Whether the checkbox is indeterminate. */
-    indeterminate: boolean;
     /** The label position relative to the labelIcon. Defaults to end */
     iconPlacement: SbbIconPlacement;
-    /** Label size variant, either m or s. */
-    set size(value: SbbCheckboxSize);
-    get size(): SbbCheckboxSize;
-    private _size;
-    /** Reference to the connected checkbox group. */
-    get group(): SbbCheckboxGroupElement | null;
-    private _group;
-    /**
-     * Whether the input is the main input of a selection panel.
-     * @internal
-     */
-    get isSelectionPanelInput(): boolean;
-    /** The label describing whether the selection panel is expanded (for screen readers only). */
-    private _selectionPanelExpandedLabel;
-    private _language;
-    private _selectionPanelElement;
-    /**
-     * @internal
-     * Internal event that emits whenever the state of the checkbox
-     * in relation to the parent selection panel changes.
-     */
-    private _stateChange;
-    /**
-     * @internal
-     * Internal event that emits when the checkbox is loaded.
-     */
-    private _checkboxLoaded;
     constructor();
-    connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    protected isDisabledExternally(): boolean;
-    protected isRequiredExternally(): boolean;
-    protected withUserInteraction(): void;
-    private _updateExpandedLabel;
     protected render(): TemplateResult;
 }
 declare global {

package/checkbox/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAQlC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAIpE,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAC1C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,CAAC;;AAExC;;;;;;;;;;GAUG;AACH,qBACa,kBAAmB,SAAQ,uBAEvC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,6CAA6C;IACT,aAAa,UAAS;IAE1D,oEAAoE;IAE7D,aAAa,EAAE,gBAAgB,CAAS;IAE/C,yCAAyC;IACzC,IACW,IAAI,CAAC,KAAK,EAAE,eAAe,EAErC;IACD,IAAW,IAAI,IAAI,eAAe,CAEjC;IACD,OAAO,CAAC,KAAK,CAAwB;IAErC,iDAAiD;IACjD,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAEjD;IACD,OAAO,CAAC,MAAM,CAAwC;IAEtD;;;OAGG;IACH,IAAW,qBAAqB,IAAI,OAAO,CAE1C;IAED,8FAA8F;IACrF,OAAO,CAAC,4BAA4B,CAAU;IAEvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,sBAAsB,CAAyC;IAEvE;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;OAGG;IACH,OAAO,CAAC,eAAe,CAIrB;;IAOc,iBAAiB,IAAI,IAAI;cAiBhB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAmBxE,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAW3D,oBAAoB,IAAI,OAAO;cAI/B,oBAAoB,IAAI,OAAO;cAI/B,mBAAmB,IAAI,IAAI;YAMhC,oBAAoB;cAcf,MAAM,IAAI,cAAc;CA0B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,0BAA0B,CAAC;;AAIlC;;;;;;;;GAQG;AACH,qBACa,kBAAmB,SAAQ,uBAEvC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAwC;IAErF,gBAAuB,MAAM;;MAElB;IAEX,oEAAoE;IAE7D,aAAa,EAAE,gBAAgB,CAAS;;cAO5B,MAAM,IAAI,cAAc;CAuB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

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

@@ -1,6 +1,8 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
 import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
-import { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox.js';
+import { SbbCheckboxPanelElement } from '../checkbox-panel.js';
+import { SbbCheckboxElement } from '../checkbox.js';
+import { SbbCheckboxSize } from '../common.js';
 
 declare const SbbCheckboxGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
 /**
@@ -20,7 +22,7 @@ export declare class SbbCheckboxGroupElement extends SbbCheckboxGroupElement_bas
     /** Indicates the orientation of the checkboxes inside the `<sbb-checkbox-group>`. */
     orientation: SbbOrientation;
     /** List of contained checkbox elements. */
-    get checkboxes(): SbbCheckboxElement[];
+    get checkboxes(): (SbbCheckboxElement | SbbCheckboxPanelElement)[];
     private _abort;
     constructor();
     connectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;;AAI1E;;;;;GAKG;AACH,qBACa,uBAAwB,SAAQ,4BAA4B;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IACK,QAAQ,UAAS;IAEpE,mCAAmC;IAChB,IAAI,EAAE,eAAe,CAAO;IAE/C,yDAAyD;IAElD,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C,qFAAqF;IAE9E,WAAW,EAAE,cAAc,CAAgB;IAElD,2CAA2C;IAC3C,IAAW,UAAU,IAAI,kBAAkB,EAAE,CAI5C;IAED,OAAO,CAAC,MAAM,CAAsE;;IAOpE,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E,OAAO,CAAC,cAAc;cAyBH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AAIpD;;;;;GAKG;AACH,qBACa,uBAAwB,SAAQ,4BAA4B;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IACK,QAAQ,UAAS;IAEpE,mCAAmC;IAChB,IAAI,EAAE,eAAe,CAAO;IAE/C,yDAAyD;IAElD,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C,qFAAqF;IAE9E,WAAW,EAAE,cAAc,CAAgB;IAElD,2CAA2C;IAC3C,IAAW,UAAU,IAAI,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,EAAE,CAMxE;IAED,OAAO,CAAC,MAAM,CAAsE;;IAOpE,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E,OAAO,CAAC,cAAc;cA0BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/checkbox/checkbox-group.js

@@ -1,9 +1,9 @@
 import { css as h, LitElement as l, html as d } from "lit";
 import { property as s, customElement as p } from "lit/decorators.js";
-import { interactivityChecker as x, isArrowKeyPressed as u, getNextElementIndex as m } from "../core/a11y.js";
-import { SbbConnectedAbortController as g, SbbSlotStateController as k } from "../core/controllers.js";
+import { interactivityChecker as x, isArrowKeyPressed as m, getNextElementIndex as u } from "../core/a11y.js";
+import { SbbConnectedAbortController as k, SbbSlotStateController as g } from "../core/controllers.js";
 import { SbbDisabledMixin as f } from "../core/mixins.js";
-const w = h`*,: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([data-has-selection-panel]){--sbb-checkbox-group-width: 100%}:host([data-has-selection-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]:not([data-has-selection-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]:not([data-has-selection-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]:not([data-has-selection-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]:not([data-has-selection-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]:not([data-has-selection-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]:not([data-has-selection-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]:not([data-has-selection-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)}`;
+const w = h`*,: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)}`;
 var v = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, o, e, r) => {
   for (var i = r > 1 ? void 0 : r ? z(o, e) : o, n = t.length - 1, c; n >= 0; n--)
     (c = t[n]) && (i = (r ? c(o, e, i) : c(i)) || i);
@@ -11,12 +11,12 @@ var v = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, o, e
 };
 let a = class extends f(l) {
   constructor() {
-    super(), this.required = !1, this.size = "m", this.orientation = "horizontal", this._abort = new g(this), new k(this);
+    super(), this.required = !1, this.size = "m", this.orientation = "horizontal", this._abort = new k(this), new g(this);
   }
   /** List of contained checkbox elements. */
   get checkboxes() {
     var t;
-    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-checkbox")) ?? []).filter(
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-checkbox, sbb-checkbox-panel")) ?? []).filter(
       (o) => o.closest("sbb-checkbox-group") === this
     );
   }
@@ -24,7 +24,10 @@ let a = class extends f(l) {
     var o;
     super.connectedCallback();
     const t = this._abort.signal;
-    this.addEventListener("keydown", (e) => this._handleKeyDown(e), { signal: t }), this.toggleAttribute("data-has-selection-panel", !!((o = this.querySelector) != null && o.call(this, "sbb-selection-panel")));
+    this.addEventListener("keydown", (e) => this._handleKeyDown(e), { signal: t }), this.toggleAttribute(
+      "data-has-panel",
+      !!((o = this.querySelector) != null && o.call(this, "sbb-selection-expansion-panel, sbb-checkbox-panel"))
+    );
   }
   willUpdate(t) {
     super.willUpdate(t), t.has("disabled") && this.checkboxes.forEach((o) => {
@@ -44,10 +47,10 @@ let a = class extends f(l) {
       (r) => !r.disabled && x.isVisible(r)
     );
     if (!(!o || // don't trap nested handling
-    t.target !== this && t.target.parentElement !== this && t.target.parentElement.nodeName !== "SBB-SELECTION-PANEL") && u(t)) {
+    t.target !== this && t.target.parentElement !== this && t.target.parentElement.localName !== "sbb-selection-expansion-panel") && m(t)) {
       const r = o.findIndex(
         (n) => n === t.target
-      ), i = m(t, r, o.length);
+      ), i = u(t, r, o.length);
       (e = o[i]) == null || e.focus();
     }
   }

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

@@ -0,0 +1,41 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces/types.js';
+
+export type SbbCheckboxPanelStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
+declare const SbbCheckboxPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
+/**
+ * It displays a checkbox enhanced with selection panel design.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-checkbox`.
+ * @slot subtext - Slot used to render a subtext under the label (only visible within a selection panel).
+ * @slot suffix - Slot used to render additional content after the label (only visible within a selection panel).
+ * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {Event} change - Event fired on change.
+ * @event {InputEvent} input - Event fired on input.
+ */
+export declare class SbbCheckboxPanelElement extends SbbCheckboxPanelElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly didChange: "didChange";
+        readonly stateChange: "stateChange";
+        readonly panelConnected: "panelConnected";
+    };
+    /**
+     * @internal
+     * Internal event that emits whenever the state of the checkbox
+     * in relation to the parent selection panel changes.
+     */
+    protected stateChange: EventEmitter<SbbCheckboxPanelStateChange>;
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-checkbox-panel': SbbCheckboxPanelElement;
+    }
+}
+export {};
+//# sourceMappingURL=checkbox-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-panel/checkbox-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,gCAAgC,CAAC;AAIxC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAC/C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;GAUG;AACH,qBACa,uBAAwB,SAAQ,4BAE5C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA2C;IAGxF,gBAAuB,MAAM;;;;MAIlB;IAEX;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAI9D;;cAOuB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAkBxE,MAAM,IAAI,cAAc;CA8B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/checkbox/checkbox-panel.d.ts

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

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

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

package/checkbox/checkbox-panel.js

@@ -0,0 +1,67 @@
+import { LitElement as o, html as c, nothing as h } from "lit";
+import { customElement as r } from "lit/decorators.js";
+import { SbbSlotStateController as d } from "../core/controllers.js";
+import { EventEmitter as p } from "../core/eventing.js";
+import { SbbPanelMixin as m, SbbUpdateSchedulerMixin as x, panelCommonStyle as f } from "../core/mixins.js";
+import { SbbCheckboxCommonElementMixin as C, checkboxCommonStyle as k } from "./common.js";
+import "../screen-reader-only.js";
+import "../visual-checkbox.js";
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, v = (e, a, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? _(a, i) : a, b = e.length - 1, l; b >= 0; b--)
+    (l = e[b]) && (s = (n ? l(a, i, s) : l(s)) || s);
+  return n && s && u(a, i, s), s;
+};
+let t = class extends m(
+  C(x(o))
+) {
+  constructor() {
+    super(), this.stateChange = new p(
+      this,
+      t.events.stateChange,
+      { bubbles: !0 }
+    ), new d(this);
+  }
+  async willUpdate(e) {
+    super.willUpdate(e), e.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== e.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), e.has("disabled") && this.disabled !== e.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
+  }
+  render() {
+    return c`
+      <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 ? c`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : h}
+          </span>
+        </span>
+      </span>
+    `;
+  }
+};
+t.styles = [k, f];
+t.events = {
+  didChange: "didChange",
+  stateChange: "stateChange",
+  panelConnected: "panelConnected"
+};
+t = v([
+  r("sbb-checkbox-panel")
+], t);
+export {
+  t as SbbCheckboxPanelElement
+};

package/checkbox/checkbox.js

@@ -1,86 +1,23 @@
-import { css as h, LitElement as d, html as p } from "lit";
-import { property as c, state as u, customElement as x } from "lit/decorators.js";
-import { SbbLanguageController as f, SbbSlotStateController as m } from "../core/controllers.js";
-import { EventEmitter as r } from "../core/eventing.js";
-import { i18nExpanded as g, i18nCollapsed as k } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as _, SbbFormAssociatedCheckboxMixin as v, SbbHydrationMixin as y } from "../core/mixins.js";
-import { SbbIconNameMixin as w } from "../icon.js";
-import "../screen-reader-only.js";
+import { css as i, LitElement as r, html as h } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+import { SbbSlotStateController as f } from "../core/controllers.js";
+import { SbbIconNameMixin as u } from "../icon.js";
+import { SbbCheckboxCommonElementMixin as d, checkboxCommonStyle as x } from "./common.js";
 import "../visual-checkbox.js";
-const E = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer;--sbb-checkbox-suffix-color: var(--sbb-color-charcoal);--sbb-checkbox-subtext-color: var(--sbb-color-granite);--sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);display:inline-block;outline:none!important}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}:host([data-is-selection-panel-input]){--sbb-checkbox-label-gap: 0}:host(:not([data-is-inside-selection-panel])) :is(slot[name=subtext],slot[name=suffix]){display:none}slot[name=suffix]{color:var(--sbb-checkbox-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-checkbox-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .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))}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=m]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}:host([data-is-selection-panel-input]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox__inner:before{content:"";position:absolute;display:block;inset-block:calc(var(--sbb-spacing-responsive-xs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);inset-inline:calc(var(--sbb-spacing-responsive-xxs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);border:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-focus-outline-offset))}.sbb-checkbox__aligner,.sbb-checkbox__label--icon{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:is(:not([icon-name],[data-slot-names~=icon]),[data-is-selection-panel-input])) .sbb-checkbox__label--icon{display:none}.sbb-checkbox__label{display:flex;gap:var(--sbb-checkbox-label-gap);color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}: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}:host(:not([data-is-selection-panel-input][data-has-selection-panel-label])) .sbb-checkbox__expanded-label{display:none}`;
-var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, s, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? C(s, o) : s, b = e.length - 1, l; b >= 0; b--)
-    (l = e[b]) && (i = (n ? l(s, o, i) : l(i)) || i);
-  return n && i && z(s, o, i), i;
+const _ = i`: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(: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}`;
+var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, s, c, t) => {
+  for (var e = t > 1 ? void 0 : t ? v(s, c) : s, n = l.length - 1, b; n >= 0; n--)
+    (b = l[n]) && (e = (t ? b(s, c, e) : b(e)) || e);
+  return t && e && k(s, c, e), e;
 };
-let t = class extends _(
-  v(w(y(d)))
+let o = class extends d(
+  u(r)
 ) {
   constructor() {
-    super(), this.indeterminate = !1, this.iconPlacement = "end", this._size = "m", this._group = null, this._language = new f(this), this._selectionPanelElement = null, this._stateChange = new r(
-      this,
-      t.events.stateChange,
-      { bubbles: !0 }
-    ), this._checkboxLoaded = new r(
-      this,
-      t.events.checkboxLoaded,
-      { bubbles: !0 }
-    ), new m(this);
-  }
-  set size(e) {
-    this._size = e;
-  }
-  get size() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
-  }
-  /** Reference to the connected checkbox group. */
-  get group() {
-    return this._group;
-  }
-  /**
-   * Whether the input is the main input of a selection panel.
-   * @internal
-   */
-  get isSelectionPanelInput() {
-    return this.hasAttribute("data-is-selection-panel-input");
-  }
-  connectedCallback() {
-    var e, s;
-    super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), this._selectionPanelElement = (e = this.closest) == null ? void 0 : e.call(this, "sbb-selection-panel"), this.toggleAttribute("data-is-inside-selection-panel", !!this._selectionPanelElement), this.toggleAttribute(
-      "data-is-selection-panel-input",
-      !!this._selectionPanelElement && !((s = this.closest) != null && s.call(this, 'sbb-selection-panel [slot="content"]'))
-    ), this._checkboxLoaded.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
-  }
-  async willUpdate(e) {
-    super.willUpdate(e), e.has("checked") && this.isSelectionPanelInput && this.checked !== e.get("checked") && (this._stateChange.emit({ type: "checked", checked: this.checked }), this._updateExpandedLabel()), e.has("disabled") && this.isSelectionPanelInput && this.disabled !== e.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled }), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.startUpdate(), setTimeout(() => {
-      this.isSelectionPanelInput && this._updateExpandedLabel(), this.completeUpdate();
-    });
-  }
-  isDisabledExternally() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.disabled) ?? !1;
-  }
-  isRequiredExternally() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.required) ?? !1;
-  }
-  withUserInteraction() {
-    this.indeterminate && (this.indeterminate = !1);
-  }
-  async _updateExpandedLabel() {
-    var e;
-    if (await this.hydrationComplete, !((e = this._selectionPanelElement) != null && e.hasContent)) {
-      this._selectionPanelExpandedLabel = "", this.removeAttribute("data-has-selection-panel-label");
-      return;
-    }
-    this._selectionPanelExpandedLabel = this.checked ? ", " + g[this._language.current] : ", " + k[this._language.current], this.toggleAttribute("data-has-selection-panel-label", !0);
+    super(), this.iconPlacement = "end", new f(this);
   }
   render() {
-    return p`
+    return h`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -93,40 +30,26 @@ let t = class extends _(
             </span>
             <span class="sbb-checkbox__label">
               <slot></slot>
-              <span class="sbb-checkbox__label--icon">${this.renderIconSlot()}</span>
-              <slot name="suffix"></slot>
+              <span class="sbb-checkbox__label--icon sbb-checkbox__aligner"
+                >${this.renderIconSlot()}</span
+              >
             </span>
           </span>
-          <slot name="subtext"></slot>
-          <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
-            ${this._selectionPanelExpandedLabel}
-          </sbb-screen-reader-only>
         </span>
       </span>
     `;
   }
 };
-t.styles = E;
-t.events = {
-  didChange: "didChange",
-  stateChange: "stateChange",
-  checkboxLoaded: "checkboxLoaded"
+o.styles = [x, _];
+o.events = {
+  didChange: "didChange"
 };
 a([
-  c({ type: Boolean })
-], t.prototype, "indeterminate", 2);
-a([
-  c({ attribute: "icon-placement", reflect: !0 })
-], t.prototype, "iconPlacement", 2);
-a([
-  c({ reflect: !0 })
-], t.prototype, "size", 1);
-a([
-  u()
-], t.prototype, "_selectionPanelExpandedLabel", 2);
-t = a([
-  x("sbb-checkbox")
-], t);
+  p({ attribute: "icon-placement", reflect: !0 })
+], o.prototype, "iconPlacement", 2);
+o = a([
+  m("sbb-checkbox")
+], o);
 export {
-  t as SbbCheckboxElement
+  o as SbbCheckboxElement
 };

package/checkbox/common/checkbox-common.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { Constructor, SbbDisabledMixinType, SbbFormAssociatedCheckboxMixinType, SbbRequiredMixinType } from '../../core/mixins.js';
+import { SbbCheckboxGroupElement } from '../checkbox-group.js';
+
+export type SbbCheckboxSize = 's' | 'm';
+export declare class SbbCheckboxCommonElementMixinType extends SbbFormAssociatedCheckboxMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType> {
+    indeterminate: boolean;
+    set size(value: SbbCheckboxSize);
+    get size(): SbbCheckboxSize;
+    get group(): SbbCheckboxGroupElement | null;
+}
+export declare const SbbCheckboxCommonElementMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SbbCheckboxCommonElementMixinType> & T;
+//# sourceMappingURL=checkbox-common.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/common/checkbox-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,kCAAkC,EACvC,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,CAAC;AAExC,MAAM,CAAC,OAAO,OAAO,iCACnB,SAAQ,kCACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEhE,aAAa,EAAE,OAAO,CAAC;IAE9B,IAAW,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE;IACxC,IAAW,IAAI,IAAI,eAAe,CAAC;IAEnC,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAAC;CACpD;AAGD,eAAO,MAAM,6BAA6B,kDAC5B,CAAC,KACZ,YAAY,iCAAiC,CAAC,GAAG,CAuDnD,CAAC"}

package/checkbox/common.d.ts

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

package/checkbox/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/checkbox/common.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAE5C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0CAA0C,CAAC"}

package/checkbox/common.js

@@ -0,0 +1,52 @@
+import { property as a } from "lit/decorators.js";
+import { SbbFormAssociatedCheckboxMixin as n } from "../core/mixins.js";
+import { css as l } from "lit";
+var h = Object.defineProperty, p = Object.getOwnPropertyDescriptor, c = (o, t, b, e) => {
+  for (var s = e > 1 ? void 0 : e ? p(t, b) : t, i = o.length - 1, r; i >= 0; i--)
+    (r = o[i]) && (s = (e ? r(t, b, s) : r(s)) || s);
+  return e && s && h(t, b, s), s;
+};
+const m = (o) => {
+  class t extends n(o) {
+    constructor() {
+      super(...arguments), this.indeterminate = !1, this._size = "m", this._group = null;
+    }
+    set size(e) {
+      this._size = e;
+    }
+    get size() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
+    }
+    /** Reference to the connected checkbox group. */
+    get group() {
+      return this._group;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), ["disabled", "required", "size"].forEach((e) => this.requestUpdate(e));
+    }
+    async willUpdate(e) {
+      super.willUpdate(e), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
+    }
+    isDisabledExternally() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.disabled) ?? !1;
+    }
+    isRequiredExternally() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.required) ?? !1;
+    }
+    withUserInteraction() {
+      this.indeterminate && (this.indeterminate = !1);
+    }
+  }
+  return c([
+    a({ type: Boolean })
+  ], t.prototype, "indeterminate", 2), c([
+    a({ reflect: !0 })
+  ], t.prototype, "size", 1), t;
+}, g = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer;--sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x)}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;gap:var(--sbb-checkbox-label-gap);flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
+export {
+  m as SbbCheckboxCommonElementMixin,
+  g as checkboxCommonStyle
+};

package/checkbox.d.ts

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

package/checkbox.d.ts.map

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

package/checkbox.js

@@ -1,2 +1,4 @@
 export * from "./checkbox/checkbox.js";
 export * from "./checkbox/checkbox-group.js";
+export * from "./checkbox/checkbox-panel.js";
+export * from "./checkbox/common.js";

package/core/mixins/panel-mixin.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { AbstractConstructor } from './constructor.js';
+
+export declare class SbbPanelMixinType {
+    color: 'white' | 'milk';
+    borderless: boolean;
+    expansionState?: string;
+}
+/**
+ * Mixin for common panel behaviors
+ */
+export declare const SbbPanelMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbPanelMixinType> & T;
+//# sourceMappingURL=panel-mixin.d.ts.map

package/core/mixins/panel-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/panel-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,iBAAiB;IAC7B,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;GAEG;AAEH,eAAO,MAAM,aAAa,0DACZ,CAAC,KACZ,oBAAoB,iBAAiB,CAAC,GAAG,CAiC3C,CAAC"}

package/core/mixins.d.ts

@@ -5,6 +5,7 @@ export * from './mixins/form-associated-mixin.js';
 export * from './mixins/hydration-mixin.js';
 export * from './mixins/named-slot-list-mixin.js';
 export * from './mixins/negative-mixin.js';
+export * from './mixins/panel-mixin.js';
 export * from './mixins/required-mixin.js';
 export * from './mixins/update-scheduler-mixin.js';
 //# sourceMappingURL=mixins.d.ts.map

package/core/mixins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}