dowel-ui 0.22.0 → 0.23.0

package/README.md

@@ -11,7 +11,7 @@ A dowel is the hidden peg that joins two boards so the seam does not show. That
 **[Documentation](https://lacodda.github.io/dowel/)** — what everything is and why it is that way.
 **[The stand](https://lacodda.github.io/dowel/stand/)** — every component, live, in either theme and in the accent of any product of the line.
 
-**Status:** v0.22.0 - the theme, the scales, an accent per product, fifty-five components - overlays, menus, the command palette, the table, a hundred thousand rows and the three ways of saying something happened - and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. Every component has a page of its own on the stand, which remembers the theme and the accent you left it in. Components install from a versioned registry, the docs are served in the form an agent reads, and `dowel check` tells a project what stands between it and the vocabulary. Two products of the line live on it. See the [roadmap](#roadmap).
+**Status:** v0.23.0 - the theme, the scales, an accent per product, sixty components - overlays, menus, the command palette, the table, a hundred thousand rows, the screens between asking for data and showing it, and the three ways of saying something happened - and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. Every component has a page of its own on the stand, which remembers the theme and the accent you left it in. Components install from a versioned registry, the docs are served in the form an agent reads, and `dowel check` tells a project what stands between it and the vocabulary. Two products of the line live on it. See the [roadmap](#roadmap).
 
 ## The theme
 
@@ -98,7 +98,7 @@ snapshot the cross-references point into the same snapshot, so a component and
 the sibling it reuses are the pair that shipped together. See
 [installing from the registry](https://lacodda.github.io/dowel/guides/registry/).
 
-Fifty-five of them so far. The everyday ones - Button, Input, Textarea, Panel,
+Sixty of them so far. The everyday ones - Button, Input, Textarea, Panel,
 Badge, Chip, Kbd, Spinner, Truncate and Copyable; Field and the three controls
 that answer a question - Checkbox, RadioGroup and Switch; five for a number or
 a judgement - NumberField, Slider, RatingScale, DurationField and
@@ -110,9 +110,10 @@ Tooltip; four for choosing something - Menu, ContextMenu, Select and Combobox;
 three for finding it - SearchField, CommandPalette and the `useShortcut` behind
 them; three for saying that something happened - Toast, Alert and Banner; six
 for showing rows of data - Table, Pagination, PageSize, NumberFormat,
-RelativeTime and the `table-sort` with no React in it; and four for a long list
-or a deep one: VirtualList, TreeView with the `tree-rows` under it, and
-KeyValue.
+RelativeTime and the `table-sort` with no React in it; four for a long list or
+a deep one - VirtualList, TreeView with the `tree-rows` under it, and KeyValue;
+and five for the screens between asking for data and showing it: Skeleton,
+EmptyState, Progress, QueryState and ErrorBoundary.
 
 Those last three are the ones products keep confusing, so each page names all
 four options: a **toast** goes away, an **alert** is still true after a reload,

package/dist/registry.json

@@ -293,7 +293,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -312,7 +312,7 @@
       "description": "A message that stays on the screen, in the flow of the page, about the thing next to it: this field could not be saved, this profile has no axes yet, this export is out of date.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -331,7 +331,7 @@
       "description": "A small piece of state attached to something else: a count, a status, a label. It is not a button and never was - if it can be clicked it is a Chip.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -350,7 +350,7 @@
       "description": "A strip across the top of the application, about the application: you are offline, this build is a preview, your licence expires on Friday, a new version is ready to install.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -370,7 +370,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -404,7 +404,7 @@
       "title": "Calendar",
       "description": "The sums live next door in `calendar-math`, which has no React in it; this is the grid that draws them and the keyboard that moves around it.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar-math.json"
@@ -425,7 +425,7 @@
       "description": "The interesting part is the words. A checkbox on its own is a nine-pixel target that says nothing; wired to a label it is the whole row, and the row is what a finger and a pointer both aim at. So the label is part of the component rather than something a caller remembers to add - the commonest bug in a hand-rolled checkbox is a `<label>` that is next to the input instead of tied to it, which looks identical and does nothing.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -444,7 +444,7 @@
       "description": "A badge you can act on: a filter that can be removed, a tag with a count, a selected value in a field. The difference from a Badge is entirely about whether something happens when you click it - and if something does, that part is a real `<button>` with a real label, not a decorative cross.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -462,7 +462,7 @@
       "title": "Color-field",
       "description": "Picking a colour for something the product stores: a tag, a project, a calendar. Note what that is *not* - it is not choosing the appearance of the interface. The theme decides that, from one accent, and a field that let a reader repaint the chrome would undo the argument the whole system rests on.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -484,7 +484,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json",
@@ -507,7 +507,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/combobox.json",
@@ -530,7 +530,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -549,7 +549,7 @@
       "description": "The same list of actions as Menu, opened the other way round: by right click, or by a long press on a touch screen, over an *area* rather than from a button. So the trigger is not a control - it is the region the menu belongs to, a row, a canvas, a file tile - and it renders a `<div>`.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/menu.json"
@@ -569,7 +569,7 @@
       "title": "Copyable",
       "description": "Any text that someone will eventually want to copy - an id, a path, a hash, a token - copied with one click. The rule comes from nitid: if a value is worth showing, it is worth being able to take away, and selecting a monospaced id by hand is a small daily tax.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -587,7 +587,7 @@
       "title": "Date-picker",
       "description": "The trigger is a button rather than a text input, and that is the decision worth stating. A typable date field has to answer \"what does `03/04/26` mean\" in a locale it cannot be sure of, and it answers wrong for half the world; a button showing the date spelled out has no such question. Where typing genuinely matters - a birth date, forty years back - the calendar is the wrong control anyway and a product should reach for a plain field.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar.json",
@@ -610,7 +610,7 @@
       "title": "Date-range-picker",
       "description": "The interesting part is the state between them. After the first click there is a start and no end, and that is not an incomplete range to be hidden or a range of one day - it is the normal middle of the interaction, and the calendar has to show it: the first day marked, the days under the pointer shading as the reader moves, the popup staying open. Products that skip it end up with a picker that seems to do nothing until the second click.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar.json",
@@ -635,7 +635,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -655,7 +655,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -673,7 +673,7 @@
       "title": "Duration-field",
       "description": "The alternative is what products keep building: two number boxes labelled \"hours\" and \"minutes\", which means two tab stops, two validations, and a reader who has to divide 90 minutes in their head before typing. Here they write `1h 30m`, or `90m`, or `1.5h`, and it means the same thing.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -687,6 +687,44 @@
         }
       ]
     },
+    {
+      "name": "empty-state",
+      "type": "registry:ui",
+      "title": "Empty-state",
+      "description": "Three kinds of nothing, and a product that draws the same panel for all three is telling the reader the wrong thing twice:\n *   **empty** - there is nothing here yet, and that is normal. The panel says   what would be here and offers the one action that makes it appear.",
+      "dependencies": [
+        "class-variance-authority",
+        "dowel-ui@^0.23.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/empty-state.tsx",
+          "target": "@ui/empty-state.tsx",
+          "type": "registry:ui",
+          "content": "import type { HTMLAttributes, ReactNode } from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\n\n/*\n * What a screen says when there is nothing on it.\n *\n * Three kinds of nothing, and a product that draws the same panel for all\n * three is telling the reader the wrong thing twice:\n *\n *   **empty** - there is nothing here yet, and that is normal. The panel says\n *   what would be here and offers the one action that makes it appear.\n *\n *   **filtered** - there is plenty here, just none of it matching. The way out\n *   is to widen the filter, not to create anything.\n *\n *   **error** - it could not be fetched. Nothing is missing; something failed,\n *   and the way out is to try again.\n *\n * They differ in what the reader should do next, which is exactly what an\n * empty screen is for, so they are a variant rather than three components.\n *\n * `action` is the whole point of the component: **an empty screen with no way\n * out is a dead end.** It is optional in the type because a panel inside a\n * larger screen can borrow the way out from its surroundings - but a full-page\n * empty state without one is a bug the reader cannot report.\n *\n * The mark is the line's hexagon, drawn in the current text colour rather than\n * a product's accent. A full-strength logo in an empty panel shouts; this is a\n * watermark, and it is `aria-hidden` because it says nothing a reader needs.\n */\n\nexport const emptyStateVariants = cva(\n  'flex flex-col items-center justify-center gap-3 rounded-xl p-8 text-center',\n  {\n    variants: {\n      variant: {\n        empty: 'border border-dashed border-line-2',\n        filtered: 'border border-dashed border-line-2',\n        // Solid rather than dashed: a dashed border reads as a placeholder for\n        // something that belongs there, and a failure is not that.\n        error: 'border border-bad/40 bg-bad-soft/30',\n      },\n    },\n    defaultVariants: { variant: 'empty' },\n  },\n)\n\n/** The line's hexagon, at whatever size the caller asks for.\n *\n * Inlined rather than fetched: it is decorative, so it should not cost a\n * request, and it has to take the theme's colour - a file could not. */\nexport function EmptyMark({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 100 100\" aria-hidden className={cn('size-14', className)}>\n      <polygon\n        points=\"50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={6}\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\n/** The same hexagon, cut by a slash. For a filter that matched nothing: the\n * shape is there, the contents are not. */\nexport function FilteredMark({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 100 100\" aria-hidden className={cn('size-14', className)}>\n      <polygon\n        points=\"50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={6}\n        strokeLinejoin=\"round\"\n      />\n      <line x1=\"22\" y1=\"78\" x2=\"78\" y2=\"22\" stroke=\"currentColor\" strokeWidth={6} strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\n/** A hexagon with a corner broken out of it. For something that failed. */\nexport function ErrorMark({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 100 100\" aria-hidden className={cn('size-14', className)}>\n      <polyline\n        points=\"50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5 50,5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={6}\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        // The gap is the break: the outline is drawn as a line rather than a\n        // closed shape so one edge can be missing.\n        strokeDasharray=\"150 34\"\n      />\n    </svg>\n  )\n}\n\nexport interface EmptyStateProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof emptyStateVariants> {\n  /** What is not here, in the product's words. */\n  title: ReactNode\n  /** Why, or what to do about it. */\n  body?: ReactNode\n  /** The one thing worth doing here. An empty screen with no way out is a\n   * dead end. */\n  action?: ReactNode\n  /** Something other than the default mark - a product's own illustration. */\n  mark?: ReactNode\n}\n\nexport function EmptyState({\n  variant = 'empty',\n  title,\n  body,\n  action,\n  mark,\n  className,\n  ...props\n}: EmptyStateProps) {\n  const defaultMark =\n    variant === 'error' ? (\n      <ErrorMark className=\"text-bad/60\" />\n    ) : variant === 'filtered' ? (\n      <FilteredMark className=\"text-line-2\" />\n    ) : (\n      <EmptyMark className=\"text-line-2\" />\n    )\n\n  return (\n    <div className={cn(emptyStateVariants({ variant }), className)} {...props}>\n      {mark ?? defaultMark}\n      <div>\n        <p className={cn('font-medium', variant === 'error' && 'text-bad')}>{title}</p>\n        {body !== undefined && <p className=\"mt-1 text-sm text-dim\">{body}</p>}\n      </div>\n      {action}\n    </div>\n  )\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "error-boundary",
+      "type": "registry:ui",
+      "title": "Error-boundary",
+      "description": "A class component, and the only one in the set - not a style choice: React gives no hook for catching a render error, and `componentDidCatch` exists nowhere else. Anything that claims otherwise catches events, not renders.",
+      "dependencies": [],
+      "registryDependencies": [
+        "https://lacodda.github.io/dowel/r/button.json",
+        "https://lacodda.github.io/dowel/r/empty-state.json"
+      ],
+      "files": [
+        {
+          "path": "ui/error-boundary.tsx",
+          "target": "@ui/error-boundary.tsx",
+          "type": "registry:ui",
+          "content": "import { Component, type ErrorInfo, type ReactNode } from 'react'\nimport { Button } from './button'\nimport { EmptyState } from './empty-state'\n\n/*\n * The screen that appears instead of a crash.\n *\n * A class component, and the only one in the set - not a style choice: React\n * gives no hook for catching a render error, and `componentDidCatch` exists\n * nowhere else. Anything that claims otherwise catches events, not renders.\n *\n * What it is for is narrow and worth stating, because products reach for it as\n * a general error handler and it is not one: it catches errors **thrown while\n * rendering**, below itself. A failed fetch is not that - it is a value the\n * component receives and shows, which is `QueryState`. An error in an event\n * handler is not that either; nothing catches those but the handler.\n *\n * So this is the last line: something that should never have thrown did, and\n * the alternative is a white page with the product's own name at the top.\n *\n * The fallback is deliberately plain and deliberately says the message. The\n * reader cannot fix it, but the reader is who files it - and a screen that\n * hides the one string worth quoting turns a bug report into a guess. It is\n * folded away behind a summary, because it is evidence rather than an\n * instruction.\n */\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode\n  /** Draw something else instead of the default screen.\n   *\n   * Given the error and a way to clear it, because a fallback that cannot\n   * retry is a dead end with extra steps. */\n  fallback?: (error: Error, reset: () => void) => ReactNode\n  /** Change this to clear the error - a route, usually.\n   *\n   * Without it a boundary that has caught once stays caught: the reader\n   * navigates away from the broken screen and the crash follows them, because\n   * nothing told the boundary the reason had gone. */\n  resetKey?: unknown\n  /** Somewhere to send it. The product owns whether that is a log, a file or a\n   * service - the boundary only knows it happened. */\n  onError?: (error: Error, info: ErrorInfo) => void\n  /** The words on the default screen. Required, and not defaulted: they are\n   * the only text here, and English inside a primitive is text no product can\n   * translate. */\n  labels: ErrorBoundaryLabels\n}\n\nexport interface ErrorBoundaryLabels {\n  /** \"Something went wrong.\" */\n  title: string\n  /** What the reader can do about it. */\n  body: string\n  /** The summary that unfolds the message, e.g. \"Details\". */\n  details: string\n  /** The retry button, e.g. \"Try again\". */\n  retry: string\n}\n\ninterface State {\n  error: Error | null\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, State> {\n  state: State = { error: null }\n\n  static getDerivedStateFromError(error: Error): State {\n    return { error }\n  }\n\n  componentDidCatch(error: Error, info: ErrorInfo): void {\n    this.props.onError?.(error, info)\n  }\n\n  componentDidUpdate(previous: ErrorBoundaryProps): void {\n    // Clearing on a changed key, rather than on any re-render: a boundary that\n    // resets whenever its parent renders re-runs the throwing child\n    // immediately, and the screen flickers between the crash and the fallback\n    // for as long as the cause is there.\n    if (this.state.error !== null && previous.resetKey !== this.props.resetKey) {\n      this.setState({ error: null })\n    }\n  }\n\n  private reset = (): void => {\n    this.setState({ error: null })\n  }\n\n  render(): ReactNode {\n    const { error } = this.state\n    if (error === null) return this.props.children\n\n    const { fallback, labels } = this.props\n    if (fallback) return fallback(error, this.reset)\n\n    return (\n      <EmptyState\n        variant=\"error\"\n        title={labels.title}\n        body={labels.body}\n        action={\n          <div className=\"flex w-full flex-col items-center gap-3\">\n            <details className=\"w-full text-left\">\n              <summary className=\"cursor-pointer text-xs text-faint\">{labels.details}</summary>\n              {/* Selectable and monospaced, because its job is to be copied\n                * into a bug report verbatim. */}\n              <pre className=\"mt-2 max-h-40 overflow-auto rounded-md bg-softer p-3 font-mono text-xs text-dim\">\n                {error.message}\n              </pre>\n            </details>\n            <Button variant=\"primary\" onClick={this.reset}>\n              {labels.retry}\n            </Button>\n          </div>\n        }\n      />\n    )\n  }\n}\n"
+        }
+      ]
+    },
     {
       "name": "field",
       "type": "registry:ui",
@@ -694,7 +732,7 @@
       "description": "Every form is the same four parts repeated: a name for the control, the control, sometimes a hint, and sometimes an error. Written by hand each time, they drift - the label loses its `htmlFor`, the hint is a `<div>` no screen reader mentions, the error appears in red and is announced by nothing at all. This is that arrangement, once.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -712,7 +750,7 @@
       "title": "File-drop",
       "description": "A place to put files: drag them onto it, or press it and pick them. It takes files and hands them over - it does not upload them. Where they go, with which credentials, retried how - that is the product's transport, and a primitive that owned it would be wrong for every product whose upload does not look like the one it guessed.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -730,7 +768,7 @@
       "title": "Input",
       "description": "A single-line field. It is a plain `<input>` with the line's clothes on, so everything a browser gives an input for free - autofill, spellcheck, the right keyboard on a phone, `type=\"email\"` validation - still works.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -748,7 +786,7 @@
       "title": "Kbd",
       "description": "A key, as printed in a menu or a hint: `Ctrl` `K`. It is a `<kbd>` element because that is what the element is for - a screen reader announces it as keyboard input rather than reading a stray capital letter.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -767,7 +805,7 @@
       "description": "The shape every product builds out of two `<div>`s in a flex row, and the reason it is worth having once: it is a `<dl>`, and the pairing is what a screen reader announces. Two divs read as four unrelated pieces of text - \"Created\", \"2 hours ago\", \"Owner\", \"Ines\" - and nothing says which value belongs to which name. The right element says it for free.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -787,7 +825,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -806,7 +844,7 @@
       "description": "A number typed into a text input is a string that happens to look like a number, and every product then writes the same four fixes: strip the letters, clamp to a range, round to a step, and decide what an empty box means. This is those four, once, plus the stepper - because a value with a small range is faster nudged than typed.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -826,7 +864,7 @@
       "title": "Number-format",
       "description": "Two things, and the second is the reason this is a component rather than a call to `toLocaleString` at each site.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -844,7 +882,7 @@
       "title": "Page-size",
       "description": "Its own file rather than a part of `Pagination`, because the two are needed apart often enough: a list that scrolls for ever wants \"how many to load at a time\" and no page buttons, and a table with a fixed page size wants the buttons and no choice. Together they were also over the size gate, which asked the right question.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/select.json"
@@ -864,7 +902,7 @@
       "title": "Pagination",
       "description": "The arithmetic is exported separately from the component for the same reason `table-sort` is a file of its own: a product that pages on the server needs the page numbers and not the buttons, and computing them a second time in a different place is how the two disagree about where the last page ends.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json"
@@ -885,7 +923,7 @@
       "description": "The raised surface everything else sits on. It is the one place a screen gets its structure from, so it stays deliberately plain: a ground, a hairline, a corner.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -903,7 +941,7 @@
       "title": "Password-field",
       "description": "The reveal is the whole component, and it is not a convenience. A masked field is the only one in a form where a typo cannot be seen, so people either paste (fine) or type slowly and get it wrong anyway; the toggle is what turns an unverifiable field into a checkable one, and it is why long passphrases became usable at all.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -925,7 +963,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -945,7 +983,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -957,6 +995,45 @@
         }
       ]
     },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "title": "Progress",
+      "description": "The distinction the component is built on, and the one products collapse:\n *   **determinate** - the fraction is known. The bar fills to it, and a reader   can tell how long is left.",
+      "dependencies": [
+        "@base-ui/react",
+        "class-variance-authority",
+        "dowel-ui@^0.23.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/progress.tsx",
+          "target": "@ui/progress.tsx",
+          "type": "registry:ui",
+          "content": "import { Progress as Base } from '@base-ui/react/progress'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\n\n/*\n * How far along something is.\n *\n * The distinction the component is built on, and the one products collapse:\n *\n *   **determinate** - the fraction is known. The bar fills to it, and a reader\n *   can tell how long is left.\n *\n *   **indeterminate** - something is happening and nobody knows how much is\n *   left. The bar says exactly that, by moving without filling.\n *\n * Collapsing them means picking a number that is not true - a bar that creeps\n * to 90% and waits there is the commonest version, and it is a lie the reader\n * learns to distrust, after which no progress bar in the product means\n * anything. `value={undefined}` is the honest answer, and it is the default.\n *\n * Base UI carries the role, the announcement and the value clamping. What is\n * here is the clothes, and the rule about which of the two states is drawn.\n *\n * Not a Spinner. A spinner says \"working\" in a corner; this says \"working, and\n * here is the shape of it\" across a width. Where the shape of what is coming\n * is known, a Skeleton says more than either.\n */\n\nexport const progressVariants = cva('w-full overflow-hidden rounded-full bg-soft', {\n  variants: {\n    size: {\n      sm: 'h-1',\n      md: 'h-2',\n    },\n    tone: {\n      accent: '',\n      good: '',\n      warn: '',\n      bad: '',\n    },\n  },\n  defaultVariants: { size: 'md', tone: 'accent' },\n})\n\nconst fillVariants = cva('h-full rounded-full transition-[width] duration-base', {\n  variants: {\n    tone: {\n      accent: 'bg-accent',\n      good: 'bg-good',\n      warn: 'bg-warn',\n      bad: 'bg-bad',\n    },\n  },\n  defaultVariants: { tone: 'accent' },\n})\n\n/* The stripes take their colour from `currentColor`, so the tone arrives as a\n * text colour rather than a background - the same four names, said the other\n * way round. */\nconst stripeVariants = cva('h-full w-full rounded-full opacity-40', {\n  variants: {\n    tone: {\n      accent: 'text-accent',\n      good: 'text-good',\n      warn: 'text-warn',\n      bad: 'text-bad',\n    },\n  },\n  defaultVariants: { tone: 'accent' },\n})\n\nexport interface ProgressProps\n  extends Omit<Base.Root.Props, 'className' | 'value'>,\n    VariantProps<typeof progressVariants> {\n  /** The fraction done, 0 to `max`. Leave it out when it is not known - that\n   * is not a missing value but a different, honest state. */\n  value?: number | null\n  max?: number\n  /** What is progressing, for a screen reader. Required: a bar with no name is\n   * announced as a percentage of nothing, and the word belongs to the product. */\n  label: string\n  className?: string\n  /** A visible label beside the bar, when there is room. */\n  children?: React.ReactNode\n}\n\nexport function Progress({\n  value,\n  max = 100,\n  size,\n  tone,\n  label,\n  className,\n  children,\n  ...props\n}: ProgressProps) {\n  const indeterminate = value === undefined || value === null\n\n  return (\n    <Base.Root\n      value={indeterminate ? null : value}\n      max={max}\n      aria-label={label}\n      className={cn('flex w-full flex-col gap-1.5', className)}\n      {...props}\n    >\n      {children !== undefined && (\n        <div className=\"flex items-baseline justify-between text-xs text-dim\">\n          {children}\n          {/* The number only where there is one. Showing \"0%\" for an unknown\n            * amount is the same lie as a bar that creeps to 90%. */}\n          {!indeterminate && (\n            <span className=\"tabular-nums\">{Math.round((value / max) * 100)}%</span>\n          )}\n        </div>\n      )}\n\n      <Base.Track className={cn(progressVariants({ size, tone }))}>\n        {indeterminate ? (\n          /* Stripes across the whole track, not a filled bar.\n           *\n           * A full-width fill was the first version and it was wrong in the\n           * one way that matters: measured on the stand, it drew 384px of a\n           * 384px track - a reader glancing at it sees \"done\", which is the\n           * opposite of what the state means. Pulsing did not rescue it, and\n           * under `prefers-reduced-motion` the pulse stops and a solid,\n           * complete-looking bar is all that remains.\n           *\n           * Stripes cannot be read as a fraction at all: there is no edge to\n           * take for a boundary. They are drawn with a gradient rather than a\n           * `@keyframes` of their own, because a name in the theme is a\n           * contract the line carries forever - and this needs no animation to\n           * say what it says. */\n          <div\n            className={cn(stripeVariants({ tone }))}\n            style={{\n              backgroundImage:\n                'repeating-linear-gradient(45deg, currentColor 0 6px, transparent 6px 12px)',\n            }}\n          />\n        ) : (\n          <Base.Indicator className={cn(fillVariants({ tone }))} />\n        )}\n      </Base.Track>\n    </Base.Root>\n  )\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "query-state",
+      "type": "registry:ui",
+      "title": "Query-state",
+      "description": "Every list in every product writes the same ladder - loading, then failed, then nothing found, then the content - and writes it slightly differently each time. What differs is never deliberate: one screen forgets the empty case, another shows a spinner where the shape was known, a third prints the raw error object. This is that ladder, once.",
+      "dependencies": [],
+      "registryDependencies": [
+        "https://lacodda.github.io/dowel/r/empty-state.json",
+        "https://lacodda.github.io/dowel/r/skeleton.json"
+      ],
+      "files": [
+        {
+          "path": "ui/query-state.tsx",
+          "target": "@ui/query-state.tsx",
+          "type": "registry:ui",
+          "content": "import type { ReactNode } from 'react'\nimport { EmptyState } from './empty-state'\nimport { SkeletonList } from './skeleton'\n\n/*\n * The three screens between asking for data and showing it.\n *\n * Every list in every product writes the same ladder - loading, then failed,\n * then nothing found, then the content - and writes it slightly differently\n * each time. What differs is never deliberate: one screen forgets the empty\n * case, another shows a spinner where the shape was known, a third prints the\n * raw error object. This is that ladder, once.\n *\n * **It takes values, not a query.** `useQuery` from TanStack Query hands back\n * `isPending` and `error`, and those are ordinary values - so this component\n * asks for them rather than for the query result, and works the same with SWR,\n * with a reducer, or with two `useState` calls. Taking the result object would\n * put a library in the registry and therefore in every product that installs\n * this primitive, to save one line at the call site:\n *\n *     const works = useQuery({ queryKey, queryFn })\n *     <QueryState pending={works.isPending} error={works.error} empty={!works.data?.length} …>\n *\n * **The order of the cases is the component**, and it is the part that goes\n * wrong by hand: pending first, because a refetch that already has data should\n * not blank the screen; then error, because an error with stale data is still\n * an error; then empty, which is only knowable once something arrived.\n *\n * What it deliberately does not do is fetch, retry or cache. Those belong to\n * whatever owns the data - and a component that guessed at them would be\n * wrong for the product that owns them differently.\n */\n\nexport interface QueryStateProps {\n  /** Nothing has arrived yet. */\n  pending?: boolean\n  /** It failed. Anything with a `message`, which is what every error library\n   * agrees on - or a string, for a product that carries its own. */\n  error?: { message: string } | string | null\n  /** Something arrived, and it was nothing. Computed by the caller, because\n   * only the caller knows whether empty means `[]`, `null` or a count of\n   * zero. */\n  empty?: boolean\n  /** What stands in while pending. A shape, ideally - the default is a list,\n   * because most screens are waiting for one, but a screen waiting for a card\n   * should say so. */\n  skeleton?: ReactNode\n  /** What is shown when nothing came back. */\n  emptyState?: ReactNode\n  /** What is shown when it failed. Given the message, so a product can put it\n   * where it likes - or ignore it. */\n  errorState?: (message: string) => ReactNode\n  /** The words on the default error screen. Required only in the sense that\n   * the default screen needs them; pass `errorState` instead and they are\n   * never read. */\n  errorLabels?: { title: string; body?: string }\n  children: ReactNode\n}\n\nexport function QueryState({\n  pending = false,\n  error = null,\n  empty = false,\n  skeleton,\n  emptyState,\n  errorState,\n  errorLabels,\n  children,\n}: QueryStateProps) {\n  /* `aria-busy` on the wrapper, in every state.\n   *\n   * This is what tells a screen reader that the region is working, and it is\n   * why the Skeletons themselves are `aria-hidden`: the fact belongs to the\n   * region, said once, rather than to a dozen empty boxes announced as\n   * content. */\n  const wrap = (content: ReactNode) => <div aria-busy={pending || undefined}>{content}</div>\n\n  // Pending first: a refetch that still holds data should not blank the screen\n  // it is refreshing, and the caller decides that by passing `pending` only\n  // when there is nothing to show.\n  if (pending) return wrap(skeleton ?? <SkeletonList />)\n\n  if (error) {\n    const message = typeof error === 'string' ? error : error.message\n    if (errorState) return wrap(errorState(message))\n    return wrap(\n      <EmptyState\n        variant=\"error\"\n        title={errorLabels?.title ?? message}\n        // The message is shown as the body when there is a title above it, and\n        // as the title when there is not - so it is never lost, and never\n        // printed twice.\n        body={errorLabels?.title ? (errorLabels.body ?? message) : errorLabels?.body}\n      />,\n    )\n  }\n\n  // Empty last of the three: it is the only one that cannot be known until\n  // something has arrived.\n  if (empty && emptyState) return wrap(emptyState)\n\n  return wrap(children)\n}\n"
+        }
+      ]
+    },
     {
       "name": "radio-group",
       "type": "registry:ui",
@@ -965,7 +1042,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -983,7 +1060,7 @@
       "title": "Rating-scale",
       "description": "Generalised from kilna, where it is how a work is scored on each of its axes. The shape is a row of marks rather than stars: stars carry a meaning of their own - a review, a public verdict - and this is as often \"how hard was this\" or \"how finished is it\" as it is \"how good\".",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1001,7 +1078,7 @@
       "title": "Relative-time",
       "description": "The relative-time primitive.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1019,7 +1096,7 @@
       "title": "Save-state",
       "description": "The quiet line beside a field that saves itself: \"saving…\", then a tick that fades. It exists because a form without a Save button has to say what it did anyway - otherwise the reader is left guessing whether their edit survived, and the usual answer to that guess is to press Ctrl+S at a page that has no such thing.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/spinner.json"
@@ -1039,7 +1116,7 @@
       "title": "Search-field",
       "description": "An Input that knows it is a search box, which is three small things the products kept not doing:\n *   - a magnifier, so the field is recognisable before it is read;   - a way to clear it that is not \"select all and delete\" - and one that a     keyboard can reach, which a decorative `<span>` cannot;   - the shortcut that focuses it, shown in the field rather than learned.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json",
@@ -1063,7 +1140,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1093,6 +1170,24 @@
         }
       ]
     },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "title": "Skeleton",
+      "description": "The rule the component is built on, and the reason it takes a shape rather than filling the space:\n *   **A skeleton of the wrong shape is worse than no skeleton.**\n * It promises something the content does not keep, and the promise is paid for in a jump: the page settles, the scrollbar appears, and whatever the reader was about to click has moved. Measured rather than assumed - the line's own calendar showed a list of four short lines where a six-row month grid was about to land, and the skeleton was itself the jump it existed to prevent.",
+      "dependencies": [
+        "dowel-ui@^0.23.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/skeleton.tsx",
+          "target": "@ui/skeleton.tsx",
+          "type": "registry:ui",
+          "content": "import type { HTMLAttributes } from 'react'\nimport { cn } from 'dowel-ui'\n\n/*\n * A placeholder shaped like the thing that is still loading.\n *\n * The rule the component is built on, and the reason it takes a shape rather\n * than filling the space:\n *\n *   **A skeleton of the wrong shape is worse than no skeleton.**\n *\n * It promises something the content does not keep, and the promise is paid for\n * in a jump: the page settles, the scrollbar appears, and whatever the reader\n * was about to click has moved. Measured rather than assumed - the line's own\n * calendar showed a list of four short lines where a six-row month grid was\n * about to land, and the skeleton was itself the jump it existed to prevent.\n *\n * So the useful thing here is not `<Skeleton />` - that is four lines anyone\n * can write - but the shapes: a list, a card, a grid. They are what a product\n * reaches for at the call site, and what keeps the placeholder honest.\n *\n * A spinner is the right answer when the shape is *not* known. A skeleton\n * claims to know; if it does not, say less rather than more.\n *\n * Everything here is `aria-hidden`. A screen reader is told the region is busy\n * by whatever owns the loading state - `QueryState` does it with `aria-busy` -\n * and announcing a dozen empty boxes as content would be noise on top of a\n * fact the reader already has.\n */\n\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement>\n\n/** One block. Size it with `className` - a skeleton is a shape, and the shape\n * belongs to whatever it stands in for. */\nexport function Skeleton({ className, ...props }: SkeletonProps) {\n  return (\n    <div\n      aria-hidden\n      className={cn('animate-pulse rounded-md bg-soft', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {\n  /** How many lines of text stand here. */\n  lines?: number\n}\n\n/** A paragraph's worth of lines.\n *\n * The widths vary, and that is the whole point: a stack of equal bars reads as\n * a loading indicator, while ragged ones read as text. The last line is short,\n * because the last line of a paragraph is. */\nexport function SkeletonText({ lines = 3, className, ...props }: SkeletonTextProps) {\n  const widths = ['w-full', 'w-11/12', 'w-4/5', 'w-full', 'w-3/4']\n  return (\n    <div aria-hidden className={cn('flex flex-col gap-2', className)} {...props}>\n      {Array.from({ length: Math.max(1, lines) }, (_, line) => (\n        <Skeleton\n          key={line}\n          className={cn(\n            'h-3',\n            line === lines - 1 ? 'w-1/2' : widths[line % widths.length],\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport interface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n  rows?: number\n  /** Draw a second, shorter line under each row - for a list whose rows carry\n   * a title and something beneath it. */\n  secondary?: boolean\n}\n\n/** Rows of a list, which is the shape most screens are waiting for. */\nexport function SkeletonList({\n  rows = 5,\n  secondary = true,\n  className,\n  ...props\n}: SkeletonListProps) {\n  // Three widths in rotation rather than random: a placeholder that differs\n  // between renders is a placeholder that flickers when anything re-renders.\n  const widths = ['w-2/3', 'w-4/5', 'w-1/2']\n  return (\n    <div aria-hidden className={cn('flex flex-col gap-1', className)} {...props}>\n      {Array.from({ length: Math.max(1, rows) }, (_, row) => (\n        <div key={row} className=\"flex flex-col gap-1.5 px-3 py-2\">\n          <Skeleton className={cn('h-3.5', widths[row % widths.length])} />\n          {secondary && <Skeleton className=\"h-2.5 w-1/3\" />}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport interface SkeletonGridProps extends HTMLAttributes<HTMLDivElement> {\n  /** How many cells. */\n  cells?: number\n  /** How many per row. */\n  columns?: number\n  /** The aspect of one cell, as a Tailwind class - a gallery of covers is not\n   * shaped like a grid of tiles. */\n  cellClassName?: string\n}\n\n/** A grid of cells: a gallery, a board, a month.\n *\n * Given a cell count and a column count rather than a shape of its own,\n * because the grids a product waits for differ in both and agree in neither. */\nexport function SkeletonGrid({\n  cells = 12,\n  columns = 4,\n  cellClassName = 'aspect-square',\n  className,\n  ...props\n}: SkeletonGridProps) {\n  return (\n    <div\n      aria-hidden\n      // The column count is a style rather than a class, because a class would\n      // have to be one of a fixed set - and Tailwind cannot generate\n      // `grid-cols-${n}` from a value it never sees.\n      style={{ gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` }}\n      className={cn('grid gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length: Math.max(1, cells) }, (_, cell) => (\n        <Skeleton key={cell} className={cellClassName} />\n      ))}\n    </div>\n  )\n}\n"
+        }
+      ]
+    },
     {
       "name": "slider",
       "type": "registry:ui",
@@ -1100,7 +1195,7 @@
       "description": "The case for it over a NumberField is that the number does not matter much: a volume, an opacity, a weight in a search filter. Where the exact figure does matter, a slider is a worse field with more pixels - it cannot be typed into, it cannot be pasted into, and it has no state for \"empty\".",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1119,7 +1214,7 @@
       "description": "Something is happening and the answer has not arrived. It carries no text of its own - what is loading is the product's word, not the system's - but it does have to say *something* to a screen reader, or a page that is busy is silently identical to a page that is empty.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1138,7 +1233,7 @@
       "description": "The difference from Checkbox is not how it looks, and getting it wrong is the commonest mistake in the pair. A checkbox is an answer collected now and submitted later, with the rest of the form; a switch is a setting that applies the moment it moves. Put a switch in a form with a Save button and the reader cannot tell whether anything happened - they flipped it, and nothing said so.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1173,7 +1268,7 @@
       "description": "Parts rather than a `columns` prop, and that is the decision worth stating: a `<DataTable columns={…} rows={…} />` is quicker to write for the first table and then owns every cell in the product forever. The moment one column needs a Badge, another a link, and a third the row's own menu, the prop grows a `render` for each - at which point it is JSX with extra steps, spelt in a shape only this component understands.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/table-sort.json"
@@ -1194,7 +1289,7 @@
       "description": "Free text turned into a list: type a word, press Enter, it becomes a chip.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/chip.json",
@@ -1215,7 +1310,7 @@
       "title": "Textarea",
       "description": "A multi-line field that can grow with what is typed into it, which is the only interesting part: a fixed box makes someone scroll inside a scroll, and a box that grows without limit pushes the button they are trying to reach off the screen. `autoResize` grows it; `maxRows` says when to stop and let it scroll after all.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1235,7 +1330,7 @@
       "title": "Time-field",
       "description": "No donor for this one: neither product of the line had a time field, so this is written from the same shape as DurationField, and for the same reason. Anything a person plausibly types is accepted - `9`, `9:30`, `930`, `9.30`, `9pm`, `21:30` - and what comes back is always `HH:MM`.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1257,7 +1352,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1277,7 +1372,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1311,7 +1406,7 @@
       "title": "Tree-view",
       "description": "The shape products reach for and then get wrong in the same place every time. A tree is not a nest of lists with click handlers - it is one control with a cursor in it, and the difference is the whole component:\n *   **One tab stop, not one per node.** A tree of four hundred files with a   `tabIndex` on each is four hundred stops between the sidebar and the   editor. The container is what the keyboard reaches, and the arrows move a   cursor inside it - the arrangement a `RadioGroup` has, for the same   reason.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/tree-rows.json"
@@ -1331,7 +1426,7 @@
       "title": "Truncate",
       "description": "Text that does not fit, cut with an ellipsis - and, importantly, still readable in full: the element carries its own text as a `title`, so hovering shows what was cut. Every product wrote the one-line version of this and none of them remembered the title.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1349,7 +1444,7 @@
       "title": "Virtual-list",
       "description": "The browser is fine with long lists until it is not: a hundred thousand `<div>`s is a layout the machine recomputes on every change, and the page stops responding while it does. What is drawn instead is the window the reader can actually see, held in place by a tall spacer, so the scrollbar still says how much there is.",
       "dependencies": [
-        "dowel-ui@^0.22.0"
+        "dowel-ui@^0.23.0"
       ],
       "registryDependencies": [],
       "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
   "license": "MIT",
   "type": "module",