@solidrt/components 0.0.50 → 0.0.52

package/docs/theme.md

@@ -0,0 +1,68 @@
+# Theming
+
+Appearance (colors, spacing, border, font roles) comes from one shared, reactive theme backed by a Solid store: reads are tracked, so switching the theme at runtime recolors the live UI without remounting. Two presets ship, `darkTheme` and `lightTheme` (default dark); `setTheme(preset)` switches, `setTheme(partial)` merges an override one level deep per category. Custom themes are authored with `defineTheme`.
+
+```jsx
+import { setTheme, darkTheme, lightTheme } from "@solidrt/components"
+
+setTheme(lightTheme)                          // switch to light
+setTheme(darkTheme)                           // switch to dark
+setTheme({ color: { primary: "#ff2d55" } })   // override one token
+```
+
+## Authoring with defineTheme
+
+`defineTheme(definition, scheme?)` resolves a definition into a theme. Any color may be a single value or a `[light, dark]` pair; the `scheme` argument picks the side. Pairs are opt-in per token, and a definition without any needs no scheme at all - modes are a per-theme choice, not a framework requirement (a game ships one look, not two). The built-in presets are one definition resolved twice, so they cannot drift apart.
+
+```jsx
+import { defineTheme, setTheme } from "@solidrt/components"
+
+let def = {
+  color: {
+    background: ["#ffffff", "#101014"],   // [light, dark]
+    primary: "#ff2d55",                   // same in both
+    /* ... every color token ... */
+  },
+  text: { base: 15, ratio: 1.25 },
+}
+
+setTheme(defineTheme(def, "dark"))
+```
+
+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), `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
+
+`theme.components` restyles a component everywhere without wrapping it: a `StyleProps` object per component name, merged between the component's themed defaults and each instance's `style` prop (instance style still wins).
+
+```jsx
+setTheme({ components: { button: { borderRadius: 999 } } })   // pill buttons app-wide
+```
+
+Keys: `button`, `card`, `badge`, `switch`, `checkbox`, `radio`, `item`, `select`, `segmentedControl`, `textInput`, `richTextEditor`, `tooltip`, `divider`, `progressBar`, `spinner`.
+
+## Icon slots
+
+`theme.icons` holds semantic control glyphs as SVG document strings (the same currency as `Icon`): `chevronDown` (the Select trigger) and `check` (the Checkbox mark). Components draw their built-in vector paths by default; a theme that sets a slot swaps that glyph everywhere it appears, and the package still bundles no icon set.
+
+```jsx
+import ChevronDown from "lucide-static/icons/chevron-down.svg"
+
+setTheme({ icons: { chevronDown: ChevronDown } })
+```

package/docs/tooltip.md

@@ -0,0 +1,11 @@
+# Tooltip
+
+A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, and hides on leave and on press. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
+
+```jsx
+import { Tooltip, Button } from "@solidrt/components"
+
+<Tooltip content="Save (Ctrl+S)">
+  <Button onPress={save}>Save</Button>
+</Tooltip>
+```

package/docs/types.md

@@ -0,0 +1,9 @@
+# Layout and style
+
+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/docs/typography.md

@@ -0,0 +1,5 @@
+# Typography helpers
+
+`typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
+
+The compensation exists because the renderer rasterizes glyphs unhinted and composites in nonlinear sRGB, which thins light-on-dark text on low-DPI displays as glyphs shrink. `typeWeight(weight, size, onDark?)` adds `policy.textWeightDelta` (0 on high-DPI displays) plus one extra step below 16px; dark-on-light text passes through untouched. `lightOnDark(text, fill)` computes the polarity for a known pair of colors (Button uses it for its fills); omitted, the theme's own palette polarity is used.

package/docs/view.md

@@ -0,0 +1,14 @@
+# View
+
+A general-purpose box. Spreads `layout` onto the underlying view, applies the transform from `style`, and draws a background and/or border when those style props are set. Takes all pointer event props.
+
+```jsx
+import { View } from "@solidrt/components"
+
+<View
+  layout={{ padding: 16, flexDirection: "column", gap: 8 }}
+  style={{ backgroundColor: "#222", borderRadius: 8 }}
+>
+  {/* ... */}
+</View>
+```

package/docs/window.md

@@ -0,0 +1,15 @@
+# Window
+
+The root surface of an app: renders a core `<window>`, so `render()` accepts it. Applies `layout` and `style.backgroundColor` only (a window cannot be transformed or bordered), plus `title` and `fullscreen`.
+
+```jsx
+import { Window } from "@solidrt/components"
+
+function App() {
+  return (
+    <Window title="My App" style={{ backgroundColor: "#111" }}>
+      {/* ... */}
+    </Window>
+  )
+}
+```

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "license": "MIT",
+  "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./theme": "./src/theme.ts"
   },
   "files": [
     "src/",
+    "docs/",
     "examples/",
+    "demos/",
     "AGENTS.md"
   ],
   "dependencies": {
     "qrcode-generator": "^2.0.4"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.0",
-    "@solidrt/core": "0.0.50"
+    "@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.
@@ -35,34 +34,44 @@ export function Badge(props: BadgeProps) {
         return { bg: c.primary, fg: c.onPrimary }
     }
   }
-  let bg = () => props.style?.backgroundColor ?? colors().bg
-  let fg = () => props.style?.color ?? colors().fg
-  let radius = () => props.style?.borderRadius ?? RADIUS
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.badge, ...props.style })
+  let bg = () => styled().backgroundColor ?? colors().bg
+  let fg = () => styled().color ?? colors().fg
+  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={props.style?.x}
-      y={props.style?.y}
-      scale={props.style?.scale}
-      rotate={props.style?.rotate}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      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

@@ -4,13 +4,15 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 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
@@ -22,7 +24,10 @@ export interface ButtonProps {
   // stretches to the container's width (the default). Padding is the same at
   // every size.
   size?: ButtonSize
-  onPress?: () => void
+  // A returned promise makes this an async action: the button shows a
+  // centered spinner in place of the label (geometry unchanged) and ignores
+  // presses until it settles. Non-thenable returns are ignored.
+  onPress?: () => unknown
   disabled?: boolean
   // Focus-navigation candidacy (spatial nav, TV remotes); on by default.
   // Disabled buttons are never candidates.
@@ -37,44 +42,44 @@ export interface ButtonProps {
 const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
 
 // A themed press target: a padded, centered, accent-colored box with a label.
-// Press feedback is a slight scale, hover feedback a tint (non-touch
-// interaction policies only), both reactive reads of the press state so no
-// nodes are recreated. Override the box via style and the padding/sizing via
-// layout. A caller-set backgroundColor disables the hover tint: we cannot know
-// its hover variant. 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).
+// Press feedback is a slight scale, hover feedback the theme's overlayHover
+// tint drawn over the fill (non-touch interaction policies only), both
+// reactive reads of the press state so no nodes are recreated. Override the
+// 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 in the theme's ring color; Enter/Space/remote-select
+// activates (handled by createPress).
 export function Button(props: ButtonProps) {
-  // Fill, hover fill, and label color per variant, read reactively from the
-  // theme. No variant draws a border.
+  // Fill and label color per variant, read reactively from the theme. No
+  // variant draws a border.
   let colors = () => {
     let c = theme.color
     switch (props.variant ?? "primary") {
       case "secondary":
-        return { fill: c.secondary, hover: c.secondaryHover, label: c.onSecondary }
+        return { fill: c.secondary, label: c.onSecondary }
       case "ghost":
-        return { fill: "transparent", hover: c.surfaceHover, label: c.text }
+        return { fill: "transparent", label: c.text }
       case "danger":
-        return { fill: c.danger, hover: c.dangerHover, label: c.onPrimary }
+        return { fill: c.danger, label: c.onPrimary }
       default:
-        return { fill: c.primary, hover: c.primaryHover, label: c.onPrimary }
+        return { fill: c.primary, label: c.onPrimary }
     }
   }
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = (): StyleProps => ({ ...theme.components.button, ...props.style })
   let idleFill = () =>
     props.disabled
       ? props.variant === "ghost"
         ? "transparent"
         : theme.color.surface
       : colors().fill
-  let bg = (s: PressState) =>
-    props.style?.backgroundColor ??
-    (props.disabled
-      ? idleFill()
-      : s.hovered && policy.interaction !== "touch"
-        ? colors().hover
-        : colors().fill)
-  let radius = () => props.style?.borderRadius ?? theme.radius.md
+  let bg = () => styled().backgroundColor ?? idleFill()
+  // The hover feedback: the theme's overlay tint drawn over the fill, so it
+  // composes with any backgroundColor (variant, theme override, or caller).
+  let overlay = (s: PressState) =>
+    s.hovered && !props.disabled && policy.interaction !== "touch" ? theme.color.overlayHover : "transparent"
+  let radius = () => styled().borderRadius ?? theme.radius.md
   let label = () => (props.disabled ? theme.color.textMuted : colors().label)
   // Resolved once via children(): reading the raw children getter builds a new
   // subtree per read, so the typeof probe and the two mount sites below must
@@ -84,23 +89,27 @@ export function Button(props: ButtonProps) {
   // The label's polarity against the idle fill: onPrimary on a saturated fill
   // is light-on-dark even in a light theme, so it needs the low-DPI weight
   // compensation there too.
-  let labelOnDark = () => lightOnDark(label(), props.style?.backgroundColor ?? idleFill())
+  let labelOnDark = () => lightOnDark(label(), bg())
 
   // props (not a literal) so a swapped-in onPress is read at event time.
   let press = createPress(props)
   let style = () => ({
-    ...props.style,
-    ...(press.focused() && policy.focusRing ? { borderWidth: 2, borderColor: theme.color.text } : {}),
-    backgroundColor: bg(press.state()),
+    ...styled(),
+    ...(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
     // hits the transform decoder, which rejects null. Multiply so a
     // caller-set scale is preserved under the press feedback.
-    scale: (props.style?.scale ?? 1) * (press.pressed() && policy.motion !== "none" ? 0.97 : 1),
+    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)
@@ -109,6 +118,7 @@ export function Button(props: ButtonProps) {
       flexDirection="row"
       alignItems="center"
       justifyContent="center"
+      position="relative"
       paddingTop={space("md")}
       paddingBottom={space("md")}
       paddingLeft={space("lg")}
@@ -124,15 +134,23 @@ 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={label()} {...typeStyle("body", labelOnDark())}>
+        <text color={press.pending() ? "transparent" : label()} {...typeStyle("body", labelOnDark())}>
           {resolved()}
         </text>
       </Show>
+      <Show when={press.pending()}>
+        <view position="absolute" top={0} bottom={0} left={0} right={0} alignItems="center" justifyContent="center">
+          <Spinner size={16} thickness={2} style={{ color: label() }} />
+        </view>
+      </Show>
       <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
@@ -19,25 +20,31 @@ export interface CardProps {
 // style.borderWidth or style.borderColor to draw an outline. Override any paint
 // via style, spacing/sizing via layout.
 export function Card(props: CardProps) {
-  let bg = () => props.style?.backgroundColor ?? theme.color.surface
-  let radius = () => props.style?.borderRadius ?? theme.radius.lg
-  let hasBorder = () => props.style?.borderWidth != null || props.style?.borderColor != null
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.card, ...props.style })
+  let bg = () => styled().backgroundColor ?? theme.color.surface
+  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"
       gap={space("lg")}
       padding={space("xl")}
       {...props.layout}
-      x={props.style?.x}
-      y={props.style?.y}
-      scale={props.style?.scale}
-      rotate={props.style?.rotate}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      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}
@@ -47,8 +54,10 @@ export function Card(props: CardProps) {
       <Show when={hasBorder()}>
         <d-rect
           drawStyle="stroke"
-          color={props.style?.borderColor ?? theme.color.border}
-          strokeWidth={props.style?.borderWidth ?? theme.borderWidth.sm}
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+          color={styled().borderColor ?? theme.color.border}
+          strokeWidth={styled().borderWidth ?? theme.borderWidth.sm}
           radius={radius()}
         />
       </Show>

package/src/checkbox.tsx

@@ -2,10 +2,13 @@ import { createSignal, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
-import type { StyleProps } from "./types"
+import { policy } from "./policy"
+import { densityScale } from "./density"
+import { Icon } from "./icon"
+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
@@ -43,15 +46,20 @@ export function Checkbox(props: CheckboxProps) {
     borderColor: theme.color.border,
     borderWidth: theme.borderWidth.sm,
     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()}
       height={size()}
+      position="relative"
       {...props.layout}
       x={style().x}
       y={style().y}
@@ -59,18 +67,28 @@ 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} />
       <Show when={checked()}>
-        <d-path
-          d={check()}
-          drawStyle="stroke"
-          color={theme.color.onPrimary}
-          strokeWidth={2}
-          strokeCap="round"
-          strokeJoin="round"
-        />
+        <Show
+          when={theme.icons.check}
+          fallback={
+            <d-path
+              d={check()}
+              drawStyle="stroke"
+              color={theme.color.onPrimary}
+              strokeWidth={2}
+              strokeCap="round"
+              strokeJoin="round"
+            />
+          }
+        >
+          <view position="absolute" top={0} bottom={0} left={0} right={0} alignItems="center" justifyContent="center">
+            <Icon src={theme.icons.check!} size={Math.round(size() * 0.75)} color={theme.color.onPrimary} />
+          </view>
+        </Show>
       </Show>
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect

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
@@ -91,9 +92,11 @@ export function ContextMenu(props: ContextMenuProps) {
       >
         <d-rect
           color={
-            press.pressed() || (press.hovered() && policy.interaction !== "touch")
-              ? theme.color.surfaceHover
-              : "transparent"
+            press.pressed()
+              ? theme.color.overlayPressed
+              : press.hovered() && policy.interaction !== "touch"
+                ? theme.color.overlayHover
+                : "transparent"
           }
         />
         <text {...bodyText(p.item.disabled ? theme.color.textMuted : theme.color.text)}>{p.item.label}</text>
@@ -111,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 })
@@ -128,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}
@@ -175,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}