@solidrt/components 0.0.51 → 0.0.52

package/demos/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext"],
+    "jsx": "preserve",
+    "jsxImportSource": "@solidrt/core",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["@solidrt/flux-types"]
+  },
+  "include": ["src"]
+}

package/docs/button.md

@@ -18,4 +18,4 @@ An `onPress` returning a promise makes the button an async action: while it is u
 <Button onPress={async () => { await save() }}>Save</Button>
 ```
 
-A focused Button (see `createFocusNav`) draws a text-colored ring under the `focusRing` policy - text-colored rather than primary so it stays visible on primary-filled buttons - and activates on Enter, Space, or a remote's center key. `focusable` (default true) opts out of focus-navigation candidacy; disabled buttons are never candidates.
+A focused Button (see `createFocusNav`) draws a ring in the theme `ring` color under the `focusRing` policy (text-colored by default so it stays visible on primary-filled buttons) and activates on Enter, Space, or a remote's center key. `focusable` (default true) opts out of focus-navigation candidacy; disabled buttons are never candidates.

package/docs/focus-nav.md

@@ -1,6 +1,6 @@
 # createFocusNav
 
-Focus navigation for pointer-free control (TV remote, keyboard, gamepad), moving real focus across the elements declaring `focusable`. Two movement types over the same candidates: spatial (arrow keys, dpad) picks the nearest candidate in the pressed direction by on-screen boxes, and sequential (Tab / Shift+Tab) walks visual reading order - rows top to bottom, left to right - wrapping at the ends. Enter / remote center / gamepad south activates the focused control. Nothing is focused until the first navigation press; pointer input works unchanged throughout.
+Focus navigation for pointer-free control (TV remote, keyboard, gamepad), moving real focus across the elements declaring `focusable`. Two movement types over the same candidates: spatial (arrow keys, dpad) picks the nearest candidate in the pressed direction by on-screen boxes, and sequential (Tab / Shift+Tab) walks visual reading order - rows top to bottom, left to right - wrapping at the ends. Enter / remote center / gamepad south activates the focused control. Nothing is focused until the first navigation press; pointer input works unchanged throughout. Every interactive control (Button, Item, TextInput, RichTextEditor, Checkbox, Radio, Switch, Select and its options, SegmentedControl segments, Slider) is a candidate unless disabled, and draws the theme's `ring` color at `borderWidth.focus` while focused under the `focusRing` policy; the Slider steps its value with the arrow keys.
 
 ```jsx
 import { createFocusNav } from "@solidrt/components"

package/docs/icon.md

@@ -1,6 +1,6 @@
 # Icon
 
-A thin themed wrapper over the core `parseSvg` primitive. `src` is a whole SVG document as a string; the component parses it once (memoized), maps the draws to `<d-path>` in a square `viewBox`-fitted box (`size`, default 24) and, for monochrome icons that stroke/fill with `currentColor`, recolors it via `color` (default the theme text color). It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons, ...) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `parseSvg` directly.
+A thin themed wrapper over the core `parseSvg` primitive. `src` is a whole SVG document as a string; the component parses it once (memoized), maps the draws to `<d-path>` in a square `designSize`-fitted box (`size`, default 24) and, for monochrome icons that stroke/fill with `currentColor`, recolors it via `color` (default the theme text color). It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons, ...) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `parseSvg` directly.
 
 Icons are just SVG strings: import them as assets (`import House from "lucide-static/icons/house.svg"`, resolved to a string), pull them from a string export, or inline a literal.
 

package/docs/item.md

@@ -1,6 +1,6 @@
 # Item
 
-A list row: `startContent` (icon, avatar, checkbox), a `label` with an optional `description` under it, and `endContent` (badge, timestamp, action) pushed to the end. String/number label and description render as themed body and muted caption text; anything else as-is. The dense-data workhorse: rows compose with `<For>` inside a plain column view or `ScrollView` - there is no List wrapper, because a column IS the list. Paddings and gaps are density-scaled, so a `<Density>` region compacts rows wholesale.
+A list row: `startContent` (icon, avatar, checkbox), a `label` with an optional `description` under it, and `endContent` (badge, timestamp, action) pushed to the end. String/number label and description render as themed body and muted body text; anything else as-is. The dense-data workhorse: rows compose with `<For>` inside a plain column view or `ScrollView` - there is no List wrapper, because a column IS the list. Paddings and gaps are density-scaled, so a `<Density>` region compacts rows wholesale.
 
 ```jsx
 import { Item, Badge, Icon } from "@solidrt/components"

package/docs/policy.md

@@ -10,7 +10,7 @@ The fields:
 - `focusRing` (`boolean`) - whether focused controls draw a visible focus indicator (true when a keyboard or gamepad/remote is present).
 - `textScale` (`number`) - multiplier on type-scale font sizes; defaults to the OS text-scale preference.
 - `textWeightDelta` (`number`) - weight compensation (steps of 100) for light-on-dark text on low-DPI displays.
-- `navigation` (`"bottomTabs" | "rail" | "sidebar"`) - recommended nav layout, derived from the window size class. `NavShell` follows it.
+- `navigation` (`"bottomTabs" | "rail" | "sidebar"`) - recommended nav layout, derived from the pane count: `sidebar` beside a two-pane layout, `bottomTabs` under a single pane (a side strip spends the width a narrow window is short of). `rail` is never derived; set it for a content-dense two-pane app. `NavShell` follows it.
 - `layout` (`"singlePane" | "twoPane"`) - recommended pane count, derived from the window size class. `SplitView` follows it.
 
 ```jsx

package/docs/scroll-view.md

@@ -1,6 +1,6 @@
 # ScrollView
 
-A scrollable region; vertical by default, `horizontal` to flip. Both the wheel and dragging scroll the content: the drag activates after a small movement threshold along the scroll axis, also when it starts on a pressable (the press is cancelled and its feedback retracts), and keeps scrolling when the pointer leaves the box. No momentum/fling yet.
+A scrollable region; vertical by default, `horizontal` to flip. Both the wheel and dragging scroll the content: the drag activates after a small movement threshold along the scroll axis, also when it starts on a pressable (the press is cancelled and its feedback retracts), and keeps scrolling when the pointer leaves the box. Scrolling glides: the offset springs to each new target (250 ms, critically damped), so a wheel notch never jumps and a burst of notches reads as one motion; a dragging finger is tracked exactly, without the spring. No momentum/fling yet.
 
 ```jsx
 import { ScrollView, Text } from "@solidrt/components"
@@ -11,4 +11,25 @@ import { For } from "@solidrt/core"
 </ScrollView>
 ```
 
+`scrollRef` hands out the scroll handle from `createScroll`: `offset()` and `range()` (the largest reachable offset, refreshed each layout) are reactive; `scrollTo({ x, y, behavior })` and `scrollBy({ x, y, behavior })` clamp to the range, an omitted axis stays put, and `behavior: "instant"` writes without the spring (the web's word; `"auto"` and `"smooth"` are the default motion). Scroll policies are written against it in the app. A transcript that opens at its newest message and then follows growth, without yanking a reader who has scrolled back:
+
+```tsx
+let [scroll, setScroll] = createSignal<Scroll>()
+createEffect(
+  () => scroll()?.range(),
+  (r, prev) =>
+    untrack(() => {
+      let s = scroll()
+      if (!s || !r) return
+      if (!prev || prev.y === 0) s.scrollTo({ y: Infinity, behavior: "instant" })
+      else if (s.offset().y >= prev.y - 1) s.scrollTo({ y: Infinity })
+    }),
+)
+<ScrollView scrollRef={setScroll}>...</ScrollView>
+```
+
+The range changes whenever the content or the viewport changes size. The first fill (nothing was scrollable before it, whether it mounted with the view or arrived a second later) lands instantly, as a chat opens at its end; after that the view follows the end only if it was at the previous end, and the spring makes that follow a glide. The handle arrives once the component has settled, after an effect's first compute, so hold it in a signal (a setter can be passed as the ref) rather than a plain variable, which the effect would find unset and never track. The offset is read untracked: the policy reacts to the range, not to every scroll.
+
+A `scrollX`/`scrollY` entry in `transition` replaces the default spring: `transition={{ scrollY: { duration: 400, bounce: 0.2 } }}` (keep it a spring rather than a tween, because the wheel retargets mid-flight). The other entries animate the box itself and its background/border as on any component.
+
 The underlying geometry primitive `createScroll` is available from `@solidrt/core` for building custom scrollers.

package/docs/split-view.md

@@ -1,6 +1,6 @@
 # SplitView
 
-A list-detail container driven by `policy.layout`: `twoPane` shows the `list` pane (width `listWidth`, default 320) beside the `detail` pane, `singlePane` shows one at a time per `showDetail`. Keep pane state (selection, scroll) in the app, not in the panes: crossing a breakpoint re-arranges and can remount them. It draws no chrome and adds no padding; a back affordance in the single-pane detail is the app's to render (fork on `policy.layout`).
+A list-detail container driven by `policy.layout`: `twoPane` shows the `list` pane (width `listWidth`, default `theme.size.splitViewList`) beside the `detail` pane, `singlePane` shows one at a time per `showDetail`. Keep pane state (selection, scroll) in the app, not in the panes: crossing a breakpoint re-arranges and can remount them. It draws no chrome and adds no padding; a back affordance in the single-pane detail is the app's to render (fork on `policy.layout`).
 
 ```jsx
 import { SplitView } from "@solidrt/components"

package/docs/theme.md

@@ -29,11 +29,23 @@ let def = {
 setTheme(defineTheme(def, "dark"))
 ```
 
-The type scale derives from `text.base` (the body size, default 14) and `text.ratio` (default 1.26): caption, label, body, title, heading sit at `base * ratio^(-2..2)`, rounded to whole pixels, with per-role `text.roles` overrides for sizes, line heights, and weights.
+The type scale derives from `text.base` (the body size, default 14) and `text.ratio` (default 1.26): caption sits one step under body, label is body at an emphasized weight, title and heading sit one and two steps above, rounded to whole pixels, with per-role `text.roles` overrides for sizes, line heights, and weights. De-emphasis is a color (`textMuted`), not a size: caption is for small glanceable text (badges, tab labels, timestamps) and stays in the full text color.
 
 ## Tokens
 
-The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`/`onPrimary`, `secondary`/`onSecondary` (lower-emphasis accent), `danger` (validation/destructive), `scrim` (modal dim), and the feedback pair `overlayHover`/`overlayPressed`: translucent tints components draw OVER a control's own fill, so one token pair gives hover/pressed feedback on every fill color, including caller-set ones. Non-color tokens are `spacing`, `radius`, `borderWidth`, and `text` (the type scale: `caption`/`label`/`body`/`title`/`heading` roles, each `{ size, lineHeight, weight }`, plus `fontFamily`).
+The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`/`onPrimary`, `secondary`/`onSecondary` (lower-emphasis accent), `danger` (validation/destructive), `scrim` (modal dim), `ring` (the focus ring; defaults to `text` so it stays visible on primary fills), and the feedback pair `overlayHover`/`overlayPressed`: translucent tints components draw OVER a control's own fill, so one token pair gives hover/pressed feedback on every fill color, including caller-set ones. Non-color tokens are `spacing`, `radius`, `borderWidth` (`sm` for borders, `focus` for the ring), `size` (app-wide default extents: `navRail` 72, `navSidebar` 220, `splitViewList` 320, `menuMinWidth` 120, `slider` 200; each overridable per instance through its layout or prop), and `text` (the type scale: `caption`/`label`/`body`/`title`/`heading` roles, each `{ size, lineHeight, weight }`, plus `fontFamily` and `monoFamily` for code).
+
+## Spacing
+
+Spacing is one base unit: `spacing` in a theme definition is a number (default 4) and the steps are multiples of it (`sm` 1x, `md` 2x, `lg` 4x, `xl` 5x). Components read them through `space()`, which applies the density policy on top, so a theme sets the rhythm and density tightens it. Pass an object (`spacing: { sm, md, lg, xl }`, any subset) to pin individual steps.
+
+## Radius
+
+Corner radius is set once: `radius` in a theme definition is a single number, the control radius (default 8), and the scale derives from it: `md` is the base (Button, TextInput, RichTextEditor, Select, SegmentedControl, QrCode), `sm` half of it (Checkbox, Item, NavShell items, Select and ContextMenu popups, Tooltip), `lg` one and a half (Card), and `full` the pill (Badge). Set `radius: 0` for a square theme, `radius: 12` for a soft one; buttons and inputs always match. Shapes derived from a control's own height (Switch, Slider, ProgressBar, Radio) are not on the scale. Pass an object (`radius: { sm, md, lg, full }`, any subset) to pin individual steps instead.
+
+```jsx
+setTheme({ radius: 4 })   // sm 2, md 4, lg 6
+```
 
 ## Per-component overrides
 

package/docs/types.md

@@ -3,3 +3,7 @@
 Most components group their props into two objects, split by one rule: `layout` properties feed the layout engine (flexbox/grid, sizing, padding, margin, position - the core `LayoutProps` set) and changing them triggers a relayout; `style` properties are paint-only and never affect layout: `color`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, and the transform (`x`, `y`, `scale`, `rotate`, `rotateX`/`rotateY` with `perspective`, `originX`/`originY`, `clipRadius`). Event handlers (`onPointerDown`, `onKeyDown`, ...) are top-level props, never inside `layout` or `style`.
 
 `StyleProps` is that paint set. `TextLayoutProps` extends `LayoutProps` with the font fields (`fontFamily`, `fontSize`, `lineHeight`, `fontStyle`, `fontWeight`, `textAlign`, `maxLines`) because text shaping affects measurement; note `lineHeight` is a multiplier of `fontSize` (the theme uses 1.3-1.6), not a pixel value. `Option` (`{ value, label }`) is the shared shape of the single-choice controls (`Select`, `SegmentedControl`): shared shapes go through this module so components never import a sibling.
+
+`TransitionProps` (`transition`, `onTransitionEnd`) is the third top-level group, in the component's own vocabulary rather than core's: a declaration names the view-level properties (`opacity`, `x`, `y`, `scale*`, `rotate*`, `origin*`, `perspective`, `clipRadius`) and the style ones (`backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`), plus `all`, a shorthand string, and `stagger` - `<Button transition={{ backgroundColor: { duration: 300 }, opacity: "200ms ease-out" }}>`. Core's paint names (`color`, `radius`, `strokeWidth`) are rejected by the types: a component is a root view plus the rects it draws for `style`, and `splitTransition` hands each entry to the node that owns it (the background rect gets `backgroundColor`/`borderRadius`, the stroke rect `borderColor`/`borderWidth`/`borderRadius`, the root view the rest). `onTransitionEnd` reports the component name (`backgroundColor`, not `color`). `Text` adds `color` (its text node), `ScrollView` adds `scrollX`/`scrollY` (its viewport).
+
+Controls whose paint is their own - `Switch` knob, `Slider` thumb, `Checkbox` mark, `Radio` dot, `ProgressBar` fill, `Spinner`, `Icon`, `QrCode`, and the chrome of `NavShell`, `ContextMenu`, `Field` - animate the view-level entries only for now; their internal parts are not reachable through `transition` yet (okf/backlog/component-transitions-internal-paint.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -14,13 +14,14 @@
     "src/",
     "docs/",
     "examples/",
+    "demos/",
     "AGENTS.md"
   ],
   "dependencies": {
     "qrcode-generator": "^2.0.4"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.0",
-    "@solidrt/core": "0.0.51"
+    "@solidjs/signals": "2.0.0-rc.1",
+    "@solidrt/core": "0.0.52"
   }
 }

package/src/badge.tsx

@@ -1,12 +1,15 @@
 import { Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
-import { typeStyle, lightOnDark } from "./typography"
-import type { StyleProps } from "./types"
+import { space } from "./spacing"
+import { typeStyle, typeWeight, lightOnDark } from "./typography"
+import { policy } from "./policy"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 export type BadgeVariant = "primary" | "neutral" | "danger"
 
-export interface BadgeProps {
+export interface BadgeProps extends TransitionProps {
   // A string/number renders as the themed pill label; anything else is rendered
   // as-is (an icon, a dot, ...).
   children?: any
@@ -16,10 +19,6 @@ export interface BadgeProps {
   style?: StyleProps
 }
 
-// A rounded radius large enough to fully pill any typical badge height; the
-// renderer clamps it to half the box, so both ends stay round.
-const RADIUS = 999
-
 // A small rounded pill for counts, labels, and status. Accent fill with
 // onPrimary text by default; override the fill via style.backgroundColor and the
 // label color via style.color.
@@ -39,22 +38,26 @@ export function Badge(props: BadgeProps) {
   let styled = () => ({ ...theme.components.badge, ...props.style })
   let bg = () => styled().backgroundColor ?? colors().bg
   let fg = () => styled().color ?? colors().fg
-  let radius = () => styled().borderRadius ?? RADIUS
+  let radius = () => styled().borderRadius ?? theme.radius.full
   // Resolved once via children(): the typeof probe and the mount sites must
   // share one build - reading the raw getter again would orphan native nodes.
   let resolved = children(() => props.children)
   let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
   let labelOnDark = () => lightOnDark(fg(), bg())
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       flexDirection="row"
       alignItems="center"
       justifyContent="center"
-      paddingLeft={8}
-      paddingRight={8}
-      paddingTop={2}
-      paddingBottom={2}
+      paddingLeft={space("md")}
+      paddingRight={space("md")}
+      paddingTop={Math.round(space("sm") / 2)}
+      paddingBottom={Math.round(space("sm") / 2)}
       {...props.layout}
       x={styled().x}
       y={styled().y}
@@ -62,9 +65,13 @@ export function Badge(props: BadgeProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect color={bg()} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
       <Show when={isText()} fallback={resolved()}>
-        <text color={fg()} {...typeStyle("label", labelOnDark())}>
+        <text
+          color={fg()}
+          {...typeStyle("caption", labelOnDark())}
+          fontWeight={typeWeight(600, theme.text.caption.size * policy.textScale, labelOnDark())}
+        >
           {resolved()}
         </text>
       </Show>

package/src/button.tsx

@@ -6,12 +6,13 @@ import { space } from "./spacing"
 import { typeStyle, lightOnDark } from "./typography"
 import { Spinner } from "./spinner"
 import type { LayoutProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"
 export type ButtonSize = "sm" | "md" | "lg"
 
-export interface ButtonProps {
+export interface ButtonProps extends TransitionProps {
   // A string/number is rendered as the themed label; anything else is rendered
   // as-is, so a button can hold custom content (an icon, a row, ...).
   children?: any
@@ -47,9 +48,8 @@ const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
 // box via style and the padding/sizing via layout; because hover is an
 // overlay, it composes over a caller-set backgroundColor too. When disabled,
 // it takes no pointer events at all. Focus (spatial nav) draws a ring under
-// the focusRing policy, text-colored rather than primary so it stays visible
-// on primary-filled buttons; Enter/Space/remote-select activates (handled by
-// createPress).
+// the focusRing policy in the theme's ring color; Enter/Space/remote-select
+// activates (handled by createPress).
 export function Button(props: ButtonProps) {
   // Fill and label color per variant, read reactively from the theme. No
   // variant draws a border.
@@ -95,7 +95,7 @@ export function Button(props: ButtonProps) {
   let press = createPress(props)
   let style = () => ({
     ...styled(),
-    ...(press.focused() && policy.focusRing ? { borderWidth: 2, borderColor: theme.color.text } : {}),
+    ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
     backgroundColor: bg(),
     borderRadius: radius(),
     // Always a number: a scale that flips from a number back to undefined
@@ -104,8 +104,12 @@ export function Button(props: ButtonProps) {
     scale: (styled().scale ?? 1) * (press.pressed() && policy.motion !== "none" ? 0.97 : 1),
   })
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         props.ref?.(n)
@@ -130,7 +134,7 @@ export function Button(props: ButtonProps) {
       focusable={(props.focusable ?? true) && props.disabled !== true}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
       <d-rect color={overlay(press.state())} radius={style().borderRadius} />
       <Show when={isText()} fallback={resolved()}>
         <text color={press.pending() ? "transparent" : label()} {...typeStyle("body", labelOnDark())}>
@@ -145,6 +149,8 @@ export function Button(props: ButtonProps) {
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style().borderColor ?? "transparent"}
           strokeWidth={style().borderWidth}
           radius={style().borderRadius}

package/src/card.tsx

@@ -3,9 +3,10 @@ import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { typeStyle } from "./typography"
 import { space } from "./spacing"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface CardProps {
+export interface CardProps extends TransitionProps {
   children?: any
   // Optional heading rendered above the content.
   title?: string
@@ -25,8 +26,12 @@ export function Card(props: CardProps) {
   let radius = () => styled().borderRadius ?? theme.radius.lg
   let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       repaintBoundary
       flexDirection="column"
@@ -39,7 +44,7 @@ export function Card(props: CardProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect color={bg()} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
       <Show when={props.title != null}>
         <text color={theme.color.text} {...typeStyle("title")}>
           {props.title}
@@ -49,6 +54,8 @@ export function Card(props: CardProps) {
       <Show when={hasBorder()}>
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={styled().borderColor ?? theme.color.border}
           strokeWidth={styled().borderWidth ?? theme.borderWidth.sm}
           radius={radius()}

package/src/checkbox.tsx

@@ -2,11 +2,13 @@ import { createSignal, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
+import { policy } from "./policy"
 import { densityScale } from "./density"
 import { Icon } from "./icon"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface CheckboxProps {
+export interface CheckboxProps extends TransitionProps {
   // Controlled checked state. If omitted, the checkbox is uncontrolled.
   checked?: boolean
   defaultChecked?: boolean
@@ -46,10 +48,13 @@ export function Checkbox(props: CheckboxProps) {
     borderRadius: theme.radius.sm,
     ...theme.components.checkbox,
     ...props.style,
+    ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
   })
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
       width={size()}
@@ -62,6 +67,7 @@ export function Checkbox(props: CheckboxProps) {
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
+      focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
       <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />

package/src/context-menu.tsx

@@ -5,6 +5,8 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 export interface ContextMenuItem {
   label: string
@@ -12,7 +14,7 @@ export interface ContextMenuItem {
   disabled?: boolean
 }
 
-export interface ContextMenuProps {
+export interface ContextMenuProps extends TransitionProps {
   items: ContextMenuItem[]
   // The content the menu attaches to.
   children?: any
@@ -23,8 +25,7 @@ const LONG_PRESS_MS = 500
 // Finger travel (window px) that cancels a pending long-press.
 const MOVE_SLOP = 8
 // Minimum distance kept between the menu and the window edges.
-const MARGIN = 4
-const MIN_WIDTH = 120
+let margin = () => theme.spacing.sm
 
 /**
  * Secondary actions on the wrapped content. The opening gesture follows the
@@ -113,9 +114,9 @@ export function ContextMenu(props: ContextMenuProps) {
       let b = menu && getBoundingBox(menu)
       if (!b) return
       let p = point()
-      let x = Math.round(Math.min(Math.max(p.x, MARGIN), env.windowSize.width - b.width - MARGIN))
+      let x = Math.round(Math.min(Math.max(p.x, margin()), env.windowSize.width - b.width - margin()))
       let y = Math.round(
-        Math.max(p.y + b.height > env.windowSize.height - MARGIN ? p.y - b.height : p.y, MARGIN),
+        Math.max(p.y + b.height > env.windowSize.height - margin() ? p.y - b.height : p.y, margin()),
       )
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
@@ -130,7 +131,7 @@ export function ContextMenu(props: ContextMenuProps) {
           left={0}
           x={pos()?.x ?? -10000}
           y={pos()?.y ?? 0}
-          minWidth={MIN_WIDTH}
+          minWidth={theme.size.menuMinWidth}
           flexDirection="column"
           paddingTop={theme.spacing.sm}
           paddingBottom={theme.spacing.sm}
@@ -177,6 +178,8 @@ export function ContextMenu(props: ContextMenuProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       onPointerDown={handleDown}
       onPointerMove={handleMove}
       onPointerUp={cancelHold}

package/src/divider.tsx

@@ -1,8 +1,9 @@
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface DividerProps {
+export interface DividerProps extends TransitionProps {
   // Line direction. Horizontal (default) is a full-width rule; vertical is a
   // full-height rule for use inside a row.
   orientation?: "horizontal" | "vertical"
@@ -22,14 +23,18 @@ export function Divider(props: DividerProps) {
   let styled = () => ({ ...theme.components.divider, ...props.style })
   let color = () => styled().backgroundColor ?? theme.color.border
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       width={vertical() ? thickness() : "auto"}
       height={vertical() ? "auto" : thickness()}
       alignSelf="stretch"
       {...props.layout}
     >
-      <d-rect color={color()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={color()} />
     </view>
   )
 }

package/src/editor-field.tsx

@@ -22,7 +22,8 @@ import type { Color, Gradient, KeyEvent, LayoutProps, PointerEvent, TextInputHin
 import type { Element } from "solid-js"
 import type { MeasureTextOptions, TextRunRange } from "flux:rendertree"
 import { registerNavAction } from "./focus-nav"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -44,7 +45,7 @@ export type LineRender = {
   color: () => Color | Gradient
 }
 
-export interface EditorFieldProps {
+export interface EditorFieldProps extends TransitionProps {
   /**
    * Creates the buffer the field edits, given the grapheme `step` from the
    * field's geometry (createTextEditorLayout.step); called once.
@@ -234,14 +235,14 @@ export function EditorField(props: EditorFieldProps) {
   })
 
   // Style overrides fall back to theme defaults. The border doubles as the
-  // focus ring: primary while focused, when the focus-ring policy asks for a
-  // visible indicator.
+  // focus ring (ring color at the focus width) while focused, when the
+  // focus-ring policy asks for a visible indicator.
   let textColor = () => props.style?.color ?? theme.color.text
   let surfaceColor = () => props.style?.backgroundColor ?? theme.color.surface
-  let borderColor = () =>
-    props.style?.borderColor ?? (focused() && policy.focusRing ? theme.color.primary : theme.color.border)
-  let borderWidth = () => props.style?.borderWidth ?? theme.borderWidth.sm
-  let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
+  let ring = () => focused() && policy.focusRing
+  let borderColor = () => props.style?.borderColor ?? (ring() ? theme.color.ring : theme.color.border)
+  let borderWidth = () => props.style?.borderWidth ?? (ring() ? theme.borderWidth.focus : theme.borderWidth.sm)
+  let borderRadius = () => props.style?.borderRadius ?? theme.radius.md
 
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
   let showCaret = () => focused() && caretOn() && !showPlaceholder()
@@ -290,8 +291,12 @@ export function EditorField(props: EditorFieldProps) {
     return Math.max(rowHeight(), Math.min(content, max))
   }
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         node = n
         unregisterNav?.()
@@ -304,8 +309,8 @@ export function EditorField(props: EditorFieldProps) {
       alignItems="center"
       paddingLeft={space("md")}
       paddingRight={space("md")}
-      paddingTop={space("sm")}
-      paddingBottom={space("sm")}
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
@@ -318,9 +323,11 @@ export function EditorField(props: EditorFieldProps) {
       onKeyDown={handleKeyDown}
       onTextInput={handleTextInput}
     >
-      <d-rect color={surfaceColor()} radius={borderRadius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={surfaceColor()} radius={borderRadius()} />
       <d-rect
         drawStyle="stroke"
+        transition={split().border}
+        onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
         color={borderColor()}
         strokeWidth={borderWidth()}
         radius={borderRadius()}

package/src/field.tsx

@@ -3,8 +3,10 @@ import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface FieldProps {
+export interface FieldProps extends TransitionProps {
   // Label above the control.
   label?: string
   // Help text under the control; replaced by `error` while one is set.
@@ -25,7 +27,7 @@ export interface FieldProps {
 // `description` if that matters.
 export function Field(props: FieldProps) {
   return (
-    <view flexDirection="column" gap={space("sm")} {...props.layout}>
+    <view flexDirection="column" gap={space("sm")} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <Show when={props.label != null}>
         <text color={theme.color.text} {...typeStyle("label")}>
           {props.label}

package/src/icon.tsx

@@ -1,8 +1,10 @@
 import { createMemo, parseSvg, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface IconProps {
+export interface IconProps extends TransitionProps {
   // An SVG document as a string: an imported `.svg` asset, a `lucide-static`
   // string export, or an inline template literal. Monochrome icons that stroke/
   // fill with `currentColor` (Lucide, Feather, Heroicons, ...) get recolored by
@@ -18,9 +20,9 @@ export interface IconProps {
 const SIZE = 24
 
 // A themed wrapper over parseSvg: the document parsed once per src/color (a
-// memo), its draws mapped to <d-path> in a square viewBox-fitted box colored
+// memo), its draws mapped to <d-path> in a square designSize-fitted box colored
 // from the theme by default. That is the only value it adds, so reach for
-// parseSvg plus your own <view viewBox> when you need a non-square box or
+// parseSvg plus your own <view designSize> when you need a non-square box or
 // want no theme coupling. The plain repaintBoundary keeps the static subtree
 // from re-recording alongside animating siblings; pointerEvents="all" makes
 // the box one hit unit (and skips per-path outline tests) - an icon's shapes
@@ -31,11 +33,13 @@ export function Icon(props: IconProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       repaintBoundary
       pointerEvents="all"
       width={size()}
       height={size()}
-      viewBox={[doc().width, doc().height]}
+      designSize={[doc().width, doc().height]}
       {...props.layout}
     >
       <For each={doc().draws}>{(draw) => <d-path {...draw} />}</For>