@solidrt/components 0.0.50 → 0.0.52

package/src/item.tsx

@@ -0,0 +1,121 @@
+import { Show, children } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { createPress, type PressState } from "./press"
+import { theme } from "./theme"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle } from "./typography"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
+
+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
+  // body text; anything else as-is.
+  description?: any
+  // Trailing content: a badge, timestamp, chevron, action, ...
+  endContent?: any
+  // Present = the row is interactive: hover/pressed overlay tints, focusable,
+  // Enter/remote activation. A returned promise defers further activations
+  // until it settles; non-thenable returns are ignored.
+  onPress?: () => unknown
+  // Fills the row with surfaceAlt to mark the current selection.
+  selected?: boolean
+  disabled?: boolean
+  // Focus-navigation candidacy; defaults to true for interactive rows.
+  focusable?: boolean
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// A list row: leading content, a label with an optional description under it,
+// trailing content pushed to the end. The dense-data workhorse - rows compose
+// with <For> inside a plain column (or a ScrollView); this package ships no
+// List wrapper because a column view IS the list. Paddings and the gap are
+// density-scaled, so a <Density> region compacts rows wholesale. With onPress
+// the row presses like a menu entry: overlay tints for hover/pressed (no
+// scale - rows sit flush in a list), focus ring under the focusRing policy.
+export function Item(props: ItemProps) {
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.item, ...props.style })
+  let interactive = () => props.onPress != null && !props.disabled
+  let press = createPress(props)
+
+  let bg = () => styled().backgroundColor ?? (props.selected ? theme.color.surfaceAlt : "transparent")
+  let overlay = (s: PressState) =>
+    !interactive()
+      ? "transparent"
+      : s.pressed
+        ? theme.color.overlayPressed
+        : s.hovered && policy.interaction !== "touch"
+          ? theme.color.overlayHover
+          : "transparent"
+  let radius = () => styled().borderRadius ?? theme.radius.sm
+
+  // Resolved once via children(): the typeof probe and the mount site must
+  // share one build (see Button).
+  let label = children(() => props.label)
+  let labelIsText = () => typeof label() === "string" || typeof label() === "number"
+  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)
+      }}
+      repaintBoundary
+      flexDirection="row"
+      alignItems="center"
+      gap={space("md")}
+      paddingTop={space("md")}
+      paddingBottom={space("md")}
+      paddingLeft={space("lg")}
+      paddingRight={space("lg")}
+      {...props.layout}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      rotate={styled().rotate}
+      opacity={props.disabled ? 0.5 : styled().opacity}
+      // A passive row attaches no press recognizer: it must not claim
+      // pointers from its children (a Switch in a settings row) or from an
+      // enclosing pressable. Interactivity is decided at mount.
+      {...(props.onPress != null ? press.handlers : {})}
+      focusable={(props.focusable ?? true) && interactive()}
+      pointerEvents={props.disabled ? "none" : undefined}
+    >
+      <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={Math.round(space("sm") / 2)}>
+        <Show when={labelIsText()} fallback={label()}>
+          <text color={theme.color.text} {...typeStyle("body")} maxLines={1}>
+            {label()}
+          </text>
+        </Show>
+        <Show when={props.description != null}>
+          <Show when={descriptionIsText()} fallback={description()}>
+            <text color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
+              {description()}
+            </text>
+          </Show>
+        </Show>
+      </view>
+      {props.endContent}
+      <Show when={press.focused() && policy.focusRing}>
+        <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
@@ -49,7 +48,7 @@ export function NavShell(props: NavShellProps) {
     item.value === value()
       ? theme.color.surfaceAlt
       : hovered && policy.interaction !== "touch"
-        ? theme.color.surfaceHover
+        ? theme.color.overlayHover
         : "transparent"
 
   // Icon over a small label, centered; shared by the tab bar and the rail.
@@ -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,
   }
 }
 
@@ -118,11 +123,3 @@ export function setPolicy(partial: Partial<Policies>) {
   setOverrides((prev) => ({ ...prev, ...partial }))
 }
 
-// How density maps to component metrics: a multiplier on control sizes,
-// paddings, and hit targets. Comfortable is the components' designed size.
-const DENSITY_SCALE: Record<DensityPolicy, number> = { comfortable: 1, compact: 0.85, dense: 0.7 }
-
-/** Reactive density multiplier for control metrics. */
-export function densityScale(): number {
-  return DENSITY_SCALE[policy.density]
-}

package/src/press.ts

@@ -6,10 +6,16 @@ import { registerNavAction } from "./focus-nav"
 // so a consumer that reads one inside a JSX prop or child expression tracks that
 // signal there and nothing else re-runs. Read them in those positions, not
 // eagerly into a local, or the read lands in whatever scope destructured it.
-export type PressState = { pressed: boolean; hovered: boolean; focused: boolean }
+export type PressState = { pressed: boolean; hovered: boolean; focused: boolean; pending: boolean }
 
 export interface PressOptions {
-  onPress?: () => void
+  // A returned promise marks the press `pending` until it settles - further
+  // activations (pointer, key, remote) are ignored meanwhile, so an async
+  // action (save, submit) cannot double-fire. A rejection still clears
+  // pending and surfaces as an unhandled rejection. Typed `unknown` (not
+  // `void | Promise<void>`) so plain handlers like `() => setOpen(true)`
+  // keep compiling; any non-thenable return is ignored.
+  onPress?: () => unknown
   disabled?: boolean
   onPointerDown?: (e: PointerEvent) => void
   onPointerUp?: (e: PointerEvent) => void
@@ -55,6 +61,28 @@ export function createPress(options: PressOptions) {
   let node: { id: number } | null = null
   let unregisterNav: (() => void) | null = null
 
+  // Async onPress: while a returned promise is unsettled the press is pending
+  // and activations are ignored. `inflight` is a plain boolean because signal
+  // writes flush on the microtask, so two activations in one dispatch would
+  // both read pending() as false; the signal exists for the UI.
+  let [pending, setPending] = createSignal(false)
+  let inflight = false
+  let activate = () => {
+    if (options.disabled || inflight) return
+    let result = options.onPress?.()
+    if (result && typeof (result as Promise<void>).then === "function") {
+      inflight = true
+      setPending(true)
+      // finally, not then(clear, clear): pending clears either way, but a
+      // rejection keeps propagating to the unhandled-rejection report
+      // instead of being swallowed here.
+      ;(result as Promise<void>).finally(() => {
+        inflight = false
+        setPending(false)
+      })
+    }
+  }
+
   // Focus is derived from core's reactive focus rather than tracked through
   // the onFocus/onBlur handlers - one source of truth. Memoized so a focus
   // move propagates into styling only for the two controls whose value flips.
@@ -89,14 +117,15 @@ export function createPress(options: PressOptions) {
     get focused() {
       return focused()
     },
+    get pending() {
+      return pending()
+    },
   }
   let state = (): PressState => live
   let ref = (n: { id: number }) => {
     node = n
     unregisterNav?.()
-    unregisterNav = registerNavAction(n.id, () => {
-      if (!options.disabled) options.onPress?.()
-    })
+    unregisterNav = registerNavAction(n.id, activate)
   }
 
   let within = (e: PointerEvent) => {
@@ -145,7 +174,7 @@ export function createPress(options: PressOptions) {
       if (active === e.pointerId) {
         let fire = inside
         cancel()
-        if (fire) options.onPress?.()
+        if (fire) activate()
       }
       options.onPointerUp?.(e)
     },
@@ -161,7 +190,7 @@ export function createPress(options: PressOptions) {
       // The remote center key's `key` is "Unidentified"; match its code.
       if ((e.key === "Enter" || e.key === " " || e.code === "Select") && !e.repeat && !options.disabled) {
         e.stopPropagation()
-        options.onPress?.()
+        activate()
       }
       options.onKeyDown?.(e)
     },
@@ -173,5 +202,5 @@ export function createPress(options: PressOptions) {
     },
   }
 
-  return { pressed, hovered, focused, state, ref, handlers, cancel }
+  return { pressed, hovered, focused, pending, state, ref, handlers, cancel }
 }

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
@@ -14,7 +15,10 @@ export interface PressableProps extends PointerProps {
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps | ((state: PressState) => StyleProps)
-  onPress?: () => void
+  // A returned promise sets `state.pending` until it settles; further
+  // presses are ignored meanwhile (no double-fire). Non-thenable returns
+  // are ignored.
+  onPress?: () => unknown
   disabled?: boolean
 }
 
@@ -47,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)
@@ -76,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}
         />
@@ -84,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
@@ -27,8 +28,10 @@ let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi :
 export function ProgressBar(props: ProgressBarProps) {
   let h = () => (props.layout?.height as number) ?? HEIGHT
   let radius = () => h() / 2
-  let track = () => props.style?.backgroundColor ?? theme.color.surfaceAlt
-  let fill = () => props.style?.color ?? theme.color.primary
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.progressBar, ...props.style })
+  let track = () => styled().backgroundColor ?? theme.color.surfaceAlt
+  let fill = () => styled().color ?? theme.color.primary
   let indeterminate = () => props.value === undefined
 
   // Measured track width in pixels. Both the determinate fill and the
@@ -69,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()}

package/src/radio.tsx

@@ -2,9 +2,11 @@ import { createSignal, createContext, useContext, Show, children } from "@solidr
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
+import { policy } from "./policy"
+import { densityScale } from "./density"
 import { typeStyle } from "./typography"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 // 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.
@@ -51,7 +53,7 @@ export function RadioGroup(props: RadioGroupProps) {
   )
 }
 
-export interface RadioProps {
+export interface RadioProps extends TransitionProps {
   // This option's value; selecting it makes it the group's value.
   value: unknown
   disabled?: boolean
@@ -71,7 +73,6 @@ export function Radio(props: RadioProps) {
   let ctx = useContext(RadioContext)
   let selected = () => ctx.value() === props.value
   let disabled = () => props.disabled || ctx.disabled()
-  let ringColor = () => (selected() ? theme.color.primary : theme.color.border)
   // Resolved once via children(): the typeof probe and the mount sites must
   // share one build - reading the raw getter again would orphan native nodes.
   let resolved = children(() => props.children)
@@ -81,29 +82,38 @@ export function Radio(props: RadioProps) {
   // Inner dot inset as a fraction of the ring, so it scales with the density.
   let inset = () => ring() * 0.3
 
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.radio, ...props.style })
   let press = createPress({ onPress: () => ctx.select(props.value) })
+  // The circle doubles as the focus ring: ring color at the focus width.
+  let focusRing = () => press.focused() && policy.focusRing
+  let ringColor = () => (focusRing() ? theme.color.ring : selected() ? theme.color.primary : theme.color.border)
+  let ringWidth = () => (focusRing() ? theme.borderWidth.focus : 2)
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
       flexDirection="row"
       alignItems="center"
       gap={theme.spacing.md}
       {...props.layout}
-      x={props.style?.x}
-      y={props.style?.y}
-      scale={props.style?.scale}
-      rotate={props.style?.rotate}
-      opacity={props.style?.opacity}
+      x={styled().x}
+      y={styled().y}
+      scale={styled().scale}
+      rotate={styled().rotate}
+      opacity={styled().opacity}
       {...press.handlers}
+      focusable={!disabled()}
       pointerEvents={disabled() ? "none" : undefined}
     >
-      <Show when={props.style?.backgroundColor != null || props.style?.borderRadius != null}>
-        <d-rect color={props.style?.backgroundColor ?? "transparent"} radius={props.style?.borderRadius} />
+      <Show when={styled().backgroundColor != null || styled().borderRadius != null}>
+        <d-rect color={styled().backgroundColor ?? "transparent"} radius={styled().borderRadius} />
       </Show>
       <view width={ring()} height={ring()}>
-        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={2} />
+        <d-oval drawStyle="stroke" 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} />
         </Show>
@@ -113,12 +123,12 @@ export function Radio(props: RadioProps) {
           {resolved()}
         </text>
       </Show>
-      <Show when={(props.style?.borderWidth ?? 0) > 0}>
+      <Show when={(styled().borderWidth ?? 0) > 0}>
         <d-rect
           drawStyle="stroke"
-          color={props.style?.borderColor ?? "transparent"}
-          strokeWidth={props.style?.borderWidth}
-          radius={props.style?.borderRadius}
+          color={styled().borderColor ?? "transparent"}
+          strokeWidth={styled().borderWidth}
+          radius={styled().borderRadius}
         />
       </Show>
     </view>