@solidrt/components 0.0.55 → 0.0.56

package/src/select.tsx

@@ -6,8 +6,9 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { Option, StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { Icon } from "./icon"
+import { colorFade, popupFade, popupFadeOut, PressFeedback, travelMotion } from "./motion"
 
 export interface SelectProps extends TransitionProps {
   options: Option[]
@@ -66,16 +67,11 @@ export function Select(props: SelectProps) {
         {...press.handlers}
         focusable
       >
-        <d-rect
-          color={
-            press.pressed()
-              ? theme.color.overlayPressed
-              : (press.hovered() && policy.interaction !== "touch") || (press.focused() && policy.focusRing)
-                ? theme.color.overlayHover
-                : "transparent"
-          }
+        <PressFeedback
+          pressed={press.pressed()}
+          hovered={(press.hovered() && policy.interaction !== "touch") || (press.focused() && policy.focusRing)}
         />
-        <text {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
+        <text transition={colorFade()} {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
       </view>
     )
   }
@@ -98,8 +94,19 @@ export function Select(props: SelectProps) {
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
+    // The fade is driven by the position write, not a mount-time `from`: the
+    // menu parks offscreen until measured, so a `from` would play unseen.
+    // The exit fade lives on this root (the node the close unmounts).
     return createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+      <view
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        opacity={pos() ? 1 : 0}
+        transition={popupFadeOut()}
+      >
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)} />
         <view
           ref={(n: { id: number }) => (menu = n)}
@@ -113,12 +120,13 @@ export function Select(props: SelectProps) {
           paddingTop={theme.spacing.sm}
           paddingBottom={theme.spacing.sm}
         >
-          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.options}>
             {(o: Option) => <OptionRow option={o} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"
+            transition={colorFade()}
             color={theme.color.border}
             strokeWidth={theme.borderWidth.sm}
             radius={theme.radius.sm}
@@ -132,9 +140,9 @@ export function Select(props: SelectProps) {
   // trick) so pressing an option never has the scrim on its hit path.
   let Sheet = () =>
     createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0}>
+      <view position="absolute" top={0} left={0} right={0} bottom={0} opacity={1} transition={popupFade()}>
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
-          <d-rect color={theme.color.scrim} />
+          <d-rect transition={colorFade()} color={theme.color.scrim} />
         </view>
         <view
           position="absolute"
@@ -145,7 +153,7 @@ export function Select(props: SelectProps) {
           paddingTop={theme.spacing.md}
           paddingBottom={theme.spacing.md + env.safeArea.bottom}
         >
-          <d-rect color={theme.color.surface} radius={theme.radius.sm} />
+          <d-rect transition={colorFade()} color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.options}>
             {(o: Option) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
           </For>
@@ -167,12 +175,12 @@ export function Select(props: SelectProps) {
     ...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 = () =>
-    press.hovered() && !props.disabled && policy.interaction !== "touch"
-      ? theme.color.overlayHover
-      : "transparent"
-
+  // The chevron flips while the picker is open; travel motion, so it snaps
+  // under reduced motion (the flip itself stays).
+  let chevronSpin = () => {
+    let t = travelMotion()
+    return t && { rotate: t }
+  }
 
   let split = () => splitTransition(props.transition)
 
@@ -203,31 +211,38 @@ export function Select(props: SelectProps) {
       focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
-      <d-rect color={overlay()} radius={style().borderRadius} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <PressFeedback
+        pressed={press.pressed() && !props.disabled}
+        hovered={press.hovered() && !props.disabled && policy.interaction !== "touch"}
+        radius={style().borderRadius}
+      />
       <Show
         when={selected()}
-        fallback={<text {...bodyText(theme.color.textMuted)}>{props.placeholder ?? ""}</text>}
+        fallback={<text transition={colorFade()} {...bodyText(theme.color.textMuted)}>{props.placeholder ?? ""}</text>}
       >
-        <text {...bodyText(props.disabled ? theme.color.textMuted : theme.color.text)}>{selected()!.label}</text>
-      </Show>
-      <Show
-        when={theme.icons.chevronDown}
-        fallback={
-          <view width={12} height={8}>
-            <d-path
-              d="M 2 2 L 6 6 L 10 2"
-              drawStyle="stroke"
-              color={theme.color.textMuted}
-              strokeWidth={2}
-              strokeCap="round"
-              strokeJoin="round"
-            />
-          </view>
-        }
-      >
-        <Icon src={theme.icons.chevronDown!} size={12} color={theme.color.textMuted} />
+        <text transition={colorFade()} {...bodyText(props.disabled ? theme.color.textMuted : theme.color.text)}>{selected()!.label}</text>
       </Show>
+      <view rotate={open() ? Math.PI : 0} transition={chevronSpin()}>
+        <Show
+          when={theme.icons.chevronDown}
+          fallback={
+            <view width={12} height={8}>
+              <d-path
+                d="M 2 2 L 6 6 L 10 2"
+                drawStyle="stroke"
+                transition={colorFade()}
+                color={theme.color.textMuted}
+                strokeWidth={2}
+                strokeCap="round"
+                strokeJoin="round"
+              />
+            </view>
+          }
+        >
+          <Icon src={theme.icons.chevronDown!} size={12} color={theme.color.textMuted} />
+        </Show>
+      </view>
       <Show when={open()}>
         <Show when={policy.interaction === "touch"} fallback={<Dropdown />}>
           <Sheet />
@@ -236,7 +251,7 @@ export function Select(props: SelectProps) {
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
-          transition={split().border}
+          transition={withTransitionDefaults(split().border, colorFade())}
           onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style().borderColor ?? "transparent"}
           strokeWidth={style().borderWidth}

package/src/slider.tsx

@@ -5,6 +5,7 @@ import { policy } from "./policy"
 import { densityScale } from "./density"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { colorFade } from "./motion"
 
 export interface SliderProps extends TransitionProps {
   // Controlled value. If omitted, the slider is uncontrolled.
@@ -137,11 +138,14 @@ export function Slider(props: SliderProps) {
       onPointerUp={handleUp}
       onKeyDown={handleKeyDown}
     >
+      {/* Colors fade with the theme; the fill's w and the thumb's x never
+          get a transition - they track the drag 1:1, and a spring would
+          rubber-band it. */}
       <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} />
+        <d-rect transition={colorFade()} color={theme.color.surfaceAlt} radius={GROOVE / 2} />
+        <d-rect transition={colorFade()} 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} />
+          <d-oval transition={colorFade()} 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>

package/src/spinner.tsx

@@ -4,6 +4,7 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { colorFade } from "./motion"
 
 export interface SpinnerProps extends TransitionProps {
   // Overall diameter in pixels.
@@ -70,6 +71,7 @@ export function Spinner(props: SpinnerProps) {
       <d-path
         d={path()}
         drawStyle="stroke"
+        transition={colorFade()}
         color={color()}
         strokeWidth={thickness()}
         strokeCap="round"

package/src/switch.tsx

@@ -4,10 +4,11 @@ import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { densityScale } from "./density"
-import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import type { StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
+import { partTransition, partTransitionEnd, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, pressScale, scaleFeedback, travelMotion } from "./motion"
 
-export interface SwitchProps extends TransitionProps {
+export interface SwitchProps extends TransitionProps<TransitionViewProp | TransitionStyleProp | "knob"> {
   // Controlled on/off. If omitted, the switch is uncontrolled.
   value?: boolean
   // Initial value for uncontrolled use.
@@ -24,9 +25,11 @@ const W = 44
 const H = 24
 const PAD = 2
 
-// A toggle. Track fills with primary when on, surfaceAlt when off; the thumb
-// slides across. Controlled via value/onChange, or uncontrolled via
-// defaultValue. When disabled, it takes no pointer events at all.
+// A toggle. Track fills with primary when on, surfaceAlt when off (a fade);
+// the thumb springs across - the `knob` transition entry retimes it. A press
+// shrinks the control slightly (pressScale). Controlled via value/onChange,
+// or uncontrolled via defaultValue. When disabled, it takes no pointer
+// events at all.
 export function Switch(props: SwitchProps) {
   let [internal, setInternal] = createSignal(props.defaultValue ?? false)
   let on = () => (props.value !== undefined ? props.value : internal())
@@ -50,9 +53,11 @@ export function Switch(props: SwitchProps) {
     ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
   })
 
+  let split = () => splitTransition(props.transition, ["knob"])
+
   return (
     <view
-      transition={splitTransition(props.transition).root}
+      transition={withTransitionDefaults(split().root, scaleFeedback())}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
@@ -61,20 +66,34 @@ export function Switch(props: SwitchProps) {
       {...props.layout}
       x={style().x}
       y={style().y}
-      scale={style().scale}
+      scale={(style().scale ?? 1) * pressScale(press.pressed())}
       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} />
-      <view position="absolute" top={PAD} left={PAD} x={on() ? w() - thumb() - PAD * 2 : 0}>
-        <d-oval w={thumb()} h={thumb()} color={theme.color.onPrimary} />
+      <d-rect
+        transition={withTransitionDefaults(split().background, colorFade())}
+        onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        color={style().backgroundColor ?? "transparent"}
+        radius={style().borderRadius}
+      />
+      <view
+        position="absolute"
+        top={PAD}
+        left={PAD}
+        x={on() ? w() - thumb() - PAD * 2 : 0}
+        transition={partTransition(props.transition, "knob", "x", travelMotion())}
+        onTransitionEnd={partTransitionEnd("knob", "x", props.onTransitionEnd)}
+      >
+        <d-oval transition={colorFade()} w={thumb()} h={thumb()} color={theme.color.onPrimary} />
       </view>
       <Show when={(style().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
+          transition={withTransitionDefaults(split().border, colorFade())}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style().borderColor ?? "transparent"}
           strokeWidth={style().borderWidth}
           radius={style().borderRadius}

package/src/text.tsx

@@ -1,10 +1,11 @@
 import { createMemo } from "@solidrt/core"
 import type { PointerProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps, TransitionProps, TransitionViewProp } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { theme, type TextVariant } from "./theme"
 import { policy } from "./policy"
 import { typeWeight } from "./typography"
+import { colorFade } from "./motion"
 
 // Semantic text colors, resolved through the theme. Curated: only tokens that
 // make sense as a text fill; style.color takes raw values for anything else.
@@ -95,7 +96,7 @@ export function Text(props: TextProps) {
       pointerEvents={props.pointerEvents}
     >
       <text
-        transition={split().text}
+        transition={withTransitionDefaults(split().text, colorFade())}
         onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
         color={color()}
         fontFamily={props.layout?.fontFamily ?? theme.text.fontFamily}

package/src/theme.ts

@@ -76,6 +76,10 @@ export type Theme = {
     // borderWidth.focus by every focusable control. Defaults to text so it
     // stays visible on primary-filled controls.
     ring: string
+    // The text-selection highlight, drawn by the editable fields behind the
+    // selected glyphs; translucent so the text stays readable. Defaults to
+    // overlayPressed (a neutral scheme-aware tint that needs no color math).
+    selection: string
   }
   // Gaps and paddings, multiples of one base unit (sm 1x, md 2x, lg 4x,
   // xl 5x); read through space() where density should apply.
@@ -85,6 +89,13 @@ export type Theme = {
   // Tooltip), lg one step over (Card), full is the pill.
   radius: { sm: number; md: number; lg: number; full: number }
   borderWidth: { sm: number; focus: number }
+  // Motion durations (ms). Every built-in transition the components declare
+  // draws its timing here, so one theme edit retimes the whole package:
+  // fast is press/hover feedback, base the color/opacity fades (state
+  // changes, the theme cross-fade, popup enter/exit), slow the travel of a
+  // control's moving parts (switch knob, segmented indicator, progress
+  // fill). See motion.tsx; policy.motion gates them.
+  motion: { fast: number; base: number; slow: 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, ...);
@@ -110,7 +121,10 @@ export type Theme = {
 export type ThemeColor = string | [light: string, dark: string]
 
 export type ThemeDefinition = {
-  color: { [K in Exclude<keyof Theme["color"], "ring">]: ThemeColor } & { ring?: ThemeColor }
+  color: { [K in Exclude<keyof Theme["color"], "ring" | "selection">]: ThemeColor } & {
+    ring?: ThemeColor
+    selection?: ThemeColor
+  }
   text?: {
     fontFamily?: string
     monoFamily?: string
@@ -130,6 +144,7 @@ export type ThemeDefinition = {
   // deriveRadius) or explicit steps. Default 8.
   radius?: number | Partial<Theme["radius"]>
   borderWidth?: Partial<Theme["borderWidth"]>
+  motion?: Partial<Theme["motion"]>
   size?: Partial<Theme["size"]>
   icons?: Theme["icons"]
   components?: Theme["components"]
@@ -149,6 +164,10 @@ 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 }
+// The motion timing scale (ms): fast enough that feedback reads as
+// immediate, base tuned so a state fade registers without dragging, slow
+// long enough that a part's travel reads as movement rather than a flicker.
+const MOTION = { fast: 100, base: 150, slow: 250 }
 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
@@ -184,6 +203,7 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
     } else color[k] = value
   }
   if (def.color.ring == null) color.ring = color.text
+  if (def.color.selection == null) color.selection = color.overlayPressed
   let base = def.text?.base ?? 14
   let ratio = def.text?.ratio ?? 1.26
   let role = (name: TextVariant): TextStyle => {
@@ -213,6 +233,7 @@ export function defineTheme(def: ThemeDefinition, scheme?: "light" | "dark"): Th
     radius:
       typeof def.radius === "number" ? deriveRadius(def.radius) : { ...deriveRadius(RADIUS_BASE), ...def.radius },
     borderWidth: { ...BORDER_WIDTH, ...def.borderWidth },
+    motion: { ...MOTION, ...def.motion },
     size: { ...SIZE, ...def.size },
     icons: def.icons ?? {},
     components: def.components ?? {},
@@ -253,6 +274,9 @@ const DEFAULT: ThemeDefinition = {
     // Feedback darkens on a light scheme and lightens on a dark one.
     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)"],
+    // Primary (#547ebf) at a translucent strength: pale enough to read
+    // through on light, a touch stronger against the dark ground.
+    selection: ["rgba(84,126,191,0.30)", "rgba(84,126,191,0.40)"],
   },
   // 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

package/src/tooltip.tsx

@@ -5,7 +5,8 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, popupFadeOut } from "./motion"
 
 export interface TooltipProps extends TransitionProps {
   // The tooltip body. A string/number renders as themed text; anything else
@@ -73,6 +74,9 @@ export function Tooltip(props: TooltipProps) {
     // share one build - reading the raw getter again would orphan native nodes.
     let content = children(() => props.content)
     let isText = () => typeof content() === "string" || typeof content() === "number"
+    // The fade is driven by the position write, not a mount-time `from`: the
+    // bubble parks offscreen until measured, so a `from` would play unseen;
+    // the exit fade plays when the bubble unmounts.
     return createPortal(
       <view
         ref={(n: { id: number }) => (bubble = n)}
@@ -87,21 +91,23 @@ export function Tooltip(props: TooltipProps) {
         paddingLeft={space("md")}
         paddingRight={space("md")}
         pointerEvents="none"
+        opacity={pos() ? 1 : 0}
+        transition={popupFadeOut()}
       >
         <d-rect
-          transition={split().background}
+          transition={withTransitionDefaults(split().background, colorFade())}
           onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={theme.components.tooltip?.backgroundColor ?? theme.color.surfaceAlt}
           radius={theme.components.tooltip?.borderRadius ?? theme.radius.sm}
         />
         <Show when={isText()} fallback={content()}>
-          <text color={theme.color.text} {...typeStyle("body")}>
+          <text transition={colorFade()} color={theme.color.text} {...typeStyle("body")}>
             {content()}
           </text>
         </Show>
         <d-rect
           drawStyle="stroke"
-          transition={split().border}
+          transition={withTransitionDefaults(split().border, colorFade())}
           onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={theme.components.tooltip?.borderColor ?? theme.color.border}
           strokeWidth={theme.components.tooltip?.borderWidth ?? theme.borderWidth.sm}

package/src/types.ts

@@ -21,9 +21,12 @@ import type {
 // component they would land on the root view, which has no paint, and be
 // silently ignored.
 //
-// Controls whose paint is their own (Switch knob, Slider thumb, Checkbox
-// mark, ...) take the view-level entries only for now; see
-// okf/backlog/component-transitions-internal-paint.md.
+// Controls with a moving part of their own name it as an extra entry
+// (Switch `knob`, SegmentedControl `indicator`, ProgressBar `fill`), routed
+// by partTransition to the node owning it - with a built-in default from
+// motion.tsx when the caller names nothing. Slider is the deliberate
+// exception: its thumb and fill track the drag 1:1, and a transition would
+// rubber-band it.
 export type TransitionViewProp =
   | "opacity"
   | "x"
@@ -84,9 +87,14 @@ const STYLE_TO_BORDER: Record<string, TransitionPropName> = {
  * Map a component declaration onto the three nodes a styled component
  * draws. `all`, a shorthand string and `stagger` apply to every node; named
  * entries go to the node owning the property. An entry for a node that is
- * not mounted (no background set) simply never animates.
+ * not mounted (no background set) simply never animates. `parts` lists the
+ * component's named moving parts, routed separately via partTransition, so
+ * their entries never leak onto the root view.
  */
-export function splitTransition<P extends string>(t: ComponentTransition<P> | undefined): SplitTransition {
+export function splitTransition<P extends string>(
+  t: ComponentTransition<P> | undefined,
+  parts?: readonly string[],
+): SplitTransition {
   if (t == null || typeof t === "string") return { root: t, background: t, border: t }
   let root: Record<string, unknown> = {}
   let background: Record<string, unknown> = {}
@@ -99,7 +107,7 @@ export function splitTransition<P extends string>(t: ComponentTransition<P> | un
     } else if (key in STYLE_TO_BACKGROUND || key in STYLE_TO_BORDER) {
       if (key in STYLE_TO_BACKGROUND) background[STYLE_TO_BACKGROUND[key]!] = value
       if (key in STYLE_TO_BORDER) border[STYLE_TO_BORDER[key]!] = value
-    } else {
+    } else if (!parts?.includes(key)) {
       root[key] = value
     }
   }
@@ -107,6 +115,66 @@ export function splitTransition<P extends string>(t: ComponentTransition<P> | un
   return { root: pick(root), background: pick(background), border: pick(border) }
 }
 
+/**
+ * Fill a node's split declaration with the component's built-in transitions
+ * (motion.tsx) for the properties the caller left uncovered. A caller
+ * shorthand or `all` covers everything, so their intent wins wholesale;
+ * `transition={null}` suppresses the built-ins too; a named entry overrides
+ * the default for that property only.
+ */
+export function withTransitionDefaults(
+  t: CoreTransitionProps["transition"],
+  defaults: Record<string, Transition | undefined> | undefined,
+): CoreTransitionProps["transition"] {
+  if (t === null || typeof t === "string") return t
+  if (t?.all !== undefined) return t
+  let filled: Record<string, unknown> | undefined
+  for (let key in defaults) {
+    let spec = defaults[key]
+    if (spec === undefined || (t && key in t)) continue
+    ;(filled ??= {})[key] = spec
+  }
+  if (!filled) return t
+  return { ...filled, ...t } as CoreTransitionProps["transition"]
+}
+
+/**
+ * The core declaration for a control's named moving part - a node owning
+ * one animatable property (Switch `knob` -> the knob's `x`). The caller's
+ * entry for the part (or `all`, or a shorthand string) retimes it, an
+ * absent one falls back to the control's built-in spec, and
+ * `transition={null}` suppresses that too.
+ */
+export function partTransition<P extends string>(
+  t: ComponentTransition<P> | undefined,
+  part: string,
+  coreProp: TransitionPropName,
+  fallback: Transition | undefined,
+): CoreTransitionProps["transition"] {
+  let spec: Transition | undefined
+  if (t === null) spec = undefined
+  else if (typeof t === "string") spec = t
+  else if (t) spec = (t as Record<string, Transition | undefined>)[part] ?? t.all ?? fallback
+  else spec = fallback
+  return spec == null ? undefined : ({ [coreProp]: spec } as CoreTransitionProps["transition"])
+}
+
+/**
+ * Report a part's settled core property under the part's name. Filtered to
+ * the part's own property: the node may also run built-in fades (color),
+ * which have no name in the component vocabulary.
+ */
+export function partTransitionEnd<P extends string>(
+  part: P,
+  coreProp: TransitionPropName,
+  handler: ((event: { property: P }) => void) | undefined,
+): ((event: TransitionEndEvent) => void) | undefined {
+  if (!handler) return undefined
+  return (e) => {
+    if (e.property === coreProp) handler({ property: part })
+  }
+}
+
 /** Report a settled core property in the component vocabulary for the node it settled on. */
 export function transitionEndFor<P extends string>(
   node: "root" | "background" | "border",

package/src/view.tsx

@@ -1,6 +1,7 @@
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade } from "./motion"
 
 export interface ViewProps extends PointerProps, TransitionProps {
   children?: any
@@ -50,7 +51,7 @@ export function View(props: ViewProps) {
     >
       {hasBackground() ? (
         <d-rect
-          transition={split().background}
+          transition={withTransitionDefaults(split().background, colorFade())}
           onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
@@ -60,7 +61,7 @@ export function View(props: ViewProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
-          transition={split().border}
+          transition={withTransitionDefaults(split().border, colorFade())}
           onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}

package/src/window.tsx

@@ -1,5 +1,6 @@
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
+import { colorFade } from "./motion"
 
 export interface WindowProps extends PointerProps {
   children?: any
@@ -31,7 +32,7 @@ export function Window(props: WindowProps) {
       pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
-        <d-rect color={props.style.backgroundColor} />
+        <d-rect transition={colorFade()} color={props.style.backgroundColor} />
       ) : null}
       {props.children}
     </window>