@solidrt/components 0.0.63 → 0.0.64

package/docs/surface.md

@@ -0,0 +1,19 @@
+# Surface
+
+The one way a component draws a face: a role's material (`theme.material`) under the theme light (`theme.light`) at an elevation (`theme.elevation`), stacked as layers that fill the view it is rendered in - a contact shadow, the glow, the fill (tinted by the light, with the sheen gradient along it, carrying the key shadow the elevation casts), the hover/pressed tint, the bevel and the outline. Every themed component draws its chrome through it, so a theme's light, materials and elevation restyle the whole library at once; under the stock presets (flat materials, zero elevation) a face is a plain fill, the tint and the outline, the look the package has always had. A custom control uses it the same way: render it as the first child of the laid-out view it dresses, pick a `role` (never a material), give it the base `fill`, the `radius`, the press state for the tint and the sink, and an `outline` for its border or focus ring.
+
+```jsx
+import { Surface, createPress, theme } from "@solidrt/components"
+
+function Tile(props) {
+  let press = createPress(props)
+  return (
+    <view ref={press.ref} {...press.handlers} padding={16} cursor="pointer" focusable>
+      <Surface role="surface" elevation="raised" radius={theme.radius.lg} pressed={press.pressed()} hovered={press.hovered()} />
+      <text color={theme.color.text}>{props.label}</text>
+    </view>
+  )
+}
+```
+
+A pressed face sinks (its key shadow fades toward the contact shadow, its lit edge moves to the far side) on the native shadow transition; a `sunken` face is a well or a groove (shaded like a pressed face, casting nothing); `lifted` with `liftTo` retargets the key shadow to a higher level (the Card hover lift); `chrome={false}` keeps only the tint (a ghost button at rest). `material` merges layers over the role's, `glow` overrides that layer alone. Shadows cast from opaque casters hidden under the fill, since a transparent caster's blurred shadow composites in a save layer of its own, which a tiled GPU pays for per shadow; only a glass material (a frosted backdrop, the overlay role's option) casts from a transparent one. `facePaint` gives the same derivation as plain paint values, for a part a control draws itself (a slider fill, a segmented indicator); `roleFill`, `roleMaterial` and `surfaceSinks` are the pieces it is built from.

package/docs/switch.md

@@ -1,6 +1,6 @@
 # Switch
 
-An on/off toggle: the track fills with `primary` when on and `surfaceAlt` when off (a fade), and the thumb springs across - the `knob` transition entry retimes that travel. Controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Built on `Pressable`, so `disabled` takes no pointer events. `style` overrides the track colors and radius.
+An on/off toggle: the track fills with `primary` when on and `surfaceAlt` when off (a fade), and the thumb springs across - the `knob` transition entry retimes that travel. Controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Built on `Pressable`, so `disabled` takes no pointer events. The thumb is `theme.color.thumb` (else `onPrimary`), track and thumb follow `radius.full` through `pill` (square in an all-square theme), and the on track glows with the theme's accent glow. `style` overrides the track colors and radius.
 
 ```jsx
 import { Switch } from "@solidrt/components"

package/docs/theme.md

@@ -1,6 +1,6 @@
 # Theming
 
-Appearance (colors, spacing, border, font roles) comes from one shared, reactive theme backed by a Solid store: reads are tracked, so switching the theme at runtime recolors the live UI without remounting. Two presets ship, `darkTheme` and `lightTheme` (default dark); `setTheme(preset)` switches, `setTheme(partial)` merges an override one level deep per category. Custom themes are authored with `defineTheme`.
+Appearance (colors, spacing, border, font roles) comes from one shared, reactive theme backed by a Solid store: reads are tracked, so switching the theme at runtime recolors the live UI without remounting. Four presets ship, `darkTheme` and `lightTheme` (the flat look, default dark) and `litDarkTheme` and `litLightTheme` (the same palette under a light, see below); `setTheme(preset)` switches, `setTheme(partial)` merges an override one level deep per category. A resolved theme carries every key of every category (unset ones as `undefined`), so switching to one replaces the previous theme outright, per-component overrides and icon slots included; a partial keeps whatever it does not name. Custom themes are authored with `defineTheme`.
 
 ```jsx
 import { setTheme, darkTheme, lightTheme } from "@solidrt/components"
@@ -33,7 +33,7 @@ The type scale derives from `text.base` (the body size, default 14) and `text.ra
 
 ## Tokens
 
-The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`/`onPrimary`, `secondary`/`onSecondary` (lower-emphasis accent), `danger` (validation/destructive), `scrim` (modal dim), `ring` (the focus ring; defaults to `text` so it stays visible on primary fills), and the feedback pair `overlayHover`/`overlayPressed`: translucent tints components draw OVER a control's own fill, so one token pair gives hover/pressed feedback on every fill color, including caller-set ones. Non-color tokens are `spacing`, `radius`, `borderWidth` (`sm` for borders, `focus` for the ring), `size` (app-wide default extents: `navRail` 72, `navSidebar` 220, `splitViewList` 320, `menuMinWidth` 120, `slider` 200; each overridable per instance through its layout or prop), and `text` (the type scale: `caption`/`label`/`body`/`title`/`heading` roles, each `{ size, lineHeight, weight }`, plus `fontFamily` and `monoFamily` for code).
+The color tokens are `background` (window fill), `surface` (control/card fill), `surfaceAlt` (subtle raised/track fill), `text`, `textMuted`, `border`, `primary`/`onPrimary`, `secondary`/`onSecondary` (lower-emphasis accent), `danger` (validation/destructive), `scrim` (modal dim), `ring` (the focus ring; defaults to `text` so it stays visible on primary fills), `thumb` (optional: the cap riding a track, the Switch knob and the Slider thumb; unset they are `onPrimary` and `primary`, so a palette whose `onPrimary` is dark sets a light cap here), and the feedback pair `overlayHover`/`overlayPressed`: translucent tints components draw OVER a control's own fill, so one token pair gives hover/pressed feedback on every fill color, including caller-set ones. Non-color tokens are `spacing`, `radius`, `borderWidth` (`sm` for borders, `focus` for the ring), `size` (app-wide default extents: `navRail` 72, `navSidebar` 220, `splitViewList` 320, `menuMinWidth` 120, `slider` 200; each overridable per instance through its layout or prop), and `text` (the type scale: `caption`/`label`/`body`/`title`/`heading` roles, each `{ size, lineHeight, weight }`, plus `fontFamily` and `monoFamily` for code).
 
 ## Spacing
 
@@ -41,7 +41,7 @@ Spacing is one base unit: `spacing` in a theme definition is a number (default 4
 
 ## Radius
 
-Corner radius is set once: `radius` in a theme definition is a single number, the control radius (default 8), and the scale derives from it: `md` is the base (Button, TextInput, RichTextEditor, Select, SegmentedControl, QrCode), `sm` half of it (Checkbox, Item, NavShell items, Select and ContextMenu popups, Tooltip), `lg` one and a half (Card), and `full` the pill (Badge). Set `radius: 0` for a square theme, `radius: 12` for a soft one; buttons and inputs always match. Shapes derived from a control's own height (Switch, Slider, ProgressBar, Radio) are not on the scale. Pass an object (`radius: { sm, md, lg, full }`, any subset) to pin individual steps instead.
+Corner radius is set once: `radius` in a theme definition is a single number, the control radius (default 8), and the scale derives from it: `md` is the base (Button, TextInput, RichTextEditor, Select, SegmentedControl, QrCode), `sm` half of it (Checkbox, Item, NavShell items, Select and ContextMenu popups, Tooltip), `lg` one and a half (Card), and `full` the pill (Badge). Set `radius: 0` for a square theme, `radius: 12` for a soft one; buttons and inputs always match. Shapes derived from a control's own height (Switch, Slider, ProgressBar, Radio) take `full` too, through `pill(size)`: half the size, capped by `radius.full`, so `full: 0` squares every pill and circle in the library (`radius: { sm: 0, md: 0, lg: 0, full: 0 }` is the all-square theme) while the default 9999 leaves them round. `pill` is exported for a custom control with a round part. Pass an object (`radius: { sm, md, lg, full }`, any subset) to pin individual steps instead.
 
 ```jsx
 setTheme({ radius: 4 })   // sm 2, md 4, lg 6
@@ -49,21 +49,49 @@ setTheme({ radius: 4 })   // sm 2, md 4, lg 6
 
 ## Motion
 
-`motion` holds the three durations (ms) every built-in component transition draws from, so one theme edit retimes the whole package: `fast` (default 100) is press/hover feedback, `base` (150) the color and opacity fades - state changes, the theme cross-fade (a `setTheme` fades every themed color rather than snapping), popup enter/exit - and `slow` (250) the travel of a control's moving parts (switch knob, segmented indicator, progress fill). `policy.motion` gates whether these play at all; a per-instance `transition` prop overrides them per property.
+`motion` holds the three durations (ms) every built-in component transition draws from, so one theme edit retimes the whole package: `fast` (default 100) is press/hover feedback, `base` (150) the color and opacity fades - state changes, the theme cross-fade (a `setTheme` fades every themed color rather than snapping), popup enter/exit - and `slow` (250) the travel of a control's moving parts (switch knob, segmented indicator, progress fill) and of a face's shadows as it sinks or lifts. `policy.motion` gates whether these play at all; a per-instance `transition` prop overrides them per property.
 
 ```jsx
 setTheme({ motion: { base: 250, slow: 400 } })   // a slower, calmer app
 ```
 
+## Light, materials and elevation
+
+Every component draws its faces through `Surface`, and three theme sections decide what a face looks like. `light` is the theme's one light in screen space (`direction` [x right, y down, z into the screen], a `color`, and `ambient`, the fill on the shaded side): shadows fall along it, the sheen and the bevel run from its lit edge to the shaded one, and faces take on its color (a white light leaves every base color as it is). `material` assigns each role its layers: `surface` (Card, Item, the NavShell strips), `control` (a secondary Button, the fields, the Select trigger, the tracks and grooves, the Switch knob and the Slider thumb), `accent` (a primary or danger Button, Switch on, a checked Checkbox, the Radio dot, the Slider and ProgressBar fills, the SegmentedControl indicator, a Badge) and `overlay` (the Tooltip bubble, the Select dropdown, the ContextMenu menu, the sheets). A `Material` is `{ sheen?, bevel?, glass?, glow? }`: `sheen` (0..1) a fill gradient along the light, `bevel` (0..1) a one-pixel stroke from the light color to black, `glass` a frosted backdrop (`{ blur, tint? }`, a deliberate overlay, never a surface material: every glass face captures the pixels under it each frame), `glow` a halo (`{ radius, color? }`; without a color a part glows in its own fill, so a danger button glows red, and a fill with no color to take casts nothing; a pressable face widens it while hovered or pressed). `elevation` maps the four levels (`flat`, `raised`, `floating`, `overlay`) to heights: a face at height h casts a key shadow h px along the light and blurred 2.5 h px, plus a tight contact shadow; a press sinks the face (the key shadow fades toward the contact shadow) on the native shadow transition, and `shadow` (`{ color, strength }`) is what they are cast in.
+
+The stock presets are flat: every material `{}` and every height 0, so nothing casts or shines and the components look as they always have. `litDarkTheme` and `litLightTheme` are the same palette under the light: a sheen and a bevel per role, `raised` 2, `floating` 6, `overlay` 14, a light cap for the Switch knob and Slider thumb, and shadows 1.7 times stronger on dark, where they otherwise vanish. Card and Button stand raised by default (a ghost or disabled button flat), the Switch knob, the Slider thumb and the SegmentedControl indicator too; Item, Badge and the Checkbox sit flat whatever the theme, since a screen holds dozens of them and a blurred shadow per row is what a scrolling list cannot afford on a tablet or a TV (measured in the runtime's notes); popups float. Per component, `theme.components.<name>.material` merges layers over the role's, `.elevation` sets the level and `.glow` the halo alone, and an instance's `style` does the same over that.
+
+```jsx
+setTheme(litDarkTheme)                                                        // the lit look
+setTheme({ light: { ...theme.light, direction: [-0.4, 1, 0.8] } })            // light from the right
+setTheme({ material: { accent: { sheen: 1, bevel: 0.9, glow: { radius: 14 } } } })   // glowing accents
+setTheme({ components: { item: { elevation: "raised" } } })                   // raised rows, deliberately
+```
+
+## Window finish
+
+`finish` is the theme's window finish: a core window shader declaration (`program`, `params`, and the optional `textures`, `previous`, `vertexCount`) that `Window` declares on the window as it is, so one theme can carry a vignette, scanlines or a color grade. `Window` adds one uniform, `uScale`, the display scale, for effects counted in logical pixels. Strength and layer switches are the theme's own `params`; a theme without a `program` has no finish. An app with a slider updates a param by spreading the current ones, because `setTheme` merges one level deep and a partial replaces the whole `params` object it names: `setTheme({ finish: { params: { ...theme.finish.params, uStrength: v } } })`. The theme's module links the program itself, once, at init (the client brings the GPU up before the bundle runs); the package ships no finish, and the stock presets have none.
+
+```jsx
+import { compileShader, linkProgram, destroyShader, glsl } from "@solidrt/core/gpu"
+
+let fs = compileShader("fragment", glsl`...`, { header: true })   // reads uSource, uScale and its own params
+let vs = compileShader("vertex", glsl`...`)                        // the covering triangle
+let program = linkProgram(vs, fs, { label: "crt-finish" })
+destroyShader(vs); destroyShader(fs)
+
+export let crtTheme = defineTheme({ color: { /* ... */ }, finish: { program, params: { uStrength: 0.4, uScan: 1 } } })
+```
+
 ## Per-component overrides
 
-`theme.components` restyles a component everywhere without wrapping it: a `StyleProps` object per component name, merged between the component's themed defaults and each instance's `style` prop (instance style still wins).
+`theme.components` restyles a component everywhere without wrapping it: a `StyleProps` object per component name, merged between the component's themed defaults and each instance's `style` prop (instance style still wins). Every themed component draws the `borderColor`/`borderWidth` it is given (Item rows, the SegmentedControl, Badge, the Slider and ProgressBar grooves included), so one theme boxes the whole library; `material`, `elevation` and `glow` restyle its faces (see Light, materials and elevation).
 
 ```jsx
 setTheme({ components: { button: { borderRadius: 999 } } })   // pill buttons app-wide
 ```
 
-Keys: `button`, `card`, `badge`, `switch`, `checkbox`, `radio`, `item`, `select`, `segmentedControl`, `textInput`, `richTextEditor`, `tooltip`, `divider`, `progressBar`, `spinner`.
+Keys: `button`, `card`, `badge`, `switch`, `checkbox`, `radio`, `slider`, `item`, `select`, `segmentedControl`, `textInput`, `richTextEditor`, `tooltip`, `divider`, `progressBar`, `spinner`, `contextMenu`, `navShell`.
 
 ## Icon slots
 

package/docs/tooltip.md

@@ -1,6 +1,6 @@
 # Tooltip
 
-A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, and hides on leave and on press. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
+A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
 
 ```jsx
 import { Tooltip, Button } from "@solidrt/components"

package/docs/types.md

@@ -1,6 +1,6 @@
 # Layout and style
 
-Most components group their props into two objects, split by one rule: `layout` properties feed the layout engine (flexbox/grid, sizing, padding, margin, position - the core `LayoutProps` set) and changing them triggers a relayout; `style` properties are paint-only and never affect layout: `color`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, and the transform (`x`, `y`, `scale`, `rotate`, `rotateX`/`rotateY` with `perspective`, `originX`/`originY`, `clipRadius`). Event handlers (`onPointerDown`, `onKeyDown`, ...) are top-level props, never inside `layout` or `style`.
+Most components group their props into two objects, split by one rule: `layout` properties feed the layout engine (flexbox/grid, sizing, padding, margin, position - the core `LayoutProps` set) and changing them triggers a relayout; `style` properties are paint-only and never affect layout: `color`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, `glow` (a halo on the component's accent part; `null` clears the theme's), `material` (layers merged over the role's material for the component's faces) and `elevation` (the level its raised face stands at), see Theming, and the transform (`x`, `y`, `scale`, `rotate`, `rotateX`/`rotateY` with `perspective`, `originX`/`originY`, `clipRadius`). Event handlers (`onPointerDown`, `onKeyDown`, ...) are top-level props, never inside `layout` or `style`.
 
 `StyleProps` is that paint set. `TextLayoutProps` extends `LayoutProps` with the font fields (`fontFamily`, `fontSize`, `lineHeight`, `fontStyle`, `fontWeight`, `textAlign`, `maxLines`) because text shaping affects measurement; note `lineHeight` is a multiplier of `fontSize` (the theme uses 1.3-1.6), not a pixel value. `Option` (`{ value, label }`) is the shared shape of the single-choice controls (`Select`, `SegmentedControl`): shared shapes go through this module so components never import a sibling.
 

package/docs/window.md

@@ -13,3 +13,5 @@ function App() {
   )
 }
 ```
+
+The window takes the theme's finish (see Theming) whenever the theme has one; a theme without a finish declares no shader at all. `shader` is the window's own finish, a core window shader declaration forwarded as-is; set, it replaces the theme's, and `shader={null}` opts out of it. A window shader runs past the point snapshots read, so a finish is checked with `srt render`, not `get_snapshot`.

package/examples/lit.tsx

@@ -0,0 +1,182 @@
+// The lit presets: the same components under darkTheme, lightTheme,
+// litDarkTheme and litLightTheme, side by side with a light pad. Under the
+// lit presets every face is a role's material under theme.light - a sheen
+// along the light, a bevel on its edges, shadows cast from its elevation,
+// a press that sinks - and dragging the pad moves the light for the whole
+// screen at once (setTheme({ light })). The flat presets are the same
+// screen with every material empty and every height zero.
+import { render, createSignal, getLayoutBox } from "@solidrt/core"
+import type { PointerEvent } from "@solidrt/core"
+import {
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Item,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  SegmentedControl,
+  Select,
+  Slider,
+  Surface,
+  Switch,
+  Text,
+  TextInput,
+  View,
+  Window,
+  darkTheme,
+  lightTheme,
+  litDarkTheme,
+  litLightTheme,
+  lightFrom,
+  lightSource,
+  setTheme,
+  theme,
+} from "@solidrt/components"
+
+type Preset = "flat" | "lit"
+type Scheme = "dark" | "light"
+
+const PRESETS = [
+  { value: "flat" as const, label: "Flat" },
+  { value: "lit" as const, label: "Lit" },
+]
+const SCHEMES = [
+  { value: "dark" as const, label: "Dark" },
+  { value: "light" as const, label: "Light" },
+]
+const RANGES = [
+  { value: "day", label: "Day" },
+  { value: "week", label: "Week" },
+  { value: "month", label: "Month" },
+]
+// The light pad's size, and its marker.
+const PAD = 120
+const MARKER = 14
+
+function themeFor(preset: Preset, scheme: Scheme) {
+  if (preset === "lit") return scheme === "dark" ? litDarkTheme : litLightTheme
+  return scheme === "dark" ? darkTheme : lightTheme
+}
+
+// A pad showing where the light comes from; dragging over it moves the
+// light. The direction belongs to the app, so a preset switch keeps it.
+function LightPad() {
+  let node: { id: number } | undefined
+  let [dragging, setDragging] = createSignal(false)
+  let move = (e: PointerEvent) => {
+    if (!node) return
+    let box = getLayoutBox(node)
+    if (!box || box.width === 0) return
+    let px = (e.localX / box.width) * 2 - 1
+    let py = (e.localY / box.height) * 2 - 1
+    setTheme({ light: { ...theme.light, direction: lightFrom(px, py) } })
+  }
+  let marker = () => {
+    let [sx, sy] = lightSource(theme.light)
+    return { x: ((sx + 1) / 2) * PAD - MARKER / 2, y: ((sy + 1) / 2) * PAD - MARKER / 2 }
+  }
+  return (
+    <view
+      ref={(n: { id: number }) => (node = n)}
+      width={PAD}
+      height={PAD}
+      cursor="pointer"
+      onPointerDown={(e: PointerEvent) => {
+        setDragging(true)
+        move(e)
+      }}
+      onPointerMove={(e: PointerEvent) => dragging() && move(e)}
+      onPointerUp={() => setDragging(false)}
+    >
+      <Surface role="control" sunken radius={theme.radius.lg} />
+      <d-rect x={marker().x} y={marker().y} w={MARKER} h={MARKER} radius={MARKER / 2} color={theme.light.color} />
+    </view>
+  )
+}
+
+// The look, at module scope: the initial setTheme runs at load, outside any
+// component's owned scope (a theme write belongs to an event or to init,
+// never to a component's setup).
+let [preset, setPreset] = createSignal<Preset>("lit")
+let [scheme, setScheme] = createSignal<Scheme>("dark")
+function apply(p: Preset, s: Scheme) {
+  // The light's direction is the app's: carry it across the switch.
+  let direction = theme.light.direction
+  setTheme(themeFor(p, s))
+  setTheme({ light: { ...theme.light, direction } })
+}
+apply(preset(), scheme())
+
+function App() {
+  let [notify, setNotify] = createSignal(true)
+  let [volume, setVolume] = createSignal(62)
+  let [range, setRange] = createSignal("week")
+  let [query, setQuery] = createSignal("")
+
+  return (
+    <Window title="Lit components" style={{ backgroundColor: theme.color.background }} layout={{ padding: 24, gap: 24, flexDirection: "row", alignItems: "flex-start" }}>
+      <View layout={{ flexDirection: "column", gap: 16, width: 200 }}>
+        <SegmentedControl
+          options={PRESETS}
+          value={preset()}
+          onChange={(v) => {
+            setPreset(v)
+            apply(v, scheme())
+          }}
+        />
+        <SegmentedControl
+          options={SCHEMES}
+          value={scheme()}
+          onChange={(v) => {
+            setScheme(v)
+            apply(preset(), v)
+          }}
+        />
+        <Text variant="caption" style={{ color: theme.color.textMuted }}>
+          Drag to move the light
+        </Text>
+        <LightPad />
+      </View>
+      <Card title="Controls" lift layout={{ width: 360, gap: 16 }}>
+        <View layout={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
+          <Button>Run</Button>
+          <Button variant="secondary">Save</Button>
+          <Button variant="ghost">Cancel</Button>
+          <Button variant="danger">Delete</Button>
+          <Button disabled>Off</Button>
+        </View>
+        <View layout={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+          <Text>Notifications</Text>
+          <Switch value={notify()} onChange={setNotify} />
+        </View>
+        <View layout={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+          <Checkbox defaultChecked />
+          <Checkbox />
+          <RadioGroup defaultValue="a" layout={{ flexDirection: "row", gap: 12 }}>
+            <Radio value="a">Alpha</Radio>
+            <Radio value="b">Beta</Radio>
+          </RadioGroup>
+        </View>
+        <Slider value={volume()} onChange={setVolume} layout={{ width: "100%" }} />
+        <ProgressBar value={volume() / 100} />
+        <View layout={{ flexDirection: "row", gap: 8 }}>
+          <Badge>New</Badge>
+          <Badge variant="neutral">12</Badge>
+          <Badge variant="danger">Err</Badge>
+        </View>
+        <SegmentedControl options={RANGES} value={range()} onChange={setRange} />
+        <TextInput value={query()} onInput={setQuery} placeholder="Search" />
+        <Select options={RANGES} defaultValue="week" />
+      </Card>
+      <Card title="Inbox" layout={{ width: 320, gap: 0, padding: 8 }}>
+        <Item label="Compile" description="12 s" onPress={() => {}} />
+        <Item label="Link" description="1 s" onPress={() => {}} selected />
+        <Item label="Package" description="4 s" onPress={() => {}} />
+      </Card>
+    </Window>
+  )
+}
+
+render(() => <App />)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -21,6 +21,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.9",
-    "@solidrt/core": "0.0.63"
+    "@solidrt/core": "0.0.64"
   }
 }

package/src/badge.tsx

@@ -4,8 +4,9 @@ import { theme } from "./theme"
 import { space } from "./spacing"
 import { typeStyle, typeWeight, lightOnDark } from "./typography"
 import { policy } from "./policy"
-import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { Surface } from "./surface"
+import type { ElevationLevel, MaterialRole, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { colorFade } from "./motion"
 
 export type BadgeVariant = "primary" | "neutral" | "danger"
@@ -20,9 +21,12 @@ export interface BadgeProps extends TransitionProps {
   style?: StyleProps
 }
 
-// A small rounded pill for counts, labels, and status. Accent fill with
-// onPrimary text by default; override the fill via style.backgroundColor and the
-// label color via style.color.
+// A small rounded pill for counts, labels, and status. An accent face with
+// onPrimary text by default (the neutral variant is a surface tone), drawn
+// by Surface, flat: a badge sits in text and in list rows, so it casts
+// nothing unless style.elevation raises it. Override the fill via
+// style.backgroundColor, the label color via style.color, and box it with
+// borderColor/borderWidth.
 export function Badge(props: BadgeProps) {
   let colors = () => {
     let c = theme.color
@@ -35,11 +39,14 @@ export function Badge(props: BadgeProps) {
         return { bg: c.primary, fg: c.onPrimary }
     }
   }
+  let role = (): MaterialRole => ((props.variant ?? "primary") === "neutral" ? "surface" : "accent")
   // Theme-level per-component overrides merged under the instance style.
   let styled = () => ({ ...theme.components.badge, ...props.style })
   let bg = () => styled().backgroundColor ?? colors().bg
   let fg = () => styled().color ?? colors().fg
   let radius = () => styled().borderRadius ?? theme.radius.full
+  let elevation = (): ElevationLevel => styled().elevation ?? "flat"
+  let hasBorder = () => styled().borderWidth != null || styled().borderColor != null
   // 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)
@@ -66,7 +73,19 @@ export function Badge(props: BadgeProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
+      <Surface
+        role={role()}
+        elevation={elevation()}
+        fill={bg()}
+        radius={radius()}
+        material={styled().material}
+        glow={styled().glow}
+        outline={hasBorder() ? { color: styled().borderColor ?? theme.color.border, width: styled().borderWidth ?? theme.borderWidth.sm } : null}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
+      />
       <Show when={isText()} fallback={resolved()}>
         <text
           transition={colorFade()}

package/src/button.tsx

@@ -5,10 +5,11 @@ import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle, lightOnDark } from "./typography"
 import { Spinner } from "./spinner"
+import { Surface, surfaceSinks } from "./surface"
 import type { LayoutProps } from "@solidrt/core"
-import type { StyleProps, TransitionProps } from "./types"
+import type { ElevationLevel, MaterialRole, StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
-import { colorFade, scaleFeedback, pressScale, PressFeedback } from "./motion"
+import { colorFade, scaleFeedback, pressScale } from "./motion"
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"
 export type ButtonSize = "sm" | "md" | "lg"
@@ -42,15 +43,21 @@ export interface ButtonProps extends TransitionProps {
 // labels wider than the preset never clip.
 const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
 
-// A themed press target: a padded, centered, accent-colored box with a label.
-// Press feedback is a slight sprung scale plus the overlayPressed tint, hover
-// feedback the overlayHover tint (non-touch interaction policies only), all
-// reactive reads of the press state so no nodes are recreated. Override the
-// box via style and the padding/sizing via layout; because hover is an
-// overlay, it composes over a caller-set backgroundColor too. When disabled,
-// it takes no pointer events at all. Focus (spatial nav) draws a ring under
-// the focusRing policy in the theme's ring color; Enter/Space/remote-select
-// activates (handled by createPress).
+// A themed press target: a padded, centered box with a label, its face drawn
+// by Surface. The primary and danger variants are accent faces, secondary
+// and ghost control faces; a button stands raised (theme.elevation.raised,
+// zero under the stock presets) unless ghost or disabled, or style.elevation
+// says otherwise. Press feedback is the overlayPressed tint plus, on a face
+// with depth (a sheen, a bevel or a height), the face sinking - its key
+// shadow fading, its lit edge moving to the far side - and on a flat face a
+// slight sprung scale; hover feedback is the overlayHover tint (non-touch
+// interaction policies only), all reactive reads of the press state so no
+// nodes are recreated. Override the box via style and the padding/sizing
+// via layout; because hover is an overlay, it composes over a caller-set
+// backgroundColor too. When disabled, it takes no pointer events at all and
+// never glows. Focus (spatial nav) draws a ring under the focusRing policy
+// in the theme's ring color; Enter/Space/remote-select activates (handled
+// by createPress).
 export function Button(props: ButtonProps) {
   // Fill and label color per variant, read reactively from the theme. No
   // variant draws a border.
@@ -67,16 +74,19 @@ export function Button(props: ButtonProps) {
         return { fill: c.primary, label: c.onPrimary }
     }
   }
+  let variant = () => props.variant ?? "primary"
+  let role = (): MaterialRole => (variant() === "primary" || variant() === "danger" ? "accent" : "control")
   // Theme-level per-component overrides merged under the instance style.
   let styled = (): StyleProps => ({ ...theme.components.button, ...props.style })
   let idleFill = () =>
     props.disabled
-      ? props.variant === "ghost"
+      ? variant() === "ghost"
         ? "transparent"
         : theme.color.surface
       : colors().fill
   let bg = () => styled().backgroundColor ?? idleFill()
   let radius = () => styled().borderRadius ?? theme.radius.md
+  let elevation = (): ElevationLevel => styled().elevation ?? (props.disabled || variant() === "ghost" ? "flat" : "raised")
   let label = () => (props.disabled ? theme.color.textMuted : colors().label)
   // Resolved once via children(): reading the raw children getter builds a new
   // subtree per read, so the typeof probe and the two mount sites below must
@@ -85,11 +95,16 @@ export function Button(props: ButtonProps) {
   let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
   // The label's polarity against the idle fill: onPrimary on a saturated fill
   // is light-on-dark even in a light theme, so it needs the low-DPI weight
-  // compensation there too.
+  // compensation there too. The base fill, not the lit gradient: the
+  // compensation reads a solid color.
   let labelOnDark = () => lightOnDark(label(), bg())
 
   // props (not a literal) so a swapped-in onPress is read at event time.
   let press = createPress(props)
+  let pressed = () => !props.disabled && press.pressed()
+  let hovered = () => !props.disabled && press.hovered() && policy.interaction !== "touch"
+  // A face with depth sinks on press; a flat one shrinks instead.
+  let sinks = () => surfaceSinks(role(), elevation(), styled().material)
   let style = () => ({
     ...styled(),
     ...(press.focused() && policy.focusRing ? { borderWidth: theme.borderWidth.focus, borderColor: theme.color.ring } : {}),
@@ -98,7 +113,7 @@ export function Button(props: ButtonProps) {
     // Always a number: a scale that flips from a number back to undefined
     // hits the transform decoder, which rejects null. Multiply so a
     // caller-set scale is preserved under the press feedback.
-    scale: (styled().scale ?? 1) * pressScale(press.pressed()),
+    scale: (styled().scale ?? 1) * (sinks() ? 1 : pressScale(press.pressed())),
   })
 
   let split = () => splitTransition(props.transition)
@@ -135,11 +150,21 @@ export function Button(props: ButtonProps) {
       focusable={(props.focusable ?? true) && props.disabled !== true}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
-      <PressFeedback
-        pressed={press.pressed() && !props.disabled}
-        hovered={press.hovered() && !props.disabled && policy.interaction !== "touch"}
-        radius={style().borderRadius}
+      <Surface
+        role={role()}
+        elevation={elevation()}
+        fill={bg()}
+        radius={radius()}
+        material={styled().material}
+        glow={props.disabled ? null : styled().glow}
+        chrome={variant() !== "ghost" || pressed() || hovered()}
+        pressed={pressed()}
+        hovered={hovered()}
+        outline={(style().borderWidth ?? 0) > 0 ? { color: style().borderColor ?? "transparent", width: style().borderWidth! } : null}
+        fillTransition={split().background}
+        onFillTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+        outlineTransition={split().border}
+        onOutlineTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
       />
       <Show when={isText()} fallback={resolved()}>
         <text transition={colorFade()} color={press.pending() ? withAlpha(label(), 0) : label()} {...typeStyle("body", labelOnDark())}>
@@ -151,16 +176,6 @@ export function Button(props: ButtonProps) {
           <Spinner size={16} thickness={2} style={{ color: label() }} />
         </view>
       </Show>
-      <Show when={(style().borderWidth ?? 0) > 0}>
-        <d-rect
-          drawStyle="stroke"
-          transition={withTransitionDefaults(split().border, colorFade())}
-          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
-          color={style().borderColor ?? "transparent"}
-          strokeWidth={style().borderWidth}
-          radius={style().borderRadius}
-        />
-      </Show>
     </view>
   )
 }