feat(sbb-checkbox, sbb-radio-button): split into regular and panel variants

src/components/card/card-badge/readme.md

@@ -1,6 +1,6 @@
 The `sbb-card-badge` can contain some information like prices or discounts,
 and can be used in [sbb-card](/docs/components-sbb-card-sbb-card--docs) or
-[sbb-selection-panel](/docs/components-sbb-selection-panel--docs).
+[sbb-selection-expansion-panel](/docs/components-sbb-selection-expansion-panel--docs).
 
 To achieve the correct spacing between elements inside the card badge, we recommend to use `span`-elements.
 All content parts are presented with a predefined gap in between.

src/components/checkbox.ts

@@ -1,2 +1,4 @@
 export * from './checkbox/checkbox.js';
 export * from './checkbox/checkbox-group.js';
+export * from './checkbox/checkbox-panel.js';
+export * from './checkbox/common.js';

src/components/checkbox/checkbox-group/checkbox-group.stories.ts

@@ -1,6 +1,6 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
+import type { ArgTypes, Args, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -12,6 +12,7 @@ import readme from './readme.md?raw';
 
 import './checkbox-group.js';
 import '../checkbox.js';
+import '../checkbox-panel.js';
 import '../../form-error.js';
 
 const longLabelText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt
@@ -48,6 +49,18 @@ const checkboxes = (
   </sbb-checkbox>
 `;
 
+const checkboxPanels = (
+  checked: boolean,
+  disabledSingle: boolean,
+  label: string,
+): TemplateResult => html`
+  <sbb-checkbox-panel value="checkbox-1" ?checked=${checked}> ${label} 1 </sbb-checkbox-panel>
+  <sbb-checkbox-panel value="checkbox-2" ?disabled=${disabledSingle}>
+    ${label} 2
+  </sbb-checkbox-panel>
+  <sbb-checkbox-panel value="checkbox-3"> ${label} 3 </sbb-checkbox-panel>
+`;
+
 const DefaultTemplate = ({
   checked,
   disabledSingle,
@@ -61,6 +74,12 @@ const DefaultTemplate = ({
   </sbb-checkbox-group>
 `;
 
+const PanelTemplate = ({ checked, disabledSingle, label, ...args }: Args): TemplateResult => html`
+  <sbb-checkbox-group ${sbbSpread(args)}>
+    ${checkboxPanels(checked, disabledSingle, label)}
+  </sbb-checkbox-group>
+`;
+
 const ErrorMessageTemplate = ({
   checked,
   disabledSingle,
@@ -254,6 +273,10 @@ const basicArgTypes: ArgTypes = {
   label,
   checked,
   disabledSingle,
+};
+
+const checkboxArgTypes: ArgTypes = {
+  ...basicArgTypes,
   iconName,
   iconPlacement,
 };
@@ -267,12 +290,16 @@ const basicArgs: Args = {
   label: 'Label',
   checked: true,
   disabledSingle: false,
+};
+
+const checkboxArgs: Args = {
+  ...basicArgs,
   iconName: undefined,
   iconPlacement: undefined,
 };
 
-const basicArgsVertical = {
-  ...basicArgs,
+const checkboxArgsVertical = {
+  ...checkboxArgs,
   orientation: orientation.options[1],
 };
 
@@ -288,86 +315,103 @@ const iconEnd: Args = {
 
 export const horizontal: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs },
 };
 
 export const vertical: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgsVertical },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical },
 };
 
 export const verticalToHorizontal: StoryObj = {
   render: DefaultTemplate,
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical, 'horizontal-from': 'medium' },
+};
+export const horizontalPanel: StoryObj = {
+  render: PanelTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgsVertical, 'horizontal-from': 'medium' },
+  args: { ...basicArgs },
+};
+
+export const verticalPanel: StoryObj = {
+  render: PanelTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, orientation: orientation.options[1] },
+};
+
+export const verticalToHorizontalPanel: StoryObj = {
+  render: PanelTemplate,
+  argTypes: checkboxArgTypes,
+  args: { ...basicArgs, orientation: orientation.options[1], 'horizontal-from': 'medium' },
 };
 
 export const horizontalSizeM: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, size: 'm' },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs, size: 'm' },
 };
 
 export const horizontalDisabled: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, disabled: true, disabledSingle: true },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs, disabled: true, disabledSingle: true },
 };
 
 export const verticalDisabled: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgsVertical, disabled: true, disabledSingle: true },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical, disabled: true, disabledSingle: true },
 };
 
 export const horizontalIconStart: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, ...iconStart },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs, ...iconStart },
 };
 
 export const verticalIconStart: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgsVertical, ...iconStart },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical, ...iconStart },
 };
 
 export const horizontalIconEnd: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, ...iconEnd },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs, ...iconEnd },
 };
 
 export const verticalIconEnd: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgsVertical, ...iconEnd },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical, ...iconEnd },
 };
 
 export const verticalIconEndLongLabel: StoryObj = {
   render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgsVertical, ...iconEnd, label: longLabelText },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical, ...iconEnd, label: longLabelText },
 };
 
 export const horizontalWithSbbFormError: StoryObj = {
   render: ErrorMessageTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, required: true },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs, required: true },
 };
 
 export const verticalWithSbbFormError: StoryObj = {
   render: ErrorMessageTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgsVertical, required: true },
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgsVertical, required: true },
 };
 
 export const indeterminateGroup: StoryObj = {
   render: IndeterminateGroupTemplate,
-  argTypes: { ...basicArgTypes },
-  args: { ...basicArgsVertical, checked: undefined },
+  argTypes: { ...checkboxArgTypes },
+  args: { ...checkboxArgsVertical, checked: undefined },
 };
 
 const meta: Meta = {

src/components/checkbox/checkbox-group/checkbox-group.ts

@@ -1,11 +1,12 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { html, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y.js';
 import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
 import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
 import { SbbDisabledMixin } from '../../core/mixins.js';
+import type { SbbCheckboxPanelElement } from '../checkbox-panel.js';
 import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox.js';
 
 import style from './checkbox-group.scss?lit&inline';
@@ -35,9 +36,11 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
   public orientation: SbbOrientation = 'horizontal';
 
   /** List of contained checkbox elements. */
-  public get checkboxes(): SbbCheckboxElement[] {
-    return Array.from(this.querySelectorAll?.('sbb-checkbox') ?? []).filter(
-      (el: SbbCheckboxElement) => el.closest('sbb-checkbox-group') === this,
+  public get checkboxes(): (SbbCheckboxElement | SbbCheckboxPanelElement)[] {
+    return <(SbbCheckboxElement | SbbCheckboxPanelElement)[]>(
+      Array.from(this.querySelectorAll?.('sbb-checkbox, sbb-checkbox-panel') ?? []).filter(
+        (el) => el.closest('sbb-checkbox-group') === this,
+      )
     );
   }
 
@@ -52,7 +55,10 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
-    this.toggleAttribute('data-has-selection-panel', !!this.querySelector?.('sbb-selection-panel'));
+    this.toggleAttribute(
+      'data-has-selection-panel',
+      !!this.querySelector?.('sbb-selection-expansion-panel'),
+    );
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -68,24 +74,25 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {
-    const enabledCheckboxes: SbbCheckboxElement[] = this.checkboxes.filter(
-      (checkbox: SbbCheckboxElement) =>
-        !checkbox.disabled && interactivityChecker.isVisible(checkbox),
-    );
+    const enabledCheckboxes: (SbbCheckboxElement | SbbCheckboxPanelElement)[] =
+      this.checkboxes.filter(
+        (checkbox: SbbCheckboxElement | SbbCheckboxPanelElement) =>
+          !checkbox.disabled && interactivityChecker.isVisible(checkbox as HTMLElement),
+      );
 
     if (
       !enabledCheckboxes ||
       // don't trap nested handling
       ((evt.target as HTMLElement) !== this &&
         (evt.target as HTMLElement).parentElement !== this &&
-        (evt.target as HTMLElement).parentElement!.nodeName !== 'SBB-SELECTION-PANEL')
+        (evt.target as HTMLElement).parentElement!.nodeName !== 'SBB-SELECTION-EXPANSION-PANEL')
     ) {
       return;
     }
 
     if (isArrowKeyPressed(evt)) {
       const current: number = enabledCheckboxes.findIndex(
-        (e: SbbCheckboxElement) => e === evt.target,
+        (e: SbbCheckboxElement | SbbCheckboxPanelElement) => e === evt.target,
       );
       const nextIndex: number = getNextElementIndex(evt, current, enabledCheckboxes.length);
       enabledCheckboxes[nextIndex]?.focus();

src/components/checkbox/checkbox-group/readme.md

@@ -1,6 +1,6 @@
 The `sbb-checkbox-group` component is used as a container for one or multiple
 [sbb-checkbox](/docs/components-sbb-checkbox-sbb-checkbox--docs) components,
-or, alternatively, for a collection of [sbb-selection-panel](/docs/components-sbb-selection-panel--docs).
+or, alternatively, for a collection of [sbb-selection-expansion-panel](/docs/components-sbb-selection-expansion-panel--docs).
 
 ```html
 <sbb-checkbox-group>
@@ -10,7 +10,7 @@ or, alternatively, for a collection of [sbb-selection-panel](/docs/components-sb
 </sbb-checkbox-group>
 
 <sbb-checkbox-group>
-  <sbb-selection-panel>
+  <sbb-selection-expansion-panel>
     <sbb-checkbox>
       Value
       <span slot="suffix">
@@ -19,7 +19,7 @@ or, alternatively, for a collection of [sbb-selection-panel](/docs/components-sb
         <span class="sbb-text-m sbb-text--bold">40.00</span>
       </span>
     </sbb-checkbox>
-  </sbb-selection-panel>
+  </sbb-selection-expansion-panel>
 </sbb-checkbox-group>
 ```
 
@@ -73,14 +73,14 @@ Two values are available, `s` and `m`, which is the default
 
 ## Properties
 
-| Name             | Attribute         | Privacy | Type                             | Default        | Description                                                                    |
-| ---------------- | ----------------- | ------- | -------------------------------- | -------------- | ------------------------------------------------------------------------------ |
-| `required`       | `required`        | public  | `boolean`                        | `false`        | Whether the checkbox group is required.                                        |
-| `size`           | `size`            | public  | `SbbCheckboxSize`                | `'m'`          | Size variant, either m or s.                                                   |
-| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| undefined` |                | Overrides the behaviour of `orientation` property.                             |
-| `orientation`    | `orientation`     | public  | `SbbOrientation`                 | `'horizontal'` | Indicates the orientation of the checkboxes inside the `<sbb-checkbox-group>`. |
-| `checkboxes`     | -                 | public  | `SbbCheckboxElement[]`           |                | List of contained checkbox elements.                                           |
-| `disabled`       | `disabled`        | public  | `boolean`                        | `false`        | Whether the component is disabled.                                             |
+| Name             | Attribute         | Privacy | Type                                                | Default        | Description                                                                    |
+| ---------------- | ----------------- | ------- | --------------------------------------------------- | -------------- | ------------------------------------------------------------------------------ |
+| `required`       | `required`        | public  | `boolean`                                           | `false`        | Whether the checkbox group is required.                                        |
+| `size`           | `size`            | public  | `SbbCheckboxSize`                                   | `'m'`          | Size variant, either m or s.                                                   |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| undefined`                    |                | Overrides the behaviour of `orientation` property.                             |
+| `orientation`    | `orientation`     | public  | `SbbOrientation`                                    | `'horizontal'` | Indicates the orientation of the checkboxes inside the `<sbb-checkbox-group>`. |
+| `checkboxes`     | -                 | public  | `(SbbCheckboxElement \| SbbCheckboxPanelElement)[]` |                | List of contained checkbox elements.                                           |
+| `disabled`       | `disabled`        | public  | `boolean`                                           | `false`        | Whether the component is disabled.                                             |
 
 ## Slots
 

src/components/checkbox/checkbox-panel.ts

@@ -0,0 +1 @@
+export * from './checkbox-panel/checkbox-panel.js';