@fragments-sdk/ui 0.8.2 → 0.8.4

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

@@ -3,7 +3,7 @@
 
 .root {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
   cursor: pointer;
   font-family: var(--fui-font-sans, $fui-font-sans);
@@ -14,21 +14,30 @@
   }
 }
 
+.rootWithDescription {
+  align-items: flex-start;
+
+  .track {
+    margin-top: var(--fui-space-0-5, $fui-space-0-5);
+  }
+}
+
 .track {
   @include button-reset;
   @include interactive-base;
+  @include min-target-size;
 
   position: relative;
   flex-shrink: 0;
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  margin-top: var(--fui-space-0-5, $fui-space-0-5);
   background-color: var(--fui-border-strong, $fui-border-strong);
+  transition: background-color var(--fui-transition-normal, $fui-transition-normal);
 
-  &[data-checked] {
+  .root[data-checked] & {
     background-color: var(--fui-color-accent, $fui-color-accent);
   }
 
-  &:hover:not(:disabled) {
+  .root:not([data-disabled]) &:hover {
     opacity: 0.9;
   }
 }
@@ -36,43 +45,41 @@
 .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-translate: calc(
+    var(--fui-toggle-width-sm, #{$fui-toggle-width-sm}) -
+    var(--_toggle-thumb-size) -
+    (var(--_toggle-inset) * 2)
+  );
 }
 
 .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-translate: calc(
+    var(--fui-toggle-width-md, #{$fui-toggle-width-md}) -
+    var(--_toggle-thumb-size) -
+    (var(--_toggle-inset) * 2)
+  );
 }
 
 .thumb {
   position: absolute;
-  top: $fui-toggle-thumb-offset;
-  left: $fui-toggle-thumb-offset;
+  top: var(--_toggle-inset, $fui-toggle-thumb-offset);
+  left: var(--_toggle-inset, $fui-toggle-thumb-offset);
+  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);
 
-  [data-checked] > & {
+  .root[data-checked] & {
     // Move thumb to the right when checked
-    transform: translateX(calc(100%));
-  }
-}
-
-.thumbSm {
-  width: $fui-toggle-thumb-sm;
-  height: $fui-toggle-thumb-sm;
-
-  [data-checked] > & {
-    transform: translateX($fui-toggle-thumb-sm);
-  }
-}
-
-.thumbMd {
-  width: $fui-toggle-thumb-md;
-  height: $fui-toggle-thumb-md;
-
-  [data-checked] > & {
-    transform: translateX($fui-toggle-thumb-md);
+    transform: translateX(var(--_toggle-translate, 0));
   }
 }
 

package/src/components/Toggle/Toggle.test.tsx

@@ -1,49 +1,49 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Toggle } from './index';
+import { Switch } from './index';
 
-describe('Toggle', () => {
+describe('Switch', () => {
   it('renders a switch role', () => {
-    render(<Toggle aria-label="Dark mode" />);
+    render(<Switch aria-label="Dark mode" />);
     expect(screen.getByRole('switch')).toBeInTheDocument();
   });
 
   it('is unchecked by default', () => {
-    render(<Toggle aria-label="Dark mode" />);
+    render(<Switch aria-label="Dark mode" />);
     expect(screen.getByRole('switch')).not.toBeChecked();
   });
 
   it('renders as checked when checked prop is true', () => {
-    render(<Toggle aria-label="Dark mode" checked onChange={() => {}} />);
+    render(<Switch aria-label="Dark mode" checked onChange={() => {}} />);
     expect(screen.getByRole('switch')).toBeChecked();
   });
 
   it('renders label text', () => {
-    render(<Toggle label="Dark mode" />);
+    render(<Switch label="Dark mode" />);
     expect(screen.getByText('Dark mode')).toBeInTheDocument();
   });
 
   it('renders description text', () => {
-    render(<Toggle label="Notifications" description="Enable push alerts" />);
+    render(<Switch label="Notifications" description="Enable push alerts" />);
     expect(screen.getByText('Enable push alerts')).toBeInTheDocument();
   });
 
   it('disables the switch', () => {
-    render(<Toggle aria-label="Dark mode" disabled />);
+    render(<Switch aria-label="Dark mode" disabled />);
     expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('calls onChange with the new value on click', async () => {
     const handleChange = vi.fn();
     const user = userEvent.setup();
-    render(<Toggle aria-label="Dark mode" onChange={handleChange} />);
+    render(<Switch aria-label="Dark mode" onChange={handleChange} />);
     await user.click(screen.getByRole('switch'));
     expect(handleChange).toHaveBeenCalled();
     expect(handleChange.mock.calls[0][0]).toBe(true);
   });
 
   it('has no accessibility violations', async () => {
-    const { container } = render(<Toggle aria-label="Accessible toggle" />);
+    const { container } = render(<Switch aria-label="Accessible switch" />);
     await expectNoA11yViolations(container);
   });
 });

package/src/components/Toggle/index.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Switch } from '@base-ui/react/switch';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import styles from './Toggle.module.scss';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';
 
-export interface ToggleProps {
+export interface SwitchProps {
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -20,8 +20,10 @@ export interface ToggleProps {
   'aria-describedby'?: string;
 }
 
-const ToggleRoot = React.forwardRef<HTMLButtonElement, ToggleProps>(
-  function Toggle(
+export type ToggleProps = SwitchProps;
+
+const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  function Switch(
     {
       checked,
       defaultChecked,
@@ -44,10 +46,7 @@ const ToggleRoot = React.forwardRef<HTMLButtonElement, ToggleProps>(
       size === 'sm' ? styles.trackSm : styles.trackMd,
     ].join(' ');
 
-    const thumbClasses = [
-      styles.thumb,
-      size === 'sm' ? styles.thumbSm : styles.thumbMd,
-    ].join(' ');
+    const thumbClasses = styles.thumb;
 
     const labelClasses = [styles.label, size === 'sm' && styles.labelSm]
       .filter(Boolean)
@@ -60,10 +59,16 @@ const ToggleRoot = React.forwardRef<HTMLButtonElement, ToggleProps>(
       .filter(Boolean)
       .join(' ');
 
-    const rootClasses = [styles.root, className].filter(Boolean).join(' ');
+    const rootClasses = [
+      styles.root,
+      description && styles.rootWithDescription,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
 
     return (
-      <Switch.Root
+      <BaseSwitch.Root
         ref={ref}
         id={id}
         checked={checked}
@@ -76,9 +81,9 @@ const ToggleRoot = React.forwardRef<HTMLButtonElement, ToggleProps>(
         aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedBy}
       >
-        <Switch.Thumb className={trackClasses}>
+        <BaseSwitch.Thumb className={trackClasses}>
           <span className={thumbClasses} aria-hidden="true" />
-        </Switch.Thumb>
+        </BaseSwitch.Thumb>
 
         {(label || description) && (
           <div className={styles.content}>
@@ -86,11 +91,14 @@ const ToggleRoot = React.forwardRef<HTMLButtonElement, ToggleProps>(
             {description && <span className={descClasses}>{description}</span>}
           </div>
         )}
-      </Switch.Root>
+      </BaseSwitch.Root>
     );
   }
 );
 
-export const Toggle = Object.assign(ToggleRoot, {
-  Root: ToggleRoot,
+export const Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
 });
+
+/** @deprecated Use `Switch` instead. */
+export const Toggle = Switch;

package/src/components/ToggleGroup/ToggleGroup.fragment.tsx

@@ -115,7 +115,7 @@ export default defineFragment({
       'Multiple selections allowed (use Checkbox group)',
       'Many options (use Select or RadioGroup)',
       'Navigation between pages (use Tabs)',
-      'On/off toggle (use Toggle component)',
+      'On/off toggle (use Switch component)',
     ],
     guidelines: [
       'Keep options to 2-5 items for clarity',
@@ -170,7 +170,7 @@ export default defineFragment({
   relations: [
     { component: 'RadioGroup', relationship: 'alternative', note: 'RadioGroup for form-style single selection' },
     { component: 'Tabs', relationship: 'alternative', note: 'Tabs for content panel switching' },
-    { component: 'Toggle', relationship: 'sibling', note: 'Toggle for single on/off control' },
+    { component: 'Switch', relationship: 'sibling', note: 'Switch for single on/off control' },
   ],
 
   contract: {

package/src/index.ts

@@ -23,7 +23,12 @@ export {
   type CardBodyProps,
   type CardFooterProps,
 } from './components/Card';
-export { Toggle, type ToggleProps } from './components/Toggle';
+export {
+  Switch,
+  type SwitchProps,
+  Switch as Toggle,
+  type SwitchProps as ToggleProps,
+} from './components/Switch';
 export {
   Alert,
   AlertRoot,

package/src/tokens/_mixins.scss

@@ -47,6 +47,20 @@
   }
 }
 
+// Enforce minimum pointer target dimensions for interactive controls.
+@mixin min-target-size($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
+  min-width: $size;
+  min-height: $size;
+}
+
+// Centered interactive hit area with minimum dimensions.
+@mixin touch-target($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
+  @include min-target-size($size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // Typography base
 @mixin text-base {
   font-family: var(--fui-font-sans, #{$fui-font-sans});

package/src/tokens/_variables.scss

@@ -270,11 +270,15 @@ $fui-touch-sm: computed.$computed-touch-sm !default;
 $fui-touch-md: computed.$computed-touch-md !default;
 $fui-touch-lg: computed.$computed-touch-lg !default;
 
+// Minimum interactive target sizes (WCAG 2.2 SC 2.5.8)
+$fui-target-size-min: 1.714rem !default; // 24px
+$fui-target-size-comfortable: $fui-touch-md !default;
+
 // Toggle/Switch
 $fui-toggle-width-sm: 2.286rem !default;   // 32px
 $fui-toggle-width-md: 2.857rem !default;   // 40px
-$fui-toggle-height-sm: 1.286rem !default;  // 18px
-$fui-toggle-height-md: 1.571rem !default;  // 22px
+$fui-toggle-height-sm: $fui-target-size-min !default; // 24px
+$fui-toggle-height-md: 2rem !default;      // 28px
 $fui-toggle-thumb-sm: 1rem !default;       // 14px
 $fui-toggle-thumb-md: 1.286rem !default;   // 18px
 $fui-toggle-thumb-offset: 2px !default;    // Thumb inset from track edge
@@ -308,7 +312,7 @@ $fui-sidebar-rail-indicator-height-hover: 4rem !default; // 56px
 
 // Slider
 $fui-slider-track-height: 4px !default;
-$fui-slider-thumb-size: $fui-icon-md !default; // 16px
+$fui-slider-thumb-size: $fui-target-size-min !default;
 $fui-slider-thumb-border: 2px !default;
 
 // EmptyState content max-widths
@@ -323,8 +327,8 @@ $fui-emptystate-icon-lg: 2.857rem !default;      // 40px
 
 // ColorChip/ColorPicker
 $fui-colorpicker-size: 180px !default;
-$fui-colorpicker-hue-height: 10px !default;
-$fui-colorpicker-pointer-size: 1rem !default;   // 14px
+$fui-colorpicker-hue-height: $fui-target-size-min !default;
+$fui-colorpicker-pointer-size: $fui-target-size-min !default;
 $fui-colorpicker-pointer-border: 2px !default;
 
 // AppShell Layout
@@ -336,7 +340,7 @@ $fui-header-z-index: 40 !default;
 
 // ThemeToggle sizes (derived from density)
 $fui-theme-toggle-sm-width: 26px !default;
-$fui-theme-toggle-sm-height: 22px !default;
+$fui-theme-toggle-sm-height: 24px !default;
 $fui-theme-toggle-sm-icon: 12px !default;
 $fui-theme-toggle-md-width: 32px !default;
 $fui-theme-toggle-md-height: 28px !default;
@@ -528,6 +532,8 @@ $fui-dark-hero-gradient-color: rgba(120, 119, 198, 0.25) !default;
     --fui-input-height: #{$fui-input-height};
     --fui-input-height-sm: #{$fui-input-height-sm};
     --fui-input-height-lg: #{$fui-input-height-lg};
+    --fui-target-size-min: #{$fui-target-size-min};
+    --fui-target-size-comfortable: #{$fui-target-size-comfortable};
 
     // AppShell Layout
     --fui-appshell-header-height: #{$fui-appshell-header-height};