@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/radio-button/radio-button/radio-button.d.ts

@@ -1,96 +1,17 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces.js';
-import { SbbRadioButtonGroupElement } from '../radio-button-group.js';
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 
-export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
-export type SbbRadioButtonSize = 's' | 'm';
-declare const SbbRadioButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
+declare const SbbRadioButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & typeof LitElement;
 /**
  * It displays a radio button enhanced with the SBB Design.
  *
  * @slot - Use the unnamed slot to add content to the radio label.
- * @slot subtext - Slot used to render a subtext under the label (only visible within a `sbb-selection-panel`).
- * @slot suffix - Slot used to render additional content after the label (only visible within a `sbb-selection-panel`).
  */
 export declare class SbbRadioButtonElement extends SbbRadioButtonElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
         readonly stateChange: "stateChange";
-        readonly radioButtonLoaded: "radioButtonLoaded";
     };
-    /**
-     * Whether the radio can be deselected.
-     */
-    set allowEmptySelection(value: boolean);
-    get allowEmptySelection(): boolean;
-    private _allowEmptySelection;
-    /**
-     * Value of radio button.
-     */
-    value?: string;
-    /**
-     * Whether the radio button is disabled.
-     */
-    set disabled(value: boolean);
-    get disabled(): boolean;
-    private _disabled;
-    /**
-     * Whether the radio button is required.
-     */
-    set required(value: boolean);
-    get required(): boolean;
-    private _required;
-    /**
-     * Reference to the connected radio button group.
-     */
-    get group(): SbbRadioButtonGroupElement | null;
-    private _group;
-    /**
-     * Whether the radio button is checked.
-     */
-    set checked(value: boolean);
-    get checked(): boolean;
-    private _checked;
-    /**
-     * Label size variant, either m or s.
-     */
-    set size(value: SbbRadioButtonSize);
-    get size(): SbbRadioButtonSize;
-    private _size;
-    /**
-     * Whether the input is the main input of a selection panel.
-     * @internal
-     */
-    get isSelectionPanelInput(): boolean;
-    private _isSelectionPanelInput;
-    /**
-     * The label describing whether the selection panel is expanded (for screen readers only).
-     */
-    private _selectionPanelExpandedLabel?;
-    private _selectionPanelElement;
-    private _abort;
-    private _language;
-    /**
-     * @internal
-     * Internal event that emits whenever the state of the radio option
-     * in relation to the parent selection panel changes.
-     */
-    private _stateChange;
-    /**
-     * @internal
-     * Internal event that emits when the radio button is loaded.
-     */
-    private _radioButtonLoaded;
-    private _handleClick;
-    select(): void;
-    private _handlerRepository;
     constructor();
-    connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    disconnectedCallback(): void;
-    private _handleKeyDown;
-    private _updateExpandedLabel;
     protected render(): TemplateResult;
 }
 declare global {

package/radio-button/radio-button/radio-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAYhD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAI3E,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,CAAC;;AAE3C;;;;;;GAMG;AACH,qBAIa,qBAAsB,SAAQ,0BAAmC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;OAEG;IACH,IACW,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAE5C;IACD,IAAW,mBAAmB,IAAI,OAAO,CAExC;IACD,OAAO,CAAC,oBAAoB,CAAS;IAErC;;OAEG;IACgB,KAAK,CAAC,EAAE,MAAM,CAAC;IAElC;;OAEG;IACH,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAEjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IACH,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAEjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IACH,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAEpD;IACD,OAAO,CAAC,MAAM,CAA2C;IAEzD;;OAEG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,OAAO,EAEhC;IACD,IAAW,OAAO,IAAI,OAAO,CAE5B;IACD,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAExC;IACD,IAAW,IAAI,IAAI,kBAAkB,CAEpC;IACD,OAAO,CAAC,KAAK,CAA2B;IAExC;;;OAGG;IACH,IAAW,qBAAqB,IAAI,OAAO,CAE1C;IACQ,OAAO,CAAC,sBAAsB,CAAS;IAEhD;;OAEG;IACM,OAAO,CAAC,4BAA4B,CAAC,CAAS;IAEvD,OAAO,CAAC,sBAAsB,CAAyC;IACvE,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAIxB;IACF,OAAO,CAAC,YAAY;IAKb,MAAM,IAAI,IAAI;IAYrB,OAAO,CAAC,kBAAkB,CAAyD;;IAOnE,iBAAiB,IAAI,IAAI;cAmBtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW9D,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,oBAAoB;cAWT,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;;AAQhD;;;;GAIG;AACH,qBACa,qBAAsB,SAAQ,0BAA4C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAC3F,gBAAuB,MAAM;;MAElB;;cAOQ,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/radio-button/radio-button-group/radio-button-group.d.ts

@@ -1,10 +1,12 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
 import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
-import { SbbRadioButtonElement, SbbRadioButtonSize } from '../radio-button.js';
+import { SbbRadioButtonSize } from '../common.js';
+import { SbbRadioButtonPanelElement } from '../radio-button-panel.js';
+import { SbbRadioButtonElement } from '../radio-button.js';
 
 export type SbbRadioButtonGroupEventDetail = {
     value: any | null;
-    radioButton: SbbRadioButtonElement;
+    radioButton: SbbRadioButtonElement | SbbRadioButtonPanelElement;
 };
 declare const SbbRadioButtonGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
 /**
@@ -50,9 +52,9 @@ export declare class SbbRadioButtonGroupElement extends SbbRadioButtonGroupEleme
     /**
      * List of contained radio buttons.
      */
-    get radioButtons(): SbbRadioButtonElement[];
+    get radioButtons(): (SbbRadioButtonElement | SbbRadioButtonPanelElement)[];
     private get _enabledRadios();
-    private _hasSelectionPanel;
+    private _hasSelectionExpansionPanelElement;
     private _didLoad;
     private _abort;
     private _valueChanged;

package/radio-button/radio-button-group/radio-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-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;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAGlG,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAEnB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAIa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,qBAAqB,EAAE,CAIjD;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kBAAkB,CAAkB;IAC5C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;;IAOc,iBAAiB,IAAI,IAAI;IAkBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBtD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;cAiCH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-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;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAIa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;;IAOc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqBtD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

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

@@ -1,67 +1,73 @@
-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 { 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 { css as b, LitElement as u, html as p } from "lit";
+import { property as s, customElement as c } from "lit/decorators.js";
+import { isArrowKeyPressed as m, getNextElementIndex as f } from "../core/a11y.js";
+import { SbbConnectedAbortController as g, SbbSlotStateController as v } from "../core/controllers.js";
+import { hostAttributes as w } from "../core/decorators.js";
+import { EventEmitter as h } from "../core/eventing.js";
+import { SbbDisabledMixin as _ } from "../core/mixins.js";
+const x = b`*,: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 ::slotted(sbb-radio-button-panel){flex:auto}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%}:host([orientation=vertical]) ::slotted(sbb-radio-button-panel){width:100%}:host([data-has-panel]){--sbb-radio-button-group-width: 100%}:host([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=zero]:not([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=micro]:not([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=small]:not([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=medium]:not([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=large]:not([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=wide]:not([data-has-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]) ::slotted(sbb-radio-button-panel){width:unset}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-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 z = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, o, e, i) => {
+  for (var n = i > 1 ? void 0 : i ? y(o, e) : o, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (n = (i ? l(o, e, n) : l(n)) || n);
+  return i && n && z(o, e, n), n;
 };
-let r = class extends y(c) {
+let a = class extends _(u) {
   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._hasSelectionExpansionPanelElement = !1, this._didLoad = !1, this._abort = new g(this), this._didChange = new h(
       this,
-      r.events.didChange
-    ), this.k = new b(
+      a.events.didChange
+    ), this._change = new h(
       this,
-      r.events.change
-    ), this.l = new b(
+      a.events.change
+    ), this._input = new h(
       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) => {
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-radio-button, sbb-radio-button-panel")) ?? []).filter((o) => {
       var e;
       return ((e = o.closest) == null ? void 0 : e.call(o, "sbb-radio-button-group")) === this;
     });
   }
-  get f() {
+  get _enabledRadios() {
     if (!this.disabled)
       return this.radioButtons.filter((t) => !t.disabled);
   }
-  i(t) {
+  _valueChanged(t) {
     for (const o of this.radioButtons)
-      o.checked = o.value === t, o.tabIndex = this.c(o);
-    this.d();
+      o.checked = o.value === t, o.tabIndex = this._getRadioTabIndex(o);
+    this._setFocusableRadio();
   }
   connectedCallback() {
-    var o;
+    var o, e;
     super.connectedCallback();
-    const t = this.h.signal;
+    const t = this._abort.signal;
     this.addEventListener(
       "stateChange",
-      (e) => this.m(e),
+      (i) => this._onRadioButtonSelect(i),
       {
         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", (i) => this._handleKeyDown(i), { signal: t }), this._hasSelectionExpansionPanelElement = !!((o = this.querySelector) != null && o.call(
+      this,
+      "sbb-selection-expansion-panel"
+    )), this.toggleAttribute(
+      "data-has-panel",
+      !!((e = this.querySelector) != null && e.call(this, "sbb-selection-expansion-panel, sbb-radio-button-panel"))
+    ), this._updateRadios(this.value);
   }
   willUpdate(t) {
     var o;
-    if (super.willUpdate(t), t.has("value") && this.i(this.value), t.has("disabled")) {
+    if (super.willUpdate(t), t.has("value") && this._valueChanged(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();
+        e.tabIndex = this._getRadioTabIndex(e), (o = e.requestUpdate) == null || o.call(e, "disabled");
+      this._setFocusableRadio();
     }
     t.has("required") && this.radioButtons.forEach((e) => {
       var i;
@@ -72,53 +78,53 @@ let r = class extends y(c) {
     });
   }
   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) {
+  _onRadioButtonSelect(t) {
     var e;
-    if (t.stopPropagation(), t.detail.type !== "checked" || !this.b)
+    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));
+    t.detail.checked ? (this.value = o.value, this._emitChange(o, this.value)) : this.allowEmptySelection && (this.value = (e = this.radioButtons.find((i) => i.checked)) == null ? void 0 : e.value, this.value || this._emitChange(o));
   }
-  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, o) {
+    this._change.emit({ value: o, radioButton: t }), this._input.emit({ value: o, radioButton: t }), this._didChange.emit({ value: o, radioButton: t });
   }
-  e(t) {
+  _updateRadios(t) {
     var e;
-    if (!this.b)
+    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();
+      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;
+  _setFocusableRadio() {
+    const t = this.radioButtons.find((e) => e.checked && !e.disabled), o = this._enabledRadios;
     !t && (o != null && o.length) && (o[0].tabIndex = 0);
   }
-  c(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;
+  _getRadioTabIndex(t) {
+    return t.checked && !t.disabled && !this.disabled || this._hasSelectionExpansionPanelElement ? 0 : -1;
   }
-  n(t) {
-    var s, l;
-    const o = this.f;
+  _handleKeyDown(t) {
+    var n;
+    const o = this._enabledRadios;
     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))
+    t.target !== this && t.target.parentElement !== this && ((n = t.target.parentElement) == null ? void 0 : n.localName) !== "sbb-selection-expansion-panel" || !m(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 e = o.findIndex(
+      (d) => d === t.target
+    ), i = f(t, e, o.length);
+    this._hasSelectionExpansionPanelElement || o[i].select(), o[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 +132,36 @@ let r = class extends y(c) {
     `;
   }
 };
-r.styles = z;
-r.events = {
+a.styles = x;
+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([
-  m("sbb-radio-button-group"),
-  x({
+r([
+  s({ attribute: "allow-empty-selection", type: Boolean })
+], a.prototype, "allowEmptySelection", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "required", 2);
+r([
+  s()
+], a.prototype, "value", 2);
+r([
+  s()
+], a.prototype, "size", 2);
+r([
+  s({ attribute: "horizontal-from", reflect: !0 })
+], a.prototype, "horizontalFrom", 2);
+r([
+  s({ reflect: !0 })
+], a.prototype, "orientation", 2);
+a = r([
+  c("sbb-radio-button-group"),
+  w({
     role: "radiogroup"
   })
-], r);
+], a);
 export {
-  r as SbbRadioButtonGroupElement
+  a as SbbRadioButtonGroupElement
 };

package/radio-button/radio-button-panel/index.d.ts

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

package/radio-button/radio-button-panel/index.d.ts.map

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

package/radio-button/radio-button-panel/radio-button-panel.d.ts

@@ -0,0 +1,29 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+
+declare const SbbRadioButtonPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
+/**
+ /**
+ * It displays a radio button enhanced with the panel design.
+ *
+ * @slot - Use the unnamed slot to add content to the radio label.
+ * @slot subtext - Slot used to render a subtext under the label.
+ * @slot suffix - Slot used to render additional content after the label.
+ * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
+ */
+export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly stateChange: "stateChange";
+        readonly panelConnected: "panelConnected";
+    };
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-radio-button-panel': SbbRadioButtonPanelElement;
+    }
+}
+export {};
+//# sourceMappingURL=radio-button-panel.d.ts.map

package/radio-button/radio-button-panel/radio-button-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBACa,0BAA2B,SAAQ,+BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;;cAOc,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQxE,MAAM,IAAI,cAAc;CA6B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

package/radio-button/radio-button-panel.d.ts

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

package/radio-button/radio-button-panel.d.ts.map

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

package/radio-button/radio-button-panel.js

@@ -0,0 +1,59 @@
+import { LitElement as d, html as i, nothing as b } from "lit";
+import { customElement as p } from "lit/decorators.js";
+import { SbbSlotStateController as c } from "../core/controllers.js";
+import { SbbPanelMixin as m, SbbUpdateSchedulerMixin as u, panelCommonStyle as h } from "../core/mixins.js";
+import { SbbRadioButtonCommonElementMixin as f, radioButtonCommonStyle as S } from "./common.js";
+import "../screen-reader-only.js";
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, _ = (t, s, l, n) => {
+  for (var e = n > 1 ? void 0 : n ? x(s, l) : s, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (e = (n ? r(s, l, e) : r(e)) || e);
+  return n && e && v(s, l, e), e;
+};
+let a = class extends m(
+  f(u(d))
+) {
+  constructor() {
+    super(), new c(this);
+  }
+  async willUpdate(t) {
+    super.willUpdate(t), t.has("checked") && this.toggleAttribute("data-checked", this.checked);
+  }
+  render() {
+    return i`
+      <label class="sbb-selection-panel">
+        <div class="sbb-selection-panel__badge">
+          <slot name="badge"></slot>
+        </div>
+        <span class="sbb-radio-button">
+          <input
+            type="radio"
+            aria-hidden="true"
+            tabindex="-1"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            ?checked=${this.checked}
+            value=${this.value || b}
+            class="sbb-screen-reader-only"
+          />
+          <span class="sbb-radio-button__label-slot">
+            <slot></slot>
+            <slot name="suffix"></slot>
+          </span>
+          <slot name="subtext"></slot>
+          ${this.expansionState ? i`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : b}
+        </span>
+      </label>
+    `;
+  }
+};
+a.styles = [S, h];
+a.events = {
+  stateChange: "stateChange",
+  panelConnected: "panelConnected"
+};
+a = _([
+  p("sbb-radio-button-panel")
+], a);
+export {
+  a as SbbRadioButtonPanelElement
+};