@boostdev/design-system-components 1.1.2 → 1.2.0

package/src/web-components/interaction/form/BdsSelect.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSelect.stories';
+
+<Meta of={Stories} />
+
+# Select
+
+`<bds-select>` is a form-associated Select custom element. It uses a JSON `options` attribute because slotting `<option>` elements into a shadow DOM `<select>` is not cross-browser supported.
+
+## Usage
+
+```html
+<bds-select
+  name="country"
+  placeholder="Choose…"
+  options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
+></bds-select>
+```
+
+## Attributes
+
+| Attribute     | Type      | Default | Description                                          |
+|---------------|-----------|---------|------------------------------------------------------|
+| `name`        | `string`  | `""`    | Form field name                                      |
+| `value`       | `string`  | `""`    | Currently selected value                             |
+| `options`     | `string`  | `"[]"`  | JSON array of `{ value, label, disabled? }` objects  |
+| `placeholder` | `string`  | `""`    | Placeholder option label (disabled, empty value)     |
+| `required`    | `boolean` | `false` | Marks the field as required                          |
+| `disabled`    | `boolean` | `false` | Disables the select                                  |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsSelect.stories.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SelectOption } from './bds-select';
+import '../../index';
+
+const COUNTRIES: SelectOption[] = [
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'gb', label: 'United Kingdom', disabled: true },
+];
+
+function BdsSelect({
+  placeholder = 'Choose an option…',
+  disabled,
+  required,
+}: {
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+}) {
+  return React.createElement('bds-select', {
+    options: JSON.stringify(COUNTRIES),
+    placeholder,
+    disabled: disabled || undefined,
+    required: required || undefined,
+    style: { minInlineSize: '200px', display: 'block' },
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/Select',
+  component: BdsSelect,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { placeholder: 'Select a country…' } };
+export const Disabled: Story = { args: { placeholder: 'Select a country…', disabled: true } };
+export const WithValue: Story = {
+  render: () =>
+    React.createElement('bds-select', {
+      options: JSON.stringify(COUNTRIES),
+      value: 'nl',
+      style: { minInlineSize: '200px', display: 'block' },
+    }),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxInlineSize: '300px' }}>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Default</p>
+        {React.createElement('bds-select', { options: JSON.stringify(COUNTRIES), placeholder: 'Choose…' })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>With value</p>
+        {React.createElement('bds-select', { options: JSON.stringify(COUNTRIES), value: 'be' })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-select', { options: JSON.stringify(COUNTRIES), placeholder: 'Choose…', disabled: true })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxInlineSize: '300px' }}>
+        <p style={{ margin: '0 0 8px', fontSize: '0.875rem' }}>
+          Selected: {value ? COUNTRIES.find(c => c.value === value)?.label : '(none)'}
+        </p>
+        {React.createElement('bds-select', {
+          options: JSON.stringify(COUNTRIES),
+          placeholder: 'Select a country…',
+          value,
+          onChange: (e: Event) => setValue((e.target as HTMLSelectElement).value),
+        })}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsSlider.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSlider.stories';
+
+<Meta of={Stories} />
+
+# Slider
+
+`<bds-slider>` is a form-associated range input. The fill track is driven by the `--slider_fill` CSS custom property and updates as the user drags.
+
+## Usage
+
+```html
+<bds-slider name="volume" value="50" min="0" max="100" step="5"></bds-slider>
+```
+
+## Attributes
+
+| Attribute  | Type      | Default | Description                      |
+|------------|-----------|---------|----------------------------------|
+| `name`     | `string`  | `""`    | Form field name                  |
+| `value`    | `number`  | `0`     | Current value                    |
+| `min`      | `number`  | `0`     | Minimum value                    |
+| `max`      | `number`  | `100`   | Maximum value                    |
+| `step`     | `number`  | `1`     | Step increment                   |
+| `disabled` | `boolean` | `false` | Disables interaction             |
+
+## Events
+
+| Event    | Description                   |
+|----------|-------------------------------|
+| `input`  | Fired as the user drags       |
+| `change` | Fired when the user releases  |
+
+## CSS Custom Properties
+
+| Property              | Description                    |
+|-----------------------|--------------------------------|
+| `--slider_fill-color` | Fill track color (default: `--bds-color_interactive`) |
+| `--slider_track-color`| Unfilled track color           |
+| `--slider_thumb-color`| Thumb color                    |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsSlider.stories.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+
+function BdsSlider({
+  value,
+  min,
+  max,
+  step,
+  disabled,
+}: {
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}) {
+  return React.createElement('bds-slider', {
+    value,
+    min,
+    max,
+    step,
+    disabled: disabled || undefined,
+    style: { display: 'block', maxInlineSize: '320px' },
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/Slider',
+  component: BdsSlider,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    value: { control: 'number' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 50 } };
+export const WithStep: Story = { args: { value: 25, min: 0, max: 100, step: 25 } };
+export const Disabled: Story = { args: { value: 60, disabled: true } };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxInlineSize: '320px' }}>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Default (0%)</p>
+        {React.createElement('bds-slider', { value: 0, style: { display: 'block' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Mid (50%)</p>
+        {React.createElement('bds-slider', { value: 50, style: { display: 'block' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Full (100%)</p>
+        {React.createElement('bds-slider', { value: 100, style: { display: 'block' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-slider', { value: 40, disabled: true, style: { display: 'block' } })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [volume, setVolume] = React.useState(50);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxInlineSize: '320px' }}>
+        <p style={{ margin: '0 0 4px', fontSize: '0.875rem' }}>Volume: {volume}%</p>
+        {React.createElement('bds-slider', {
+          value: volume,
+          min: 0,
+          max: 100,
+          step: 1,
+          style: { display: 'block' },
+          onInput: (e: Event) => setVolume(parseFloat((e.target as HTMLInputElement).value)),
+        })}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsSwitch.mdx

@@ -0,0 +1,39 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSwitch.stories';
+
+<Meta of={Stories} />
+
+# Switch
+
+`<bds-switch>` is a visually styled toggle switch. Semantically equivalent to a checkbox (`role="switch"`), it participates in HTML forms via the Form-Associated Custom Elements API.
+
+## Usage
+
+```html
+<bds-switch name="notifications" value="enabled">Enable notifications</bds-switch>
+```
+
+## Attributes
+
+| Attribute  | Type      | Default | Description                         |
+|------------|-----------|---------|-------------------------------------|
+| `name`     | `string`  | `""`    | Form field name                     |
+| `value`    | `string`  | `"on"`  | Submitted value when on             |
+| `checked`  | `boolean` | `false` | Whether the switch is on            |
+| `required` | `boolean` | `false` | Marks the field as required         |
+| `disabled` | `boolean` | `false` | Disables interaction                |
+
+## Slots
+
+| Slot      | Description   |
+|-----------|---------------|
+| (default) | Label text    |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsSwitch.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+
+function BdsSwitch({
+  label = 'Enable feature',
+  checked,
+  disabled,
+}: {
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}) {
+  return React.createElement(
+    'bds-switch',
+    {
+      checked: checked || undefined,
+      disabled: disabled || undefined,
+    },
+    label,
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/Switch',
+  component: BdsSwitch,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Enable notifications' } };
+export const On: Story = { args: { label: 'Notifications enabled', checked: true } };
+export const Disabled: Story = { args: { label: 'Managed by admin', disabled: true } };
+export const DisabledOn: Story = { args: { label: 'Always on (managed)', checked: true, disabled: true } };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      {React.createElement('bds-switch', null, 'Off (default)')}
+      {React.createElement('bds-switch', { checked: true }, 'On')}
+      {React.createElement('bds-switch', { disabled: true }, 'Disabled off')}
+      {React.createElement('bds-switch', { checked: true, disabled: true }, 'Disabled on')}
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [enabled, setEnabled] = React.useState(false);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <p style={{ margin: '0 0 8px', fontSize: '0.875rem' }}>
+          Dark mode: {enabled ? 'enabled' : 'disabled'}
+        </p>
+        {React.createElement(
+          'bds-switch',
+          {
+            checked: enabled || undefined,
+            onChange: (e: Event) => setEnabled((e.target as HTMLInputElement).checked),
+          },
+          'Dark mode',
+        )}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsTextarea.mdx

@@ -0,0 +1,41 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsTextarea.stories';
+
+<Meta of={Stories} />
+
+# Textarea
+
+`<bds-textarea>` wraps a native `<textarea>` for consistent styling while participating in HTML forms via the Form-Associated Custom Elements API.
+
+## Usage
+
+```html
+<bds-textarea name="message" placeholder="Enter your message…" rows="6"></bds-textarea>
+```
+
+## Attributes
+
+| Attribute     | Type      | Default | Description                  |
+|---------------|-----------|---------|------------------------------|
+| `name`        | `string`  | `""`    | Form field name              |
+| `value`       | `string`  | `""`    | Current text value           |
+| `placeholder` | `string`  | `""`    | Placeholder text             |
+| `rows`        | `number`  | `4`     | Number of visible rows       |
+| `required`    | `boolean` | `false` | Marks the field as required  |
+| `disabled`    | `boolean` | `false` | Disables the textarea        |
+
+## Events
+
+| Event    | Description                        |
+|----------|------------------------------------|
+| `input`  | Fired as the user types            |
+| `change` | Fired when value is committed      |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsTextarea.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+
+function BdsTextarea({
+  placeholder = 'Enter text…',
+  rows,
+  disabled,
+  required,
+}: {
+  placeholder?: string;
+  rows?: number;
+  disabled?: boolean;
+  required?: boolean;
+}) {
+  return React.createElement('bds-textarea', {
+    placeholder,
+    rows,
+    disabled: disabled || undefined,
+    required: required || undefined,
+    style: { display: 'block', maxInlineSize: '400px' },
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/Textarea',
+  component: BdsTextarea,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    rows: { control: 'number' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsTextarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { placeholder: 'Enter your message…' } };
+export const WithRows: Story = { args: { placeholder: 'Extended text area…', rows: 8 } };
+export const Disabled: Story = { args: { placeholder: 'Not editable', disabled: true } };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxInlineSize: '400px' }}>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Default (4 rows)</p>
+        {React.createElement('bds-textarea', { placeholder: 'Write something…' })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Tall (8 rows)</p>
+        {React.createElement('bds-textarea', { placeholder: 'More space to write…', rows: 8 })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-textarea', { placeholder: 'Read-only area', disabled: true })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxInlineSize: '400px' }}>
+        <p style={{ margin: '0 0 4px', fontSize: '0.875rem' }}>
+          Characters: {value.length}
+        </p>
+        {React.createElement('bds-textarea', {
+          placeholder: 'Start typing…',
+          value,
+          onInput: (e: Event) => setValue((e.target as HTMLTextAreaElement).value),
+        })}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/bds-checkbox.ts

@@ -52,10 +52,8 @@ export class BdsCheckbox extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
-      box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
       border: none;
       appearance: none;
       background-color: var(--checkbox_color_bg, var(--bds-color_bg));

package/src/web-components/interaction/form/bds-combobox.ts

@@ -57,10 +57,8 @@ export class BdsCombobox extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--combobox_radius, var(--bdc-outline_radius));
-      box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));
       background-color: var(--combobox_color_bg, var(--bds-color_bg));
       color: var(--combobox_color, var(--bds-color_on-bg));
       box-sizing: border-box;

package/src/web-components/interaction/form/bds-number-input.ts

@@ -45,10 +45,8 @@ export class BdsNumberInput extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--number-input_radius, var(--bdc-outline_radius));
-      box-shadow: var(--number-input_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--number-input_shadow, var(--bdc-outline_shadow));
       background-color: var(--number-input_color_bg, var(--bds-color_bg));
       color: var(--number-input_color, var(--bds-color_on-bg));
       text-align: center;
@@ -76,12 +74,13 @@ export class BdsNumberInput extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
+      margin: 1px;
       inline-size: 2rem;
       block-size: 2rem;
       border-radius: var(--bds-border_radius--xs);
       cursor: pointer;
       flex-shrink: 0;
-      color: var(--bds-color_on-bg);
+      color: var(--bds-color_interactive);
       transition: var(--bds-animation_transition);
     }
 

package/src/web-components/interaction/form/bds-radio.ts

@@ -50,10 +50,8 @@ export class BdsRadio extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: 50%;
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: 50%;
-      box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
       border: none;
       appearance: none;
       background-color: var(--radio_color_bg, var(--bds-color_bg));
@@ -63,18 +61,14 @@ export class BdsRadio extends LitElement {
     }
 
     .input:checked {
-      background-color: var(--radio_color-active, var(--bdc-color_active));
+      background: radial-gradient(
+        circle,
+        var(--radio_color-active, var(--bdc-color_active)) 35%,
+        var(--radio_color_bg, var(--bds-color_bg)) 42%
+      );
       --bdc_color: var(--radio_color-active, var(--bdc-color_active));
     }
 
-    .input:checked::after {
-      content: '';
-      position: absolute;
-      inset: 25%;
-      border-radius: 50%;
-      background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
-    }
-
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);