dowel-ui 0.26.1 → 0.27.0

package/README.md

@@ -60,7 +60,7 @@ npx shadcn@latest add https://lacodda.github.io/dowel/r/button.json
 npx shadcn@latest add https://lacodda.github.io/dowel/r/app.json   # or a whole set
 ```
 
-Eighty-four primitives so far - the everyday controls, forms, overlays built on
+Eighty-nine primitives so far - the everyday controls, forms, overlays built on
 [Base UI](https://base-ui.com), menus and selection, the command palette,
 tables and long lists, charts, the screens between asking for data and showing
 it, markdown, code and diffs, a desktop window's own chrome and the three
@@ -153,7 +153,7 @@ where it measured 3.49:1. Derived, it is white there, at 6.01:1.
 
 ## Status
 
-The theme, the scales, an accent per product, and eighty-four primitives are
+The theme, the scales, an accent per product, and eighty-nine primitives are
 in daily use across two products of the line. Every component installs from a
 versioned registry and passes its own gate - axe, the keyboard, a dependency
 budget and a picture in both themes - before it ships.

package/dist/registry.json

@@ -309,7 +309,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -328,7 +328,7 @@
       "description": "The shape everyone recognises: weeks as columns, weekdays as rows, time running left to right, and a value carried by how dark a square is. Two products of the line asked for it by name before it existed.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/activity-weeks.json"
@@ -348,7 +348,7 @@
       "title": "Activity-legend",
       "description": "Separate from the grid because a caller showing three grids on one screen wants one legend, and because the words in it are the product's.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/activity-heatmap.json",
@@ -386,7 +386,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -398,6 +398,25 @@
         }
       ]
     },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "title": "Avatar",
+      "description": "A person, in the space of a word. Every screen that lists people needs one, and the three things that go wrong with it are always the same:\n * - **The picture fails to load** and a broken-image glyph appears where a   face was. The fallback is not a nicety; it is the state this component   spends most of its life in, because half the people in any list have no   picture at all.",
+      "dependencies": [
+        "class-variance-authority",
+        "dowel-ui@^0.27.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/avatar.tsx",
+          "target": "@ui/avatar.tsx",
+          "type": "registry:ui",
+          "content": "import { useState, type HTMLAttributes, type ImgHTMLAttributes, type ReactNode } from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\n\n/*\n * Avatar and AvatarGroup.\n *\n * A person, in the space of a word. Every screen that lists people needs one,\n * and the three things that go wrong with it are always the same:\n *\n * - **The picture fails to load** and a broken-image glyph appears where a\n *   face was. The fallback is not a nicety; it is the state this component\n *   spends most of its life in, because half the people in any list have no\n *   picture at all.\n * - **The initials are cut from the wrong end.** Splitting a name on spaces\n *   and taking the first letter of each part is the version everyone writes,\n *   and it turns a one-word name into one letter, a hyphenated surname into\n *   three, and a name in a script without spaces into whatever fell out.\n * - **It is announced twice.** A picture with the person's name as `alt`, next\n *   to the person's name as text, reads the name twice to a screen reader.\n *\n * So the picture is `alt=\"\"` and the name lives in the container's label; the\n * initials are computed by a rule that says what it does; and the fallback is\n * the default rather than the exception.\n *\n * What it does not do is choose a colour from the name. A hash of a string\n * into a hue looks charming on a design page and produces, in a real list,\n * colours that collide with the status vocabulary - a face is not `--bad` -\n * and that differ between products for the same person. The ground is the\n * neutral `--soft`, always, and identity comes from the picture or the\n * letters.\n */\n\nexport const avatarVariants = cva(\n  'relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-soft font-medium text-dim select-none',\n  {\n    variants: {\n      size: {\n        xs: 'size-5 text-2xs',\n        sm: 'size-6 text-2xs',\n        md: 'size-8 text-xs',\n        lg: 'size-10 text-sm',\n        xl: 'size-14 text-lg',\n      },\n      shape: {\n        circle: 'rounded-full',\n        /* For a thing rather than a person - a project, a repository. Square\n         * is how every other tool says \"this is not a face\", and borrowing\n         * that saves the product a caption. */\n        square: 'rounded-md',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  },\n)\n\n/**\n * The letters shown when there is no picture.\n *\n * Exported because it is the part a product is most likely to want on its own -\n * in a mention, in a chart legend - and because a rule you can call is a rule\n * you can test.\n *\n * What it does, and why:\n *\n * - Words are what remain after whitespace; punctuation between them (a\n *   hyphenated surname, an initial with a dot) does not make a new word, so\n *   `Anne-Marie Dubois` is `AD` and not `AMD`.\n * - Two letters when there are two or more words, taken from the first and the\n *   *last* - the last word is the family name in most of the line's languages,\n *   and a middle name has no business on the tile.\n * - Two letters from a single word, because one letter on its own is a smaller\n *   difference between two people than the tile is wide.\n * - Case is raised at the end, once, so a name in a script without case comes\n *   through unchanged rather than mangled.\n *\n * Uses the string iterator rather than `charAt`: a name may begin with an\n * emoji or a character outside the basic plane, and taking half of a surrogate\n * pair puts a replacement glyph on the tile.\n */\nexport function initialsOf(name: string, count = 2): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean)\n  const first = words[0]\n  const last = words[words.length - 1]\n  if (first === undefined || last === undefined) return ''\n\n  const firstOf = (word: string) => [...word][0] ?? ''\n\n  const letters =\n    words.length === 1 ? [...first].slice(0, count) : [firstOf(first), firstOf(last)].slice(0, count)\n\n  return letters.join('').toLocaleUpperCase()\n}\n\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Who or what this stands for. Always required: it is the name a reader who\n   * does not see the picture gets, and the source of the initials. */\n  name: string\n  /** The picture. Absent, or failing to load, falls back to the initials. */\n  src?: string\n  /** Anything to draw instead of the initials when there is no picture - an\n   * icon for a thing that is not a person. */\n  fallback?: ReactNode\n  /** Passed to the `<img>`, for `loading` or `referrerPolicy`. */\n  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError'>\n}\n\nexport function Avatar({\n  name,\n  src,\n  fallback,\n  size,\n  shape,\n  imgProps,\n  className,\n  ...props\n}: AvatarProps) {\n  // A picture that 404s is the common case, not the odd one: profile hosts\n  // expire links. Without this the tile shows a browser's broken-image glyph,\n  // which is worse than the initials it was covering.\n  const [failed, setFailed] = useState(false)\n  const showImage = Boolean(src) && !failed\n\n  return (\n    <span\n      className={cn(avatarVariants({ size, shape }), className)}\n      // The tile as a whole is the picture of the person. The `<img>` inside\n      // carries `alt=\"\"` so the name is announced once, from here.\n      role=\"img\"\n      aria-label={name}\n      {...props}\n    >\n      {showImage ? (\n        <img\n          {...imgProps}\n          src={src}\n          alt=\"\"\n          onError={() => setFailed(true)}\n          className={cn('size-full object-cover', imgProps?.className)}\n        />\n      ) : (\n        (fallback ?? initialsOf(name))\n      )}\n    </span>\n  )\n}\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** How many tiles to show before the rest become a count. */\n  max?: number\n  /** The people. Given as data rather than as children, because the group has\n   * to know how many there are to say how many are hidden. */\n  people: Array<{ name: string; src?: string }>\n  size?: AvatarProps['size']\n  /** What the whole row is called, for a screen reader - \"Assignees\", in the\n   * product's word. */\n  label?: string\n}\n\n/**\n * A row of faces, overlapping, with a count for the rest.\n *\n * The overlap is what makes this a group rather than a list: it says \"these\n * belong to one thing\" in less width than the names would take. The order is\n * the caller's, and the first tile is on top - the eye reads left to right and\n * the leftmost should be the whole one.\n *\n * The count tile is not an avatar. It has no name behind it, so it is not\n * `role=\"img\"` and gets no label of its own; the group's label covers the row,\n * and `+3` is read as the text it is.\n */\nexport function AvatarGroup({\n  people,\n  max = 4,\n  size = 'sm',\n  label,\n  className,\n  ...props\n}: AvatarGroupProps) {\n  const shown = people.slice(0, Math.max(0, max))\n  const hidden = people.length - shown.length\n\n  return (\n    <div\n      className={cn('flex items-center', className)}\n      role={label ? 'group' : undefined}\n      aria-label={label}\n      {...props}\n    >\n      {shown.map((person, index) => (\n        <Avatar\n          key={`${person.name}-${index}`}\n          name={person.name}\n          src={person.src}\n          size={size}\n          // The ring is the page's own background, so each tile cuts a clean\n          // edge out of the one behind it. `-ml` on all but the first, because\n          // the first has nothing to overlap.\n          //\n          // The stack runs the other way from the DOM: later siblings paint on\n          // top by default, which would put the last face over the first. The\n          // eye reads left to right and expects the leftmost tile whole, so\n          // the order is reversed explicitly.\n          style={{ zIndex: shown.length - index }}\n          className={cn('relative ring-2 ring-bg', index > 0 && '-ml-2')}\n        />\n      ))}\n      {hidden > 0 && (\n        <span\n          className={cn(avatarVariants({ size, shape: 'circle' }), 'relative -ml-2 ring-2 ring-bg')}\n          // Behind every face, at the end of the row.\n          style={{ zIndex: 0 }}\n        >\n          +{hidden}\n        </span>\n      )}\n    </div>\n  )\n}\n"
+        }
+      ]
+    },
     {
       "name": "badge",
       "type": "registry:ui",
@@ -405,7 +424,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -424,7 +443,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -443,7 +462,7 @@
       "description": "Bars rather than a line, and the distinction is the data's not the drawing's: a line says the value exists between the points, a column says each period is its own sum. Hours worked in a week is a sum - there is no \"Wednesday afternoon\" reading between two weeks - so it is a column.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -463,7 +482,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -497,7 +516,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar-math.json"
@@ -518,7 +537,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -537,7 +556,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -556,7 +575,7 @@
       "description": "The frame around a piece of code is the same everywhere and is written again in every product: the scroll that must not wrap, the gutter of line numbers that must not be selectable, the copy button, the caption saying which file this is, and the marking of the lines the reader was sent here to look at.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/copy-button.json"
@@ -576,7 +595,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -596,7 +615,7 @@
       "title": "Column-resize-handle",
       "description": "The handle, and the hook that keeps the widths it produces. Pointer events rather than HTML5 drag-and-drop: a desktop shell that takes file drops for itself never lets a `dragstart` reach the page, so the native API is a handle that does nothing there; pointer capture on the handle also keeps the drag alive when the pointer runs ahead of the cell, which at any speed above a crawl it does.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -616,7 +635,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json",
@@ -639,7 +658,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/combobox.json",
@@ -662,7 +681,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -681,7 +700,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/menu.json"
@@ -701,7 +720,7 @@
       "title": "Copy-button",
       "description": "Whatever a product shows in a panel - code, a payload, a log, one side of a comparison - somebody eventually wants to take it away, and the button that lets them is written again every time with the same three things missed.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -719,7 +738,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -737,7 +756,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar.json",
@@ -760,7 +779,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar.json",
@@ -785,7 +804,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -820,7 +839,7 @@
       "description": "The question this answers is \"how did this read before, and how does it read now\" - a version against the one before it, a proposal against what is there, a file against what is on disk. Not a code review: there is no staging, no comment, nothing to accept. It is for looking.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/copy-button.json",
@@ -843,7 +862,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -861,7 +880,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -882,7 +901,7 @@
       "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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -920,7 +939,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -938,7 +957,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -956,7 +975,7 @@
       "title": "Filter-popover",
       "description": "A text box, a handful of checkboxes - with one way to clear it. The shell only: what goes in the panel is the caller's, since a stage is ticked and a title is typed and the popover has no opinion.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json",
@@ -977,7 +996,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1011,7 +1030,7 @@
       "title": "Json-viewer",
       "description": "What a product reaches for when it has to show a response, a settings file, a webhook payload - data the reader needs to understand, not edit. The alternative it replaces is `JSON.stringify(value, null, 2)` inside a `<pre>`, which is fine for twenty lines and useless for two hundred: nothing folds, nothing is findable, and the shape of the document is somewhere inside the indentation.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/json-rows.json"
@@ -1031,7 +1050,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1050,7 +1069,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1069,7 +1088,7 @@
       "description": "The distinction against its neighbours is the data's, not the drawing's. A column says each period is its own sum - hours worked in a week, and there is no Wednesday-afternoon figure between two weeks. A line says the value existed the whole time and was sampled: an account balance, a price, a temperature. Drawing a sum as a line claims readings nobody took; drawing a level as columns throws away the thing being watched.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/line-scale.json"
@@ -1105,7 +1124,7 @@
       "title": "Marked-text",
       "description": "A textarea cannot colour a word. The way round it is older than React: draw the same text twice, once as marked-up HTML underneath and once as the textarea on top with its own text transparent, so the caret and the selection are the browser's and the colours are ours. The two have to agree on every metric - font, size, line height, padding, wrapping - or the marks slide off the words they mark. So both take ONE class list, given by the caller, and the textarea adds only what makes it invisible.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1125,7 +1144,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1143,7 +1162,7 @@
       "title": "Notification-bell",
       "description": "A bell that is always lit is a bell nobody reads, so the count is the product's decision and this draws it: nothing at zero, the number past that, `9+` past nine. Pressing it does not leave the screen - the last few entries open under it and the whole history is one more click, which is the shape every product converged on once the first one tried a page.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json",
@@ -1165,7 +1184,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1185,7 +1204,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1203,7 +1222,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/select.json"
@@ -1223,7 +1242,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json"
@@ -1244,7 +1263,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1262,7 +1281,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1284,7 +1303,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1304,7 +1323,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1324,7 +1343,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1363,7 +1382,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1381,7 +1400,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1399,7 +1418,7 @@
       "title": "Relative-time",
       "description": "The relative-time primitive.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1417,7 +1436,7 @@
       "title": "Reorderable-list",
       "description": "The columns in a column picker, the stops of a dial, the roles of a profile. A hook and a grip rather than a list component: the rows are already something else's - a menu's items, a form's fields - and a component wrapping them would have to reproduce whatever that something else does.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1435,7 +1454,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/spinner.json"
@@ -1455,7 +1474,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json",
@@ -1478,7 +1497,7 @@
       "description": "A settings screen is the usual case: five or six sections, each its own address so it can be linked to and the back button walks between them, listed down the left with the current one tinted. Every product draws the same column, and every product draws the active row a little differently - which is exactly the drift a shared list exists to stop.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1498,7 +1517,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1528,13 +1547,31 @@
         }
       ]
     },
+    {
+      "name": "skeleton-of",
+      "type": "registry:ui",
+      "title": "Skeleton-of",
+      "description": "`Skeleton` and its shapes solved half the problem: they gave a product a list, a card and a grid to reach for instead of a spinner. The half left over is the one that actually causes the jump, and it is a human one - somebody has to look at the real thing, judge how many rows it has and how tall they are, and type that in. The judgement is made once, the screen changes a month later, and the placeholder goes on promising the old shape.",
+      "dependencies": [
+        "dowel-ui@^0.27.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/skeleton-of.tsx",
+          "target": "@ui/skeleton-of.tsx",
+          "type": "registry:ui",
+          "content": "import { useCallback, useLayoutEffect, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from 'dowel-ui'\n\n/*\n * SkeletonOf - a placeholder that remembers the shape instead of guessing it.\n *\n * `Skeleton` and its shapes solved half the problem: they gave a product a\n * list, a card and a grid to reach for instead of a spinner. The half left\n * over is the one that actually causes the jump, and it is a human one -\n * somebody has to look at the real thing, judge how many rows it has and how\n * tall they are, and type that in. The judgement is made once, the screen\n * changes a month later, and the placeholder goes on promising the old shape.\n * The line's own calendar is the recorded case: four short lines standing in\n * for a six-row month grid, and the skeleton was itself the jump it existed to\n * prevent.\n *\n * The rule is the same one `Skeleton` is built on:\n *\n *   **A skeleton of the wrong shape is worse than no skeleton.**\n *\n * What is new here is where the shape comes from. The content was on the\n * screen a moment ago; it measured itself, and nothing else knows its shape\n * better. So this keeps what was there - how many rows, how tall each one, how\n * tall the whole block - and draws that back while the next load is in flight.\n *\n * **Why measuring and not reading the source.** The obvious version of \"derive\n * the skeleton from the markup\" is to parse the component's JSX and emit\n * boxes from it. It cannot work, and the reason is worth writing down: the\n * shape on screen is not in the source. It is the source plus the data (five\n * rows or fifty), plus the viewport (one column or three), plus the theme's\n * own spacing. A generator reading `list.tsx` sees one `<li>` in a `map` and\n * knows nothing about any of that. Measuring the rendered thing sees all of it\n * at once, and it costs a `ResizeObserver` rather than a build step.\n *\n * **The first load has nothing to remember**, and that is the case a product\n * must still answer: `fallback` is what stands in until there is a measurement\n * to use. After that the fallback is never seen again on that screen.\n *\n * Everything drawn here is `aria-hidden`, like every other skeleton - the\n * loading fact belongs to the region and is said once, by whatever owns it.\n */\n\n/** What was measured: the block's own height, and the rows inside it.\n *\n * Kept as plain numbers rather than as a copy of the DOM, because that is all\n * a placeholder needs and because a detached node would pin the whole tree in\n * memory for as long as the screen lives. */\nexport interface MeasuredShape {\n  /** The block's height when it was last full, in pixels. */\n  height: number\n  /** The height of each row inside it. Empty when nothing matched the row\n   * selector - a block with no repeating part is a single box. */\n  rows: number[]\n}\n\n/**\n * Measure a node: its height, and the heights of the rows inside it.\n *\n * Exported because a product occasionally wants the measurement without the\n * component - to persist it between sessions, for instance, so that even the\n * first load of a screen already knows its shape.\n *\n * Rows are found by selector rather than by walking children, because the\n * repeating part is rarely a direct child: a table's rows are inside a\n * `<tbody>`, a list's inside a `<ul>` that may itself be inside a scroller.\n */\nexport function measureShape(node: HTMLElement, rowSelector?: string): MeasuredShape {\n  const height = node.getBoundingClientRect().height\n  const rows = rowSelector\n    ? [...node.querySelectorAll(rowSelector)].map((row) => row.getBoundingClientRect().height)\n    : []\n  return { height, rows }\n}\n\nexport interface SkeletonOfProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Whether the content is on its way. While false the children are shown and\n   * measured; while true the remembered shape is drawn in their place. */\n  pending: boolean\n  /** The real thing. Rendered and measured when not pending. */\n  children: ReactNode\n  /**\n   * What counts as a row - `'tr'`, `'li'`, `'[data-row]'`. Given, the\n   * placeholder draws one box per row at the height that row had; omitted, it\n   * draws a single box the height of the whole block.\n   */\n  rowSelector?: string\n  /**\n   * What to draw before anything has been measured - the first load of a\n   * screen, where there is genuinely nothing to remember. A `SkeletonList` of\n   * roughly the right size is the usual answer.\n   */\n  fallback?: ReactNode\n  /**\n   * A shape measured earlier - from `measureShape`, stored by the product\n   * between sessions. Used until this instance measures something itself, so\n   * even a first load can be honest.\n   */\n  shape?: MeasuredShape\n  /** The gap between drawn rows, as a Tailwind class. Matches whatever the\n   * real list uses; the rows' own heights come from the measurement. */\n  gapClassName?: string\n}\n\n/**\n * Shows the children, remembers their shape, and draws that shape back while\n * the next load is in flight.\n *\n * The measurement is taken in a layout effect and on every resize, not once on\n * mount: a list that gains rows, a window that narrows, a font that loads late\n * all change the shape, and a placeholder built from the first measurement\n * would be wrong in exactly the way this component exists to prevent.\n */\nexport function SkeletonOf({\n  pending,\n  children,\n  rowSelector,\n  fallback,\n  shape,\n  gapClassName,\n  className,\n  ...props\n}: SkeletonOfProps) {\n  const [measured, setMeasured] = useState<MeasuredShape | undefined>(shape)\n  const node = useRef<HTMLDivElement | null>(null)\n\n  const remember = useCallback(() => {\n    const element = node.current\n    if (!element) return\n    const next = measureShape(element, rowSelector)\n    // A block of no height is a block that has not been laid out - a hidden\n    // tab, a parent still collapsing. Remembering a zero would draw nothing\n    // and claim it was the shape.\n    if (next.height <= 0) return\n    setMeasured((held) =>\n      held && held.height === next.height && sameRows(held.rows, next.rows) ? held : next,\n    )\n  }, [rowSelector])\n\n  useLayoutEffect(() => {\n    // Only the branch that renders the content carries the ref, so while\n    // pending there is nothing to measure and `remember` finds no node. That\n    // is what keeps the memory from decaying: measuring the placeholder would\n    // record the shape it had just drawn from memory, and each load would\n    // remember a little less of what the content actually looked like.\n    //\n    // It is worth stating rather than relying on, because it rests on React\n    // clearing a ref when the node it points at unmounts. The guard below is\n    // that fact made explicit - if the component ever renders both branches,\n    // this is the line that keeps the loop from closing.\n    if (pending || !node.current) return\n    remember()\n\n    // jsdom has no ResizeObserver, and a product may run in one. The component\n    // is still correct without it: it has the mount measurement, it just does\n    // not follow later changes.\n    if (typeof ResizeObserver === 'undefined') return\n    const element = node.current\n    if (!element) return\n    const observer = new ResizeObserver(remember)\n    observer.observe(element)\n    return () => observer.disconnect()\n  }, [pending, remember, children])\n\n  if (!pending) {\n    return (\n      <div ref={node} className={className} {...props}>\n        {children}\n      </div>\n    )\n  }\n\n  // Nothing measured yet, and nothing handed over: the first load of a screen\n  // that did not say what it is waiting for. Saying nothing is better than\n  // drawing a shape made up on the spot.\n  if (!measured) return <>{fallback ?? null}</>\n\n  return (\n    <div aria-hidden className={cn('flex flex-col', gapClassName ?? 'gap-1', className)} {...props}>\n      {measured.rows.length > 0 ? (\n        measured.rows.map((height, row) => (\n          <div\n            key={row}\n            style={{ height }}\n            className=\"animate-pulse shrink-0 rounded-md bg-soft\"\n          />\n        ))\n      ) : (\n        <div style={{ height: measured.height }} className=\"animate-pulse rounded-md bg-soft\" />\n      )}\n    </div>\n  )\n}\n\n/** Whether two row measurements are the same run of heights.\n *\n * Compared rather than replaced wholesale so that a resize that changes\n * nothing does not hand back a new object every frame - which would re-render\n * the subtree on every pixel of a window drag. */\nfunction sameRows(left: number[], right: number[]): boolean {\n  return left.length === right.length && left.every((height, index) => height === right[index])\n}\n"
+        }
+      ]
+    },
     {
       "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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1553,7 +1590,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1572,7 +1609,7 @@
       "description": "The shape of a history, not a chart of it: no axes, no gridlines, no ticks.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1591,7 +1628,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1609,7 +1646,7 @@
       "title": "Splash",
       "description": "A desktop product has a second or two between the window appearing and the first screen being ready - a workspace to open, a database to migrate, a plugin to start - and a blank window for that long reads as a crash. So the window shows the product instead: the mark, the name, the promise, the version, and a bar that sweeps until there is something to draw.",
       "dependencies": [
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1628,7 +1665,7 @@
       "description": "The smallest thing on a dashboard and the one every product writes itself: a label above, a number below, sometimes a word about which way it moved.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1640,6 +1677,25 @@
         }
       ]
     },
+    {
+      "name": "status-dot",
+      "type": "registry:ui",
+      "title": "Status-dot",
+      "description": "The smallest thing a screen can say about something's condition: a server is up, a job failed, a person is away. Every product of the line drew its own coloured circle, and every one of them drew it the same way - a `<span>` with a background - which means the condition existed for exactly the readers who could see it.",
+      "dependencies": [
+        "class-variance-authority",
+        "dowel-ui@^0.27.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/status-dot.tsx",
+          "target": "@ui/status-dot.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 * StatusDot and StatusBadge.\n *\n * The smallest thing a screen can say about something's condition: a server is\n * up, a job failed, a person is away. Every product of the line drew its own\n * coloured circle, and every one of them drew it the same way - a `<span>` with\n * a background - which means the condition existed for exactly the readers who\n * could see it.\n *\n * The rule this pair is built on, and the reason a dot is not a component you\n * can call with a colour alone:\n *\n *   **Colour is emphasis. The word is the message.**\n *\n * That is not a preference. About one man in twelve does not separate red from\n * green, `--good` and `--bad` are the two hues most screens rest on, and a\n * printed or projected screen loses the distinction for everybody. The theme\n * already states the rule in prose; here it is structure: `StatusDot` will not\n * render without a label, and a label that is not shown is placed where a\n * screen reader will still read it.\n *\n * `StatusBadge` is the same fact when there is room to write it out. It exists\n * separately rather than as a variant because the choice between them is about\n * the space on the screen, not about the state - and a product that has the\n * room should be nudged to use the words.\n *\n * What neither does is carry a word of its own. \"Online\" is the product's\n * vocabulary in the product's language, and a primitive that shipped English\n * strings could not be translated.\n */\n\n/** The conditions the line's vocabulary can name.\n *\n * `neutral` is not a fifth colour - it is the absence of a judgement, for the\n * states that are neither good nor bad: queued, archived, unknown. Drawing\n * those in one of the four would be a claim the product did not make. */\nexport type Status = 'good' | 'warn' | 'bad' | 'info' | 'neutral'\n\nexport const statusDotVariants = cva('inline-block shrink-0 rounded-full', {\n  variants: {\n    status: {\n      good: 'bg-good',\n      warn: 'bg-warn',\n      bad: 'bg-bad',\n      info: 'bg-info',\n      neutral: 'bg-line-2',\n    },\n    size: {\n      /* Beside `text-xs`, where a dot much larger than the x-height reads as a\n       * bullet rather than as a state. */\n      sm: 'size-1.5',\n      md: 'size-2',\n      lg: 'size-2.5',\n    },\n  },\n  defaultVariants: { status: 'neutral', size: 'md' },\n})\n\n/** The status as ink rather than as a fill - what an icon standing in for the\n * dot is drawn in. Separate from the fill variants because the two are used in\n * different places and a single `cva` would have to undo one to get the\n * other. */\nconst statusInk: Record<Status, string> = {\n  good: 'text-good',\n  warn: 'text-warn',\n  bad: 'text-bad',\n  info: 'text-info',\n  neutral: 'text-dim',\n}\n\nexport interface StatusDotProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>,\n    VariantProps<typeof statusDotVariants> {\n  /**\n   * What this condition is called, in the product's words. Required, and not\n   * for decoration: it is what the dot means to anyone who does not see the\n   * colour.\n   */\n  label: string\n  /**\n   * Whether to print the label beside the dot.\n   *\n   * `false` keeps it for a screen reader only - the right answer inside a\n   * dense table cell, where the column heading already says what is being\n   * judged. It is never dropped.\n   */\n  showLabel?: boolean\n  /**\n   * A shape drawn inside the dot's place instead of the circle - a tick, a\n   * cross, an exclamation. The second channel for a reader who sees the dot\n   * but not its hue, and the reason `pulse` is not the only way to differ.\n   */\n  icon?: ReactNode\n}\n\n/**\n * A dot, and the word it stands for.\n *\n * The word is always in the accessibility tree. When it is not printed the dot\n * is not `aria-hidden` and not `role=\"presentation\"` - it is a labelled image,\n * because a status nobody can read is the defect this component exists to\n * prevent.\n */\nexport function StatusDot({\n  status,\n  size,\n  label,\n  showLabel = false,\n  icon,\n  className,\n  ...props\n}: StatusDotProps) {\n  const mark = icon ? (\n    // The icon stands where the dot would, so it takes the status as its ink\n    // rather than as a fill.\n    <span\n      className={cn('inline-flex shrink-0 items-center justify-center', statusInk[status ?? 'neutral'])}\n      aria-hidden\n    >\n      {icon}\n    </span>\n  ) : (\n    <span className={statusDotVariants({ status, size })} aria-hidden />\n  )\n\n  return (\n    <span\n      className={cn('inline-flex items-center gap-1.5 whitespace-nowrap', className)}\n      // Announced as one thing. Without this the dot and the word are two\n      // nodes and a reader hears the label twice - once from the image, once\n      // from the text beside it.\n      role=\"img\"\n      aria-label={label}\n      {...props}\n    >\n      {mark}\n      {showLabel && (\n        <span className=\"text-xs text-dim\" aria-hidden>\n          {label}\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const statusBadgeVariants = cva(\n  'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap',\n  {\n    variants: {\n      status: {\n        good: 'bg-good-soft text-good',\n        warn: 'bg-warn-soft text-warn',\n        bad: 'bg-bad-soft text-bad',\n        info: 'bg-info-soft text-info',\n        neutral: 'bg-soft text-dim',\n      },\n    },\n    defaultVariants: { status: 'neutral' },\n  },\n)\n\nexport interface StatusBadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statusBadgeVariants> {\n  /** A shape before the word - the second channel, where there is one. */\n  icon?: ReactNode\n  /** Draw the dot before the word. Off when an `icon` is given: two marks for\n   * one state is noise. */\n  dot?: boolean\n}\n\n/**\n * The state, written out, on a tinted ground.\n *\n * Distinct from `Badge`, which is a label of any kind: this one is about a\n * condition, takes the same `Status` vocabulary as the dot, and is what a\n * product should reach for when the answer is \"failed\" rather than \"3\".\n *\n * No `role=\"img\"` here and no `aria-label`: the word is on the screen, and\n * naming the element as an image would replace the text a reader can already\n * hear with a duplicate of it.\n */\nexport function StatusBadge({\n  status,\n  icon,\n  dot = true,\n  className,\n  children,\n  ...props\n}: StatusBadgeProps) {\n  const showDot = dot && !icon\n  return (\n    <span className={cn(statusBadgeVariants({ status }), className)} {...props}>\n      {icon && (\n        <span className=\"inline-flex shrink-0 items-center justify-center\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      {showDot && (\n        <span\n          className={cn(\n            'inline-block size-1.5 shrink-0 rounded-full',\n            // `currentColor` rather than the status fill: inside the badge the\n            // text already carries the hue, and a second token would drift\n            // from it the first time either changed.\n            'bg-current',\n          )}\n          aria-hidden\n        />\n      )}\n      {children}\n    </span>\n  )\n}\n"
+        }
+      ]
+    },
     {
       "name": "switch",
       "type": "registry:ui",
@@ -1647,7 +1703,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1682,7 +1738,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/table-sort.json"
@@ -1703,7 +1759,7 @@
       "description": "Free text turned into a list: type a word, press Enter, it becomes a chip.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/chip.json",
@@ -1724,7 +1780,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1738,13 +1794,32 @@
         }
       ]
     },
+    {
+      "name": "tier",
+      "type": "registry:ui",
+      "title": "Tier",
+      "description": "The tier primitive.",
+      "dependencies": [
+        "class-variance-authority",
+        "dowel-ui@^0.27.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/tier.tsx",
+          "target": "@ui/tier.tsx",
+          "type": "registry:ui",
+          "content": "import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\n\n/*\n * Tiers: the band a number falls in, the road of bands, and one axis of the\n * score that produced it.\n *\n * The shape comes from kilna, where a work is scored on several axes and the\n * total lands in a named band - \"draft\", \"publishable\", \"a clip\". Two more\n * products of the line grade things the same way (a health score, a review\n * verdict), which is what makes this a primitive rather than a screen.\n *\n * The three pieces answer three different questions and are separate for that\n * reason:\n *\n * - `TierBadge` - *which band is this in?* A verdict, in one word.\n * - `TierRuler` - *how far into it, and how far to the next?* The verdict\n *   stops being a pronouncement out of nowhere: \"nearly a clip\" is the thing\n *   someone wants to know while they are still moving marks around.\n * - `AxisBar` - *what did one axis contribute?* A row of segments read left to\n *   right, which a column of numerals is not.\n *\n * The defect corrected on the way in, and the reason not to copy the donor as\n * it stands: its ruler drew the bands to scale and then laid the labels out\n * with `justify-between`, which spaces them evenly. With bands at 0, 50, 78\n * and 90 the label \"78\" sat a fifth of the bar away from the boundary it\n * named. Here the labels are placed by the same arithmetic as the bands, so\n * the distance you read is the distance there is.\n */\n\n/** A band: where it starts, and what it is called.\n *\n * `min` is on the same scale as the value - 0-100 in every consumer so far,\n * but the components do not require it: `TierRuler` takes the ends explicitly.\n * The band runs from its `min` to the next band's, and the last one runs to\n * the end. */\nexport interface Tier {\n  /** Stable key, for React and for the caller's own lookups. */\n  key: string\n  /** What it is called, in the product's words. */\n  label: string\n  /** The lowest value in this band. */\n  min: number\n  /** How the band is coloured. `accent` is the default - a band is a position\n   * on the product's own scale, not a judgement in the status vocabulary. A\n   * product that means \"this one is bad\" says so. */\n  status?: 'accent' | 'good' | 'warn' | 'bad' | 'info' | 'neutral'\n}\n\n/**\n * The bands in order, with the ones that cannot be drawn dropped.\n *\n * Exported because a product that has tiers usually needs them sorted\n * somewhere else too, and because sorting inside a render is the kind of thing\n * that quietly becomes three different sorts.\n */\nexport function orderedTiers(tiers: Tier[], min = 0, max = 100): Tier[] {\n  return tiers\n    .filter((tier) => Number.isFinite(tier.min) && tier.min >= min && tier.min <= max)\n    .sort((left, right) => left.min - right.min)\n}\n\n/**\n * Which band a value is standing in.\n *\n * The highest band whose `min` the value has reached. Below every band - which\n * a caller can reach by scoring under the first `min` - the answer is\n * `undefined`, and that is a real state rather than a reason to clamp: a\n * product that shows a badge for a band nothing is in would be inventing one.\n */\nexport function tierAt(tiers: Tier[], value: number): Tier | undefined {\n  const ordered = orderedTiers(tiers)\n  let standing: Tier | undefined\n  for (const tier of ordered) {\n    if (value >= tier.min) standing = tier\n    else break\n  }\n  return standing\n}\n\nconst tierFill: Record<NonNullable<Tier['status']>, string> = {\n  accent: 'bg-accent',\n  good: 'bg-good',\n  warn: 'bg-warn',\n  bad: 'bg-bad',\n  info: 'bg-info',\n  neutral: 'bg-line-2',\n}\n\n/** The same bands at a quarter strength, for the stretch already passed.\n *\n * Written out rather than composed with an opacity utility, because a fill and\n * an opacity are two properties and a caller's `className` can only win\n * against one of them. */\nconst tierPassedFill: Record<NonNullable<Tier['status']>, string> = {\n  accent: 'bg-accent/40',\n  good: 'bg-good/40',\n  warn: 'bg-warn/40',\n  bad: 'bg-bad/40',\n  info: 'bg-info/40',\n  neutral: 'bg-line-2/40',\n}\n\nexport const tierBadgeVariants = cva(\n  'inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap',\n  {\n    variants: {\n      status: {\n        accent: 'bg-accent-soft text-accent',\n        good: 'bg-good-soft text-good',\n        warn: 'bg-warn-soft text-warn',\n        bad: 'bg-bad-soft text-bad',\n        info: 'bg-info-soft text-info',\n        neutral: 'bg-soft text-dim',\n      },\n    },\n    defaultVariants: { status: 'accent' },\n  },\n)\n\nexport interface TierBadgeProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>,\n    VariantProps<typeof tierBadgeVariants> {\n  /** The band's name. */\n  label: ReactNode\n  /** The number behind the verdict, if the product shows it. Drawn quieter\n   * than the name: the band is the answer and the score is the evidence. */\n  value?: ReactNode\n}\n\n/**\n * The band, as a verdict.\n *\n * Square-cornered rather than a pill, which is what separates it from\n * `StatusBadge` at a glance: a tier is a position on a scale the product owns,\n * a status is a condition from the line's fixed vocabulary, and a screen that\n * shows both should not make the reader compare colours to tell which is\n * which.\n */\nexport function TierBadge({ label, value, status, className, ...props }: TierBadgeProps) {\n  return (\n    <span className={cn(tierBadgeVariants({ status }), className)} {...props}>\n      {label}\n      {value !== undefined && <span className=\"font-normal opacity-70\">{value}</span>}\n    </span>\n  )\n}\n\nexport interface TierRulerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  tiers: Tier[]\n  /** Where the thing stands now. */\n  value: number\n  /** The ends of the road. */\n  min?: number\n  max?: number\n  /** What the ruler as a whole is called, for a screen reader, and what to say\n   * the value is. The product's words - the ruler has none. */\n  label: string\n  /** The value spoken instead of the bare number: \"7.8 out of 10, publishable\"\n   * is what a reader needs, and only the product can phrase it. */\n  valueText?: string\n  /** Print the band names under the road. */\n  showLabels?: boolean\n}\n\n/**\n * The bands as a road, with the value standing somewhere along it.\n *\n * Drawn to scale, which is the whole point: a band that starts at 78 sits\n * nearly four fifths along, and the gap you are looking at is the gap you have\n * to close.\n *\n * Three states per band, not two - passed, standing in, still ahead. A flat\n * wash of \"reached\" over half the bar says only that the value is not at zero;\n * picking out the band being stood in is what carries the eye to where the\n * thing actually is.\n *\n * Reported as a `meter`: it is a measurement inside a known range, which is\n * exactly what that role is for, and it means a screen reader says the value\n * without the product building a sentence out of `aria-label`.\n */\nexport function TierRuler({\n  tiers,\n  value,\n  min = 0,\n  max = 100,\n  label,\n  valueText,\n  showLabels = true,\n  className,\n  ...props\n}: TierRulerProps) {\n  const ordered = orderedTiers(tiers, min, max)\n  const span = max - min\n\n  // A road needs at least a start and one boundary on it; below that there is\n  // nothing to show that a bare number would not say better.\n  if (ordered.length < 2 || span <= 0) return null\n\n  const at = Math.min(Math.max(value, min), max)\n  /** Where a value falls along the road, as a percentage of its length. */\n  const placeOf = (point: number) => ((point - min) / span) * 100\n\n  return (\n    <div className={cn('flex flex-col gap-1', className)} {...props}>\n      <div\n        role=\"meter\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={at}\n        aria-valuetext={valueText}\n        className=\"relative h-1.5 w-full overflow-hidden rounded-full bg-soft\"\n      >\n        {ordered.map((tier, index) => {\n          const next = ordered[index + 1]\n          const end = next === undefined ? max : next.min\n          const width = placeOf(end) - placeOf(tier.min)\n          if (width <= 0) return null\n\n          const reached = value >= tier.min\n          const standing = reached && (next === undefined || value < next.min)\n          const status = tier.status ?? 'accent'\n\n          return (\n            <span\n              key={tier.key}\n              style={{ left: `${placeOf(tier.min)}%`, width: `${width}%` }}\n              className={cn(\n                'absolute top-0 h-full',\n                standing ? tierFill[status] : reached ? tierPassedFill[status] : 'bg-line-2',\n                // A hairline of the page's own ground, so two adjacent bands of\n                // the same colour still read as two.\n                index > 0 && 'border-l border-bg',\n              )}\n            />\n          )\n        })}\n\n        {/* Where the value stands. A pale core inside a dark sheath, so the\n            mark keeps its contrast over a filled band as well as over the\n            empty road ahead. */}\n        <span\n          aria-hidden\n          style={{ left: `${placeOf(at)}%` }}\n          className=\"absolute top-1/2 h-2.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-bg ring-2 ring-text\"\n        />\n      </div>\n\n      {showLabels && (\n        <div aria-hidden className=\"relative h-4\">\n          {ordered.map((tier, index) => {\n            const place = placeOf(tier.min)\n            return (\n              <span\n                key={tier.key}\n                style={{\n                  left: `${place}%`,\n                  // The first label would hang off the left edge and the last\n                  // off the right, so the ends align to their edge and\n                  // everything between is centred on its boundary.\n                  transform:\n                    index === 0\n                      ? 'none'\n                      : index === ordered.length - 1 && place >= 100\n                        ? 'translateX(-100%)'\n                        : 'translateX(-50%)',\n                }}\n                className={cn(\n                  'absolute top-0 text-2xs',\n                  value >= tier.min ? 'font-medium text-dim' : 'text-faint',\n                )}\n              >\n                {tier.label}\n              </span>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport interface AxisBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** What this axis is called. */\n  label: string\n  /** The highest mark; one segment is drawn per whole point. */\n  scale: number\n  /** The mark, or `undefined` while the axis is unjudged. Not the same as\n   * zero: zero is a verdict, and a blank axis is the absence of one. */\n  value?: number\n  /** Given, the row becomes a control. Omitted, it is a read-only reading of a\n   * score someone else set. */\n  onChange?: (value: number | undefined) => void\n  /** The mark from which the total crosses into the next band, and what to\n   * call it. Absent when no mark on this axis gets there - and then nothing is\n   * drawn, because a line promising a band the axis cannot deliver is worse\n   * than no line. */\n  threshold?: { mark: number; label: string }\n  /** What to say instead of the bare number - \"unjudged\", in the product's\n   * word, when there is no mark. */\n  valueText?: string\n}\n\n/**\n * One axis of a score, as a row of segments.\n *\n * Scoring is a judgement, not data entry: the useful question is \"is this a\n * seven or an eight\", and a row you click answers it in one movement where a\n * spin box asks you to read, aim and type. The filled length is also readable\n * down a column of axes, which numerals are not.\n *\n * When it takes `onChange` it reports itself as a slider rather than as a row\n * of buttons, so the arrow keys, Home and End work the way they do everywhere\n * else, and a reader hears one value in a range instead of ten unlabelled\n * buttons. The row owns the keyboard; the segments are pointer targets only,\n * or tabbing past one axis would take ten presses.\n *\n * Read-only, it is a `meter` and not a disabled slider: nothing here is\n * disabled, the number is simply a fact.\n */\nexport function AxisBar({\n  label,\n  scale,\n  value,\n  onChange,\n  threshold,\n  valueText,\n  className,\n  ...props\n}: AxisBarProps) {\n  const marks = Math.max(1, Math.round(scale))\n  const interactive = onChange !== undefined\n\n  const step = (delta: number) => {\n    if (!onChange) return\n    // An unjudged axis steps onto the first or last mark rather than through\n    // zero: zero is a verdict of its own, and arrowing into it by accident\n    // would be one.\n    const next = value === undefined ? (delta > 0 ? 1 : marks) : value + delta\n    onChange(Math.min(Math.max(next, 0), marks))\n  }\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (!onChange) return\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        step(1)\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        step(-1)\n        break\n      case 'Home':\n        event.preventDefault()\n        onChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        onChange(marks)\n        break\n      // Back to unjudged, which no arrow key can reach - and which is not the\n      // same as scoring the axis zero.\n      case 'Backspace':\n      case 'Delete':\n        event.preventDefault()\n        onChange(undefined)\n        break\n      default:\n        break\n    }\n  }\n\n  return (\n    <div\n      role={interactive ? 'slider' : 'meter'}\n      tabIndex={interactive ? 0 : undefined}\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={marks}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      onKeyDown={interactive ? onKeyDown : undefined}\n      className={cn(\n        'flex gap-[3px] rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',\n        className,\n      )}\n      {...props}\n    >\n      {Array.from({ length: marks }, (_, index) => {\n        const mark = index + 1\n        const filled = value !== undefined && mark <= value\n        // The first mark that would carry the total over. The ring goes around\n        // the segment rather than on its leading edge: a rule beside the last\n        // mark reads as the end of the scale, which is exactly when the\n        // threshold matters most.\n        const crosses = threshold !== undefined && threshold.mark === mark\n\n        const shared = cn(\n          'relative h-5 flex-1 rounded-sm transition-colors',\n          filled ? 'bg-accent' : 'bg-soft',\n          crosses && 'ring-2 ring-inset ring-good',\n        )\n\n        return interactive ? (\n          // A `<span>` and not a `<button>`, which is what the donor used and\n          // what the accessibility gate rejected: a focusable control inside a\n          // `role=\"slider\"` is a nested interactive element, and `tabindex=-1`\n          // with `aria-hidden` does not undo that - assistive technology can\n          // still land on it, and WCAG 4.1.2 says so.\n          //\n          // Nothing is lost. The row already owns the keyboard, so the segment\n          // was never a keyboard target; it is a pointer target, which a span\n          // with a click handler is.\n          <span\n            key={mark}\n            aria-hidden\n            // Clicking the mark already set clears the axis, which is the only\n            // way back to unjudged with a pointer.\n            onClick={() => onChange?.(value === mark ? undefined : mark)}\n            title={crosses ? threshold.label : undefined}\n            className={cn(shared, 'cursor-pointer', filled ? 'hover:bg-accent-2' : 'hover:bg-line-2')}\n          />\n        ) : (\n          <span key={mark} aria-hidden className={shared} />\n        )\n      })}\n    </div>\n  )\n}\n"
+        }
+      ]
+    },
     {
       "name": "time-field",
       "type": "registry:ui",
       "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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1758,6 +1833,25 @@
         }
       ]
     },
+    {
+      "name": "timeline",
+      "type": "registry:ui",
+      "title": "Timeline",
+      "description": "What happened, in the order it happened: a release history, an audit trail, the steps a job went through. Four products of the line draw one, and all four drew it the same way - a list with a border on the left and a dot positioned over it by hand.",
+      "dependencies": [
+        "class-variance-authority",
+        "dowel-ui@^0.27.0"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "ui/timeline.tsx",
+          "target": "@ui/timeline.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 * Timeline.\n *\n * What happened, in the order it happened: a release history, an audit trail,\n * the steps a job went through. Four products of the line draw one, and all\n * four drew it the same way - a list with a border on the left and a dot\n * positioned over it by hand.\n *\n * Three things that version gets wrong, and which are the reason this is a\n * primitive:\n *\n * - **The rail runs past the last entry.** A border on the container ends\n *   where the container does, which is below the last dot - so the history\n *   trails off into a line going nowhere, and a reader cannot tell a finished\n *   list from one still loading. Here the rail is drawn per entry and the last\n *   one does not draw it.\n * - **It is a list, and says so.** A stack of `<div>`s is announced as nothing;\n *   an `<ol>` tells a reader how many entries there are and which one they are\n *   on, which is the whole navigational value of a history.\n * - **The state is a colour.** A red dot for a failed step is invisible to the\n *   reader it matters most to. The marker takes the same `Status` vocabulary as\n *   `StatusDot`, and the same rule applies: the colour is emphasis and the\n *   entry's own words are the message.\n *\n * The rail is drawn with a `<span>` rather than a border on the item, because\n * the segment has to start below the dot and run to the next one - a border\n * would start at the item's top edge and cut through the marker.\n */\n\nexport type TimelineStatus = 'good' | 'warn' | 'bad' | 'info' | 'neutral' | 'accent'\n\nexport const timelineMarkerVariants = cva(\n  'relative z-1 flex shrink-0 items-center justify-center rounded-full',\n  {\n    variants: {\n      status: {\n        accent: 'bg-accent text-on-accent',\n        good: 'bg-good text-on-good',\n        warn: 'bg-warn text-on-warn',\n        bad: 'bg-bad text-on-bad',\n        info: 'bg-info text-on-info',\n        neutral: 'bg-line-2 text-dim',\n      },\n      /** A step not taken yet: the ring of a dot with nothing in it, which is\n       * how every other tool draws \"not done\" and is worth borrowing. */\n      pending: {\n        true: 'border-2 border-line-2 bg-bg',\n        false: '',\n      },\n    },\n    defaultVariants: { status: 'neutral', pending: false },\n  },\n)\n\nexport interface TimelineProps extends HTMLAttributes<HTMLOListElement> {\n  /** Draw the rail and the markers on the right of the text, for a right-to-left\n   * reading or a history beside a wider body of content. */\n  side?: 'start' | 'end'\n}\n\n/**\n * The list itself.\n *\n * An ordered list, because the order is the content. A product that shows the\n * newest first hands them over in that order - the component does not sort,\n * since \"newest first\" and \"the order it happened\" are both right and only the\n * product knows which it means.\n */\nexport function Timeline({ side, className, children, ...props }: TimelineProps) {\n  // Defaulted here rather than in the parameter list: a string default in the\n  // props reads to the word gate as English shipped inside a primitive, and\n  // the rule it enforces is worth more than the shorter spelling.\n  const on = side ?? 'start'\n  return (\n    <ol\n      className={cn('flex flex-col', on === 'end' && 'items-end', className)}\n      data-side={on}\n      {...props}\n    >\n      {children}\n    </ol>\n  )\n}\n\nexport interface TimelineItemProps\n  extends Omit<HTMLAttributes<HTMLLIElement>, 'title'>,\n    VariantProps<typeof timelineMarkerVariants> {\n  /** The headline of the entry - what happened. */\n  title: ReactNode\n  /** When it happened. Drawn quieter, and given as a node so the product can\n   * pass its own `RelativeTime` rather than a string it formatted early. */\n  time?: ReactNode\n  /** A shape inside the marker - a tick, a cross, a number. The second\n   * channel, for a reader who does not separate the hues. */\n  icon?: ReactNode\n  /** The last entry does not draw a rail below it. Set by the product, because\n   * only it knows whether the history ends here or merely stops being shown. */\n  last?: boolean\n  /** Names the state in the product's words, for a reader who does not see the\n   * colour. Required whenever `status` carries meaning the title does not\n   * already say. */\n  statusLabel?: string\n}\n\n/**\n * One entry: a marker, a rail down to the next, and what happened.\n *\n * The rail belongs to this entry rather than to the list, so a history can end\n * cleanly - and so an entry can be rendered on its own in a test or a preview\n * without a container to inherit a border from.\n */\nexport function TimelineItem({\n  title,\n  time,\n  icon,\n  status,\n  pending,\n  last = false,\n  statusLabel,\n  className,\n  children,\n  ...props\n}: TimelineItemProps) {\n  return (\n    <li className={cn('flex gap-3', className)} {...props}>\n      {/* The column runs the full height of the entry, gap included. The\n          spacing between entries is on the text beside it rather than on the\n          `<li>`, and that is not a detail of taste: with the padding on the\n          item, the column stops above it and the rail stops with it - leaving\n          a gap of exactly the padding between one rail and the next marker.\n          Measured on the stand at 18-22px per entry, and invisible to a test\n          that counts rails rather than asking where they reach. */}\n      <div className=\"relative flex flex-col items-center self-stretch\">\n        <span\n          className={cn(\n            timelineMarkerVariants({ status, pending }),\n            // Room for a glyph when there is one; a bare dot stays small\n            // enough to read as a point on a line rather than as a bullet.\n            icon ? 'mt-0.5 size-5 text-[10px]' : 'mt-1.5 size-2.5',\n          )}\n          // The marker is decorative when the state is not named. When it is,\n          // the name is what a reader gets in place of the colour.\n          role={statusLabel ? 'img' : undefined}\n          aria-label={statusLabel}\n          aria-hidden={statusLabel ? undefined : true}\n        >\n          {icon}\n        </span>\n        {!last && (\n          // From just under the marker to the bottom of the entry, which is\n          // where the next marker begins.\n          <span aria-hidden className=\"mt-1 w-px flex-1 bg-line\" />\n        )}\n      </div>\n\n      <div className={cn('flex min-w-0 flex-1 flex-col gap-0.5', last ? 'pb-0.5' : 'pb-4')}>\n        <div className=\"flex flex-wrap items-baseline gap-x-2 gap-y-0.5\">\n          <span className=\"text-sm text-text\">{title}</span>\n          {time && <span className=\"text-2xs text-faint\">{time}</span>}\n        </div>\n        {children && <div className=\"text-xs text-dim\">{children}</div>}\n      </div>\n    </li>\n  )\n}\n"
+        }
+      ]
+    },
     {
       "name": "toast",
       "type": "registry:ui",
@@ -1766,7 +1860,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1786,7 +1880,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1821,7 +1915,7 @@
       "description": "Two products had written this independently and arrived at the same construction - a rounded track, segments positioned absolutely by percent, a floor under the segment width so a short one does not vanish - differing only in what a segment meant. One drew the tiers of a rubric with the score standing among them; the other drew a working day as alternating work and breaks. Neither could be built from the other, and each knew something the other did not: the tiers had the marker and the three-state reading of a segment (passed, standing in, still ahead), the day had the minimum width and the difference between an empty track and an unknown one.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/track-segments.json"
@@ -1857,7 +1951,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/tree-rows.json"
@@ -1877,7 +1971,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1895,7 +1989,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.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1914,7 +2008,7 @@
       "description": "With `decorations: false` the system draws nothing, so everything it used to do is the page's: dragging the window by its title bar, double-click to maximise, the three buttons, and the edges you grab to resize. Each is small; the reason to take them on at all is that a system title bar over an application title bar costs a strip of every laptop screen for nothing.",
       "dependencies": [
         "@tauri-apps/api",
-        "dowel-ui@^0.26.1"
+        "dowel-ui@^0.27.0"
       ],
       "registryDependencies": [],
       "files": [

package/package.json

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