@sigx/zero-daisyui 0.2.0-beta.6 → 0.3.0-beta.1

package/README.md

@@ -19,6 +19,10 @@ custom properties, because daisy's controls read them directly: `--depth`
 `--depth-sheen`; and `--noise` with daisy's fractal tile in `--fx-noise`.
 Override `--depth: 0` on a subtree to flatten it.
 
+The modal drawer sheet **slides** in from its edge and back out, the way daisy's
+`drawer-side` does (`translate` over 0.3s), instead of fading (#83). The travel
+flips with the placement and with `dir="rtl"`, and reduced motion drops it.
+
 The checkbox tick, the radio dot and the rating fill are **drawn**, not typeset:
 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 `✔`/`−`
@@ -63,10 +67,11 @@ components, different look, zero component-code changes.
 Button carries daisy 5's full style vocabulary — `variant` takes `solid`,
 `outline`, `soft`, `ghost`, `dash` (`btn-dash`) and `link` (`btn-link`),
 orthogonal to the eight-role `color` axis, exactly as daisy's own CSS composes
-`btn-outline` **with** `btn-primary` — plus the six documented `btn-*`
-modifiers as presence-only `data-mod-*`: `wide`, `block`, `square`, `circle`,
-`active`, and `loading`, whose spinner the recipe draws in `currentColor`
-(daisy renders it as a `loading loading-spinner` span; zero changes no DOM).
+`btn-outline` **with** `btn-primary` — plus five documented `btn-*`
+modifiers as presence-only `data-mod-*`: `wide`, `block`, `square`, `circle`
+and `active`. `loading` is zero's own Button prop (a state, with `aria-busy`
+and a blocked press), and the recipe draws its `spinner` part in
+`currentColor`: that part is daisy's `loading loading-spinner` span.
 daisy 4's `glass` is not carried: daisyUI 5 no longer documents it on any
 component, and the old library never exposed it either.
 
@@ -98,12 +103,80 @@ Migrating from the old `@sigx/daisyui` package, prop by prop:
 | `outline` / `soft` / `dash` (booleans) | `variant="outline"` / `"soft"` / `"dash"` |
 | `wide`, `block`, `square`, `circle`, `active`, `loading` | same names, same booleans |
 | `size="xs"` … `size="xl"` | unchanged |
-| `loading` also disabling the button | pass `disabled` yourself — loading is paint, not behaviour |
+| `loading` also disabling the button | built in: `loading` blocks the press and sets `aria-busy`, and keeps focus |
 
 The old fused `ButtonVariant` union (colours + `ghost` + `link` in one prop)
 was a modeling artifact, not daisy's real shape — daisy's CSS composes a style
 class with a colour class, and so does this package.
 
+## Countdown in a sentence, and one-sided timelines
+
+`<Countdown.Root mods={{ inline: true }}>` sets a countdown inside running
+text: it takes the sentence's size and weight instead of the display
+step, and keeps its tabular digits, its ink and the per-tick entry (#57). A
+Timeline whose content never sits on the start side collapses the start track
+on its own — a `:has()` rule on the root, no prop — so the events sit against
+the axis instead of past an empty half of each item.
+
+On `./components` the modifier is a boolean prop like the `btn-*` set:
+`<Countdown inline>`. daisy's own `.countdown` sets no display size at all,
+so `inline` is also the daisy-faithful look.
+
+## Per-entry timeline colour
+
+`<Timeline.Marker color="error">` colours one entry's dot while the Root's
+`color` paints the rest (#94) — the marker re-carries the colour axis. A
+coloured dot is the role's fill inside a ring in the role's `-content` ink:
+a light role on a light page, or a dark one on a dark page, has no edge of
+its own, while one half of the role's pair clears 3:1 against the page —
+which the contrast audit now measures for every colour and theme. An
+uncoloured marker is the same solid dot as before, and under forced colours
+the ring still draws the whole dot.
+
+On `./components`, `Timeline.Marker` takes the same `color` union as the
+Root.
+
+## Per-step colour
+
+`<Steps.Item color="error">` colours one step — its disc, the bridge toward
+the next step and its title — while the Root's `color` paints the rest of the
+rail (#112), daisy's `step-error` on one `step`. The item re-carries the
+colour axis, so the recipe keys its colour on `item`; a root colour reaches
+every step exactly as before.
+
+Measuring every role on a step for the first time found the complete disc's
+digit unreadable in six cells: nord's muted `accent`, `success` and `warning`
+(2.2–2.6:1) and the dark themes' `neutral`, which is darker than the page
+(1.7–2.0:1). The digit now keeps the same share of each role's hue as
+`roleInk` does, capped at the 70% primary always had, so the default digit is
+unchanged. The disc's tint also mixes in OKLAB now: the light theme's
+`oklch(100% 0 0)` page has a 0 hue that an OKLCH mix interpolates toward, so
+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.
+
+## Deriving from this skin: the public hooks
+
+A product skin built on this one with `extendDesignSystem` (from
+`@sigx/zero-kit/define`) may rely on the names each recipe declares as
+`hooks` (#73) — `dist/manifest.json` lists them per scope under
+`components[scope].hooks`. Today that is the component-level colour and
+metric properties of button (`--btn-accent`, `--btn-on-accent`, `--btn-soft`,
+`--btn-ink`), switch (`--switch-size`, `--switch-accent`, `--switch-ink`),
+badge, table, card, timeline, toggle-group, skeleton and collapsible; the
+dialog popup's `zero-daisy-pop` keyframe; and the collapsible trigger's
+`::after` chevron. Anything else a patch reaches — `--switch-p`, the spinner
+keyframes, the menu's checkmark `::after` — is private and may change in any
+release; `validateDesignSystem` warns when a patch touches one.
+
+## Avatar shape
+
+`<Avatar.Root axes={{ shape: 'square' }}>` picks `circle`, `square` or
+`rounded` (#129) — a custom axis this design system declares in
+`tokens.axes` and wires on avatar alone, so the `/register` module types
+`axes.shape` there and nowhere else. One declaration on the root, whose
+`overflow: hidden` clips the image and the initials alike. `rounded` is daisy's selector radius; unset, the avatar is the circle it always was.
+
 ## Writing direction
 
 Every direction-bearing rule is spelled logically, so the whole skin mirrors