@boostdev/design-system-components 2.6.0 → 2.7.1

package/src/web-components/interaction/bds-popover.ts

@@ -50,10 +50,15 @@ export class BdsPopover extends LitElement {
       overflow-y: auto;
       z-index: var(--popover_z-index, 100);
       min-width: 12rem;
+      max-width: var(--popover_max-width, 20rem);
+      max-height: var(--popover_max-height, 80dvh);
       padding: var(--bds-space_m);
-      border-radius: var(--bds-border_radius--s);
+      border: var(--popover_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--popover_radius, var(--bdc-outline_radius));
       background-color: var(--popover_color, var(--bds-color_bg));
-      box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
       color: var(--popover_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
     }

package/src/web-components/interaction/bds-tooltip.ts

@@ -37,7 +37,7 @@ export class BdsTooltip extends LitElement {
       position: absolute;
       z-index: var(--bds-z-index_popover, 200);
       padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--bds-border_radius--xs);
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
       background-color: var(--tooltip_bg, var(--bds-color_on-bg));
       color: var(--tooltip_text, var(--bds-color_bg));
       font-size: var(--bds-font_size--body--s);

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

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as Stories from './BdsFieldGroup.stories';
+
+<Meta of={Stories} />
+
+# `<bds-field-group>`
+
+Framework-agnostic FieldGroup custom element. Wraps slotted fields in a `<fieldset>` with a styled `<legend>` and lays them out horizontally (with auto-collapse to vertical via CSS container query) or vertically.
+
+Mirrors the React `FieldGroup` component — same token surface, same behavior, same auto-derived collapse threshold.
+
+## Attributes
+
+| Attribute | Values | Default | Description |
+|-----------|--------|---------|-------------|
+| `variant` | `horizontal` \| `vertical` | `horizontal` | Layout direction. |
+| `legend` | string | — | Optional legend text. Falls back to `aria-label` semantics if you set that on the host directly. |
+| `disabled` | boolean | `false` | Forwards to the inner `<fieldset>`; the UA cascades it to descendant form controls (light-DOM children projected through the slot). |
+
+## Slots
+
+- `(default)` — projected form fields (`<bds-form-input>`, `<bds-select>`, etc.). The component listens for `slotchange` and surfaces the slotted-element count via `--fieldGroup_field-count`, which the auto-derived collapse threshold reads.
+
+## Examples
+
+### Horizontal
+<Canvas of={Stories.Horizontal} />
+
+### Vertical
+<Canvas of={Stories.Vertical} />
+
+### Horizontal collapses in a narrow container
+<Canvas of={Stories.HorizontalCollapsesInNarrowContainer} />
+
+### Without a legend
+<Canvas of={Stories.WithoutLegend} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+## CSS variables
+
+Same surface as the React component. All public tokens are read with foundation-default fallbacks; consumers can set them on the host (or any ancestor) to theme one or many groups without touching internal classes.
+
+### Layout
+
+| Variable | Default |
+|----------|---------|
+| `--fieldGroup_gap` | `var(--bds-space_m)` |
+| `--fieldGroup_min-field-width` | `12rem` |
+| `--fieldGroup_collapse-threshold` | `calc(N × min-field-width + (N − 1) × gap)` (computed) |
+
+### Legend
+
+| Variable | Default |
+|----------|---------|
+| `--fieldGroup_legend-color` | `var(--bds-color_on-bg)` |
+| `--fieldGroup_legend-font-size` | `var(--bds-font_size--heading-3)` |
+| `--fieldGroup_legend-font-weight` | `var(--bds-font_weight--semibold)` |
+| `--fieldGroup_legend-line-height` | `var(--bds-font_line-height--heading)` |
+| `--fieldGroup_legend-padding-block` | `var(--bds-space_xs)` |
+| `--fieldGroup_legend-gap` | `var(--bds-space_m)` |
+| `--fieldGroup_legend-border-block-end` | `1px solid var(--bds-color_bg--subtle)` |
+
+## Notes on shadow DOM
+
+The component renders its own `<fieldset>` inside the shadow root and projects fields through a `<slot>`. Because slotted elements stay in the host's light DOM, the native `fieldset[disabled]` cascade onto descendants is browser-dependent — modern browsers do propagate disabled to slotted form controls; older ones may not. If you support an older runtime and need a hard guarantee, set `disabled` on each slotted field too.

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index'; // auto-registers all custom elements
+
+function BdsFieldGroup({
+  legend,
+  variant,
+  disabled,
+  children,
+}: {
+  legend?: string;
+  variant?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-field-group',
+    {
+      legend: legend || undefined,
+      variant: variant || undefined,
+      disabled: disabled || undefined,
+    },
+    children,
+  );
+}
+
+const meta = {
+  title: 'Web Components/Form/FieldGroup',
+  component: BdsFieldGroup,
+  tags: ['!stable', 'experimental'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Framework-agnostic FieldGroup. Wraps slotted fields in a `<fieldset>` ' +
+          'and lays them out horizontally with a CSS container query that auto-collapses ' +
+          'to a single column when the host is too narrow to fit a complete row at minimum field width.',
+      },
+    },
+  },
+  argTypes: {
+    variant: { control: 'select', options: ['horizontal', 'vertical'] },
+    legend: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsFieldGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const field = (name: string, label: string, type = 'text') =>
+  React.createElement('bds-form-input', { name, label, type });
+
+export const Horizontal: Story = {
+  args: { legend: 'Contact details', variant: 'horizontal' },
+  render: args => (
+    <BdsFieldGroup {...args}>
+      {field('first', 'First name')}
+      {field('last', 'Last name')}
+      {field('email', 'Email', 'email')}
+    </BdsFieldGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  args: { legend: 'Contact details', variant: 'vertical' },
+  render: args => (
+    <BdsFieldGroup {...args}>
+      {field('first', 'First name')}
+      {field('last', 'Last name')}
+      {field('email', 'Email', 'email')}
+    </BdsFieldGroup>
+  ),
+};
+
+export const HorizontalCollapsesInNarrowContainer: Story = {
+  name: 'Horizontal — collapses in narrow container',
+  args: { legend: 'Same fields, narrower parent', variant: 'horizontal' },
+  render: args => (
+    <div style={{ inlineSize: '20rem', border: '1px dashed currentcolor', padding: '1rem' }}>
+      <BdsFieldGroup {...args}>
+        {field('first', 'First name')}
+        {field('last', 'Last name')}
+        {field('email', 'Email', 'email')}
+      </BdsFieldGroup>
+    </div>
+  ),
+};
+
+export const WithoutLegend: Story = {
+  args: { variant: 'horizontal' },
+  render: args => (
+    <BdsFieldGroup {...args}>
+      {field('q', 'Query')}
+      {field('from', 'From', 'date')}
+      {field('to', 'To', 'date')}
+    </BdsFieldGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { legend: 'Disabled section', variant: 'horizontal', disabled: true },
+  render: args => (
+    <BdsFieldGroup {...args}>
+      {field('first', 'First name')}
+      {field('last', 'Last name')}
+    </BdsFieldGroup>
+  ),
+};

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

@@ -64,6 +64,7 @@ export class BdsCheckboxGroup extends LitElement {
 
     .message--hint {
       color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
 

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

@@ -49,7 +49,7 @@ export class BdsCheckbox extends LitElement {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--checkbox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));

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

@@ -54,7 +54,7 @@ export class BdsCombobox extends LitElement {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--combobox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--combobox_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/form/bds-field-group.spec.ts

@@ -0,0 +1,64 @@
+import { fixture, cleanup } from '../../test/helpers';
+import { BdsFieldGroup } from './bds-field-group';
+
+describe('bds-field-group', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-field-group')).toBe(BdsFieldGroup);
+  });
+
+  it('renders a fieldset in the shadow DOM', async () => {
+    const el = await fixture('<bds-field-group></bds-field-group>');
+    expect(el.shadowRoot!.querySelector('fieldset')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('renders the legend when the legend attribute is set', async () => {
+    const el = await fixture('<bds-field-group legend="Contact details"></bds-field-group>');
+    const legend = el.shadowRoot!.querySelector('legend');
+    expect(legend?.textContent?.trim()).toBe('Contact details');
+    cleanup(el);
+  });
+
+  it('omits the legend element when no legend attribute is set', async () => {
+    const el = await fixture('<bds-field-group></bds-field-group>');
+    expect(el.shadowRoot!.querySelector('legend')).toBeNull();
+    cleanup(el);
+  });
+
+  it('reflects the default horizontal variant onto the host', async () => {
+    const el = await fixture('<bds-field-group></bds-field-group>') as BdsFieldGroup;
+    expect(el.getAttribute('variant')).toBe('horizontal');
+  });
+
+  it('honors variant="vertical" on the host', async () => {
+    const el = await fixture('<bds-field-group variant="vertical"></bds-field-group>') as BdsFieldGroup;
+    expect(el.getAttribute('variant')).toBe('vertical');
+    cleanup(el);
+  });
+
+  it('forwards the disabled attribute to the inner fieldset', async () => {
+    const el = await fixture('<bds-field-group disabled></bds-field-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset') as HTMLFieldSetElement;
+    expect(fieldset.disabled).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders a slot for projected fields', async () => {
+    const el = await fixture(
+      '<bds-field-group><span id="a"></span><span id="b"></span></bds-field-group>',
+    );
+    expect(el.shadowRoot!.querySelector('slot')).not.toBeNull();
+    expect(el.querySelectorAll('span').length).toBe(2);
+    cleanup(el);
+  });
+
+  it('exposes the slotted-element count as --fieldGroup_field-count after slotchange', async () => {
+    const el = await fixture(
+      '<bds-field-group><span></span><span></span><span></span></bds-field-group>',
+    ) as BdsFieldGroup;
+    // slotchange fires synchronously after the initial render; allow a microtask.
+    await new Promise(r => requestAnimationFrame(() => r(null)));
+    expect(el.style.getPropertyValue('--fieldGroup_field-count')).toBe('3');
+    cleanup(el);
+  });
+});

package/src/web-components/interaction/form/bds-field-group.ts

@@ -0,0 +1,157 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export type FieldGroupVariant = 'horizontal' | 'vertical';
+
+/**
+ * `<bds-field-group>` — framework-agnostic FieldGroup custom element.
+ *
+ * Semantically groups related form fields under a single `<fieldset>` and
+ * lays them out either horizontally (with a CSS container query that
+ * collapses to a vertical stack when the FieldGroup itself is too narrow)
+ * or vertically. Mirrors the React `FieldGroup` component.
+ *
+ * Attributes:
+ *   variant  — "horizontal" (default) | "vertical"
+ *   legend   — optional legend text rendered above the fields
+ *   disabled — boolean; forwarded to the inner <fieldset>
+ *
+ * Slots:
+ *   (default) — form fields (any element). The slotted-element count is
+ *     measured on each `slotchange` and surfaced via the
+ *     `--fieldGroup_field-count` custom property, which the auto-derived
+ *     collapse threshold reads.
+ *
+ * @example
+ * <bds-field-group variant="horizontal" legend="Contact details">
+ *   <bds-form-input label="First name" name="first"></bds-form-input>
+ *   <bds-form-input label="Last name"  name="last"></bds-form-input>
+ *   <bds-form-input label="Email"      name="email"></bds-form-input>
+ * </bds-field-group>
+ */
+export class BdsFieldGroup extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+
+      /* Establish an inline-size containment context so the @container rule
+         queries the host's own width — independent of the viewport. */
+      container-type: inline-size;
+      container-name: field-group;
+
+      /* Auto-derived collapse threshold (mirror of the React component).
+         --fieldGroup_field-count is set inline by _onSlotChange; the other
+         tokens use foundation-default fallbacks so the calc rebuilds when
+         a consumer overrides --fieldGroup_min-field-width or _gap. */
+      --fieldGroup_collapse-threshold:
+        calc(
+          var(--fieldGroup_field-count, 1)
+          * var(--fieldGroup_min-field-width, 12rem)
+          + (var(--fieldGroup_field-count, 1) - 1)
+          * var(--fieldGroup_gap, var(--bds-space_m))
+        );
+    }
+
+    fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      min-inline-size: 0;
+    }
+
+    .legend {
+      inline-size: 100%;
+      padding-inline: 0;
+
+      padding-block:
+        var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
+      margin-block-end:
+        var(--fieldGroup_legend-gap, var(--bds-space_m));
+      border-block-end:
+        var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
+
+      color:
+        var(--fieldGroup_legend-color, var(--bds-color_on-bg));
+      font-family: var(--bds-font_family--body);
+      font-size:
+        var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
+      font-weight:
+        var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
+      line-height:
+        var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
+    }
+
+    .fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fieldGroup_gap, var(--bds-space_m));
+    }
+
+    :host([variant='horizontal']) .fields {
+      flex-flow: row wrap;
+    }
+
+    :host([variant='horizontal']) .fields ::slotted(*) {
+      flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
+      min-inline-size: 0;
+    }
+
+    /* Auto-collapse: when the host's inline-size can't fit a complete
+       horizontal row, switch to a single-column stack. Threshold scales
+       with the actual slotted-element count (see :host calc above). */
+    @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
+      :host([variant='horizontal']) .fields {
+        flex-direction: column;
+      }
+
+      :host([variant='horizontal']) .fields ::slotted(*) {
+        flex: 1 1 auto;
+      }
+    }
+  `;
+
+  static properties = {
+    variant:  { type: String, reflect: true },
+    legend:   { type: String },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare variant: FieldGroupVariant;
+  declare legend: string;
+  declare disabled: boolean;
+
+  constructor() {
+    super();
+    this.variant = 'horizontal';
+    this.legend = '';
+    this.disabled = false;
+  }
+
+  // Arrow-bound for stable identity (unused here but matches the
+  // bds-popover / bds-button conventions for handlers attached in render).
+  private _onSlotChange = (e: Event) => {
+    const slot = e.target as HTMLSlotElement;
+    const count = slot.assignedElements().length;
+    this.style.setProperty('--fieldGroup_field-count', String(count));
+  };
+
+  render() {
+    return html`
+      <fieldset ?disabled=${this.disabled}>
+        ${this.legend
+          ? html`<legend class="legend">${this.legend}</legend>`
+          : nothing}
+        <div class="fields">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      </fieldset>
+    `;
+  }
+}
+
+customElements.define('bds-field-group', BdsFieldGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-field-group': BdsFieldGroup;
+  }
+}

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

@@ -58,7 +58,7 @@ export class BdsFormInput extends LitElement {
       position: relative;
       display: flex;
       align-items: center;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--formInput_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--formInput_radius, var(--bdc-outline_radius));
@@ -138,6 +138,7 @@ export class BdsFormInput extends LitElement {
 
     .message--hint {
       color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
 

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

@@ -42,7 +42,7 @@ export class BdsNumberInput extends LitElement {
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--number-input_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--number-input_radius, var(--bdc-outline_radius));

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

@@ -66,6 +66,7 @@ export class BdsRadioGroup extends LitElement {
 
     .message--hint {
       color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
 

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

@@ -47,7 +47,7 @@ export class BdsRadio extends LitElement {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--radio_border-color, currentcolor);
       --bdc-outline_radius: 50%;
 
       border-radius: 50%;

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

@@ -55,7 +55,7 @@ export class BdsSelect extends LitElement {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--select_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--select_radius, var(--bdc-outline_radius));

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

@@ -46,7 +46,7 @@ export class BdsSwitch extends LitElement {
       block-size: 1.5rem;
       border-radius: 999px;
       background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --bdc_color: currentcolor;
+      --bdc_color: var(--switch_border-color, currentcolor);
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       transition: background-color 0.2s ease;

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

@@ -41,7 +41,7 @@ export class BdsTextarea extends LitElement {
       line-height: var(--bds-font_line-height--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--textarea_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--textarea_radius, var(--bdc-outline_radius));

package/src/web-components/ui/BdsCard.mdx

@@ -5,7 +5,7 @@ import * as Stories from './BdsCard.stories';
 
 # <bds-card>
 
-Framework-agnostic Card layout custom element. A versatile container with three visual variants, configurable padding, text alignment, and an optional clickable mode.
+Framework-agnostic Card layout custom element. A versatile container with three visual variants, text alignment, and an optional clickable mode. Padding is controlled via the `--card_padding` CSS custom property.
 
 > **Status: experimental** — API may change before stable release.
 
@@ -46,7 +46,6 @@ import '@boostdev/design-system-components/web-components';
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `variant` | `"default" \| "elevated" \| "outlined"` | `"default"` | Shadow and border style |
-| `padding` | `"none" \| "small" \| "medium" \| "large"` | `"medium"` | Inner padding |
 | `text-align` | `"start" \| "center" \| "end"` | `"start"` | Text alignment |
 | `clickable` | boolean | `false` | Renders the card as a `<button>` with hover/active effects |
 | `aria-label` | string | — | Accessible label (recommended when `clickable` is set) |
@@ -67,13 +66,15 @@ import '@boostdev/design-system-components/web-components';
 
 | Property | Description |
 |----------|-------------|
+| `--card_padding` | Inner padding (default: `var(--bds-space_m)`) |
 | `--card_color` | Card background colour |
 | `--card_on-color` | Card text/foreground colour |
+| `--card_border` | Border on outlined variant (default: `none`) |
 
 ## Usage in plain HTML
 
 ```html
-<bds-card variant="elevated" padding="large">
+<bds-card variant="elevated" style="--card_padding: var(--bds-space_l)">
   <p>Card content</p>
 </bds-card>
 

package/src/web-components/ui/BdsCard.stories.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { CardVariant, CardPadding, CardTextAlign } from './bds-card';
+import type { CardVariant, CardTextAlign } from './bds-card';
 import '../index'; // auto-registers all custom elements
 
 function BdsCard({
   variant = 'default',
-  padding = 'medium',
   textAlign = 'start',
   clickable,
   ariaLabel,
   children,
 }: {
   variant?: CardVariant;
-  padding?: CardPadding;
   textAlign?: CardTextAlign;
   clickable?: boolean;
   ariaLabel?: string;
@@ -22,7 +20,6 @@ function BdsCard({
     'bds-card',
     {
       variant,
-      padding,
       'text-align': textAlign,
       clickable: clickable || undefined,
       'aria-label': ariaLabel,
@@ -38,7 +35,6 @@ const meta = {
   parameters: { layout: 'centered' },
   argTypes: {
     variant:   { control: 'select', options: ['default', 'elevated', 'outlined'] },
-    padding:   { control: 'select', options: ['none', 'small', 'medium', 'large'] },
     textAlign: { control: 'select', options: ['start', 'center', 'end'] },
     clickable: { control: 'boolean' },
   },
@@ -47,19 +43,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = { args: { variant: 'default', padding: 'medium', children: 'Card content goes here.' } };
-export const Elevated: Story = { args: { variant: 'elevated', padding: 'medium', children: 'Elevated card.' } };
-export const Outlined: Story = { args: { variant: 'outlined', padding: 'medium', children: 'Outlined card.' } };
+export const Default: Story = { args: { variant: 'default', children: 'Card content goes here.' } };
+export const Elevated: Story = { args: { variant: 'elevated', children: 'Elevated card.' } };
+export const Outlined: Story = { args: { variant: 'outlined', children: 'Outlined card.' } };
 export const Clickable: Story = {
-  args: { variant: 'default', padding: 'medium', clickable: true, ariaLabel: 'Open details', children: 'Clickable card — hover me.' },
+  args: { variant: 'default', clickable: true, ariaLabel: 'Open details', children: 'Clickable card — hover me.' },
 };
 
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', maxWidth: 600 }}>
       {(['default', 'elevated', 'outlined'] as const).map(v =>
-        React.createElement('bds-card', { key: v, variant: v, padding: 'medium', style: 'width: 160px' },
-          React.createElement('p', { style: 'margin: 0' }, v),
+        React.createElement('bds-card', { key: v, variant: v, style: { width: 160 } },
+          React.createElement('p', { style: { margin: 0 } }, v),
         ),
       )}
     </div>

package/src/web-components/ui/BdsSkeleton.stories.tsx

@@ -41,10 +41,10 @@ export const Avatar: Story = {
 export const ContentBlock: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 300 }}>
-      {React.createElement('bds-skeleton', { style: 'width: 100%; height: 1.5rem;' })}
-      {React.createElement('bds-skeleton', { style: 'width: 80%; height: 1rem;' })}
-      {React.createElement('bds-skeleton', { style: 'width: 90%; height: 1rem;' })}
-      {React.createElement('bds-skeleton', { style: 'width: 60%; height: 1rem;' })}
+      {React.createElement('bds-skeleton', { style: { width: '100%', height: '1.5rem' } })}
+      {React.createElement('bds-skeleton', { style: { width: '80%', height: '1rem' } })}
+      {React.createElement('bds-skeleton', { style: { width: '90%', height: '1rem' } })}
+      {React.createElement('bds-skeleton', { style: { width: '60%', height: '1rem' } })}
     </div>
   ),
 };

package/src/web-components/ui/bds-alert.ts

@@ -112,7 +112,8 @@ export class BdsAlert extends LitElement {
       cursor: pointer;
       color: currentcolor;
       transition: var(--bds-animation_transition);
-      border-radius: 50%;
+      border: var(--alert_dismiss-border, none);
+      border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
       --bdc_color: currentcolor;
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
@@ -129,7 +130,7 @@ export class BdsAlert extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--alert_dismiss-opacity--hover, 0.7);
       }
     }
   `;