@solidrt/components 0.0.51 → 0.0.53

package/src/checkbox.tsx

@@ -2,11 +2,13 @@ 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 { Icon } from "./icon"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface CheckboxProps {
+export interface CheckboxProps extends TransitionProps {
   // Controlled checked state. If omitted, the checkbox is uncontrolled.
   checked?: boolean
   defaultChecked?: boolean
@@ -46,10 +48,13 @@ export function Checkbox(props: CheckboxProps) {
     borderRadius: theme.radius.sm,
     ...theme.components.checkbox,
     ...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={size()}
@@ -62,6 +67,7 @@ export function Checkbox(props: CheckboxProps) {
       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/context-menu.tsx

@@ -5,6 +5,8 @@ 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 ContextMenuItem {
   label: string
@@ -12,7 +14,7 @@ export interface ContextMenuItem {
   disabled?: boolean
 }
 
-export interface ContextMenuProps {
+export interface ContextMenuProps extends TransitionProps {
   items: ContextMenuItem[]
   // The content the menu attaches to.
   children?: any
@@ -23,8 +25,7 @@ const LONG_PRESS_MS = 500
 // Finger travel (window px) that cancels a pending long-press.
 const MOVE_SLOP = 8
 // Minimum distance kept between the menu and the window edges.
-const MARGIN = 4
-const MIN_WIDTH = 120
+let margin = () => theme.spacing.sm
 
 /**
  * Secondary actions on the wrapped content. The opening gesture follows the
@@ -113,9 +114,9 @@ export function ContextMenu(props: ContextMenuProps) {
       let b = menu && getBoundingBox(menu)
       if (!b) return
       let p = point()
-      let x = Math.round(Math.min(Math.max(p.x, MARGIN), env.windowSize.width - b.width - MARGIN))
+      let x = Math.round(Math.min(Math.max(p.x, margin()), env.windowSize.width - b.width - margin()))
       let y = Math.round(
-        Math.max(p.y + b.height > env.windowSize.height - MARGIN ? p.y - b.height : p.y, MARGIN),
+        Math.max(p.y + b.height > env.windowSize.height - margin() ? p.y - b.height : p.y, margin()),
       )
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
@@ -130,7 +131,7 @@ export function ContextMenu(props: ContextMenuProps) {
           left={0}
           x={pos()?.x ?? -10000}
           y={pos()?.y ?? 0}
-          minWidth={MIN_WIDTH}
+          minWidth={theme.size.menuMinWidth}
           flexDirection="column"
           paddingTop={theme.spacing.sm}
           paddingBottom={theme.spacing.sm}
@@ -177,6 +178,8 @@ export function ContextMenu(props: ContextMenuProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       onPointerDown={handleDown}
       onPointerMove={handleMove}
       onPointerUp={cancelHold}

package/src/divider.tsx

@@ -1,8 +1,9 @@
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface DividerProps {
+export interface DividerProps extends TransitionProps {
   // Line direction. Horizontal (default) is a full-width rule; vertical is a
   // full-height rule for use inside a row.
   orientation?: "horizontal" | "vertical"
@@ -22,14 +23,18 @@ export function Divider(props: DividerProps) {
   let styled = () => ({ ...theme.components.divider, ...props.style })
   let color = () => styled().backgroundColor ?? theme.color.border
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       width={vertical() ? thickness() : "auto"}
       height={vertical() ? "auto" : thickness()}
       alignSelf="stretch"
       {...props.layout}
     >
-      <d-rect color={color()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={color()} />
     </view>
   )
 }

package/src/editor-field.tsx

@@ -22,7 +22,8 @@ import type { Color, Gradient, KeyEvent, LayoutProps, PointerEvent, TextInputHin
 import type { Element } from "solid-js"
 import type { MeasureTextOptions, TextRunRange } from "flux:rendertree"
 import { registerNavAction } from "./focus-nav"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -44,7 +45,7 @@ export type LineRender = {
   color: () => Color | Gradient
 }
 
-export interface EditorFieldProps {
+export interface EditorFieldProps extends TransitionProps {
   /**
    * Creates the buffer the field edits, given the grapheme `step` from the
    * field's geometry (createTextEditorLayout.step); called once.
@@ -234,14 +235,14 @@ export function EditorField(props: EditorFieldProps) {
   })
 
   // Style overrides fall back to theme defaults. The border doubles as the
-  // focus ring: primary while focused, when the focus-ring policy asks for a
-  // visible indicator.
+  // focus ring (ring color at the focus width) while focused, when the
+  // focus-ring policy asks for a visible indicator.
   let textColor = () => props.style?.color ?? theme.color.text
   let surfaceColor = () => props.style?.backgroundColor ?? theme.color.surface
-  let borderColor = () =>
-    props.style?.borderColor ?? (focused() && policy.focusRing ? theme.color.primary : theme.color.border)
-  let borderWidth = () => props.style?.borderWidth ?? theme.borderWidth.sm
-  let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
+  let ring = () => focused() && policy.focusRing
+  let borderColor = () => props.style?.borderColor ?? (ring() ? theme.color.ring : theme.color.border)
+  let borderWidth = () => props.style?.borderWidth ?? (ring() ? theme.borderWidth.focus : theme.borderWidth.sm)
+  let borderRadius = () => props.style?.borderRadius ?? theme.radius.md
 
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
   let showCaret = () => focused() && caretOn() && !showPlaceholder()
@@ -290,8 +291,12 @@ export function EditorField(props: EditorFieldProps) {
     return Math.max(rowHeight(), Math.min(content, max))
   }
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         node = n
         unregisterNav?.()
@@ -304,8 +309,8 @@ export function EditorField(props: EditorFieldProps) {
       alignItems="center"
       paddingLeft={space("md")}
       paddingRight={space("md")}
-      paddingTop={space("sm")}
-      paddingBottom={space("sm")}
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
       {...props.layout}
       x={props.style?.x}
       y={props.style?.y}
@@ -318,9 +323,11 @@ export function EditorField(props: EditorFieldProps) {
       onKeyDown={handleKeyDown}
       onTextInput={handleTextInput}
     >
-      <d-rect color={surfaceColor()} radius={borderRadius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={surfaceColor()} radius={borderRadius()} />
       <d-rect
         drawStyle="stroke"
+        transition={split().border}
+        onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
         color={borderColor()}
         strokeWidth={borderWidth()}
         radius={borderRadius()}

package/src/field.tsx

@@ -3,8 +3,10 @@ import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface FieldProps {
+export interface FieldProps extends TransitionProps {
   // Label above the control.
   label?: string
   // Help text under the control; replaced by `error` while one is set.
@@ -25,7 +27,7 @@ export interface FieldProps {
 // `description` if that matters.
 export function Field(props: FieldProps) {
   return (
-    <view flexDirection="column" gap={space("sm")} {...props.layout}>
+    <view flexDirection="column" gap={space("sm")} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <Show when={props.label != null}>
         <text color={theme.color.text} {...typeStyle("label")}>
           {props.label}

package/src/icon.tsx

@@ -1,8 +1,10 @@
 import { createMemo, parseSvg, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface IconProps {
+export interface IconProps extends TransitionProps {
   // An SVG document as a string: an imported `.svg` asset, a `lucide-static`
   // string export, or an inline template literal. Monochrome icons that stroke/
   // fill with `currentColor` (Lucide, Feather, Heroicons, ...) get recolored by
@@ -18,9 +20,9 @@ export interface IconProps {
 const SIZE = 24
 
 // A themed wrapper over parseSvg: the document parsed once per src/color (a
-// memo), its draws mapped to <d-path> in a square viewBox-fitted box colored
+// memo), its draws mapped to <d-path> in a square designSize-fitted box colored
 // from the theme by default. That is the only value it adds, so reach for
-// parseSvg plus your own <view viewBox> when you need a non-square box or
+// parseSvg plus your own <view designSize> when you need a non-square box or
 // want no theme coupling. The plain repaintBoundary keeps the static subtree
 // from re-recording alongside animating siblings; pointerEvents="all" makes
 // the box one hit unit (and skips per-path outline tests) - an icon's shapes
@@ -31,11 +33,13 @@ export function Icon(props: IconProps) {
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       repaintBoundary
       pointerEvents="all"
       width={size()}
       height={size()}
-      viewBox={[doc().width, doc().height]}
+      designSize={[doc().width, doc().height]}
       {...props.layout}
     >
       <For each={doc().draws}>{(draw) => <d-path {...draw} />}</For>

package/src/image.tsx

@@ -1,8 +1,9 @@
 import { createImage, createEffect, Loading, Errored, pct } from "@solidrt/core"
 import type { ImageSource, LayoutProps, Pct, PointerProps, TextureProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ImageProps extends PointerProps {
+export interface ImageProps extends PointerProps, TransitionProps {
   src: string | Uint8Array
   /**
    * How the image maps into the Image's box (CSS object-fit): "fill"
@@ -38,6 +39,7 @@ function FallbackTexture(props: {
   height?: number | Pct
 }) {
   let tex = createImage(() => props.src)
+
   return (
     <Errored fallback={(_err: unknown) => null}>
       <texture src={tex()} fit={props.fit} width={props.width} height={props.height} />
@@ -69,9 +71,12 @@ export function Image(props: ImageProps) {
   let texW = () => (props.fit != null ? pct(100) : typeof props.layout?.width === "number" ? props.layout.width : undefined)
   let texH = () =>
     props.fit != null ? pct(100) : typeof props.layout?.height === "number" ? props.layout.height : undefined
+  let split = () => splitTransition(props.transition)
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       {...props.layout}
       overflow={props.style?.borderRadius != null ? "hidden" : props.layout?.overflow}
       clipRadius={props.style?.borderRadius}
@@ -94,7 +99,7 @@ export function Image(props: ImageProps) {
       pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
-        <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
+        <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
       <Loading fallback={null}>
         <Errored
@@ -110,6 +115,8 @@ export function Image(props: ImageProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}

package/src/index.ts

@@ -60,4 +60,13 @@ export {
 export { Density, type DensityProps, densityScale } from "./density"
 export { typeStyle, typeWeight, lightOnDark } from "./typography"
 export { space } from "./spacing"
-export type { StyleProps, TextLayoutProps, Option } from "./types"
+export type {
+  StyleProps,
+  TextLayoutProps,
+  Option,
+  TransitionProps,
+  ComponentTransition,
+  TransitionViewProp,
+  TransitionStyleProp,
+  TransitionScrollProp,
+} from "./types"

package/src/item.tsx

@@ -5,16 +5,17 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ItemProps {
+export interface ItemProps extends TransitionProps {
   // Leading content: an icon, avatar, checkbox, ...
   startContent?: any
   // Primary text. A string/number renders as themed body text; anything else
   // as-is.
   label: any
   // Secondary line under the label. A string/number renders as themed muted
-  // caption text; anything else as-is.
+  // body text; anything else as-is.
   description?: any
   // Trailing content: a badge, timestamp, chevron, action, ...
   endContent?: any
@@ -63,8 +64,12 @@ export function Item(props: ItemProps) {
   let description = children(() => props.description)
   let descriptionIsText = () => typeof description() === "string" || typeof description() === "number"
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         props.ref?.(n)
@@ -90,10 +95,10 @@ export function Item(props: ItemProps) {
       focusable={(props.focusable ?? true) && interactive()}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect color={bg()} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
       <d-rect color={overlay(press.state())} radius={radius()} />
       {props.startContent}
-      <view flexDirection="column" flexGrow={1} flexShrink={1} gap={2}>
+      <view flexDirection="column" flexGrow={1} flexShrink={1} gap={Math.round(space("sm") / 2)}>
         <Show when={labelIsText()} fallback={label()}>
           <text color={theme.color.text} {...typeStyle("body")} maxLines={1}>
             {label()}
@@ -101,7 +106,7 @@ export function Item(props: ItemProps) {
         </Show>
         <Show when={props.description != null}>
           <Show when={descriptionIsText()} fallback={description()}>
-            <text color={theme.color.textMuted} {...typeStyle("caption")} maxLines={1}>
+            <text color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
               {description()}
             </text>
           </Show>
@@ -109,7 +114,7 @@ export function Item(props: ItemProps) {
       </view>
       {props.endContent}
       <Show when={press.focused() && policy.focusRing}>
-        <d-rect drawStyle="stroke" color={theme.color.text} strokeWidth={2} radius={radius()} />
+        <d-rect drawStyle="stroke" color={theme.color.ring} strokeWidth={theme.borderWidth.focus} radius={radius()} />
       </Show>
     </view>
   )

package/src/nav-shell.tsx

@@ -5,6 +5,8 @@ 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 NavItem {
   value: unknown
@@ -14,7 +16,7 @@ export interface NavItem {
   icon?: any
 }
 
-export interface NavShellProps {
+export interface NavShellProps extends TransitionProps {
   items: NavItem[]
   // Controlled selected value. If omitted, the shell is uncontrolled.
   value?: unknown
@@ -25,9 +27,6 @@ export interface NavShellProps {
   layout?: LayoutProps
 }
 
-const RAIL_WIDTH = 72
-const SIDEBAR_WIDTH = 220
-
 /**
  * An app shell that arranges primary navigation around the content per the
  * navigation policy: bottom tabs under it, a narrow rail or a wide sidebar
@@ -77,15 +76,8 @@ export function NavShell(props: NavShellProps) {
     )
   }
 
-  let Hairline = (p: { vertical?: boolean }) => (
-    <view width={p.vertical ? 1 : undefined} height={p.vertical ? undefined : 1}>
-      <d-rect color={theme.color.border} />
-    </view>
-  )
-
   let Tabs = () => (
     <view flexDirection="column" flexShrink={0}>
-      <Hairline />
       <view flexDirection="row">
         <d-rect color={theme.color.surface} />
         <For each={props.items}>
@@ -97,17 +89,16 @@ export function NavShell(props: NavShellProps) {
 
   let Rail = () => (
     <view flexDirection="row" flexShrink={0}>
-      <view flexDirection="column" width={RAIL_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
+      <view flexDirection="column" width={theme.size.navRail} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
         <d-rect color={theme.color.surface} />
         <For each={props.items}>{(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} />}</For>
       </view>
-      <Hairline vertical />
     </view>
   )
 
   let Sidebar = () => (
     <view flexDirection="row" flexShrink={0}>
-      <view flexDirection="column" width={SIDEBAR_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
+      <view flexDirection="column" width={theme.size.navSidebar} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
         <d-rect color={theme.color.surface} />
         <For each={props.items}>
           {(item: NavItem) => {
@@ -140,14 +131,13 @@ export function NavShell(props: NavShellProps) {
           }}
         </For>
       </view>
-      <Hairline vertical />
     </view>
   )
 
   // Children order is (content, nav): "column" puts the nav under the content,
   // "row-reverse" puts it to the left, and the content node never moves.
   return (
-    <view flexDirection={policy.navigation === "bottomTabs" ? "column" : "row-reverse"} {...props.layout}>
+    <view flexDirection={policy.navigation === "bottomTabs" ? "column" : "row-reverse"} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <view flex={1} flexDirection="column">
         {props.children}
       </view>

package/src/policy.ts

@@ -29,7 +29,8 @@ export type Policies = {
   // only (per-run polarity, or the theme's palette polarity as the default),
   // with one extra step for small font sizes; see typography.ts.
   textWeightDelta: number
-  // Application policies: recommendations derived from the window size class.
+  // Application policies: recommendations derived from the window size class
+  // (layout), and from the resulting pane count (navigation).
   // The application owns the final decision; accept them by consuming
   // policy.navigation / policy.layout, or override via setPolicy.
   navigation: NavigationPolicy
@@ -52,6 +53,7 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
         : caps.precisePointer
           ? "desktop"
           : "hybrid"
+  let layout: LayoutPolicy = caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane"
   return {
     interaction,
     density: interaction === "desktop" ? "compact" : "comfortable",
@@ -62,9 +64,12 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
     focusRing: caps.keyboardNav || gamepads().some((p) => p != null),
     textScale: env.textScale,
     textWeightDelta: env.displayScale < 1.5 ? 100 : 0,
-    navigation:
-      caps.windowSizeClass === "expanded" ? "sidebar" : caps.windowSizeClass === "medium" ? "rail" : "bottomTabs",
-    layout: caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane",
+    // Navigation follows the pane count, not its own breakpoint: a side strip
+    // spends width, which a single-pane window is short of, so only a
+    // two-pane layout earns one. "rail" is never a default output; it is the
+    // narrow side nav an app can pick for a content-dense two-pane layout.
+    navigation: layout === "twoPane" ? "sidebar" : "bottomTabs",
+    layout,
   }
 }
 

package/src/pressable.tsx

@@ -1,11 +1,12 @@
 import { children } from "@solidrt/core"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { createPress, type PressState } from "./press"
 
 export type { PressState } from "./press"
 
-export interface PressableProps extends PointerProps {
+export interface PressableProps extends PointerProps, TransitionProps {
   // children and style may be functions of the press state, so a caller can
   // restyle on press/hover without wiring their own signals. The state is live
   // (getters, not a snapshot): read it inside a prop or child expression, never
@@ -50,8 +51,12 @@ export function Pressable(props: PressableProps) {
   let hasBackground = () => style()?.backgroundColor != null || style()?.borderRadius != null
   let hasBorder = () => (style()?.borderWidth ?? 0) > 0
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         props.ref?.(n)
@@ -79,6 +84,8 @@ export function Pressable(props: PressableProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={style()?.backgroundColor ?? "transparent"}
           radius={style()?.borderRadius}
         />
@@ -87,6 +94,8 @@ export function Pressable(props: PressableProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style()?.borderColor ?? "transparent"}
           strokeWidth={style()?.borderWidth}
           radius={style()?.borderRadius}

package/src/progress-bar.tsx

@@ -2,9 +2,10 @@ 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 } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ProgressBarProps {
+export interface ProgressBarProps extends TransitionProps {
   // Progress from 0 to 1. Omit (or leave undefined) for an indeterminate bar: a
   // segment that slides back and forth.
   value?: number
@@ -71,7 +72,7 @@ export function ProgressBar(props: ProgressBarProps) {
   let offset = () => effectivePhase() * trackWidth() * (1 - SEGMENT)
 
   return (
-    <view ref={(n: { id: number }) => (trackNode = n)} position="relative" width="100%" height={h()} {...props.layout}>
+    <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}>
       <Show when={animating()}>
         <Animate />
       </Show>

package/src/qrcode.tsx

@@ -1,8 +1,11 @@
 import { createMemo } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import qrcode from "qrcode-generator"
+import { theme } from "./theme"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface QrCodeProps {
+export interface QrCodeProps extends TransitionProps {
   // The string to encode (URL, pairing ticket, text, ...).
   data: string
   // Pixels per QR module (the smallest square). The grid is
@@ -18,14 +21,13 @@ export interface QrCodeProps {
   // Error-correction level: higher tolerates more damage but packs denser and
   // caps the data length sooner.
   level?: "L" | "M" | "Q" | "H"
-  // Corner radius of the background panel.
+  // Corner radius of the background panel; defaults to the theme control radius.
   radius?: number
   layout?: LayoutProps
 }
 
 const MODULE_SIZE = 6
 const MARGIN = 16
-const RADIUS = 8
 
 // Render a QR for `data` as primitives: merge horizontal runs of dark modules
 // per row into a single d-rect, placed at explicit coordinates on a light
@@ -62,8 +64,8 @@ export function QrCode(props: QrCodeProps) {
   let side = () => grid().n * size() + 2 * margin()
 
   return (
-    <view repaintBoundary width={side()} height={side()} {...props.layout}>
-      <d-rect color={props.background ?? "#ffffff"} radius={props.radius ?? RADIUS} />
+    <view repaintBoundary width={side()} height={side()} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
+      <d-rect color={props.background ?? "#ffffff"} radius={props.radius ?? theme.radius.md} />
       {grid().runs.map((run) => (
         <d-rect
           x={margin() + run.x * size()}