@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -4,37 +4,43 @@
     display: inline-grid;
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
-    padding: var(--bds-space_xxxs);
+    padding: var(--control_track-pad, var(--bds-space_xxs));
     background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
     border-radius: var(--control_radius, var(--bds-border_radius--full));
     gap: 0;
+    --control_dir: 1;
+  }
+
+  [dir='rtl'] .control,
+  .control[dir='rtl'] {
+    --control_dir: -1;
   }
 
   /* Filled variant: sliding background thumb */
   .thumb {
     position: absolute;
-    inset-block: var(--bds-space_xxxs);
-    inset-inline-start: var(--bds-space_xxxs);
-    inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
+    inset-block: var(--control_track-pad, var(--bds-space_xxs));
+    inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
+    inline-size: calc((100% - 2 * var(--control_track-pad, var(--bds-space_xxs))) / var(--control_count, 1));
     border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     background-color: var(--control_thumb-bg, var(--bds-color_interactive));
-    box-shadow: var(--bds-shadow_s);
+    box-shadow: var(--control_thumb-shadow, var(--bds-shadow_s));
     pointer-events: none;
-    transform: translateX(calc(var(--control_selected-index, 0) * 100%));
+    transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   /* Outline variant: sliding inset-border indicator */
   .indicator {
     position: absolute;
-    inset-block: var(--bds-space_xxxs);
-    inset-inline-start: var(--bds-space_xxxs);
-    inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
+    inset-block: var(--control_track-pad, var(--bds-space_xxs));
+    inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
+    inline-size: calc((100% - 2 * var(--control_track-pad, var(--bds-space_xxs))) / var(--control_count, 1));
     border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     pointer-events: none;
     z-index: 2;
     display: none;
-    transform: translateX(calc(var(--control_selected-index, 0) * 100%));
+    transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
@@ -47,7 +53,7 @@
     justify-content: center;
     cursor: pointer;
     border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
-    padding: var(--bds-space_xs) var(--bds-space_m);
+    padding: var(--control_item-padding, var(--bds-space_xs) var(--bds-space_m));
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
     line-height: var(--bds-font_line-height--body);
@@ -109,7 +115,14 @@
 
   .control.--variant_outline .indicator {
     display: block;
-    box-shadow: inset 0 0 0 2px var(--control_indicator-color, var(--bds-color_interactive));
+    box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
+  }
+
+  /* No item is active (no selectedIndex and no ARIA-marked child) — hide the sliding visuals.
+     Placed after the variant rules above so it wins the equal-specificity cascade. */
+  .control.--no-selection .thumb,
+  .control.--no-selection .indicator {
+    display: none;
   }
 
   @media (hover: hover) and (pointer: fine) {

package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx

@@ -40,13 +40,35 @@ describe('SegmentedControl', () => {
     expect(getControl(container).style.getPropertyValue('--control_selected-index')).toBe('2');
   });
 
-  it('defaults to index 0 when no selectedIndex or aria attributes are provided', () => {
+  it('has no active item when neither selectedIndex nor an aria attribute is provided', () => {
     const { container } = render(
       <SegmentedControl>
         <button>A</button>
         <button>B</button>
       </SegmentedControl>,
     );
+    expect(getControl(container).style.getPropertyValue('--control_selected-index')).toBe('');
+    expect(screen.getByText('A').closest('button')).not.toHaveAttribute('aria-pressed');
+    expect(screen.getByText('B').closest('button')).not.toHaveAttribute('aria-pressed');
+  });
+
+  it('clamps an out-of-range selectedIndex to the last child', () => {
+    const { container } = render(
+      <SegmentedControl selectedIndex={99}>
+        <button>A</button>
+        <button>B</button>
+      </SegmentedControl>,
+    );
+    expect(getControl(container).style.getPropertyValue('--control_selected-index')).toBe('1');
+  });
+
+  it('clamps a negative selectedIndex to the first child', () => {
+    const { container } = render(
+      <SegmentedControl selectedIndex={-5}>
+        <button>A</button>
+        <button>B</button>
+      </SegmentedControl>,
+    );
     expect(getControl(container).style.getPropertyValue('--control_selected-index')).toBe('0');
   });
 
@@ -119,10 +141,69 @@ describe('SegmentedControl', () => {
         <button>B</button>
       </SegmentedControl>,
     );
-    // Items get the --disabled modifier class — verify via aria or opacity is difficult;
-    // check that pointer-events is none (jsdom doesn't apply CSS, so just verify the class is injected).
-    // We verify by checking that buttons still render and the container has the right CSS var.
-    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('A').closest('button')).toBeDisabled();
+    expect(screen.getByText('A').closest('button')).toHaveAttribute('aria-disabled', 'true');
+    expect(screen.getByText('B').closest('button')).toBeDisabled();
+    expect(screen.getByText('B').closest('button')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('disables only the child that sets its own disabled prop', () => {
+    render(
+      <SegmentedControl selectedIndex={0}>
+        <button>A</button>
+        <button disabled>B</button>
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('A').closest('button')).not.toBeDisabled();
+    expect(screen.getByText('B').closest('button')).toBeDisabled();
+    expect(screen.getByText('B').closest('button')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('makes disabled link children keyboard-unreachable and blocks activation', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <SegmentedControl disabled>
+        <a href="#" onClick={onClick}>Overview</a>
+      </SegmentedControl>,
+    );
+    const link = screen.getByText('Overview');
+    expect(link).toHaveAttribute('aria-disabled', 'true');
+    expect(link).toHaveAttribute('tabindex', '-1');
+    await user.click(link);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('injects aria-pressed on the active button when selectedIndex drives selection without an existing aria state', () => {
+    render(
+      <SegmentedControl selectedIndex={1}>
+        <button>A</button>
+        <button>B</button>
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('B').closest('button')).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByText('A').closest('button')).not.toHaveAttribute('aria-pressed');
+  });
+
+  it('injects aria-current="page" on the active link when selectedIndex drives selection without an existing aria state', () => {
+    render(
+      <SegmentedControl selectedIndex={0}>
+        <a href="#">Overview</a>
+        <a href="#">Usage</a>
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('Overview')).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByText('Usage')).not.toHaveAttribute('aria-current');
+  });
+
+  it('does not override an aria state the consumer already set', () => {
+    render(
+      <SegmentedControl selectedIndex={0}>
+        <button aria-pressed={false}>A</button>
+        <button>B</button>
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('A').closest('button')).toHaveAttribute('aria-pressed', 'false');
   });
 
   it('forwards existing className on children', () => {

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

@@ -1,4 +1,4 @@
-import { Children, HTMLAttributes, ReactElement, cloneElement, isValidElement } from 'react';
+import { Children, HTMLAttributes, MouseEvent, ReactElement, cloneElement, isValidElement } from 'react';
 import css from './SegmentedControl.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
@@ -16,6 +16,11 @@ export interface SegmentedControlProps extends WithClassName, HTMLAttributes<HTM
   variant?: 'outline' | 'filled';
 }
 
+/** Non-button children (e.g. links) have no native `disabled` attribute — block activation manually. */
+const preventDisabledActivation = (event: MouseEvent<HTMLElement>) => {
+  event.preventDefault();
+};
+
 export function SegmentedControl({
   children,
   selectedIndex: selectedIndexProp,
@@ -35,16 +40,31 @@ export function SegmentedControl({
       })
     : -1;
 
-  const activeIndex = Math.max(0, selectedIndexProp ?? (autoIndex >= 0 ? autoIndex : 0));
+  // An explicit selectedIndex is clamped to the valid child range. Otherwise fall back to ARIA
+  // auto-detection. When neither is available, no item is active — the thumb/indicator stay hidden
+  // rather than defaulting to index 0.
+  const activeIndex = validChildren.length === 0
+    ? undefined
+    : selectedIndexProp !== undefined
+      ? Math.min(Math.max(selectedIndexProp, 0), validChildren.length - 1)
+      : autoIndex >= 0
+        ? autoIndex
+        : undefined;
 
   return (
     <div
       {...rest}
       role="group"
-      className={cn(css.control, css[`--size_${size}`], css[`--variant_${variant}`], className)}
+      className={cn(
+        css.control,
+        css[`--size_${size}`],
+        css[`--variant_${variant}`],
+        activeIndex === undefined && css['--no-selection'],
+        className,
+      )}
       style={{
         '--control_count': validChildren.length,
-        '--control_selected-index': activeIndex,
+        ...(activeIndex !== undefined ? { '--control_selected-index': activeIndex } : {}),
       } as React.CSSProperties}
     >
       <span className={css.thumb} aria-hidden="true" />
@@ -54,8 +74,28 @@ export function SegmentedControl({
         const isActive = index === activeIndex;
         const p = child.props as Record<string, unknown>;
         const isDisabled = disabled || !!p.disabled || p['aria-disabled'] === true;
+        const hasAriaState = p['aria-current'] !== undefined || p['aria-pressed'] !== undefined || p['aria-selected'] !== undefined;
+
+        const stateProps: Record<string, unknown> = {};
+        if (isDisabled) {
+          // Enforce disabled state for keyboard and expose it to assistive tech — the visual
+          // --disabled modifier alone leaves items keyboard-operable and unannounced.
+          stateProps['aria-disabled'] = true;
+          if (child.type === 'button') {
+            stateProps.disabled = true;
+          } else {
+            stateProps.tabIndex = -1;
+            stateProps.onClick = preventDisabledActivation;
+          }
+        } else if (isActive && selectedIndexProp !== undefined && !hasAriaState) {
+          // selectedIndex drives the visual active state; mirror it in ARIA when the consumer
+          // hasn't already wired their own aria-current/aria-pressed/aria-selected attribute.
+          stateProps[child.type === 'a' ? 'aria-current' : 'aria-pressed'] = child.type === 'a' ? 'page' : true;
+        }
+
         return cloneElement(child, {
           key: child.key ?? index,
+          ...stateProps,
           className: cn(
             css.item,
             isActive && css['--active'],

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

@@ -41,12 +41,18 @@ Native dropdown for choosing one option from a list. Renders a styled `<select>`
 
 <table>
 <thead>
-<tr><th>Variable</th><th>Description</th></tr>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--select_border-color`</td><td>Border colour</td></tr>
-<tr><td>`--select_color`</td><td>Background colour</td></tr>
-<tr><td>`--select_on-color`</td><td>Text colour</td></tr>
+<tr><td>`--select_border`</td><td>`none`</td><td>Additional border shorthand</td></tr>
+<tr><td>`--select_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Corner radius</td></tr>
+<tr><td>`--select_shadow`</td><td>`var(--bdc-outline_shadow)`</td><td>Box shadow</td></tr>
+<tr><td>`--select_color_bg`</td><td>`var(--bds-color_bg)`</td><td>Background colour</td></tr>
+<tr><td>`--select_color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--select_chevron-color`</td><td>`var(--bds-color_interactive)`</td><td>Chevron icon colour</td></tr>
+<tr><td>`--select_padding`</td><td>`var(--bds-space_s)`</td><td>Control padding</td></tr>
+<tr><td>`--select_padding-end`</td><td>`var(--bds-space_xxl)`</td><td>Inline-end padding (reserves space for the chevron)</td></tr>
+<tr><td>`--select_chevron-size`</td><td>`1rem`</td><td>Chevron icon size</td></tr>
 </tbody>
 </table>
 

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

@@ -15,8 +15,8 @@
     inline-size: 100%;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
-    padding: var(--bds-space_s);
-    padding-inline-end: var(--bds-space_xxl);
+    padding: var(--select_padding, var(--bds-space_s));
+    padding-inline-end: var(--select_padding-end, var(--bds-space_xxl));
     border: var(--select_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--full);
@@ -58,7 +58,7 @@
   }
 
   .chevron svg {
-    inline-size: 1rem;
-    block-size: 1rem;
+    inline-size: var(--select_chevron-size, 1rem);
+    block-size: var(--select_chevron-size, 1rem);
   }
 }

package/src/components/interaction/form/Select/Select.spec.tsx

@@ -32,6 +32,32 @@ describe('Select', () => {
     expect(screen.getByText('Pick a country')).toBeInTheDocument();
   });
 
+  it('selects the placeholder option initially when uncontrolled', () => {
+    render(<Select label="Country" name="country" options={options} placeholder="Pick a country" />);
+    expect(screen.getByRole('combobox')).toHaveValue('');
+  });
+
+  it('selects the provided defaultValue instead of the placeholder when uncontrolled', () => {
+    render(
+      <Select label="Country" name="country" options={options} placeholder="Pick a country" defaultValue="be" />
+    );
+    expect(screen.getByRole('combobox')).toHaveValue('be');
+  });
+
+  it('respects a controlled value over the placeholder', () => {
+    render(
+      <Select
+        label="Country"
+        name="country"
+        options={options}
+        placeholder="Pick a country"
+        value="nl"
+        onChange={vi.fn()}
+      />
+    );
+    expect(screen.getByRole('combobox')).toHaveValue('nl');
+  });
+
   it('marks a disabled option as disabled', () => {
     render(<Select label="Country" name="country" options={options} />);
     expect(screen.getByRole('option', { name: 'Germany' })).toBeDisabled();
@@ -59,4 +85,12 @@ describe('Select', () => {
     await user.selectOptions(screen.getByRole('combobox'), 'nl');
     expect(onChange).toHaveBeenCalled();
   });
+
+  it('keeps the label and error message associated with a consumer-provided id', () => {
+    render(<Select label="Country" name="country" options={options} error="Required" id="custom-id" />);
+    const select = screen.getByLabelText('Country');
+    expect(select).toHaveAttribute('id', 'custom-id');
+    expect(select).toHaveAttribute('aria-describedby', 'custom-iderror');
+    expect(screen.getByText('Required')).toHaveAttribute('id', 'custom-iderror');
+  });
 });

package/src/components/interaction/form/Select/Select.tsx

@@ -30,26 +30,38 @@ export function Select({
   hint,
   className,
   required,
-  ...props
+  id,
+  value,
+  defaultValue,
+  ...rest
 }: Readonly<SelectProps>) {
-  const id = name + useId();
-  const hintId = id + 'hint';
-  const errorId = id + 'error';
+  const generatedId = name + useId();
+  const selectId = id ?? generatedId;
+  const hintId = selectId + 'hint';
+  const errorId = selectId + 'error';
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
+  // Uncontrolled selects need an explicit defaultValue of "" so the disabled+hidden
+  // placeholder option is the initial selection (browsers otherwise preselect the
+  // first non-disabled <option>).
+  const isControlled = value !== undefined;
+  const initialValueProps = isControlled
+    ? { value }
+    : { defaultValue: defaultValue ?? (placeholder ? '' : undefined) };
 
   return (
     <InputContainer className={cn(css.formGroup, className)}>
-      <Label id={id} label={label} />
+      <Label id={selectId} label={label} />
       <div className={css.selectWrapper}>
         <select
-          id={id}
+          {...rest}
+          id={selectId}
           name={name}
           aria-invalid={!!error}
           aria-required={required || undefined}
           aria-describedby={describedBy}
           required={required}
           className={cn(css.select, error ? css.selectError : undefined)}
-          {...props}
+          {...initialValueProps}
         >
           {placeholder && (
             <option value="" disabled hidden>
@@ -68,8 +80,8 @@ export function Select({
           </svg>
         </span>
       </div>
-      <Message inputId={id} type="error" message={error} />
-      <Message inputId={id} type="hint" message={hint} />
+      <Message inputId={selectId} type="error" message={error} />
+      <Message inputId={selectId} type="hint" message={hint} />
     </InputContainer>
   );
 }

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

@@ -48,7 +48,9 @@ Range input for selecting a numeric value within a bounded range.
 <tbody>
 <tr><td>`--slider_color-active`</td><td>`var(--bdc-color_active)`</td><td>Filled track and thumb colour</td></tr>
 <tr><td>`--slider_track-bg`</td><td>`var(--bds-color_bg--subtle)`</td><td>Unfilled track background</td></tr>
+<tr><td>`--slider_track-height`</td><td>`var(--bds-space_xxs)`</td><td>Track thickness</td></tr>
 <tr><td>`--slider_track-radius`</td><td>`var(--bds-border_radius--full)`</td><td>Track border radius</td></tr>
+<tr><td>`--slider_thumb-size`</td><td>`calc(var(--bds-space_s) * 2)`</td><td>Thumb diameter</td></tr>
 <tr><td>`--slider_thumb-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Thumb border radius</td></tr>
 <tr><td>`--slider_color--error`</td><td>`var(--bds-color_error)`</td><td>Track and thumb colour in error state</td></tr>
 </tbody>
@@ -57,6 +59,7 @@ Range input for selecting a numeric value within a bounded range.
 
 ## Accessibility
 
-- Native `<input type="range">` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`
+- Native `<input type="range">` — the browser derives the accessible value (`aria-valuemin`/`aria-valuemax`/`aria-valuenow`/`aria-valuetext`) from the `min`/`max`/`value` attributes automatically, so the component does not set redundant ARIA value attributes
+- Sets `aria-invalid` when `error` is provided
 - Label linked via `id`/`htmlFor`
 - Arrow keys adjust value by `step`; `Home`/`End` jump to min/max

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

@@ -18,14 +18,12 @@
   }
 
   .slider {
-    --slider_fill:         0%;
-    --slider_track-height: var(--bds-space_xxs);
-    --slider_thumb-size:   calc(var(--bds-space_s) * 2);
+    --slider_fill: 0%;
 
     color: var(--slider_color, var(--bds-color_on-bg));
     appearance: none;
     inline-size: 100%;
-    block-size: var(--slider_track-height);
+    block-size: var(--slider_track-height, var(--bds-space_xxs));
     border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
     background: linear-gradient(
       to right,
@@ -38,6 +36,22 @@
     transition: var(--bds-animation_transition);
   }
 
+  /*
+   * The fill gradient is drawn with the physical `to right`, but native range
+   * inputs flip their fill direction under RTL writing modes. `:dir(rtl)`
+   * mirrors the gradient so the filled portion still grows from the thumb's
+   * resting edge instead of visually disagreeing with the native thumb position.
+   */
+  .slider:dir(rtl) {
+    background: linear-gradient(
+      to left,
+      var(--slider_color-active, var(--bdc-color_active)) 0%,
+      var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill),
+      var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
+      var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
+    );
+  }
+
   .slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
@@ -52,8 +66,8 @@
   /* Thumb — Webkit */
   .slider::-webkit-slider-thumb {
     appearance: none;
-    inline-size: var(--slider_thumb-size);
-    block-size: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+    block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
     border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
@@ -63,8 +77,8 @@
 
   /* Thumb — Firefox */
   .slider::-moz-range-thumb {
-    inline-size: var(--slider_thumb-size);
-    block-size: var(--slider_thumb-size);
+    inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
+    block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
     border: none;
     border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
@@ -82,6 +96,16 @@
     );
   }
 
+  .sliderError:dir(rtl) {
+    background: linear-gradient(
+      to left,
+      var(--slider_color--error, var(--bds-color_error)) 0%,
+      var(--slider_color--error, var(--bds-color_error)) var(--slider_fill),
+      var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
+      var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
+    );
+  }
+
   .sliderError::-webkit-slider-thumb {
     background-color: var(--slider_color--error, var(--bds-color_error));
   }

package/src/components/interaction/form/Slider/Slider.spec.tsx

@@ -50,4 +50,33 @@ describe('Slider', () => {
     render(<Slider label="Volume" name="volume" disabled />);
     expect(screen.getByRole('slider')).toBeDisabled();
   });
+
+  it('seeds internal state from the native midpoint default when uncontrolled without a defaultValue', () => {
+    render(<Slider label="Volume" name="volume" showValue />);
+    expect(screen.getByText('50')).toBeInTheDocument();
+    const slider = screen.getByRole('slider') as HTMLInputElement;
+    expect(slider.style.getPropertyValue('--slider_fill')).toBe('50%');
+  });
+
+  it('seeds internal state from the midpoint of a custom range when uncontrolled', () => {
+    render(<Slider label="Rating" name="rating" min={0} max={20} showValue />);
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid when there is an error', () => {
+    render(<Slider label="Volume" name="volume" error="Required" />);
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('keeps its own id when a consumer passes a conflicting id prop, preserving label association', () => {
+    render(<Slider label="Volume" name="volume" id="consumer-id" />);
+    expect(screen.getByLabelText('Volume')).toBeInTheDocument();
+  });
+
+  it('merges a consumer style prop with the internal fill custom property', () => {
+    render(<Slider label="Volume" name="volume" defaultValue={25} style={{ opacity: 0.5 }} />);
+    const slider = screen.getByRole('slider') as HTMLInputElement;
+    expect(slider.style.opacity).toBe('0.5');
+    expect(slider.style.getPropertyValue('--slider_fill')).toBe('25%');
+  });
 });

package/src/components/interaction/form/Slider/Slider.tsx

@@ -34,7 +34,12 @@ export function Slider({
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   const isControlled = props.value !== undefined;
-  const [internalValue, setInternalValue] = useState(Number(props.defaultValue ?? min));
+  // Seed internal state from the true initial value: a native range input with no
+  // defaultValue renders its thumb at the midpoint, not at `min`. Matching that here
+  // keeps state, fill percentage and showValue in sync with what the browser paints.
+  const [internalValue, setInternalValue] = useState(
+    Number(props.defaultValue ?? min + (max - min) / 2),
+  );
   const currentValue = isControlled ? Number(props.value) : internalValue;
 
   const fillPct = ((currentValue - min) / (max - min)) * 100;
@@ -51,20 +56,17 @@ export function Slider({
         {showValue && <span className={css.value}>{currentValue}</span>}
       </div>
       <input
+        {...props}
         type="range"
         id={id}
         name={name}
         min={min}
         max={max}
+        aria-invalid={!!error}
         aria-describedby={describedBy}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={currentValue}
-        aria-valuetext={String(currentValue)}
         className={cn(css.slider, error ? css.sliderError : undefined)}
-        style={{ '--slider_fill': `${fillPct}%` } as CSSProperties}
+        style={{ ...props.style, '--slider_fill': `${fillPct}%` } as CSSProperties}
         onChange={handleChange}
-        {...props}
       />
       <Message inputId={id} type="error" message={error} />
       <Message inputId={id} type="hint" message={hint} />

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

@@ -53,9 +53,9 @@ Toggle control for binary settings that take immediate effect — without requir
 </thead>
 <tbody>
 <tr><td>`--switch_track-bg`</td><td>`var(--bds-color_grey--subtle)`</td><td>Track background when off</td></tr>
-<tr><td>`--switch_thumb-bg`</td><td>`var(--bds-color_grey)`</td><td>Thumb colour when off (also track outline)</td></tr>
+<tr><td>`--switch_thumb-bg`</td><td>`var(--bds-color_interactive)`</td><td>Thumb colour when off (also track outline)</td></tr>
 <tr><td>`--switch_track-bg--active`</td><td>`var(--bdc-color_active--subtle)`</td><td>Track background when on</td></tr>
-<tr><td>`--switch_thumb-bg--active`</td><td>`var(--bdc-color_active--strong)`</td><td>Thumb colour when on (also track outline)</td></tr>
+<tr><td>`--switch_thumb-bg--active`</td><td>`var(--bds-color_interactive)`</td><td>Thumb colour when on (also track outline)</td></tr>
 <tr><td>`--switch_track-radius`</td><td>`var(--bds-border_radius--full)`</td><td>Track border radius</td></tr>
 <tr><td>`--switch_thumb-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Thumb border radius</td></tr>
 <tr><td>`--switch_border-color--error`</td><td>`var(--bds-color_error)`</td><td>Track outline colour in error state</td></tr>