@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/radio-button/radio-button-group.js

@@ -1,124 +1,124 @@
 import { css as u, LitElement as c, html as p } from "lit";
-import { property as d, customElement as m } from "lit/decorators.js";
-import { isArrowKeyPressed as f, getNextElementIndex as g } from "../core/a11y.js";
-import { SbbConnectedAbortController as v, SbbSlotStateController as w } from "../core/controllers.js";
-import { hostAttributes as x } from "../core/decorators.js";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { isArrowKeyPressed as g, getNextElementIndex as f } from "../core/a11y.js";
+import { SbbConnectedAbortController as _, SbbSlotStateController as v } from "../core/controllers.js";
+import { hostAttributes as w } from "../core/decorators.js";
 import { EventEmitter as b } from "../core/eventing.js";
-import { SbbDisabledMixin as y } from "../core/mixins.js";
-const z = u`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-group-orientation: row;--sbb-radio-button-group-width: max-content;--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%}:host([data-has-selection-panel]){--sbb-radio-button-group-width: 100%}:host([data-has-selection-panel][orientation=vertical]){--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=zero]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=micro]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=small]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=medium]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=large]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=wide]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}.sbb-radio-group{display:flex;flex-direction:var(--sbb-radio-button-group-orientation);gap:var(--sbb-radio-button-group-gap);align-items:flex-start;width:var(--sbb-radio-button-group-width)}.sbb-radio-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-radio-group__error{display:none}`;
-var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, o, e, i) => {
-  for (var a = i > 1 ? void 0 : i ? C(o, e) : o, s = t.length - 1, l; s >= 0; s--)
-    (l = t[s]) && (a = (i ? l(o, e, a) : l(a)) || a);
-  return i && a && E(o, e, a), a;
+import { SbbDisabledMixin as x } from "../core/mixins.js";
+const y = u`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-group-orientation: row;--sbb-radio-button-group-width: max-content;--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%}:host([data-has-selection-panel]){--sbb-radio-button-group-width: 100%}:host([data-has-selection-panel][orientation=vertical]){--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=zero]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=micro]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=small]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=medium]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=large]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=wide]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}.sbb-radio-group{display:flex;flex-direction:var(--sbb-radio-button-group-orientation);gap:var(--sbb-radio-button-group-gap);align-items:flex-start;width:var(--sbb-radio-button-group-width)}.sbb-radio-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-radio-group__error{display:none}`;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, o, i) => {
+  for (var n = i > 1 ? void 0 : i ? S(e, o) : e, s = t.length - 1, d; s >= 0; s--)
+    (d = t[s]) && (n = (i ? d(e, o, n) : d(n)) || n);
+  return i && n && C(e, o, n), n;
 };
-let r = class extends y(c) {
+let a = class extends x(c) {
   constructor() {
-    super(), this.allowEmptySelection = !1, this.required = !1, this.size = "m", this.orientation = "horizontal", this.a = !1, this.b = !1, this.h = new v(this), this.j = new b(
+    super(), this.allowEmptySelection = !1, this.required = !1, this.size = "m", this.orientation = "horizontal", this._hasSelectionPanel = !1, this._didLoad = !1, this._abort = new _(this), this._didChange = new b(
       this,
-      r.events.didChange
-    ), this.k = new b(
+      a.events.didChange
+    ), this._change = new b(
       this,
-      r.events.change
-    ), this.l = new b(
+      a.events.change
+    ), this._input = new b(
       this,
-      r.events.input
-    ), new w(this);
+      a.events.input
+    ), new v(this);
   }
   /**
    * List of contained radio buttons.
    */
   get radioButtons() {
     var t;
-    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-radio-button")) ?? []).filter((o) => {
-      var e;
-      return ((e = o.closest) == null ? void 0 : e.call(o, "sbb-radio-button-group")) === this;
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-radio-button")) ?? []).filter((e) => {
+      var o;
+      return ((o = e.closest) == null ? void 0 : o.call(e, "sbb-radio-button-group")) === this;
     });
   }
-  get f() {
+  get _enabledRadios() {
     if (!this.disabled)
       return this.radioButtons.filter((t) => !t.disabled);
   }
-  i(t) {
-    for (const o of this.radioButtons)
-      o.checked = o.value === t, o.tabIndex = this.c(o);
-    this.d();
+  _valueChanged(t) {
+    for (const e of this.radioButtons)
+      e.checked = e.value === t, e.tabIndex = this._getRadioTabIndex(e);
+    this._setFocusableRadio();
   }
   connectedCallback() {
-    var o;
+    var e;
     super.connectedCallback();
-    const t = this.h.signal;
+    const t = this._abort.signal;
     this.addEventListener(
       "stateChange",
-      (e) => this.m(e),
+      (o) => this._onRadioButtonSelect(o),
       {
         signal: t,
         passive: !0
       }
-    ), this.addEventListener("keydown", (e) => this.n(e), { signal: t }), this.a = !!((o = this.querySelector) != null && o.call(this, "sbb-selection-panel")), this.toggleAttribute("data-has-selection-panel", this.a), this.e(this.value);
+    ), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: t }), this._hasSelectionPanel = !!((e = this.querySelector) != null && e.call(this, "sbb-selection-panel")), this.toggleAttribute("data-has-selection-panel", this._hasSelectionPanel), this._updateRadios(this.value);
   }
   willUpdate(t) {
-    var o;
-    if (super.willUpdate(t), t.has("value") && this.i(this.value), t.has("disabled")) {
-      for (const e of this.radioButtons)
-        e.tabIndex = this.c(e), (o = e.requestUpdate) == null || o.call(e, "disabled");
-      this.d();
+    var e;
+    if (super.willUpdate(t), t.has("value") && this._valueChanged(this.value), t.has("disabled")) {
+      for (const o of this.radioButtons)
+        o.tabIndex = this._getRadioTabIndex(o), (e = o.requestUpdate) == null || e.call(o, "disabled");
+      this._setFocusableRadio();
     }
-    t.has("required") && this.radioButtons.forEach((e) => {
+    t.has("required") && this.radioButtons.forEach((o) => {
       var i;
-      return (i = e.requestUpdate) == null ? void 0 : i.call(e, "required");
-    }), t.has("size") && this.radioButtons.forEach((e) => {
+      return (i = o.requestUpdate) == null ? void 0 : i.call(o, "required");
+    }), t.has("size") && this.radioButtons.forEach((o) => {
       var i;
-      return (i = e.requestUpdate) == null ? void 0 : i.call(e, "size");
+      return (i = o.requestUpdate) == null ? void 0 : i.call(o, "size");
     });
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.b = !0, this.e(this.value);
+    super.firstUpdated(t), this._didLoad = !0, this._updateRadios(this.value);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  m(t) {
-    var e;
-    if (t.stopPropagation(), t.detail.type !== "checked" || !this.b)
+  _onRadioButtonSelect(t) {
+    var o;
+    if (t.stopPropagation(), t.detail.type !== "checked" || !this._didLoad)
       return;
-    const o = t.target;
-    t.detail.checked ? (this.value = o.value, this.g(o, this.value)) : this.allowEmptySelection && (this.value = (e = this.radioButtons.find((i) => i.checked)) == null ? void 0 : e.value, this.value || this.g(o));
+    const e = t.target;
+    t.detail.checked ? (this.value = e.value, this._emitChange(e, this.value)) : this.allowEmptySelection && (this.value = (o = this.radioButtons.find((i) => i.checked)) == null ? void 0 : o.value, this.value || this._emitChange(e));
   }
-  g(t, o) {
-    this.k.emit({ value: o, radioButton: t }), this.l.emit({ value: o, radioButton: t }), this.j.emit({ value: o, radioButton: t });
+  _emitChange(t, e) {
+    this._change.emit({ value: e, radioButton: t }), this._input.emit({ value: e, radioButton: t }), this._didChange.emit({ value: e, radioButton: t });
   }
-  e(t) {
-    var e;
-    if (!this.b)
+  _updateRadios(t) {
+    var o;
+    if (!this._didLoad)
       return;
-    const o = this.radioButtons;
-    this.value = t ?? ((e = o.find((i) => i.checked)) == null ? void 0 : e.value) ?? this.value;
-    for (const i of o)
-      i.checked = i.value === this.value, i.tabIndex = this.c(i);
-    this.d();
+    const e = this.radioButtons;
+    this.value = t ?? ((o = e.find((i) => i.checked)) == null ? void 0 : o.value) ?? this.value;
+    for (const i of e)
+      i.checked = i.value === this.value, i.tabIndex = this._getRadioTabIndex(i);
+    this._setFocusableRadio();
   }
-  d() {
-    const t = this.radioButtons.find((e) => e.checked && !e.disabled), o = this.f;
-    !t && (o != null && o.length) && (o[0].tabIndex = 0);
+  _setFocusableRadio() {
+    const t = this.radioButtons.find((o) => o.checked && !o.disabled), e = this._enabledRadios;
+    !t && (e != null && e.length) && (e[0].tabIndex = 0);
   }
-  c(t) {
+  _getRadioTabIndex(t) {
     var i;
-    const o = t.checked && !t.disabled && !this.disabled, e = ((i = t.parentElement) == null ? void 0 : i.nodeName) === "SBB-SELECTION-PANEL" && t.parentElement.hasContent;
-    return o || this.a && e ? 0 : -1;
+    const e = t.checked && !t.disabled && !this.disabled, o = ((i = t.parentElement) == null ? void 0 : i.nodeName) === "SBB-SELECTION-PANEL" && t.parentElement.hasContent;
+    return e || this._hasSelectionPanel && o ? 0 : -1;
   }
-  n(t) {
-    var s, l;
-    const o = this.f;
-    if (!o || !o.length || // don't trap nested handling
-    t.target !== this && t.target.parentElement !== this && ((s = t.target.parentElement) == null ? void 0 : s.nodeName) !== "SBB-SELECTION-PANEL" || !f(t))
+  _handleKeyDown(t) {
+    var s, d;
+    const e = this._enabledRadios;
+    if (!e || !e.length || // don't trap nested handling
+    t.target !== this && t.target.parentElement !== this && ((s = t.target.parentElement) == null ? void 0 : s.nodeName) !== "SBB-SELECTION-PANEL" || !g(t))
       return;
-    const e = o.findIndex((h) => h === t.target), i = g(t, e, o.length), a = (Array.from((l = this.querySelectorAll) == null ? void 0 : l.call(this, "sbb-selection-panel")) || []).every((h) => !h.hasContent);
-    (!this.a || this.a && a) && o[i].select(), o[i].focus(), t.preventDefault();
+    const o = e.findIndex((h) => h === t.target), i = f(t, o, e.length), n = (Array.from((d = this.querySelectorAll) == null ? void 0 : d.call(this, "sbb-selection-panel")) || []).every((h) => !h.hasContent);
+    (!this._hasSelectionPanel || this._hasSelectionPanel && n) && e[i].select(), e[i].focus(), t.preventDefault();
   }
   render() {
     return p`
       <div class="sbb-radio-group">
-        <slot @slotchange=${() => this.e()}></slot>
+        <slot @slotchange=${() => this._updateRadios()}></slot>
       </div>
       <div class="sbb-radio-group__error">
         <slot name="error"></slot>
@@ -126,36 +126,36 @@ let r = class extends y(c) {
     `;
   }
 };
-r.styles = z;
-r.events = {
+a.styles = y;
+a.events = {
   didChange: "didChange",
   change: "change",
   input: "input"
 };
-n([
-  d({ attribute: "allow-empty-selection", type: Boolean })
-], r.prototype, "allowEmptySelection", 2);
-n([
-  d({ type: Boolean })
-], r.prototype, "required", 2);
-n([
-  d()
-], r.prototype, "value", 2);
-n([
-  d()
-], r.prototype, "size", 2);
-n([
-  d({ attribute: "horizontal-from", reflect: !0 })
-], r.prototype, "horizontalFrom", 2);
-n([
-  d({ reflect: !0 })
-], r.prototype, "orientation", 2);
-r = n([
+r([
+  l({ attribute: "allow-empty-selection", type: Boolean })
+], a.prototype, "allowEmptySelection", 2);
+r([
+  l({ type: Boolean })
+], a.prototype, "required", 2);
+r([
+  l()
+], a.prototype, "value", 2);
+r([
+  l()
+], a.prototype, "size", 2);
+r([
+  l({ attribute: "horizontal-from", reflect: !0 })
+], a.prototype, "horizontalFrom", 2);
+r([
+  l({ reflect: !0 })
+], a.prototype, "orientation", 2);
+a = r([
   m("sbb-radio-button-group"),
-  x({
+  w({
     role: "radiogroup"
   })
-], r);
+], a);
 export {
-  r as SbbRadioButtonGroupElement
+  a as SbbRadioButtonGroupElement
 };

package/radio-button/radio-button.js

@@ -1,111 +1,111 @@
-import { css as p, LitElement as f, html as a, nothing as n } from "lit";
+import { css as p, LitElement as f, html as n, nothing as b } from "lit";
 import { property as r, state as h, customElement as v } from "lit/decorators.js";
-import { SbbConnectedAbortController as m, SbbLanguageController as g, SbbSlotStateController as y } from "../core/controllers.js";
-import { hostAttributes as x } from "../core/decorators.js";
-import { setOrRemoveAttribute as k } from "../core/dom.js";
-import { EventEmitter as u, HandlerRepository as w, formElementHandlerAspect as _ } from "../core/eventing.js";
-import { i18nExpanded as S, i18nCollapsed as z } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as C } from "../core/mixins.js";
-const E = p`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-suffix-color: var(--sbb-color-charcoal);--sbb-radio-button-subtext-color: var(--sbb-color-granite);--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 );display:block;outline:none!important}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host(:focus-visible[data-is-selection-panel-input]){outline:none!important}:host(:focus-visible[data-is-selection-panel-input]) .sbb-radio-button:after{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))}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-radio-button{--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);display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--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)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .sbb-radio-button{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))}slot[name=suffix]{color:var(--sbb-radio-button-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-radio-button-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var B = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (t, o, l, b) => {
-  for (var i = b > 1 ? void 0 : b ? q(o, l) : o, d = t.length - 1, c; d >= 0; d--)
-    (c = t[d]) && (i = (b ? c(o, l, i) : c(i)) || i);
-  return b && i && B(o, l, i), i;
+import { SbbConnectedAbortController as m, SbbLanguageController as g, SbbSlotStateController as _ } from "../core/controllers.js";
+import { hostAttributes as y } from "../core/decorators.js";
+import { setOrRemoveAttribute as x } from "../core/dom.js";
+import { EventEmitter as u, HandlerRepository as k, formElementHandlerAspect as w } from "../core/eventing.js";
+import { i18nExpanded as E, i18nCollapsed as S } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as z } from "../core/mixins.js";
+const C = p`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-suffix-color: var(--sbb-color-charcoal);--sbb-radio-button-subtext-color: var(--sbb-color-granite);--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 );display:block;outline:none!important}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host(:focus-visible[data-is-selection-panel-input]){outline:none!important}:host(:focus-visible[data-is-selection-panel-input]) .sbb-radio-button:after{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))}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-radio-button{--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);display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--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)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .sbb-radio-button{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))}slot[name=suffix]{color:var(--sbb-radio-button-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-radio-button-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var P = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, o, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? L(o, l) : o, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (s = (a ? c(o, l, s) : c(s)) || s);
+  return a && s && P(o, l, s), s;
 };
-let e = class extends C(f) {
+let t = class extends z(f) {
   constructor() {
-    super(), this.d = !1, this.e = !1, this.f = !1, this.g = null, this.h = !1, this.i = "m", this.c = !1, this.a = null, this.n = new m(this), this.j = new g(this), this.k = new u(
+    super(), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._size = "m", this._isSelectionPanelInput = !1, this._selectionPanelElement = null, this._abort = new m(this), this._language = new g(this), this._stateChange = new u(
       this,
-      e.events.stateChange,
+      t.events.stateChange,
       { bubbles: !0 }
-    ), this.o = new u(
+    ), this._radioButtonLoaded = new u(
       this,
-      e.events.radioButtonLoaded,
+      t.events.radioButtonLoaded,
       { bubbles: !0 }
-    ), this.l = new w(this, _), new y(this);
+    ), this._handlerRepository = new k(this, w), new _(this);
   }
-  set allowEmptySelection(t) {
-    this.d = !!t;
+  set allowEmptySelection(e) {
+    this._allowEmptySelection = !!e;
   }
   get allowEmptySelection() {
-    var t;
-    return this.d || (((t = this.group) == null ? void 0 : t.allowEmptySelection) ?? !1);
+    var e;
+    return this._allowEmptySelection || (((e = this.group) == null ? void 0 : e.allowEmptySelection) ?? !1);
   }
-  set disabled(t) {
-    this.e = !!t;
+  set disabled(e) {
+    this._disabled = !!e;
   }
   get disabled() {
-    var t;
-    return this.e || (((t = this.group) == null ? void 0 : t.disabled) ?? !1);
+    var e;
+    return this._disabled || (((e = this.group) == null ? void 0 : e.disabled) ?? !1);
   }
-  set required(t) {
-    this.f = !!t;
+  set required(e) {
+    this._required = !!e;
   }
   get required() {
-    var t;
-    return this.f || (((t = this.group) == null ? void 0 : t.required) ?? !1);
+    var e;
+    return this._required || (((e = this.group) == null ? void 0 : e.required) ?? !1);
   }
   /**
    * Reference to the connected radio button group.
    */
   get group() {
-    return this.g;
+    return this._group;
   }
-  set checked(t) {
-    this.h = !!t;
+  set checked(e) {
+    this._checked = !!e;
   }
   get checked() {
-    return this.h;
+    return this._checked;
   }
-  set size(t) {
-    this.i = t;
+  set size(e) {
+    this._size = e;
   }
   get size() {
-    var t;
-    return ((t = this.group) == null ? void 0 : t.size) ?? this.i;
+    var e;
+    return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
   }
   /**
    * Whether the input is the main input of a selection panel.
    * @internal
    */
   get isSelectionPanelInput() {
-    return this.c;
+    return this._isSelectionPanelInput;
   }
-  p(t) {
-    t.preventDefault(), this.select();
+  _handleClick(e) {
+    e.preventDefault(), this.select();
   }
   select() {
     this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
   }
   connectedCallback() {
-    super.connectedCallback(), this.g = this.closest("sbb-radio-button-group"), this.a = this.closest("sbb-selection-panel"), this.c = !!this.a && !this.closest('sbb-selection-panel [slot="content"]'), this.toggleAttribute("data-is-selection-panel-input", this.c);
-    const t = this.n.signal;
-    this.addEventListener("click", (o) => this.p(o), { signal: t }), this.addEventListener("keydown", (o) => this.q(o), { signal: t }), this.l.connect(), this.o.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
+    super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), this._selectionPanelElement = this.closest("sbb-selection-panel"), this._isSelectionPanelInput = !!this._selectionPanelElement && !this.closest('sbb-selection-panel [slot="content"]'), this.toggleAttribute("data-is-selection-panel-input", this._isSelectionPanelInput);
+    const e = this._abort.signal;
+    this.addEventListener("click", (o) => this._handleClick(o), { signal: e }), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: e }), this._handlerRepository.connect(), this._radioButtonLoaded.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
   }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this.checked !== t.get("checked") && (this.k.emit({ type: "checked", checked: this.checked }), this.isSelectionPanelInput && this.m())), t.has("disabled") && (k(this, "aria-disabled", this.disabled ? "true" : null), this.disabled !== t.get("disabled") && this.k.emit({ type: "disabled", disabled: this.disabled })), t.has("required") && this.setAttribute("aria-required", `${this.required}`);
+  willUpdate(e) {
+    super.willUpdate(e), e.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this.checked !== e.get("checked") && (this._stateChange.emit({ type: "checked", checked: this.checked }), this.isSelectionPanelInput && this._updateExpandedLabel())), e.has("disabled") && (x(this, "aria-disabled", this.disabled ? "true" : null), this.disabled !== e.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled })), e.has("required") && this.setAttribute("aria-required", `${this.required}`);
   }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.startUpdate(), setTimeout(() => {
-      this.isSelectionPanelInput && this.m(), this.completeUpdate();
+  firstUpdated(e) {
+    super.firstUpdated(e), this.startUpdate(), setTimeout(() => {
+      this.isSelectionPanelInput && this._updateExpandedLabel(), this.completeUpdate();
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.l.disconnect();
+    super.disconnectedCallback(), this._handlerRepository.disconnect();
   }
-  q(t) {
-    t.code === "Space" && this.select();
+  _handleKeyDown(e) {
+    e.code === "Space" && this.select();
   }
-  m() {
-    var t;
-    if (!((t = this.a) != null && t.hasContent)) {
-      this.b = "";
+  _updateExpandedLabel() {
+    var e;
+    if (!((e = this._selectionPanelElement) != null && e.hasContent)) {
+      this._selectionPanelExpandedLabel = "";
       return;
     }
-    this.b = this.checked ? ", " + S[this.j.current] : ", " + z[this.j.current];
+    this._selectionPanelExpandedLabel = this.checked ? ", " + E[this._language.current] : ", " + S[this._language.current];
   }
   render() {
-    return a`
+    return n`
       <label class="sbb-radio-button">
         <input
           type="radio"
@@ -114,54 +114,54 @@ let e = class extends C(f) {
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?checked=${this.checked}
-          value=${this.value || n}
+          value=${this.value || b}
           class="sbb-screen-reader-only"
         />
         <span class="sbb-radio-button__label-slot">
           <slot></slot>
-          ${this.a ? a`<slot name="suffix"></slot>` : n}
+          ${this._selectionPanelElement ? n`<slot name="suffix"></slot>` : b}
         </span>
-        ${this.a ? a`<slot name="subtext"></slot>` : n}
-        ${this.isSelectionPanelInput && this.b ? a`<span class="sbb-screen-reader-only"> ${this.b} </span>` : n}
+        ${this._selectionPanelElement ? n`<slot name="subtext"></slot>` : b}
+        ${this.isSelectionPanelInput && this._selectionPanelExpandedLabel ? n`<span class="sbb-screen-reader-only"> ${this._selectionPanelExpandedLabel} </span>` : b}
       </label>
     `;
   }
 };
-e.styles = E;
-e.events = {
+t.styles = C;
+t.events = {
   stateChange: "stateChange",
   radioButtonLoaded: "radioButtonLoaded"
 };
-s([
+i([
   r({ attribute: "allow-empty-selection", type: Boolean })
-], e.prototype, "allowEmptySelection", 1);
-s([
+], t.prototype, "allowEmptySelection", 1);
+i([
   r()
-], e.prototype, "value", 2);
-s([
+], t.prototype, "value", 2);
+i([
   r({ reflect: !0, type: Boolean })
-], e.prototype, "disabled", 1);
-s([
+], t.prototype, "disabled", 1);
+i([
   r({ reflect: !0, type: Boolean })
-], e.prototype, "required", 1);
-s([
+], t.prototype, "required", 1);
+i([
   r({ reflect: !0, type: Boolean })
-], e.prototype, "checked", 1);
-s([
+], t.prototype, "checked", 1);
+i([
   r({ reflect: !0 })
-], e.prototype, "size", 1);
-s([
+], t.prototype, "size", 1);
+i([
   h()
-], e.prototype, "c", 2);
-s([
+], t.prototype, "_isSelectionPanelInput", 2);
+i([
   h()
-], e.prototype, "b", 2);
-e = s([
+], t.prototype, "_selectionPanelExpandedLabel", 2);
+t = i([
   v("sbb-radio-button"),
-  x({
+  y({
     role: "radio"
   })
-], e);
+], t);
 export {
-  e as SbbRadioButtonElement
+  t as SbbRadioButtonElement
 };