@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Textarea/index.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
+import { mergeAriaIds } from '../../utils/aria';
 import styles from './Textarea.module.scss';
 
-export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'defaultValue'> {
+export interface TextareaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'onChange' | 'onBlur' | 'onFocus' | 'className' | 'style' | 'size'
+> {
   /** Controlled value */
   value?: string;
   /** Default value for uncontrolled usage */
@@ -16,6 +20,9 @@ export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   maxRows?: number;
   /** Allow user to resize the textarea */
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  /** Size variant.
+   * @default "md" */
+  size?: 'sm' | 'md' | 'lg';
   /** Disabled state */
   disabled?: boolean;
   /** Error state */
@@ -26,8 +33,12 @@ export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   helperText?: string;
   /** Called when value changes */
   onChange?: (value: string) => void;
+  /** Alias for onChange (value-first callback) */
+  onValueChange?: (value: string) => void;
   /** Called when textarea loses focus */
   onBlur?: () => void;
+  /** Called when textarea receives focus */
+  onFocus?: () => void;
   /** Form field name */
   name?: string;
   /** Maximum character length */
@@ -40,11 +51,12 @@ export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   'aria-labelledby'?: string;
   /** Accessible described-by relationship */
   'aria-describedby'?: string;
-}
-
-function mergeAriaIds(...ids: Array<string | undefined>): string | undefined {
-  const merged = ids.filter(Boolean).join(' ').trim();
-  return merged.length > 0 ? merged : undefined;
+  /** Props applied to the wrapper element */
+  rootProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** Wrapper class name */
+  className?: string;
+  /** Wrapper styles */
+  style?: React.CSSProperties;
 }
 
 const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -57,31 +69,40 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       minRows,
       maxRows,
       resize = 'vertical',
+      size = 'md',
       disabled = false,
       error = false,
       label,
       helperText,
       onChange,
+      onValueChange,
       onBlur,
+      onFocus,
+      rootProps,
       className,
-      name,
+      style: wrapperStyle,
+      ...textareaProps
+    },
+    ref
+  ) {
+    const generatedId = React.useId();
+    const {
       id,
+      name,
       maxLength,
       required = false,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
-      ...htmlProps
-    },
-    ref
-  ) {
-    const generatedId = React.useId();
+      ...nativeTextareaProps
+    } = textareaProps;
     const textareaId = id || generatedId;
     const labelId = label ? `${textareaId}-label` : undefined;
     const helperId = `${textareaId}-helper`;
 
     const textareaClasses = [
       styles.textarea,
+      styles[size],
       error && styles.error,
       styles[`resize-${resize}`],
     ]
@@ -93,16 +114,20 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       .join(' ');
 
     // Calculate min/max height based on rows
-    const style: React.CSSProperties = {};
+    const textareaInlineStyle: React.CSSProperties = {};
     if (minRows) {
-      style.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;
+      textareaInlineStyle.minHeight = `calc(${minRows} * 1.5em + 1.5rem)`;
     }
     if (maxRows) {
-      style.maxHeight = `calc(${maxRows} * 1.5em + 1.5rem)`;
+      textareaInlineStyle.maxHeight = `calc(${maxRows} * 1.5em + 1.5rem)`;
     }
 
     return (
-      <div {...htmlProps} className={[styles.wrapper, className].filter(Boolean).join(' ')}>
+      <div
+        {...rootProps}
+        className={[styles.wrapper, rootProps?.className, className].filter(Boolean).join(' ')}
+        style={{ ...(rootProps?.style ?? {}), ...(wrapperStyle ?? {}) }}
+      >
         {label && (
           <label id={labelId} htmlFor={textareaId} className={styles.label}>
             {label}
@@ -116,6 +141,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           defaultValue={defaultValue}
           placeholder={placeholder}
           rows={rows}
+          {...nativeTextareaProps}
           name={name}
           maxLength={maxLength}
           disabled={disabled}
@@ -127,10 +153,14 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             ariaDescribedBy,
             helperText ? helperId : undefined
           )}
-          onChange={(e) => onChange?.(e.target.value)}
-          onBlur={onBlur}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+            onValueChange?.(e.target.value);
+          }}
+          onBlur={() => onBlur?.()}
+          onFocus={() => onFocus?.()}
           className={textareaClasses}
-          style={Object.keys(style).length > 0 ? style : undefined}
+          style={Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : undefined}
         />
         {helperText && (
           <span id={helperId} className={helperClasses}>

package/src/components/Theme/index.tsx

@@ -40,7 +40,7 @@ export interface UseThemeReturn {
   toggleMode: () => void;
 }
 
-export interface ThemeToggleProps {
+export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Size of the toggle button */
   size?: 'sm' | 'md' | 'lg';
   /** Whether to include system mode option (default: false) */
@@ -51,8 +51,6 @@ export interface ThemeToggleProps {
   onValueChange?: (value: 'light' | 'dark') => void;
   /** Accessible label for the group */
   'aria-label'?: string;
-  /** Additional class name */
-  className?: string;
 }
 
 // ============================================
@@ -282,6 +280,7 @@ function ThemeToggle({
   onValueChange,
   'aria-label': ariaLabel,
   className,
+  ...htmlProps
 }: ThemeToggleProps) {
   const { mode: contextMode, setMode: setContextMode } = useTheme();
 
@@ -314,6 +313,7 @@ function ThemeToggle({
 
   return (
     <div
+      {...htmlProps}
       className={groupClasses}
       role="group"
       aria-label={label}
@@ -368,21 +368,9 @@ export { ThemeProvider, ThemeToggle, useTheme };
 // configureTheme — JS-only seed configuration
 // ============================================
 
-/**
- * Neutral palette for surfaces, text, and borders.
- * - `stone`: Cool gray (balanced, professional) — default
- * - `ice`: Cool blue-tinted grays (crisp, technical)
- * - `earth`: Warm brown-tinted grays (natural, grounded)
- * - `sand`: Warm tan-tinted grays (organic, approachable)
- * - `fire`: Warm red-tinted grays (bold, energetic)
- *
- * Preview palettes at https://usefragments.com/themes
- */
-export type NeutralPalette = 'stone' | 'ice' | 'earth' | 'sand' | 'fire';
-/** Spacing density: `compact` (tight), `default` (balanced), `relaxed` (spacious) */
-export type DensityPreset = 'compact' | 'default' | 'relaxed';
-/** Border radius style: `sharp` (0), `subtle` (2px), `default` (4px), `rounded` (8px), `pill` (9999px) */
-export type RadiusStyle = 'sharp' | 'subtle' | 'default' | 'rounded' | 'pill';
+// Import + re-export seed derivation types — canonical definitions in utils/seed-derivation.ts
+import type { NeutralPalette, DensityPreset, RadiusStyle } from '../../utils/seed-derivation';
+export type { NeutralPalette, DensityPreset, RadiusStyle };
 
 export interface ConfigureThemeOptions {
   /** Brand/accent color as hex */
@@ -420,12 +408,14 @@ interface DensityConfig {
   baseFontSize: number;
   buttonHeights: [number, number, number]; // sm, md, lg
   inputHeights: [number, number, number]; // sm, default, lg
+  touchTargets: [number, number, number]; // sm, md, lg — WCAG 2.5.8: ≥24px
+  sidebarItemHeight: number;
 }
 
 const DENSITY_CONFIGS: Record<DensityPreset, DensityConfig> = {
-  compact:  { baseUnit: 6,  baseFontSize: 14, buttonHeights: [24, 30, 36], inputHeights: [24, 32, 36] },
-  default:  { baseUnit: 7,  baseFontSize: 14, buttonHeights: [28, 36, 44], inputHeights: [28, 40, 44] },
-  relaxed:  { baseUnit: 8,  baseFontSize: 14, buttonHeights: [32, 40, 48], inputHeights: [32, 44, 48] },
+  compact:  { baseUnit: 6,  baseFontSize: 14, buttonHeights: [24, 30, 36], inputHeights: [24, 32, 36], touchTargets: [24, 28, 38], sidebarItemHeight: 30 },
+  default:  { baseUnit: 7,  baseFontSize: 14, buttonHeights: [28, 36, 44], inputHeights: [28, 40, 44], touchTargets: [24, 32, 44], sidebarItemHeight: 35 },
+  relaxed:  { baseUnit: 8,  baseFontSize: 14, buttonHeights: [32, 40, 48], inputHeights: [32, 44, 48], touchTargets: [28, 36, 48], sidebarItemHeight: 38 },
 };
 
 function pxToRem(px: number, baseFontSize: number): string {
@@ -508,6 +498,10 @@ export function configureTheme(options: ConfigureThemeOptions): void {
     if (d) {
       const unitRem = d.baseUnit / d.baseFontSize;
 
+      // Micro spacing
+      setVar(root, '--fui-space-0-5', `${unitRem * 0.3}rem`);
+      setVar(root, '--fui-space-0-75', `${unitRem * 0.43}rem`);
+
       // Spacing scale
       setVar(root, '--fui-space-1', `${unitRem}rem`);
       setVar(root, '--fui-space-2', `${unitRem * 2}rem`);
@@ -527,6 +521,14 @@ export function configureTheme(options: ConfigureThemeOptions): void {
       setVar(root, '--fui-input-height', pxToRem(d.inputHeights[1], d.baseFontSize));
       setVar(root, '--fui-input-height-lg', pxToRem(d.inputHeights[2], d.baseFontSize));
 
+      // Touch targets (WCAG 2.5.8: all values ≥24px)
+      setVar(root, '--fui-touch-sm', pxToRem(d.touchTargets[0], d.baseFontSize));
+      setVar(root, '--fui-touch-md', pxToRem(d.touchTargets[1], d.baseFontSize));
+      setVar(root, '--fui-touch-lg', pxToRem(d.touchTargets[2], d.baseFontSize));
+
+      // Sidebar navigation
+      setVar(root, '--fui-sidebar-item-height', pxToRem(d.sidebarItemHeight, d.baseFontSize));
+
       // Base unit
       setVar(root, '--fui-base-unit', `${d.baseUnit}px`);
     }

package/src/components/ThinkingIndicator/ThinkingIndicator.module.scss

@@ -38,7 +38,7 @@
 .dots {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: calc(var(--fui-space-px, $fui-space-px) * 4);
 }
 
 .dot {

package/src/components/Toast/Toast.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 // ============================================
 // Toast Container
@@ -63,8 +63,8 @@
 .toast {
   display: flex;
   align-items: flex-start;
-  gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-padding-inline-sm, $fui-padding-inline-sm) var(--fui-padding-inline-md, $fui-padding-inline-md);
+  gap: var(--fui-space-1, $fui-space-1);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   border: 1px solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -189,7 +189,8 @@
   }
 
   &:focus-visible {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid var(--fui-focus-ring-color, $fui-focus-ring-color);
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-focus-ring-color, $fui-focus-ring-color);
     outline-offset: var(--fui-focus-ring-offset, $fui-focus-ring-offset);
   }
 }
@@ -226,7 +227,8 @@
   }
 
   &:focus-visible {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid var(--fui-focus-ring-color, $fui-focus-ring-color);
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-focus-ring-color, $fui-focus-ring-color);
     outline-offset: var(--fui-focus-ring-offset, $fui-focus-ring-offset);
   }
 }

package/src/components/Toast/index.tsx

@@ -28,6 +28,11 @@ export interface ToastData {
   };
 }
 
+export interface ToastInput extends Omit<ToastData, 'id'> {
+  /** Optional explicit id (useful for deterministic tests / replacing a known toast) */
+  id?: string;
+}
+
 export interface ToastProps extends Omit<ToastData, 'id'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   /** Callback when toast should be dismissed */
   onDismiss?: () => void;
@@ -50,7 +55,7 @@ export interface ToastProviderProps {
 
 interface ToastContextValue {
   toasts: ToastData[];
-  addToast: (toast: Omit<ToastData, 'id'>) => string;
+  addToast: (toast: ToastInput) => string;
   removeToast: (id: string) => void;
   clearToasts: () => void;
 }
@@ -67,25 +72,25 @@ export function useToast() {
     throw new Error('useToast must be used within a ToastProvider');
   }
 
-  const toast = React.useCallback((options: Omit<ToastData, 'id'>) => {
+  const toast = React.useCallback((options: ToastInput) => {
     return context.addToast(options);
   }, [context]);
 
-  const success = React.useCallback((title: string, description?: string) => {
-    return context.addToast({ title, description, variant: 'success' });
-  }, [context]);
-
-  const error = React.useCallback((title: string, description?: string) => {
-    return context.addToast({ title, description, variant: 'error' });
-  }, [context]);
+  const makeVariantHelper = React.useCallback(
+    (variant: ToastVariant) =>
+      (titleOrOptions: string | Omit<ToastInput, 'variant'>, description?: string) => {
+        if (typeof titleOrOptions === 'string') {
+          return context.addToast({ title: titleOrOptions, description, variant });
+        }
+        return context.addToast({ ...titleOrOptions, variant });
+      },
+    [context]
+  );
 
-  const warning = React.useCallback((title: string, description?: string) => {
-    return context.addToast({ title, description, variant: 'warning' });
-  }, [context]);
-
-  const info = React.useCallback((title: string, description?: string) => {
-    return context.addToast({ title, description, variant: 'info' });
-  }, [context]);
+  const success = React.useMemo(() => makeVariantHelper('success'), [makeVariantHelper]);
+  const error = React.useMemo(() => makeVariantHelper('error'), [makeVariantHelper]);
+  const warning = React.useMemo(() => makeVariantHelper('warning'), [makeVariantHelper]);
+  const info = React.useMemo(() => makeVariantHelper('info'), [makeVariantHelper]);
 
   return {
     toast,
@@ -292,8 +297,6 @@ function ToastContainer({
 // Toast Provider
 // ============================================
 
-let toastCounter = 0;
-
 export function ToastProvider({
   position = 'bottom-right',
   duration = 8000,
@@ -301,6 +304,7 @@ export function ToastProvider({
   children,
 }: ToastProviderProps) {
   const [toasts, setToasts] = React.useState<ToastData[]>([]);
+  const idCounterRef = React.useRef(0);
   const timeoutRef = React.useRef(new Map<string, ReturnType<typeof setTimeout>>());
   const remainingRef = React.useRef(new Map<string, number>());
   const startTimeRef = React.useRef(new Map<string, number>());
@@ -332,8 +336,8 @@ export function ToastProvider({
     [clearRemovalTimer]
   );
 
-  const addToast = React.useCallback((toast: Omit<ToastData, 'id'>) => {
-    const id = `toast-${++toastCounter}`;
+  const addToast = React.useCallback((toast: ToastInput) => {
+    const id = toast.id ?? `toast-${++idCounterRef.current}`;
     const toastDuration = toast.duration ?? (toast.action ? 0 : duration);
 
     setToasts((prev) => {

package/src/components/Toggle/Toggle.module.scss

@@ -4,9 +4,10 @@
 .root {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-3, $fui-space-3);
+  gap: var(--fui-space-2, $fui-space-2);
   cursor: pointer;
   font-family: var(--fui-font-sans, $fui-font-sans);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-disabled] {
     cursor: not-allowed;
@@ -14,7 +15,7 @@
   }
 }
 
-.rootWithDescription {
+.rootWithHelper {
   align-items: flex-start;
 
   .track {
@@ -22,64 +23,119 @@
   }
 }
 
+// iOS-style track: solid fill, clean pill shape
 .track {
-  @include button-reset;
-  @include interactive-base;
-  @include min-target-size;
-
   position: relative;
+  display: inline-flex;
+  align-items: center;
   flex-shrink: 0;
+  box-sizing: content-box;
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  background-color: var(--fui-border-strong, $fui-border-strong);
+  border: none;
+  // iOS unchecked: semi-transparent gray — visible in both light and dark
+  background-color: var(--fui-bg-active, $fui-bg-active);
+  overflow: hidden;
   transition: background-color var(--fui-transition-normal, $fui-transition-normal);
 
+  // Checked: accent fill
   .root[data-checked] & {
     background-color: var(--fui-color-accent, $fui-color-accent);
   }
 
-  .root:not([data-disabled]) &:hover {
-    opacity: 0.9;
+  // Hover (unchecked): slightly more opaque
+  .root:not([data-disabled]):not([data-checked]) &:hover {
+    background-color: var(--fui-border, $fui-border);
+  }
+
+  // Hover (checked): accent hover
+  .root:not([data-disabled])[data-checked] &:hover {
+    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+  }
+
+  // Focus ring (consistent box-shadow approach across all form controls)
+  .root:focus-visible & {
+    @include focus-ring;
   }
 }
 
+// Sm: 40×24
 .trackSm {
   width: var(--fui-toggle-width-sm, $fui-toggle-width-sm);
   height: var(--fui-toggle-height-sm, $fui-toggle-height-sm);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-sm, #{$fui-toggle-height-sm}) - 0.5rem);
-  --_toggle-inset: calc((var(--fui-toggle-height-sm, #{$fui-toggle-height-sm}) - var(--_toggle-thumb-size)) / 2);
+  --_toggle-thumb-size: calc(var(--fui-toggle-height-sm, #{$fui-toggle-height-sm}) - 4px);
+  --_toggle-inset: 2px;
   --_toggle-translate: calc(
     var(--fui-toggle-width-sm, #{$fui-toggle-width-sm}) -
     var(--_toggle-thumb-size) -
-    (var(--_toggle-inset) * 2)
+    4px
+  );
+}
+
+// Lg: 60×36
+.trackLg {
+  width: var(--fui-toggle-width-lg, $fui-toggle-width-lg);
+  height: var(--fui-toggle-height-lg, $fui-toggle-height-lg);
+  --_toggle-thumb-size: calc(var(--fui-toggle-height-lg, #{$fui-toggle-height-lg}) - 4px);
+  --_toggle-inset: 2px;
+  --_toggle-translate: calc(
+    var(--fui-toggle-width-lg, #{$fui-toggle-width-lg}) -
+    var(--_toggle-thumb-size) -
+    4px
   );
 }
 
+// Md: 51×31 (iOS standard)
 .trackMd {
   width: var(--fui-toggle-width-md, $fui-toggle-width-md);
   height: var(--fui-toggle-height-md, $fui-toggle-height-md);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-md, #{$fui-toggle-height-md}) - 0.5rem);
-  --_toggle-inset: calc((var(--fui-toggle-height-md, #{$fui-toggle-height-md}) - var(--_toggle-thumb-size)) / 2);
+  --_toggle-thumb-size: calc(var(--fui-toggle-height-md, #{$fui-toggle-height-md}) - 4px);
+  --_toggle-inset: 2px;
   --_toggle-translate: calc(
     var(--fui-toggle-width-md, #{$fui-toggle-width-md}) -
     var(--_toggle-thumb-size) -
-    (var(--_toggle-inset) * 2)
+    4px
   );
 }
 
+// iOS-style thumb: always white, multi-layer shadow.
+// The thumb is intentionally always white (#fff) to match iOS toggle UX — this is
+// a hardcoded design decision (like CodeBlock/Tooltip dark surfaces). Override via
+// --fui-toggle-thumb-bg and --fui-toggle-thumb-shadow CSS custom properties.
 .thumb {
   position: absolute;
   top: var(--_toggle-inset, $fui-toggle-thumb-offset);
   left: var(--_toggle-inset, $fui-toggle-thumb-offset);
+  box-sizing: border-box;
   width: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
   height: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
   border-radius: 50%;
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
-  box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
-  transition: transform var(--fui-transition-normal, $fui-transition-normal);
+  pointer-events: none;
+  background-color: var(--fui-toggle-thumb-bg, #fff);
+  box-shadow: var(
+    --fui-toggle-thumb-shadow,
+    0 3px 8px rgba(0, 0, 0, 0.15),
+    0 1px 1px rgba(0, 0, 0, 0.06),
+    0 3px 1px rgba(0, 0, 0, 0.06)
+  );
+  transition:
+    transform var(--fui-transition-normal, $fui-transition-normal),
+    background-color var(--fui-transition-normal, $fui-transition-normal),
+    width var(--fui-transition-fast, $fui-transition-fast);
 
+  // Slide right when checked — inverse color for contrast against accent
   .root[data-checked] & {
-    // Move thumb to the right when checked
     transform: translateX(var(--_toggle-translate, 0));
+    background-color: var(--fui-text-inverse, $fui-text-inverse);
+  }
+
+  // Press: stretch thumb wider (iOS 17+)
+  .root:active:not([data-disabled]) & {
+    width: calc(var(--_toggle-thumb-size, #{$fui-toggle-thumb-md}) + 4px);
+  }
+
+  // Press + checked: compensate translate for wider thumb
+  .root:active:not([data-disabled])[data-checked] & {
+    transform: translateX(calc(var(--_toggle-translate, 0) - 4px));
   }
 }
 
@@ -92,24 +148,43 @@
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
   line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  user-select: none;
 }
 
 .labelSm {
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
 }
 
-.description {
+.labelLg {
+  font-size: var(--fui-font-size-base, $fui-font-size-base);
+}
+
+.helper {
   display: block;
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  margin-top: var(--fui-space-0-5, $fui-space-0-5);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  margin-top: var(--fui-space-1, $fui-space-1);
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-.descriptionSm {
+.helperSm {
   font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
 }
 
+// ============================================
+// Accessibility: High Contrast Mode
+// ============================================
+
+@media (prefers-contrast: more) {
+  .track {
+    border: 2px solid var(--fui-text-primary, $fui-text-primary);
+  }
+
+  .root[data-checked] .track {
+    border-color: var(--fui-color-accent, $fui-color-accent);
+  }
+}
+
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================