@exsto/ds 0.0.1-rc.23 → 0.0.1-rc.24

package/README.md

@@ -164,6 +164,36 @@ import { TimeField } from '@exsto/ds/time-field';
 <TimeField aria-label="Start time" value={time} onValueChange={setTime} />;
 ```
 
+## Date and time
+
+`DateTime` is a date and a time of day side by side, with the value of one `<input type="datetime-local">`: `yyyy-mm-ddTHH:mm` (`:ss` with `granularity="second"`), local time and no zone, a string on purpose for the reason the DatePicker gives. It is the DatePicker and the TimeField together, on its own entry.
+
+```tsx
+import { DateTime } from '@exsto/ds/date-time';
+
+<DateTime
+  aria-label="Go live"
+  value={moment}
+  onValueChange={(next, state) => setMoment(next)}
+  min="2026-03-10T09:00"
+  max="2026-03-12T17:30"
+/>;
+```
+
+`onValueChange(value, state)` gets `undefined` as the value until both parts are in, and the parts keep what was entered meanwhile. `state.kind` says which case it was: `datetime` (both usable), `empty`, `incomplete` (`missing` is `'date'` or `'time'`), `refused` (the date text is not a day; `text` and `problem` are the DatePicker's) or `out-of-range` (both parts are in and `min`, `max` or `disabledDates` refuse the day or the time; the value is reported and the field is marked invalid). A time in `min` or `max` holds on that limit's own day only. `name` submits the moment with a form, and nothing while a part is missing; `id` goes to the date part for a Label's `htmlFor`.
+
+## Colour
+
+`ColorField` is a colour typed as hex or picked from a palette, so an app does not fall back to `<input type="color">`, whose chooser is the browser's own. A trigger with a swatch and the colour opens a popup with a palette and a hex field. The value is `#rrggbb` (lower case, as the native input writes it), or `undefined` for none. It has an entry of its own.
+
+```tsx
+import { ColorField } from '@exsto/ds/color-field';
+
+<ColorField aria-label="Label colour" value={colour} onValueChange={setColour} />;
+```
+
+In the palette the arrow keys move between swatches (up and down by a row), Home and End go to the ends, and Enter or Space chooses one, closes the popup and gives the focus back to the trigger. In the hex field `#rgb` and `rgb` are read as `#rrggbb`, Enter chooses the colour, leaving the field chooses it too, and text that is not a colour marks the field invalid with a message under it and is not reported. `palette` takes hex strings or `{ value, label }` (Tailwind's hues by default), `name` submits the colour with a form, `id` goes to the trigger for a Label's `htmlFor`, and `labels` translates the words.
+
 ## Files
 
 `FileInput` chooses files by picking or dropping them. A real `<input type="file">` lies under the drop area, so Tab, Enter and Space, the system's file dialog, a drop and a screen reader's name come from the browser; on top of that it lists the chosen files with their sizes and a remove button named after each, checks them against `accept`, `maxSize` and `maxFiles` (a drop skips the dialog's own filter), and says in one live region what was added, removed or refused. It is on its own entry, like the DatePicker.
@@ -190,6 +220,20 @@ import { cn, POPUP_FRAME_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS,
 - `POPUP_GROUP_LABEL_CLASS` is a group's heading. `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection` and `ComboboxSeparator` give a Combobox its groups, drawn the same way Select draws its own.
 - `POPUP_FRAME_CLASS` is the frame (a 10px radius and a 1px ring, no border). `POPUP_LIST_WIDTH_CLASS` is its width: at least the control and 8rem, as wide as the longest row, 28rem at most. `POPUP_LIST_HEIGHT_CLASS` caps the scrolling part: eight rows, or as many whole rows as the room allows, so a list never ends on half a row. Put it on a `ScrollArea` inside a popup that is a flex column with `max-h-(--available-height)`; the class carries the 4px of air above and below the rows as a margin, so the list inside takes `px-1` and no vertical padding (padding there scrolls with the rows and leaves a strip of the next row at the foot). `POPUP_LAYER_CLASS` (`z-60`) goes on the popup's positioner, so it is drawn above the Sheet, Dialog or Drawer (`z-50`) it is opened from.
 
+## Changes in 0.0.1-rc.24
+
+Two new fields, a Checkbox that is a 24px target, a TimeField that no longer clips its placeholder, and a size guard that counts what a consumer ships.
+
+- **Breaking, if you style a Checkbox through `className`: its border, fill and ring now belong to the box drawn inside it.** The Checkbox is a 24px target (WCAG 2.2 AA 2.5.8; axe's target-size rule flagged every row of checkboxes) with the same 16px box drawn inside it by a `::before`, 4px in from each edge, and a `-4px` margin gives the room back, so nothing around a checkbox moves (31 of them in the harness and the demo, with their rows and table cells, measured before and after). The look is unchanged, the focus ring included (on the border of the 16px box, outer edge 18px; 16px in a Table's scrolling box). A `className` with `border-*`, `bg-*` or `ring-*` on a Checkbox now styles the 24px root, not the box you see: write `before:border-*`, `before:bg-*`, `data-checked:before:bg-*` and so on. We found no such use in Atlas, react-boilerplate, the OCR admin, api-explorer or Menu Pricing. A test that measures `[role="checkbox"]` now reads a 24px box that starts 4px earlier on every side; the drawn box is its `::before` (4px in, 16px).
+- **`DateTime` (`@exsto/ds/date-time`): a date and a time of day side by side, with the value of one `<input type="datetime-local">`.** A DatePicker and a TimeField in one fieldset; the value is `yyyy-mm-ddTHH:mm` (`:ss` with `granularity="second"`), `undefined` until both parts are in, and the parts keep what was entered meanwhile. `onValueChange(value, state)` says which case it was (`datetime`, `empty`, `incomplete` with `missing`, `refused`, `out-of-range`); a time in `min` or `max` holds on that limit's own day; `name` submits it with a form. See "Date and time".
+- **`ColorField` (`@exsto/ds/color-field`): a colour typed as hex or picked from a palette, so an app does not fall back to `<input type="color">`.** A trigger with the Input's height, radius and focus, a swatch and the hex, and a popup with a named palette (Tailwind's hues, or yours), the arrow keys, Home, End, Enter and Escape, and a hex field that reads `#rgb` and `#rrggbb`. The check on a swatch reaches 3:1 against it on every colour. The value is `#rrggbb` in lower case, or `undefined`. See "Colour".
+- **A TimeField keeps its clock at the end, like a DatePicker's calendar, and its segments fit their placeholders.** The segments were 20px and "MM" is about 23px, so an empty field clipped it. The minute, seconds and period boxes are 28px, the hour's is 24px with its text at the start, so the first glyph begins 11px in, as a date's does; the clock is 8px from the field's end and 13px after the text. A time field is 108px wide with minutes (it was 82px): a field that gave it `w-*` or sat in a tight row may need room.
+- **A SidebarMenuAction is a 24px target** (it was 20px, and every page with a collapsible menu group failed axe's target-size rule). Only the hit area grew: the hover fill, its radius, the icon and the focus ring are the 20px ones they were, measured at 0px difference in a default, small and large row.
+- **The popups of the DatePicker, the DateRangePicker, the MultiSelect and the rich text editor's link button are dialogs with a name** (axe's aria-dialog-name): the label of the control that opened them ("Choose date", the picker's `aria-label` or placeholder, the MultiSelect's `aria-label` or `aria-labelledby`, or its placeholder).
+- **A Command list shows eight whole rows at most**, like every other popup list (it was capped at `max-h-72`, so a ninth row was cut at the foot). A `max-h-*` you pass still replaces the cap.
+- **An AnimatedNumber with reduced motion paints its value from the first frame, never 0.** It began at 0 and landed a frame or two later, once it had been seen (counts showed 0 for about 34ms); now nothing waits and nothing moves, and a changed value is followed at once. Without reduced motion it counts up from 0 as before.
+- **The size guard counts what a consumer ships.** `verify:ds` used to add up the modules of the main entry as written, comments included (299,839 bytes against a budget of 300,000); it now minifies each module, as a consumer's bundler does, and counts that: 203,327 bytes against a budget of 223,700, and the lean page (Button and Table) at 58,435 against 64,300. Each budget is the measured value plus 10%. Nothing changes for a consumer; the method and the order of answers when a budget fails are in `docs/architecture.md`, "How the size is held".
+
 ## Changes in 0.0.1-rc.23
 
 - **A TabsList keeps the chosen tab clear of its edge fade when the row changes size after load** (a font swapping in, data arriving). The scroll that reveals the chosen tab now repeats on a change of size until the reader scrolls, presses a key or touches; before, a chosen last tab could end 2px inside the edge with the fade covering most of it.

package/dist/color-field.js

@@ -0,0 +1,3 @@
+import { DEFAULT_COLOR_PALETTE } from "./ui/src/components/edyn/color-field/color-value.js";
+import { ColorField, DEFAULT_COLOR_FIELD_LABELS } from "./ui/src/components/edyn/color-field/color-field.js";
+export { ColorField, DEFAULT_COLOR_FIELD_LABELS, DEFAULT_COLOR_PALETTE };

package/dist/date-time.js

@@ -0,0 +1,2 @@
+import { DEFAULT_DATE_TIME_LABELS, DateTime } from "./ui/src/components/edyn/date-time/date-time.js";
+export { DEFAULT_DATE_TIME_LABELS, DateTime };

package/dist/ds/src/color-field.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `@exsto/ds/color-field` - the ColorField, on its own entry on purpose.
+ *
+ * A colour typed as hex or picked from a palette: a trigger with a swatch, and a popup with the palette (a listbox with the arrow
+ * keys) and a hex field with its parsing and messages. It exists so that an app does not fall back to `<input type="color">`, whose
+ * chooser is the browser's own. Re-exported from `@exsto/ds` it would be one more thing in the entry every consumer loads; here an app
+ * pays for it only on the pages that import this path.
+ */
+export * from '../../ui/src/components/edyn/color-field';

package/dist/ds/src/date-time.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `@exsto/ds/date-time` - the DateTime, on its own entry on purpose.
+ *
+ * A date and a time of day typed and picked side by side, with the value of one `<input type="datetime-local">`. It is the
+ * DatePicker and the TimeField together (about 24 KB unminified between them), so like them it is not one more thing in the entry
+ * every consumer loads. Here an app pays for it only on the pages that import this path.
+ */
+export * from '../../ui/src/components/edyn/date-time';

package/dist/source-hash.txt

@@ -1 +1 @@
-237f9a6de1d109e6a11bc94cd65028316f93bb0be9dac50c29fd7b50604c39e5
+5d0829a6bc53b1c43d673da833ada3b9b9e437dff1ec88f7ffb5abe6740a13a2

package/dist/styles.css

@@ -121,6 +121,8 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-300: oklch(80.8% .114 19.571);
+    --color-black: #000;
+    --color-white: #fff;
     --spacing: .25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -545,8 +547,8 @@
     top: calc(var(--spacing) * .5);
   }
 
-  .top-1\.5 {
-    top: calc(var(--spacing) * 1.5);
+  .top-1 {
+    top: var(--spacing);
   }
 
   .top-1\/2 {
@@ -743,6 +745,10 @@
     }
   }
 
+  .-m-1 {
+    margin: calc(var(--spacing) * -1);
+  }
+
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -767,6 +773,10 @@
     margin-inline: auto;
   }
 
+  .my-0 {
+    margin-block: 0;
+  }
+
   .my-0\.5 {
     margin-block: calc(var(--spacing) * .5);
   }
@@ -1228,6 +1238,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -1240,6 +1254,14 @@
     width: calc(var(--spacing) * 24);
   }
 
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
+
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
@@ -1631,6 +1653,10 @@
     grid-template-columns: minmax(0, 1fr) auto auto;
   }
 
+  .grid-cols-\[repeat\(6\,1\.5rem\)\] {
+    grid-template-columns: repeat(6, 1.5rem);
+  }
+
   .grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
@@ -1741,6 +1767,10 @@
     margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
+
   .self-center {
     align-self: center;
   }
@@ -1847,6 +1877,14 @@
     border-radius: calc(var(--radius) - 3px);
   }
 
+  .rounded-\[calc\(var\(--radius-md\)\+2px\)\] {
+    border-radius: calc(var(--radius-md) + 2px);
+  }
+
+  .rounded-\[calc\(var\(--radius-sm\)\+4px\)\] {
+    border-radius: calc(var(--radius-sm) + 4px);
+  }
+
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -2218,6 +2256,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .bg-clip-content {
+    background-clip: content-box;
+  }
+
   .bg-clip-padding {
     background-clip: padding-box;
   }
@@ -2238,6 +2280,10 @@
     padding: 0;
   }
 
+  .p-0\.5 {
+    padding: calc(var(--spacing) * .5);
+  }
+
   .p-1 {
     padding: var(--spacing);
   }
@@ -2358,10 +2404,18 @@
     padding-right: var(--spacing);
   }
 
+  .pr-1\.75 {
+    padding-right: calc(var(--spacing) * 1.75);
+  }
+
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
 
+  .pr-3\.25 {
+    padding-right: calc(var(--spacing) * 3.25);
+  }
+
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2543,6 +2597,10 @@
     color: var(--background);
   }
 
+  .text-black {
+    color: var(--color-black);
+  }
+
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -2621,6 +2679,10 @@
     color: var(--warning);
   }
 
+  .text-white {
+    color: var(--color-white);
+  }
+
   .italic {
     font-style: italic;
   }
@@ -3574,14 +3636,26 @@
     opacity: .5;
   }
 
+  .peer-data-\[size\=default\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
+    top: var(--spacing);
+  }
+
   .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
     top: calc(var(--spacing) * 1.5);
   }
 
+  .peer-data-\[size\=lg\]\/menu-button\:top-2:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
+    top: calc(var(--spacing) * 2);
+  }
+
   .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
     top: calc(var(--spacing) * 2.5);
   }
 
+  .peer-data-\[size\=sm\]\/menu-button\:top-0\.5:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
+    top: calc(var(--spacing) * .5);
+  }
+
   .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
     top: var(--spacing);
   }
@@ -3649,6 +3723,16 @@
     color: var(--muted-foreground);
   }
 
+  .before\:absolute:before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+
+  .before\:inset-1:before {
+    content: var(--tw-content);
+    inset: var(--spacing);
+  }
+
   .before\:mr-1:before {
     content: var(--tw-content);
     margin-right: var(--spacing);
@@ -3669,16 +3753,44 @@
     flex: 1;
   }
 
+  .before\:rounded-sm:before {
+    content: var(--tw-content);
+    border-radius: calc(var(--radius) * .6);
+  }
+
+  .before\:border:before {
+    content: var(--tw-content);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .before\:border-control:before {
+    content: var(--tw-content);
+    border-color: var(--control-border);
+  }
+
   .before\:bg-border:before {
     content: var(--tw-content);
     background-color: var(--border);
   }
 
+  .before\:transition-colors:before {
+    content: var(--tw-content);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .after\:absolute:after {
     content: var(--tw-content);
     position: absolute;
   }
 
+  .after\:-inset-1\.5:after {
+    content: var(--tw-content);
+    inset: calc(var(--spacing) * -1.5);
+  }
+
   .after\:-inset-2:after {
     content: var(--tw-content);
     inset: calc(var(--spacing) * -2);
@@ -3689,6 +3801,11 @@
     inset: 0;
   }
 
+  .after\:-inset-x-2:after {
+    content: var(--tw-content);
+    inset-inline: calc(var(--spacing) * -2);
+  }
+
   .after\:-inset-x-3:after {
     content: var(--tw-content);
     inset-inline: calc(var(--spacing) * -3);
@@ -3699,6 +3816,11 @@
     inset-inline: calc(var(--spacing) * .5);
   }
 
+  .after\:-inset-y-1:after {
+    content: var(--tw-content);
+    inset-block: calc(var(--spacing) * -1);
+  }
+
   .after\:-inset-y-2:after {
     content: var(--tw-content);
     inset-block: calc(var(--spacing) * -2);
@@ -4640,7 +4762,30 @@
     }
   }
 
-  .aria-invalid\:aria-checked\:border-primary[aria-invalid="true"][aria-checked="true"] {
+  .aria-invalid\:before\:border-destructive[aria-invalid="true"]:before {
+    content: var(--tw-content);
+    border-color: var(--destructive);
+  }
+
+  .aria-invalid\:before\:ring-3[aria-invalid="true"]:before {
+    content: var(--tw-content);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .aria-invalid\:before\:ring-destructive\/20[aria-invalid="true"]:before {
+    content: var(--tw-content);
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-invalid\:before\:ring-destructive\/20[aria-invalid="true"]:before {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .aria-invalid\:aria-checked\:before\:border-primary[aria-invalid="true"][aria-checked="true"]:before {
+    content: var(--tw-content);
     border-color: var(--primary);
   }
 
@@ -5981,6 +6126,17 @@
     background-color: var(--primary);
   }
 
+  .dark\:before\:bg-input\/30:is(.dark *):before {
+    content: var(--tw-content);
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:before\:bg-input\/30:is(.dark *):before {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
   .dark\:after\:mix-blend-lighten:is(.dark *):after {
     content: var(--tw-content);
     mix-blend-mode: lighten;
@@ -6118,6 +6274,28 @@
     }
   }
 
+  .dark\:aria-invalid\:before\:border-destructive\/50:is(.dark *)[aria-invalid="true"]:before {
+    content: var(--tw-content);
+    border-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:aria-invalid\:before\:border-destructive\/50:is(.dark *)[aria-invalid="true"]:before {
+      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    }
+  }
+
+  .dark\:aria-invalid\:before\:ring-destructive\/40:is(.dark *)[aria-invalid="true"]:before {
+    content: var(--tw-content);
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:aria-invalid\:before\:ring-destructive\/40:is(.dark *)[aria-invalid="true"]:before {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
   .dark\:data-invalid\:ring-destructive\/40:is(.dark *)[data-invalid] {
     --tw-ring-color: var(--destructive);
   }
@@ -6304,7 +6482,7 @@
     --tw-exit-scale: .95;
   }
 
-  .data-checked\:border-primary:where([data-state="checked"]), .data-checked\:border-primary:where([data-checked]:not([data-checked="false"])), .data-checked\:border-primary\/40:where([data-state="checked"]), .data-checked\:border-primary\/40:where([data-checked]:not([data-checked="false"])) {
+  .data-checked\:border-primary\/40:where([data-state="checked"]), .data-checked\:border-primary\/40:where([data-checked]:not([data-checked="false"])) {
     border-color: var(--primary);
   }
 
@@ -6336,18 +6514,29 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .dark\:data-checked\:bg-muted:is(.dark *):where([data-state="checked"]), .dark\:data-checked\:bg-muted:is(.dark *):where([data-checked]:not([data-checked="false"])) {
-    background-color: var(--muted);
+  :is(.data-checked\:before\:border-primary:where([data-state="checked"]), .data-checked\:before\:border-primary:where([data-checked]:not([data-checked="false"]))):before {
+    content: var(--tw-content);
+    border-color: var(--primary);
   }
 
-  .dark\:data-checked\:bg-primary:is(.dark *):where([data-state="checked"]), .dark\:data-checked\:bg-primary:is(.dark *):where([data-checked]:not([data-checked="false"])) {
+  :is(.data-checked\:before\:bg-primary:where([data-state="checked"]), .data-checked\:before\:bg-primary:where([data-checked]:not([data-checked="false"]))):before {
+    content: var(--tw-content);
     background-color: var(--primary);
   }
 
+  .dark\:data-checked\:bg-muted:is(.dark *):where([data-state="checked"]), .dark\:data-checked\:bg-muted:is(.dark *):where([data-checked]:not([data-checked="false"])) {
+    background-color: var(--muted);
+  }
+
   .dark\:data-checked\:bg-primary-foreground:is(.dark *):where([data-state="checked"]), .dark\:data-checked\:bg-primary-foreground:is(.dark *):where([data-checked]:not([data-checked="false"])) {
     background-color: var(--primary-foreground);
   }
 
+  :is(.dark\:data-checked\:before\:bg-primary:is(.dark *):where([data-state="checked"]), .dark\:data-checked\:before\:bg-primary:is(.dark *):where([data-checked]:not([data-checked="false"]))):before {
+    content: var(--tw-content);
+    background-color: var(--primary);
+  }
+
   .data-unchecked\:bg-input:where([data-state="unchecked"]), .data-unchecked\:bg-input:where([data-unchecked]:not([data-unchecked="false"])) {
     background-color: var(--input);
   }
@@ -7748,6 +7937,26 @@
   outline-offset: -2px;
 }
 
+[data-slot="checkbox"] {
+  outline-offset: -5px;
+}
+
+[data-focus="inset"] [data-slot="checkbox"] {
+  outline-offset: -6px;
+}
+
+[data-slot="sidebar-menu-action"] {
+  outline-offset: 0;
+}
+
+[data-focus="inset"] [data-slot="sidebar-menu-action"] {
+  outline-offset: -4px;
+}
+
+[data-slot="checkbox"]:focus-visible:before {
+  --tw-ring-shadow: 0 0 #0000;
+}
+
 :root {
   --motion-expand: .2s;
   --motion-collapse: .16s;

package/dist/ui/src/components/edyn/animated-number/animated-number.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region ../ui/src/components/edyn/animated-number/animated-number.tsx
 var DURATION = 800;
 var easeInOutCubic = (t) => t < .5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
-var reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var reducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var NUMBER = new Intl.NumberFormat("en-GB");
 /** Thousands separated, rounded to a whole number: the default way a count reads. */
 var formatCount = (value) => NUMBER.format(Math.round(value) || 0);
@@ -30,15 +30,16 @@ var useSeen = (element) => {
 */
 var useAnimatedValues = (targets, element) => {
 	const seen = useSeen(element);
-	const [shown, setShown] = useState(() => targets.map(() => 0));
+	const [shown, setShown] = useState(() => reducedMotion() ? [...targets] : targets.map(() => 0));
 	const refCurrent = useRef(shown);
 	const key = targets.join(",");
 	useEffect(() => {
-		if (!seen) return;
+		const reduced = reducedMotion();
+		if (!seen && !reduced) return;
 		const goal = key.split(",").map(Number);
 		const from = goal.map((_, index) => refCurrent.current[index] ?? 0);
 		if (from.every((value, index) => value === goal[index])) return;
-		if (reducedMotion()) {
+		if (reduced) {
 			refCurrent.current = goal;
 			setShown(goal);
 			return;

package/dist/ui/src/components/edyn/animated-number/animated-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"animated-number.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/animated-number/animated-number.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type RefObject, useEffect, useRef, useState } from 'react';\n\n// Numbers that move instead of jumping when a tab or a filter changes them: from the\n// value shown to the new one over 800ms, easing in and out; the first time, from 0\n// once it scrolls into view. Interrupted by another change, it carries on from where\n// it is, never back. With reduced motion, or when the value has not changed (a refetch\n// with the same answer), nothing moves.\n\nconst DURATION = 800;\n\nconst easeInOutCubic = (t: number): number => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);\n\nconst reducedMotion = (): boolean => window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst NUMBER = new Intl.NumberFormat('en-GB');\n\n/** Thousands separated, rounded to a whole number: the default way a count reads. */\nexport const formatCount = (value: number): string => NUMBER.format(Math.round(value) || 0);\n\n// Whether the element has been on screen yet; once it has, it stays counted as seen.\nconst useSeen = (element: RefObject<Element | null>): boolean => {\n  const [seen, setSeen] = useState(() => typeof IntersectionObserver === 'undefined');\n  useEffect(() => {\n    const target = element.current;\n    if (seen || target === null) {\n      return;\n    }\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setSeen(true);\n        observer.disconnect();\n      }\n    });\n    observer.observe(target);\n    return () => observer.disconnect();\n  }, [element, seen]);\n  return seen;\n};\n\n/**\n * The values to show for `targets` this frame, all on one clock and one curve, so a\n * count and its bar move together. They start from 0 and move once `element` has\n * been on screen.\n */\nexport const useAnimatedValues = (targets: number[], element: RefObject<Element | null>): number[] => {\n  const seen = useSeen(element);\n  const [shown, setShown] = useState<number[]>(() => targets.map(() => 0));\n  const refCurrent = useRef(shown);\n  const key = targets.join(',');\n  useEffect(() => {\n    if (!seen) {\n      return;\n    }\n    const goal = key.split(',').map(Number);\n    const from = goal.map((_, index) => refCurrent.current[index] ?? 0);\n    if (from.every((value, index) => value === goal[index])) {\n      return;\n    }\n    if (reducedMotion()) {\n      refCurrent.current = goal;\n      setShown(goal);\n      return;\n    }\n    const start = performance.now();\n    let frame = 0;\n    const tick = (now: number): void => {\n      const progress = Math.min(1, (now - start) / DURATION);\n      const eased = easeInOutCubic(progress);\n      // Exactly the goal at the end, never a float a hair beside it.\n      const next = progress === 1 ? goal : goal.map((value, index) => (from[index] ?? 0) + (value - (from[index] ?? 0)) * eased);\n      refCurrent.current = next;\n      setShown(next);\n      if (progress < 1) {\n        frame = requestAnimationFrame(tick);\n      }\n    };\n    frame = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame);\n  }, [key, seen]);\n  return shown;\n};\n\nexport interface IAnimatedNumberProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {\n  value: number;\n  /** What it shows while it moves and once there (formatCount by default; a percentage formatter for shares). */\n  format?: (value: number) => string;\n  className?: string;\n}\n\n/**\n * A number that moves to its new value. Its width holds the widest of where it starts\n * and where it lands, in tabular figures, so nothing beside it moves while the digits\n * change. Assistive technology reads only the final value.\n */\nexport const AnimatedNumber = ({ value, format = formatCount, className, ...props }: IAnimatedNumberProps) => {\n  const refElement = useRef<HTMLSpanElement>(null);\n  const [shown = 0] = useAnimatedValues([value], refElement);\n  return <NumberText element={refElement} shown={shown} value={value} format={format} className={className} {...props} />;\n};\n\nexport interface INumberTextProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {\n  element?: RefObject<HTMLSpanElement | null>;\n  shown: number;\n  value: number;\n  format?: (value: number) => string;\n  className?: string;\n}\n\n/** The text of a moving number: what it shows now, held at its widest, with the final value for assistive technology. */\nexport const NumberText = ({ element, shown, value, format = formatCount, className, ...props }: INumberTextProps) => {\n  const now = format(shown);\n  const final = format(value);\n  // The widest of the two, laid invisibly under the number: it holds the width of the\n  // real figures (tabular digits are not exactly 1ch), so the number grows or shrinks\n  // only once it has landed.\n  const widest = now.length > final.length ? now : final;\n  return (\n    <span data-slot=\"animated-number\" {...props} ref={element} className={className}>\n      <span aria-hidden=\"true\" className=\"inline-grid tabular-nums\">\n        <span data-ghost={widest} className=\"invisible col-start-1 row-start-1 ghost-text\" />\n        <span data-slot=\"animated-number-value\" className=\"col-start-1 row-start-1\">\n          {now}\n        </span>\n      </span>\n      <span className=\"sr-only\">{final}</span>\n    </span>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"animated-number.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/animated-number/animated-number.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type RefObject, useEffect, useRef, useState } from 'react';\n\n// Numbers that move instead of jumping when a tab or a filter changes them: from the\n// value shown to the new one over 800ms, easing in and out; the first time, from 0\n// once it scrolls into view. Interrupted by another change, it carries on from where\n// it is, never back. With reduced motion, or when the value has not changed (a refetch\n// with the same answer), nothing moves, and the first paint is the value, never 0.\n\nconst DURATION = 800;\n\nconst easeInOutCubic = (t: number): number => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);\n\nconst reducedMotion = (): boolean => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst NUMBER = new Intl.NumberFormat('en-GB');\n\n/** Thousands separated, rounded to a whole number: the default way a count reads. */\nexport const formatCount = (value: number): string => NUMBER.format(Math.round(value) || 0);\n\n// Whether the element has been on screen yet; once it has, it stays counted as seen.\nconst useSeen = (element: RefObject<Element | null>): boolean => {\n  const [seen, setSeen] = useState(() => typeof IntersectionObserver === 'undefined');\n  useEffect(() => {\n    const target = element.current;\n    if (seen || target === null) {\n      return;\n    }\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setSeen(true);\n        observer.disconnect();\n      }\n    });\n    observer.observe(target);\n    return () => observer.disconnect();\n  }, [element, seen]);\n  return seen;\n};\n\n/**\n * The values to show for `targets` this frame, all on one clock and one curve, so a\n * count and its bar move together. They start from 0 and move once `element` has\n * been on screen.\n */\nexport const useAnimatedValues = (targets: number[], element: RefObject<Element | null>): number[] => {\n  const seen = useSeen(element);\n  const [shown, setShown] = useState<number[]>(() => (reducedMotion() ? [...targets] : targets.map(() => 0)));\n  const refCurrent = useRef(shown);\n  const key = targets.join(',');\n  useEffect(() => {\n    const reduced = reducedMotion();\n    // Reduced motion has nothing to wait to see: the value is shown whether or not it is on screen yet.\n    if (!seen && !reduced) {\n      return;\n    }\n    const goal = key.split(',').map(Number);\n    const from = goal.map((_, index) => refCurrent.current[index] ?? 0);\n    if (from.every((value, index) => value === goal[index])) {\n      return;\n    }\n    if (reduced) {\n      refCurrent.current = goal;\n      setShown(goal);\n      return;\n    }\n    const start = performance.now();\n    let frame = 0;\n    const tick = (now: number): void => {\n      const progress = Math.min(1, (now - start) / DURATION);\n      const eased = easeInOutCubic(progress);\n      // Exactly the goal at the end, never a float a hair beside it.\n      const next = progress === 1 ? goal : goal.map((value, index) => (from[index] ?? 0) + (value - (from[index] ?? 0)) * eased);\n      refCurrent.current = next;\n      setShown(next);\n      if (progress < 1) {\n        frame = requestAnimationFrame(tick);\n      }\n    };\n    frame = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame);\n  }, [key, seen]);\n  return shown;\n};\n\nexport interface IAnimatedNumberProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {\n  value: number;\n  /** What it shows while it moves and once there (formatCount by default; a percentage formatter for shares). */\n  format?: (value: number) => string;\n  className?: string;\n}\n\n/**\n * A number that moves to its new value. Its width holds the widest of where it starts\n * and where it lands, in tabular figures, so nothing beside it moves while the digits\n * change. Assistive technology reads only the final value.\n */\nexport const AnimatedNumber = ({ value, format = formatCount, className, ...props }: IAnimatedNumberProps) => {\n  const refElement = useRef<HTMLSpanElement>(null);\n  const [shown = 0] = useAnimatedValues([value], refElement);\n  return <NumberText element={refElement} shown={shown} value={value} format={format} className={className} {...props} />;\n};\n\nexport interface INumberTextProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {\n  element?: RefObject<HTMLSpanElement | null>;\n  shown: number;\n  value: number;\n  format?: (value: number) => string;\n  className?: string;\n}\n\n/** The text of a moving number: what it shows now, held at its widest, with the final value for assistive technology. */\nexport const NumberText = ({ element, shown, value, format = formatCount, className, ...props }: INumberTextProps) => {\n  const now = format(shown);\n  const final = format(value);\n  // The widest of the two, laid invisibly under the number: it holds the width of the\n  // real figures (tabular digits are not exactly 1ch), so the number grows or shrinks\n  // only once it has landed.\n  const widest = now.length > final.length ? now : final;\n  return (\n    <span data-slot=\"animated-number\" {...props} ref={element} className={className}>\n      <span aria-hidden=\"true\" className=\"inline-grid tabular-nums\">\n        <span data-ghost={widest} className=\"invisible col-start-1 row-start-1 ghost-text\" />\n        <span data-slot=\"animated-number-value\" className=\"col-start-1 row-start-1\">\n          {now}\n        </span>\n      </span>\n      <span className=\"sr-only\">{final}</span>\n    </span>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/color-field/color-field.d.ts

@@ -0,0 +1,47 @@
+import { IColorSwatch } from './color-value';
+export interface IColorFieldLabels {
+    /** The name of the popup, when the field has no label of its own. */
+    choose: string;
+    /** The name of the hex field in the popup. */
+    hex: string;
+    /** The name of the palette. */
+    palette: string;
+    /** What the trigger says when no colour is chosen and there is no placeholder. */
+    none: string;
+    /** The message under the hex field when its text is not a colour. */
+    invalid: string;
+}
+export declare const DEFAULT_COLOR_FIELD_LABELS: IColorFieldLabels;
+export interface IColorFieldProps {
+    /** For a Label's htmlFor: it goes to the trigger. */
+    id?: string;
+    /** The colour as `#rrggbb`, as `<input type="color">` writes it, or `undefined` for none. `#rgb` is read as `#rrggbb`. */
+    value: string | undefined;
+    /** Called with `#rrggbb` (lower case), or `undefined` when the hex field is emptied. Text that is not a colour is not reported. */
+    onValueChange: (value: string | undefined) => void;
+    /** The swatches offered: hex strings, or a hex and the name a screen reader says. Tailwind's hues by default. */
+    palette?: readonly (string | IColorSwatch)[];
+    disabled?: boolean;
+    /** What the trigger says when no colour is chosen. */
+    placeholder?: string;
+    /** Submits the colour with a form, under this name, as `#rrggbb`; empty for none. */
+    name?: string;
+    /** An accessible name, when there is no visible label to point at. The chosen colour is added to it. */
+    'aria-label'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+    labels?: Partial<IColorFieldLabels>;
+    /** Layout only (a width); the look is the kit's. */
+    className?: string;
+}
+/**
+ * A colour typed as hex or picked from a palette, in the kit's field: a trigger with a swatch and the colour, and a popup with the
+ * palette and a hex field. It exists so that an app does not fall back to `<input type="color">`, whose chooser is the browser's own.
+ * It has an entry of its own, `@exsto/ds/color-field`.
+ *
+ * The trigger opens the popup with Enter, Space or the pointer. In the palette the arrow keys move between swatches (up and down by
+ * a row), Home and End go to the ends, and Enter or Space chooses one, closes the popup and gives the focus back to the trigger.
+ * In the hex field Enter chooses the colour typed; leaving the field chooses it too, and text that is not a colour marks the field
+ * invalid, says so under it and is not reported.
+ */
+export declare const ColorField: ({ id, value, onValueChange, palette, disabled, placeholder, name, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className, }: IColorFieldProps) => import('react').JSX.Element;