@solidrt/components 0.0.49 → 0.0.51

package/src/pressable.tsx

@@ -14,7 +14,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
 }
 

package/src/progress-bar.tsx

@@ -27,8 +27,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

package/src/radio.tsx

@@ -2,7 +2,7 @@ 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 { densityScale } from "./density"
 import { typeStyle } from "./typography"
 import type { StyleProps } from "./types"
 
@@ -81,6 +81,8 @@ 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) })
 
   return (
@@ -91,16 +93,16 @@ export function Radio(props: RadioProps) {
       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}
       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} />
@@ -113,12 +115,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>

package/src/rich-text-document.ts

@@ -0,0 +1,247 @@
+// Headless rich-text document buffer: the value model of a rich text editor
+// (okf/backlog/rich-text-editor.md) over the same string offsets the text
+// buffer and the editor geometry use. Flat, Delta-like: one text with "\n"
+// between paragraphs, attributed runs tiling it, one attribute set per
+// paragraph. Attributes are opaque key/values here; what {bold: true} or an
+// atom's {atom: "image"} mean is the component's business.
+
+import { createSignal, flush } from "@solidjs/signals"
+import { createTextBuffer, type TextBuffer, type TextBufferOptions } from "@solidrt/core/text-input"
+
+/** Formatting as opaque key/values, compared with `===`. */
+export type Attributes = Record<string, string | number | boolean>
+/** A change to apply: a `null` value removes the key. */
+export type AttributePatch = Record<string, string | number | boolean | null>
+
+/** An attributed range of the document text; runs tile the text. */
+export type DocumentRun = { start: number; end: number; attributes: Attributes }
+
+/**
+ * A rich text value. `text` is the plain text (what a caret moves over):
+ * "\n" separates paragraphs, an inline atom is one U+FFFC ({@link ATOM}).
+ * `runs` tile the text (none when it is empty) with no two neighbours
+ * carrying equal attributes; `blocks` holds one attribute set per paragraph
+ * (`\n` count + 1). Plain data: build one with {@link plainDocument}, or
+ * literally.
+ */
+export type Document = { text: string; runs: DocumentRun[]; blocks: Attributes[] }
+
+/** The character standing in for an inline atom (object replacement character). */
+export const ATOM = "\uFFFC"
+
+/** A document of `text` with no formatting. */
+export function plainDocument(text = ""): Document {
+  return {
+    text,
+    runs: text ? [{ start: 0, end: text.length, attributes: {} }] : [],
+    blocks: Array.from({ length: countNewlines(text, 0, text.length) + 1 }, () => ({})),
+  }
+}
+
+export type DocumentBufferOptions = {
+  /** Controlled document accessor; edits then flow out through onInput only. */
+  value?: () => Document | undefined
+  /** Initial document when uncontrolled. */
+  defaultValue?: Document
+  /** Called with the new document after every edit. */
+  onInput?: (document: Document) => void
+  maxLength?: TextBufferOptions["maxLength"]
+  step?: TextBufferOptions["step"]
+}
+
+export type DocumentBuffer = TextBuffer & {
+  /** The current document (`value()` is its text). */
+  document(): Document
+  /**
+   * Inline attributes at the caret: the pending typing attributes if
+   * {@link format} was called on a collapsed selection, else those of the
+   * character before the caret (the ones typed text will take).
+   */
+  attributes(): Attributes
+  /**
+   * Set or remove (`null`) inline attributes on the selection. On a
+   * collapsed selection they become the typing attributes of the next
+   * insert instead, dropped when the caret moves.
+   */
+  format(patch: AttributePatch): void
+  /** Set or remove (`null`) block attributes on the paragraphs the selection touches. */
+  formatBlock(patch: AttributePatch): void
+  /** Replace the selection with an inline atom carrying `attributes`. */
+  insertAtom(attributes: Attributes): void
+  /** Replace the whole document, caret to the end. */
+  setDocument(next: Document): void
+}
+
+/**
+ * An editable rich text document with the contract of createTextBuffer
+ * (controlled/uncontrolled, buffer-owned selection, grapheme `step`,
+ * synchronous commits) plus formatting. Inserted text takes the inline
+ * attributes of the character before the caret; a "\n" splits its paragraph
+ * into two with the same block attributes, deleting one merges (the first
+ * paragraph's attributes win).
+ */
+export function createDocumentBuffer(options: DocumentBufferOptions = {}): DocumentBuffer {
+  let [internal, setInternal] = createSignal<Document>(options.defaultValue ?? plainDocument())
+  let current = () => options.value?.() ?? internal()
+  // Typing attributes set on a collapsed selection, valid while the caret
+  // stays where they were set.
+  let [pending, setPending] = createSignal<{ at: number; attributes: Attributes } | null>(null)
+
+  let commit = (next: Document) => {
+    if (options.value?.() == null) setInternal(next)
+    options.onInput?.(next)
+  }
+
+  let inherited = (offset: number): Attributes => {
+    let runs = current().runs
+    let at = offset > 0 ? offset - 1 : 0
+    return runs.find((r) => r.start <= at && at < r.end)?.attributes ?? {}
+  }
+
+  let text = createTextBuffer({
+    value: () => current().text,
+    maxLength: options.maxLength,
+    step: options.step,
+    onReplace: (start, end, inserted) => {
+      let doc = current()
+      let typing = pending()
+      let attributes = typing && typing.at === start && start === end ? typing.attributes : inherited(start)
+      setPending(null)
+      let paragraph = countNewlines(doc.text, 0, start)
+      let removed = countNewlines(doc.text, start, end)
+      let added = countNewlines(inserted, 0, inserted.length)
+      let block = doc.blocks[paragraph] ?? {}
+      commit({
+        text: doc.text.slice(0, start) + inserted + doc.text.slice(end),
+        runs: spliceRuns(doc.runs, start, end, inserted.length, attributes),
+        blocks: [
+          ...doc.blocks.slice(0, paragraph),
+          ...Array.from({ length: added + 1 }, () => block),
+          ...doc.blocks.slice(paragraph + removed + 1),
+        ],
+      })
+    },
+  })
+
+  let range = (): [number, number] => {
+    let { anchor, focus } = text.selection()
+    return anchor <= focus ? [anchor, focus] : [focus, anchor]
+  }
+
+  let attributes = (): Attributes => {
+    let typing = pending()
+    let caret = text.caret()
+    return typing && typing.at === caret ? typing.attributes : inherited(caret)
+  }
+
+  return {
+    ...text,
+    move: (direction, opts) => {
+      setPending(null)
+      text.move(direction, opts)
+    },
+    setSelection: (anchor, focus) => {
+      setPending(null)
+      text.setSelection(anchor, focus)
+    },
+    document: current,
+    attributes,
+    format: (patch) => {
+      let [start, end] = range()
+      if (start === end) {
+        setPending({ at: start, attributes: patched(attributes(), patch) })
+        flush()
+        return
+      }
+      let doc = current()
+      commit({ ...doc, runs: formatRuns(doc.runs, start, end, patch) })
+      flush()
+    },
+    formatBlock: (patch) => {
+      let [start, end] = range()
+      let doc = current()
+      let first = countNewlines(doc.text, 0, start)
+      let last = countNewlines(doc.text, 0, end)
+      commit({ ...doc, blocks: doc.blocks.map((b, i) => (first <= i && i <= last ? patched(b, patch) : b)) })
+      flush()
+    },
+    insertAtom: (attributes) => {
+      let [start, end] = range()
+      if (start !== end) text.insertText("")
+      setPending({ at: start, attributes })
+      flush()
+      text.insertText(ATOM)
+    },
+    setDocument: (next) => {
+      commit(next)
+      text.setSelection(next.text.length, next.text.length)
+    },
+  }
+}
+
+function countNewlines(text: string, start: number, end: number): number {
+  let n = 0
+  for (let i = start; i < end; i++) if (text.charCodeAt(i) === 10) n++
+  return n
+}
+
+function sameAttributes(a: Attributes, b: Attributes): boolean {
+  let keys = Object.keys(a)
+  return keys.length === Object.keys(b).length && keys.every((k) => a[k] === b[k])
+}
+
+function patched(attributes: Attributes, patch: AttributePatch): Attributes {
+  let out: Attributes = { ...attributes }
+  for (let key of Object.keys(patch)) {
+    let value = patch[key]
+    if (value == null) delete out[key]
+    else out[key] = value
+  }
+  return out
+}
+
+// Drop empty runs and merge equal neighbours: the tiling invariant.
+function normalize(runs: DocumentRun[]): DocumentRun[] {
+  let out: DocumentRun[] = []
+  for (let run of runs) {
+    if (run.end <= run.start) continue
+    let last = out[out.length - 1]
+    if (last && sameAttributes(last.attributes, run.attributes)) last.end = run.end
+    else out.push({ ...run })
+  }
+  return out
+}
+
+// Runs after replacing [start, end) by `length` characters in `attributes`.
+function spliceRuns(runs: DocumentRun[], start: number, end: number, length: number, attributes: Attributes): DocumentRun[] {
+  let delta = length - (end - start)
+  let out: DocumentRun[] = []
+  let inserted = false
+  for (let run of runs) {
+    if (run.start < start) out.push({ start: run.start, end: Math.min(run.end, start), attributes: run.attributes })
+    if (!inserted && run.end >= start) {
+      out.push({ start, end: start + length, attributes })
+      inserted = true
+    }
+    if (run.end > end) out.push({ start: Math.max(run.start, end) + delta, end: run.end + delta, attributes: run.attributes })
+  }
+  if (!inserted) out.push({ start, end: start + length, attributes })
+  return normalize(out)
+}
+
+// Runs with `patch` applied over [start, end).
+function formatRuns(runs: DocumentRun[], start: number, end: number, patch: AttributePatch): DocumentRun[] {
+  let out: DocumentRun[] = []
+  for (let run of runs) {
+    let from = Math.max(run.start, start)
+    let to = Math.min(run.end, end)
+    if (from >= to) {
+      out.push(run)
+      continue
+    }
+    if (run.start < from) out.push({ start: run.start, end: from, attributes: run.attributes })
+    out.push({ start: from, end: to, attributes: patched(run.attributes, patch) })
+    if (to < run.end) out.push({ start: to, end: run.end, attributes: run.attributes })
+  }
+  return normalize(out)
+}

package/src/rich-text-editor.tsx

@@ -0,0 +1,149 @@
+import { untrack } from "@solidrt/core"
+import type { LayoutProps, TextInputHints } from "@solidrt/core"
+import type { TextRunRange } from "flux:rendertree"
+import { EditorField } from "./editor-field"
+import { createDocumentBuffer, type Attributes, type Document, type DocumentBuffer } from "./rich-text-document"
+import type { StyleProps } from "./types"
+import { theme } from "./theme"
+import { policy } from "./policy"
+
+export interface RichTextEditorProps {
+  value?: Document
+  defaultValue?: Document
+  onInput?: (value: Document) => void
+  /**
+   * Receives the editor's document buffer, the formatting API: `format`,
+   * `formatBlock`, `insertAtom`, `attributes` (for toolbar state), plus the
+   * text buffer's selection and edit methods. The app renders its own
+   * controls around the editor and calls these.
+   */
+  editorRef?: (editor: DocumentBuffer) => void
+  onFocus?: () => void
+  onBlur?: () => void
+
+  placeholder?: string
+  disabled?: boolean
+  autoFocus?: boolean
+  /** Without a `layout.height`: rows to grow to before scrolling. Default unbounded. */
+  maxRows?: number
+  hints?: TextInputHints
+
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// The attributes the editor draws (anything else is carried in the document
+// and ignored here). Inline: bold, italic, underline, code (mono), color,
+// link (a URL string: primary color, underlined). Block: heading 1-3.
+// Font-affecting ones also feed the geometry (prepareText runs), so the
+// caret and wrapping follow the drawn glyphs.
+type Font = Pick<TextRunRange, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight">
+
+function fontOf(inline: Attributes, block: Attributes, base: number): Font {
+  let font: Font = {}
+  let heading = block.heading
+  if (heading === 1) font.fontSize = theme.text.heading.size * policy.textScale
+  else if (heading === 2) font.fontSize = theme.text.title.size * policy.textScale
+  else if (heading === 3) font.fontSize = base
+  if (heading === 1 || heading === 2 || heading === 3 || inline.bold) font.fontWeight = 700
+  if (inline.italic) font.fontStyle = "italic"
+  if (inline.code) font.fontFamily = "mono"
+  return font
+}
+
+// A document as style intervals: the document runs cut at paragraph
+// boundaries, each with the paragraph's block attributes alongside.
+type Interval = { start: number; end: number; inline: Attributes; block: Attributes }
+
+function intervals(doc: Document): Interval[] {
+  let out: Interval[] = []
+  let paragraph = 0
+  for (let run of doc.runs) {
+    let at = run.start
+    // Runs are clamped to the text: a malformed document draws what it can.
+    let runEnd = Math.min(run.end, doc.text.length)
+    while (at < runEnd) {
+      let next = doc.text.indexOf("\n", at)
+      let paragraphEnd = next < 0 ? doc.text.length : next + 1
+      let end = Math.min(runEnd, paragraphEnd)
+      out.push({ start: at, end, inline: run.attributes, block: doc.blocks[paragraph] ?? {} })
+      if (end === paragraphEnd && next >= 0) paragraph++
+      at = end
+    }
+  }
+  return out
+}
+
+/**
+ * Edits a rich text {@link Document} (styled runs, paragraph attributes,
+ * inline atoms as U+FFFC) in the TextInput field: same focus, caret, keys,
+ * wrapping and scrolling, always multiline. Formatting is driven through
+ * `editorRef` (the document buffer), not a built-in toolbar. Atoms are drawn
+ * as their placeholder character for now.
+ */
+export function RichTextEditor(props: RichTextEditorProps) {
+  let editor!: DocumentBuffer
+  let base = () => theme.text.body.size * policy.textScale
+  let doc = () => editor.document()
+
+  // Geometry runs: every interval whose font differs from the base.
+  let runs = (): TextRunRange[] => {
+    let size = base()
+    let out: TextRunRange[] = []
+    for (let { start, end, inline, block } of intervals(doc())) {
+      let font = fontOf(inline, block, size)
+      if (Object.keys(font).length === 0) continue
+      out.push({ start, end, ...font })
+    }
+    return out
+  }
+
+  // Only set props are passed: an explicit undefined would reach the tree.
+  let spanProps = (i: Interval): Record<string, unknown> => {
+    let out: Record<string, unknown> = fontOf(i.inline, i.block, base())
+    let link = typeof i.inline.link === "string"
+    if (typeof i.inline.color === "string") out.color = i.inline.color
+    else if (link) out.color = theme.color.primary
+    if (i.inline.underline || link) out.textDecoration = "underline"
+    return out
+  }
+
+  return (
+    <EditorField
+      buffer={(step) => {
+        editor = createDocumentBuffer({
+          value: () => props.value,
+          defaultValue: untrack(() => props.defaultValue),
+          onInput: (d) => props.onInput?.(d),
+          step,
+        })
+        props.editorRef?.(editor)
+        return editor
+      }}
+      runs={runs}
+      renderLine={({ line, font, color }) => (
+        <d-text y={line().y} w={line().width + 1} {...font()} color={color()} maxLines={1}>
+          {intervals(doc())
+            .filter((i) => i.end > line().start && i.start < line().end)
+            .map((i) => (
+              <span {...spanProps(i)}>
+                {doc().text.slice(Math.max(i.start, line().start), Math.min(i.end, line().end))}
+              </span>
+            ))}
+        </d-text>
+      )}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      autoFocus={props.autoFocus}
+      multiline
+      maxRows={props.maxRows}
+      hints={props.hints}
+      ref={props.ref}
+      layout={props.layout}
+      style={{ ...theme.components.richTextEditor, ...props.style }}
+    />
+  )
+}

package/src/segmented-control.tsx

@@ -37,8 +37,12 @@ export function SegmentedControl(props: SegmentedControlProps) {
     props.onChange?.(v)
   }
 
-  let radius = () =>
-    typeof props.style?.borderRadius === "number" ? props.style.borderRadius : theme.radius.md
+  // Theme-level per-component overrides merged under the instance style.
+  let styled = () => ({ ...theme.components.segmentedControl, ...props.style })
+  let radius = () => {
+    let r = styled().borderRadius
+    return typeof r === "number" ? r : theme.radius.md
+  }
   // Per-corner radii: round only the corners on the control's outer edge, so
   // the segments read as one joined control. [tl, tr, br, bl].
   let corners = (i: number): number | [number, number, number, number] => {
@@ -50,7 +54,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
     return 0
   }
 
-  let idleFill = () => props.style?.backgroundColor ?? theme.color.surfaceAlt
+  let idleFill = () => styled().backgroundColor ?? theme.color.surfaceAlt
   let activeFill = () => (props.disabled ? theme.color.surface : theme.color.primary)
   let label = (active: boolean) =>
     props.disabled ? theme.color.textMuted : active ? theme.color.onPrimary : theme.color.text
@@ -60,23 +64,23 @@ export function SegmentedControl(props: SegmentedControlProps) {
       flexDirection="row"
       gap={DIVIDER}
       {...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}
     >
       <d-rect color={theme.color.border} radius={radius()} />
       <For each={props.options}>
         {(opt, i) => {
           let active = () => value() === opt.value
           let press = createPress({ onPress: () => select(opt.value) })
-          let fill = () =>
-            active()
-              ? activeFill()
-              : press.hovered() && !props.disabled && policy.interaction !== "touch"
-                ? theme.color.surfaceHover
-                : idleFill()
+          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 (
             <view
               ref={press.ref}
@@ -92,6 +96,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
               pointerEvents={props.disabled ? "none" : undefined}
             >
               <d-rect color={fill()} radius={corners(i())} />
+              <d-rect color={overlay()} radius={corners(i())} />
               <text
                 color={label(active())}
                 {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}

package/src/select.tsx

@@ -6,6 +6,7 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { Option, StyleProps } from "./types"
+import { Icon } from "./icon"
 
 export interface SelectProps {
   options: Option[]
@@ -64,9 +65,11 @@ export function Select(props: SelectProps) {
       >
         <d-rect
           color={
-            press.pressed() || (press.hovered() && policy.interaction !== "touch")
-              ? theme.color.surfaceHover
-              : "transparent"
+            press.pressed()
+              ? theme.color.overlayPressed
+              : press.hovered() && policy.interaction !== "touch"
+                ? theme.color.overlayHover
+                : "transparent"
           }
         />
         <text {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
@@ -147,18 +150,25 @@ export function Select(props: SelectProps) {
       </view>,
     )
 
-  let press = createPress({ onPress: () => setOpen(!open()) })
+  let press = createPress({
+    onPress: () => {
+      setOpen(!open())
+    },
+  })
   let style = () => ({
     borderColor: theme.color.border,
     borderWidth: theme.borderWidth.sm,
     borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface,
+    ...theme.components.select,
     ...props.style,
-    backgroundColor:
-      props.style?.backgroundColor ??
-      (press.hovered() && !props.disabled && policy.interaction !== "touch"
-        ? theme.color.surfaceHover
-        : theme.color.surface),
   })
+  // Hover feedback: the theme overlay tint drawn over the trigger fill.
+  let overlay = () =>
+    press.hovered() && !props.disabled && policy.interaction !== "touch"
+      ? theme.color.overlayHover
+      : "transparent"
+
 
   return (
     <view
@@ -185,22 +195,30 @@ export function Select(props: SelectProps) {
       pointerEvents={props.disabled ? "none" : undefined}
     >
       <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
+      <d-rect color={overlay()} radius={style().borderRadius} />
       <Show
         when={selected()}
         fallback={<text {...bodyText(theme.color.textMuted)}>{props.placeholder ?? ""}</text>}
       >
         <text {...bodyText(props.disabled ? theme.color.textMuted : theme.color.text)}>{selected()!.label}</text>
       </Show>
-      <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>
+      <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} />
+      </Show>
       <Show when={open()}>
         <Show when={policy.interaction === "touch"} fallback={<Dropdown />}>
           <Sheet />

package/src/slider.tsx

@@ -1,7 +1,7 @@
 import { arena, createSignal, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
-import { densityScale } from "./policy"
+import { densityScale } from "./density"
 import type { StyleProps } from "./types"
 
 export interface SliderProps {

package/src/spacing.ts

@@ -1,5 +1,5 @@
 import { theme, type Theme } from "./theme"
-import { densityScale } from "./policy"
+import { densityScale } from "./density"
 
 // Density-scaled spacing: a theme.spacing token multiplied by the density
 // policy's metric scale, rounded to whole pixels. Use it for gaps and paddings