@fragments-sdk/ui 0.8.1 → 0.8.3

package/src/components/Prompt/Prompt.test.tsx

@@ -7,6 +7,7 @@ function renderPrompt(props: {
   placeholder?: string;
   disabled?: boolean;
   defaultValue?: string;
+  loading?: boolean;
 } = {}) {
   return render(
     <Prompt
@@ -14,6 +15,7 @@ function renderPrompt(props: {
       onSubmit={props.onSubmit}
       disabled={props.disabled}
       defaultValue={props.defaultValue}
+      loading={props.loading}
     >
       <Prompt.Textarea />
       <Prompt.Toolbar>
@@ -82,6 +84,12 @@ describe('Prompt', () => {
     expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
   });
 
+  it('shows loading spinner icon in submit button when loading', () => {
+    renderPrompt({ loading: true, defaultValue: 'Submitting...' });
+    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+    expect(screen.getByRole('status', { name: /submitting/i })).toBeInTheDocument();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderPrompt();
     await expectNoA11yViolations(container);

package/src/components/Prompt/index.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import styles from './Prompt.module.scss';
 import '../../styles/globals.scss';
+import { Loading } from '../Loading';
 
 // ============================================
 // Types
@@ -404,7 +405,17 @@ function PromptSubmit({
       disabled={isDisabled}
       aria-label={ariaLabel}
     >
-      {children ?? <ArrowUpIcon />}
+      {loading ? (
+        <Loading
+          size="sm"
+          variant="spinner"
+          color="current"
+          label="Submitting"
+          className={styles.submitSpinner}
+        />
+      ) : (
+        children ?? <ArrowUpIcon />
+      )}
     </button>
   );
 }

package/src/components/RadioGroup/RadioGroup.fragment.tsx

@@ -23,7 +23,7 @@ export default defineFragment({
     whenNot: [
       'Multiple selections allowed (use Checkbox group)',
       'Many options (use Select)',
-      'Binary on/off choice (use Toggle/Switch)',
+      'Binary on/off choice (use Switch)',
       'Options need to be searchable (use Combobox)',
     ],
     guidelines: [
@@ -96,9 +96,9 @@ export default defineFragment({
       note: 'Use Select for many options or limited space',
     },
     {
-      component: 'Toggle',
+      component: 'Switch',
       relationship: 'alternative',
-      note: 'Use Toggle for binary on/off choices',
+      note: 'Use Switch for binary on/off choices',
     },
   ],
 
@@ -118,6 +118,7 @@ export default defineFragment({
     a11yRules: [
       'A11Y_RADIO_GROUP',
       'A11Y_LABEL_REQUIRED',
+      'A11Y_TARGET_SIZE_MIN',
     ],
     bans: [],
   },

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -30,11 +30,15 @@
 // Individual item wrapper
 .itemWrapper {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   cursor: pointer;
   font-family: var(--fui-font-sans, $fui-font-sans);
 
+  &[data-has-description] {
+    align-items: flex-start;
+  }
+
   &[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
@@ -44,15 +48,13 @@
 // The radio circle
 .radio {
   @include interactive-base;
+  @include touch-target;
 
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  margin-top: var(--fui-space-0-5, $fui-space-0-5);
+  margin-top: 0;
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   border: 1px solid var(--fui-border-strong, $fui-border-strong);
   border-radius: var(--fui-radius-full, $fui-radius-full);
@@ -80,13 +82,11 @@
 .radioSm {
   width: 0.875rem;
   height: 0.875rem;
-  margin-top: var(--fui-space-0-75, $fui-space-0-75);
 }
 
 .radioLg {
   width: 1.25rem;
   height: 1.25rem;
-  margin-top: 0;
 }
 
 // The indicator dot - use absolute positioning for perfect centering
@@ -94,8 +94,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 

package/src/components/RadioGroup/index.tsx

@@ -112,7 +112,11 @@ function RadioItem({
   }
 
   return (
-    <label className={wrapperClasses} data-disabled={disabled || undefined}>
+    <label
+      className={wrapperClasses}
+      data-disabled={disabled || undefined}
+      data-has-description={description ? true : undefined}
+    >
       <BaseRadio.Root
         value={value}
         disabled={disabled}

package/src/components/Sidebar/Sidebar.module.scss

@@ -124,11 +124,18 @@
 
 .nav {
   flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   padding: var(--fui-padding-item-sm, $fui-padding-item-sm);
 }
 
+.navScrollArea {
+  flex: 1;
+  min-height: 0;
+}
+
 // ============================================
 // Section
 // ============================================

package/src/components/Sidebar/Sidebar.test.tsx

@@ -55,6 +55,12 @@ describe('Sidebar', () => {
     expect(screen.getByRole('navigation', { name: /main/i })).toBeInTheDocument();
   });
 
+  it('uses ScrollArea with fade indicators in nav content', () => {
+    renderSidebar();
+    const scrollAreaRoot = screen.getByRole('navigation', { name: /main/i }).querySelector('[data-orientation="vertical"]');
+    expect(scrollAreaRoot).toBeInTheDocument();
+  });
+
   it('renders section with label', () => {
     renderSidebar();
     expect(screen.getByText('Section One')).toBeInTheDocument();

package/src/components/Sidebar/index.tsx

@@ -3,6 +3,7 @@ import styles from './Sidebar.module.scss';
 import { Tooltip } from '../Tooltip';
 import { Skeleton } from '../Skeleton';
 import { Collapsible } from '../Collapsible';
+import { ScrollArea } from '../ScrollArea';
 import { useFocusTrap } from '../../utils/a11y';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';
@@ -655,7 +656,9 @@ function SidebarNav({ children, 'aria-label': ariaLabel = 'Main navigation', cla
   const classes = [styles.nav, className].filter(Boolean).join(' ');
   return (
     <nav className={classes} aria-label={ariaLabel}>
-      {children}
+      <ScrollArea orientation="vertical" showFades className={styles.navScrollArea}>
+        {children}
+      </ScrollArea>
     </nav>
   );
 }

package/src/components/Slider/Slider.fragment.tsx

@@ -24,7 +24,7 @@ export default defineFragment({
     whenNot: [
       'Precise numeric input (use Input type="number")',
       'Discrete options (use RadioGroup or Select)',
-      'Yes/no choices (use Toggle)',
+      'Yes/no choices (use Switch)',
     ],
     guidelines: [
       'Always provide a label describing what the slider controls',
@@ -109,7 +109,7 @@ export default defineFragment({
       'input.numeric',
       'control.slider',
     ],
-    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_KEYBOARD_ACCESSIBLE'],
+    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_KEYBOARD_ACCESSIBLE', 'A11Y_TARGET_SIZE_MIN'],
   },
 
   variants: [

package/src/components/Slider/Slider.module.scss

@@ -57,6 +57,8 @@
 }
 
 .thumb {
+  @include min-target-size;
+
   width: $fui-slider-thumb-size;
   height: $fui-slider-thumb-size;
   background-color: var(--fui-bg-primary, $fui-bg-primary);

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps, Toggle, type ToggleProps } from '../Toggle';

package/src/components/Table/Table.fragment.tsx

@@ -58,7 +58,7 @@ export default defineFragment({
     ],
     whenNot: [
       'Simple lists (use List component)',
-      'Card-based layouts (use CardGrid)',
+      'Card-based layouts (use Grid with Cards)',
       'Heavily interactive data (consider DataGrid)',
       'Small screens (consider card or list view)',
     ],

package/src/components/Theme/Theme.fragment.tsx

@@ -89,6 +89,22 @@ export default defineFragment({
     { component: 'AppShell', relationship: 'sibling', note: 'ThemeProvider typically wraps AppShell' },
   ],
 
+  contract: {
+    propsSummary: [
+      'defaultMode: light|dark|system - initial theme mode',
+      'mode: light|dark|system - controlled mode',
+      'onModeChange: (mode) => void - change handler',
+      'attribute: data-theme|class - DOM theme attribute',
+      'ThemeToggle size: sm|md|lg - toggle button size',
+    ],
+    scenarioTags: [
+      'navigation.theme',
+      'settings.appearance',
+      'ui.mode-toggle',
+    ],
+    a11yRules: ['A11Y_TARGET_SIZE_MIN'],
+  },
+
   variants: [
     {
       name: 'Default',

package/src/components/Theme/ThemeToggle.module.scss

@@ -16,6 +16,7 @@
 .toggleButton {
   @include button-reset;
   @include interactive-base;
+  @include min-target-size;
 
   display: flex;
   align-items: center;
@@ -29,8 +30,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--fui-color-accent, $fui-color-accent);
-    outline-offset: 1px;
+    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);
   }
 
   svg {
@@ -41,7 +42,7 @@
 .toggleButtonActive {
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   color: var(--fui-text-primary, $fui-text-primary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
 }
 
 // Size variants

package/src/components/Toast/Toast.fragment.tsx

@@ -150,6 +150,7 @@ export default defineFragment({
     ],
     a11yRules: [
       'A11Y_ALERT_ROLE',
+      'A11Y_TARGET_SIZE_MIN',
     ],
     bans: [],
   },

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

@@ -1,4 +1,5 @@
 @use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
 
 // ============================================
 // Toast Container
@@ -77,7 +78,7 @@
 @keyframes toastEnter {
   from {
     opacity: 0;
-    transform: translateY(8px) scale(0.96);
+    transform: translateY($fui-anim-offset-md) scale(0.96);
   }
   to {
     opacity: 1;
@@ -168,6 +169,11 @@
 
 .action {
   flex-shrink: 0;
+  @include min-target-size;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
@@ -194,9 +200,8 @@
 
 .close {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include touch-target;
+
   width: 1.5rem;
   height: 1.5rem;
   margin: -2px -4px -2px 0;

package/src/components/Toggle/Toggle.fragment.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { defineFragment } from '@fragments/core';
-import { Toggle } from '.';
+import { Switch } from '.';
 
 // Stateful wrapper for interactive demos
-function StatefulToggle(props: React.ComponentProps<typeof Toggle>) {
+function StatefulSwitch(props: React.ComponentProps<typeof Switch>) {
   const [checked, setChecked] = useState(props.checked ?? false);
-  return <Toggle {...props} checked={checked} onChange={setChecked} />;
+  return <Switch {...props} checked={checked} onChange={setChecked} />;
 }
 
 export default defineFragment({
-  component: Toggle,
+  component: Switch,
 
   meta: {
-    name: 'Toggle',
+    name: 'Switch',
     description: 'Binary on/off switch for settings and preferences. Provides immediate visual feedback and is ideal for options that take effect instantly.',
     category: 'forms',
     status: 'stable',
@@ -34,11 +34,11 @@ export default defineFragment({
       'Complex multi-state options (use select or radio)',
     ],
     guidelines: [
-      'Toggle should always have a visible label explaining what it controls',
+      'Switch should always have a visible label explaining what it controls',
       'The "on" state should be the positive/enabling action',
       'Changes should take effect immediately - no save button needed',
-      'Include a description for toggles whose effect isn\'t obvious from the label',
-      'Group related toggles visually in settings panels',
+      'Include a description for switches whose effect isn\'t obvious from the label',
+      'Group related switches visually in settings panels',
     ],
     accessibility: [
       'Uses role="switch" with aria-checked for proper semantics',
@@ -51,7 +51,7 @@ export default defineFragment({
   props: {
     checked: {
       type: 'boolean',
-      description: 'Whether the toggle is in the on state',
+      description: 'Whether the switch is in the on state',
       default: 'false',
     },
     onChange: {
@@ -68,19 +68,19 @@ export default defineFragment({
     },
     disabled: {
       type: 'boolean',
-      description: 'Whether the toggle is non-interactive',
+      description: 'Whether the switch is non-interactive',
       default: 'false',
     },
     size: {
       type: 'enum',
-      description: 'Toggle track size',
+      description: 'Switch track size',
       values: ['sm', 'md'],
       default: 'md',
     },
   },
 
   relations: [
-    { component: 'Input', relationship: 'sibling', note: 'Input handles text/number entry; Toggle handles boolean state' },
+    { component: 'Input', relationship: 'sibling', note: 'Input handles text/number entry; Switch handles boolean state' },
     { component: 'Checkbox', relationship: 'alternative', note: 'Use Checkbox when change requires form submission' },
   ],
 
@@ -91,35 +91,35 @@ export default defineFragment({
       'label: string - visible label text',
       'description: string - helper text below label',
       'disabled: boolean - non-interactive state',
-      'size: sm|md - toggle size',
+      'size: sm|md - switch size',
     ],
     scenarioTags: [
       'form.boolean',
-      'settings.toggle',
+      'settings.switch',
       'settings.preference',
       'form.switch',
     ],
-    a11yRules: ['A11Y_SWITCH_ROLE', 'A11Y_SWITCH_LABEL', 'A11Y_SWITCH_FOCUS'],
+    a11yRules: ['A11Y_SWITCH_ROLE', 'A11Y_SWITCH_LABEL', 'A11Y_SWITCH_FOCUS', 'A11Y_TARGET_SIZE_MIN'],
   },
 
   variants: [
     {
       name: 'Default Off',
-      description: 'Toggle in the off state',
-      render: () => <StatefulToggle label="Email notifications" />,
+      description: 'Switch in the off state',
+      render: () => <StatefulSwitch label="Email notifications" />,
       args: { label: 'Email notifications' },
     },
     {
       name: 'Checked',
-      description: 'Toggle in the on state',
-      render: () => <StatefulToggle checked label="Dark mode" />,
+      description: 'Switch in the on state',
+      render: () => <StatefulSwitch checked label="Dark mode" />,
       args: { checked: true, label: 'Dark mode' },
     },
     {
       name: 'With Description',
-      description: 'Toggle with explanatory helper text',
+      description: 'Switch with explanatory helper text',
       render: () => (
-        <StatefulToggle
+        <StatefulSwitch
           checked
           label="Auto-save"
           description="Automatically save changes as you type"
@@ -129,41 +129,41 @@ export default defineFragment({
     },
     {
       name: 'Small Size',
-      description: 'Compact toggle for dense settings panels',
+      description: 'Compact switch for dense settings panels',
       render: () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <StatefulToggle size="sm" checked label="Show line numbers" />
-          <StatefulToggle size="sm" label="Word wrap" />
-          <StatefulToggle size="sm" checked label="Minimap" />
+          <StatefulSwitch size="sm" checked label="Show line numbers" />
+          <StatefulSwitch size="sm" label="Word wrap" />
+          <StatefulSwitch size="sm" checked label="Minimap" />
         </div>
       ),
     },
     {
       name: 'Disabled States',
-      description: 'Non-interactive toggles showing both states',
+      description: 'Non-interactive switches showing both states',
       render: () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Toggle disabled label="Premium feature (upgrade required)" />
-          <Toggle disabled checked label="System managed (read-only)" />
+          <Switch disabled label="Premium feature (upgrade required)" />
+          <Switch disabled checked label="System managed (read-only)" />
         </div>
       ),
     },
     {
       name: 'Settings Panel',
-      description: 'Multiple toggles in a realistic settings layout',
+      description: 'Multiple switches in a realistic settings layout',
       render: () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>
-          <StatefulToggle
+          <StatefulSwitch
             checked
             label="Push notifications"
             description="Receive push notifications on your device"
           />
-          <StatefulToggle
+          <StatefulSwitch
             checked
             label="Email digest"
             description="Weekly summary of your activity"
           />
-          <StatefulToggle
+          <StatefulSwitch
             label="Marketing emails"
             description="Product updates and promotional offers"
           />

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));
   }
 }