@solidrt/components 0.0.51 → 0.0.53

package/src/radio.tsx

@@ -2,9 +2,11 @@ import { createSignal, createContext, useContext, Show, children } from "@solidr
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
+import { policy } from "./policy"
 import { densityScale } from "./density"
 import { typeStyle } from "./typography"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 // Shared selection state for a group. Created and consumed within this module, so
 // RadioGroup/Radio are a self-contained pair, not a cross-component dependency.
@@ -51,7 +53,7 @@ export function RadioGroup(props: RadioGroupProps) {
   )
 }
 
-export interface RadioProps {
+export interface RadioProps extends TransitionProps {
   // This option's value; selecting it makes it the group's value.
   value: unknown
   disabled?: boolean
@@ -71,7 +73,6 @@ export function Radio(props: RadioProps) {
   let ctx = useContext(RadioContext)
   let selected = () => ctx.value() === props.value
   let disabled = () => props.disabled || ctx.disabled()
-  let ringColor = () => (selected() ? theme.color.primary : theme.color.border)
   // 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)
@@ -84,9 +85,15 @@ export function Radio(props: RadioProps) {
   // Theme-level per-component overrides merged under the instance style.
   let styled = () => ({ ...theme.components.radio, ...props.style })
   let press = createPress({ onPress: () => ctx.select(props.value) })
+  // The circle doubles as the focus ring: ring color at the focus width.
+  let focusRing = () => press.focused() && policy.focusRing
+  let ringColor = () => (focusRing() ? theme.color.ring : selected() ? theme.color.primary : theme.color.border)
+  let ringWidth = () => (focusRing() ? theme.borderWidth.focus : 2)
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
       flexDirection="row"
@@ -99,13 +106,14 @@ export function Radio(props: RadioProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
       {...press.handlers}
+      focusable={!disabled()}
       pointerEvents={disabled() ? "none" : undefined}
     >
       <Show when={styled().backgroundColor != null || styled().borderRadius != null}>
         <d-rect color={styled().backgroundColor ?? "transparent"} radius={styled().borderRadius} />
       </Show>
       <view width={ring()} height={ring()}>
-        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={2} />
+        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={ringWidth()} />
         <Show when={selected()}>
           <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} color={theme.color.primary} />
         </Show>

package/src/rich-text-editor.tsx

@@ -3,11 +3,11 @@ import type { LayoutProps, TextInputHints } from "@solidrt/core"
 import type { TextRunRange } from "flux:rendertree"
 import { EditorField } from "./editor-field"
 import { createDocumentBuffer, type Attributes, type Document, type DocumentBuffer } from "./rich-text-document"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
 import { theme } from "./theme"
 import { policy } from "./policy"
 
-export interface RichTextEditorProps {
+export interface RichTextEditorProps extends TransitionProps {
   value?: Document
   defaultValue?: Document
   onInput?: (value: Document) => void
@@ -48,7 +48,7 @@ function fontOf(inline: Attributes, block: Attributes, base: number): Font {
   else if (heading === 3) font.fontSize = base
   if (heading === 1 || heading === 2 || heading === 3 || inline.bold) font.fontWeight = 700
   if (inline.italic) font.fontStyle = "italic"
-  if (inline.code) font.fontFamily = "mono"
+  if (inline.code) font.fontFamily = theme.text.monoFamily
   return font
 }
 
@@ -111,6 +111,8 @@ export function RichTextEditor(props: RichTextEditorProps) {
 
   return (
     <EditorField
+      transition={props.transition}
+      onTransitionEnd={props.onTransitionEnd}
       buffer={(step) => {
         editor = createDocumentBuffer({
           value: () => props.value,

package/src/scroll-view.tsx

@@ -1,14 +1,22 @@
-import { createPan, createScroll } from "@solidrt/core"
-import type { LayoutProps, PointerProps, WheelEvent } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import { createPan, createScroll, createSignal, onSettled, untrack } from "@solidrt/core"
+import type { LayoutProps, PointerProps, Scroll, WheelEvent } from "@solidrt/core"
+import type { StyleProps, TransitionProps, TransitionScrollProp, TransitionStyleProp, TransitionViewProp } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ScrollViewProps extends PointerProps {
+export interface ScrollViewProps
+  extends PointerProps,
+    TransitionProps<TransitionViewProp | TransitionStyleProp | TransitionScrollProp> {
   children?: any
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
   /** Scroll the horizontal axis instead of the vertical one. */
   horizontal?: boolean
+  /** Receives the scroll handle (offset, range, scrollTo) for driving the view
+   * from app code; scroll policies such as following a growing log are written
+   * against it. Called once the component has settled, outside any reactive
+   * scope, so a signal setter can be passed directly. */
+  scrollRef?: (scroll: Scroll) => void
 }
 
 // A scrollable region. The outer box carries layout/style/transform and the
@@ -21,31 +29,81 @@ export interface ScrollViewProps extends PointerProps {
 // stealing the pointer from a pressable the drag started on (its press
 // feedback retracts), and keeps scrolling when the pointer leaves the box.
 // There is no momentum yet; a fling stops when the finger lifts.
+//
+// Motion: the offset is written as a target and the runtime springs to it,
+// so a wheel tick glides instead of jumping and a burst of ticks retargets
+// one continuous motion. While a finger drags, the spring is withdrawn from
+// the viewport declaration so the content tracks the finger exactly; the
+// first drag write cancels any spring still in flight. A `scrollX`/`scrollY`
+// entry in the `transition` prop replaces the default.
+const SCROLL_SPRING = { duration: 250 }
+
 export function ScrollView(props: ScrollViewProps) {
   let viewport: { id: number } | undefined
   let content: { id: number } | undefined
+  let [dragging, setDragging] = createSignal(false)
 
   let scroll = createScroll(
     () => viewport,
     () => content,
     { axis: props.horizontal ? "horizontal" : "vertical" },
   )
+  // Handed out from onSettled rather than the body: the body is an owned
+  // scope, where a signal write (an app passing its setter) is refused.
+  onSettled(() => {
+    untrack(() => props.scrollRef)?.(scroll)
+  })
 
   // Content follows the finger: it moves opposite to scroll offsets, which
   // grow toward the bottom/right.
   let pan = createPan({
     axis: props.horizontal ? "horizontal" : "vertical",
-    onPanMove: (dx, dy) => scroll.scrollBy(-dx, -dy),
+    onPanStart: () => setDragging(true),
+    onPanMove: (dx, dy) => scroll.scrollBy({ x: -dx, y: -dy }),
+    onPanEnd: () => setDragging(false),
   })
 
   let onWheel = (e: WheelEvent) => {
     // A plain mouse wheel only emits deltaY. On a horizontal scroller, route that
     // vertical delta to the x axis so the wheel still scrolls it (trackpads that
     // emit deltaX take precedence).
-    if (props.horizontal) scroll.scrollBy(e.deltaX || e.deltaY, 0)
-    else scroll.scrollBy(e.deltaX, e.deltaY)
+    if (props.horizontal) scroll.scrollBy({ x: e.deltaX || e.deltaY })
+    else scroll.scrollBy({ x: e.deltaX, y: e.deltaY })
   }
 
+  // The viewport owns the scroll offset, the outer box everything else: a
+  // scrollX/scrollY entry is lifted out of the root declaration so that a
+  // shared `all` does not animate opacity twice (outer times viewport).
+  let split = () => {
+    let t = splitTransition(props.transition)
+    if (t.root == null || typeof t.root === "string") return { ...t, viewport: t.root }
+    let { scrollX, scrollY, ...rest } = t.root as Record<string, unknown>
+    let viewport: Record<string, unknown> = {}
+    if (scrollX !== undefined) viewport.scrollX = scrollX
+    if (scrollY !== undefined) viewport.scrollY = scrollY
+    if (rest.all !== undefined) viewport.all = rest.all
+    return {
+      ...t,
+      root: Object.keys(rest).length ? (rest as typeof t.root) : undefined,
+      viewport: Object.keys(viewport).length ? (viewport as typeof t.root) : undefined,
+    }
+  }
+  // The viewport's declaration: the user's scroll entries over the default
+  // spring. During a drag, and while the latest programmatic write asked for
+  // no motion (scrollTo behavior "instant"), the scroll entries go, and a
+  // user `all` narrows to the one other property the viewport writes
+  // (clipRadius) so it cannot put a spring back under the finger or the
+  // instant write.
+  let viewportTransition = () => {
+    let user = split().viewport
+    let entries: Record<string, unknown> = typeof user === "string" ? { all: user } : { ...(user ?? {}) }
+    if (dragging() || scroll.behavior() === "instant") {
+      let { scrollX, scrollY, all, ...rest } = entries
+      if (all !== undefined) rest.clipRadius = all
+      return Object.keys(rest).length ? rest : null
+    }
+    return { scrollX: SCROLL_SPRING, scrollY: SCROLL_SPRING, ...entries }
+  }
   let direction = () => (props.horizontal ? "row" : "column")
   let hasBackground = () =>
     props.style?.backgroundColor != null || props.style?.borderRadius != null
@@ -53,6 +111,8 @@ export function ScrollView(props: ScrollViewProps) {
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       {...props.layout}
       x={props.style?.x}
@@ -70,16 +130,23 @@ export function ScrollView(props: ScrollViewProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
         />
       ) : null}
+      {/* transition before scrollX/scrollY: props apply in source order, and
+          an instant write needs the withdrawn declaration to land before the
+          value in the same flush, or the value starts a spring anyway. */}
       <view
         ref={(n: { id: number }) => (viewport = n)}
         flex={1}
         overflow="hidden"
         clipRadius={props.style?.borderRadius}
         flexDirection={direction()}
+        transition={viewportTransition()}
+        onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
         scrollX={scroll.offset().x}
         scrollY={scroll.offset().y}
         {...pan.handlers}
@@ -92,6 +159,8 @@ export function ScrollView(props: ScrollViewProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}

package/src/segmented-control.tsx

@@ -1,13 +1,14 @@
-import { createSignal, For } from "@solidrt/core"
+import { createSignal, For, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle, lightOnDark } from "./typography"
-import type { Option, StyleProps } from "./types"
+import type { Option, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SegmentedControlProps {
+export interface SegmentedControlProps extends TransitionProps {
   options: Option[]
   // Controlled selected value. If omitted, the control is uncontrolled.
   value?: unknown
@@ -59,8 +60,12 @@ export function SegmentedControl(props: SegmentedControlProps) {
   let label = (active: boolean) =>
     props.disabled ? theme.color.textMuted : active ? theme.color.onPrimary : theme.color.text
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       flexDirection="row"
       gap={DIVIDER}
       {...props.layout}
@@ -70,7 +75,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect color={theme.color.border} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={theme.color.border} radius={radius()} />
       <For each={props.options}>
         {(opt, i) => {
           let active = () => value() === opt.value
@@ -81,7 +86,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
             press.hovered() && !props.disabled && policy.interaction !== "touch"
               ? theme.color.overlayHover
               : "transparent"
-          return (
+  return (
             <view
               ref={press.ref}
               repaintBoundary
@@ -93,10 +98,14 @@ export function SegmentedControl(props: SegmentedControlProps) {
               paddingLeft={space("md")}
               paddingRight={space("md")}
               {...press.handlers}
+              focusable={!props.disabled}
               pointerEvents={props.disabled ? "none" : undefined}
             >
               <d-rect color={fill()} radius={corners(i())} />
               <d-rect color={overlay()} radius={corners(i())} />
+              <Show when={press.focused() && policy.focusRing}>
+                <d-rect drawStyle="stroke" color={theme.color.ring} strokeWidth={theme.borderWidth.focus} radius={corners(i())} />
+              </Show>
               <text
                 color={label(active())}
                 {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}

package/src/select.tsx

@@ -5,10 +5,11 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
-import type { Option, StyleProps } from "./types"
+import type { Option, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { Icon } from "./icon"
 
-export interface SelectProps {
+export interface SelectProps extends TransitionProps {
   options: Option[]
   // Controlled selected value. If omitted, the select is uncontrolled.
   value?: unknown
@@ -21,9 +22,10 @@ export interface SelectProps {
   style?: StyleProps
 }
 
-const GAP = 4
+// Distance between the trigger and the dropdown.
+let gap = () => theme.spacing.sm
 // Minimum distance kept between the dropdown and the window edges.
-const MARGIN = 4
+let margin = () => theme.spacing.sm
 
 /**
  * A single-choice picker whose presentation forks on the interaction policy:
@@ -62,12 +64,13 @@ export function Select(props: SelectProps) {
         paddingLeft={space("md")}
         paddingRight={space("md")}
         {...press.handlers}
+        focusable
       >
         <d-rect
           color={
             press.pressed()
               ? theme.color.overlayPressed
-              : press.hovered() && policy.interaction !== "touch"
+              : (press.hovered() && policy.interaction !== "touch") || (press.focused() && policy.focusRing)
                 ? theme.color.overlayHover
                 : "transparent"
           }
@@ -89,9 +92,9 @@ export function Select(props: SelectProps) {
       let b = menu && getBoundingBox(menu)
       if (!a || !b) return
       if (a.width !== minWidth()) setMinWidth(a.width)
-      let x = Math.round(Math.min(Math.max(a.x, MARGIN), env.windowSize.width - b.width - MARGIN))
-      let below = a.y + a.height + GAP
-      let y = Math.round(below + b.height > env.windowSize.height - MARGIN ? a.y - b.height - GAP : below)
+      let x = Math.round(Math.min(Math.max(a.x, margin()), env.windowSize.width - b.width - margin()))
+      let below = a.y + a.height + gap()
+      let y = Math.round(below + b.height > env.windowSize.height - margin() ? a.y - b.height - gap() : below)
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
@@ -158,10 +161,11 @@ export function Select(props: SelectProps) {
   let style = () => ({
     borderColor: theme.color.border,
     borderWidth: theme.borderWidth.sm,
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.radius.md,
     backgroundColor: theme.color.surface,
     ...theme.components.select,
     ...props.style,
+    ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
   })
   // Hover feedback: the theme overlay tint drawn over the trigger fill.
   let overlay = () =>
@@ -170,8 +174,12 @@ export function Select(props: SelectProps) {
       : "transparent"
 
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         trigger = n
@@ -181,8 +189,8 @@ export function Select(props: SelectProps) {
       alignItems="center"
       justifyContent="space-between"
       gap={theme.spacing.md}
-      paddingTop={space("sm")}
-      paddingBottom={space("sm")}
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
       paddingLeft={space("md")}
       paddingRight={space("md")}
       {...props.layout}
@@ -192,9 +200,10 @@ export function Select(props: SelectProps) {
       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} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
       <d-rect color={overlay()} radius={style().borderRadius} />
       <Show
         when={selected()}
@@ -227,6 +236,8 @@ export function Select(props: SelectProps) {
       <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/slider.tsx

@@ -1,10 +1,12 @@
-import { arena, createSignal, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
-import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { arena, createMemo, createSignal, focusedNode, getBoundingBox, onLayout, onSettled, Show } from "@solidrt/core"
+import type { KeyEvent, LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
+import { policy } from "./policy"
 import { densityScale } from "./density"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SliderProps {
+export interface SliderProps extends TransitionProps {
   // Controlled value. If omitted, the slider is uncontrolled.
   value?: number
   defaultValue?: number
@@ -27,6 +29,8 @@ let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi :
 // A horizontal slider. The groove fills up to the thumb; dragging or pressing
 // the track sets the value from the pointer x. Moves arrive on the frozen down
 // path, so a drag keeps updating when the pointer drifts off the track.
+// Focused (spatial nav), arrow keys step the value (by `step`, else 1% of the
+// range) and the thumb draws the focus ring under the focusRing policy.
 // Controlled via value/onChange, or uncontrolled via defaultValue.
 export function Slider(props: SliderProps) {
   let min = () => props.min ?? 0
@@ -95,14 +99,31 @@ export function Slider(props: SliderProps) {
     if (active === e.pointerId) endDrag()
   }
 
+  // focusedNode() is read first, unconditionally, so the memo depends on it
+  // even when the ref has not set `track` yet (see createPress).
+  let focused = createMemo(() => {
+    let id = focusedNode()
+    return id != null && id === track?.id
+  })
+  let handleKeyDown = (e: KeyEvent) => {
+    if (props.disabled) return
+    let dir = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : 0
+    if (dir === 0) return
+    e.stopPropagation()
+    let inc = props.step ?? (max() - min()) / 100
+    commit(clamp(value() + dir * inc, min(), max()))
+  }
+
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => (track = n)}
       repaintBoundary
       flexDirection="row"
       alignItems="center"
       height={height()}
-      width={200}
+      width={theme.size.slider}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
@@ -110,15 +131,20 @@ export function Slider(props: SliderProps) {
       rotate={props.style?.rotate}
       opacity={props.style?.opacity}
       pointerEvents={props.disabled ? "none" : "auto"}
+      focusable={!props.disabled}
       onPointerDown={handleDown}
       onPointerMove={handleMove}
       onPointerUp={handleUp}
+      onKeyDown={handleKeyDown}
     >
       <view ref={(n: { id: number }) => (groove = n)} position="relative" flex={1} height={GROOVE}>
         <d-rect color={theme.color.surfaceAlt} radius={GROOVE / 2} />
         <d-rect color={theme.color.primary} w={fillPx()} h={GROOVE} radius={GROOVE / 2} />
         <view position="absolute" left={0} top={(GROOVE - thumb()) / 2} x={fillPx() - thumb() / 2}>
           <d-oval w={thumb()} h={thumb()} color={theme.color.primary} />
+          <Show when={focused() && policy.focusRing}>
+            <d-oval drawStyle="stroke" w={thumb()} h={thumb()} color={theme.color.ring} strokeWidth={theme.borderWidth.focus} />
+          </Show>
         </view>
       </view>
     </view>

package/src/spinner.tsx

@@ -2,9 +2,10 @@ import { createSignal, onFrame, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SpinnerProps {
+export interface SpinnerProps extends TransitionProps {
   // Overall diameter in pixels.
   size?: number
   // Arc stroke width in pixels.
@@ -53,6 +54,8 @@ export function Spinner(props: SpinnerProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       width={size()}
       height={size()}
       {...props.layout}

package/src/split-view.tsx

@@ -1,6 +1,7 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { policy } from "./policy"
+import { theme } from "./theme"
 
 export interface SplitViewProps {
   // The list (or primary) pane.
@@ -10,13 +11,11 @@ export interface SplitViewProps {
   // Single-pane mode only: show the detail instead of the list. The app owns
   // this navigation state; two-pane mode ignores it.
   showDetail?: boolean
-  // Width of the list pane in two-pane mode.
+  // Width of the list pane in two-pane mode; defaults to theme.size.splitViewList.
   listWidth?: number
   layout?: LayoutProps
 }
 
-const LIST_WIDTH = 320
-
 /**
  * A list-detail container driven by the layout policy: two-pane shows the list
  * beside the detail, single-pane shows one pane at a time per `showDetail`.
@@ -45,7 +44,7 @@ export function SplitView(props: SplitViewProps) {
       }
     >
       <view flexDirection="row" {...props.layout}>
-        <view width={props.listWidth ?? LIST_WIDTH} flexDirection="column">
+        <view width={props.listWidth ?? theme.size.splitViewList} flexDirection="column">
           {props.list}
         </view>
         <view flex={1} flexDirection="column">

package/src/switch.tsx

@@ -2,10 +2,12 @@ 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 type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SwitchProps {
+export interface SwitchProps extends TransitionProps {
   // Controlled on/off. If omitted, the switch is uncontrolled.
   value?: boolean
   // Initial value for uncontrolled use.
@@ -45,10 +47,13 @@ export function Switch(props: SwitchProps) {
     borderRadius: h() / 2,
     ...theme.components.switch,
     ...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={w()}
@@ -60,6 +65,7 @@ export function Switch(props: SwitchProps) {
       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/text-input.tsx

@@ -2,10 +2,10 @@ import { untrack } from "@solidrt/core"
 import { createTextBuffer } from "@solidrt/core/text-input"
 import type { LayoutProps, TextInputHints } from "@solidrt/core"
 import { EditorField } from "./editor-field"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
 import { theme } from "./theme"
 
-export interface TextInputProps {
+export interface TextInputProps extends TransitionProps {
   value?: string
   defaultValue?: string
   onInput?: (value: string) => void
@@ -46,6 +46,8 @@ export function TextInput(props: TextInputProps) {
   let value = (): string => ""
   return (
     <EditorField
+      transition={props.transition}
+      onTransitionEnd={props.onTransitionEnd}
       buffer={(step) => {
         let buffer = createTextBuffer({
           value: () => props.value,

package/src/text.tsx

@@ -1,6 +1,7 @@
 import { createMemo } from "@solidrt/core"
 import type { PointerProps } from "@solidrt/core"
-import type { StyleProps, TextLayoutProps } from "./types"
+import type { StyleProps, TextLayoutProps, TransitionProps, TransitionViewProp } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { theme, type TextVariant } from "./theme"
 import { policy } from "./policy"
 import { typeWeight } from "./typography"
@@ -9,7 +10,7 @@ import { typeWeight } from "./typography"
 // make sense as a text fill; style.color takes raw values for anything else.
 export type TextColor = "text" | "textMuted" | "primary" | "onPrimary" | "danger"
 
-export interface TextProps extends PointerProps {
+export interface TextProps extends PointerProps, TransitionProps<TransitionViewProp | "color"> {
   children?: any
   // Typography role from the theme's type scale; defaults to "body". Explicit
   // layout font props override the role's fields individually. fontSize
@@ -54,8 +55,25 @@ export function Text(props: TextProps) {
     return out
   })
 
+  // The text node owns `color`; everything else a Text animates is on the
+  // wrapper view. A shorthand or `all` reaches both.
+  let split = () => {
+    let t = splitTransition(props.transition)
+    if (t.root == null || typeof t.root === "string") return { root: t.root, text: t.root }
+    let { color, ...rest } = t.root as Record<string, unknown>
+    let text: Record<string, unknown> = {}
+    if (color !== undefined) text.color = color
+    if (rest.all !== undefined) text.all = rest.all
+    return {
+      root: Object.keys(rest).length ? (rest as typeof t.root) : undefined,
+      text: Object.keys(text).length ? (text as typeof t.root) : undefined,
+    }
+  }
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       {...box()}
       x={props.style?.x}
@@ -77,6 +95,8 @@ export function Text(props: TextProps) {
       pointerEvents={props.pointerEvents}
     >
       <text
+        transition={split().text}
+        onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
         color={color()}
         fontFamily={props.layout?.fontFamily ?? theme.text.fontFamily}
         fontSize={size()}