@sbb-esta/lyne-elements 0.52.1 → 0.52.2

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-group.js

@@ -1,17 +1,17 @@
-import { css as h, LitElement as l, html as p } from "lit";
-import { property as s, customElement as d } from "lit/decorators.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 u, getNextElementIndex as m } from "../core/a11y.js";
 import { SbbConnectedAbortController as g, SbbSlotStateController as k } 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);
+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 g(this), new k(this);
   }
   /** List of contained checkbox elements. */
   get checkboxes() {
@@ -23,8 +23,8 @@ let a = class extends f(l) {
   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-selection-panel", !!((o = this.querySelector) != null && o.call(this, "sbb-selection-panel")));
   }
   willUpdate(t) {
     super.willUpdate(t), t.has("disabled") && this.checkboxes.forEach((o) => {
@@ -38,7 +38,7 @@ 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)
@@ -46,13 +46,13 @@ let a = class extends f(l) {
     if (!(!o || // don't trap nested handling
     t.target !== this && t.target.parentElement !== this && t.target.parentElement.nodeName !== "SBB-SELECTION-PANEL") && u(t)) {
       const r = o.findIndex(
-        (b) => b === t.target
+        (n) => n === t.target
       ), i = m(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 +63,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.js

@@ -1,42 +1,42 @@
 import { css as h, LitElement as d, html as p } from "lit";
-import { property as c, state as u, customElement as f } from "lit/decorators.js";
-import { SbbLanguageController as x, SbbSlotStateController as m } from "../core/controllers.js";
+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 k, i18nCollapsed as v } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as g, SbbFormAssociatedCheckboxMixin as y, SbbHydrationMixin as _ } from "../core/mixins.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 "../visual-checkbox.js";
-const z = 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 C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, b = (e, s, o, a) => {
-  for (var i = a > 1 ? void 0 : a ? S(s, o) : s, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (i = (a ? l(s, o, i) : l(i)) || i);
-  return a && i && C(s, o, i), i;
+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;
 };
-let t = class extends g(
-  y(w(_(d)))
+let t = class extends _(
+  v(w(y(d)))
 ) {
   constructor() {
-    super(), this.indeterminate = !1, this.iconPlacement = "end", this.c = "m", this.d = null, this.e = new x(this), this.a = null, this.f = new r(
+    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.h = new r(
+    ), this._checkboxLoaded = new r(
       this,
       t.events.checkboxLoaded,
       { bubbles: !0 }
     ), new m(this);
   }
   set size(e) {
-    this.c = e;
+    this._size = e;
   }
   get size() {
     var e;
-    return ((e = this.group) == null ? void 0 : e.size) ?? this.c;
+    return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
   }
   /** Reference to the connected checkbox group. */
   get group() {
-    return this.d;
+    return this._group;
   }
   /**
    * Whether the input is the main input of a selection panel.
@@ -47,17 +47,17 @@ let t = class extends g(
   }
   connectedCallback() {
     var e, s;
-    super.connectedCallback(), this.d = this.closest("sbb-checkbox-group"), this.a = (e = this.closest) == null ? void 0 : e.call(this, "sbb-selection-panel"), this.toggleAttribute("data-is-inside-selection-panel", !!this.a), this.toggleAttribute(
+    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.a && !((s = this.closest) != null && s.call(this, 'sbb-selection-panel [slot="content"]'))
-    ), this.h.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
+      !!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.f.emit({ type: "checked", checked: this.checked }), this.g()), e.has("disabled") && this.isSelectionPanelInput && this.disabled !== e.get("disabled") && this.f.emit({ type: "disabled", disabled: this.disabled }), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
+    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.g(), this.completeUpdate();
+      this.isSelectionPanelInput && this._updateExpandedLabel(), this.completeUpdate();
     });
   }
   isDisabledExternally() {
@@ -71,13 +71,13 @@ let t = class extends g(
   withUserInteraction() {
     this.indeterminate && (this.indeterminate = !1);
   }
-  async g() {
+  async _updateExpandedLabel() {
     var e;
-    if (await this.hydrationComplete, !((e = this.a) != null && e.hasContent)) {
-      this.b = "", this.removeAttribute("data-has-selection-panel-label");
+    if (await this.hydrationComplete, !((e = this._selectionPanelElement) != null && e.hasContent)) {
+      this._selectionPanelExpandedLabel = "", this.removeAttribute("data-has-selection-panel-label");
       return;
     }
-    this.b = this.checked ? ", " + k[this.e.current] : ", " + v[this.e.current], this.toggleAttribute("data-has-selection-panel-label", !0);
+    this._selectionPanelExpandedLabel = this.checked ? ", " + g[this._language.current] : ", " + k[this._language.current], this.toggleAttribute("data-has-selection-panel-label", !0);
   }
   render() {
     return p`
@@ -99,33 +99,33 @@ let t = class extends g(
           </span>
           <slot name="subtext"></slot>
           <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
-            ${this.b}
+            ${this._selectionPanelExpandedLabel}
           </sbb-screen-reader-only>
         </span>
       </span>
     `;
   }
 };
-t.styles = z;
+t.styles = E;
 t.events = {
   didChange: "didChange",
   stateChange: "stateChange",
   checkboxLoaded: "checkboxLoaded"
 };
-b([
+a([
   c({ type: Boolean })
 ], t.prototype, "indeterminate", 2);
-b([
+a([
   c({ attribute: "icon-placement", reflect: !0 })
 ], t.prototype, "iconPlacement", 2);
-b([
+a([
   c({ reflect: !0 })
 ], t.prototype, "size", 1);
-b([
+a([
   u()
-], t.prototype, "b", 2);
-t = b([
-  f("sbb-checkbox")
+], t.prototype, "_selectionPanelExpandedLabel", 2);
+t = a([
+  x("sbb-checkbox")
 ], t);
 export {
   t as SbbCheckboxElement