@boostdev/design-system-components 1.1.2 → 1.2.0

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

@@ -6,105 +6,122 @@ const meta = {
   title: 'React/Form/SegmentedControl',
   component: SegmentedControl,
   argTypes: {
-    size: { control: 'radio', options: ['small', 'medium', 'large'] },
+    size:    { control: 'radio', options: ['small', 'medium', 'large'] },
+    variant: { control: 'radio', options: ['outline', 'filled'] },
   },
 } satisfies Meta<typeof SegmentedControl>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/** Default: outline variant (default), buttons driven by selectedIndex */
 export const Default: Story = {
-  args: {
-    name: 'view',
-    options: [
-      { value: 'day', label: 'Day' },
-      { value: 'week', label: 'Week' },
-      { value: 'month', label: 'Month' },
-    ],
-    defaultValue: 'week',
+  render: ({ size, variant, disabled }) => {
+    const [tab, setTab] = useState(1);
+    return (
+      <SegmentedControl selectedIndex={tab} size={size} variant={variant} disabled={disabled}>
+        <button onClick={() => setTab(0)}>Day</button>
+        <button onClick={() => setTab(1)}>Week</button>
+        <button onClick={() => setTab(2)}>Month</button>
+      </SegmentedControl>
+    );
   },
 };
 
-export const Small: Story = {
-  args: {
-    name: 'size-s',
-    size: 'small',
-    options: [
-      { value: 'list', label: 'List' },
-      { value: 'grid', label: 'Grid' },
-    ],
-    defaultValue: 'list',
+/** Filled variant: sliding filled thumb */
+export const Filled: Story = {
+  render: ({ size, disabled }) => {
+    const [tab, setTab] = useState(1);
+    return (
+      <SegmentedControl selectedIndex={tab} size={size} variant="filled" disabled={disabled}>
+        <button onClick={() => setTab(0)}>Day</button>
+        <button onClick={() => setTab(1)}>Week</button>
+        <button onClick={() => setTab(2)}>Month</button>
+      </SegmentedControl>
+    );
   },
 };
 
-export const Large: Story = {
-  args: {
-    name: 'size-l',
-    size: 'large',
-    options: [
-      { value: 'personal', label: 'Personal plan' },
-      { value: 'team', label: 'Team plan' },
-      { value: 'enterprise', label: 'Enterprise plan' },
-    ],
-    defaultValue: 'team',
+/**
+ * Links: active item is auto-detected from aria-current="page".
+ * No selectedIndex needed — the component reads the ARIA attribute.
+ */
+export const WithLinks: Story = {
+  render: ({ size, variant, disabled }) => {
+    const [active, setActive] = useState('overview');
+    return (
+      <SegmentedControl size={size} variant={variant} disabled={disabled}>
+        <a href="#" aria-current={active === 'overview' ? 'page' : undefined} onClick={() => setActive('overview')}>Overview</a>
+        <a href="#" aria-current={active === 'usage' ? 'page' : undefined} onClick={() => setActive('usage')}>Usage</a>
+        <a href="#" aria-current={active === 'api' ? 'page' : undefined} onClick={() => setActive('api')}>API</a>
+      </SegmentedControl>
+    );
   },
 };
 
-export const WrappingLabels: Story = {
-  args: {
-    name: 'wrap',
-    size: 'large',
-    options: [
-      { value: 'solar', label: 'Solar energy only' },
-      { value: 'wind', label: 'Wind energy only' },
-      { value: 'mixed', label: 'Mix of sustainable sources' },
-    ],
-    defaultValue: 'mixed',
+/** Small size */
+export const Small: Story = {
+  render: () => {
+    const [tab, setTab] = useState(0);
+    return (
+      <SegmentedControl selectedIndex={tab} size="small">
+        <button onClick={() => setTab(0)}>List</button>
+        <button onClick={() => setTab(1)}>Grid</button>
+      </SegmentedControl>
+    );
   },
-  decorators: [Story => <div style={{ maxWidth: '360px' }}><Story /></div>],
 };
 
-export const WithDisabledOption: Story = {
-  args: {
-    name: 'disabled-opt',
-    options: [
-      { value: 'active', label: 'Active' },
-      { value: 'paused', label: 'Paused' },
-      { value: 'archived', label: 'Archived', disabled: true },
-    ],
-    defaultValue: 'active',
+/** Large size with wrapping labels */
+export const Large: Story = {
+  render: () => {
+    const [tab, setTab] = useState(1);
+    return (
+      <SegmentedControl selectedIndex={tab} size="large">
+        <button onClick={() => setTab(0)}>Personal plan</button>
+        <button onClick={() => setTab(1)}>Team plan</button>
+        <button onClick={() => setTab(2)}>Enterprise plan</button>
+      </SegmentedControl>
+    );
   },
 };
 
-export const AllDisabled: Story = {
-  args: {
-    name: 'all-disabled',
-    options: [
-      { value: 'a', label: 'Option A' },
-      { value: 'b', label: 'Option B' },
-    ],
-    defaultValue: 'a',
-    disabled: true,
+/** Large with wrapping text in a constrained container */
+export const WrappingLabels: Story = {
+  render: () => {
+    const [tab, setTab] = useState(2);
+    return (
+      <div style={{ maxWidth: '360px' }}>
+        <SegmentedControl selectedIndex={tab} size="large">
+          <button onClick={() => setTab(0)}>Solar energy only</button>
+          <button onClick={() => setTab(1)}>Wind energy only</button>
+          <button onClick={() => setTab(2)}>Mix of sustainable sources</button>
+        </SegmentedControl>
+      </div>
+    );
   },
 };
 
-export const Controlled: Story = {
+/** Disable the entire control */
+export const AllDisabled: Story = {
+  render: () => (
+    <SegmentedControl selectedIndex={0} disabled>
+      <button>Option A</button>
+      <button>Option B</button>
+    </SegmentedControl>
+  ),
+};
+
+/** aria-pressed drives auto-detection — no selectedIndex needed */
+export const WithAriaPressed: Story = {
   render: () => {
-    const [value, setValue] = useState('month');
+    const [tab, setTab] = useState('week');
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'flex-start' }}>
-        <SegmentedControl
-          name="controlled"
-          value={value}
-          onChange={setValue}
-          options={[
-            { value: 'day', label: 'Day' },
-            { value: 'week', label: 'Week' },
-            { value: 'month', label: 'Month' },
-          ]}
-        />
-        <span style={{ fontSize: '0.875rem', opacity: 0.6 }}>Selected: {value}</span>
-      </div>
+      <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>
     );
   },
 };

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 {