fix: remove content logic for radio and fix badge docs

src/elements/checkbox/checkbox-group/checkbox-group.scss

@@ -29,15 +29,15 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
   }
 }
 
-:host([data-has-selection-expansion-panel]) {
+:host([data-has-panel]) {
   --sbb-checkbox-group-width: 100%;
 
   ::slotted(sbb-checkbox-panel) {
     flex: auto;
   }
 }
 
-:host([data-has-selection-expansion-panel][orientation='vertical']) {
+:host([data-has-panel][orientation='vertical']) {
   --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
 }
 
@@ -53,11 +53,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
       }
     }
 
-    :host(
-        [orientation='vertical'][horizontal-from='#{$breakpoint}']:not(
-            [data-has-selection-expansion-panel]
-          )
-      ) {
+    :host([orientation='vertical'][horizontal-from='#{$breakpoint}']:not([data-has-panel])) {
       --sbb-checkbox-group-width: max-content;
     }
   }

src/elements/checkbox/checkbox-group/checkbox-group.ts

@@ -57,7 +57,7 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
     const signal = this._abort.signal;
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
     this.toggleAttribute(
-      'data-has-selection-expansion-panel',
+      'data-has-panel',
       !!this.querySelector?.('sbb-selection-expansion-panel, sbb-checkbox-panel'),
     );
   }

src/elements/checkbox/checkbox-panel/readme.md

@@ -2,10 +2,14 @@ The `sbb-checkbox-panel` component provides the same functionality as a native `
 
 ## Slots
 
-It is possible to provide a label via an unnamed slot; additionally the slote named `subtext` can be used to provide a subtext and the slot named `suffix` can be used to provide suffix items.
+It is possible to provide a label via an unnamed slot;
+additionally the slots named `subtext` can be used to provide a subtext and
+the slot named `suffix` can be used to provide suffix items.
+If you use a <sbb-card-badge>, the slot `badge` is automatically assigned.
 
 ```html
 <sbb-checkbox-panel>
+  <sbb-card-badge>%</sbb-card-badge>
   Label
   <span slot="subtext">Subtext</span>
   <span slot="suffix">Suffix</span>

src/elements/radio-button/radio-button-group/radio-button-group.scss

@@ -31,11 +31,11 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
   }
 }
 
-:host([data-has-selection-expansion-panel]) {
+:host([data-has-panel]) {
   --sbb-radio-button-group-width: 100%;
 }
 
-:host([data-has-selection-expansion-panel][orientation='vertical']) {
+:host([data-has-panel][orientation='vertical']) {
   --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
 }
 
@@ -51,11 +51,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
       }
     }
 
-    :host(
-        [orientation='vertical'][horizontal-from='#{$breakpoint}']:not(
-            [data-has-selection-expansion-panel]
-          )
-      ) {
+    :host([orientation='vertical'][horizontal-from='#{$breakpoint}']:not([data-has-panel])) {
       --sbb-radio-button-group-width: max-content;
     }
   }

src/elements/radio-button/radio-button-group/radio-button-group.ts

@@ -8,7 +8,6 @@ import { hostAttributes } from '../../core/decorators.js';
 import { EventEmitter } from '../../core/eventing.js';
 import type { SbbHorizontalFrom, SbbOrientation, SbbStateChange } from '../../core/interfaces.js';
 import { SbbDisabledMixin } from '../../core/mixins.js';
-import type { SbbSelectionExpansionPanelElement } from '../../selection-expansion-panel.js';
 import type { SbbRadioButtonSize, SbbRadioButtonStateChange } from '../common.js';
 import type { SbbRadioButtonPanelElement } from '../radio-button-panel.js';
 import type { SbbRadioButtonElement } from '../radio-button.js';
@@ -150,7 +149,7 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
     this._hasPanelElement = !!this.querySelector?.(
       'sbb-selection-expansion-panel, sbb-radio-button-panel',
     );
-    this.toggleAttribute('data-has-selection-expansion-panel', this._hasPanelElement);
+    this.toggleAttribute('data-has-panel', this._hasPanelElement);
     this._updateRadios(this.value);
   }
 
@@ -239,11 +238,8 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
 
   private _getRadioTabIndex(radio: SbbRadioButtonElement | SbbRadioButtonPanelElement): number {
     const isSelected: boolean = radio.checked && !radio.disabled && !this.disabled;
-    const isParentPanelWithContent: boolean =
-      radio.parentElement?.localName === 'sbb-selection-expansion-panel' &&
-      (radio.parentElement as SbbSelectionExpansionPanelElement).hasContent;
 
-    return isSelected || (this._hasPanelElement && isParentPanelWithContent) ? 0 : -1;
+    return isSelected || this._hasPanelElement ? 0 : -1;
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {
@@ -269,11 +265,7 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
     );
     const nextIndex: number = getNextElementIndex(evt, current, enabledRadios.length);
 
-    // Selection on arrow keypress is allowed only if all the selection-panels have no content.
-    const allPanelsHaveNoContent: boolean = (
-      Array.from(this.querySelectorAll?.('sbb-selection-expansion-panel')) || []
-    ).every((e: SbbSelectionExpansionPanelElement) => !e.hasContent);
-    if (!this._hasPanelElement || (this._hasPanelElement && allPanelsHaveNoContent)) {
+    if (!this._hasPanelElement) {
       enabledRadios[nextIndex].select();
     }
 

src/elements/radio-button/radio-button-panel/readme.md

@@ -9,10 +9,14 @@ The `sbb-radio-button-panel` component provides the same functionality as a nati
 
 ## Slots
 
-It is possible to provide a label via an unnamed slot; additionally the slote named `subtext` can be used to provide a subtext and the slot named `suffix` can be used to provide suffix items.
+It is possible to provide a label via an unnamed slot;
+additionally the slots named `subtext` can be used to provide a subtext and
+the slot named `suffix` can be used to provide suffix items.
+If you use a <sbb-card-badge>, the slot `badge` is automatically assigned.
 
 ```html
 <sbb-radio-button-panel>
+  <sbb-card-badge>%</sbb-card-badge>
   Label
   <span slot="subtext">Subtext</span>
   <span slot="suffix">Suffix</span>

src/elements/selection-expansion-panel/__snapshots__/selection-expansion-panel.snapshot.spec.snap.js

@@ -25,15 +25,7 @@ snapshots["sbb-selection-expansion-panel renders DOM"] =
       role="text"
       slot="badge"
     >
-      <span>
-        %
-      </span>
-      <span>
-        from CHF
-      </span>
-      <span>
-        19.99
-      </span>
+      %
     </sbb-card-badge>
   </sbb-checkbox-panel>
   <div slot="content">
@@ -76,7 +68,7 @@ snapshots["sbb-selection-expansion-panel renders A11y tree Chrome"] =
   "children": [
     {
       "role": "checkbox",
-      "name": "% from CHF 19.99 ​ Value one Suffix Subtext , collapsed",
+      "name": "% ​ Value one Suffix Subtext , collapsed",
       "checked": false
     }
   ]
@@ -93,7 +85,7 @@ snapshots["sbb-selection-expansion-panel renders A11y tree Firefox"] =
   "children": [
     {
       "role": "checkbox",
-      "name": "% from CHF 19.99 ​ Value one Suffix Subtext , collapsed"
+      "name": "% ​ Value one Suffix Subtext , collapsed"
     }
   ]
 }

src/elements/selection-expansion-panel/readme.md

@@ -1,5 +1,5 @@
 The `sbb-selection-expansion-panel` component wraps either a [sbb-checkbox-panel](/docs/elements-sbb-checkbox-sbb-checkbox-panel--docs)
-or a [sbb-radio-button-panel](/docs/elements-sbb-radio-button-sbb-radio-button-panel--docs) that can optionally toggle a content section.
+or a [sbb-radio-button-panel](/docs/elements-sbb-radio-button-sbb-radio-button-panel--docs) that can toggle a content section.
 
 The content section can be opened by checking `sbb-checkbox-panel` or selecting the `sbb-radio-button-panel`.
 Additionally, clicking on all the upper area sets the checked state and therefore opens the content;
@@ -13,12 +13,8 @@ or a [sbb-checkbox-group](/docs/elements-sbb-checkbox-sbb-checkbox-group--docs).
 ```html
 <sbb-radio-button-group>
   <sbb-selection-expansion-panel>
-    <sbb-card-badge>
-      <span>%</span>
-      <span>from CHF</span>
-      <span>19.99</span>
-    </sbb-card-badge>
     <sbb-radio-button-panel>
+      <sbb-card-badge>%</sbb-card-badge>
       Value
       <span slot="subtext">Subtext</span>
       <span slot="suffix">
@@ -37,12 +33,8 @@ or a [sbb-checkbox-group](/docs/elements-sbb-checkbox-sbb-checkbox-group--docs).
 ```html
 <sbb-checkbox-group>
   <sbb-selection-expansion-panel>
-    <sbb-card-badge>
-      <span>%</span>
-      <span>from CHF</span>
-      <span>19.99</span>
-    </sbb-card-badge>
     <sbb-checkbox-panel>
+      <sbb-card-badge>%</sbb-card-badge>
       Value
       <span slot="subtext">Subtext</span>
       <span slot="suffix">

src/elements/selection-expansion-panel/selection-expansion-panel.snapshot.spec.ts

@@ -14,19 +14,13 @@ describe(`sbb-selection-expansion-panel`, () => {
 
   describe('renders', () => {
     beforeEach(async () => {
-      // Note: for easier testing, we add the slot="badge"
-      // to <sbb-card-badge> which would not be needed in real.
       element = await fixture(html`
         <sbb-selection-expansion-panel>
           <sbb-checkbox-panel>
             Value one
             <span slot="subtext">Subtext</span>
             <span slot="suffix">Suffix</span>
-            <sbb-card-badge slot="badge">
-              <span>%</span>
-              <span>from CHF</span>
-              <span>19.99</span>
-            </sbb-card-badge>
+            <sbb-card-badge>%</sbb-card-badge>
           </sbb-checkbox-panel>
           <div slot="content">Inner content</div>
         </sbb-selection-expansion-panel>