@solidrt/components 0.0.55 → 0.0.57

package/src/pressable.tsx

@@ -1,8 +1,9 @@
 import { children } from "@solidrt/core"
 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 { createPress, type PressState } from "./press"
+import { colorFade, scaleFeedback } from "./motion"
 
 export type { PressState } from "./press"
 
@@ -55,7 +56,9 @@ export function Pressable(props: PressableProps) {
 
   return (
     <view
-      transition={split().root}
+      // The scale default animates a style-function's press scale, so a
+      // custom control built on Pressable presses like Button by default.
+      transition={withTransitionDefaults(split().root, scaleFeedback())}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
@@ -84,7 +87,7 @@ export function Pressable(props: PressableProps) {
     >
       {hasBackground() ? (
         <d-rect
-          transition={split().background}
+          transition={withTransitionDefaults(split().background, colorFade())}
           onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={style()?.backgroundColor ?? "transparent"}
           radius={style()?.borderRadius}
@@ -94,7 +97,7 @@ export function Pressable(props: PressableProps) {
       {hasBorder() ? (
         <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/progress-bar.tsx

@@ -2,10 +2,11 @@ import { createSignal, onFrame, onLayout, getBoundingBox, Show } from "@solidrt/
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
-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, travelMotion } from "./motion"
 
-export interface ProgressBarProps extends TransitionProps {
+export interface ProgressBarProps extends TransitionProps<TransitionViewProp | TransitionStyleProp | "fill"> {
   // Progress from 0 to 1. Omit (or leave undefined) for an indeterminate bar: a
   // segment that slides back and forth.
   value?: number
@@ -71,13 +72,25 @@ export function ProgressBar(props: ProgressBarProps) {
   let effectivePhase = () => (policy.motion === "none" ? 0.5 : phase())
   let offset = () => effectivePhase() * trackWidth() * (1 - SEGMENT)
 
+  let split = () => splitTransition(props.transition, ["fill"])
+  // Determinate only: a value write glides the fill (the `fill` transition
+  // entry retimes it; bounce 0, progress must not overshoot). Indeterminate
+  // writes w/x per frame, which a transition would lag behind.
+  let fillTransition = () => {
+    if (props.transition === null) return null
+    let travel = indeterminate() ? undefined : partTransition(props.transition, "fill", "w", travelMotion(0))
+    let fade = colorFade()
+    if (!travel && !fade) return undefined
+    return { ...fade, ...(travel as object | undefined) }
+  }
+
   return (
-    <view ref={(n: { id: number }) => (trackNode = n)} position="relative" width="100%" height={h()} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
+    <view ref={(n: { id: number }) => (trackNode = n)} position="relative" width="100%" height={h()} transition={split().root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <Show when={animating()}>
         <Animate />
       </Show>
-      <d-rect color={track()} radius={radius()} />
-      <d-rect color={fill()} radius={radius()} w={fillWidth()} h={h()} x={indeterminate() ? offset() : 0} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={track()} radius={radius()} />
+      <d-rect transition={fillTransition()} onTransitionEnd={partTransitionEnd("fill", "w", props.onTransitionEnd)} color={fill()} radius={radius()} w={fillWidth()} h={h()} x={indeterminate() ? offset() : 0} />
     </view>
   )
 }

package/src/radio.tsx

@@ -6,7 +6,8 @@ import { policy } from "./policy"
 import { densityScale } from "./density"
 import { typeStyle } from "./typography"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, markMotion, pressScale, scaleFeedback } from "./motion"
 
 // 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.
@@ -67,6 +68,8 @@ export interface RadioProps extends TransitionProps {
 const RING = 20
 
 // A single option in a RadioGroup: a ring with an inner dot when selected.
+// The ring color fades, the dot pops in/out (markMotion), and a press
+// shrinks the ring - not the whole row, so a long label never wobbles.
 export function Radio(props: RadioProps) {
   // useContext throws ContextNotFoundError if a Radio is used outside a
   // RadioGroup (default-less context), so ctx is always present here.
@@ -90,9 +93,11 @@ export function Radio(props: RadioProps) {
   let ringColor = () => (focusRing() ? theme.color.ring : selected() ? theme.color.primary : theme.color.border)
   let ringWidth = () => (focusRing() ? theme.borderWidth.focus : 2)
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
-      transition={splitTransition(props.transition).root}
+      transition={split().root}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
@@ -110,22 +115,46 @@ export function Radio(props: RadioProps) {
       pointerEvents={disabled() ? "none" : undefined}
     >
       <Show when={styled().backgroundColor != null || styled().borderRadius != null}>
-        <d-rect color={styled().backgroundColor ?? "transparent"} radius={styled().borderRadius} />
+        <d-rect
+          transition={withTransitionDefaults(split().background, colorFade())}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+          color={styled().backgroundColor ?? "transparent"}
+          radius={styled().borderRadius}
+        />
       </Show>
-      <view width={ring()} height={ring()}>
-        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={ringWidth()} />
+      <view
+        width={ring()}
+        height={ring()}
+        position="relative"
+        scale={pressScale(press.pressed())}
+        transition={scaleFeedback()}
+      >
+        <d-oval drawStyle="stroke" transition={colorFade()} 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} />
+          <view
+            position="absolute"
+            top={0}
+            bottom={0}
+            left={0}
+            right={0}
+            opacity={1}
+            scale={1}
+            transition={markMotion()}
+          >
+            <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} transition={colorFade()} color={theme.color.primary} />
+          </view>
         </Show>
       </view>
       <Show when={isText()} fallback={resolved()}>
-        <text color={theme.color.text} {...typeStyle("body")}>
+        <text transition={colorFade()} color={theme.color.text} {...typeStyle("body")}>
           {resolved()}
         </text>
       </Show>
       <Show when={(styled().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
+          transition={withTransitionDefaults(split().border, colorFade())}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={styled().borderColor ?? "transparent"}
           strokeWidth={styled().borderWidth}
           radius={styled().borderRadius}

package/src/segmented-control.tsx

@@ -1,14 +1,16 @@
-import { createSignal, For, Show } from "@solidrt/core"
+import { createSignal, For, Show, getBoundingBox, onLayout, withAlpha } 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, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import type { Option, StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
+import { partTransition, partTransitionEnd, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, PressFeedback, travelMotion } from "./motion"
 
-export interface SegmentedControlProps extends TransitionProps {
+export interface SegmentedControlProps
+  extends TransitionProps<TransitionViewProp | TransitionStyleProp | "indicator"> {
   options: Option[]
   // Controlled selected value. If omitted, the control is uncontrolled.
   value?: unknown
@@ -26,10 +28,12 @@ const DIVIDER = 0
 
 // A single-choice row of equal-width segments, joined flush (the Material
 // style): only the control's outermost corners are rounded, interior segments
-// are square, and hairline dividers separate them. The active segment fills
-// with the primary color. Controlled via value/onChange, or uncontrolled via
-// defaultValue. Hover tints inactive segments (non-touch interaction policies
-// only). Override the inactive fill via style, spacing/sizing via layout.
+// are square, and hairline dividers separate them. The active segment is one
+// indicator rect drawn under the labels that springs between segments - the
+// `indicator` transition entry retimes it. Controlled via value/onChange, or
+// uncontrolled via defaultValue. Hover tints inactive segments (non-touch
+// interaction policies only). Override the inactive fill via style, the
+// spacing/sizing via layout.
 export function SegmentedControl(props: SegmentedControlProps) {
   let [internal, setInternal] = createSignal(props.defaultValue)
   let value = () => (props.value !== undefined ? props.value : internal())
@@ -60,12 +64,49 @@ 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)
+  // The indicator is positioned from measured segment boxes (control-relative
+  // x and width per segment), so a selection change retargets it without a
+  // reflow and unequal rounding never misaligns it. Remeasured each layout.
+  let root: { id: number } | undefined
+  let segs: ({ id: number } | undefined)[] = []
+  let [boxes, setBoxes] = createSignal<{ x: number; w: number }[]>([])
+  // The indicator's travel spring is armed only after the first placement:
+  // the declaration exists from mount, so without this the first measured
+  // write would slide the indicator in from x 0. A timer, not the same
+  // flush - the declaration must be committed strictly after that write.
+  let [placed, setPlaced] = createSignal(false)
+  onLayout(() => {
+    if (!root) return
+    let r = getBoundingBox(root)
+    if (!r) return
+    let next: { x: number; w: number }[] = []
+    for (let i = 0; i < props.options.length; i++) {
+      let s = segs[i]
+      let b = s && getBoundingBox(s)
+      if (!b) return
+      next.push({ x: b.x - r.x, w: b.width })
+    }
+    let cur = boxes()
+    if (cur.length !== next.length || cur.some((c, i) => c.x !== next[i]!.x || c.w !== next[i]!.w)) setBoxes(next)
+    if (!placed()) setTimeout(() => setPlaced(true), 0)
+  })
+  let activeIndex = () => props.options.findIndex((o) => o.value === value())
+  let indicator = () => boxes()[activeIndex()]
+
+  let split = () => splitTransition(props.transition, ["indicator"])
+  let indicatorTransition = () => {
+    if (props.transition === null) return null
+    let travel = placed() ? partTransition(props.transition, "indicator", "x", travelMotion()) : undefined
+    let fade = colorFade()
+    if (!travel && !fade) return undefined
+    return { ...fade, ...(travel as object | undefined) }
+  }
 
   return (
     <view
       transition={split().root}
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
+      ref={(n: { id: number }) => (root = n)}
       flexDirection="row"
       gap={DIVIDER}
       {...props.layout}
@@ -75,20 +116,25 @@ export function SegmentedControl(props: SegmentedControlProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={theme.color.border} radius={radius()} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={idleFill()} radius={radius()} />
+      <d-rect
+        transition={indicatorTransition()}
+        onTransitionEnd={partTransitionEnd("indicator", "x", props.onTransitionEnd)}
+        color={indicator() ? activeFill() : withAlpha(activeFill(), 0)}
+        x={indicator()?.x ?? 0}
+        w={indicator()?.w ?? 0}
+        radius={corners(activeIndex())}
+      />
       <For each={props.options}>
         {(opt, i) => {
           let active = () => value() === opt.value
           let press = createPress({ onPress: () => select(opt.value) })
-          let fill = () => (active() ? activeFill() : idleFill())
-          // Hover feedback: the theme overlay tint drawn over the segment fill.
-          let overlay = () =>
-            press.hovered() && !props.disabled && policy.interaction !== "touch"
-              ? theme.color.overlayHover
-              : "transparent"
-  return (
+          return (
             <view
-              ref={press.ref}
+              ref={(n: { id: number }) => {
+                segs[i()] = n
+                press.ref(n)
+              }}
               repaintBoundary
               flexGrow={1}
               flexBasis={0}
@@ -101,12 +147,16 @@ export function SegmentedControl(props: SegmentedControlProps) {
               focusable={!props.disabled}
               pointerEvents={props.disabled ? "none" : undefined}
             >
-              <d-rect color={fill()} radius={corners(i())} />
-              <d-rect color={overlay()} radius={corners(i())} />
+              <PressFeedback
+                pressed={press.pressed()}
+                hovered={press.hovered() && !props.disabled && policy.interaction !== "touch"}
+                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
+                transition={colorFade()}
                 color={label(active())}
                 {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}
               >

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}