@solidrt/components 0.0.54 → 0.0.56

package/src/motion.tsx

@@ -0,0 +1,122 @@
+import { withAlpha } from "@solidrt/core"
+import type { Transition } from "@solidrt/core"
+import { theme } from "./theme"
+import { policy } from "./policy"
+
+// The components' built-in motion. Every default transition in the package
+// is declared through these helpers, so timing comes from theme.motion and
+// the whole set degrades together under policy.motion: "reduced" keeps the
+// fades (color and opacity carry state; a fade is not movement) but snaps
+// everything that travels or scales, "none" snaps it all. Each helper
+// returns undefined while its motion is off. A caller's `transition` prop
+// overrides a default per property (see withTransitionDefaults in types.ts)
+// and `transition={null}` suppresses the defaults outright.
+
+// Scale a pressed control shrinks to; the release springs back.
+const PRESS_SCALE = 0.97
+// Overshoot of the travel springs (switch knob, segmented indicator): a
+// touch of bounce reads as physical without wobble.
+const TRAVEL_BOUNCE = 0.15
+// Fraction of its size a state mark (checkmark, radio dot) grows in from.
+const MARK_FROM_SCALE = 0.4
+
+/** State-change fade for colors and opacity - also the theme cross-fade. */
+export function fadeMotion(): Transition | undefined {
+  if (policy.motion === "none") return undefined
+  return { duration: theme.motion.base, curve: "ease-out" } satisfies Transition
+}
+
+/** Press/hover feedback fade (the overlay tints): faster than fadeMotion so a press reads as immediate. */
+export function feedbackFade(): Transition | undefined {
+  if (policy.motion === "none") return undefined
+  return { duration: theme.motion.fast, curve: "ease-out" } satisfies Transition
+}
+
+/** Travel spring for a control's moving part. Movement, so "reduced" snaps it too. */
+export function travelMotion(bounce: number = TRAVEL_BOUNCE): Transition | undefined {
+  if (policy.motion !== "normal") return undefined
+  return { duration: theme.motion.slow, bounce } satisfies Transition
+}
+
+/** Default `{ color: fade }` declaration for a themed paint node. */
+export function colorFade(): { color: Transition } | undefined {
+  let fade = fadeMotion()
+  return fade === undefined ? undefined : { color: fade }
+}
+
+/** Default `{ scale: spring }` declaration for a control that shrinks on press. */
+export function scaleFeedback(): { scale: Transition } | undefined {
+  if (policy.motion !== "normal") return undefined
+  return { scale: { duration: theme.motion.fast } satisfies Transition }
+}
+
+/** The scale a pressed control renders at: PRESS_SCALE under full motion, 1 otherwise (a scale snap is worse than none; the overlay tint still marks the press). */
+export function pressScale(pressed: boolean): number {
+  return pressed && policy.motion === "normal" ? PRESS_SCALE : 1
+}
+
+/**
+ * Enter/exit fade for an overlay surface mounted in place (modal, bottom
+ * sheet): fades in at mount, fades out on removal. The node must set
+ * `opacity` explicitly - only carried properties animate.
+ */
+export function popupFade(): { opacity: Transition } | undefined {
+  if (policy.motion === "none") return undefined
+  return { opacity: { duration: theme.motion.base, curve: "ease-out", from: 0, exit: 0 } satisfies Transition }
+}
+
+/**
+ * Exit-only fade for popups that park offscreen until measured (tooltip,
+ * menus): they fade in by writing opacity 0 -> 1 once positioned - a
+ * mount-time `from` would play unseen - and fade out on removal.
+ */
+export function popupFadeOut(): { opacity: Transition } | undefined {
+  if (policy.motion === "none") return undefined
+  return { opacity: { duration: theme.motion.base, curve: "ease-out", exit: 0 } satisfies Transition }
+}
+
+/**
+ * Enter/exit pop for a control's state mark (checkbox check, radio dot),
+ * declared on a wrapper view that sets `opacity={1} scale={1}`: it fades
+ * in/out, with a small scale pop under full motion only.
+ */
+export function markMotion(): { opacity: Transition; scale?: Transition } | undefined {
+  if (policy.motion === "none") return undefined
+  let declaration: { opacity: Transition; scale?: Transition } = {
+    opacity: { duration: theme.motion.base, curve: "ease-out", from: 0, exit: 0 } satisfies Transition,
+  }
+  if (policy.motion === "normal")
+    declaration.scale = {
+      duration: theme.motion.slow,
+      bounce: TRAVEL_BOUNCE,
+      from: MARK_FROM_SCALE,
+      exit: MARK_FROM_SCALE,
+    } satisfies Transition
+  return declaration
+}
+
+/**
+ * The hover/pressed tint every pressable control draws over its own fill.
+ * One always-mounted rect whose hidden state is the same tint at alpha 0,
+ * not "transparent": a fade from transparent black would darken a dark
+ * scheme's white tint midway. Pressed swaps in the deeper tint; showing,
+ * hiding and the pressed/hover swap all fade at feedback speed.
+ */
+export function PressFeedback(props: {
+  pressed?: boolean
+  hovered?: boolean
+  radius?: number | [number, number, number, number]
+}) {
+  let tint = () => (props.pressed ? theme.color.overlayPressed : theme.color.overlayHover)
+  let fade = () => {
+    let f = feedbackFade()
+    return f === undefined ? undefined : { color: f }
+  }
+  return (
+    <d-rect
+      transition={fade()}
+      color={props.pressed || props.hovered ? tint() : withAlpha(tint(), 0)}
+      radius={props.radius}
+    />
+  )
+}

package/src/nav-shell.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Switch, Match, For } from "@solidrt/core"
+import { createSignal, Switch, Match, For, withAlpha } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
@@ -7,6 +7,7 @@ import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { colorFade, PressFeedback } from "./motion"
 
 export interface NavItem {
   value: unknown
@@ -44,12 +45,11 @@ export function NavShell(props: NavShellProps) {
   }
 
   let labelColor = (item: NavItem) => (item.value === value() ? theme.color.primary : theme.color.textMuted)
-  let itemBg = (item: NavItem, hovered: boolean) =>
-    item.value === value()
-      ? theme.color.surfaceAlt
-      : hovered && policy.interaction !== "touch"
-        ? theme.color.overlayHover
-        : "transparent"
+  // The selection fill: the surfaceAlt tint at alpha 0 while unselected, so
+  // selecting fades it in (same trap as PressFeedback: a fade from
+  // "transparent" would pass through the wrong hue).
+  let itemBg = (item: NavItem) =>
+    item.value === value() ? theme.color.surfaceAlt : withAlpha(theme.color.surfaceAlt, 0)
 
   // Icon over a small label, centered; shared by the tab bar and the rail.
   let StackedItem = (p: { item: NavItem; padY: number; layout?: LayoutProps }) => {
@@ -67,9 +67,14 @@ export function NavShell(props: NavShellProps) {
         {...p.layout}
         {...press.handlers}
       >
-        <d-rect color={itemBg(p.item, press.hovered())} radius={theme.radius.sm} />
+        <d-rect transition={colorFade()} color={itemBg(p.item)} radius={theme.radius.sm} />
+        <PressFeedback
+          pressed={press.pressed()}
+          hovered={press.hovered() && policy.interaction !== "touch" && p.item.value !== value()}
+          radius={theme.radius.sm}
+        />
         {p.item.icon}
-        <text color={labelColor(p.item)} {...typeStyle("caption")}>
+        <text transition={colorFade()} color={labelColor(p.item)} {...typeStyle("caption")}>
           {p.item.label}
         </text>
       </view>
@@ -79,7 +84,7 @@ export function NavShell(props: NavShellProps) {
   let Tabs = () => (
     <view flexDirection="column" flexShrink={0}>
       <view flexDirection="row">
-        <d-rect color={theme.color.surface} />
+        <d-rect transition={colorFade()} color={theme.color.surface} />
         <For each={props.items}>
           {(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} layout={{ flex: 1 }} />}
         </For>
@@ -90,7 +95,7 @@ export function NavShell(props: NavShellProps) {
   let Rail = () => (
     <view flexDirection="row" flexShrink={0}>
       <view flexDirection="column" width={theme.size.navRail} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
-        <d-rect color={theme.color.surface} />
+        <d-rect transition={colorFade()} color={theme.color.surface} />
         <For each={props.items}>{(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} />}</For>
       </view>
     </view>
@@ -99,7 +104,7 @@ export function NavShell(props: NavShellProps) {
   let Sidebar = () => (
     <view flexDirection="row" flexShrink={0}>
       <view flexDirection="column" width={theme.size.navSidebar} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
-        <d-rect color={theme.color.surface} />
+        <d-rect transition={colorFade()} color={theme.color.surface} />
         <For each={props.items}>
           {(item: NavItem) => {
             let press = createPress({ onPress: () => select(item.value) })
@@ -118,9 +123,15 @@ export function NavShell(props: NavShellProps) {
                 marginRight={theme.spacing.sm}
                 {...press.handlers}
               >
-                <d-rect color={itemBg(item, press.hovered())} radius={theme.radius.sm} />
+                <d-rect transition={colorFade()} color={itemBg(item)} radius={theme.radius.sm} />
+                <PressFeedback
+                  pressed={press.pressed()}
+                  hovered={press.hovered() && policy.interaction !== "touch" && item.value !== value()}
+                  radius={theme.radius.sm}
+                />
                 {item.icon}
                 <text
+                  transition={colorFade()}
                   color={item.value === value() ? theme.color.primary : theme.color.text}
                   {...typeStyle("body")}
                 >

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