@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -52,6 +52,23 @@ Or in HTML without a bundler:
 
 <ArgTypes of={Stories} />
 
+## CSS Custom Properties — `<bds-dropdown-menu>`
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--dropdown_border` | `none` | Real CSS `border` on the panel (in addition to the bdc inset outline) |
+| `--dropdown_radius` | `--bdc-outline_radius` (`--bds-border_radius--s`) | Panel corner radius |
+| `--dropdown_color` | `--bds-color_bg` | Panel background colour |
+| `--dropdown_on-color` | `--bds-color_on-bg` | Panel text colour |
+| `--dropdown_shadow` | `--bds-shadow_m` | Panel elevation shadow, layered behind the inset border |
+
+## CSS Custom Properties — `<bds-dropdown-menu-item>`
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--dropdown_item-bg--hover` | `--bds-color_bg--subtle` | Item background colour on hover |
+| `--dropdown_item-color--hover` | `--bds-color_interactive_on-bg` | Item text colour on hover |
+
 ## Attributes — `<bds-dropdown-menu>`
 
 | Attribute | Type | Default | Description |
@@ -101,8 +118,10 @@ Or in HTML without a bundler:
 
 ## Accessibility
 
+- The slotted trigger receives `aria-haspopup="menu"`, `aria-controls` (pointing at the panel's id), and `aria-expanded` kept in sync with open/close state
 - The menu panel has `role="menu"` and `aria-hidden` toggled on open/close
 - Each item renders a `<button role="menuitem">`
-- Keyboard navigation: ArrowDown / ArrowUp moves between enabled items; Escape closes and returns focus to the trigger; Tab closes the menu
+- Keyboard navigation: ArrowDown / ArrowUp moves between enabled items; Home / End jump to the first / last enabled item; Escape closes and returns focus to the trigger; Tab closes the menu
 - Disabled items are excluded from keyboard navigation
 - Focus returns to the trigger element on close
+- The panel is an absolutely-positioned shadow-DOM element (not the native Popover API), so it can be clipped by an ancestor's `overflow` or stacking context

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

@@ -45,12 +45,13 @@ import '@boostdev/design-system-components/web-components';
 |-----------|------|---------|-------------|
 | `placement` | `"bottom" \| "top" \| "left" \| "right"` | `"bottom"` | Preferred panel position relative to the trigger |
 | `open` | boolean | `false` | Controls panel visibility; reflects on the element |
+| `aria-label` | string | — | Accessible name for the panel. When set, the panel gets `role="region"` and this label; when omitted, neither is rendered |
 
 ## Slots
 
 | Slot | Description |
 |------|-------------|
-| `trigger` | Element that opens and closes the panel on click |
+| `trigger` | Element that opens and closes the panel on click. Automatically receives `aria-haspopup="true"`, `aria-controls` (pointing at the panel) and `aria-expanded` synced to the open state |
 | `(default)` | Panel content |
 
 ## Events
@@ -65,6 +66,7 @@ import '@boostdev/design-system-components/web-components';
 - Clicking the trigger toggles the panel open/closed
 - Pressing `Escape` closes an open panel
 - Clicking outside the element closes the panel
+- The panel is `position: fixed`, so it escapes `overflow: hidden`/`scroll` ancestors and stacking contexts instead of being clipped
 - CSS Anchor Positioning automatically tries fallback placements (`@position-try`) when the preferred placement would overflow the viewport
 - Each instance gets a unique CSS anchor name — multiple popovers on the same page don't interfere
 
@@ -114,7 +116,9 @@ popover.addEventListener('bds-close', () => console.log('closed'));
 
 ## Accessibility
 
-- The panel has `role="region"` and `aria-label="Popover"`
-- The trigger element retains its own role (e.g. `<button>`) — no ARIA is added by the component
+- The trigger element automatically receives `aria-haspopup="true"`, `aria-controls` (referencing the panel) and `aria-expanded` — kept in sync as the panel opens and closes
+- The panel gets `role="region"` and the given label only when you set `aria-label` on `<bds-popover>` — omit it if the trigger's own accessible name already describes the panel content, to avoid a meaningless landmark announcement
+- The trigger element otherwise retains its own role (e.g. `<button>`) — no other ARIA is added by the component
 - For menus, use a `<nav>` or `role="menu"` inside the default slot as appropriate
+- When the panel closes (`Escape` or an outside click) while focus was inside the popover, focus returns to the trigger; an outside click that moves focus elsewhere is left alone
 - The component does not trap focus — use `<bds-dialog>` for modal, focus-trapped overlays

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

@@ -57,6 +57,18 @@ Or in HTML without a bundler:
 |------|-------------|
 | `(default)` | Link text; defaults to `"Skip to main content"` when no content is provided |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--skip-link_inset` | Distance from the block-start/inline-start edge when focused (default: `var(--bds-space_s)`) |
+| `--skip-link_z-index` | Stacking order so the link rises above sticky headers/nav (default: `var(--bds-z-index_xl)`) |
+| `--skip-link_padding` | Padding of the link surface (default: `var(--bds-space_xs) var(--bds-space_m)`) |
+| `--skip-link_font-size` | Font size of the link text (default: `var(--bds-font_size--body)`) |
+| `--skip-link_radius` | Corner radius (default: `var(--bds-border_radius--s)`) |
+| `--skip-link_border` | Border around the link surface (default: `none`) |
+| `--skip-link_shadow` | Extra shadow appended after the bdc focus-border box-shadow (default: `var(--bdc-outline_shadow)`) |
+
 ## Usage in plain HTML
 
 Place `<bds-skip-link>` as the very first element inside `<body>`:
@@ -86,5 +98,6 @@ With custom label text:
 - Visually hidden via `transform: translateY(...)` until focused — avoids `display: none` and `visibility: hidden` which remove the element from the accessibility tree
 - Becomes visible on `:focus-visible`, ensuring it is discoverable by keyboard and switch-access users
 - Uses an `<a>` element so it is announced as a link by screen readers
-- `z-index: 9999` ensures it appears above all other content when focused
+- `z-index: var(--skip-link_z-index, var(--bds-z-index_xl))` ensures it rises above sticky headers/navigation when focused
 - Satisfies WCAG 2.4.1 Bypass Blocks (Level A)
+- The slide-in transition respects `prefers-reduced-motion: reduce`

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

@@ -86,6 +86,22 @@ Or in HTML without a bundler:
 |-------|----------|---------|-------------|
 | `bds-tab-select` | `<bds-tab>` | Yes | Fired when a tab is clicked; handled internally by `<bds-tabs>` |
 
+## CSS Custom Properties
+
+Resting and state colours are layered overrides: a top-level override (e.g.
+`--tab_color`) always wins over the selected/hover default for that state
+(e.g. `--tab_color--active`), which falls back to the design token. Set
+`--tab_color` on `<bds-tab>` (or an ancestor) to theme the resting colour
+across every state; set `--tab_color--active` to theme only the selected tab.
+
+| Property | Description |
+|----------|-------------|
+| `--tab_color` | Tab text colour override (all states) |
+| `--tab_border-color` | Tab bottom-border colour override (all states) |
+| `--tab_color--active` | Text colour override for the selected tab |
+| `--tab_border-color--active` | Bottom-border colour override for the selected tab |
+| `--tab_color--hover` | Text colour override on hover (unselected, enabled tabs) |
+
 ## Usage in plain HTML
 
 Tabs and panels are matched by DOM order (first tab → first panel, etc.):
@@ -112,6 +128,7 @@ Tabs and panels are matched by DOM order (first tab → first panel, etc.):
 
 - The tab list container has `role="tablist"`
 - Each `<bds-tab>` renders a `<button role="tab">` with `aria-selected` and the correct `tabindex` (0 for active, -1 for others)
+- `<bds-tabs>` also assigns `role="tab"`, a generated `id`, and `aria-controls` (pointing at the matching panel's `id`) on each `<bds-tab>` **host** element — and `role="tabpanel"`, a generated `id`, and `aria-labelledby` (pointing back at the tab's `id`) on each `<bds-tab-panel>` **host** element. These live on the light-DOM host elements (not inside either element's shadow root) so the `id` references resolve correctly across the shared light-DOM tree. A consumer-supplied `id` on `<bds-tab>` / `<bds-tab-panel>` is preserved rather than overwritten.
 - Each `<bds-tab-panel>` receives `hidden` when not active
-- Keyboard navigation: ArrowRight / ArrowLeft cycles through enabled tabs; Home / End jumps to first / last enabled tab
+- Keyboard navigation: ArrowRight / ArrowLeft cycles through enabled tabs; Home / End jumps to first / last enabled tab. The listener only reacts to keys that originate from a `<bds-tab>` — typing inside tab-panel content (an `<input>`, slider, etc.) never hijacks focus or switches the active tab.
 - Disabled tabs are excluded from keyboard navigation

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

@@ -89,6 +89,24 @@ document.dispatchEvent(new CustomEvent('bds-show-toast', {
 
 ## Accessibility
 
-- Each toast renders with `role="status"` + `aria-live="polite"` by default so screen readers announce it without interrupting the user
-- `error` toasts use `role="alert"` + `aria-live="assertive"` for immediate announcement
-- The dismiss button has an accessible label
+- Every toast (all variants, including `error`) renders with `role="status"` + `aria-live="polite"` so screen readers announce it without interrupting the user — this matches the `ToastProvider` React component
+- The dismiss button has an accessible label and a >=44×44px hit area (the visible icon stays 16px; the click target is expanded with a transparent `::after` pseudo-element)
+
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--toast_color` | _(unset)_ | Public override for the toast background colour — wins over the per-variant default on every variant |
+| `--toast_on-color` | _(unset)_ | Public override for the toast text colour — wins over the per-variant default on every variant |
+| `--toast_radius` | `--bds-border_radius--s` | Toast corner radius |
+| `--toast_shadow` | `--bds-shadow_s` | Toast elevation shadow |
+| `--toast_color--success` | `--bds-color_success` | Background colour for `success` toasts |
+| `--toast_on-color--success` | `--bds-color_on-success` | Text colour for `success` toasts |
+| `--toast_color--warning` | `--bds-color_warning` | Background colour for `warning` toasts |
+| `--toast_on-color--warning` | `--bds-color_on-warning` | Text colour for `warning` toasts |
+| `--toast_color--info` | `--bds-color_bg--subtle` | Background colour for `info` toasts |
+| `--toast_on-color--info` | `--bds-color_on-bg--subtle` | Text colour for `info` toasts |
+| `--toast_color--error` | `--bds-color_error` | Background colour for `error` toasts |
+| `--toast_on-color--error` | `--bds-color_on-error` | Text colour for `error` toasts |
+
+Setting `--toast_color`/`--toast_on-color` on `<bds-toast-provider>` (or an ancestor) overrides every variant at once; the `--toast_color--<variant>`/`--toast_on-color--<variant>` tokens only change that one variant's default.

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

@@ -96,9 +96,9 @@ Or in HTML without a bundler:
 
 ## Accessibility
 
-- The tooltip panel has `role="tooltip"`
-- Visibility is controlled by `:hover` and `:focus-within` — no JavaScript required
-- The tooltip is rendered adjacent to the trigger inside the same shadow root, so screen readers can read it via proximity
-- Note: `aria-describedby` cannot cross shadow DOM boundaries; if your project requires explicit ARIA association, use `<bds-popover>` instead
+- `content` is programmatically associated with the slotted trigger: the element appends a visually-hidden light-DOM `<span>` holding the tooltip text and sets `aria-describedby` on every slotted (non-hidden) child to point at it. This keeps the id reference inside the light DOM's tree scope, so it resolves correctly — `aria-describedby` cannot reference an id that lives inside this element's shadow root, since id references only resolve within the same tree scope.
+- The association is re-computed whenever `content` changes or the default slot's assigned nodes change (`slotchange`), and existing `aria-describedby` values set by the consumer on the trigger are preserved (the tooltip's id is appended, not overwritten).
+- The description is available to assistive technology at all times, independent of hover/focus — it does not depend on the visual tooltip being shown.
+- The visible tooltip bubble (`role="tooltip"`) is `aria-hidden="true"`; it is purely the visual presentation shown on `:hover`/`:focus-within` and is not itself the accessible description.
 - `pointer-events: none` on the tooltip prevents it from interfering with mouse events
 - Fade transition respects `prefers-reduced-motion`

package/src/web-components/interaction/bds-accordion-item.ts

@@ -27,6 +27,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsAccordionItem extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
       border-block-end: 1px solid var(--bds-color_bg--subtle);

package/src/web-components/interaction/bds-accordion.spec.ts

@@ -70,4 +70,45 @@ describe('bds-accordion', () => {
     expect(items[0].open).toBe(false);
     cleanup(el);
   });
+
+  it('does not let a nested accordion double-handle its own items (and vice versa)', async () => {
+    const el = await fixture(`
+      <bds-accordion id="outer">
+        <bds-accordion-item id="a">
+          <span slot="header">Outer Q1</span>
+          <bds-accordion id="inner">
+            <bds-accordion-item id="b"><span slot="header">Inner Q1</span><p>B</p></bds-accordion-item>
+            <bds-accordion-item id="c"><span slot="header">Inner Q2</span><p>C</p></bds-accordion-item>
+          </bds-accordion>
+        </bds-accordion-item>
+        <bds-accordion-item id="d"><span slot="header">Outer Q2</span><p>D</p></bds-accordion-item>
+      </bds-accordion>
+    `);
+    const a = el.querySelector<BdsAccordionItem>('#a')!;
+    const b = el.querySelector<BdsAccordionItem>('#b')!;
+    const c = el.querySelector<BdsAccordionItem>('#c')!;
+    const d = el.querySelector<BdsAccordionItem>('#d')!;
+
+    // Open outer item A first (exclusive mode).
+    a.dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(a.open).toBe(true);
+
+    // Toggle inner item B. Without ownership scoping, the bubbled event
+    // would also be re-processed by the outer accordion, which would
+    // erroneously close item A and immediately re-close item B.
+    b.dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(b.open).toBe(true);
+    expect(c.open).toBe(false);
+    expect(a.open).toBe(true);
+    expect(d.open).toBe(false);
+
+    // Toggling outer item D must not disturb the inner accordion's state.
+    d.dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(d.open).toBe(true);
+    expect(a.open).toBe(false);
+    expect(b.open).toBe(true);
+    expect(c.open).toBe(false);
+
+    cleanup(el);
+  });
 });

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

@@ -24,13 +24,24 @@ import type { BdsAccordionItem } from './bds-accordion-item';
  */
 export class BdsAccordion extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
       border: var(--accordion_border, none);
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+        var(--accordion_shadow, var(--bdc-outline_shadow));
       overflow: hidden;
     }
   `;
@@ -63,7 +74,11 @@ export class BdsAccordion extends LitElement {
   }
 
   private get _items(): BdsAccordionItem[] {
-    return [...this.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Only items owned by *this* accordion — excludes items that belong to a
+    // nested <bds-accordion> rendered inside one of our items' content.
+    return [...this.querySelectorAll<BdsAccordionItem>('bds-accordion-item')].filter(
+      item => item.closest('bds-accordion') === this,
+    );
   }
 
   private _discoverItems() {
@@ -74,6 +89,17 @@ export class BdsAccordion extends LitElement {
 
   private _handleItemToggle = (e: Event) => {
     const toggled = e.target as BdsAccordionItem;
+
+    // A nested <bds-accordion> is the closest owner of its own items' toggle
+    // events. If this element isn't that closest owner, the event belongs to
+    // a descendant accordion — ignore it and let that accordion's own
+    // listener (which fires first, being closer in the tree) handle it.
+    if (toggled.closest('bds-accordion') !== this) return;
+
+    // Handled by the rightful owner: stop it from also reaching any
+    // ancestor <bds-accordion> further up the tree.
+    e.stopPropagation();
+
     const items = this._items;
     const wasOpen = toggled.open;
 

package/src/web-components/interaction/bds-button.spec.ts

@@ -127,4 +127,85 @@ describe('bds-button', () => {
     expect(btn!.getAttribute('aria-label')).toBe('Close');
     cleanup(el);
   });
+
+  describe('slotted icon styling (icons live in light DOM)', () => {
+    it('colours slotted icon-start/icon-end svgs via ::slotted(), not a dead shadow-tree "svg" descendant selector', () => {
+      const cssText = BdsButton.styles.cssText;
+      expect(cssText).toMatch(/\.icon-start ::slotted\(svg\),\s*\.icon-end ::slotted\(svg\)\s*{[^}]*fill:\s*currentcolor/);
+      // The old selector could never match slotted content — guard against regressing to it.
+      expect(cssText).not.toMatch(/\.button svg\s*{/);
+    });
+
+    it('uses ::slotted() for the hover fadeZoom animation on slotted icons', () => {
+      const cssText = BdsButton.styles.cssText;
+      expect(cssText).toMatch(
+        /\.button:hover \.icon-start ::slotted\(svg\),\s*\.button:hover \.icon-end ::slotted\(svg\)\s*{\s*animation:\s*fadeZoom/,
+      );
+    });
+  });
+
+  describe('prefers-reduced-motion', () => {
+    it('disables the pulse ring and hover icon animation under prefers-reduced-motion: reduce', () => {
+      const cssText = BdsButton.styles.cssText;
+      expect(cssText).toMatch(
+        /@media \(prefers-reduced-motion: reduce\)\s*{\s*\.button\.has-pulse,\s*\.button:hover \.icon-start ::slotted\(svg\),\s*\.button:hover \.icon-end ::slotted\(svg\)\s*{\s*animation:\s*none;/,
+      );
+    });
+  });
+
+  describe('form participation (type="submit"/"reset" via ElementInternals)', () => {
+    it('is form-associated', () => {
+      expect(BdsButton.formAssociated).toBe(true);
+    });
+
+    it('calls the associated form\'s requestSubmit() when a type="submit" button is clicked', async () => {
+      const requestSubmit = vi.fn();
+      const spy = vi
+        .spyOn(HTMLElement.prototype, 'attachInternals')
+        .mockReturnValue({ form: { requestSubmit, reset: vi.fn() } } as unknown as ElementInternals);
+
+      const el = await fixture('<bds-button type="submit">Save</bds-button>');
+      const btn = el.shadowRoot!.querySelector('button')!;
+      btn.click();
+
+      expect(requestSubmit).toHaveBeenCalledTimes(1);
+
+      spy.mockRestore();
+      cleanup(el);
+    });
+
+    it('calls the associated form\'s reset() when a type="reset" button is clicked', async () => {
+      const reset = vi.fn();
+      const spy = vi
+        .spyOn(HTMLElement.prototype, 'attachInternals')
+        .mockReturnValue({ form: { requestSubmit: vi.fn(), reset } } as unknown as ElementInternals);
+
+      const el = await fixture('<bds-button type="reset">Clear</bds-button>');
+      const btn = el.shadowRoot!.querySelector('button')!;
+      btn.click();
+
+      expect(reset).toHaveBeenCalledTimes(1);
+
+      spy.mockRestore();
+      cleanup(el);
+    });
+
+    it('does not call requestSubmit or reset for the default type="button"', async () => {
+      const requestSubmit = vi.fn();
+      const reset = vi.fn();
+      const spy = vi
+        .spyOn(HTMLElement.prototype, 'attachInternals')
+        .mockReturnValue({ form: { requestSubmit, reset } } as unknown as ElementInternals);
+
+      const el = await fixture('<bds-button>Click</bds-button>');
+      const btn = el.shadowRoot!.querySelector('button')!;
+      btn.click();
+
+      expect(requestSubmit).not.toHaveBeenCalled();
+      expect(reset).not.toHaveBeenCalled();
+
+      spy.mockRestore();
+      cleanup(el);
+    });
+  });
 });

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

@@ -13,10 +13,15 @@ export type ButtonSize = 'small' | 'medium' | 'large';
  *   href      — renders an <a> tag instead of <button>
  *   target    — forwarded to <a> when href is set
  *   rel       — forwarded to <a> when href is set
- *   has-pulse — boolean, enables the pulse ring animation
- *   is-icon-only — boolean, forces a 1:1 aspect ratio with minimal xs padding (requires aria-label)
+ *   has-pulse — boolean, enables the pulse ring animation (respects prefers-reduced-motion)
+ *   is-icon-only — boolean, forces a 1:1 aspect ratio with minimal xxs padding (requires aria-label)
  *   type      — "button" (default) | "submit" | "reset"
  *
+ * Form participation: form-associated via the Form-Associated Custom Elements
+ * API (ElementInternals). When nested inside a light-DOM <form>, type="submit"
+ * calls the form's requestSubmit() and type="reset" calls its reset() — the
+ * inner shadow-DOM <button> has no native form of its own to act on.
+ *
  * Slots:
  *   (default)    — button label
  *   icon-start   — icon placed before the label
@@ -32,7 +37,19 @@ export type ButtonSize = 'small' | 'medium' | 'large';
  * </bds-button>
  */
 export class BdsButton extends LitElement {
+  static formAssociated = true;
+
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     @keyframes fadeZoom {
       0%, 100% { opacity: 1; transform: scale(1); }
       50%       { opacity: 0.75; transform: scale(1.15); }
@@ -60,10 +77,11 @@ export class BdsButton extends LitElement {
       align-items: center;
       cursor: pointer;
       justify-content: center;
-      height: var(--button_height, 3em);
+      block-size: var(--button_height, 3em);
       font-size: var(--button_font-size, inherit);
       white-space: nowrap;
       line-height: 1;
+      scroll-padding-block-end: var(--bds-space_l);
 
       /* Identity tokens — override --button_color + --button_on-color to re-theme */
       --button_color:        var(--bds-color_interactive);
@@ -120,7 +138,7 @@ export class BdsButton extends LitElement {
       animation: pulse 3s infinite;
     }
 
-    /* Icon-only: square (1:1), equal xs padding on both axes — composes with
+    /* Icon-only: square (1:1), equal xxs padding on both axes — composes with
        any variant/size. box-sizing: border-box keeps the outer box at
        --button_height; without it, all: unset reverts to content-box and
        padding-block would stretch the button past its declared height.
@@ -129,7 +147,7 @@ export class BdsButton extends LitElement {
     .button.is-icon-only {
       aspect-ratio: 1;
       box-sizing: border-box;
-      padding: var(--bds-space_xs);
+      padding: var(--bds-space_xxs);
     }
 
     :host([is-icon-only]) ::slotted(*) {
@@ -137,8 +155,11 @@ export class BdsButton extends LitElement {
       block-size: 100%;
     }
 
-    /* SVG icon colour */
-    .button svg {
+    /* SVG icon colour — icons are slotted (light DOM), so a shadow-tree
+       descendant selector like ".button svg" can never match them; ::slotted()
+       is required to reach content projected through a <slot>. */
+    .icon-start ::slotted(svg),
+    .icon-end ::slotted(svg) {
       --icon__stroke: currentcolor;
       fill: currentcolor;
       color: currentcolor;
@@ -170,19 +191,19 @@ export class BdsButton extends LitElement {
       margin-inline: 0;
     }
 
-    /* Hover icon animation */
+    /* Hover icon animation — same ::slotted() requirement as the colour rule above */
     @media (hover: hover) and (pointer: fine) {
-      .button:hover .icon-start svg,
-      .button:hover .icon-end svg {
+      .button:hover .icon-start ::slotted(svg),
+      .button:hover .icon-end ::slotted(svg) {
         animation: fadeZoom 2s ease-out infinite;
       }
 
       /* Default hover */
       .button.default:hover {
         --button_bg--variant:     var(--button_bg--hover, var(--bds-color_bg));
-        --button_text--variant:   var(--button_text--hover, var(--bds-color_interactive));
+        --button_text--variant:   var(--button_text--hover, var(--bds-color_interactive_on-bg));
         --button_border--variant: var(--button_border--hover, currentcolor);
-        --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive));
+        --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
       }
 
       /* Outline hover */
@@ -194,11 +215,20 @@ export class BdsButton extends LitElement {
       }
     }
 
+    /* Reduced motion — the pulse ring and hover icon animation both loop
+       indefinitely; disable them for users who opt out of motion. */
+    @media (prefers-reduced-motion: reduce) {
+      .button.has-pulse,
+      .button:hover .icon-start ::slotted(svg),
+      .button:hover .icon-end ::slotted(svg) {
+        animation: none;
+      }
+    }
+
     /* Focus visible */
     .button:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: var(--bds-border_radius--s);
     }
 
     /* Disabled */
@@ -241,8 +271,11 @@ export class BdsButton extends LitElement {
   declare private _iconStartFilled: boolean;
   declare private _iconEndFilled: boolean;
 
+  private _internals!: ElementInternals;
+
   constructor() {
     super();
+    this._internals = this.attachInternals();
     this.variant = 'default';
     this.size = 'medium';
     this.disabled = false;
@@ -274,6 +307,19 @@ export class BdsButton extends LitElement {
     }
   }
 
+  // The shadow-DOM <button> below has no native <form> ancestor of its own
+  // (the light-DOM form, if any, lives outside the shadow tree), so its
+  // type="submit"/"reset" attribute is inert on its own. Drive the real
+  // behaviour through ElementInternals, which resolves the form this
+  // *custom element* participates in.
+  private _handleButtonClick() {
+    if (this.type === 'submit') {
+      this._internals.form?.requestSubmit();
+    } else if (this.type === 'reset') {
+      this._internals.form?.reset();
+    }
+  }
+
   private _iconSlot(position: 'start' | 'end') {
     const filled = position === 'start' ? this._iconStartFilled : this._iconEndFilled;
     return html`
@@ -309,6 +355,7 @@ export class BdsButton extends LitElement {
         type=${this.type}
         ?disabled=${this.disabled}
         aria-label=${this.ariaLabel ?? nothing}
+        @click=${this._handleButtonClick}
       >
         ${this._iconSlot('start')}
         <slot></slot>