@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/card/card-badge.js

@@ -1,22 +1,22 @@
-import { css as i, LitElement as n, html as l } from "lit";
-import { property as g, customElement as p } from "lit/decorators.js";
+import { css as n, LitElement as i, html as l } from "lit";
+import { property as p, customElement as g } from "lit/decorators.js";
 import { hostAttributes as f } from "../core/decorators.js";
 import { getDocumentWritingMode as h } from "../core/dom.js";
-const v = i`*,:before,:after{box-sizing:border-box}:host{--sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);display:block}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-charcoal);--sbb-card-badge-background-color: var(--sbb-color-white);--sbb-card-badge-border-color: var(--sbb-color-aluminium)}:host([color=charcoal]){--sbb-card-badge-color: var(--sbb-color-white);--sbb-card-badge-background-color: var(--sbb-color-charcoal);--sbb-card-badge-border-color: transparent}.sbb-card-badge-wrapper{display:flex;position:relative;height:fit-content;justify-content:end}@media (forced-colors: active){.sbb-card-badge-wrapper:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-card-badge{position:relative;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x)}.sbb-card-badge-content{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-border-radius-4x);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:skew(16deg)}:host([dir=rtl]) .sbb-card-badge-background{transform:skew(-16deg)}.sbb-card-badge-background:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-block-end:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-border-radius-4x)}@media (forced-colors: active){.sbb-card-badge-background:before{border:none}}`;
-var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (d, e, b, a) => {
-  for (var r = a > 1 ? void 0 : a ? m(e, b) : e, t = d.length - 1, s; t >= 0; t--)
-    (s = d[t]) && (r = (a ? s(e, b, r) : s(r)) || r);
-  return a && r && u(e, b, r), r;
+const v = n`*,:before,:after{box-sizing:border-box}:host{--sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);display:block}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-charcoal);--sbb-card-badge-background-color: var(--sbb-color-white);--sbb-card-badge-border-color: var(--sbb-color-aluminium)}:host([color=charcoal]){--sbb-card-badge-color: var(--sbb-color-white);--sbb-card-badge-background-color: var(--sbb-color-charcoal);--sbb-card-badge-border-color: transparent}.sbb-card-badge-wrapper{display:flex;position:relative;height:fit-content;justify-content:end}@media (forced-colors: active){.sbb-card-badge-wrapper:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-card-badge{position:relative;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x)}.sbb-card-badge-content{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-border-radius-4x);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:skew(16deg)}:host([dir=rtl]) .sbb-card-badge-background{transform:skew(-16deg)}.sbb-card-badge-background:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-block-end:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-border-radius-4x)}@media (forced-colors: active){.sbb-card-badge-background:before{border:none}}`;
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (d, r, o, a) => {
+  for (var e = a > 1 ? void 0 : a ? u(r, o) : r, b = d.length - 1, s; b >= 0; b--)
+    (s = d[b]) && (e = (a ? s(r, o, e) : s(e)) || e);
+  return a && e && m(r, o, e), e;
 };
-let o = class extends n {
+let t = class extends i {
   constructor() {
     super(...arguments), this.color = "charcoal";
   }
   connectedCallback() {
-    super.connectedCallback(), this.a = this.parentElement, this.a && this.a.toggleAttribute("data-has-card-badge", !0);
+    super.connectedCallback(), this._parentElement = this.parentElement, this._parentElement && this._parentElement.toggleAttribute("data-has-card-badge", !0);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.a && this.a.removeAttribute("data-has-card-badge"), this.a = void 0;
+    super.disconnectedCallback(), this._parentElement && this._parentElement.removeAttribute("data-has-card-badge"), this._parentElement = void 0;
   }
   render() {
     return l`
@@ -31,18 +31,18 @@ let o = class extends n {
     `;
   }
 };
-o.styles = v;
+t.styles = v;
 c([
-  g({ reflect: !0 })
-], o.prototype, "color", 2);
-o = c([
-  p("sbb-card-badge"),
+  p({ reflect: !0 })
+], t.prototype, "color", 2);
+t = c([
+  g("sbb-card-badge"),
   f({
     slot: "badge",
     role: "text",
     dir: h()
   })
-], o);
+], t);
 export {
-  o as SbbCardBadgeElement
+  t as SbbCardBadgeElement
 };

package/card/card.js

@@ -15,7 +15,7 @@ let r = class extends v {
    *
    * @returns True whether size is equal to m, l, xl or xxl.
    */
-  a() {
+  _isBadgeVisible() {
     return ["m", "l", "xl", "xxl", "xxxl"].includes(this.size);
   }
   render() {
@@ -25,7 +25,7 @@ let r = class extends v {
         <span class="sbb-card__wrapper">
           <slot></slot>
         </span>
-        ${this.a() ? c`<span class="sbb-card__badge-wrapper">
+        ${this._isBadgeVisible() ? c`<span class="sbb-card__badge-wrapper">
               <slot name="badge"></slot>
             </span>` : p}
       </span>

package/card/common.js

@@ -1,67 +1,67 @@
-import { property as b } from "lit/decorators.js";
-import { html as n } from "lit/static-html.js";
+import { property as n } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
 import { IS_FOCUSABLE_QUERY as l } from "../core/a11y.js";
-import { hostAttributes as u } from "../core/decorators.js";
-import { AgnosticMutationObserver as d } from "../core/observers.js";
+import { hostAttributes as d } from "../core/decorators.js";
+import { AgnosticMutationObserver as u } from "../core/observers.js";
 import { css as h } from "lit";
 import "../screen-reader-only.js";
 const f = h`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;position:absolute;top:0;right:0;bottom:0;left:0}:is(.sbb-card-button,.sbb-card-link){display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-card-border-radius);cursor:pointer;outline:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-card-button,.sbb-card-link),:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-card-button,.sbb-card-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
-var m = Object.defineProperty, p = Object.getOwnPropertyDescriptor, c = (r, o, t, s) => {
-  for (var e = s > 1 ? void 0 : s ? p(o, t) : o, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (s ? i(o, t, e) : i(e)) || e);
-  return s && e && m(o, t, e), e;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (s, e, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? _(e, t) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
+  return r && o && m(e, t, o), o;
 };
-const O = (r) => {
-  let o = class extends r {
+const S = (s) => {
+  let e = class extends s {
     constructor() {
-      super(...arguments), this.b = !1, this.a = null, this.c = new d(
-        () => this.d()
+      super(...arguments), this._active = !1, this._card = null, this._cardMutationObserver = new u(
+        () => this._checkForSlottedActions()
       );
     }
     set active(t) {
-      this.b = t, this.e();
+      this._active = t, this._onActiveChange();
     }
     get active() {
-      return this.b;
+      return this._active;
     }
-    e() {
-      this.a && this.a.toggleAttribute("data-has-active-action", this.active);
+    _onActiveChange() {
+      this._card && this._card.toggleAttribute("data-has-active-action", this.active);
     }
-    d() {
-      var s, e;
+    _checkForSlottedActions() {
+      var r, o;
       const t = "data-card-focusable";
-      Array.from(((e = (s = this.a) == null ? void 0 : s.querySelectorAll) == null ? void 0 : e.call(s, l)) ?? []).filter(
+      Array.from(((o = (r = this._card) == null ? void 0 : r.querySelectorAll) == null ? void 0 : o.call(r, l)) ?? []).filter(
         (a) => a.localName !== "sbb-card-link" && a.localName !== "sbb-card-button" && !a.hasAttribute(t)
       ).forEach((a) => a.setAttribute(t, ""));
     }
     connectedCallback() {
       var t;
-      super.connectedCallback(), this.a = (t = this.closest) == null ? void 0 : t.call(this, "sbb-card"), this.a && (this.a.toggleAttribute("data-has-action", !0), this.a.toggleAttribute("data-has-active-action", this.active), this.a.setAttribute("data-action-role", this.actionRole), this.d(), this.c.observe(this.a, {
+      super.connectedCallback(), this._card = (t = this.closest) == null ? void 0 : t.call(this, "sbb-card"), this._card && (this._card.toggleAttribute("data-has-action", !0), this._card.toggleAttribute("data-has-active-action", this.active), this._card.setAttribute("data-action-role", this.actionRole), this._checkForSlottedActions(), this._cardMutationObserver.observe(this._card, {
         childList: !0,
         subtree: !0
       }));
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.a && (["data-has-action", "data-has-active-action", "data-action-role"].forEach(
-        (t) => this.a.removeAttribute(t)
-      ), this.a.querySelectorAll("[data-card-focusable]").forEach((t) => t.removeAttribute("data-card-focusable")), this.a = null), this.c.disconnect();
+      super.disconnectedCallback(), this._card && (["data-has-action", "data-has-active-action", "data-action-role"].forEach(
+        (t) => this._card.removeAttribute(t)
+      ), this._card.querySelectorAll("[data-card-focusable]").forEach((t) => t.removeAttribute("data-card-focusable")), this._card = null), this._cardMutationObserver.disconnect();
     }
     renderTemplate() {
-      return n`
+      return b`
         <sbb-screen-reader-only>
           <slot></slot>
         </sbb-screen-reader-only>
       `;
     }
   };
-  return o.styles = f, c([
-    b({ reflect: !0, type: Boolean })
-  ], o.prototype, "active", 1), o = c([
-    u({
+  return e.styles = f, c([
+    n({ reflect: !0, type: Boolean })
+  ], e.prototype, "active", 1), e = c([
+    d({
       slot: "action"
     })
-  ], o), o;
+  ], e), e;
 };
 export {
-  O as SbbCardActionCommonElementMixin
+  S as SbbCardActionCommonElementMixin
 };

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,30 +1,33 @@
-import { css as h, LitElement as l, html as p } from "lit";
-import { property as s, customElement as d } 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 { 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 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)}`;
-var v = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, o, e, r) => {
-  for (var i = r > 1 ? void 0 : r ? z(o, e) : o, b = t.length - 1, c; b >= 0; b--)
-    (c = t[b]) && (i = (r ? c(o, e, i) : c(i)) || i);
+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);
   return r && i && v(o, e, i), i;
 };
 let a = class extends f(l) {
   constructor() {
-    super(), this.required = !1, this.size = "m", this.orientation = "horizontal", this.a = 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
     );
   }
   connectedCallback() {
     var o;
     super.connectedCallback();
-    const t = this.a.signal;
-    this.addEventListener("keydown", (e) => this.b(e), { signal: t }), this.toggleAttribute("data-has-selection-panel", !!((o = this.querySelector) != null && o.call(this, "sbb-selection-panel")));
+    const t = this._abort.signal;
+    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) => {
@@ -38,21 +41,21 @@ let a = class extends f(l) {
       return (e = o.requestUpdate) == null ? void 0 : e.call(o, "size");
     });
   }
-  b(t) {
+  _handleKeyDown(t) {
     var e;
     const o = this.checkboxes.filter(
       (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(
-        (b) => b === t.target
-      ), i = m(t, r, o.length);
+        (n) => n === t.target
+      ), i = u(t, r, o.length);
       (e = o[i]) == null || e.focus();
     }
   }
   render() {
-    return p`
+    return d`
       <div class="sbb-checkbox-group">
         <slot></slot>
       </div>
@@ -63,20 +66,20 @@ let a = class extends f(l) {
   }
 };
 a.styles = w;
-n([
+b([
   s({ reflect: !0, type: Boolean })
 ], a.prototype, "required", 2);
-n([
+b([
   s()
 ], a.prototype, "size", 2);
-n([
+b([
   s({ attribute: "horizontal-from", reflect: !0 })
 ], a.prototype, "horizontalFrom", 2);
-n([
+b([
   s({ reflect: !0 })
 ], a.prototype, "orientation", 2);
-a = n([
-  d("sbb-checkbox-group")
+a = b([
+  p("sbb-checkbox-group")
 ], a);
 export {
   a as SbbCheckboxGroupElement

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
+};