@boostdev/design-system-components 1.1.1 → 1.2.0

package/src/components/interaction/Button/Button.module.css

@@ -13,17 +13,17 @@
 @keyframes pulse {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 50%);
   }
 
   70% {
     transform: scale(1.01);
-    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
+    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
   }
 
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
   }
 }
 
@@ -47,27 +47,27 @@
     line-height: 1;
 
     /* Colour model: override --button_color + --button_on-color to re-theme */
-    --button_color:        var(--bds-color_green);
-    --button_on-color:     var(--bds-color_on-green);
+    --button_color:        var(--bds-color_interactive);
+    --button_on-color:     var(--bds-color_on-interactive);
 
     /* Text-safe variant of --button_color for use on page background (ghost text/border) */
-    --button_color--on-bg: var(--bds-color_green--strong);
+    --button_color--on-bg: var(--bds-color_interactive_on-bg);
 
     background-color: var(--button_bg, var(--button_color));
     color: var(--button_text, var(--button_on-color));
     border: var(--button_border, none);
     --bdc_color: transparent;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   /* Default: filled with --button_color, no visible border */
   .button.--default { /* inherits base — no overrides needed */ }
 
-  /* Ghost: transparent background, border and text use text-safe --button_color--on-bg */
-  .button.--ghost {
+  /* Outline: transparent background, border and text use text-safe --button_color--on-bg */
+  .button.--outline,
+  .button.--ghost /* @deprecated — use variant="outline" */ {
     --button_bg:   transparent;
     --button_text: var(--button_color--on-bg);
     --bdc_color:   var(--button_color--on-bg);
@@ -150,8 +150,9 @@
     }
   }
 
-  /* Ghost hover: fills with --button_color */
+  /* Outline hover: fills with --button_color */
   @media (hover: hover) and (pointer: fine) {
+    .button.--outline:hover,
     .button.--ghost:hover {
       --button_bg:   var(--button_color);
       --button_text: var(--button_on-color);

package/src/components/interaction/Button/Button.native.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Pressable, Text, View, StyleProp, ViewStyle } from 'react-n
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is deprecated, use 'outline'
 type ButtonSize = 'small' | 'medium' | 'large';
 
 export interface ButtonProps {
@@ -53,26 +53,27 @@ export function Button({
   const { colors } = useTheme();
   const { height, px, fontSize, radius } = sizeTokens[size];
 
-  // Color model: filled = green bg, ghost = transparent bg + darker green border/text
-  const primaryColor = colors.colorGreen;
-  const onPrimaryColor = colors.colorOnGreen;
-  // Ghost uses colorGreenStrong for text/border — colorGreen (#00c950) fails 3:1 on white (2.15:1)
-  const ghostTextColor = colors.colorGreenStrong;
+  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text
+  const primaryColor = colors.colorInteractive;
+  const onPrimaryColor = colors.colorOnInteractive;
+  // Outline uses colorInteractiveOnBg for text/border — colorInteractive may not meet 3:1 on white
+  const outlineTextColor = colors.colorInteractiveOnBg;
 
+  const isOutline = variant === 'outline' || variant === 'ghost';
   const containerStyle: ViewStyle = {
     height,
     paddingHorizontal: px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
     ...(variant === 'default' && { backgroundColor: primaryColor }),
-    ...(variant === 'ghost' && {
+    ...(isOutline && {
       backgroundColor: 'transparent',
       borderWidth: 1,
-      borderColor: ghostTextColor,
+      borderColor: outlineTextColor,
     }),
   };
 
-  const textColor = variant === 'default' ? onPrimaryColor : ghostTextColor;
+  const textColor = variant === 'default' ? onPrimaryColor : outlineTextColor;
 
   return (
     <Pressable

package/src/components/interaction/Button/Button.tsx

@@ -5,7 +5,7 @@ import type { WithClassName } from '../../../types';
 
 export interface ButtonProps extends WithClassName, ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   href?: string;
-  variant?: 'default' | 'ghost';
+  variant?: 'default' | 'outline' | /** @deprecated Use "outline" instead */ 'ghost';
   type?: 'button' | 'submit' | 'reset';
   size?: 'small' | 'medium' | 'large';
   iconStart?: ReactNode;

package/src/components/interaction/Command/Command.module.css

@@ -21,15 +21,13 @@
     background-color: var(--command_color, var(--bds-color_bg));
     color: var(--command_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--m);
-    box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
     max-block-size: 70vh;
     border: var(--command_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
   }
 
   .searchRow {
@@ -73,8 +71,7 @@
     --bdc_color: currentcolor;
 
     border: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .list {
@@ -132,8 +129,7 @@
     --bdc_color: currentcolor;
 
     border: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .empty {

package/src/components/interaction/Dialog/Dialog.module.css

@@ -5,10 +5,8 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dialog_radius, var(--bdc-outline_radius));
-    box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
     background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
     color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
@@ -41,11 +39,15 @@
     border: var(--dialog_close-border, none);
     --bdc_color: currentcolor;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     cursor: pointer;
   }
 
+  .closeButton:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+
   .closeButton svg {
     inline-size: 1.25em;
     block-size: 1.25em;

package/src/components/interaction/Drawer/Drawer.module.css

@@ -11,16 +11,32 @@
     border: none;
     background: transparent;
     overflow: hidden;
+    transition:
+      display var(--bds-animation_transition-duration) allow-discrete,
+      overlay var(--bds-animation_transition-duration) allow-discrete;
   }
 
   .drawer::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
+    transition:
+      display var(--bds-animation_transition-duration) allow-discrete,
+      overlay var(--bds-animation_transition-duration) allow-discrete,
+      background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
+  }
+
+  @starting-style {
+    .drawer[open]::backdrop {
+      background-color: transparent;
+      backdrop-filter: blur(0);
+    }
   }
 
   .panel {
     position: absolute;
     inset-block: 0;
+    inset-inline: auto;
     display: flex;
     flex-direction: column;
     inline-size: min(28rem, 90vw);
@@ -29,15 +45,40 @@
     color: var(--drawer_on-color, var(--bds-color_on-bg));
     box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
-    transition: var(--bds-animation_transition);
+    translate: 100% 0;
+    transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .--side_right .panel {
     inset-inline-end: 0;
+    translate: 100% 0;
   }
 
   .--side_left .panel {
     inset-inline-start: 0;
+    translate: -100% 0;
+  }
+
+  .drawer[open] .panel {
+    translate: 0 0;
+  }
+
+  .drawer[open].--side_right .panel {
+    animation: bdc-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+  }
+
+  .drawer[open].--side_left .panel {
+    animation: bdc-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+  }
+
+  @keyframes bdc-drawer-slide-right {
+    from { translate: 100% 0; }
+    to { translate: 0 0; }
+  }
+
+  @keyframes bdc-drawer-slide-left {
+    from { translate: -100% 0; }
+    to { translate: 0 0; }
   }
 
   .header {
@@ -86,8 +127,15 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .drawer,
+    .drawer::backdrop,
     .panel {
       transition: none;
     }
+
+    .drawer[open].--side_right .panel,
+    .drawer[open].--side_left .panel {
+      animation: none;
+    }
   }
 }

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -14,12 +14,10 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--s);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
     background-color: var(--dropdown_color, var(--bds-color_bg));
     color: var(--dropdown_on-color, var(--bds-color_on-bg));
-    box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
     list-style: none;
     margin: 0;
   }

package/src/components/interaction/Popover/Popover.module.css

@@ -25,11 +25,9 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--s);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     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/components/interaction/form/Checkbox/Checkbox.module.css

@@ -21,10 +21,8 @@
     --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));
     appearance: none;
     background-color: var(--checkbox_color_bg, var(--bds-color_bg));
     cursor: pointer;

package/src/components/interaction/form/Combobox/Combobox.module.css

@@ -21,10 +21,8 @@
     --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));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
@@ -77,12 +75,10 @@
     --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_listbox-radius, var(--bdc-outline_radius));
     background-color: var(--combobox_color, var(--bds-color_bg));
     color: var(--combobox_on-color, var(--bds-color_on-bg));
-    box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
   }
 
   .option {

package/src/components/interaction/form/FormInput/FormInput.module.css

@@ -14,10 +14,8 @@
     --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(--input_radius, var(--bdc-outline_radius));
-    box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--input_shadow, var(--bdc-outline_shadow));
     color: var(--input_color, var(--bds-color_on-bg));
     background-color: var(--input_color_bg, var(--bds-color_bg));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),

package/src/components/interaction/form/NumberInput/NumberInput.module.css

@@ -11,10 +11,10 @@
     --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(--numberInput_radius, var(--bdc-outline_radius));
-    box-shadow: var(--numberInput_shadow, var(--bdc-outline_shadow));
+    --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
+
+    border-radius: var(--_radius);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--bdc-outline_shadow));
     overflow: hidden;
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
@@ -57,6 +57,7 @@
     align-items: center;
     justify-content: center;
     padding: var(--bds-space_xs);
+    margin: 1px;
     background-color: var(--bds-color_bg--subtle);
     color: var(--numberInput_color, var(--bds-color_on-bg));
     cursor: pointer;
@@ -67,6 +68,17 @@
   .stepper svg {
     width: 1rem;
     height: 1rem;
+    color: var(--numberInput_stepper-color, var(--bds-color_interactive));
+  }
+
+  .stepper:first-child {
+    border-start-start-radius: var(--_radius);
+    border-end-start-radius: var(--_radius);
+  }
+
+  .stepper:last-child {
+    border-start-end-radius: var(--_radius);
+    border-end-end-radius: var(--_radius);
   }
 
   .stepper:disabled {

package/src/components/interaction/form/Radio/Radio.module.css

@@ -36,10 +36,8 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: 50%;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--radio_radius, var(--bdc-outline_radius));
-    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));
     appearance: none;
     background-color: var(--radio_color_bg, var(--bds-color_bg));
     cursor: pointer;
@@ -48,22 +46,14 @@
   }
 
   .radio: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));
   }
 
-  .radio:checked::after {
-    content: '';
-    position: absolute;
-    inset-inline-start: 50%;
-    inset-block-start: 50%;
-    transform: translate(-50%, -50%);
-    inline-size: 0.4em;
-    block-size: 0.4em;
-    border-radius: 50%;
-    background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
-  }
-
   .radio:focus {
     --bdc_color: var(--bdc_color--focus);
   }

package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx

@@ -5,60 +5,105 @@ import * as Stories from './SegmentedControl.stories';
 
 # SegmentedControl
 
-Single-select control where all options sit inside a shared track and a sliding thumb highlights the active choice. Based on radio inputs.
+Single-select control where all options share a track and a sliding indicator highlights the active choice. Children can be any interactive element — buttons, links, or framework router components.
 
-All options have **equal width** — the widest label determines the size for all. In the `large` variant, labels may wrap.
+All items have **equal width** (CSS grid `1fr` columns). In the `large` size, labels may wrap.
 
 ## When to use
 - Switching between a small set of mutually exclusive views or modes (2–5 options)
-- When all options should be visible simultaneously with clear visual feedback
+- Navigation between sections where all options should be visible simultaneously
+- When you need links (`<a>`, Next.js `<Link>`) instead of radio buttons
 
 ## When not to use
 - More than 5 options — use `Select` or `Tabs`
 - Independent toggles — use `Switch` or `Checkbox`
 
+## Usage
+
+Pass any interactive elements as children. The component injects `.item`, `.--active`, and `.--disabled` CSS classes via `cloneElement` — your existing `className` is preserved.
+
+### With buttons (explicit `selectedIndex`)
+
+```tsx
+const [tab, setTab] = useState(1);
+
+<SegmentedControl selectedIndex={tab}>
+  <button onClick={() => setTab(0)}>Day</button>
+  <button onClick={() => setTab(1)}>Week</button>
+  <button onClick={() => setTab(2)}>Month</button>
+</SegmentedControl>
+```
+
+### With buttons (`aria-pressed` auto-detection)
+
+When `selectedIndex` is omitted, the component auto-detects the active item from the first child that has `aria-current="page"`, `aria-pressed={true}`, or `aria-selected={true}`.
+
+```tsx
+<SegmentedControl>
+  <button onClick={() => setTab('day')} aria-pressed={tab === 'day'}>Day</button>
+  <button onClick={() => setTab('week')} aria-pressed={tab === 'week'}>Week</button>
+  <button onClick={() => setTab('month')} aria-pressed={tab === 'month'}>Month</button>
+</SegmentedControl>
+```
+
+### With links (`aria-current` auto-detection)
+
+```tsx
+<SegmentedControl>
+  <a href="/overview" aria-current={path === '/overview' ? 'page' : undefined}>Overview</a>
+  <a href="/usage"    aria-current={path === '/usage'    ? 'page' : undefined}>Usage</a>
+  <a href="/api"      aria-current={path === '/api'      ? 'page' : undefined}>API</a>
+</SegmentedControl>
+```
+
 ## Examples
 
-### Default
+### Default (outline variant)
 <Canvas of={Stories.Default} />
 
+### Filled variant
+<Canvas of={Stories.Filled} />
+
+### With links
+<Canvas of={Stories.WithLinks} />
+
 ### Small
 <Canvas of={Stories.Small} />
 
 ### Large (wrapping labels)
 <Canvas of={Stories.WrappingLabels} />
 
-### With disabled option
-<Canvas of={Stories.WithDisabledOption} />
-
 ### All disabled
 <Canvas of={Stories.AllDisabled} />
 
-### Controlled
-<Canvas of={Stories.Controlled} />
+### With aria-pressed (auto-detection)
+<Canvas of={Stories.WithAriaPressed} />
 
 ## Props
 
 <ArgTypes of={Stories} />
 
+## Variants
+
+| Variant | Description |
+|---------|-------------|
+| `outline` (default) | Transparent track, inset-border indicator slides to the active item |
+| `filled` | Coloured track, filled thumb slides behind the active item |
+
 ## CSS variables
 
-<table>
-<thead>
-<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
-</thead>
-<tbody>
-<tr><td>`--control_track-bg`</td><td>`var(--bds-bg--subtle)`</td><td>Track background</td></tr>
-<tr><td>`--control_thumb-bg`</td><td>`var(--bds-bg)`</td><td>Thumb (active indicator) background</td></tr>
-<tr><td>`--control_label-color`</td><td>`var(--bds-on-bg--subtle)`</td><td>Unselected label colour</td></tr>
-<tr><td>`--control_label-color--active`</td><td>`var(--bds-on-bg)`</td><td>Selected label colour</td></tr>
-<tr><td>`--control_label-color--hover`</td><td>`var(--bds-on-bg)`</td><td>Hovered (unselected) label colour</td></tr>
-</tbody>
-</table>
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--control_track-bg` | `var(--bds-color_bg--subtle)` (filled) / `transparent` (outline) | Track background |
+| `--control_thumb-bg` | `var(--bds-color_interactive)` | Filled thumb colour |
+| `--control_label-color` | `var(--bds-color_on-bg--subtle)` | Inactive item text colour |
+| `--control_label-color--active` | `var(--bds-color_on-interactive)` (filled) / `var(--bds-color_interactive)` (outline) | Active item text colour |
+| `--control_label-color--hover` | `var(--bds-color_on-bg)` | Hovered inactive item text colour |
 
 ## Accessibility
 
-- Each option is a native `<input type="radio">` — grouped by `name`, keyboard navigable with arrow keys
-- The visual thumb is `aria-hidden` and purely decorative
-- Labels are `<label>` elements with `htmlFor` pointing to each radio
-- Disabled options remain focusable for screen reader discovery but cannot be activated
+- The container renders as `role="group"`. Provide `aria-label` when the context doesn't supply a visible label.
+- Each child is responsible for its own semantics: buttons use `aria-pressed`, links use `aria-current="page"`.
+- The sliding thumb and indicator are `aria-hidden` — they are purely decorative.
+- The active item is communicated via the child's own ARIA attribute, not via the container.
+- Respects `prefers-reduced-motion` — the sliding animation is disabled when the user has opted out.