@proteos/ui 0.56.0 → 0.57.0

package/src/components/currency-input/currency-input.tsx

@@ -157,8 +157,8 @@ export function CurrencyInput({
             className={cn(
               'min-w-[9rem] rounded-md border border-rule bg-surface p-1',
               'shadow-[var(--shadow-raised)]',
-              'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-              'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+              'entering:animate-enter-slide-down',
+              'exiting:animate-exit-slide-up',
             )}
           >
             <ListBox className="max-h-72 overflow-auto outline-none">

package/src/components/date-picker/calendar-internals.tsx

@@ -124,7 +124,7 @@ export function CalendarSurface() {
                 'data-[outside-month]:text-ink-4',
                 'data-[hovered]:bg-surface-2 data-[hovered]:text-ink',
                 'data-[focus-visible]:shadow-[var(--shadow-focus)]',
-                'data-[selected]:bg-accent data-[selected]:text-[#f0efe8]',
+                'data-[selected]:bg-accent data-[selected]:text-tile-fg',
                 'data-[selected]:data-[hovered]:bg-accent-2',
                 'data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed',
                 'data-[unavailable]:line-through data-[unavailable]:text-ink-4',

package/src/components/date-picker/date-picker.tsx

@@ -86,7 +86,7 @@ export function DatePicker<T extends DateValue>({
                 'data-[placeholder]:text-ink-4',
                 'data-[type=literal]:text-ink-4',
                 // segment focus treatment: indigo fill, paper text
-                'data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]',
+                'data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]',
                 'data-[disabled]:cursor-not-allowed',
               )}
             />
@@ -127,8 +127,8 @@ export function DatePicker<T extends DateValue>({
           'w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]',
           'rounded-md border border-rule bg-surface p-4',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <Dialog className="outline-none">

package/src/components/date-time-picker/date-time-picker.tsx

@@ -43,7 +43,7 @@ const segmentStyles = cn(
   'data-[placeholder]:text-ink-4',
   'data-[type=literal]:text-ink-4',
   // segment focus treatment: indigo fill, paper text
-  'data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]',
+  'data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]',
   'data-[disabled]:cursor-not-allowed',
 )
 
@@ -185,8 +185,8 @@ export function DateTimePicker<T extends DateValue>({
           'w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]',
           'rounded-md border border-rule bg-surface p-4',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <Dialog className="outline-none">

package/src/components/icon-picker/icon-picker.tsx

@@ -227,8 +227,8 @@ export function IconPicker({
         className={cn(
           'w-[316px] rounded-md border border-rule bg-surface p-2',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <div className="flex items-center gap-1.5 pb-2">

package/src/components/image-lightbox/image-lightbox.tsx

@@ -23,8 +23,8 @@ export const imageLightboxStyles = tv({
     'fixed inset-0 z-50 flex items-center justify-center p-4',
     // Deeper scrim than Modal's 40% — the image needs the page fully dimmed.
     'bg-[color-mix(in_oklab,var(--color-ink)_72%,transparent)]',
-    'entering:animate-in entering:fade-in-0 entering:duration-150',
-    'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+    'entering:animate-enter-fade',
+    'exiting:animate-exit-fade',
   ],
 })
 

package/src/components/menu/menu.tsx

@@ -61,8 +61,8 @@ export function MenuPopover({ className, offset = 4, placement = 'bottom start',
         cn(
           'min-w-[200px] p-1 bg-surface border border-rule rounded-md',
           'shadow-[var(--shadow-float)] outline-none z-[1200]',
-          'entering:animate-in entering:fade-in-0 entering:zoom-in-95',
-          'exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95',
+          'entering:animate-enter-zoom',
+          'exiting:animate-exit-zoom',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/modal/modal.tsx

@@ -67,8 +67,8 @@ export function ModalContent({
           'fixed inset-0 z-50 flex items-center justify-center p-4',
           // Warm ink scrim — stays in the Proteos palette (no pure black).
           'bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]',
-          'entering:animate-in entering:fade-in-0 entering:duration-150',
-          'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+          'entering:animate-enter-fade',
+          'exiting:animate-exit-fade',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }
@@ -82,8 +82,8 @@ export function ModalContent({
           'flex flex-col max-h-[calc(100dvh-2rem)]',
           'bg-surface border border-rule rounded-lg',
           'shadow-[var(--shadow-float)]',
-          'entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150',
-          'exiting:animate-out exiting:zoom-out-95 exiting:duration-100',
+          'entering:animate-enter-zoom',
+          'exiting:animate-exit-zoom',
           modalClassName,
         )}
       >

package/src/components/multi-select/multi-select.tsx

@@ -185,8 +185,8 @@ export function MultiSelect<T extends Key>({
           // (defaultOpen) — no browser outline around the whole panel.
           'outline-none rounded-md border border-rule bg-surface p-1',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         {isSearchable ? (

package/src/components/popover/popover.tsx

@@ -64,8 +64,8 @@ export function PopoverContent({
         cn(
           'rounded-md border border-rule bg-surface',
           'shadow-[var(--shadow-float)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
           panelClassName,
           typeof className === 'function' ? className(renderProps) : className,
         )

package/src/components/record-filter/nested-group.tsx

@@ -84,8 +84,8 @@ export function NestedGroup({
               <SegmentedControl<LogicalOperator>
                 aria-label="Group joiner"
                 options={[
-                  { id: 'and', label: 'AND' },
-                  { id: 'or', label: 'OR' },
+                  { id: 'and', label: 'and' },
+                  { id: 'or', label: 'or' },
                 ]}
                 value={group.logicalOperator}
                 onChange={(next) => onChange({ ...group, logicalOperator: next })}

package/src/components/record-filter/record-filter-builder-panel.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
 import { SegmentedControl } from '../segmented-control/segmented-control'
 import { type FilterValueInputRenderer, RenderValueInputProvider } from './filter-value-input'
 import { RecordFilterEditor } from './record-filter-editor'
@@ -86,8 +87,8 @@ export function RecordFilterBuilderPanel({
             <SegmentedControl<LogicalOperator>
               aria-label="Joiner"
               options={[
-                { id: 'and', label: 'AND' },
-                { id: 'or', label: 'OR' },
+                { id: 'and', label: 'and' },
+                { id: 'or', label: 'or' },
               ]}
               value={filter.logicalOperator}
               onChange={setJoiner}
@@ -190,16 +191,11 @@ export function RecordFilterBuilderPanel({
         </button>
         <div className="flex items-center gap-1.5">
           {onSaveView ? (
-            <button
-              type="button"
-              onClick={onSaveView}
-              disabled={totalChildren === 0}
-              className={cn(
-                'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm',
-                'font-sans text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink',
-                'disabled:opacity-40 disabled:pointer-events-none',
-                'outline-none cursor-pointer',
-              )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onPress={onSaveView}
+              isDisabled={totalChildren === 0}
             >
               <svg
                 aria-hidden
@@ -215,19 +211,11 @@ export function RecordFilterBuilderPanel({
                 <path d="M5 2v3h4V2" />
               </svg>
               Save as view
-            </button>
+            </Button>
           ) : null}
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(
-              'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm',
-              'bg-ink text-surface font-mono text-[12px]',
-              'hover:bg-accent-ink outline-none cursor-pointer',
-            )}
-          >
+          <Button variant="cta" size="sm" onPress={onClose}>
             Done
-          </button>
+          </Button>
         </div>
       </div>
     </div>

package/src/components/record-filter/record-filter-chips.tsx

@@ -1,5 +1,6 @@
 import { Fragment, type RefObject, useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
 import { PopoverContent } from '../popover/popover'
 import { AttributePicker } from './attribute-picker'
 import { ChipValue, type ChipValueItemRenderer } from './chip-value'
@@ -489,17 +490,9 @@ function ChipMiniEditor({
           onChange={onChangeValue}
         />
       </div>
-      <button
-        type="submit"
-        className={cn(
-          'shrink-0 inline-flex items-center px-2.5 py-1.5 rounded-md',
-          'bg-ink text-surface font-mono text-[12px]',
-          'hover:bg-accent-ink cursor-pointer outline-none',
-          'focus-visible:shadow-[var(--shadow-focus)]',
-        )}
-      >
+      <Button type="submit" variant="cta" size="sm" className="shrink-0">
         Save
-      </button>
+      </Button>
     </form>
   )
 }

package/src/components/segmented-control/segmented-control.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 
-import { SegmentedControl } from './segmented-control'
+import { SegmentedControl, segmentedControlStyles } from './segmented-control'
 
 const meta: Meta<typeof SegmentedControl> = {
   title: 'Components/SegmentedControl',
@@ -19,8 +19,8 @@ export const AndOrJoiner: Story = {
       <SegmentedControl
         aria-label="Joiner"
         options={[
-          { id: 'and', label: 'AND' },
-          { id: 'or', label: 'OR' },
+          { id: 'and', label: 'and' },
+          { id: 'or', label: 'or' },
         ]}
         value={value}
         onChange={setValue}
@@ -49,15 +49,15 @@ export const BooleanTrueFalse: Story = {
 
 export const ThreeSegments: Story = {
   render: () => {
-    const [value, setValue] = useState<'compact' | 'cozy' | 'comfy'>('cozy')
+    const [value, setValue] = useState<'list' | 'board' | 'timeline'>('list')
     return (
       <SegmentedControl
         size="md"
-        aria-label="Density"
+        aria-label="View"
         options={[
-          { id: 'compact', label: 'Compact' },
-          { id: 'cozy', label: 'Cozy' },
-          { id: 'comfy', label: 'Comfy' },
+          { id: 'list', label: 'List' },
+          { id: 'board', label: 'Board' },
+          { id: 'timeline', label: 'Timeline' },
         ]}
         value={value}
         onChange={setValue}
@@ -65,3 +65,129 @@ export const ThreeSegments: Story = {
     )
   },
 }
+
+const label = 'font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4'
+
+export const Sizes: Story = {
+  render: () => {
+    const [value, setValue] = useState<'list' | 'board'>('list')
+    const options = [
+      { id: 'list' as const, label: 'List' },
+      { id: 'board' as const, label: 'Board' },
+    ]
+    return (
+      <div className="grid grid-cols-[80px_1fr] items-center gap-x-6 gap-y-4">
+        <div className={label}>sm</div>
+        <SegmentedControl aria-label="View (sm)" size="sm" options={options} value={value} onChange={setValue} />
+        <div className={label}>md</div>
+        <SegmentedControl aria-label="View (md)" size="md" options={options} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+const Glyph = ({ d }: { d: string }) => (
+  <svg viewBox="0 0 16 16" fill="none" className="size-3" aria-hidden>
+    <path d={d} stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export const WithIcons: Story = {
+  render: () => {
+    const [value, setValue] = useState<'base' | 'sm'>('base')
+    return (
+      <SegmentedControl
+        aria-label="Viewport"
+        options={[
+          { id: 'base', label: <Glyph d="M2 4h12v8H2zM6 14h4" />, 'aria-label': 'Desktop' },
+          { id: 'sm', label: <Glyph d="M5 2h6v12H5zM7 12h2" />, 'aria-label': 'Phone' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Wrap: Story = {
+  parameters: { layout: 'padded' },
+  render: () => {
+    const [value, setValue] = useState<string>('1/2')
+    const options = ['auto', '1/4', '1/3', '1/2', '2/3', '3/4', 'full', 'fit', 'fill', 'grow', 'shrink', 'none'].map(
+      (id) => ({ id, label: id }),
+    )
+    return (
+      <div className="w-[240px]">
+        <SegmentedControl aria-label="Column span" wrap options={options} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+export const DisabledOption: Story = {
+  render: () => {
+    const [value, setValue] = useState<'draft' | 'live' | 'archived'>('draft')
+    return (
+      <SegmentedControl
+        size="md"
+        aria-label="Status"
+        options={[
+          { id: 'draft', label: 'Draft' },
+          { id: 'live', label: 'Live' },
+          { id: 'archived', label: 'Archived', isDisabled: true },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Unselected: Story = {
+  render: () => {
+    const [value, setValue] = useState<'yes' | 'no' | null>(null)
+    return (
+      <SegmentedControl
+        aria-label="Answer"
+        options={[
+          { id: 'yes', label: 'Yes' },
+          { id: 'no', label: 'No' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+/* Pinned states on static spans (RAC owns the live data-* attributes). */
+export const States: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const styles = segmentedControlStyles({ size: 'md' })
+    const pinned = [
+      { title: 'rest', attrs: {} },
+      { title: 'hover', attrs: { 'data-hovered': '' } },
+      { title: 'press', attrs: { 'data-pressed': '' } },
+      { title: 'selected', attrs: { 'data-selected': '' } },
+      { title: 'selected + focus', attrs: { 'data-selected': '', 'data-focus-visible': '' } },
+      { title: 'disabled', attrs: { 'data-disabled': '' } },
+    ]
+    return (
+      <div className="grid grid-cols-[140px_1fr] items-center gap-x-6 gap-y-3">
+        {pinned.map((state) => (
+          <div key={state.title} className="contents">
+            <div className={label}>{state.title}</div>
+            <div className={styles.group()}>
+              <span className={styles.segment()}>List</span>
+              <span {...state.attrs} className={styles.segment()}>
+                Board
+              </span>
+              <span className={styles.segment()}>Timeline</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}

package/src/components/segmented-control/segmented-control.test.tsx

@@ -5,14 +5,22 @@ import { describe, expect, it, vi } from 'vitest'
 
 import { SegmentedControl } from './segmented-control'
 
-function Harness({ onChange }: { onChange?: (v: 'and' | 'or') => void }) {
-  const [value, setValue] = useState<'and' | 'or'>('and')
+type Joiner = 'and' | 'or'
+
+function Harness({
+  onChange,
+  initial = 'and',
+}: {
+  onChange?: (v: Joiner) => void
+  initial?: Joiner | null
+}) {
+  const [value, setValue] = useState<Joiner | null>(initial)
   return (
     <SegmentedControl
       aria-label="Joiner"
       options={[
-        { id: 'and', label: 'AND' },
-        { id: 'or', label: 'OR' },
+        { id: 'and', label: 'and' },
+        { id: 'or', label: 'or' },
       ]}
       value={value}
       onChange={(next) => {
@@ -32,16 +40,81 @@ describe('SegmentedControl', () => {
 
   it('reflects the controlled value', () => {
     render(<Harness />)
-    expect(screen.getByRole('radio', { name: 'AND' })).toBeChecked()
-    expect(screen.getByRole('radio', { name: 'OR' })).not.toBeChecked()
+    expect(screen.getByRole('radio', { name: 'and' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'or' })).not.toBeChecked()
   })
 
   it('changes value on click', async () => {
     const user = userEvent.setup()
     const onChange = vi.fn()
     render(<Harness onChange={onChange} />)
-    await user.click(screen.getByRole('radio', { name: 'OR' }))
+    await user.click(screen.getByRole('radio', { name: 'or' }))
+    expect(onChange).toHaveBeenLastCalledWith('or')
+    expect(screen.getByRole('radio', { name: 'or' })).toBeChecked()
+  })
+
+  it('moves selection with the arrow keys', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+    await user.tab()
+    expect(screen.getByRole('radio', { name: 'and' })).toHaveFocus()
+    await user.keyboard('{ArrowRight}')
     expect(onChange).toHaveBeenLastCalledWith('or')
-    expect(screen.getByRole('radio', { name: 'OR' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'or' })).toBeChecked()
+  })
+
+  it('renders no selected segment for a null value', () => {
+    render(<Harness initial={null} />)
+    for (const radio of screen.getAllByRole('radio')) {
+      expect(radio).not.toBeChecked()
+    }
+  })
+
+  it('does not select a disabled option', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    function Disabled() {
+      const [value, setValue] = useState<'a' | 'b'>('a')
+      return (
+        <SegmentedControl
+          aria-label="Mode"
+          options={[
+            { id: 'a', label: 'A' },
+            { id: 'b', label: 'B', isDisabled: true },
+          ]}
+          value={value}
+          onChange={(next) => {
+            setValue(next)
+            onChange(next)
+          }}
+        />
+      )
+    }
+    render(<Disabled />)
+    await user.click(screen.getByRole('radio', { name: 'B' }))
+    expect(onChange).not.toHaveBeenCalled()
+    expect(screen.getByRole('radio', { name: 'A' })).toBeChecked()
+  })
+
+  it('names icon-only segments through aria-label', () => {
+    function Icons() {
+      const [value, setValue] = useState<'list' | 'board'>('list')
+      return (
+        <SegmentedControl
+          aria-label="View"
+          wrap
+          options={[
+            { id: 'list', label: <svg aria-hidden />, 'aria-label': 'List' },
+            { id: 'board', label: <svg aria-hidden />, 'aria-label': 'Board' },
+          ]}
+          value={value}
+          onChange={setValue}
+        />
+      )
+    }
+    render(<Icons />)
+    expect(screen.getByRole('radio', { name: 'List' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'Board' })).toBeInTheDocument()
   })
 })

package/src/components/segmented-control/segmented-control.tsx

@@ -9,11 +9,16 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import { cn } from '../../lib/cn'
 
 /* =========================================================================
-   SegmentedControl — small horizontal exclusive-choice group with pill
-   chrome. Wraps RAC RadioGroup so keyboard nav and focus management are
-   correct (arrow keys move between segments). Used for compact toggles
-   like AND/OR joiners and true/false booleans where a full RadioGroup
+   SegmentedControl — small horizontal exclusive-choice group: a recessed
+   `surface-2` track with the selected segment lifted as a white pill. Wraps
+   RAC RadioGroup so keyboard nav and focus management are correct (arrow keys
+   move between segments, one tab stop). Used for compact toggles like view
+   switchers, AND/OR joiners and true/false booleans where a full RadioGroup
    feels heavy.
+
+   Radii are concentric: 9px (chip) track − 2px padding − 1px hairline = 6px
+   (sm) pill. Labels are mode names, so they follow buttons: Inter 500,
+   sentence case — not the uppercase mono reserved for eyebrows.
    ========================================================================= */
 
 export const segmentedControlStyles = tv({
@@ -22,28 +27,35 @@ export const segmentedControlStyles = tv({
     // stretching parent (e.g. a `flex flex-col` card body, whose default
     // align-items:stretch would otherwise pull it to full width). Consumers
     // can still opt into full width by passing `w-full` via className.
-    group: 'inline-flex w-fit rounded-sm border border-rule-strong bg-surface p-0.5 gap-0.5',
+    group: 'inline-flex w-fit gap-px p-0.5 rounded-chip bg-surface-2 border border-rule',
     segment: [
-      'inline-flex items-center justify-center cursor-pointer',
-      'font-mono tracking-[0.04em] rounded-[3px] outline-none select-none',
-      'transition-[background-color,color] duration-150',
-      'data-[hovered]:text-ink',
-      'data-[selected]:bg-ink data-[selected]:text-surface',
+      'inline-flex items-center justify-center gap-1 cursor-pointer select-none',
+      'font-sans font-medium tracking-[-0.005em] rounded-sm outline-none text-ink-3',
+      'transition-[background-color,color,box-shadow] duration-150',
+      // Unselected: hover/press tint into the track colour. `selected` is
+      // declared after `hovered` in styles.css, so the pill wins over these.
+      'hovered:text-ink hovered:bg-[color-mix(in_oklab,var(--color-ink)_6%,var(--color-surface-2))]',
+      'pressed:bg-[color-mix(in_oklab,var(--color-ink)_10%,var(--color-surface-2))]',
+      // Selected: lifted white pill, static.
+      'selected:bg-surface selected:text-ink selected:shadow-[var(--shadow-rest)]',
       'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      'selected:data-[focus-visible]:shadow-[var(--shadow-focus),var(--shadow-rest)]',
       'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
     ],
   },
   variants: {
     size: {
-      sm: { segment: 'px-2 py-0.5 text-[10.5px] tracking-[0.08em]' },
-      md: { segment: 'px-2.5 py-1 text-[12px]' },
+      sm: { segment: 'px-2 py-0.5 text-[11.5px] min-h-[22px]' },
+      md: { segment: 'px-2.5 py-1 text-[12.5px] min-h-[26px]' },
     },
-    tone: {
-      // Default: ink fill on selected.
-      default: { segment: 'text-ink-3' },
+    // Dense flow-wrapping register (designer inspector): the group becomes a
+    // wrapping flex row and every segment grows to share the line.
+    wrap: {
+      true: { group: 'flex flex-wrap w-auto', segment: 'flex-1 min-w-7 px-1.5' },
+      false: {},
     },
   },
-  defaultVariants: { size: 'sm', tone: 'default' },
+  defaultVariants: { size: 'sm', wrap: false },
 })
 
 export type SegmentedControlVariants = VariantProps<typeof segmentedControlStyles>
@@ -52,6 +64,8 @@ export type SegmentedControlOption<T extends Key = Key> = {
   id: T
   label: ReactNode
   isDisabled?: boolean
+  /** Accessible name for icon-only segments. */
+  'aria-label'?: string
 }
 
 export type SegmentedControlProps<T extends Key = Key> = Omit<
@@ -59,9 +73,12 @@ export type SegmentedControlProps<T extends Key = Key> = Omit<
   'children' | 'value' | 'onChange'
 > & {
   options: ReadonlyArray<SegmentedControlOption<T>>
-  value: T
+  /** `null` renders no selected segment. */
+  value: T | null
   onChange: (value: T) => void
   size?: SegmentedControlVariants['size']
+  /** Flow-wrap long option lists; segments share the line equally. */
+  wrap?: boolean
   /** Focus the selected segment on mount. RAC's RadioGroup doesn't surface
    *  `autoFocus` itself — it's a per-Radio prop — so we apply it to the
    *  Radio whose value matches `value`. */
@@ -75,17 +92,18 @@ export function SegmentedControl<T extends Key>({
   value,
   onChange,
   size,
+  wrap = false,
   autoFocus = false,
   className,
   orientation = 'horizontal',
   ...props
 }: SegmentedControlProps<T>) {
-  const styles = segmentedControlStyles({ size })
+  const styles = segmentedControlStyles({ size, wrap })
   return (
     <AriaRadioGroup
       {...props}
       orientation={orientation}
-      value={String(value)}
+      value={value === null ? null : String(value)}
       onChange={(next) => onChange(next as T)}
       className={cn(styles.group(), className)}
     >
@@ -94,6 +112,7 @@ export function SegmentedControl<T extends Key>({
           key={String(option.id)}
           value={String(option.id)}
           {...(option.isDisabled ? { isDisabled: true } : {})}
+          {...(option['aria-label'] !== undefined ? { 'aria-label': option['aria-label'] } : {})}
           {...(autoFocus && option.id === value ? { autoFocus: true } : {})}
           className={styles.segment()}
         >