@solidrt/components 0.0.51 → 0.0.52

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()}

package/src/theme.ts

@@ -38,6 +38,8 @@ export type Theme = {
   text: {
     // Passed through to the core font stack: "sans" | "mono" | a family name.
     fontFamily: string
+    // The monospace family for code (RichTextEditor inline code).
+    monoFamily: string
     caption: TextStyle
     label: TextStyle
     body: TextStyle
@@ -69,10 +71,24 @@ export type Theme = {
     // caller-set style.backgroundColor. Non-touch interaction policies only.
     overlayHover: string
     overlayPressed: string
+    // The focus ring (spatial nav under the focusRing policy), drawn at
+    // borderWidth.focus by every focusable control. Defaults to text so it
+    // stays visible on primary-filled controls.
+    ring: string
   }
+  // Gaps and paddings, multiples of one base unit (sm 1x, md 2x, lg 4x,
+  // xl 5x); read through space() where density should apply.
   spacing: { sm: number; md: number; lg: number; xl: number }
-  radius: { sm: number; md: number; lg: number }
-  borderWidth: { sm: number }
+  // Corner radii. md is THE control radius (Button, TextInput, Select,
+  // SegmentedControl); sm is one step under it (Checkbox, Item, menus,
+  // Tooltip), lg one step over (Card), full is the pill.
+  radius: { sm: number; md: number; lg: number; full: number }
+  borderWidth: { sm: number; focus: number }
+  // Default extents of the components that have one: the panes and rails an
+  // app lays its screens around, and the smallest sensible popup/track. Each
+  // is a per-instance layout override away (listWidth, layout.width, ...);
+  // the theme sets the app-wide default.
+  size: { navRail: number; navSidebar: number; splitViewList: number; menuMinWidth: number; slider: number }
   // Semantic control glyphs, as SVG document strings (the Icon currency).
   // Components draw their built-in vector paths by default; a theme that sets
   // a slot swaps that glyph everywhere it appears. The package still bundles
@@ -93,9 +109,10 @@ export type Theme = {
 export type ThemeColor = string | [light: string, dark: string]
 
 export type ThemeDefinition = {
-  color: { [K in keyof Theme["color"]]: ThemeColor }
+  color: { [K in Exclude<keyof Theme["color"], "ring">]: ThemeColor } & { ring?: ThemeColor }
   text?: {
     fontFamily?: string
+    monoFamily?: string
     // The body font size; the other roles derive from it. Default 14.
     base?: number
     // The step between adjacent roles (caption, label, body, title, heading
@@ -105,23 +122,43 @@ export type ThemeDefinition = {
     // and weights.
     roles?: { [K in TextVariant]?: Partial<TextStyle> }
   }
-  spacing?: Partial<Theme["spacing"]>
-  radius?: Partial<Theme["radius"]>
+  // One base unit (the steps derive from it, see deriveSpacing) or explicit
+  // steps. Default 4.
+  spacing?: number | Partial<Theme["spacing"]>
+  // One base (the control radius; the steps derive from it, see
+  // deriveRadius) or explicit steps. Default 8.
+  radius?: number | Partial<Theme["radius"]>
   borderWidth?: Partial<Theme["borderWidth"]>
+  size?: Partial<Theme["size"]>
   icons?: Theme["icons"]
   components?: Theme["components"]
 }
 
-const SPACING = { sm: 4, md: 8, lg: 16, xl: 20 }
-const RADIUS = { sm: 4, md: 8, lg: 12 }
-const BORDER_WIDTH = { sm: 1 }
+const SPACING_BASE = 4
 
-// Line height and weight per role; body is the base text, caption and label
-// sit under it (secondary and emphasized small text), title and heading
-// above it (card and page headings).
+// The spacing scale from its base unit.
+function deriveSpacing(base: number): Theme["spacing"] {
+  return { sm: base, md: base * 2, lg: base * 4, xl: base * 5 }
+}
+const RADIUS_BASE = 8
+const RADIUS_FULL = 9999
+
+// The radius scale from its base: sm half, lg one and a half, full the pill.
+function deriveRadius(base: number): Theme["radius"] {
+  return { sm: Math.round(base / 2), md: base, lg: Math.round(base * 1.5), full: RADIUS_FULL }
+}
+const BORDER_WIDTH = { sm: 1, focus: 2 }
+const SIZE = { navRail: 72, navSidebar: 220, splitViewList: 320, menuMinWidth: 120, slider: 200 }
+
+// Line height and weight per role; body is the base text, label is body at
+// an emphasized weight (form labels, key/value keys, tags), caption the one
+// small role (badges, tab labels, timestamps), title and heading sit above
+// body (card and page headings). De-emphasis is a color (textMuted), not a
+// size: caption is small text to be glanced at, so keep it in the full text
+// color rather than stacking small and muted.
 const ROLE_DEFAULTS: { [K in TextVariant]: { step: number; lineHeight: number; weight: TextStyle["weight"] } } = {
-  caption: { step: -2, lineHeight: 1.3, weight: 400 },
-  label: { step: -1, lineHeight: 1.3, weight: 600 },
+  caption: { step: -1, lineHeight: 1.3, weight: 400 },
+  label: { step: 0, lineHeight: 1.5, weight: 600 },
   body: { step: 0, lineHeight: 1.5, weight: 400 },
   title: { step: 1, lineHeight: 1.4, weight: 700 },
   heading: { step: 2, lineHeight: 1.3, weight: 700 },
@@ -139,11 +176,13 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
   for (let key in def.color) {
     let k = key as keyof Theme["color"]
     let value = def.color[k]
+    if (value == null) continue
     if (Array.isArray(value)) {
       if (!scheme) throw new Error(`Theme color "${key}" is a [light, dark] pair; pass a scheme to defineTheme`)
       color[k] = value[scheme === "light" ? 0 : 1]
     } else color[k] = value
   }
+  if (def.color.ring == null) color.ring = color.text
   let base = def.text?.base ?? 14
   let ratio = def.text?.ratio ?? 1.26
   let role = (name: TextVariant): TextStyle => {
@@ -158,6 +197,7 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
   return {
     text: {
       fontFamily: def.text?.fontFamily ?? "sans",
+      monoFamily: def.text?.monoFamily ?? "mono",
       caption: role("caption"),
       label: role("label"),
       body: role("body"),
@@ -165,9 +205,14 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
       heading: role("heading"),
     },
     color,
-    spacing: { ...SPACING, ...def.spacing },
-    radius: { ...RADIUS, ...def.radius },
+    spacing:
+      typeof def.spacing === "number"
+        ? deriveSpacing(def.spacing)
+        : { ...deriveSpacing(SPACING_BASE), ...def.spacing },
+    radius:
+      typeof def.radius === "number" ? deriveRadius(def.radius) : { ...deriveRadius(RADIUS_BASE), ...def.radius },
     borderWidth: { ...BORDER_WIDTH, ...def.borderWidth },
+    size: { ...SIZE, ...def.size },
     icons: def.icons ?? {},
     components: def.components ?? {},
   }
@@ -180,7 +225,10 @@ const DEFAULT: ThemeDefinition = {
     background: ["#ffffff", "#0b0f17"],
     surface: ["#f6f8fa", "#161b22"],
     surfaceAlt: ["#eaeef2", "#21262d"],
-    text: ["#1f2328", "#e6edf3"],
+    // Dark body text sits well under white (about 10:1 on the background,
+    // tuned by eye on a low-DPI display): full brightness glares on a dark
+    // ground, and the low-DPI weight compensation thickens it further.
+    text: ["#1f2328", "#b1bac4"],
     // Muted is an opaque tone between text and background, mixed in oklab
     // (like Material 3's tonal colors, not an alpha overlay): alpha text
     // renders thin on low-DPI and its contrast depends on what sits behind
@@ -188,7 +236,10 @@ const DEFAULT: ThemeDefinition = {
     // preset is data that must not need the render engine at import time
     // (the website token build imports this module headless). If text or
     // background changes, recompute: mixColors(text, background, 0.4).
-    textMuted: ["#707376", "#848b92"],
+    // The dark tone sits a step above the 4.5:1 AA floor (about 5.4:1)
+    // instead of at the mix: the body text already sits low, and the
+    // strict mix falls under it.
+    textMuted: ["#707376", "#828993"],
     border: ["rgba(0,0,0,0.15)", "rgba(255,255,255,0.14)"],
     // Accent tuned to the puzzle mark's mid blue.
     primary: "#547ebf",
@@ -202,9 +253,10 @@ const DEFAULT: ThemeDefinition = {
     overlayHover: ["rgba(0,0,0,0.08)", "rgba(255,255,255,0.08)"],
     overlayPressed: ["rgba(0,0,0,0.14)", "rgba(255,255,255,0.14)"],
   },
-  // base 14 and ratio 1.26 derive title 18 and heading 22; the two small
-  // roles sit tighter than the ratio, so they are pinned.
-  text: { roles: { caption: { size: 11 }, label: { size: 12 } } },
+  // base 14 and ratio 1.26 derive title 18 and heading 22; caption sits
+  // one step under body but the ratio lands on 11, too small to read on a
+  // low-DPI display or at TV distance, so it is pinned.
+  text: { roles: { caption: { size: 12 } } },
 }
 
 export let darkTheme: Theme = defineTheme(DEFAULT, "dark")

package/src/tooltip.tsx

@@ -4,8 +4,10 @@ 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 TooltipProps {
+export interface TooltipProps extends TransitionProps {
   // The tooltip body. A string/number renders as themed text; anything else
   // renders as-is.
   content?: any
@@ -19,9 +21,10 @@ export interface TooltipProps {
 }
 
 const DELAY = 500
-const GAP = 6
+// Distance between the anchor and the bubble.
+let gap = () => theme.spacing.sm
 // Minimum distance kept between the bubble and the window edges.
-const MARGIN = 4
+let margin = () => theme.spacing.sm
 
 /**
  * A hover-only affordance: under desktop/hybrid interaction policies, resting a
@@ -61,8 +64,8 @@ export function Tooltip(props: TooltipProps) {
       let b = bubble && getBoundingBox(bubble)
       if (!a || !b) return
       let x = a.x + a.width / 2 - b.width / 2
-      x = Math.round(Math.min(Math.max(x, MARGIN), env.windowSize.width - b.width - MARGIN))
-      let y = Math.round(props.placement === "bottom" ? a.y + a.height + GAP : a.y - b.height - GAP)
+      x = Math.round(Math.min(Math.max(x, margin()), env.windowSize.width - b.width - margin()))
+      let y = Math.round(props.placement === "bottom" ? a.y + a.height + gap() : a.y - b.height - gap())
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
@@ -86,6 +89,8 @@ export function Tooltip(props: TooltipProps) {
         pointerEvents="none"
       >
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={theme.components.tooltip?.backgroundColor ?? theme.color.surfaceAlt}
           radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
         />
@@ -96,6 +101,8 @@ export function Tooltip(props: TooltipProps) {
         </Show>
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={theme.components.tooltip?.borderColor ?? theme.color.border}
           strokeWidth={theme.components.tooltip?.borderWidth ?? theme.borderWidth.sm}
           radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
@@ -104,8 +111,12 @@ export function Tooltip(props: TooltipProps) {
     )
   }
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => (anchor = n)}
       onPointerEnter={enter}
       onPointerLeave={hide}