@sigx/zero-daisyui 0.4.0 → 0.6.0

package/README.md

@@ -28,6 +28,25 @@ each is geometry that interpolates between states, so it rides the size ramp and
 animates. Under `forced-colors` and `print` the checkbox swaps to a `✔`/`−`
 glyph; the rating keeps its geometry, since no glyph can say "half".
 
+The slider is **rebuilt** with `appearance: none` (#26), like every other skin,
+instead of a stock native range behind `accent-color`: daisy's `range.css` track
+(half the thumb's height, `--radius-selector`) and its real thumb — a `base-100`
+knob in a `.25rem` ring of the fill ink, with the `--depth` shading. The whole
+widget rides daisy's `range-{xs…xl}` ramp through `--slider-thumb-size`
+(×4…×8 of `--size-selector`) and `--slider-track-size` (half of it), `md`
+included, and the composed range parts read the same two tokens. The elapsed
+fill is the progress bar's 90/10 deepened accent, painted from the
+runtime-published `--slider-percent`; `invalid` still turns fill and rings to
+`error` under every colour variant. Under `forced-colors` the native widget
+comes back.
+
+The switch knob is `currentColor` background plus shadows, which forced colours
+revalue to `Canvas` and drop. That left two identical empty pill outlines, on and
+off (#189). Under `forced-colors` the knob now opts out of forcing and paints
+`CanvasText` at rest and `Highlight` when checked, without the noise or the
+shadows. A disabled switch paints `GrayText`, the palette's own
+disabled ink. `e2e/switch-forced-colors.spec.ts` measures it in pixels.
+
 The palette is daisyUI **5.7.8**'s, role for role, in all five themes — checked
 against its shipped `themes.css` rather than transcribed. `light` and `dark` had
 drifted a major version behind (#231): among others, light's `primary` was
@@ -35,6 +54,17 @@ drifted a major version behind (#231): among others, light's `primary` was
 and dark's `primary-content` was a *dark* ink where 5.7.8 pairs a light one.
 `dim`, `nord` and `sunset` were already exact.
 
+Three content-role values are the exception, in `light` and `dark` only (#34):
+two roles across the two themes. daisy ships `secondary-content` at **3.05:1**
+on `secondary` in both themes, and dark `primary-content` at **4.14:1** on
+`primary` — below AA for the label text each pair exists to carry, and the
+kit's validator warned for them on every build.
+Each now takes the lightness the validator suggests, keeping daisy's hue:
+`secondary-content` is a dark ink, `oklch(24.2% 0.028 342.258)`, and dark
+`primary-content` a near-white `oklch(98.9% 0.005 272.314)` (chroma drops to
+what stays in gamut that close to white). `dim`, `nord` and `sunset` clear AA
+as shipped.
+
 The checkbox's print fallback names `--print-ink` where real daisy names no ink
 at all — its glyph inherits `--color-primary-content` and prints at 1.37:1, a
 pale lavender on white paper (#233). Fidelity to a mark nobody can see is not
@@ -53,7 +83,8 @@ daisy's 20% reads 1.44:1 on `nord`, a raw-role `neutral` ghost button 1.22:1 in
 every dark theme, and 5.7.8's own lighter `error` 2.87:1 as message text on
 white — and 3:1 is the floor a mark owes the reader. The ratios and their
 per-theme measurements are recorded at each declaration in `src/recipes.ts`;
-every other value in this package is daisy's.
+every other value in this package is daisy's, bar the three content-role values
+above.
 
 `select`, `combobox` and `number-input` share one field metric — the same
 `--size-field` height ramp, inset and `--shadow-xs` lift — so two controls in a
@@ -83,6 +114,12 @@ orthogonal: it inks the active tab — `border`'s underline follows via
 `currentColor` — while `box` fills the active pill with the role and flips
 its label to the `-content` pair, as daisy's own box examples do.
 
+The tabs list scrolls inside its own box when it is wider than its column
+(#45), as Pagination and Stats do. It is padded by `--tabs-ring-room` (4px,
+the focus ring's 2px plus its 2px offset), with matching scroll padding, so
+the ring is never clipped. The `box` flavor's own `space-xs` padding is the
+same 4px.
+
 The package declares an **api** (the `defineApi` layer, see
 `docs/architecture.md` §3.6), so beside `/register` it ships a generated
 `./components` module — the daisy-native, single-import, fully-typed surface:
@@ -93,6 +130,11 @@ import { Button } from '@sigx/zero-daisyui/components';
 <Button wide loading variant="dash" color="primary">Save</Button>
 ```
 
+It is the one published `./components` module, so `pnpm verify:pack` proves
+it from the packed tarball: a scratch app typechecks daisy-native props
+against the emitted d.ts (with a `@ts-expect-error` probe on a colour daisy
+does not have), and Node loads the module through its `import` export.
+
 Migrating from the old `@sigx/daisyui` package, prop by prop:
 
 | old `@sigx/daisyui` Button | `@sigx/zero-daisyui/components` Button |
@@ -155,6 +197,24 @@ every tint in the light theme leaned red — warning's came out pink.
 
 On `./components`, `Steps.Item` takes the same `color` union as the Root.
 
+## Per-stat colour
+
+`<Stats.Item color="warning">` colours one figure's value while the Root's
+`color` paints the rest of the row (#161). The item re-carries the colour
+axis, so the recipe keys `--stats-accent` on `item`; a root colour reaches
+every item exactly as before.
+
+Measuring every role on a stat's value for the first time found the raw
+role unreadable as ink in 13 cells: the light theme's `accent`, `info`,
+`success`, `warning` and `error` (1.8–2.9:1), nord's muted roles
+(1.4–2.5:1) and the dark themes' `neutral`, which is darker than the page
+(1.1–1.3:1). The value now takes `roleInk`, the per-role share of the role
+over `base-content` that field and button text already use. Every cell
+clears 3:1 (worst 3.32:1, dim `neutral`); the value is large text, and 12
+cells sit in the 3–4.5:1 band the audit reports as an AA warning.
+
+On `./components`, `Stats.Item` takes the same `color` union as the Root.
+
 ## Deriving from this skin: the public hooks
 
 A product skin built on this one with `extendDesignSystem` (from