@viraui/react 2026.6.0 → 2026.6.2

package/dist/specs/components/separator/patterns.xml

@@ -1,7 +1,125 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <patterns surface="separator">
-  <example title="Separator structure">
-    <tsx><![CDATA[<Separator />]]></tsx>
-    <notes>Public assembly hint from legacy guide; not API authority.</notes>
+  <!-- Sources: viraui-app/components — cleaned (no handlers, no i18n, no app-only chrome). -->
+
+  <example title="Document shell header rule">
+    <tsx><![CDATA[
+  <Stack>
+    {/* header */}
+    <Separator variant="dashed" size="m" />
+    <Stack data-grow="true" expandChildren>
+      {/* page content */}
+    </Stack>
+  </Stack>
+]]></tsx>
+    <notes>From `layout/document-shell`. Dashed mid-size rule under sticky header. Shell height/sticky stay in CSS — Separator is the divider only.</notes>
+  </example>
+
+  <example title="Vertical page gutters">
+    <tsx><![CDATA[
+<Stack render={<main />} direction="row" hAlign="center">
+  <Separator orientation="vertical" size="m" variant="dashed" />
+  {/* page body */}
+  <Separator orientation="vertical" size="m" variant="dashed" />
+</Stack>
+]]></tsx>
+    <notes>From `app/(hub)/prompts/layout`. Vertical dashed rules frame centered content in a row Stack.</notes>
+  </example>
+
+  <example title="Form summary divider">
+    <tsx><![CDATA[
+<Stack rowGap="l" vPadding="m">
+  <Separator />
+  <Stack columnGap="s" direction="row" hAlign="space-between" vAlign="center">
+    <Text tone="muted">Estimated Shares</Text>
+    <Text weight="semibold">1.95</Text>
+  </Stack>
+  <Stack columnGap="s" direction="row" hAlign="space-between" vAlign="center">
+    <Text tone="muted">Buying Power</Text>
+    <Text weight="semibold">$12,450.00</Text>
+  </Stack>
+</Stack>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/buy-investment`. Default horizontal Separator before key/value rows — not a Surface border.</notes>
+  </example>
+
+  <example title="Nested totals block">
+    <tsx><![CDATA[
+<Surface color={2} radius="m" hPadding="m" vPadding="m">
+  <Stack rowGap="m">
+    <Stack direction="row" hAlign="space-between">
+      <Text size="s" tone="muted">
+        Net Royalties
+      </Text>
+      <Text family="mono" size="s">
+        $0.00
+      </Text>
+    </Stack>
+    <Stack direction="row" hAlign="space-between">
+      <Text size="s" tone="muted">
+        Processing Fee
+      </Text>
+      <Text family="mono" size="s">
+        -$0.00
+      </Text>
+    </Stack>
+    <Separator />
+    <Stack direction="row" hAlign="space-between">
+      <Text size="s" tone="muted">
+        Total Ready to Claim
+      </Text>
+      <Text family="mono" size="s" weight="semibold">
+        $0.00 USD
+      </Text>
+    </Stack>
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/claimable-balance`. Separator splits line items from total inside a tinted Surface.</notes>
+  </example>
+
+  <example title="List item dividers">
+    <tsx><![CDATA[
+<Surface color={2} radius="m" hPadding="m" vPadding="m">
+  <Stack rowGap="s">
+    <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="center">
+      <Text size="s">Expense ratio</Text>
+      <Text weight="semibold">0.03%</Text>
+    </Stack>
+    <Separator />
+    <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="center">
+      <Text size="s">APY</Text>
+      <Text weight="semibold">4.82%</Text>
+    </Stack>
+    <Separator />
+    <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="center">
+      <Text size="s">Dividend yield</Text>
+      <Text weight="semibold">2.14%</Text>
+    </Stack>
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/contextual-hints` metrics list. Insert Separator between stacked rows (`index &gt; 0` in app).</notes>
+  </example>
+
+  <example title="Editor action strip rules">
+    <tsx><![CDATA[
+<Surface color={2} data-grow="false">
+  <Separator />
+  <Stack direction="row" vPadding="s" hPadding="m" columnGap="s" expandChildren>
+    <Button size="s" variant="secondary">
+      Shuffle
+    </Button>
+    <Button size="s">Export</Button>
+  </Stack>
+  <Separator />
+  <Stack vPadding="xs" hPadding="m">
+    <Button size="s" variant="flat">
+      Reset all
+    </Button>
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `editor/editor` sidebar footer. Pair of Separators bookend the primary action row inside a tinted Surface.</notes>
   </example>
 </patterns>

package/dist/specs/components/separator/props.xml

@@ -30,10 +30,10 @@
   <prop name="vPadding" kind="react">
     <description>Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.</description>
   </prop>
-  <css_var suffix="border-style">
+  <prop name="border-style" kind="css">
     <description>Separator line border style.</description>
-  </css_var>
-  <css_var suffix="size">
+  </prop>
+  <prop name="size" kind="css">
     <description>Separator line thickness.</description>
-  </css_var>
+  </prop>
 </props>

package/dist/specs/components/separator/usage.xml

@@ -1,8 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <usage surface="separator">
-  <do>Dividing sections within a page or panel</do>
-  <do>Vertical dividers in toolbars, menus, or button groups</do>
-  <do>Separating list items or stacked content blocks</do>
-  <dont>Using Select.Separator for general layout dividers</dont>
-  <dont>Replacing Surface borders with Separator for container chrome</dont>
+  <do>Horizontal rules between Stack sections — default orientation inside Surface panels, form summaries, or list metric rows</do>
+  <do>Split line items from a total inside a tinted Surface — Stack `rowGap` + Separator + totals row (Text pairs)</do>
+  <do>Bookend action strips — Separator above/below a Button row inside Surface (editor footers)</do>
+  <do>Vertical gutters or toolbar splits — `orientation=&quot;vertical&quot;` in a row Stack beside content or Button groups</do>
+  <do>Token thickness (`size`) and `variant` (e.g. dashed); space with Separator `hPadding`/`vPadding` or parent Stack gap — no custom border CSS</do>
+  <dont>Using Select.Separator for general layout dividers — that part is for Select option lists only</dont>
+  <dont>Replacing Surface borders or card outlines with Separator — use Surface `border` props for container chrome</dont>
+  <dont>Inventing divider margin/gap CSS when parent Stack `rowGap` / `columnGap` and Separator padding props cover spacing</dont>
 </usage>

package/dist/specs/components/shimmer/patterns.xml

@@ -1,7 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <patterns surface="shimmer">
-  <example title="Shimmer structure">
-    <tsx><![CDATA[<Shimmer>…</Shimmer>]]></tsx>
-    <notes>Public assembly hint from legacy guide; not API authority.</notes>
+  <!-- Sources: preview-grid `savings-targets` — cleaned. -->
+
+  <example title="Muted status line with Spinner">
+    <tsx><![CDATA[
+<Surface color={2} hPadding="l" vPadding="m">
+  <Stack direction="row" vAlign="center" hAlign="start" columnGap="s">
+    <Spinner variant="dot-grid" size="s" aria-hidden />
+    <Text tone="muted" size="s">
+      <Shimmer>You have not met your targets yet.</Shimmer>
+    </Text>
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From preview-grid `savings-targets` footer. Wrap final-dimension copy in Shimmer inside Text/Title — not Skeleton blocks. Parent region owns `aria-busy` if needed.</notes>
+  </example>
+
+  <example title="Inline loading label">
+    <tsx><![CDATA[
+<Text size="s" tone="muted">
+  <Shimmer>Loading balance…</Shimmer>
+</Text>
+]]></tsx>
+    <notes>Minimal text shimmer while async copy is pending. Prefer Skeleton for non-text layout placeholders.</notes>
   </example>
 </patterns>

package/dist/specs/components/shimmer/props.xml

@@ -25,16 +25,16 @@
   <prop name="spread" kind="react">
     <description>Sets the shimmer highlight spread using any valid CSS length string.</description>
   </prop>
-  <css_var suffix="angle">
+  <prop name="angle" kind="css">
     <description>Shimmer gradient angle offset.</description>
-  </css_var>
-  <css_var suffix="duration">
+  </prop>
+  <prop name="duration" kind="css">
     <description>Shimmer animation duration.</description>
-  </css_var>
-  <css_var suffix="highlight">
+  </prop>
+  <prop name="highlight" kind="css">
     <description>Shimmer highlight color.</description>
-  </css_var>
-  <css_var suffix="spread">
+  </prop>
+  <prop name="spread" kind="css">
     <description>Shimmer highlight spread width.</description>
-  </css_var>
+  </prop>
 </props>

package/dist/specs/components/shimmer/usage.xml

@@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <usage surface="shimmer">
-  <do>Loading placeholder copy inside Text or Title</do>
-  <do>Animated text shimmer while awaiting async content</do>
-  <do>Muted loading labels that keep the final text dimensions</do>
-  <dont>Putting aria-busy on Shimmer instead of the surrounding loading region</dont>
+  <do>Wrap final-dimension loading copy inside Text or Title so typography / tone / size inherit — Shimmer is a `span` effect, not a layout block</do>
+  <do>Status footers: Surface + Stack row (`columnGap`, `vAlign=&quot;center&quot;`) with decorative Spinner (`aria-hidden`) beside Text &gt; Shimmer</do>
+  <do>Keep children as the real placeholder string so layout width matches the eventual label</do>
+  <do>Announce busy on the surrounding region when needed — do not mark Shimmer `aria-hidden` (it renders readable text)</do>
+  <dont>Using Shimmer for fixed-size block / media placeholders — use Skeleton</dont>
   <dont>Using Shimmer without children text content</dont>
-  <dont>Using Shimmer for block placeholders better served by Skeleton</dont>
+  <dont>Putting `aria-busy` on Shimmer instead of the surrounding loading region</dont>
+  <dont>Replacing Skeleton card stacks with nested Shimmer</dont>
 </usage>

package/dist/specs/components/skeleton/patterns.xml

@@ -1,8 +1,176 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <patterns surface="skeleton">
-  <example title="Skeleton structure">
-    <tsx><![CDATA[<Skeleton />
-<Skeleton.Overlay>…</Skeleton.Overlay>]]></tsx>
-    <notes>Public assembly hint from legacy guide; not API authority.</notes>
+  <!-- Sources: viraui-app/components + preview-grid — cleaned (no handlers, no app-only chrome, no CSS that reinvents layout props). -->
+
+  <example title="Fixed-size chrome placeholder (mode switcher)">
+    <tsx><![CDATA[
+<Surface border="all" radius="m" vPadding="2xs" hPadding="2xs" aria-hidden>
+  <Skeleton aria-hidden height="1.75rem" radius="m" width="5.75rem" />
+</Surface>
+]]></tsx>
+    <notes>From `common/mode-switcher` SSR gate. Explicit `width`/`height`/`radius` when the final control size is known. Decorative — parent owns `aria-hidden` / busy status.</notes>
+  </example>
+
+  <example title="Overlay over pending content (code block)">
+    <tsx><![CDATA[
+<Surface
+  data-vibrant
+  radius="m"
+  border="all"
+  overflow="hidden"
+  aria-busy
+  role="region"
+  aria-label="Code preview"
+>
+  <Stack>
+    {/* toolbar */}
+    <Skeleton.Overlay>
+      {/* pending highlighted body — Overlay sizes to children */}
+      <pre>
+        <code>{`/* theme export */`}</code>
+      </pre>
+    </Skeleton.Overlay>
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `common/code-block`. Prefer `Skeleton.Overlay` when placeholder must match incoming content box. Announce busy on the Surface, not on Skeleton.</notes>
+  </example>
+
+  <example title="Card skeleton stack (canvas preview)">
+    <tsx><![CDATA[
+<Surface border="all" color={1} overflow="hidden" radius="l">
+  <Stack direction="column" hPadding="l" rowGap="m" vPadding="l">
+    <Skeleton aria-hidden height="1.25rem" radius="m" width="37%" />
+    <Skeleton aria-hidden height="1rem" radius="m" width="56%" />
+    <Skeleton aria-hidden height="8rem" radius="l" width="100%" />
+    <Skeleton aria-hidden height="1rem" radius="m" width="100%" />
+    <Skeleton aria-hidden height="1rem" radius="m" width="76%" />
+    <Skeleton aria-hidden height="1rem" radius="m" width="51%" />
+    <Stack columnGap="s" direction="row" expandChildren>
+      <Skeleton aria-hidden height="2.5rem" radius="l" width="100%" />
+      <Skeleton aria-hidden height="2.5rem" radius="l" width="100%" />
+    </Stack>
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `editor/canvas/canvas-preview-skeleton` card. Varied widths mimic title/body/CTA. `expandChildren` shares action-row width — no flex CSS.</notes>
+  </example>
+
+  <example title="Sidebar section skeleton">
+    <tsx><![CDATA[
+<Stack hPadding="m">
+  <Surface color={2} radius="m">
+    <Stack hPadding="m" rowGap="m" vPadding="m">
+      <Stack columnGap="s" direction="row" vAlign="center">
+        <Skeleton aria-hidden height="1.125rem" radius="m" width="1.125rem" />
+        <Skeleton aria-hidden height="1rem" radius="m" width="42%" />
+      </Stack>
+      <Skeleton aria-hidden height="0.875rem" radius="m" width="68%" />
+    </Stack>
+    <Stack hPadding="m" rowGap="m" vPadding="m">
+      <Skeleton aria-hidden height="2.5rem" radius="m" width="100%" />
+      <Skeleton aria-hidden height="2.5rem" radius="m" width="100%" />
+    </Stack>
+  </Surface>
+</Stack>
+]]></tsx>
+    <notes>From `editor/sidebar/sidebar-sections-skeleton`. Icon + title row, muted line, then control-height blocks. Drop `min-block-size` header CSS from this hint.</notes>
+  </example>
+
+  <example title="Editor shell footer actions">
+    <tsx><![CDATA[
+<Surface color={2} data-grow="false">
+  <Separator />
+  <Stack direction="row" hPadding="m" columnGap="s" vPadding="s" expandChildren>
+    <Skeleton aria-hidden height="2rem" radius="m" width="100%" />
+    <Skeleton aria-hidden height="2rem" radius="m" width="100%" />
+    <Skeleton aria-hidden height="2rem" radius="m" width="100%" />
+  </Stack>
+  <Separator />
+  <Stack hPadding="m" rowGap="s" vPadding="xs">
+    <Skeleton aria-hidden height="2rem" radius="m" width="100%" />
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `editor/editor-shell-skeleton` sidebar footer. Equal-width action skeletons via `expandChildren`. Shell grid/`100dvh` stay in app CSS.</notes>
+  </example>
+
+  <example title="Overlay + view-transition wipe (loading placeholder)">
+    <tsx><![CDATA[
+<div className="skeleton-overlay-shell">
+  {/* CSS: .skeleton-overlay-shell { view-transition-name: skeleton-overlay; } */}
+  <Surface
+    aria-busy
+    aria-label="Overview card"
+    border="all"
+    color={1}
+    radius="l"
+    role="region"
+    overflow="hidden"
+  >
+    <Stack rowGap="m" hPadding="m" vPadding="m">
+      <Stack rowGap="xs" maxWidth="20ch">
+        <Skeleton.Overlay>
+          <Title size="6" render={<h2 />}>
+            Ledger overview
+          </Title>
+        </Skeleton.Overlay>
+        <Skeleton.Overlay>
+          <Text size="s" tone="muted">
+            Updated 2 hours ago
+          </Text>
+        </Skeleton.Overlay>
+      </Stack>
+
+      <Skeleton.Overlay>
+        <Surface color={2} radius="l">
+          {/* media sized by real content */}
+        </Surface>
+      </Skeleton.Overlay>
+
+      <Skeleton.Overlay>
+        <Text size="s">Next payout scheduled for Friday with FX risk: low and 3 actions pending</Text>
+      </Skeleton.Overlay>
+
+      <Stack columnGap="s" direction="row" expandChildren>
+        <Button size="s">Show content</Button>
+        <Skeleton.Overlay>
+          <Button size="s" variant="secondary">
+            Secondary action
+          </Button>
+        </Skeleton.Overlay>
+      </Stack>
+    </Stack>
+  </Surface>
+</div>
+]]></tsx>
+    <notes>From preview-grid `loading-placeholder`. Overlay wraps real structure for zero layout shift; wipe uses `view-transition-name: skeleton-overlay` on a CSS class — not inline style. Drop kitchen reveal handlers.</notes>
+  </example>
+
+  <example title="Static placeholder card (prompts info backdrop)">
+    <tsx><![CDATA[
+<Elevator resting={1}>
+  <Surface border="all" overflow="hidden" radius="l">
+    <Stack hPadding="m" rowGap="s" vPadding="m">
+      <Skeleton animate={false} aria-hidden height="8rem" radius="m" width="100%" />
+      <Skeleton animate={false} aria-hidden height="1rem" radius="full" width="70%" />
+      <Skeleton animate={false} aria-hidden height="0.75rem" radius="m" width="45%" />
+    </Stack>
+  </Surface>
+</Elevator>
+]]></tsx>
+    <notes>From `prompts/prompts-info-state` decorative card. `animate={false}` when pulse would compete with empty-state chrome. Drop Grid/absolute backdrop shell from this hint.</notes>
+  </example>
+
+  <example title="Large preview shell fallback (export dialog)">
+    <tsx><![CDATA[
+<Skeleton
+  aria-hidden
+  width="min(800px, 90vw)"
+  height="min(50vh, 54rem)"
+  radius="m"
+/>
+]]></tsx>
+    <notes>From `editor/export-dialog` Suspense fallback. One block sized to the eventual preview shell. Parent dialog region owns busy announcement.</notes>
   </example>
 </patterns>

package/dist/specs/components/skeleton/props.xml

@@ -49,25 +49,25 @@
   <prop name="width" kind="react">
     <description>Sets the skeleton inline size using any valid CSS size string.</description>
   </prop>
-  <css_var suffix="background">
+  <prop name="background" kind="css">
     <description>Skeleton placeholder background color.</description>
-  </css_var>
-  <css_var suffix="block-size">
+  </prop>
+  <prop name="block-size" kind="css">
     <description>Skeleton block size.</description>
-  </css_var>
-  <css_var suffix="border-radius">
+  </prop>
+  <prop name="border-radius" kind="css">
     <description>Skeleton corner radius.</description>
-  </css_var>
-  <css_var suffix="duration">
+  </prop>
+  <prop name="duration" kind="css">
     <description>Pulse duration.</description>
-  </css_var>
-  <css_var suffix="inline-size">
+  </prop>
+  <prop name="inline-size" kind="css">
     <description>Skeleton inline size.</description>
-  </css_var>
-  <css_var suffix="min-block-size">
+  </prop>
+  <prop name="min-block-size" kind="css">
     <description>Skeleton minimum block size.</description>
-  </css_var>
-  <css_var suffix="min-inline-size">
+  </prop>
+  <prop name="min-inline-size" kind="css">
     <description>Skeleton minimum inline size.</description>
-  </css_var>
+  </prop>
 </props>

package/dist/specs/components/skeleton/usage.xml

@@ -1,10 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <usage surface="skeleton">
-  <do>Fixed-dimension pulse blocks while content loads</do>
-  <do>Avatar or media placeholders with explicit width and height</do>
-  <do>Skeleton.Overlay when placeholder layout should match incoming typography without layout shift</do>
-  <do>View-transition wipe reveal for `Skeleton.Overlay`, with `viewTransitionName: &apos;skeleton-overlay&apos;` on the wrapper around skeleton+loaded content (prefer CSS class, not inline style)</do>
-  <dont>Using Skeleton.Overlay without real content structure to size against</dont>
-  <dont>Putting aria-busy on Skeleton instead of the surrounding loading region</dont>
-  <dont>Expecting view-transition wipe without wrapper `viewTransitionName: &apos;skeleton-overlay&apos;` (prefer CSS class, not inline style)</dont>
+  <do>Card / sidebar placeholders: Surface chrome + Stack `rowGap` / padding, then Skeleton blocks with explicit `width` / `height` / `radius` — no flex/gap CSS</do>
+  <do>Equal-width action skeletons: Stack `direction=&quot;row&quot;` + `expandChildren` around Skeleton children</do>
+  <do>Zero layout shift: wrap real Title / Text / Button / Surface structure in `Skeleton.Overlay` so the pulse box matches incoming content</do>
+  <do>Announce busy on the surrounding Surface / region (`aria-busy`, `role=&quot;region&quot;`, label) — Skeleton roots force `aria-hidden`</do>
+  <do>View-transition wipe for Overlay reveal: CSS class with `view-transition-name: skeleton-overlay` on the shell wrapping skeleton+loaded content (not inline style)</do>
+  <do>Static decorative chrome: `animate={false}` when pulse would compete with empty-state or backdrop art</do>
+  <dont>Using Skeleton for inline loading copy — prefer Shimmer inside Text / Title</dont>
+  <dont>Putting `aria-busy` on Skeleton / Overlay instead of the surrounding loading region</dont>
+  <dont>Using `Skeleton.Overlay` without real children that define the measure box</dont>
+  <dont>Expecting view-transition wipe without wrapper `view-transition-name: skeleton-overlay`</dont>
+  <dont>Inventing flex / gap / equal-width CSS for placeholder stacks when Stack props cover it</dont>
 </usage>

package/dist/specs/components/slider/patterns.xml

@@ -1,7 +1,115 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <patterns surface="slider">
-  <example title="Slider structure">
-    <tsx><![CDATA[<Slider />]]></tsx>
-    <notes>Public assembly hint from legacy guide; not API authority.</notes>
+  <!-- Sources: viraui-app / design-kitchen preview-grid — cleaned (no handlers, no app chrome CSS). -->
+
+  <example title="Labeled amount with captions">
+    <tsx><![CDATA[
+<Stack rowGap="m">
+  <Slider label="Minimum Payout Amount" min={50} max={10000} step={50} value={2500} renderValue />
+  <Stack columnGap="s" direction="row" hAlign="space-between" vAlign="center">
+    <Text family="mono" size="xs" tone="muted">
+      $50 (MIN)
+    </Text>
+    <Text family="mono" size="xs" tone="muted">
+      $10,000 (MAX)
+    </Text>
+  </Stack>
+</Stack>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/payout-threshold`. Field `label` + `renderValue` (true or custom formatter). Min/max captions are sibling Text — not track CSS.</notes>
+  </example>
+
+  <example title="External label row">
+    <tsx><![CDATA[
+<Surface color={2} radius="l" hPadding="m" vPadding="m">
+  <Stack columnGap="m" direction="row" vAlign="center" expandChildren>
+    <Stack data-grow={false} minWidth="13ch" direction="row" columnGap="s" vAlign="center">
+      <Sun size={16} />
+      <Text weight="semibold" whiteSpace="nowrap">
+        Brightness
+      </Text>
+    </Stack>
+    <Slider
+      aria-label="Kitchen island brightness"
+      max={100}
+      min={0}
+      thumbAriaLabel="Kitchen island brightness"
+      value={86}
+    />
+  </Stack>
+</Surface>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/kitchen-island`. Visible label lives outside Slider; pass `aria-label` / `thumbAriaLabel` so the thumb stays named. `expandChildren` grows the track.</notes>
+  </example>
+
+  <example title="Bracketed continuum">
+    <tsx><![CDATA[
+<Stack columnGap="l" direction="row" vAlign="center">
+  <Text family="mono" size="xs" data-shrink={false} tone="muted">
+    OPEN
+  </Text>
+  <Slider
+    aria-label="Living room roller shades"
+    max={100}
+    min={0}
+    thumbAriaLabel="Living room roller shades"
+    value={50}
+  />
+  <Text family="mono" size="xs" data-shrink={false} tone="muted">
+    CLOSE
+  </Text>
+</Stack>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/roller-shades`. Endcaps via Text + `data-shrink={false}` — Slider fills the middle. Drop the decorative shade preview from this hint.</notes>
+  </example>
+
+  <example title="Vertical band">
+    <tsx><![CDATA[
+<Stack hAlign="center" rowGap="s" style={{ blockSize: '11rem' }}>
+  <Slider
+    aria-label="1K hertz band"
+    max={100}
+    min={0}
+    orientation="vertical"
+    thumbAriaLabel="1K hertz band"
+    value={50}
+    renderValue
+  />
+  <Text align="center" family="mono" size="xs" tone="muted">
+    1K
+  </Text>
+</Stack>
+]]></tsx>
+    <notes>From `editor/preview-grid/blocks/equalizer`. Vertical Slider needs a sized host (`blockSize` / flex grow). Band label is sibling Text. App wave-linking across bands is product logic — not part of the pattern.</notes>
+  </example>
+
+  <example title="Label + custom renderValue">
+    <tsx><![CDATA[
+<Stack direction="row" columnGap="s" vAlign="end" expandChildren>
+  <Slider
+    label="Root size"
+    renderValue={(_formatted, values) => (
+      <Text size="xs" tone="muted">
+        {Math.round(((values[0] ?? 100) / 100) * 16)}px
+      </Text>
+    )}
+    min={87.5}
+    max={112.5}
+    step={6.25}
+    value={100}
+  />
+</Stack>
+]]></tsx>
+    <notes>From `editor/controls/font-root-size` (+ hue-mode axes in `common/color-picker`). `renderValue` as a function owns the value slot (no default Text wrapper). Pair with trailing chrome (e.g. ShuffleLockToggle) via row Stack when needed.</notes>
+  </example>
+
+  <example title="Hue axis pair">
+    <tsx><![CDATA[
+<Stack rowGap="m">
+  <Slider label="Saturation" renderValue min={0} max={10} step={1} value={5} thumbAriaLabel="Saturation" />
+  <Slider label="Contrast" renderValue min={0.5} max={1.5} step={0.05} value={1} thumbAriaLabel="Contrast" />
+</Stack>
+]]></tsx>
+    <notes>From `common/color-picker` hue mode. Stacked labeled Sliders with `renderValue` / `thumbAriaLabel`. Drop ColorArea / HueSlider (chromakit) from this hint.</notes>
   </example>
 </patterns>

package/dist/specs/components/slider/props.xml

@@ -27,19 +27,19 @@
   <prop name="thumbAriaLabel" kind="react">
     <description>Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied.</description>
   </prop>
-  <css_var suffix="progress-background">
+  <prop name="progress-background" kind="css">
     <description>Slider filled progress color.</description>
-  </css_var>
-  <css_var suffix="thumb-background">
+  </prop>
+  <prop name="thumb-background" kind="css">
     <description>Slider thumb fill color.</description>
-  </css_var>
-  <css_var suffix="thumb-size">
+  </prop>
+  <prop name="thumb-size" kind="css">
     <description>Slider thumb size.</description>
-  </css_var>
-  <css_var suffix="track-background">
+  </prop>
+  <prop name="track-background" kind="css">
     <description>Slider track background color.</description>
-  </css_var>
-  <css_var suffix="track-size">
+  </prop>
+  <prop name="track-size" kind="css">
     <description>Slider track thickness.</description>
-  </css_var>
+  </prop>
 </props>