npm - @sovereignfs/ui - Versions diffs - 0.21.3 → 0.33.0 - Mend

@sovereignfs/ui 0.21.3 → 0.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/dist/Button.module.css +75 -8
package/dist/Calendar.module.css +126 -0
package/dist/Card.module.css +4 -2
package/dist/Checkbox.module.css +109 -0
package/dist/CodeTextarea.module.css +53 -0
package/dist/ConfirmDialog.module.css +109 -0
package/dist/DatePicker.module.css +57 -0
package/dist/Dialog.module.css +73 -46
package/dist/DragHandleRow.module.css +57 -0
package/dist/Drawer.module.css +61 -0
package/dist/FormField.module.css +5 -0
package/dist/Icon.module.css +5 -0
package/dist/Input.module.css +10 -0
package/dist/Menu.module.css +82 -0
package/dist/NavTabs.module.css +4 -2
package/dist/OverlayHeader.module.css +98 -0
package/dist/Popover.module.css +31 -1
package/dist/SegmentedControl.module.css +4 -2
package/dist/Select.module.css +9 -0
package/dist/Sheet.module.css +55 -0
package/dist/SplitPane.module.css +85 -0
package/dist/StatusBadge.module.css +59 -0
package/dist/SystemBanner.module.css +4 -2
package/dist/Tabs.module.css +4 -2
package/dist/TagInput.module.css +141 -0
package/dist/Textarea.module.css +39 -0
package/dist/Toast.module.css +7 -5
package/dist/Toggle.module.css +1 -1
package/dist/Tooltip.module.css +6 -1
package/dist/index.d.ts +549 -20
package/dist/index.js +1496 -193
package/dist/tokens/primitives.css +19 -0
package/dist/tokens/semantic.css +19 -0
package/package.json +1 -1
package/src/__tests__/motion.test.tsx +105 -0
package/src/components/Button/Button.module.css +75 -8
package/src/components/Button/Button.stories.tsx +6 -0
package/src/components/Button/Button.tsx +17 -1
package/src/components/Button/__tests__/Button.test.tsx +19 -0
package/src/components/Calendar/Calendar.module.css +126 -0
package/src/components/Calendar/Calendar.tsx +213 -0
package/src/components/Calendar/__tests__/Calendar.test.tsx +98 -0
package/src/components/Calendar/dateUtils.ts +97 -0
package/src/components/Card/Card.module.css +4 -2
package/src/components/Checkbox/Checkbox.module.css +109 -0
package/src/components/Checkbox/Checkbox.tsx +78 -0
package/src/components/CodeTextarea/CodeTextarea.module.css +53 -0
package/src/components/CodeTextarea/CodeTextarea.stories.tsx +77 -0
package/src/components/CodeTextarea/CodeTextarea.tsx +36 -0
package/src/components/ConfirmDialog/ConfirmDialog.module.css +109 -0
package/src/components/ConfirmDialog/ConfirmDialog.tsx +124 -0
package/src/components/ConfirmDialog/__tests__/ConfirmDialog.test.tsx +146 -0
package/src/components/DatePicker/DatePicker.module.css +57 -0
package/src/components/DatePicker/DatePicker.tsx +103 -0
package/src/components/DatePicker/__tests__/DatePicker.test.tsx +89 -0
package/src/components/Dialog/Dialog.module.css +73 -46
package/src/components/Dialog/Dialog.stories.tsx +51 -1
package/src/components/Dialog/Dialog.tsx +86 -22
package/src/components/Dialog/__tests__/Dialog.test.tsx +67 -3
package/src/components/DragHandleRow/DragHandleRow.module.css +57 -0
package/src/components/DragHandleRow/DragHandleRow.tsx +61 -0
package/src/components/Drawer/Drawer.module.css +61 -0
package/src/components/Drawer/Drawer.tsx +117 -13
package/src/components/Drawer/__tests__/Drawer.test.tsx +123 -2
package/src/components/FormField/FormField.module.css +5 -0
package/src/components/FormField/FormField.tsx +36 -11
package/src/components/FormField/__tests__/FormField.test.tsx +83 -0
package/src/components/Icon/Icon.module.css +5 -0
package/src/components/Icon/Icon.stories.tsx +4 -3
package/src/components/Icon/Icon.tsx +1 -1
package/src/components/Icon/icons/calendar.tsx +23 -0
package/src/components/Icon/icons/ellipsis-vertical.tsx +22 -0
package/src/components/Icon/icons/index.ts +8 -4
package/src/components/Icon/icons/sliders-horizontal.tsx +9 -9
package/src/components/Input/Input.module.css +10 -0
package/src/components/Menu/Menu.module.css +82 -0
package/src/components/Menu/Menu.tsx +137 -0
package/src/components/Menu/__tests__/Menu.test.tsx +197 -0
package/src/components/NavTabs/NavTabs.module.css +4 -2
package/src/components/OverlayHeader/OverlayHeader.module.css +98 -0
package/src/components/OverlayHeader/OverlayHeader.tsx +62 -0
package/src/components/OverlayHeader/__tests__/OverlayHeader.test.tsx +51 -0
package/src/components/Popover/Popover.module.css +31 -1
package/src/components/Popover/Popover.stories.tsx +126 -1
package/src/components/Popover/Popover.tsx +140 -7
package/src/components/SegmentedControl/SegmentedControl.module.css +4 -2
package/src/components/Select/Select.module.css +9 -0
package/src/components/Select/Select.tsx +10 -2
package/src/components/Sheet/Sheet.module.css +55 -0
package/src/components/Sheet/Sheet.tsx +151 -0
package/src/components/Sheet/__tests__/Sheet.test.tsx +99 -0
package/src/components/SplitPane/SplitPane.module.css +85 -0
package/src/components/SplitPane/SplitPane.stories.tsx +160 -0
package/src/components/SplitPane/SplitPane.tsx +149 -0
package/src/components/SplitPane/__tests__/SplitPane.test.tsx +51 -0
package/src/components/StatusBadge/StatusBadge.module.css +59 -0
package/src/components/StatusBadge/StatusBadge.stories.tsx +74 -0
package/src/components/StatusBadge/StatusBadge.tsx +65 -0
package/src/components/SystemBanner/SystemBanner.module.css +4 -2
package/src/components/Tabs/Tabs.module.css +4 -2
package/src/components/TagInput/TagInput.module.css +141 -0
package/src/components/TagInput/TagInput.stories.tsx +109 -0
package/src/components/TagInput/TagInput.tsx +174 -0
package/src/components/TagInput/__tests__/TagInput.test.tsx +69 -0
package/src/components/Textarea/Textarea.module.css +39 -0
package/src/components/Textarea/Textarea.tsx +15 -0
package/src/components/Textarea/__tests__/Textarea.test.tsx +29 -0
package/src/components/Toast/Toast.module.css +7 -5
package/src/components/Toggle/Toggle.module.css +1 -1
package/src/components/Tooltip/Tooltip.module.css +6 -1
package/src/hooks/__tests__/useDoubleTap.test.tsx +117 -0
package/src/hooks/__tests__/useIsMobile.test.tsx +80 -0
package/src/hooks/__tests__/useLongPress.test.tsx +158 -0
package/src/hooks/index.ts +4 -0
package/src/hooks/useDoubleTap.ts +91 -0
package/src/hooks/useIsMobile.ts +33 -0
package/src/hooks/useLongPress.ts +185 -0
package/src/index.ts +37 -2
package/src/motion.ts +78 -0
package/src/stories/Checkbox.stories.tsx +45 -0
package/src/stories/DesignSystemOverview.stories.tsx +354 -8
package/src/stories/DragHandleRow.stories.tsx +41 -0
package/src/stories/FormField.stories.tsx +8 -8
package/src/stories/InteractionHooks.stories.tsx +388 -0
package/src/stories/MobilePatterns.stories.tsx +4 -4
package/src/stories/Textarea.stories.tsx +51 -0
package/src/stories/TokenGallery.stories.tsx +87 -1
package/src/tokens/primitives.css +19 -0
package/src/tokens/semantic.css +19 -0
package/src/components/Icon/icons/terminal.tsx +0 -19

package/src/stories/InteractionHooks.stories.tsx ADDED Viewed

@@ -0,0 +1,388 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from '../components/Card/Card';
+import { useDoubleTapHandler, useIsMobile, useLongPress, useSingleOrDoubleTap } from '../hooks';
+// ---------------------------------------------------------------------------
+// Shared primitives (mirrors MobilePatterns.stories.tsx's doc styling)
+// ---------------------------------------------------------------------------
+const ff = 'var(--sv-font-family)';
+function Heading({ level = 2, children }: { level?: 1 | 2 | 3; children: React.ReactNode }) {
+  const sizes: Record<number, string> = { 1: '1.75rem', 2: '1.125rem', 3: '0.9375rem' };
+  const weights: Record<number, number> = { 1: 700, 2: 600, 3: 600 };
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
+  return (
+    <Tag
+      style={{
+        fontFamily: ff,
+        fontSize: sizes[level],
+        fontWeight: weights[level],
+        color: 'var(--sv-color-text-primary)',
+        margin: 0,
+        lineHeight: 1.3,
+      }}
+    >
+      {children}
+    </Tag>
+  );
+}
+function Body({ children }: { children: React.ReactNode }) {
+  return (
+    <p
+      style={{
+        fontFamily: ff,
+        fontSize: 'var(--sv-font-size-sm)',
+        color: 'var(--sv-color-text-muted)',
+        margin: '0.5rem 0 0',
+        lineHeight: 1.6,
+      }}
+    >
+      {children}
+    </p>
+  );
+}
+function SectionHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div
+      style={{
+        paddingBottom: 'var(--sv-space-3)',
+        borderBottom: '2px solid var(--sv-color-accent)',
+        marginBottom: 'var(--sv-space-5)',
+      }}
+    >
+      <Heading level={2}>{title}</Heading>
+      {subtitle && <Body>{subtitle}</Body>}
+    </div>
+  );
+}
+function Callout({
+  type = 'info',
+  children,
+}: {
+  type?: 'info' | 'warn' | 'tip';
+  children: React.ReactNode;
+}) {
+  const map = {
+    info: {
+      bg: 'var(--sv-color-info-surface)',
+      border: 'var(--sv-color-info-border)',
+      text: 'var(--sv-color-info-text)',
+      label: 'ℹ',
+    },
+    warn: {
+      bg: 'var(--sv-color-warning-surface)',
+      border: 'var(--sv-color-warning-border)',
+      text: 'var(--sv-color-warning-text)',
+      label: '⚠',
+    },
+    tip: {
+      bg: 'var(--sv-color-success-surface)',
+      border: 'var(--sv-color-success-border)',
+      text: 'var(--sv-color-success-text)',
+      label: '✓',
+    },
+  };
+  const c = map[type];
+  return (
+    <div
+      style={{
+        background: c.bg,
+        border: `1px solid ${c.border}`,
+        borderRadius: 'var(--sv-radius-md)',
+        padding: 'var(--sv-space-3) var(--sv-space-4)',
+        display: 'flex',
+        gap: 'var(--sv-space-2)',
+        alignItems: 'flex-start',
+        marginBottom: 'var(--sv-space-4)',
+      }}
+    >
+      <span style={{ color: c.text, fontWeight: 700, flexShrink: 0, fontSize: '0.875rem' }}>
+        {c.label}
+      </span>
+      <p
+        style={{
+          fontFamily: ff,
+          fontSize: 'var(--sv-font-size-sm)',
+          color: c.text,
+          margin: 0,
+          lineHeight: 1.55,
+        }}
+      >
+        {children}
+      </p>
+    </div>
+  );
+}
+function CodeBlock({ children }: { children: string }) {
+  return (
+    <pre
+      style={{
+        fontFamily: 'var(--sv-font-family-mono)',
+        fontSize: '0.75rem',
+        background: 'var(--sv-color-surface-sunken)',
+        border: '1px solid var(--sv-color-border)',
+        borderRadius: 'var(--sv-radius-md)',
+        padding: 'var(--sv-space-3) var(--sv-space-4)',
+        marginTop: 'var(--sv-space-3)',
+        overflowX: 'auto',
+        color: 'var(--sv-color-text-primary)',
+        lineHeight: 1.6,
+      }}
+    >
+      {children}
+    </pre>
+  );
+}
+function EventLog({ events }: { events: string[] }) {
+  return (
+    <div
+      style={{
+        marginTop: 'var(--sv-space-3)',
+        fontFamily: 'var(--sv-font-family-mono)',
+        fontSize: '0.75rem',
+        color: 'var(--sv-color-text-muted)',
+        background: 'var(--sv-color-surface-sunken)',
+        border: '1px solid var(--sv-color-border)',
+        borderRadius: 'var(--sv-radius-md)',
+        padding: 'var(--sv-space-2) var(--sv-space-3)',
+        minHeight: '2.5em',
+      }}
+    >
+      {events.length === 0 ? '(no events yet)' : events.slice(-5).join('\n')}
+    </div>
+  );
+}
+// ---------------------------------------------------------------------------
+// Interactive demos
+// ---------------------------------------------------------------------------
+function LongPressDemo() {
+  const [events, setEvents] = useState<string[]>([]);
+  const log = (msg: string) =>
+    setEvents((e) => [...e, `${new Date().toLocaleTimeString()} — ${msg}`]);
+  const longPress = useLongPress({ onLongPress: () => log('onLongPress fired') });
+  return (
+    <div>
+      <div
+        {...longPress}
+        style={{
+          ...longPress.style,
+          padding: 'var(--sv-space-5)',
+          borderRadius: 'var(--sv-radius-md)',
+          border: '1px dashed var(--sv-color-border-strong)',
+          background: 'var(--sv-color-surface)',
+          textAlign: 'center',
+          fontFamily: ff,
+          fontSize: 'var(--sv-font-size-sm)',
+          color: 'var(--sv-color-text-muted)',
+          cursor: 'default',
+        }}
+      >
+        Touch and hold (real touch input only — see note below)
+      </div>
+      <EventLog events={events} />
+      <Callout type="info">
+        The hook only arms for <code>pointerType === &apos;touch&apos;</code> — a desktop mouse
+        click never starts the timer, so mouse text-selection is never disabled. Test this on a real
+        touch device or with devtools&apos; device toolbar (which synthesizes real touch pointer
+        events), not a plain mouse click in this preview.
+      </Callout>
+    </div>
+  );
+}
+function DoubleTapDemo() {
+  const [events, setEvents] = useState<string[]>([]);
+  const log = (msg: string) =>
+    setEvents((e) => [...e, `${new Date().toLocaleTimeString()} — ${msg}`]);
+  const handleSwatchTap = useDoubleTapHandler<React.MouseEvent>(() => log('double-tap: swatch'));
+  const handleTitleTap = useSingleOrDoubleTap<React.MouseEvent>(
+    () => log('single tap: would navigate'),
+    () => log('double-tap: would rename'),
+  );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sv-space-3)' }}>
+      <div style={{ display: 'flex', gap: 'var(--sv-space-3)', alignItems: 'center' }}>
+        <button
+          type="button"
+          onClick={handleSwatchTap}
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 'var(--sv-radius-full)',
+            background: 'var(--sv-color-accent)',
+            border: 'none',
+            cursor: 'pointer',
+          }}
+          aria-label="Double-tap demo swatch"
+        />
+        <span
+          style={{
+            fontFamily: ff,
+            fontSize: 'var(--sv-font-size-sm)',
+            color: 'var(--sv-color-text-muted)',
+          }}
+        >
+          useDoubleTapHandler — nothing to preempt, double-click/double-tap fires immediately
+        </span>
+      </div>
+      <div style={{ display: 'flex', gap: 'var(--sv-space-3)', alignItems: 'center' }}>
+        <button
+          type="button"
+          onClick={handleTitleTap}
+          style={{
+            padding: 'var(--sv-space-2) var(--sv-space-4)',
+            borderRadius: 'var(--sv-radius-md)',
+            background: 'var(--sv-color-surface-sunken)',
+            border: '1px solid var(--sv-color-border)',
+            fontFamily: ff,
+            fontSize: 'var(--sv-font-size-sm)',
+            cursor: 'pointer',
+          }}
+        >
+          List title
+        </button>
+        <span
+          style={{
+            fontFamily: ff,
+            fontSize: 'var(--sv-font-size-sm)',
+            color: 'var(--sv-color-text-muted)',
+          }}
+        >
+          useSingleOrDoubleTap — single tap deferred ~350ms so a double can preempt it
+        </span>
+      </div>
+      <EventLog events={events} />
+    </div>
+  );
+}
+function IsMobileDemo() {
+  const isMobile = useIsMobile();
+  return (
+    <div
+      style={{
+        padding: 'var(--sv-space-4)',
+        borderRadius: 'var(--sv-radius-md)',
+        background: isMobile ? 'var(--sv-color-success-surface)' : 'var(--sv-color-info-surface)',
+        color: isMobile ? 'var(--sv-color-success-text)' : 'var(--sv-color-info-text)',
+        fontFamily: ff,
+        fontSize: 'var(--sv-font-size-sm)',
+        fontWeight: 600,
+        textAlign: 'center',
+      }}
+    >
+      useIsMobile() → {String(isMobile)} — resize the preview or switch the viewport toolbar to see
+      this flip at 768px.
+    </div>
+  );
+}
+// ---------------------------------------------------------------------------
+// Main story component
+// ---------------------------------------------------------------------------
+function InteractionHooksDoc() {
+  return (
+    <div
+      style={{
+        padding: 'var(--sv-space-6)',
+        background: 'var(--sv-color-surface)',
+        minHeight: '100vh',
+        fontFamily: ff,
+        maxWidth: 760,
+      }}
+    >
+      <div style={{ marginBottom: 'var(--sv-space-8)' }}>
+        <Heading level={1}>Interaction Hooks</Heading>
+        <Body>
+          Touch gesture handling, carried once in the design system so no plugin has to rediscover
+          the failure modes. Per the DS-first principle, build gesture handling here — not in a
+          plugin. See{' '}
+          <code style={{ fontFamily: 'var(--sv-font-family-mono)', fontSize: '0.8em' }}>
+            docs/design-system.md
+          </code>{' '}
+          for the full written reference.
+        </Body>
+      </div>
+      <section style={{ marginBottom: 'var(--sv-space-10)' }}>
+        <SectionHeader
+          title="useLongPress"
+          subtitle="Touch-and-hold with movement tolerance, pointercancel handling, OS-callout suppression, and time-boxed click suppression."
+        />
+        <Card padding="md">
+          <LongPressDemo />
+        </Card>
+        <CodeBlock>{`const longPress = useLongPress({ onLongPress: () => setBulkMode(true) });
+<div {...longPress}>Hold to select</div>`}</CodeBlock>
+      </section>
+      <section style={{ marginBottom: 'var(--sv-space-10)' }}>
+        <SectionHeader
+          title="useDoubleTapHandler / useSingleOrDoubleTap"
+          subtitle="Desktop double-click reports e.detail === 2 natively; touch needs timing-based detection instead."
+        />
+        <Card padding="md">
+          <DoubleTapDemo />
+        </Card>
+        <Callout type="tip">
+          Use <code style={{ fontFamily: 'var(--sv-font-family-mono)' }}>useDoubleTapHandler</code>{' '}
+          when the single tap has nothing to cancel. Use{' '}
+          <code style={{ fontFamily: 'var(--sv-font-family-mono)' }}>useSingleOrDoubleTap</code>{' '}
+          only when the single tap has a default action (e.g. navigation) a following double-tap
+          must be able to preempt — every single tap through it pays the ~350ms wait.
+        </Callout>
+      </section>
+      <section style={{ marginBottom: 'var(--sv-space-10)' }}>
+        <SectionHeader
+          title="useIsMobile"
+          subtitle="SSR-safe viewport check against the platform's single documented breakpoint (768px)."
+        />
+        <Card padding="md">
+          <IsMobileDemo />
+        </Card>
+        <CodeBlock>{`import { useIsMobile, MOBILE_BREAKPOINT_PX } from '@sovereignfs/ui';
+const isMobile = useIsMobile(); // defaults to MOBILE_BREAKPOINT_PX (768)`}</CodeBlock>
+      </section>
+    </div>
+  );
+}
+// ---------------------------------------------------------------------------
+const meta = {
+  title: 'Overview/Interaction Hooks',
+  component: InteractionHooksDoc,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Reference and live demos for the touch-gesture hooks exported from @sovereignfs/ui. Long-press requires real touch input to trigger — use the devtools device toolbar or a physical device.',
+      },
+    },
+  },
+} satisfies Meta<typeof InteractionHooksDoc>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const MobileView: Story = {
+  parameters: { viewport: { defaultViewport: 'mobile' } },
+};

package/src/stories/MobilePatterns.stories.tsx CHANGED Viewed

@@ -405,11 +405,11 @@ function MobilePatternsDoc() {
                 gap: 'var(--sv-space-3)',
               }}
             >
-              <FormField label="Display name" htmlFor="mp-name">
-                <Input id="mp-name" placeholder="Your name" />
+              <FormField label="Display name" id="mp-name">
+                {(field) => <Input {...field} placeholder="Your name" />}
               </FormField>
-              <FormField label="Email" htmlFor="mp-email">
-                <Input id="mp-email" type="email" placeholder="you@example.com" />
+              <FormField label="Email" id="mp-email">
+                {(field) => <Input {...field} type="email" placeholder="you@example.com" />}
               </FormField>
               <Button type="submit">Save changes</Button>
             </div>

package/src/stories/Textarea.stories.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from '../components/Textarea/Textarea';
+// Wrap in a label so a11y checks pass (Textarea is a bare <textarea> — no
+// built-in label association).
+function Labeled({ label, ...props }: React.ComponentProps<typeof Textarea> & { label: string }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: 280 }}>
+      <label
+        htmlFor="sb-textarea"
+        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
+      >
+        {label}
+      </label>
+      <Textarea id="sb-textarea" {...props} />
+    </div>
+  );
+}
+const meta = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The primitive multi-line text field. RSC-safe; forwards all native `<textarea>` props. No label is built-in — always pair with a `<label>` (or `FormField`) for accessibility.',
+      },
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: (_args) => <Labeled label="Description" placeholder="Add a description…" />,
+};
+export const WithValue: Story = {
+  render: (_args) => <Labeled label="Notes" defaultValue="Follow up next week." />,
+};
+export const CustomRows: Story = {
+  render: (_args) => <Labeled label="Message" rows={8} placeholder="Write your message…" />,
+};
+export const Disabled: Story = {
+  render: (_args) => <Labeled label="Read-only field" defaultValue="Cannot be changed" disabled />,
+};

package/src/stories/TokenGallery.stories.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 // ---------------------------------------------------------------------------
@@ -19,16 +20,21 @@ const SEMANTIC_COLORS = [
   '--sv-color-border-strong',
   '--sv-color-accent',
   '--sv-color-accent-hover',
+  '--sv-color-accent-subtle',
   '--sv-color-focus-ring',
   '--sv-color-error-surface',
   '--sv-color-error-text',
   '--sv-color-error-border',
+  '--sv-color-error-solid',
   '--sv-color-warning-surface',
   '--sv-color-warning-text',
   '--sv-color-warning-border',
   '--sv-color-success-surface',
   '--sv-color-success-text',
   '--sv-color-success-border',
+  '--sv-color-success-solid',
+  '--sv-color-text-on-error',
+  '--sv-color-text-on-success',
   '--sv-color-info-surface',
   '--sv-color-info-text',
   '--sv-color-info-border',
@@ -57,7 +63,12 @@ const RADIUS_TOKENS = [
   '--sv-radius-3xl',
   '--sv-radius-full',
 ];
-const ICON_SIZE_TOKENS = ['--sv-icon-size-sm', '--sv-icon-size-md', '--sv-icon-size-lg'];
+const ICON_SIZE_TOKENS = [
+  '--sv-icon-size-xs',
+  '--sv-icon-size-sm',
+  '--sv-icon-size-md',
+  '--sv-icon-size-lg',
+];
 const FONT_SIZE_TOKENS = [
   '--sv-font-size-label',
@@ -82,6 +93,32 @@ const SHADOW_TOKENS = [
   '--sv-shadow-hover',
   '--sv-shadow-popover',
   '--sv-shadow-overlay',
+  '--sv-shadow-control',
+];
+// Realistic duration+easing pairings, not every combination — matches how
+// Dialog/Drawer actually use these tokens (see motion.ts).
+const MOTION_PAIRS: { durationToken: string; easeToken: string; use: string }[] = [
+  {
+    durationToken: '--sv-motion-duration-fast',
+    easeToken: '--sv-motion-ease-out',
+    use: 'micro-interaction',
+  },
+  {
+    durationToken: '--sv-motion-duration-base',
+    easeToken: '--sv-motion-ease-out',
+    use: 'Dialog / Drawer entrance',
+  },
+  {
+    durationToken: '--sv-motion-duration-slow',
+    easeToken: '--sv-motion-ease-in-out',
+    use: 'larger surface / longer travel',
+  },
+  {
+    durationToken: '--sv-motion-duration-base',
+    easeToken: '--sv-motion-ease-spring',
+    use: 'emphasis (use sparingly)',
+  },
 ];
 // ---------------------------------------------------------------------------
@@ -152,6 +189,49 @@ function ScaleRow({
   );
 }
+// Auto-loops so the duration/easing is visible without needing to interact —
+// same technique Dialog/Drawer use for their own open/close transition
+// (see motion.ts), just driven by a timer instead of an `open` prop.
+function MotionRow({ durationToken, easeToken, use }: (typeof MOTION_PAIRS)[number]) {
+  const [toggled, setToggled] = useState(false);
+  useEffect(() => {
+    const id = setInterval(() => setToggled((v) => !v), 900);
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <div style={row}>
+      <div
+        style={{
+          position: 'relative',
+          width: 120,
+          height: 24,
+          background: 'var(--sv-color-surface-sunken)',
+          borderRadius: 4,
+          flexShrink: 0,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 2,
+            left: 2,
+            width: 20,
+            height: 20,
+            borderRadius: '50%',
+            background: 'var(--sv-color-accent)',
+            transform: `translateX(${toggled ? 96 : 0}px)`,
+            transition: `transform var(${durationToken}) var(${easeToken})`,
+          }}
+        />
+      </div>
+      <span style={label}>
+        {durationToken} · {easeToken}
+      </span>
+      <span style={value}>{use}</span>
+    </div>
+  );
+}
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <section style={{ marginBottom: 40 }}>
@@ -329,6 +409,12 @@ function TokenGalleryComponent() {
           />
         ))}
       </Section>
+      <Section title="Motion">
+        {MOTION_PAIRS.map((pair) => (
+          <MotionRow key={`${pair.durationToken}-${pair.easeToken}`} {...pair} />
+        ))}
+      </Section>
     </div>
   );
 }

package/src/tokens/primitives.css CHANGED Viewed

@@ -78,6 +78,7 @@
   --sv-font-weight-bold: 700;
   /* Icon sizes — scale tokens used directly by the Icon component */
+  --sv-icon-size-xs: 0.75rem; /* 12px — inline metadata (e.g. a due-date badge) */
   --sv-icon-size-sm: 1rem; /* 16px — inline with body text */
   --sv-icon-size-md: 1.25rem; /* 20px — standard affordance */
   --sv-icon-size-lg: 1.5rem; /* 24px — prominent / standalone */
@@ -96,4 +97,22 @@
      touch without a pointing device. Applied to icon-only controls on mobile
      (avatar, footer button, Drawer nav items). */
   --sv-touch-target-min: 44px;
+  /* Motion scale — durations and easings for overlay enter/exit transitions
+     (Dialog, Drawer, and their Phase-B successors: Sheet, ConfirmDialog,
+     Menu). Theme-stable like the other scale tokens above — dark mode does
+     not change motion, so there is no semantic tier. Components must pair
+     every transition with `@media (prefers-reduced-motion: reduce)` collapsing
+     it to near-instant; the durations here are not a substitute for that. */
+  --sv-motion-duration-fast: 150ms; /* micro-interactions — hover/press feedback */
+  --sv-motion-duration-base: 250ms; /* default overlay enter/exit (Dialog, Drawer) */
+  --sv-motion-duration-slow: 350ms; /* larger surfaces / bigger travel distance */
+  --sv-motion-ease-out: cubic-bezier(0, 0, 0.2, 1); /* entrances — fast start, gentle settle */
+  --sv-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* state changes with no fixed direction */
+  --sv-motion-ease-spring: cubic-bezier(
+    0.34,
+    1.56,
+    0.64,
+    1
+  ); /* slight overshoot — playful emphasis, use sparingly */
 }

package/src/tokens/semantic.css CHANGED Viewed

@@ -25,6 +25,10 @@
   --sv-color-accent: var(--sv-grey-900);
   --sv-color-accent-hover: var(--sv-grey-700);
+  /* Derived from --sv-color-accent via color-mix, so it re-themes automatically —
+     no separate dark-mode override needed. Tinted background for badges/chips
+     paired with --sv-color-accent text. */
+  --sv-color-accent-subtle: color-mix(in srgb, var(--sv-color-accent) 12%, transparent);
   --sv-color-focus-ring: var(--sv-grey-900);
@@ -41,6 +45,19 @@
   --sv-color-success-text: var(--sv-green-800);
   --sv-color-success-border: var(--sv-green-200);
+  /* Status solids — a saturated fill for status affordances that need to
+     read as a filled action button rather than a tinted surface (e.g. a
+     mobile swipe-to-reveal Delete/Done action). Paired with
+     --sv-color-text-on-error/-success (white) for the icon/label on top.
+     Intentionally NOT overridden under [data-theme='dark'] below — like
+     --sv-color-accent-subtle, a solid action fill reads the same regardless
+     of overall page theme; it's the surrounding surface that inverts, not
+     this fixed-contrast pairing. */
+  --sv-color-error-solid: var(--sv-red-700);
+  --sv-color-success-solid: var(--sv-green-800);
+  --sv-color-text-on-error: var(--sv-white);
+  --sv-color-text-on-success: var(--sv-white);
   /* Info surfaces — blue palette. Use for informational banners and badges.
      Never hardcode colour hex in components — reference these tokens. */
   --sv-color-info-surface: var(--sv-blue-100);
@@ -56,6 +73,7 @@
   --sv-shadow-popover:
     0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08); /* e2 — floating panels */
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
+  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
   /*
    * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
@@ -108,4 +126,5 @@
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.5);
+  --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5);
 }

package/src/components/Icon/icons/terminal.tsx DELETED Viewed

@@ -1,19 +0,0 @@
-import type { SVGProps } from 'react';
-export function TerminalIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <polyline points="4 17 10 11 4 5" />
-      <line x1="12" x2="20" y1="19" y2="19" />
-    </svg>
-  );
-}