@boostdev/design-system-components 2.15.0 → 2.16.0

package/src/components/ui/Tabs/Tabs.mdx

@@ -48,6 +48,8 @@ The override surface is **layered**. Setting `--tab_color` / `--tab_border-color
 <tbody>
 <tr><td>`--tab_color`</td><td>per state</td><td>Tab text colour. Set to theme every state at once.</td></tr>
 <tr><td>`--tab_border-color`</td><td>per state</td><td>Tab block-end border colour.</td></tr>
+<tr><td>`--tab_font-weight`</td><td>per state</td><td>Tab font weight. Set to theme every state at once.</td></tr>
+<tr><td>`--tab_indicator-width`</td><td>`3px`</td><td>Thickness of the block-end indicator line.</td></tr>
 </tbody>
 </table>
 
@@ -55,16 +57,16 @@ The override surface is **layered**. Setting `--tab_color` / `--tab_border-color
 
 <table>
 <thead>
-<tr><th>State</th><th>Text</th><th>Border</th></tr>
+<tr><th>State</th><th>Text</th><th>Border</th><th>Font weight</th></tr>
 </thead>
 <tbody>
-<tr><td>resting</td><td>(`var(--bds-color_on-bg)`)</td><td>(`transparent`)</td></tr>
-<tr><td>hover</td><td>`--tab_color--hover`</td><td>—</td></tr>
-<tr><td>active</td><td>`--tab_color--active`</td><td>`--tab_border-color--active`</td></tr>
+<tr><td>resting</td><td>`--tab_color--inactive`</td><td>(`transparent`)</td><td>`--tab_font-weight--inactive`</td></tr>
+<tr><td>hover</td><td>`--tab_color--hover`</td><td>—</td><td>—</td></tr>
+<tr><td>active</td><td>`--tab_color--active`</td><td>`--tab_border-color--active`</td><td>`--tab_font-weight--active`</td></tr>
 </tbody>
 </table>
 
-Defaults: hover/active text resolves to `--bds-color_interactive_on-bg`; active border to `--bds-color_interactive`.
+Defaults: resting text is `--bds-color_on-bg--muted` (falls back to `--bds-color_on-bg`) at `--bds-font_weight--medium`; hover and active text are `--bds-color_on-bg`; active is `--bds-font_weight--bold` with a `--bds-color_interactive` indicator.
 
 ### Spacing tokens
 
@@ -80,6 +82,10 @@ Defaults: hover/active text resolves to `--bds-color_interactive_on-bg`; active
 </tbody>
 </table>
 
+## Layout stability
+
+The label sits in a `<span data-label>` with a hidden `::after` that repeats the text at the active weight (`--tab_font-weight--active`), so the tab keeps its bold width and selecting a tab does not shift the row. The text comes from `TabItem.label` (strings, numbers and nested elements); the hidden copy is invisible and not read by screen readers.
+
 ## Accessibility
 
 - Implements ARIA tabs pattern: `role="tablist"`, `role="tab"`, `role="tabpanel"`

package/src/components/ui/Tabs/Tabs.module.css

@@ -17,19 +17,37 @@
     padding: var(--tab_padding, var(--bds-space_s) var(--bds-space_m));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
-    font-weight: var(--bds-font_weight--semibold);
+    font-weight: var(--tab_font-weight, var(--tab_font-weight--state, var(--tab_font-weight--inactive, var(--bds-font_weight--medium))));
 
     /* Layered cascade: public overrides (--tab_color, --tab_border-color) win over
        per-state defaults. Active/hover write to the inner --tab_*--state slot. */
-    color:            var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
-    border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
+    color:            var(--tab_color, var(--tab_color--state, var(--tab_color--inactive, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)))));
+    border-block-end: var(--tab_indicator-width, 3px) solid var(--tab_border-color, var(--tab_border-color--state, transparent));
     margin-block-end: -1px;
     cursor: pointer;
     transition: var(--bds-animation_transition);
   }
 
+  /* Reserves the width of the bold label so selecting a tab does not shift the row.
+     The hidden ::after repeats the label at the active weight in the same grid cell:
+     it adds width but no height and stays out of the accessibility tree. */
+  .label {
+    display: inline-grid;
+  }
+
+  .label::after {
+    content: attr(data-label);
+    grid-area: 1 / 1;
+    font-weight: var(--tab_font-weight, var(--tab_font-weight--active, var(--bds-font_weight--bold)));
+    visibility: hidden;
+    pointer-events: none;
+    block-size: 0;
+    overflow: hidden;
+  }
+
   .tab.--active {
-    --tab_color--state:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+    --tab_color--state:        var(--tab_color--active, var(--bds-color_on-bg));
+    --tab_font-weight--state: var(--tab_font-weight--active, var(--bds-font_weight--bold));
     --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
   }
 
@@ -46,7 +64,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .tab:not(:disabled, .--active):hover {
-      --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
+      --tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
     }
   }
 

package/src/components/ui/Tabs/Tabs.spec.tsx

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Tabs } from './Tabs';
@@ -108,4 +110,41 @@ describe('Tabs', () => {
     render(<Tabs tabs={tabs} />);
     expect(screen.getByText('First panel').closest('[role="tabpanel"]')).toHaveAttribute('tabindex', '0');
   });
+
+  it('wraps the label with a data-label that reserves the bold width', () => {
+    render(<Tabs tabs={[{ id: 'a', label: <>Inbox <em>4</em></>, content: null }]} />);
+    const label = screen.getByRole('tab').querySelector('span');
+    expect(label).toHaveAttribute('data-label', 'Inbox 4');
+    expect(label).toHaveTextContent('Inbox 4');
+  });
+
+  describe('styling hooks', () => {
+    it('reserves the active font weight through a hidden ::after', () => {
+      const rules = readFileSync(resolve(process.cwd(), 'src/components/ui/Tabs/Tabs.module.css'), 'utf8');
+      expect(rules).toMatch(/\.label\s*\{\s*display:\s*inline-grid;/);
+      expect(rules).toMatch(/\.label::after\s*\{[^}]*content:\s*attr\(data-label\)/);
+      expect(rules).toMatch(/\.label::after\s*\{[^}]*font-weight:\s*var\(--tab_font-weight,\s*var\(--tab_font-weight--active,\s*var\(--bds-font_weight--bold\)\)\)/);
+      expect(rules).toMatch(/\.label::after\s*\{[^}]*visibility:\s*hidden/);
+    });
+
+    const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Tabs/Tabs.module.css'), 'utf8');
+
+    it('styles the resting tab muted and medium', () => {
+      expect(css).toMatch(/color:\s*var\(--tab_color,\s*var\(--tab_color--state,\s*var\(--tab_color--inactive,\s*var\(--bds-color_on-bg--muted,\s*var\(--bds-color_on-bg\)\)\)\)\)/);
+      expect(css).toMatch(/font-weight:\s*var\(--tab_font-weight,\s*var\(--tab_font-weight--state,\s*var\(--tab_font-weight--inactive,\s*var\(--bds-font_weight--medium\)\)\)\)/);
+    });
+
+    it('styles the active tab in the full text colour and bold', () => {
+      expect(css).toMatch(/--tab_color--state:\s*var\(--tab_color--active,\s*var\(--bds-color_on-bg\)\)/);
+      expect(css).toMatch(/--tab_font-weight--state:\s*var\(--tab_font-weight--active,\s*var\(--bds-font_weight--bold\)\)/);
+    });
+
+    it('sizes the indicator through --tab_indicator-width', () => {
+      expect(css).toMatch(/border-block-end:\s*var\(--tab_indicator-width,\s*3px\) solid/);
+    });
+
+    it('shows the full text colour on hover', () => {
+      expect(css).toMatch(/--tab_color--state:\s*var\(--tab_color--hover,\s*var\(--bds-color_on-bg\)\)/);
+    });
+  });
 });

package/src/components/ui/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, KeyboardEvent, ReactNode, useId, useRef, useState } fro
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
+import { getNodeText } from './getNodeText';
 
 export interface TabItem {
   id: string;
@@ -74,7 +75,7 @@ export function Tabs({ tabs, defaultTab, className, ...rest }: Readonly<TabsProp
               onClick={() => setActiveTab(tab.id)}
               onKeyDown={e => handleKeyDown(e, i)}
             >
-              {tab.label}
+              <span className={css.label} data-label={getNodeText(tab.label)}>{tab.label}</span>
             </button>
           );
         })}

package/src/components/ui/Tabs/getNodeText.spec.tsx

@@ -0,0 +1,23 @@
+import { getNodeText } from './getNodeText';
+
+describe('getNodeText', () => {
+  it('returns strings and numbers as text', () => {
+    expect(getNodeText('Overview')).toBe('Overview');
+    expect(getNodeText(3)).toBe('3');
+  });
+
+  it('ignores booleans, null and undefined', () => {
+    expect(getNodeText(null)).toBe('');
+    expect(getNodeText(undefined)).toBe('');
+    expect(getNodeText(false)).toBe('');
+    expect(getNodeText(true)).toBe('');
+  });
+
+  it('joins arrays', () => {
+    expect(getNodeText(['Inbox ', 4, false])).toBe('Inbox 4');
+  });
+
+  it('reads element children recursively', () => {
+    expect(getNodeText(<span>Inbox <strong>(<em>4</em>)</strong></span>)).toBe('Inbox (4)');
+  });
+});

package/src/components/ui/Tabs/getNodeText.ts

@@ -0,0 +1,13 @@
+import { isValidElement } from 'react';
+import type { ReactNode } from 'react';
+
+/**
+ * Plain text of a ReactNode: strings and numbers as written, arrays and element
+ * children joined, booleans/null/undefined ignored. Pure, so it also runs on the server.
+ */
+export function getNodeText(node: ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).join('');
+  if (isValidElement<{ children?: ReactNode }>(node)) return getNodeText(node.props.children);
+  return '';
+}

package/src/components/ui/Tooltip/Tooltip.mdx

@@ -29,6 +29,9 @@ Short contextual label that appears on hover or focus. Use to supplement icon bu
 ### Right
 <Canvas of={Stories.Right} />
 
+### Long text
+<Canvas of={Stories.LongText} />
+
 ### All placements
 <Canvas of={Stories.AllPlacements} />
 
@@ -48,11 +51,11 @@ Short contextual label that appears on hover or focus. Use to supplement icon bu
 <tbody>
 <tr><td>`--tooltip_bg`</td><td>`var(--bds-color_on-bg)`</td><td>Tooltip background colour</td></tr>
 <tr><td>`--tooltip_text`</td><td>`var(--bds-color_bg)`</td><td>Tooltip text colour</td></tr>
-<tr><td>`--tooltip_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Tooltip corner radius</td></tr>
-<tr><td>`--tooltip_padding`</td><td>`var(--bds-space_xxs) var(--bds-space_xs)`</td><td>Tooltip padding</td></tr>
+<tr><td>`--tooltip_radius`</td><td>`var(--bds-border_radius--xs)`</td><td>Tooltip corner radius</td></tr>
+<tr><td>`--tooltip_padding`</td><td>`var(--bds-space_xxs) var(--bds-space_s)`</td><td>Tooltip padding</td></tr>
 <tr><td>`--tooltip_font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Tooltip text size</td></tr>
 <tr><td>`--tooltip_offset`</td><td>`var(--bds-space_xs)`</td><td>Gap between the trigger and the tooltip. Set to `0` to close the gap so the pointer can travel from the trigger onto the tooltip without a dead zone.</td></tr>
-<tr><td>`--tooltip_max-inline-size`</td><td>`20rem`</td><td>Maximum inline size before content wraps</td></tr>
+<tr><td>`--tooltip_max-inline-size`</td><td>`20rem`</td><td>Maximum inline size before content wraps. The tooltip is as wide as its text (`max-content`) up to this value</td></tr>
 </tbody>
 </table>
 

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -17,12 +17,16 @@
     display: block;
     position: absolute;
     z-index: var(--bds-z-index_popover);
-    padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_xs));
-    border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+    padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s));
+    border-radius: var(--tooltip_radius, var(--bds-border_radius--xs));
     background-color: var(--tooltip_bg, var(--bds-color_on-bg));
     color: var(--tooltip_text, var(--bds-color_bg));
     font-size: var(--tooltip_font-size, var(--bds-font_size--body--s));
     line-height: var(--bds-font_line-height--body);
+
+    /* Size to the text, not to the (possibly narrow) trigger wrapper the
+       tooltip is absolutely positioned in; wrap only at the max width. */
+    inline-size: max-content;
     max-inline-size: var(--tooltip_max-inline-size, 20rem);
     white-space: normal;
     pointer-events: none;

package/src/components/ui/Tooltip/Tooltip.spec.tsx

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { Tooltip } from './Tooltip';
 
 describe('Tooltip', () => {
@@ -99,4 +101,12 @@ describe('Tooltip', () => {
     await user.unhover(tooltip);
     expect(tooltip).not.toBeVisible();
   });
+
+  it('sizes the tooltip to its text and uses the xs radius hook default', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/ui/Tooltip/Tooltip.module.css'), 'utf8');
+    expect(css).toMatch(/inline-size:\s*max-content;/);
+    expect(css).toMatch(/max-inline-size:\s*var\(--tooltip_max-inline-size,\s*20rem\);/);
+    expect(css).toContain('var(--tooltip_radius, var(--bds-border_radius--xs))');
+    expect(css).toContain('var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s))');
+  });
 });

package/src/components/ui/Tooltip/Tooltip.stories.tsx

@@ -56,6 +56,19 @@ export const Right: Story = {
   ),
 };
 
+export const LongText: Story = {
+  args: {
+    content:
+      'Longer explanation that wraps onto a second line once it reaches the maximum width of the tooltip.',
+    placement: 'bottom',
+  },
+  render: args => (
+    <Tooltip {...args}>
+      <Button>Long tooltip</Button>
+    </Tooltip>
+  ),
+};
+
 export const AllPlacements: Story = {
   render: () => (
     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '3rem' }}>

package/src/css/bdc.css

@@ -9,6 +9,8 @@
  *  --bdc-outline_*     — tokens that directly map to CSS outline sub-properties
  *
  * @property declarations must be top-level (not inside @layer).
+ * The :root defaults live in boostdev.tokens.semantic so a consumer can override them in
+ * boostdev.tokens.override. --bdc-outline_width inherits so a :root value reaches components.
  * --bdc_color uses inherits: false so each element owns its own colour instance,
  * enabling per-element transition: --bdc_color for focus/error state animations.
  * ─────────────────────────────────────────────────────────────────────────────── */
@@ -22,7 +24,7 @@
 
 @property --bdc-outline_width {
   syntax: '<length>';
-  inherits: false;
+  inherits: true;
   initial-value: 1px;
 }
 
@@ -46,7 +48,7 @@
   initial-value: 0 0 0 0 transparent;
 }
 
-@layer boostdev.component {
+@layer boostdev.tokens.semantic {
   :root {
     /* border: none by default — outline provides the visual edge */
     --bdc-outline_border: none;
@@ -66,6 +68,7 @@
 
     /* Outline geometry */
     --bdc-outline_width:  1px;
+    --bdc-outline_width--error: 2px;
     --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
     --bdc-outline_radius: var(--bds-border_radius--xs);
     --bdc-outline_radius--l: 1.5em;

package/src/css/bdc.spec.ts

@@ -0,0 +1,65 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const read = (path: string): string => readFileSync(resolve(__dirname, path), 'utf8');
+
+const sources = {
+  'bdc.css': read('./bdc.css'),
+  'globals.ts': read('../web-components/globals.ts'),
+} as const;
+
+/** Returns the text between the braces of `@layer boostdev.tokens.semantic { ... }`. */
+const semanticLayerBody = (source: string): string | undefined => {
+  const start = source.indexOf('@layer boostdev.tokens.semantic');
+  if (start === -1) return undefined;
+  const open = source.indexOf('{', start);
+  const body = [...source.slice(open)].reduce<{ depth: number; end: number }>(
+    (acc, ch, i) => {
+      if (acc.end !== -1) return acc;
+      const depth = acc.depth + (ch === '{' ? 1 : ch === '}' ? -1 : 0);
+      return { depth, end: depth === 0 ? i : -1 };
+    },
+    { depth: 0, end: -1 },
+  );
+  return source.slice(open + 1, open + body.end);
+};
+
+const rootDeclarations = (source: string): string[] =>
+  [...(semanticLayerBody(source) ?? '').matchAll(/^\s*(--[\w-]+)\s*:/gm)].map((m) => m[1] ?? '');
+
+describe.each(Object.entries(sources))('%s', (_name, source) => {
+  it('puts the :root defaults in boostdev.tokens.semantic', () => {
+    const body = semanticLayerBody(source);
+    expect(body).toBeDefined();
+    expect(body).toContain(':root');
+    expect(body).toContain('--bdc-color_active:');
+    expect(body).toContain('--bdc_color--error:');
+  });
+
+  it('does not put the :root defaults in boostdev.component', () => {
+    expect(source).not.toContain('@layer boostdev.component');
+  });
+
+  it('registers --bdc-outline_width as inheriting', () => {
+    expect(source).toMatch(/@property --bdc-outline_width\s*\{[^}]*inherits:\s*true/);
+  });
+
+  it('keeps the per-element tokens non-inheriting', () => {
+    ['--bdc_color', '--bdc-outline_offset', '--bdc-outline_radius', '--bdc-outline_shadow'].forEach((token) => {
+      expect(source).toMatch(new RegExp(`@property ${token}\\s*\\{[^}]*inherits:\\s*false`));
+    });
+  });
+
+  it('declares the error outline width', () => {
+    expect(source).toContain('--bdc-outline_width--error: 2px;');
+  });
+});
+
+describe('bdc.css and globals.ts', () => {
+  it('declare the same set of :root custom properties', () => {
+    expect([...rootDeclarations(sources['globals.ts'])].sort()).toEqual(
+      [...rootDeclarations(sources['bdc.css'])].sort(),
+    );
+  });
+});

package/src/stories/DesignSystem/Borders.mdx

@@ -123,23 +123,31 @@ See `src/components/ui/Accordion/Accordion.module.css` for a shipped example of
 
 ## Consumer overrides
 
-Override a component's border colour for a specific context by reassigning `--bdc_color`:
+The `:root` defaults of the `bdc` tokens (`--bdc_color--focus`, `--bdc_color--error`, `--bdc-color_active*`, `--bdc-color_on-active*`, `--bdc-outline_width`, `--bdc-outline_width--error`, `--bds-outline_default`, `--bds-outline_offset`) live in `@layer boostdev.tokens.semantic`, so they can be set in `@layer boostdev.tokens.override`:
 
 ```css
-/* Scoped to a single component instance */
-.my-context .my-input {
-  --bdc_color: var(--bds-color_warning);
-}
-
-/* Override globally via the token layer */
 @layer boostdev.tokens.override {
   :root {
-    --bdc_color: var(--bds-color_green);
+    --bdc-color_active: var(--bds-color_green);
+    --bdc_color--focus: var(--bds-color_green);
+    --bdc-outline_width: 2px;
   }
 }
 ```
 
-To change width or radius independently:
+The `bdc` defaults now share the `boostdev.tokens.semantic` layer with the foundation, so load the component stylesheet after the foundation stylesheet for the solid focus ring to win (the documented import order already does this). `--bdc-outline_radius` is registered with `inherits: false` and set by each component itself, so it cannot be set on `:root`.
+
+`--bdc-outline_width` is registered with `inherits: true`, so a value on `:root` or on a wrapper reaches the components inside it.
+
+`--bdc_color` is per element by design (`inherits: false`): every component owns its own instance so its state colour can transition. Do not set it on `:root`; that has no effect. Change a component's rest border colour through the component's own hook instead:
+
+```css
+.my-menu {
+  --dropdown_border-color: var(--bds-color_warning);
+}
+```
+
+To change width or radius for one element:
 
 ```css
 .my-card {

package/src/web-components/globals.ts

@@ -14,7 +14,7 @@ const bdcCss = `
 
   @property --bdc-outline_width {
     syntax: '<length>';
-    inherits: false;
+    inherits: true;
     initial-value: 1px;
   }
 
@@ -36,7 +36,7 @@ const bdcCss = `
     initial-value: 0 0 0 0 transparent;
   }
 
-  @layer boostdev.component {
+  @layer boostdev.tokens.semantic {
     :root {
       --bdc-outline_border: none;
 
@@ -47,14 +47,20 @@ const bdcCss = `
       /* Active / selected state colours — override these to theme all filled form controls globally */
       --bdc-color_active:          var(--bds-color_interactive);
       --bdc-color_on-active:       var(--bds-color_on-interactive);
-      --bdc-color_active--subtle:  var(--bds-color_blue--subtle);
-      --bdc-color_active--strong:  var(--bds-color_interactive_on-bg);
+      --bdc-color_active--subtle:    var(--bds-color_blue--subtle);
+      --bdc-color_on-active--subtle: var(--bds-color_on-blue--subtle);
+      --bdc-color_active--strong:    var(--bds-color_interactive_on-bg);
+      --bdc-color_on-active--strong: var(--bds-color_on-blue--strong);
 
       --bdc-outline_width:  1px;
+      --bdc-outline_width--error: 2px;
       --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
       --bdc-outline_radius: var(--bds-border_radius--xs);
       --bdc-outline_radius--l: 1.5em;
       --bdc-outline_shadow: 0 0 0 0 transparent;
+
+      --bds-outline_default: 2px solid var(--bds-color_interactive);
+      --bds-outline_offset:  2px;
     }
   }
 `;

package/src/web-components/index.ts

@@ -77,3 +77,4 @@ export { BdsCalendar } from './ui/bds-calendar';
 export { BdsCalendarRange } from './ui/bds-calendar-range';
 export { BdsDropdownMenu } from './interaction/bds-dropdown-menu';
 export { BdsDropdownMenuItem } from './interaction/bds-dropdown-menu-item';
+export { BdsDropdownMenuGroup } from './interaction/bds-dropdown-menu-group';

package/src/web-components/interaction/BdsAccordion.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsAccordion.stories';
 
 Framework-agnostic Accordion custom element. Coordinates open/closed state across `<bds-accordion-item>` children; by default only one item is open at a time.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/BdsAccordion.stories.tsx

@@ -61,7 +61,7 @@ function BdsAccordionStory({
 const meta = {
   title: 'Web Components/UI/Accordion',
   component: BdsAccordionStory,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'padded' },
   argTypes: {
     allowMultiple: { control: 'boolean' },

package/src/web-components/interaction/BdsButton.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsButton.stories';
 
 Framework-agnostic button custom element. Renders as `<button>` or `<a>` depending on whether `href` is set. Matches the React `Button` component in variants, sizes, and theming.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/BdsButton.stories.tsx

@@ -101,7 +101,7 @@ type BdsButtonStoryArgs = Omit<BdsButtonProps, 'iconStart' | 'iconEnd'> & {
 const meta: Meta<BdsButtonStoryArgs> = {
   title: 'Web Components/Interaction/Button',
   component: BdsButton,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     variant: {

package/src/web-components/interaction/BdsCollapsible.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsCollapsible.stories';
 
 Framework-agnostic Collapsible custom element. Wraps a native `<details>`/`<summary>` pair for built-in toggle behaviour with design-system styling and a `bds-toggle` event.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/BdsCollapsible.stories.tsx

@@ -25,7 +25,7 @@ function BdsCollapsible({
 const meta = {
   title: 'Web Components/UI/Collapsible',
   component: BdsCollapsible,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'padded' },
   argTypes: {
     open: { control: 'boolean' },

package/src/web-components/interaction/BdsDialog.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsDialog.stories';
 
 Framework-agnostic Dialog custom element. Wraps a native `<dialog>` element with `showModal()` / `close()` lifecycle, backdrop-click to dismiss, Escape key handling, Tab focus trapping, and the Invoker Commands API (custom commands).
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/BdsDialog.stories.tsx

@@ -53,7 +53,7 @@ function BdsDialog({
 const meta = {
   title: 'Web Components/Interaction/Dialog',
   component: BdsDialog,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     triggerLabel: { control: 'text' },

package/src/web-components/interaction/BdsDrawer.mdx

@@ -7,7 +7,7 @@ import * as Stories from './BdsDrawer.stories';
 
 Framework-agnostic Drawer (slide-in panel) custom element. Same modal infrastructure as `<bds-dialog>` but positioned as a side panel that slides in from either side of the viewport.
 
-> **Status: experimental** — API may change before stable release.
+> **Status: alpha** — API may change before stable release.
 
 ## Installation
 

package/src/web-components/interaction/BdsDrawer.stories.tsx

@@ -54,7 +54,7 @@ function BdsDrawer({
 const meta = {
   title: 'Web Components/Interaction/Drawer',
   component: BdsDrawer,
-  tags: ['!stable', 'experimental'],
+  tags: ['!stable', 'alpha'],
   parameters: { layout: 'centered' },
   argTypes: {
     side: { control: 'select', options: ['left', 'right'] },