@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -1,92 +1,70 @@
-import { InputHTMLAttributes, ReactNode, useId, useState } from 'react';
+import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';
 import css from './SegmentedControl.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-export interface SegmentedControlOption {
-  value: string;
-  label: ReactNode;
-  disabled?: boolean;
-}
-
-export interface SegmentedControlProps
-  extends WithClassName, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
-  name: string;
-  options: SegmentedControlOption[];
-  /** Controlled selected value */
-  value?: string;
-  /** Uncontrolled initial value (defaults to first option) */
-  defaultValue?: string;
-  onChange?: (value: string) => void;
+export interface SegmentedControlProps extends WithClassName {
+  children: ReactNode;
+  /**
+   * Zero-based index of the active item.
+   * When omitted, auto-detected from the first child that has
+   * aria-current="page", aria-pressed={true}, or aria-selected={true}.
+   */
+  selectedIndex?: number;
   disabled?: boolean;
   size?: 'small' | 'medium' | 'large';
+  /** "outline" (default) — sliding inset border; "filled" — sliding filled thumb */
+  variant?: 'outline' | 'filled';
   'aria-label'?: string;
 }
 
 export function SegmentedControl({
-  name,
-  options,
-  value,
-  defaultValue,
-  onChange,
+  children,
+  selectedIndex: selectedIndexProp,
   disabled,
   size = 'medium',
+  variant = 'outline',
   className,
   'aria-label': ariaLabel,
-  ...rest
 }: Readonly<SegmentedControlProps>) {
-  const baseId = name + useId();
+  const validChildren = Children.toArray(children).filter(isValidElement) as ReactElement<Record<string, unknown>>[];
 
-  const [internalValue, setInternalValue] = useState<string>(
-    defaultValue ?? options[0]?.value ?? '',
-  );
-
-  const activeValue = value ?? internalValue;
-  const selectedIndex = options.findIndex(o => o.value === activeValue);
+  // Auto-detect active index from standard ARIA attributes if not explicitly provided.
+  const autoIndex = selectedIndexProp === undefined
+    ? validChildren.findIndex(child => {
+        const p = child.props as Record<string, unknown>;
+        return p['aria-current'] === 'page' || p['aria-pressed'] === true || p['aria-selected'] === true;
+      })
+    : -1;
 
-  const handleChange = (optionValue: string) => {
-    if (value === undefined) setInternalValue(optionValue);
-    onChange?.(optionValue);
-  };
+  const activeIndex = Math.max(0, selectedIndexProp ?? (autoIndex >= 0 ? autoIndex : 0));
 
   return (
     <div
       role="group"
       aria-label={ariaLabel}
-      className={cn(css.control, css[`--size_${size}`], className)}
+      className={cn(css.control, css[`--size_${size}`], css[`--variant_${variant}`], className)}
       style={{
-        '--control_count': options.length,
-        '--control_selected-index': Math.max(0, selectedIndex),
+        '--control_count': validChildren.length,
+        '--control_selected-index': activeIndex,
       } as React.CSSProperties}
     >
-      {/* Sliding thumb — purely visual */}
       <span className={css.thumb} aria-hidden="true" />
+      <span className={css.indicator} aria-hidden="true" />
 
-      {options.map((option, index) => {
-        const id = `${baseId}-${index}`;
-        const isChecked = option.value === activeValue;
-        const isDisabled = disabled || option.disabled;
-
-        return (
-          <label
-            key={option.value}
-            htmlFor={id}
-            className={cn(css.item, isChecked && css['--active'], isDisabled && css['--disabled'])}
-          >
-            <input
-              {...rest}
-              type="radio"
-              id={id}
-              name={name}
-              value={option.value}
-              checked={isChecked}
-              disabled={isDisabled}
-              className={css.radio}
-              onChange={() => handleChange(option.value)}
-            />
-            <span className={css.label}>{option.label}</span>
-          </label>
-        );
+      {validChildren.map((child, index) => {
+        const isActive = index === activeIndex;
+        const p = child.props as Record<string, unknown>;
+        const isDisabled = disabled || !!p.disabled || p['aria-disabled'] === true;
+        return cloneElement(child, {
+          key: child.key ?? index,
+          className: cn(
+            css.item,
+            isActive && css['--active'],
+            isDisabled && css['--disabled'],
+            p.className as string | undefined,
+          ),
+        });
       })}
     </div>
   );

package/src/components/interaction/form/SegmentedControl/index.ts

@@ -1,2 +1,2 @@
 export { SegmentedControl } from './SegmentedControl';
-export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl';

package/src/components/interaction/form/Select/Select.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(--select_radius, var(--bdc-outline_radius));
-    box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
     background-color: var(--select_color_bg, var(--bds-color_bg));
     color: var(--select_color, var(--bds-color_on-bg));
     cursor: pointer;
@@ -56,7 +54,7 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--select_color, var(--bds-color_on-bg));
+    color: var(--select_chevron-color, var(--bds-color_interactive));
   }
 
   .chevron svg {

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

@@ -56,14 +56,12 @@
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bds-outline_offset);
-    box-shadow: var(--switch_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--switch_shadow, var(--bdc-outline_shadow));
     transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
                 transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
 
-    --bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
+    --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
   }
 
   /* Thumb */
@@ -72,7 +70,7 @@
     inline-size: var(--switch_thumb-size);
     block-size: var(--switch_thumb-size);
     border-radius: 50%;
-    background-color: var(--switch_thumb-bg, var(--bds-color_grey));
+    background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
     transform: translateX(0);
@@ -87,11 +85,11 @@
   .switch:checked + .track {
     background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
 
-    --bdc_color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
+    --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
   }
 
   .switch:checked + .track .thumb {
-    background-color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
+    background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
     transform: translateX(var(--switch_thumb-size));
   }
 

package/src/components/interaction/form/Switch/Switch.native.spec.tsx

@@ -38,17 +38,17 @@ describe('Switch (native)', () => {
     expect(getSwitchInput(container)).toBeChecked();
   });
 
-  it('thumb uses colorOnBg when off (contrast regression: was colorBg on colorBgSubtle = 1.09:1)', () => {
-    // In light mode: old thumbColor=colorBg=#fff on colorBgSubtle=#f3f4f6 = 1.09:1 (invisible).
-    // Fixed: thumbColor=colorOnBg=#000 when off, which gives 19:1 contrast against #f3f4f6.
-    const { container } = renderWithTheme(
+  it('renders thumb in both on and off states without error (thumb always uses colorInteractive)', () => {
+    // thumbColor is always colorInteractive — interactive affordance is visible in both states.
+    // Track color provides the on/off visual feedback instead.
+    const { container: offContainer } = renderWithTheme(
       <Switch label="Toggle" name="toggle" value={false} />,
     );
-    // The thumb div has its background-color set inline by react-native-web.
-    const thumbDiv = container.querySelector<HTMLElement>('[style*="background-color"]');
-    // Verify the component renders without error — visual contrast is verified by
-    // the color token usage in source (colorOnBg), not the DOM attribute.
-    expect(thumbDiv).toBeInTheDocument();
+    const { container: onContainer } = renderWithTheme(
+      <Switch label="Toggle2" name="toggle2" value={true} />,
+    );
+    expect(offContainer.querySelector('[style*="background-color"]')).toBeInTheDocument();
+    expect(onContainer.querySelector('[style*="background-color"]')).toBeInTheDocument();
   });
 
   it('renders hint message', () => {

package/src/components/interaction/form/Switch/Switch.native.tsx

@@ -47,8 +47,8 @@ export function Switch({
           accessibilityLabel={label}
           accessibilityRole="switch"
           accessibilityState={{ checked: value, disabled }}
-          thumbColor={value ? colors.colorOnInteractive : colors.colorOnBg}
-          trackColor={{ false: colors.colorBgSubtle, true: colors.colorInteractive }}
+          thumbColor={colors.colorInteractive}
+          trackColor={{ false: colors.colorBgSubtle, true: colors.colorBlueSubtle }}
         />
         <Label label={label} />
       </View>

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

@@ -13,10 +13,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(--textarea_radius, var(--bdc-outline_radius));
-    box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--textarea_shadow, var(--bdc-outline_shadow));
     background-color: var(--textarea_color_bg, var(--bds-color_bg));
     color: var(--textarea_color, var(--bds-color_on-bg));
     resize: vertical;

package/src/components/interaction/form/atoms/InputContainer.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputContainer } from './InputContainer';
+import { Label } from './Label';
+import { Message } from './Message';
+
+const meta = {
+  title: 'React/Form/Atoms/InputContainer',
+  component: InputContainer,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof InputContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <InputContainer>
+      <Label id="demo-input" label="Email address" />
+      <input id="demo-input" type="email" placeholder="you@example.com" style={{ display: 'block', width: '100%', padding: '8px', boxSizing: 'border-box' }} />
+    </InputContainer>
+  ),
+};
+
+export const WithHint: Story = {
+  render: () => (
+    <InputContainer>
+      <Label id="demo-hint" label="Username" />
+      <input id="demo-hint" type="text" placeholder="Enter username" style={{ display: 'block', width: '100%', padding: '8px', boxSizing: 'border-box' }} />
+      <Message inputId="demo-hint" type="hint" message="At least 3 characters." />
+    </InputContainer>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <InputContainer>
+      <Label id="demo-error" label="Password" />
+      <input id="demo-error" type="password" placeholder="Enter password" style={{ display: 'block', width: '100%', padding: '8px', boxSizing: 'border-box' }} />
+      <Message inputId="demo-error" type="error" message="Password is too short." />
+    </InputContainer>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>
+      <InputContainer>
+        <Label id="v1" label="Plain input" />
+        <input id="v1" type="text" placeholder="Default" style={{ display: 'block', width: '100%', padding: '8px', boxSizing: 'border-box' }} />
+      </InputContainer>
+      <InputContainer>
+        <Label id="v2" label="With hint" />
+        <input id="v2" type="text" placeholder="Hint below" style={{ display: 'block', width: '100%', padding: '8px', boxSizing: 'border-box' }} />
+        <Message inputId="v2" type="hint" message="Helpful hint text." />
+      </InputContainer>
+      <InputContainer>
+        <Label id="v3" label="With error" />
+        <input id="v3" type="text" placeholder="Error state" style={{ display: 'block', width: '100%', padding: '8px', boxSizing: 'border-box' }} />
+        <Message inputId="v3" type="error" message="This field has an error." />
+      </InputContainer>
+    </div>
+  ),
+};

package/src/components/interaction/form/atoms/Label.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './Label';
+
+const meta = {
+  title: 'React/Form/Atoms/Label',
+  component: Label,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { id: 'input-1', label: 'Email address' } };
+export const Required: Story = {
+  args: {
+    id: 'input-required',
+    label: (
+      <>
+        Full name <span aria-hidden="true" style={{ color: 'red' }}>*</span>
+      </>
+    ),
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Label id="a" label="Plain label" />
+      <Label id="b" label="Label for a text input" />
+      <Label id="c" label={<><strong>Bold</strong> label with markup</>} />
+    </div>
+  ),
+};

package/src/components/interaction/form/atoms/Message.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Message } from './Message';
+
+const meta = {
+  title: 'React/Form/Atoms/Message',
+  component: Message,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    type: { control: 'select', options: ['hint', 'error'] },
+  },
+} satisfies Meta<typeof Message>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Hint: Story = {
+  args: { inputId: 'field-1', type: 'hint', message: 'Password must be at least 8 characters.' },
+};
+export const Error: Story = {
+  args: { inputId: 'field-2', type: 'error', message: 'This field is required.' },
+};
+export const NoMessage: Story = {
+  args: { inputId: 'field-3', type: 'hint', message: undefined },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <Message inputId="v1" type="hint" message="Hint: Enter your full legal name." />
+      <Message inputId="v2" type="error" message="Error: This field is required." />
+    </div>
+  ),
+};

package/src/components/layout/Card/Card.module.css

@@ -19,9 +19,7 @@
     border: var(--card_border, none);
     --bdc_color: currentcolor;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
-    box-shadow: var(--bds-shadow_s);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
   }
 
   .card.--clickable {

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

@@ -6,9 +6,8 @@
     --bdc_color: var(--bds-color_bg--subtle);
     --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(--accordion_radius, var(--bdc-outline_radius));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     overflow: hidden;
   }
 

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

@@ -68,8 +68,7 @@
         border-radius: 50%;
         --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);
 
     }
 

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

@@ -8,11 +8,9 @@
     --bdc_color: var(--bds-color_bg--subtle);
     --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(--calendar_radius, var(--bdc-outline_radius));
     padding: var(--bds-space_m);
-    box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
     inline-size: 20rem;
   }
 
@@ -107,8 +105,7 @@
     --bdc_color: var(--bds-color_interactive);
 
     border: var(--calendar_today-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);
   }
 
   .selected {

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

@@ -39,12 +39,10 @@
     --bdc_color: var(--bds-color_on-bg);
 
     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), var(--bds-shadow_s);
     cursor: pointer;
     flex-shrink: 0;
     transition: var(--bds-animation_transition);
-    box-shadow: var(--bds-shadow_s);
   }
 
   .navBtn svg {

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

@@ -57,8 +57,7 @@
     transition: var(--bds-animation_transition);
     --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);
   }
 
   .dismiss svg {

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

@@ -27,8 +27,7 @@
     --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
 
     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);
     color: var(--btn_color, var(--bds-color_on-bg));
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);

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

@@ -15,8 +15,7 @@
     --bdc_color: var(--color_focus, var(--bds-color_interactive));
 
     border: var(--skip-link_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);
     transform: translateY(-200%);
     transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }

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

@@ -6,9 +6,8 @@
     --bdc_color: var(--bds-color_bg--subtle);
     --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(--table_radius, var(--bdc-outline_radius));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .table {

package/src/css/bdc.css

@@ -38,11 +38,12 @@
   initial-value: 0;
 }
 
-/* '*' syntax cannot be interpolated but gives a guaranteed none default */
+/* '*' syntax cannot be interpolated; use a transparent shadow (not 'none') so it
+   can safely appear as the trailing item in a comma-separated box-shadow list. */
 @property --bdc-outline_shadow {
   syntax: '*';
   inherits: false;
-  initial-value: none;
+  initial-value: 0 0 0 0 transparent;
 }
 
 @layer component {
@@ -56,19 +57,23 @@
     --bdc_color--error: var(--bds-color_error);
 
     /* Active / selected state colours — override these to theme all filled form controls globally */
-    --bdc-color_active:            var(--bds-color_green);
-    --bdc-color_on-active:         var(--bds-color_on-green);
-    --bdc-color_active--subtle:    var(--bds-color_green--subtle);
-    --bdc-color_on-active--subtle: var(--bds-color_on-green--subtle);
-    --bdc-color_active--strong:    var(--bds-color_green--strong);
-    --bdc-color_on-active--strong: var(--bds-color_on-green--strong);
+    --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_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);
 
     /* Outline geometry */
     --bdc-outline_width:  1px;
-    --bdc-outline_offset: -1px; /* inset — appears inside the element like a traditional border */
+    --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
     --bdc-outline_radius: var(--bds-border_radius--xs);
 
-    /* Shadow: opt-in, none by default */
-    --bdc-outline_shadow: none;
+    /* Shadow: opt-in; transparent (not 'none') so it's valid in a comma-separated box-shadow list */
+    --bdc-outline_shadow: 0 0 0 0 transparent;
+
+    /* Focus-visible ring — solid interactive colour, replaces foundation's dotted grey default */
+    --bds-outline_default: 2px solid var(--bds-color_interactive);
+    --bds-outline_offset:  2px;
   }
 }

package/src/index.ts

@@ -56,7 +56,7 @@ export { Radio } from './components/interaction/form/Radio';
 export { RadioGroup } from './components/interaction/form/RadioGroup';
 export type { RadioGroupProps } from './components/interaction/form/RadioGroup';
 export { SegmentedControl } from './components/interaction/form/SegmentedControl';
-export type { SegmentedControlProps, SegmentedControlOption } from './components/interaction/form/SegmentedControl';
+export type { SegmentedControlProps } from './components/interaction/form/SegmentedControl';
 export { Select } from './components/interaction/form/Select';
 export type { SelectOption } from './components/interaction/form/Select';
 export { Slider } from './components/interaction/form/Slider';

package/src/web-components/globals.ts

@@ -33,7 +33,7 @@ const bdcCss = `
   @property --bdc-outline_shadow {
     syntax: '*';
     inherits: false;
-    initial-value: none;
+    initial-value: 0 0 0 0 transparent;
   }
 
   @layer component {
@@ -45,9 +45,9 @@ const bdcCss = `
       --bdc_color--error: var(--bds-color_error);
 
       --bdc-outline_width:  1px;
-      --bdc-outline_offset: -1px;
+      --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_shadow: none;
+      --bdc-outline_shadow: 0 0 0 0 transparent;
     }
   }
 `;

package/src/web-components/index.ts

@@ -10,3 +10,50 @@ export { BdsAlert } from './ui/bds-alert';
 // Phase 2 — layout-driven components
 export { BdsPopover } from './interaction/bds-popover';
 export { BdsToastProvider } from './interaction/bds-toast-provider';
+
+// Phase 3 — simple UI display
+export { BdsSeparator } from './ui/bds-separator';
+export { BdsSkeleton } from './ui/bds-skeleton';
+export { BdsLoading } from './ui/bds-loading';
+export { BdsAvatar } from './ui/bds-avatar';
+export { BdsTypography } from './ui/bds-typography';
+export { BdsProgress } from './ui/bds-progress';
+export { BdsProgressCircle } from './ui/bds-progress-circle';
+export { BdsRating } from './ui/bds-rating';
+
+// Phase 3 — interactive with state
+export { BdsCollapsible } from './interaction/bds-collapsible';
+export { BdsAccordionItem } from './interaction/bds-accordion-item';
+export { BdsAccordion } from './interaction/bds-accordion';
+export { BdsTab } from './interaction/bds-tab';
+export { BdsTabPanel } from './interaction/bds-tab-panel';
+export { BdsTabs } from './interaction/bds-tabs';
+export { BdsTooltip } from './interaction/bds-tooltip';
+export { BdsSkipLink } from './interaction/bds-skip-link';
+
+// Phase 4 — modal overlays
+export { BdsDialog } from './interaction/bds-dialog';
+export { BdsDrawer } from './interaction/bds-drawer';
+
+// Phase 5 — basic form inputs (ElementInternals)
+export { BdsCheckbox } from './interaction/form/bds-checkbox';
+export { BdsRadio } from './interaction/form/bds-radio';
+export { BdsSwitch } from './interaction/form/bds-switch';
+export { BdsSelect } from './interaction/form/bds-select';
+export { BdsTextarea } from './interaction/form/bds-textarea';
+
+// Phase 6 — complex form inputs (ElementInternals)
+export { BdsNumberInput } from './interaction/form/bds-number-input';
+export { BdsSlider } from './interaction/form/bds-slider';
+export { BdsSegmentedControl } from './interaction/form/bds-segmented-control';
+export { BdsFileInput } from './interaction/form/bds-file-input';
+export { BdsCombobox } from './interaction/form/bds-combobox';
+
+// Phase 7 — slotted content display
+export { BdsNotificationBanner } from './ui/bds-notification-banner';
+export { BdsCard } from './ui/bds-card';
+export { BdsSectionHeader } from './ui/bds-section-header';
+export { BdsIconWrapper } from './ui/bds-icon-wrapper';
+export { BdsDescriptionList } from './ui/bds-description-list';
+export { BdsBreadcrumb } from './ui/bds-breadcrumb';
+export { BdsLink } from './ui/bds-link';