@fusion.dev/helix-docs 0.206.0 → 0.207.0

package/dist/sources.generated.js

@@ -199,7 +199,8 @@ typos, in your other components.
 
 \`\`\`html
 <helix-input
-  (change)="name = $event.target.value"
+  #field
+  (change)="name = field.value"
   [value]="name"
 />
 \`\`\`
@@ -207,6 +208,10 @@ typos, in your other components.
 \`[prop]\` sets a property, which a value that is not a string needs. \`(event)\`
 binds with \`addEventListener\`, so use the event's own name.
 
+\`#field\` gives the template a reference to the element, typed as its class once
+you import its family. Under \`strictTemplates\`, \`$event.target\` is an
+\`EventTarget | null\`, which has no \`value\`.
+
 **Do not use \`attr.\` for a stateful property.** \`[attr.value]="name"\` writes the
 attribute. The attribute seeds the control and is out of date as soon as someone
 types in it. The property holds the current value.
@@ -218,9 +223,17 @@ checking that typings would feed, so Angular would not enforce a generated file.
 We publish the manifest as \`@fusion.dev/helix/custom-elements.json\`, so you can
 generate your own files from it.
 
-As a result, a misspelled property fails without an error in Angular. In React,
-Vue, and Svelte, the same mistake is a compile error. Check property names in
-code review.
+As a result, a misspelled property fails without an error in Angular. Check
+property names in code review.
+
+The other frameworks check a misspelled name to different degrees:
+
+- In React, TypeScript reports a misspelled prop unless its name has a hyphen.
+  See [React](./react).
+- In Vue, \`vue-tsc\` reports one only when \`checkUnknownProps\` is on. See
+  [Vue](./vue).
+- In Svelte, \`svelte-check\` reports an attribute that the Helix tag does not
+  declare.
 
 ## Refuse a change
 
@@ -228,6 +241,26 @@ code review.
 value you set and then applies its own changes. To refuse a change, listen for
 the \`helix-before-*\` event and call \`preventDefault()\`. See
 [State and control](./state-and-control).
+
+To write your own value into a field you type into, set your signal and then
+call \`detectChanges()\` on the component's \`ChangeDetectorRef\`:
+
+\`\`\`ts
+private readonly view = inject(ChangeDetectorRef)
+
+protected takeHandle(event: Event): void {
+  event.preventDefault()
+  const { value } = (event as CustomEvent<{ value: string }>).detail
+  this.handle.set(clean(value))
+  this.view.detectChanges()
+}
+\`\`\`
+
+Without zone.js, Angular renders a signal change in a later task. A key that
+arrives before that task lands in the text from before your value, and the keys
+typed in between are lost. A barcode scanner, a password manager, and a test
+send keys that fast. \`detectChanges()\` renders the change before your handler
+returns.
 `,
     'browser-support': `---
 description: The browser features Helix uses, and the browser we test in.
@@ -244,7 +277,7 @@ support in older browsers. Your browser needs every feature Helix uses.
 
 ## What we test
 
-We test in Chromium, through Playwright. The DOM specs run in it, and 83 pixel
+We test in Chromium, through Playwright. The DOM specs run in it, and the pixel
 baselines are captured in it, on Linux, with the network blocked.
 
 We do not run the tests in Firefox or Safari. The rest of this page lists the
@@ -258,9 +291,9 @@ something broken, please report it. Our tests would not have caught it.
 | Custom elements and shadow DOM | Everything |
 | \`ElementInternals\` | Form participation, and ARIA that has to cross a shadow boundary |
 | Popover API | Every overlay: menu, tooltip, select, combobox, dialog |
-| \`light-dark()\` | 156 declarations in the shipped stylesheets, 71 of them in the token layer |
+| \`light-dark()\` | Every color token, and each component color that differs between the modes |
 | \`oklch()\` | Every color in the system |
-| \`:has()\` | 11 rules, mostly relational styling of slotted content |
+| \`:has()\` | Relational styling, mostly of slotted content |
 | \`@starting-style\` | Entry transitions on overlays |
 | \`:state()\` | Every boolean state the library publishes: \`open\`, \`checked\`, \`selected\`, \`invalid\`, \`read\`, \`has-label\`, \`settled\`, \`empty\`, \`controls\` |
 | \`CSS.highlights\` | Filter-match highlighting, in \`Command\` and \`Combobox\` |
@@ -371,9 +404,10 @@ headless manifest carries the static, so you can find it there.
 **When a component renders another component, register both.**
 
 If you register \`acme-combobox\` without \`acme-listbox\`, the panel renders a tag
-that is not defined. The browser shows no error or warning. An unregistered
-custom element is an inert, unstyled inline box, so the combobox appears not to
-open.
+that is not defined. An unregistered custom element is an inert, unstyled inline
+box, so the panel shows every option with no list around them, and typing
+filters nothing. In development, the combobox says so once in the console and
+names the tag to define.
 
 [//]: # (renders)
 
@@ -413,7 +447,8 @@ everything those families render in turn. For example, \`command\` reaches
 **The elements you write inside a component are yours to register as well.**
 A select renders none of the options you write in it, so \`acme-select\` needs
 your \`acme-option\` registered beside it. In development, a component holding a
-child of its tier that nobody registered says so once, with the import to add.
+child of its tier that nobody registered says so once and names the tag to
+define.
 A listbox given \`items\` and a filter input given a \`source\` draw options of
 your tier from data, and those need \`acme-option\` registered too.
 
@@ -426,7 +461,7 @@ generated table is always current.
 
 ### A \`:not(:defined)\` rule
 
-\`@fusion.dev/helix\` ships an \`elements.css\` that hides each of its tags until
+\`@fusion.dev/helix-styles\` ships an \`elements.css\` that hides each of its tags until
 the tag's definition loads. Your page then does not show unstyled text that
 changes into components. The headless package ships no such file, and no tool
 can generate one for tags you have not named yet. Write the rule for your own
@@ -439,26 +474,85 @@ acme-listbox:not(:defined) {
 }
 \`\`\`
 
-Use \`visibility\` so the page does not reflow when the definitions arrive.
+The rule hides each element until its definition loads, and the layout
+settles when the elements upgrade.
+
+### A rule that hides the \`live\` parts
+
+A \`live\` part is a live region. It holds words only a screen reader should
+read, such as how many options a filter left, and the headless tier draws it
+as ordinary text. Hide each one visually with a clip, which keeps it in the
+accessibility tree:
+
+\`\`\`css
+acme-combobox::part(live),
+acme-combobox::part(listbox-live) {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+\`\`\`
+
+\`display: none\` and \`visibility: hidden\` take a region out of the
+accessibility tree as well, and a screen reader then hears nothing. A
+component forwards the \`live\` part of a component it renders under a name of
+its own, such as \`listbox-live\` on Combobox. The styled tier hides every one
+of them.
 
 ### Typings for your tags
 
-Your typings come from a manifest of your package. \`helix manifest build\`, in
-\`@fusion.dev/helix-cli\`, writes one that includes every member your subclasses
-inherit from ours. Name each Helix package you extend and where its manifest is:
+Your typings come from a custom elements manifest of your package, written by
+\`@custom-elements-manifest/analyzer\`:
 
 \`\`\`sh
-helix manifest build . --tier styled \\
-  --dependency @fusion.dev/helix=node_modules/@fusion.dev/helix/custom-elements.json \\
-  --dependency @fusion.dev/helix-headless=node_modules/@fusion.dev/helix-headless/custom-elements.json \\
-  --dependency @fusion.dev/helix-core=node_modules/@fusion.dev/helix-core/custom-elements.json \\
-  > custom-elements.json
+npx @custom-elements-manifest/analyzer analyze --litelement --dependencies \\
+  --globs "src/**/*.ts"
 \`\`\`
 
-Then run a typings generator over it. Our own typings start from
+Each flag does one job, and the manifest is incomplete without either:
+
+- \`--dependencies\` reads the \`custom-elements.json\` each Helix package ships
+  and names in its \`package.json\`, so \`acme-combobox\` gets the members,
+  attributes, events, slots and parts it inherits from ours.
+- \`--litelement\` reads Lit's decorators, so the properties you declare with
+  \`@property\` are attributes too.
+
+Then run a typings generator over the manifest. Our own typings start from
 \`@wc-toolkit/jsx-types\` and \`@wc-toolkit/vuejs-types\`. The typings for
-\`acme-combobox\` then include the hundred or so members it inherits, as well as
-the two you wrote.
+\`acme-combobox\` then include the members it inherits, as well as the ones you
+wrote.
+
+The generated file names Helix's event classes, such as
+\`HelixBeforeChangeEvent\`, without importing them. Add one line at its top that
+imports the names TypeScript reports as missing:
+
+\`\`\`ts
+import type { HelixBeforeChangeEvent, HelixFilterEvent } from '@fusion.dev/helix-core'
+\`\`\`
+
+Without that line, a project that sets \`skipLibCheck\` gets no error, and each
+of those event handlers is typed \`any\`.
+
+For a few tags in React, you can skip the generator. Each headless family
+publishes its props in \`@fusion.dev/helix-headless/jsx\`, and your tag takes
+them:
+
+\`\`\`ts
+import type { HelixHeadlessComboboxProps } from '@fusion.dev/helix-headless/jsx'
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'acme-combobox': HelixHeadlessComboboxProps
+    }
+  }
+}
+\`\`\`
+
+A subclass that adds properties joins its own to them with \`&\`.
 
 \`@fusion.dev/helix-cem\`, the step that runs those generators for our packages
 and corrects what they write, is not published. It is build tooling for this
@@ -526,10 +620,12 @@ findings as data. The rules check what your components document and write:
 
 ### Tree-shaking
 
-\`@fusion.dev/helix-headless\` declares \`sideEffects: ["./dist/**/*.js"]\`. The
-declaration is accurate, because the modules register elements when you import
-them. A bundler that treated them as free of side effects would drop a
-registration, and a tag would never upgrade.
+\`@fusion.dev/helix-headless\` declares \`"sideEffects": true\`, because its
+modules register elements when you import them. A bundler that treated them as
+free of side effects would drop a registration, and a tag would never upgrade.
+Import each family from its own entry, such as
+\`@fusion.dev/helix-headless/combobox\`, so your bundle carries only the families
+you use.
 
 ### Documented parts
 
@@ -886,6 +982,56 @@ bar there, and a heatmap draws the cell with no tone. The readings after the gap
 stay under their own labels, and the tooltip for that row still shows the
 row's cells.
 
+A cell holds a number when its whole text reads as one, such as \`1200\` or
+\`-3.5\`. A formatted number, such as \`1,200\` or \`$1.2k\`, is a gap. To chart a
+formatted cell, write its number in \`data-value\`:
+
+\`\`\`html
+<tr><th>Q1</th><td data-value="1200">$1.2k</td><td data-value="800">$800</td></tr>
+\`\`\`
+
+The chart reads \`data-value\` when a cell has one, and the cell's text otherwise.
+The table and the tooltip still show \`$1.2k\`.
+
+## Charts with many readings
+
+A chart builds what it can show, and that is bounded by its size. The readings
+themselves are read again each time the table or the data changes.
+
+- **Names on the axis.** \`Line Chart\`, \`Area Chart\`, and \`Bar Chart\` draw every
+  reading's name where every name fits. Where they do not, the chart draws a
+  regular share of them, and always the first and the last. Where every row
+  header holds a \`<time>\`, the names drawn start a period, such as the first
+  reading of each month or each year. Where the names are numbers in order,
+  such as years, they are round numbers. Other names are drawn every so many
+  readings, counted from the first. The chart works out the share again when it
+  is resized. The tooltip and the keys still say each reading's own name.
+- **Gridlines.** \`gridlines="category"\` rules the readings whose names are
+  drawn.
+- **Lines.** Where a line has more readings than the plot has pixels across, it
+  is drawn through the points those pixels can show: in each column of pixels,
+  the first reading, the lowest, the highest, and the last.
+- **Markers.** \`markers\` marks every reading, with one path for each series.
+- **Columns.** \`Bar Chart\` draws each column as an element while every column
+  and the space between two categories are at least a pixel wide. Past that, it
+  draws each series' columns as one path, each column of pixels as tall as the
+  tallest column in it, and draws the category the tooltip describes again over
+  them, at least two pixels thick.
+- **Points.** \`Scatter Chart\` draws each series' points as paths. Points that
+  overlap are drawn in separate groups, up to four deep, so each keeps its edge
+  and a cluster reads darker. The point the keys rest on is drawn again over
+  them.
+- **The table drawn from \`data\`.** Past a few hundred readings, the hidden table
+  holds one page of them at a time. Its markup gives a screen reader the number
+  of rows in the whole table and the place of each row, and the words after it
+  say which readings the page holds. Two buttons after it show the previous and
+  the next page. You press them with a screen reader as you read. They are left
+  out of the tab order, so the plot stays the chart's one tab stop. The keys on
+  the plot move through every reading.
+- **A table on the page.** A chart reads the whole table that \`for\` names, and
+  the table is part of your page, however many rows it has. Where the readings
+  are too many to put in the document, draw the chart from \`data\`.
+
 ## Series colors
 
 Helix has twenty-four series color tokens, in order, from
@@ -1129,7 +1275,8 @@ agent uses most:
 \`helix scan\`, \`helix diagnostics --once\`, and \`helix theme audit\` check what an
 agent wrote, and the MCP server runs the same checks.
 [Using Helix with an agent](./using-helix-with-an-agent#check-the-code-you-wrote)
-lists what each finds.
+lists what each finds, and [Diagnostics](./diagnostics) sets the checks up in
+your app and in CI.
 
 ## The index
 
@@ -1260,11 +1407,20 @@ Choose a surface by where the element sits relative to the page. This is the
 choice people most often get wrong. See [Surfaces and
 separation](./surfaces-and-separation).
 
+A field is filled with \`well\`: 5% of \`foreground\` laid over whatever the field
+sits on, so its color depends on the surface under the field.
+
 ### Inks
 
 Inks are the colors that go on grounds. The base ink is \`foreground\`.
 
-- \`foreground-muted\` and \`foreground-subtle\` are for text that recedes.
+- \`foreground-muted\` is for text that recedes and is still read, such as a
+  placeholder, a hint, or a caption. The engine solves it to the contrast
+  target.
+- \`foreground-subtle\` recedes further. It is for marks that are not text, such
+  as a separator, a chevron, or a grip, and for the text of a disabled control.
+  It is a fixed step of the gray ramp, and the engine does not solve it, so its
+  contrast is not guaranteed. Use \`foreground-muted\` for text that is read.
 - Text on a filled color takes the ink named for that fill:
   - \`foreground-on-primary\` on \`primary-surface\`
   - \`foreground-on-accent\` on \`accent-surface\`
@@ -1278,8 +1434,16 @@ Intent colors show what something means.
   \`-subtle\` variants. With no brand color set, both are ink: near-black in
   light mode and near-white in dark mode.
 - \`info\`, \`success\`, \`warning\`, and \`danger\` are for status. Each has a
-  \`-surface\` and a \`-surface-hover\` variant for the tinted box that holds the
-  message.
+  \`-surface\` variant, the filled ground that carries \`foreground-on-status\`,
+  such as a danger button or a badge in a status tone, and a \`-surface-hover\`
+  variant for that fill under the pointer.
+
+### Rise and fall
+
+\`rise\` and \`fall\` color a value by which way it moved, such as a price. They
+are \`success\` and \`danger\` unless you set them. Mainland China, Taiwan, and
+Japan draw a rise in red, so a page for one of those markets swaps the two. See
+[Rise and fall colors](./localization#rise-and-fall-colors).
 
 ### Series
 
@@ -1324,8 +1488,21 @@ OKLCH lets the theme engine *solve* for a palette from your brand color. See
 
 The engine measures each ink against the ground it will be painted on. A brand
 color that already meets the target there is used as it is. For any other color,
-the engine searches for the lightness that meets the target. Every pair it
-produces meets the target.
+the engine searches for the lightness that meets the target. A pair that cannot
+meet its target, such as one with a color you pinned, is reported in
+\`violations\`.
+
+\`foreground\` and \`foreground-muted\` are also written in fields, so the engine
+solves them against the well over the page, a card, a raised surface, a dialog,
+and a sunken surface. The report names each of these grounds as the well over
+its surface, such as \`color-well over color-surface\`.
+
+\`foreground-subtle\` is the one ink the engine does not solve. The range of
+readable grays has room for one quiet ink, and \`foreground-muted\` is that ink, so
+\`foreground-subtle\` stays a fixed step of the stylesheet's gray ramp and its
+contrast is not guaranteed. A component paints its quiet text in
+\`foreground-muted\`, and keeps \`foreground-subtle\` for marks that are not text and
+for the text of a disabled control.
 
 The engine can solve only the pairs it knows about, so we check two things:
 
@@ -1376,8 +1553,8 @@ class, or a second copy of any value.
 Each token is written once, with its light and dark values in \`light-dark()\`.
 The \`color-scheme\` property alone decides which value applies. \`color-scheme\`
 inherits, so one property sets the mode for an element and everything inside
-it. The shipped stylesheets use \`light-dark()\` in 156 declarations, 71 of them
-in the token layer.
+it. A component that sets a color of its own for each mode uses \`light-dark()\`
+the same way.
 
 ## Set the mode
 
@@ -1630,6 +1807,262 @@ For the same reason, we wrote \`DrilldownController\`. Since it was first writte
 was specific to menus. \`Menu\` and \`Drilldown\` now share it.
 
 If you are about to write a second copy of some behavior, make it shared.
+`,
+    diagnostics: `---
+description: Find the Helix mistakes the browser accepts without an error, on your running pages and in your code, with a setup for Vite, React, Next.js, and CI.
+section: Tooling
+title: Diagnostics
+---
+
+# Diagnostics
+
+Helix diagnostics finds the mistakes in your markup and styles that the browser
+accepts without an error. A \`::part()\` that names a part nothing publishes
+matches nothing, an attribute value outside the set a component takes falls
+back to the default, and \`disabled="false"\` turns \`disabled\` on. Each one is
+valid HTML or CSS, so nothing else reports it.
+
+Two tools check your project, in two places:
+
+- **\`initDiagnostics()\`**, from \`@fusion.dev/helix-diagnostics\`, checks each
+  page as it runs in development. It prints each finding in DevTools, and a
+  badge in the corner of the page lists them.
+- **\`helix scan\`**, from \`@fusion.dev/helix-cli\`, reads every stylesheet,
+  template, and module in your project, and prints each finding with its file
+  and line.
+
+Both judge your code against the lint data of the Helix version you installed.
+A fault that both find has the same kind and the same fingerprint in each, so a
+report can join a page's findings to the scan's.
+
+## Start diagnostics in your app
+
+\`\`\`sh
+npm install --save-dev @fusion.dev/helix-diagnostics
+\`\`\`
+
+Call \`initDiagnostics()\` once, before your app mounts. Put the call in a module
+of its own, so a production build can leave it out:
+
+\`\`\`ts
+// src/diagnostics.ts
+import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
+import lint from '@fusion.dev/helix/lint.json'
+
+initDiagnostics({ environment: 'development', tiers: [{ lint }] })
+\`\`\`
+
+\`tiers\` passes the lint data from your own \`node_modules\`, so diagnostics loads
+nothing from the network. Without it, diagnostics loads the lint data for the
+version on the page from a public npm CDN.
+
+An add-on package publishes the lint data for its own elements, and you pass it
+in \`tiers\` the same way. \`@fusion.dev/helix-sandbox\` publishes it for
+\`helix-sandbox-editor\`:
+
+\`\`\`ts
+import lint from '@fusion.dev/helix/lint.json'
+import sandbox from '@fusion.dev/helix-sandbox/lint.json'
+
+initDiagnostics({ environment: 'development', tiers: [{ lint }, { lint: sandbox }] })
+\`\`\`
+
+The CDN serves the two tiers' lint data alone, so an add-on's elements are
+checked only where its lint data is in \`tiers\`. Without it, each of them is an
+unknown tag.
+
+Load the module in development only. In Vite, with React or any other
+framework, import it from your entry:
+
+\`\`\`tsx
+// src/main.tsx
+if (import.meta.env.DEV) {
+  void import('./diagnostics.js')
+}
+\`\`\`
+
+\`vite build\` replaces \`import.meta.env.DEV\` with \`false\` and drops the import
+with it. In Next.js, import it from \`instrumentation-client.ts\`, which runs in
+the browser before your app hydrates:
+
+\`\`\`ts
+// instrumentation-client.ts
+if (process.env.NODE_ENV === 'development') {
+  void import('./app/diagnostics')
+}
+\`\`\`
+
+Every Helix template starts diagnostics this way. Angular, Svelte, Vue, Solid,
+and a page with no bundler call it the same way, and the package's README says
+where each one's entry is.
+
+From then on, diagnostics runs after the page loads, after a navigation, and
+after the page changes. It prints each finding once per page, and the badge
+shows only while the page has findings. Hover over a finding in the badge's
+list to outline the element it is about.
+
+## Print the findings in your terminal
+
+A page cannot write to your terminal, so the Helix command line receives each
+run beside your dev server. Install it, and turn the relay on where you call
+\`initDiagnostics()\`:
+
+\`\`\`sh
+npm install --save-dev @fusion.dev/helix-cli
+\`\`\`
+
+\`\`\`ts
+initDiagnostics({
+  environment: 'development',
+  sinks: { relay: true },
+  tiers: [{ lint }],
+})
+\`\`\`
+
+Then run the relay in your project's directory, beside the dev server:
+
+\`\`\`sh
+npx helix diagnostics
+\`\`\`
+
+Each Helix template has the script for it, so \`npm run diagnostics\` starts it
+there. The command prints each finding the first time a page has it. It listens
+on \`127.0.0.1:7417\`, takes runs only from pages on a local host, and serves the
+\`helix-diagnostics.json\` in the directory it runs in to the page.
+
+## Scan your code
+
+\`\`\`sh
+npx helix scan
+\`\`\`
+
+\`helix scan\` judges your code against the lint data of every Helix package you
+install that publishes \`lint.json\`, the two tiers and an add-on such as
+\`@fusion.dev/helix-sandbox\`. It reads every file \`.gitignore\` leaves in, apart
+from tests and the folders a build writes. It reads CSS, Sass, and Less; HTML, Vue, Svelte,
+and Astro templates; MDX; and JSX, Lit's \`html\` and \`css\` templates, and
+Angular's inline templates in JavaScript and TypeScript. Each finding has its
+file and line:
+
+\`\`\`
+helix scan: 1 error, 0 warnings, 0 info, and 0 unsettled, in 42 files
+  error nested-interactive <helix-button> <helix-icon-button>
+    \`helix-icon-button\` is inside \`helix-button\`, which draws its content inside a native button. …
+    in src/toolbar.tsx:12
+\`\`\`
+
+- **It reads every route.** A page sees only the routes someone opened.
+- **What only a page can settle is listed as \`unsettled\`**, such as a hook set
+  on a tag that does not have it, which works where an element inside the tag
+  has it. An unsettled finding never fails the scan.
+- **It checks an attribute where your code writes it as one.**
+  \`disabled="false"\` is checked. \`?disabled=\${false}\` in Lit, \`:disabled="false"\`
+  in Vue, and \`disabled={false}\` in JSX set the value at run time, and the page
+  judges what they write.
+- **\`--file <path>\` reports one file's findings**, and still reads the whole
+  project, so an import in another file counts. \`--stdin <language>\` checks a
+  snippet.
+
+It exits 1 on a finding at \`error\`, and 3 where it cannot run, such as where no
+installed Helix package has lint data.
+
+## Run the checks in CI
+
+\`--out\` writes a run to a CI file, and each command keeps the runs the others
+wrote there, so one file holds your code's run and your pages' runs:
+
+\`\`\`sh
+npx helix scan --out reports/helix-diagnostics.json
+npx helix diagnostics --once http://localhost:4173/ --out reports/helix-diagnostics.json
+\`\`\`
+
+\`helix diagnostics --once <url>\` opens a page headless, runs diagnostics on it
+once the page holds still, prints each finding, and exits. Repeat \`--once\` for
+each page. It needs Playwright installed beside \`@fusion.dev/helix-cli\`, and
+adds nothing to your app.
+
+Where your own end-to-end tests open the pages, gather their runs with
+\`@fusion.dev/helix-diagnostics/ci\`:
+
+\`\`\`ts
+import { ciSink } from '@fusion.dev/helix-diagnostics/ci'
+
+// \`runs\` are the reports diagnostics returned in each page your job opened.
+const { code, summary } = ciSink(runs, { file: 'reports/helix-diagnostics.json' })
+console.log(summary)
+process.exitCode = code
+\`\`\`
+
+A fault found on many pages is one line, with the pages it was on. A finding at
+\`error\` fails the job. \`failOn: 'warn'\` fails it on warnings too, and
+\`failOn: 'never'\` reports without failing. \`ciSink\` writes the whole file, so
+run \`helix scan --out\` after it to add your code's run.
+
+## What it finds
+
+| Kind | Severity | Found by | Means |
+| --- | --- | --- | --- |
+| \`dead-hook\` | error | both | A hook is set where nothing answers it, or a name close to a hook is set that nothing reads |
+| \`dead-part\` | error | both | A \`::part()\` names a part the element does not publish, or follows another \`::part()\` |
+| \`disabled-attribute\` | error | scan | A rule styles a form control's \`[disabled]\`, which a control a \`<fieldset disabled>\` disables does not carry. Write \`:disabled\` |
+| \`duplicate-registration\` | error | page | Two copies of Helix are on the page |
+| \`false-boolean\` | error | both | A boolean attribute is written \`="false"\`, which turns it on, as \`disabled="false"\` does. An attribute that \`"false"\` turns off, such as Drawer's \`modal\`, is not one |
+| \`invalid-value\` | error | both | An attribute with a closed set of values carries one outside it, so the element falls back to its default |
+| \`manifest-skew\` | error | page | The lint data is from another version than the page runs, so no other finding is reported |
+| \`native-element\` | warn | scan | A native element is written where an installed Helix family stands in for it, such as \`<button>\` for \`helix-button\` |
+| \`nested-interactive\` | error | both | An interactive element is inside a button or a link, which HTML forbids, such as \`helix-icon-button\` inside \`helix-button\` or \`helix-button\` inside an \`<a>\` |
+| \`primitive-token\` | error | scan | A rule reads a \`--_helix-\` primitive, which is internal to \`@fusion.dev/helix-styles\` |
+| \`unforwarded-part\` | warn | both | The headless tag publishes a part the styled tag does not forward, which is a gap in Helix |
+| \`unimported-tag\` | warn | scan | An element is written, and nothing in the project imports the entry that registers it |
+| \`unknown-attribute\` | error | both | A Helix element carries an attribute it does not take |
+| \`unknown-event\` | error | scan | A React \`on\` prop names an event the element does not dispatch |
+| \`unknown-slot\` | error | scan | A child names a slot its Helix element does not have, so it is not drawn |
+| \`unknown-tag\` | error | both | A rule or an element names a tag no installed package lists |
+| \`unknown-token\` | error | scan | A rule reads or sets a \`--helix-\` name the token set does not have |
+| \`unreflected-attribute\` | warn | both | A rule selects a Helix element by an attribute it never writes back, so it matches only markup a server wrote |
+
+**A button inside a button is judged where the markup settles it.** Button,
+Icon Button, Copy Button, Toggle, Motion Toggle, Radio, and Tab draw their
+content inside a native button, and Skip Link draws its content inside a link.
+A slot for actions, such as a card's \`footer-actions\`, is not inside anything
+pressable. A framework's component, such as a router's \`<Link>\`, places its
+children itself, so \`helix scan\` stops at it, and the page sees the \`<a>\` it
+renders.
+
+## Configure the checks
+
+Both tools read \`helix-diagnostics.json\` from your project. The page cannot read
+files, so import it and pass it as \`file\`, or let the relay serve it:
+
+\`\`\`json
+{
+  "rules": {
+    "native-element": "off",
+    "unknown-tag": { "severity": "off", "tags": ["helix-mine"] }
+  }
+}
+\`\`\`
+
+A kind takes \`error\`, \`warn\`, \`info\`, or \`off\`, for every tag or for the tags
+you name. A setting that names nothing is refused, with the closest one that
+exists. Every setting is in the README of \`@fusion.dev/helix-diagnostics\`.
+
+## Scope
+
+The checks cover what the lint data can settle. They do not check:
+
+- the value a token or a hook is set to, such as \`--helix-radii-md: red\`.
+  \`helix scan\` checks each \`--helix-\` name you write;
+- a selector that descends into a component, such as \`helix-card .title\` or
+  \`helix-button span\`. It matches only the elements you put inside the
+  component;
+- a \`::part()\` on a selector with no Helix tag in it, such as
+  \`.cta::part(label)\`, since the class names no element whose parts can be
+  read;
+- an attribute value an expression sets, such as \`tone={tone}\` in JSX, in
+  \`helix scan\`. The page judges the attribute it writes;
+- the contrast of a color you write yourself. \`helix theme audit\` checks the
+  contrast of your theme's tokens.
 `,
     'elevation-and-material': `---
 description: The layer, shadow, and material tokens for stacking, lifting, and translucent surfaces.
@@ -2567,6 +3000,12 @@ helix-graph:state(ready) > div {
 }
 \`\`\`
 
+Use the fade where the layout settles in a moment, such as a graph whose notes
+all have places. Leave a cosmos.gl graph shown. Its layout runs for several
+seconds by design, and the view follows the notes as they spread, so the reader
+watches the graph settle. Faded in on the state, its drawing is hidden for that
+whole time.
+
 ## Draw the graph before it loads
 
 \`graphSnapshot(nodes, links, options)\` draws the graph on your server as an
@@ -2871,24 +3310,42 @@ bundler can remove that record.
 an order of precedence, the glyph on the page would come from whichever
 directory ranked higher, and nothing would look wrong.
 
-## Add a glyph to the Helix set
+## Draw your own glyphs by name
 
-Add the name to \`helix/icons/icons.txt\` and run \`turbo run icons\`. Phosphor
-names resolve from \`@phosphor-icons/core\` at build time, so adding a glyph takes
-one line. You do not copy a path into a TypeScript object by hand.
+\`registerIcons\` makes your glyphs resolve by \`name\`, so plain HTML can draw
+them:
 
-For a mark Phosphor does not draw, add an SVG with the same name to
-\`helix/icons/raw\`. The build reads it from there when Phosphor has no match.
-Draw it with the same geometry, a 256 box at the bold weight. A glyph drawn at a
-different weight stands out next to the others.
+\`\`\`ts
+import { registerIcons } from '@fusion.dev/helix/icon'
+import { peak } from './icons'
+
+registerIcons([peak])
+\`\`\`
+
+\`\`\`html
+<helix-icon name="peak"></helix-icon>
+\`\`\`
+
+Each glyph registers under its own \`name\`. To register a whole set, build it
+with \`--index\` and pass the \`icons\` record the command writes to
+\`registerIcons\`.
+
+\`registerIconLibrary\` resolves names under a prefix through a function of your
+own, such as one that points into a sprite sheet or fetches from a server. After
+\`registerIconLibrary('brand', resolve)\`, \`name="brand:peak"\` draws the glyph that
+\`resolve('peak')\` returns.
+
+To sit beside the Helix set, draw a glyph with the same geometry, a 256 box at
+the bold weight. A glyph drawn at a different weight stands out next to the
+others.
 
 ## Product marks
 
-Helix and Cortex have product marks. They are in the icon package, and they are
-not part of the icon set. A mark identifies a product. An icon stands for an
-action. **A mark is one rounded body with material removed.** It is never a
-pictogram of a metaphor, because it stands beside the parent brand's mark, a
-geometric monogram. Do not use the icon set to draw a logo.
+The set includes the Fusion, Helix, and Cortex marks, and the React and HTML5
+logos, so \`<helix-icon name="helix">\` draws the Helix mark. A mark identifies a
+product. An icon stands for an action. **The Helix and Cortex marks are each one
+rounded body with material removed.** Neither is a pictogram of a metaphor,
+because each stands beside the Fusion mark, a geometric monogram.
 `,
     installation: `---
 description: What to install, the order of the stylesheets, and how to check that the elements registered.
@@ -2908,6 +3365,24 @@ use its semantic tokens and draw nothing without them. If the elements are
 installed and the tokens are missing, your page shows unstyled boxes. There is
 no fallback theme.
 
+## Start a new project
+
+If you do not have a project yet, the scaffolder writes one with Helix
+installed, the stylesheets imported, and every element registered:
+
+\`\`\`sh
+npm create @fusion.dev/helix-app@latest my-app -- --template react-vite
+\`\`\`
+
+Leave out \`--template\`, and the command lists the templates and writes nothing.
+Each template starts with the same three pages:
+
+- a landing page
+- a sorted, paged data table
+- a form that a \`<form>\` reads with \`FormData\`
+
+The rest of this page adds Helix to a project you already have.
+
 ## Import the stylesheets
 
 \`\`\`ts
@@ -2941,18 +3416,19 @@ import the two files you want and skip \`helix.css\`.
   \`tokens.css\` refers to the primitives throughout, so without
   \`primitives.css\` every semantic token resolves to nothing. We measured a page without it:
   \`--helix-color-background\` computes to \`rgba(0, 0, 0, 0)\`, and so does every
-  other color. [Theming](theming.mdx) also depends on this file, because without
+  other color. [Theming](./theming) also depends on this file, because without
   it, setting \`--helix-seed-brand\` changes nothing.
 - **\`tokens.css\`** declares the semantic layer, the custom properties grouped
   by category, plus \`color-scheme: light dark\` on \`:root\`. The files below read
   from it, and it reads from \`primitives.css\`.
 - **\`base.css\`** holds the element reset, the type scale on bare \`h1\` through
   \`h6\`, and the recipes for markup that Helix does not render. It reads tokens.
-- **\`elements.css\`** styles elements before they upgrade. It is the file most
-  often left out, because a page works without it until the page is
-  server-rendered. An element that has not upgraded has no shadow root and no
-  styles of its own, so the markup flashes unstyled and then jumps into place.
-  \`elements.css\` makes that interval look like the finished page.
+- **\`elements.css\`** hides each Helix element until its definition loads. It is
+  the file most often left out, because a page works without it until the page
+  is server-rendered. An element that has not upgraded has no shadow root and no
+  styles of its own, so without the file the markup flashes unstyled. With it,
+  the element stays hidden until it upgrades, and the layout settles when it
+  does.
 
 Import the files from a stylesheet you control, and keep them out of individual
 components. The order then stays visible in one place.
@@ -2983,13 +3459,14 @@ Render one element and check whether it upgraded:
 
 \`\`\`ts
 await customElements.whenDefined('helix-button')
-console.log(document.querySelector('helix-button')?.shadowRoot !== null)
+console.log(document.querySelector('helix-button')?.shadowRoot instanceof ShadowRoot)
 \`\`\`
 
 \`true\` means the definition loaded and the element built its shadow root.
-\`false\`, or a promise that never settles, means the registration import did not
-run. Usually the import is outside a \`'use client'\` boundary, or you imported
-the subpath of a component you did not end up using.
+\`false\` means the page has no \`helix-button\` to check. A promise that never
+settles means the registration import did not run. Usually the import is outside
+a \`'use client'\` boundary, or you imported the subpath of a component you did
+not end up using.
 
 If the element upgraded and the page still looks wrong, check the stylesheets
 in the order above. The symptom tells you which layer is missing:
@@ -2999,6 +3476,10 @@ in the order above. The symptom tells you which layer is missing:
 - Components that look right once JavaScript runs, but flash unstyled before
   it, mean \`elements.css\` is missing.
 
+To check the rest of your markup and styles against the Helix you installed,
+start [Diagnostics](./diagnostics) in development, and run \`helix scan\` on your
+code. Each template starts diagnostics for you.
+
 ## Framework setup
 
 The elements are custom elements, and every framework can render them.
@@ -3054,7 +3535,7 @@ empty intent, \`{}\`, is a valid theme.
 | \`accent\` | The second emphasis color. Defaults to the brand color, or to ink with no brand. \`{ from: 'brand', rotate: 180 }\` gives the complementary color, and needs a brand |
 | \`background\` | The page's color, \`{ light, dark }\`, for a page that is not pure white or pure black. The surfaces keep their contrast with it, and the grays take its tint. A page no text color can reach the contrast target on is refused |
 | \`neutral\` | The gray ramp, which can be tinted toward the brand. With \`background\`, it takes the page's tint |
-| \`status\` | \`info\`, \`success\`, \`warning\`, and \`danger\`. A color pins one. An object adjusts its hue while it keeps its meaning |
+| \`status\` | \`info\`, \`success\`, \`warning\`, and \`danger\`. A color pins one. \`{ hue }\` moves its hue within the band that keeps its meaning |
 | \`chroma\` | How saturated the palette is, independent of hue |
 | \`scheme\` | \`'light'\` or \`'dark'\`, for a theme that has only one mode |
 | \`tokens\` | Literal overrides by token name, for values no other field sets |
@@ -3069,6 +3550,17 @@ lightness moves only as far as the target needs.
 \`danger\` rotated with the brand, your users would have to learn a new warning
 color for each product.
 
+**A status hue stays in its band.** Each band, in OKLCH degrees, covers the
+colors that still read as that status. A hue outside its band is refused, and
+the error names the band.
+
+| Status | Hue band | Colors |
+|---|---|---|
+| \`danger\` | 15 to 40 | The reds, from crimson to red-orange |
+| \`warning\` | 45 to 105 | Orange and amber to yellow |
+| \`success\` | 125 to 180 | The greens, from yellow-green to teal-green |
+| \`info\` | 200 to 280 | Cyan and blue to indigo |
+
 \`chroma\` sets how saturated the theme feels. Monotone, muted, restrained, and
 vivid all describe chroma, and none of them describes a hue. \`chroma\` has two
 settings:
@@ -3082,12 +3574,20 @@ the gray nearest the page that meets the contrast target, which is a mid gray.
 For black and white, leave out \`brand\`. Neither applies to a color you pinned. A
 pinned color is used exactly as you set it.
 
+\`tokens\` sets each value after the engine has solved the rest, so no other color
+is solved against it. Each pair that names the token measures it, and a value
+that misses its target is reported in \`violations\`. A name the engine does not
+emit is added as a token of your own. No default pair names it, so only a pair
+you list in \`pairings\` measures it. A value the engine cannot read is skipped: a
+token the engine emits keeps its derived value, and a name it does not emit is
+left out.
+
 ## Contrast
 
 | Field | What it controls |
 |---|---|
 | \`contrastTarget\` | Target contrast for body text. 4.5 is WCAG AA, and 7 is AAA |
-| \`pairings\` | Extra foreground and background pairs to solve, in addition to the pairs in the engine's surface model |
+| \`pairings\` | The foreground and background pairs to measure, by token name. A background of \`color-well over color-surface\` is a field's well over that surface. The list replaces the pairs from the engine's surface model. The engine measures each pair and solves none of them, and a pair that names a token the engine does not emit is reported as \`unverifiable\` |
 
 The default is 4.5, the WCAG 2.1 AA figure. The European Accessibility Act
 refers to WCAG 2.1 AA, so 4.5 is the figure with legal weight.
@@ -3141,11 +3641,16 @@ you the trade-off that a theme with heavy material makes.
 
 | Field | What it controls |
 |---|---|
-| \`namespace\` | The token prefix. Defaults to \`helix\` |
+| \`namespace\` | The token prefix. Defaults to \`helix\`. \`acme\` emits \`--acme-color-primary\` |
 
 Use \`namespace\` when your product ships its own token layer built on the
 engine. The rest of the library still reads \`--helix-*\`, so a new namespace
 changes only your own tokens.
+
+**A namespace is ASCII letters, digits, hyphens, and underscores, with no
+hyphen at either end.** The engine writes the hyphens around it. Any other
+namespace is refused with the value it received, such as an empty one, \`--acme\`,
+or \`acme tokens\`.
 `,
     introduction: `---
 description: What Helix is, and the packages it includes.
@@ -3167,8 +3672,9 @@ The components are custom elements, so you can use them in any framework or
 without one.
 
 **Helix computes your theme.** You enter a few inputs, such as your brand color,
-and Helix computes every token from them. Every text and background pair meets
-its contrast target. See [Theming](./theming).
+and Helix computes every token from them. Helix measures the contrast of each
+text and background pair it solves, and reports any pair that misses its target.
+See [Theming](./theming).
 
 **AI agents can read it.** A custom elements manifest describes every component,
 with typed options, documented parts, and generated React prop names, so an
@@ -3223,7 +3729,7 @@ custom events. [React](./react) covers both.
 See [Tiers](./tiers) for how the packages relate and which one to use.
 `,
     localization: `---
-description: Set the locale of date, time, and number controls, translate the built-in words, and lay out pages right to left.
+description: Set the locale of date, time, and number controls, translate the built-in words, lay out pages right to left, and color a rise and a fall for your market.
 section: Essentials
 title: Localization and RTL
 ---
@@ -3387,7 +3893,7 @@ Register the words for a language once, and every element in that language
 speaks them:
 
 \`\`\`js
-import { registerWords } from '@fusion.dev/helix'
+import { registerWords } from '@fusion.dev/helix/words'
 
 registerWords('pl', {
   'helix-combobox': {
@@ -3403,8 +3909,12 @@ registerWords('pl', {
 \`\`\`
 
 Each family's words are keyed by its tag, such as \`helix-combobox\`, and then
-by the property name. The headless and styled tiers share one key. To type the
-keys, import the generated types once:
+by the property name. The headless and styled tiers share one key.
+\`@fusion.dev/helix/words\` holds \`registerWords\` without the elements, so a page
+can register its words before it loads any, and it types each key and property.
+A page that uses only the headless tier imports
+\`@fusion.dev/helix-headless/words\`. With \`registerWords\` imported from another
+entry, import the types once:
 
 \`\`\`ts
 import type {} from '@fusion.dev/helix/words'
@@ -3554,6 +4064,81 @@ Aria's \`@react-stately/color\` translates, so you can reuse that table.
 Helix ships English words and no translations. Pass the words from your own
 translation system, either to \`registerWords\` or to the properties.
 
+## Rise and fall colors
+
+Markets draw a price movement in different colors:
+
+- Mainland China, Taiwan, and Japan draw a rise in red and a fall in green.
+- Hong Kong, like most other markets, draws a rise in green and a fall in red.
+
+Colors that show a status, such as an error or a warning, are the same in all
+of these markets. Only a color that shows which way a value moved changes.
+
+Two tokens hold these colors:
+
+| Token | Default |
+|---|---|
+| \`--helix-color-rise\` | \`--helix-color-success\`, which is green |
+| \`--helix-color-fall\` | \`--helix-color-danger\`, which is red |
+
+\`Trend\` uses them when you set \`color-by="movement"\`. Without it, the color of a
+trend follows \`good\`, which says whether the change is an improvement.
+
+For a page that shows one of the markets that draw a rise in red, swap the two
+tokens at the root of the page, and set \`color-by\` on each trend:
+
+\`\`\`css
+:root,
+[data-helix-theme] {
+  --helix-color-fall: var(--helix-color-success);
+  --helix-color-rise: var(--helix-color-danger);
+}
+\`\`\`
+
+\`\`\`html
+<helix-trend
+  color-by="movement"
+  format-options='{"style":"percent","maximumFractionDigits":2}'
+  value="0.0124"
+>
+  <span slot="label">Shanghai Composite</span>
+</helix-trend>
+\`\`\`
+
+An element with \`data-helix-theme\` declares every token again for the part of
+the page it themes, so the rule names \`[data-helix-theme]\` beside \`:root\`. To
+color one part of a page, such as a panel of Shanghai prices on a page about
+several markets, set the two tokens on that panel.
+
+The two tokens point at the status colors, so after the swap each one still
+measures at least 4.5:1 on the page and on every surface, in both modes. A
+theme that changes \`success\` and \`danger\` changes them too.
+
+**Helix does not set these from \`lang\`.** The language of a page does not name
+its market. A page in Chinese for Hong Kong draws a rise in green, a \`zh-Hant\`
+page with no region could be for Taiwan or for Hong Kong, and a page in English
+can show Shanghai prices. If the language of your page does decide its market,
+select on the language yourself:
+
+\`\`\`css
+:is(:root, [data-helix-theme]):is(:lang(zh-CN), :lang(zh-TW), :lang(ja)) {
+  --helix-color-fall: var(--helix-color-success);
+  --helix-color-rise: var(--helix-color-danger);
+}
+\`\`\`
+
+A page in \`zh-HK\` matches none of these, so it keeps green for a rise.
+
+Other components color a series by its place in the list, or by a tone you
+name. To draw one in the color of a rise or a fall, set its own color to the
+token, such as \`--sparkline-color: var(--helix-color-rise)\` on the sparkline of
+a price that went up.
+
+Sources:
+
+- [Benzinga, on the colors of stock prices in China, Japan, and Taiwan](https://www.benzinga.com/general/education/21/10/23258001/did-you-know-you-dont-want-to-be-in-the-green-if-youre-trading-in-china-japan-or-taiwan)
+- [Feng Jiang, Rui Zhang, and Su Lu, on red and green in the Chinese and Hong Kong markets](https://www.behavioraleconomics.com/when-red-means-go)
+
 ## What to check when you add a language
 
 - **Long strings.** Labels in German and Finnish are often long. A control sized
@@ -3562,6 +4147,9 @@ translation system, either to \`registerWords\` or to the properties.
   buttons may now fit four.
 - **The \`lang\` attribute.** Set it as well as translating the strings.
   Hyphenation, quotation marks, and font fallback all depend on it.
+- **A market's colors.** If the new language comes with a market that draws a
+  rise in red, swap the rise and fall tokens. See
+  [Rise and fall colors](#rise-and-fall-colors).
 - **Numerals.** \`Intl\` formats the digits. A \`%\` or a currency symbol hardcoded
   in your own markup does not move to the correct side.
 - **Icons that point.** A caret that a component draws turns by itself. An icon
@@ -3717,6 +4305,11 @@ theme. Map labels meet a contrast target of 4.5 against the land. Pass
 \`contrast\` to change it, \`language\` to choose which name each place is labeled
 with, and \`tiles\` and \`glyphs\` to use your own tile server.
 
+The tiles come from OpenFreeMap unless you pass \`tiles\`, and so do the glyphs
+unless you pass \`glyphs\` or \`font\`. OpenFreeMap needs no key. Your reader's
+browser requests the map's tiles and glyphs from OpenFreeMap's servers, and
+\`mapSnapshot\` requests its tiles from them on your server.
+
 Pass \`font\` to draw the labels in your theme's typeface. MapLibre draws the
 letters in the page from the font your page has loaded, so there are no glyph
 files to fetch. \`mapFontFrom(frame)\` reads the typeface from your theme, and
@@ -3724,6 +4317,8 @@ files to fetch. \`mapFontFrom(frame)\` reads the typeface from your theme, and
 create the map, because MapLibre keeps each letter as first drawn:
 
 \`\`\`js
+import { fontReady, mapFontFrom } from '@fusion.dev/helix-map'
+
 const font = mapFontFrom(frame)
 await fontReady(font)
 const map = new maplibregl.Map({ container: 'map', style: mapLibreStyle(colors, { font }) })
@@ -3803,7 +4398,7 @@ const view = {
   zoom: 14,
 }
 const snapshot = await mapSnapshot(view)
-// Inside helix-map, after <div id="map"></div>, write the snapshot's markup.
+// Inside helix-map, after <div id="map"></div>, write snapshot.markup.
 \`\`\`
 
 Give MapLibre the same \`center\`, \`zoom\`, \`pitch\`, and \`bearing\`, and the snapshot
@@ -3811,15 +4406,55 @@ lines up with the map that replaces it. \`width\` and \`height\` are the box it
 drawn for, and a smaller box shows its middle. A snapshot draws the land, water,
 parks, buildings, and roads, and leaves the labels to MapLibre. Its colors are
 your theme's tokens, so it is light or dark with the page and follows a theme
-change. It resolves to an empty string when any tile it needs cannot be read
+change. Its \`markup\` is an empty string when any tile it needs cannot be read
 in time, so a snapshot is whole or absent and the map draws in its place. Each
 request is given \`timeout\` milliseconds, 3000 by default. Cache only a snapshot
-that is not empty.
-
-In a framework that renders the markup for you, such as React, put the snapshot
+whose \`markup\` is not empty.
+
+A snapshot reads OpenFreeMap's tiles from your server by default. Pass the
+\`tiles\` you give \`mapLibreStyle\` as \`mapSnapshot(view, { tiles })\` to read
+your own.
+
+**The snapshot carries the map credit.** Most tile licenses require the credit
+wherever the map is shown, including before MapLibre loads and on a page that
+never loads it. \`markup\` is the picture followed by the credit your tiles
+name, in a \`<span slot="attribution">\` marked \`data-helix-map-credit\`, so the
+frame shows the credit from the first paint. \`connectMap\` hides that credit
+once it writes MapLibre's, which names the same tiles.
+
+A snapshot also holds the two apart: \`picture\`, the map alone, and \`credit\`,
+the credit as runs of words and links, each \`{ text }\` or \`{ href, text }\`.
+In a framework that renders the markup for you, such as React, put \`picture\`
 in an element that is a direct child of the frame and has the
-\`data-helix-map-snapshot\` attribute. \`connectMap\` hides that element, and leaves
-removing it to your framework.
+\`data-helix-map-snapshot\` attribute. Write \`credit\` in a
+\`<span slot="attribution" data-helix-map-credit>\`, also a direct child of the
+frame:
+
+\`\`\`jsx
+<helix-map label="Downtown Austin">
+  <div id="map" />
+  <div dangerouslySetInnerHTML={{ __html: snapshot.picture }} data-helix-map-snapshot="" />
+  {snapshot.credit.length > 0 ? (
+    <span data-helix-map-credit="" slot="attribution">
+      {snapshot.credit.map((part, index) =>
+        part.href ? (
+          <a data-link="quiet" href={part.href} key={index} rel="noopener noreferrer" target="_blank">
+            {part.text}
+          </a>
+        ) : (
+          part.text
+        ),
+      )}
+    </span>
+  ) : null}
+</helix-map>
+\`\`\`
+
+\`connectMap\` hides both elements, and leaves removing them to your framework.
+
+A credit you slot yourself, with no \`data-helix-map-credit\`, wins. Write
+\`picture\` alone beside it. A snapshot credit already in the frame is hidden
+when \`connectMap\` connects.
 
 A snapshot is a flat map. A map zoomed out past about 6 is a globe in MapLibre,
 so draw snapshots of city and street views.
@@ -3897,7 +4532,9 @@ finished.
 | \`helix-map-contours\` | Contour lines, each at one height |
 | \`helix-map-landcover\` | What covers the ground: forest, grass, farmland, sand, rock, and ice |
 
-Each element takes \`tone\`, such as \`primary\` or \`danger\`, for its color.
+Markers, routes, areas, positions, points, and buildings take \`tone\`, such as
+\`primary\` or \`danger\`, for their color. Raster tiles keep their own colors, and
+terrain, contours, and landcover take theirs from your theme.
 
 ### Markers
 
@@ -3912,11 +4549,14 @@ Each element takes \`tone\`, such as \`primary\` or \`danger\`, for its color.
 </helix-map-marker>
 \`\`\`
 
-A marker is a button placed at its latitude and longitude. Its \`label\` appears
-when you hover over or focus the marker. The \`icon\` slot holds a letter, a
-number, or an icon, and \`shape\` sets the marker's form: \`ring\`, \`rounded\`,
-\`square\`, \`diamond\`, or \`pin\`. Pressing a marker sends \`helix-activate\` from the
-frame with the marker's \`name\`, or its \`label\` if it has no name.
+A marker is a button placed at its latitude and longitude. Its point is as
+large as the map's landmarks, in your primary color, with a dot in the middle
+and a halo of the same color around it, so your places stand out from the
+landmarks. Its \`label\` appears when you hover over or focus the marker. The
+\`icon\` slot holds a letter, a number, or an icon in place of the dot, and
+\`shape\` sets the marker's form: \`ring\`, \`rounded\`, \`square\`, \`diamond\`, or
+\`pin\`. Pressing a marker sends \`helix-activate\` from the frame with the
+marker's \`name\`, or its \`label\` if it has no name.
 
 To show that a place has been visited, add \`passed\`. The marker is drawn in a
 muted color, and screen readers hear its name followed by "passed". Use
@@ -4429,11 +5069,13 @@ We publish the method so you can repeat each measurement.
 Each component has two columns. Components share a runtime, so no single
 number gives the cost of one component:
 
-- **Alone** is a page that uses the component and nothing else. It includes the runtime the component needs, so a sum of Alone numbers counts the runtime once for every component.
+- **Alone** is a page that imports the component's own entry and nothing else. It includes the runtime the component needs, so a sum of Alone numbers counts the runtime once for every component.
 - **Added** is what the component adds to a page that already has the runtime. It leaves out the shared runtime, so it understates the cost of your first component.
 
 The cost on your page falls between the two numbers.
 
+A container that holds another family's elements does not register them, so neither column includes them. A page with a Select also imports \`option\`, and a page with a Data Table also imports \`table\`. Each component's page lists the entries to import beside it.
+
 ## The shared runtime
 
 The shared runtime is Lit and \`@fusion.dev/helix-core\`. Every element needs it,
@@ -4447,7 +5089,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 254,802 | 82,008 | 70,115 |
+| Lit and \`@fusion.dev/helix-core\` | 264,965 | 85,796 | 73,181 |
 
 ## Whole packages
 
@@ -4458,12 +5100,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 254,011 | 81,843 | 69,762 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,432,689 | 399,675 | 300,018 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 264,174 | 85,657 | 72,818 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,457,984 | 408,952 | 306,808 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
-| \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| \`fusion_helix_theme_bg.wasm\` | 490,971 | 155,905 | 125,923 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
-| \`@fusion.dev/helix\` | 2,151,139 | 554,602 | 395,565 | Every styled family. |
+| \`@fusion.dev/helix-theme\` | 4,030 | 1,791 | 1,560 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
+| \`fusion_helix_theme_bg.wasm\` | 408,830 | 152,342 | 122,874 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
+| \`@fusion.dev/helix\` | 2,179,209 | 564,636 | 402,625 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -4476,21 +5118,21 @@ shows the whole cost of using the base layer on its own.
 
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`base.css\` | 34,352 | 4,806 | 4,174 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
+| \`base.css\` | 33,901 | 4,783 | 4,149 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
 | \`elements.css\` | 19,633 | 2,937 | 2,632 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
 | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
 | \`primitives.css\` | 7,511 | 1,401 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
-| \`tokens.css\` | 22,747 | 2,757 | 2,314 | The 197 semantic tokens. Every styled component needs them. |
+| \`tokens.css\` | 22,846 | 2,778 | 2,332 | The 199 semantic tokens. Every styled component needs them. |
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 18,850 bytes gzipped alone, and it adds 4,385 to a page that already has Helix. The shared runtime is 77 percent of the first component, and the component itself is 23 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
+**Most of your first component is the shared runtime.** The median styled family is 19,331 bytes gzipped alone, and it adds 4,376 to a page that already has Helix. The shared runtime is 77 percent of the first component, and the component itself is 23 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the 113 styled components, the smallest is \`code\` at 8,332 bytes gzipped alone, and the largest is \`data-table\` at 66,817. Every family together is 554,602.
+Across the 113 styled components, the smallest is \`code\` at 8,560 bytes gzipped alone, and the largest is \`data-table\` at 67,583. Every family together is 564,636.
 
-No family imports a barrel. The \`barrels\` rule in \`fusion x workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 399,675 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 113 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
+No family imports a barrel. The \`barrels\` rule in \`fusion x workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 408,952 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 113 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
 
-The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 17,663 bytes gzipped alone.
+The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 18,197 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -4502,43 +5144,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 41,612 | 14,008 | 12,455 |
+| \`button\` | **Helix** | 42,638 | 14,385 | 12,821 |
 | | Carbon | 133,058 | 20,959 | 17,685 |
 | | Material Web | 47,060 | 14,173 | 12,591 |
 | | Spectrum | 98,792 | 22,045 | 18,674 |
 | | Web Awesome | 136,044 | 33,730 | 28,760 |
-| \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,521 |
+| \`checkbox\` | **Helix** | 47,728 | 15,518 | 13,836 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Spectrum | 62,492 | 15,437 | 13,481 |
 | | Web Awesome | 115,251 | 28,728 | 24,420 |
-| \`dialog\` | **Helix** | 43,407 | 14,900 | 13,275 |
+| \`dialog\` | **Helix** | 44,311 | 15,226 | 13,612 |
 | | Carbon | 510,866 | 67,390 | 39,189 |
 | | Material Web | 34,238 | 11,510 | 10,229 |
 | | Spectrum | 155,708 | 31,899 | 26,262 |
 | | Web Awesome | 148,657 | 36,692 | 31,388 |
-| \`radio\` | **Helix** | 50,349 | 15,976 | 14,205 |
+| \`radio\` | **Helix** | 51,120 | 16,282 | 14,511 |
 | | Carbon | 63,055 | 16,887 | 14,605 |
 | | Material Web | 41,044 | 13,234 | 11,757 |
 | | Spectrum | 38,685 | 10,660 | 9,370 |
 | | Web Awesome | 112,026 | 27,416 | 23,128 |
-| \`switch\` | **Helix** | 43,562 | 14,636 | 13,040 |
+| \`switch\` | **Helix** | 44,449 | 14,978 | 13,325 |
 | | Carbon | 69,423 | 17,127 | 14,764 |
 | | Material Web | 50,155 | 14,577 | 12,935 |
 | | Spectrum | 62,322 | 15,059 | 13,321 |
 | | Web Awesome | 45,876 | 15,003 | 13,475 |
-| \`tabs\` | **Helix** | 55,263 | 17,752 | 15,831 |
+| \`tabs\` | **Helix** | 56,031 | 18,047 | 16,065 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Spectrum | 64,875 | 18,298 | 16,283 |
 | | Web Awesome | 153,439 | 37,030 | 31,737 |
-| \`tooltip\` | **Helix** | 61,420 | 21,834 | 19,360 |
+| \`tooltip\` | **Helix** | 62,502 | 22,262 | 19,733 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 | | Web Awesome | 70,568 | 24,005 | 21,107 |
 
-At least one system is smaller than Helix on \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,316 bytes gzipped. 6 of 27 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,622 bytes gzipped. 8 of 27 peer measurements are smaller than the Helix row.
 
 Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
 
@@ -4569,8 +5211,8 @@ A system covers a job when its manifest defines an element with one of a fixed l
 | Chat | \`helix-chat\` |  |  |  |  |
 | Command palette | \`helix-command\` |  |  |  |  |
 | Product tour | \`helix-tour\` |  |  | \`sp-coachmark\` |  |
-| Node diagrams | \`helix-canvas\` (experimental) |  |  |  |  |
-| Maps | \`helix-map\` (experimental) |  |  |  |  |
+| Node diagrams | \`helix-canvas\` |  |  |  |  |
+| Maps | \`helix-map\` |  |  |  |  |
 | Video player | \`helix-video\` |  |  |  |  |
 | Carousel | \`helix-carousel\` |  |  |  | \`wa-carousel\` (experimental) |
 | **Jobs covered** | 16 of 16 | 6 of 16 | 0 of 16 | 5 of 16 | 3 of 16 |
@@ -4612,112 +5254,112 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 31,879 | 11,804 | 10,469 | 5,328 | 1,580 | 1,165 |
-| \`announcement\` | 36,692 | 13,312 | 11,874 | 4,681 | 1,368 | 960 |
-| \`app-header\` | 32,289 | 11,898 | 10,586 | 5,870 | 1,747 | 1,194 |
-| \`area-chart\` | 90,301 | 31,726 | 28,040 | 14,057 | 4,342 | 3,430 |
-| \`avatar\` | 30,463 | 11,595 | 10,389 | 3,957 | 1,213 | 963 |
-| \`badge\` | 27,088 | 10,568 | 9,406 | 2,942 | 889 | 599 |
-| \`bar-chart\` | 94,416 | 32,820 | 29,035 | 18,022 | 5,410 | 4,321 |
-| \`blockquote\` | 24,107 | 9,421 | 8,330 | 2,401 | 877 | 594 |
-| \`breadcrumbs\` | 36,279 | 13,907 | 12,433 | 7,357 | 2,410 | 1,979 |
-| \`button\` | 35,194 | 12,591 | 11,206 | 4,922 | 1,424 | 1,043 |
-| \`button-group\` | 27,640 | 10,381 | 9,203 | 4,926 | 1,515 | 1,168 |
-| \`callout\` | 35,256 | 13,593 | 12,065 | 2,884 | 964 | 718 |
-| \`canvas\` | 108,483 | 34,750 | 30,415 | 68,924 | 20,931 | 17,512 |
-| \`card\` | 23,824 | 9,092 | 8,084 | 2,090 | 626 | 425 |
-| \`carousel\` | 43,576 | 15,462 | 13,785 | 15,235 | 4,220 | 3,263 |
-| \`chat\` | 79,505 | 26,469 | 23,447 | 27,570 | 8,044 | 6,267 |
-| \`checkbox\` | 40,374 | 13,680 | 12,220 | 3,107 | 960 | 604 |
-| \`checkbox-group\` | 47,602 | 15,599 | 13,904 | 8,324 | 2,348 | 1,734 |
-| \`code\` | 20,301 | 8,015 | 7,118 | 138 | 66 | 61 |
-| \`code-block\` | 102,738 | 34,889 | 30,795 | 36,843 | 10,711 | 8,686 |
-| \`color-input\` | 141,792 | 45,090 | 39,350 | 55,133 | 14,292 | 11,566 |
-| \`color-picker\` | 103,415 | 32,966 | 28,872 | 47,251 | 12,669 | 10,154 |
-| \`combobox\` | 132,023 | 41,951 | 36,953 | 35,789 | 9,084 | 7,127 |
-| \`command\` | 99,560 | 31,521 | 27,741 | 30,059 | 8,103 | 6,352 |
-| \`copy-button\` | 80,548 | 27,648 | 24,494 | 18,340 | 4,938 | 3,819 |
-| \`data-table\` | 199,900 | 61,427 | 52,554 | 89,488 | 23,798 | 19,031 |
-| \`date-input\` | 141,223 | 44,511 | 39,196 | 38,227 | 9,423 | 7,354 |
-| \`date-picker\` | 61,360 | 20,936 | 18,757 | 20,345 | 5,600 | 4,295 |
-| \`description-list\` | 22,900 | 8,765 | 7,767 | 1,565 | 491 | 327 |
-| \`dialog\` | 38,294 | 13,634 | 12,133 | 5,837 | 1,715 | 1,352 |
-| \`divider\` | 22,991 | 8,923 | 7,885 | 1,415 | 503 | 294 |
-| \`donut-chart\` | 89,212 | 31,128 | 27,565 | 14,639 | 4,495 | 3,565 |
-| \`drawer\` | 42,939 | 15,158 | 13,507 | 7,697 | 2,296 | 1,845 |
-| \`drilldown\` | 42,756 | 14,941 | 13,294 | 9,708 | 2,702 | 2,043 |
-| \`empty\` | 24,241 | 9,287 | 8,241 | 1,951 | 639 | 446 |
-| \`file-input\` | 57,757 | 20,018 | 17,801 | 13,093 | 4,121 | 3,261 |
-| \`filter-input\` | 97,846 | 32,818 | 29,104 | 21,628 | 6,186 | 4,812 |
-| \`format-date\` | 30,158 | 11,290 | 10,084 | 4,431 | 1,265 | 1,031 |
-| \`graph\` | 75,588 | 24,761 | 21,885 | 23,095 | 6,734 | 5,372 |
-| \`heatmap\` | 98,128 | 33,502 | 29,622 | 18,941 | 5,574 | 4,404 |
-| \`icon\` | 82,157 | 28,049 | 23,966 | 58,303 | 19,610 | 16,156 |
-| \`icon-button\` | 35,305 | 12,620 | 11,226 | 5,031 | 1,446 | 1,101 |
-| \`image\` | 25,504 | 9,479 | 8,419 | 3,822 | 1,132 | 974 |
-| \`input\` | 46,361 | 15,975 | 14,079 | 7,351 | 2,387 | 1,659 |
-| \`kbd\` | 27,511 | 10,569 | 9,333 | 3,516 | 1,111 | 777 |
-| \`legend\` | 35,184 | 12,934 | 11,520 | 2,956 | 978 | 650 |
-| \`lightbox\` | 55,724 | 18,817 | 16,716 | 16,728 | 4,631 | 3,404 |
-| \`line-chart\` | 91,335 | 31,879 | 28,263 | 14,760 | 4,398 | 3,569 |
-| \`list\` | 61,803 | 21,293 | 18,953 | 15,241 | 4,414 | 3,389 |
-| \`listbox\` | 76,711 | 25,427 | 22,460 | 15,562 | 4,563 | 3,379 |
-| \`loader\` | 26,379 | 10,040 | 8,940 | 2,774 | 913 | 710 |
-| \`log\` | 79,881 | 27,342 | 24,218 | 37,541 | 11,701 | 9,828 |
-| \`map\` | 79,178 | 24,571 | 21,536 | 37,042 | 10,074 | 7,981 |
-| \`megamenu\` | 60,089 | 21,721 | 19,225 | 8,657 | 2,397 | 1,743 |
-| \`menu\` | 97,473 | 32,552 | 28,757 | 30,180 | 7,919 | 6,266 |
-| \`meter\` | 31,721 | 12,025 | 10,727 | 4,893 | 1,409 | 1,203 |
-| \`motion-toggle\` | 25,678 | 9,986 | 8,876 | 1,426 | 509 | 354 |
-| \`navigation\` | 33,088 | 12,436 | 11,040 | 3,365 | 1,157 | 886 |
-| \`notifications\` | 58,346 | 19,880 | 17,760 | 18,207 | 5,058 | 3,845 |
-| \`number-input\` | 56,271 | 18,841 | 16,806 | 13,522 | 3,584 | 2,705 |
-| \`object-inspector\` | 113,929 | 38,373 | 33,742 | 35,491 | 10,254 | 8,197 |
-| \`option\` | 26,477 | 9,763 | 8,666 | 4,523 | 1,184 | 896 |
-| \`outline\` | 33,612 | 12,597 | 11,180 | 7,856 | 2,558 | 1,958 |
-| \`pagination\` | 136,258 | 43,650 | 37,976 | 45,379 | 11,839 | 9,383 |
-| \`pin-input\` | 47,068 | 16,414 | 14,643 | 6,735 | 2,224 | 1,638 |
-| \`popover\` | 63,853 | 22,981 | 20,296 | 6,373 | 1,853 | 1,293 |
-| \`progress\` | 28,084 | 10,727 | 9,550 | 2,969 | 909 | 633 |
-| \`qr-code\` | 42,719 | 16,647 | 14,821 | 17,001 | 6,288 | 5,239 |
-| \`quote\` | 22,516 | 8,884 | 7,826 | 1,210 | 510 | 385 |
-| \`radio\` | 42,561 | 14,464 | 12,890 | 3,817 | 1,200 | 751 |
-| \`rating\` | 50,257 | 17,292 | 15,436 | 8,027 | 2,434 | 1,801 |
-| \`scatter-chart\` | 91,226 | 31,675 | 27,987 | 16,123 | 4,842 | 3,865 |
-| \`scroll-area\` | 30,430 | 11,078 | 9,814 | 8,499 | 2,573 | 2,022 |
-| \`select\` | 115,289 | 38,175 | 33,424 | 26,031 | 7,119 | 5,380 |
-| \`skeleton\` | 22,328 | 8,643 | 7,676 | 991 | 396 | 245 |
-| \`skip-link\` | 23,871 | 9,337 | 8,264 | 1,224 | 474 | 348 |
-| \`slider\` | 52,873 | 17,827 | 15,953 | 13,158 | 3,777 | 2,938 |
-| \`sparkline\` | 47,984 | 17,499 | 15,598 | 5,979 | 2,127 | 1,638 |
-| \`spatial-bar-chart\` | 101,617 | 35,955 | 31,747 | 19,779 | 6,524 | 5,174 |
-| \`spatial-heatmap\` | 113,473 | 38,794 | 34,033 | 31,592 | 9,582 | 7,685 |
-| \`spatial-ribbon-chart\` | 100,738 | 35,553 | 31,418 | 20,718 | 6,906 | 5,498 |
-| \`spatial-scatter-chart\` | 98,971 | 34,841 | 30,696 | 19,012 | 6,269 | 4,923 |
-| \`spatial-surface-chart\` | 101,895 | 36,125 | 31,812 | 21,876 | 7,441 | 6,027 |
-| \`spatial-treemap\` | 103,011 | 36,754 | 32,306 | 21,297 | 7,375 | 5,894 |
-| \`speed-dial\` | 68,751 | 24,717 | 21,895 | 10,914 | 2,968 | 2,274 |
-| \`splitter\` | 43,751 | 15,168 | 13,534 | 14,396 | 3,840 | 3,025 |
-| \`stat\` | 25,255 | 9,674 | 8,602 | 2,302 | 753 | 539 |
-| \`steps\` | 53,623 | 18,635 | 16,600 | 13,601 | 3,845 | 2,936 |
-| \`switch\` | 39,233 | 13,496 | 12,037 | 1,679 | 600 | 398 |
-| \`table\` | 118,358 | 37,061 | 32,295 | 45,146 | 12,424 | 9,986 |
-| \`tabs\` | 46,310 | 15,908 | 14,141 | 10,491 | 2,875 | 2,214 |
-| \`tag\` | 42,676 | 15,621 | 13,970 | 8,453 | 2,544 | 1,941 |
-| \`textarea\` | 43,852 | 14,940 | 13,325 | 5,401 | 1,602 | 1,190 |
-| \`time-input\` | 169,269 | 52,676 | 45,775 | 48,509 | 12,418 | 9,883 |
-| \`time-picker\` | 99,603 | 31,517 | 27,750 | 33,932 | 9,177 | 7,227 |
-| \`timeline\` | 31,286 | 11,863 | 10,613 | 4,060 | 1,184 | 830 |
-| \`toast\` | 50,871 | 17,940 | 15,980 | 12,122 | 3,516 | 2,664 |
-| \`toggle\` | 45,577 | 15,269 | 13,579 | 6,007 | 1,805 | 1,324 |
-| \`toolbar\` | 31,047 | 11,572 | 10,293 | 5,157 | 1,639 | 1,148 |
-| \`tooltip\` | 58,616 | 21,090 | 18,716 | 8,432 | 2,348 | 1,819 |
-| \`tour\` | 83,717 | 28,762 | 25,407 | 19,811 | 5,426 | 4,294 |
-| \`tree\` | 67,586 | 22,717 | 20,230 | 17,197 | 4,927 | 3,902 |
-| \`trend\` | 29,717 | 11,568 | 10,334 | 3,485 | 1,070 | 826 |
-| \`video\` | 142,270 | 44,463 | 38,732 | 66,678 | 16,800 | 13,853 |
-| \`video-playlist\` | 127,686 | 41,301 | 36,371 | 42,775 | 11,169 | 9,117 |
-| \`virtual-list\` | 63,451 | 21,631 | 19,238 | 23,304 | 7,149 | 5,704 |
+| \`accordion\` | 32,671 | 12,095 | 10,738 | 5,377 | 1,558 | 1,115 |
+| \`announcement\` | 37,661 | 13,707 | 12,236 | 4,700 | 1,380 | 963 |
+| \`app-header\` | 33,168 | 12,242 | 10,882 | 5,900 | 1,760 | 1,235 |
+| \`area-chart\` | 99,355 | 34,966 | 30,900 | 14,417 | 4,436 | 3,601 |
+| \`avatar\` | 31,887 | 12,153 | 10,896 | 3,999 | 1,246 | 921 |
+| \`badge\` | 28,118 | 10,943 | 9,747 | 2,960 | 887 | 624 |
+| \`bar-chart\` | 107,369 | 37,644 | 33,280 | 21,901 | 6,878 | 5,646 |
+| \`blockquote\` | 24,679 | 9,638 | 8,549 | 2,400 | 883 | 717 |
+| \`breadcrumbs\` | 37,419 | 14,329 | 12,824 | 7,381 | 2,413 | 1,888 |
+| \`button\` | 36,221 | 12,969 | 11,566 | 5,127 | 1,522 | 1,037 |
+| \`button-group\` | 28,214 | 10,616 | 9,418 | 4,923 | 1,508 | 1,105 |
+| \`callout\` | 36,284 | 13,988 | 12,430 | 2,884 | 960 | 693 |
+| \`canvas\` | 109,962 | 35,313 | 30,855 | 68,989 | 21,024 | 17,645 |
+| \`card\` | 24,397 | 9,311 | 8,254 | 2,090 | 634 | 427 |
+| \`carousel\` | 45,040 | 16,012 | 14,309 | 15,317 | 4,235 | 3,274 |
+| \`chat\` | 80,951 | 26,986 | 23,897 | 27,678 | 8,076 | 6,375 |
+| \`checkbox\` | 41,242 | 14,016 | 12,507 | 3,107 | 959 | 567 |
+| \`checkbox-group\` | 48,465 | 15,944 | 14,217 | 8,321 | 2,373 | 1,588 |
+| \`code\` | 20,869 | 8,248 | 7,311 | 138 | 67 | 25 |
+| \`code-block\` | 104,774 | 35,631 | 31,442 | 37,349 | 10,789 | 8,834 |
+| \`color-input\` | 143,744 | 45,826 | 39,959 | 55,780 | 14,227 | 11,731 |
+| \`color-picker\` | 105,363 | 33,633 | 29,440 | 47,900 | 12,700 | 10,319 |
+| \`combobox\` | 133,766 | 42,655 | 37,506 | 35,968 | 9,135 | 7,215 |
+| \`command\` | 101,170 | 32,143 | 28,267 | 30,351 | 8,182 | 6,545 |
+| \`copy-button\` | 82,225 | 28,294 | 25,019 | 18,756 | 5,070 | 4,024 |
+| \`data-table\` | 201,919 | 62,149 | 53,145 | 89,974 | 24,051 | 19,267 |
+| \`date-input\` | 143,049 | 45,174 | 39,697 | 38,666 | 9,515 | 7,551 |
+| \`date-picker\` | 63,093 | 21,512 | 19,282 | 20,720 | 5,656 | 4,439 |
+| \`description-list\` | 23,472 | 8,993 | 7,999 | 1,565 | 498 | 254 |
+| \`dialog\` | 39,175 | 13,972 | 12,446 | 5,948 | 1,764 | 1,243 |
+| \`divider\` | 23,564 | 9,144 | 8,085 | 1,414 | 495 | 355 |
+| \`donut-chart\` | 92,673 | 32,268 | 28,539 | 14,717 | 4,498 | 3,641 |
+| \`drawer\` | 43,812 | 15,483 | 13,793 | 7,798 | 2,316 | 1,866 |
+| \`drilldown\` | 43,527 | 15,249 | 13,622 | 9,709 | 2,684 | 2,052 |
+| \`empty\` | 25,007 | 9,579 | 8,498 | 1,976 | 646 | 323 |
+| \`file-input\` | 59,118 | 20,550 | 18,268 | 13,152 | 4,118 | 3,191 |
+| \`filter-input\` | 99,578 | 33,493 | 29,738 | 21,569 | 6,178 | 4,972 |
+| \`format-date\` | 31,209 | 11,674 | 10,418 | 4,474 | 1,290 | 951 |
+| \`graph\` | 76,986 | 25,236 | 22,347 | 23,180 | 6,769 | 5,429 |
+| \`heatmap\` | 101,735 | 34,694 | 30,635 | 19,071 | 5,600 | 4,551 |
+| \`icon\` | 83,516 | 28,589 | 24,445 | 58,618 | 20,085 | 16,045 |
+| \`icon-button\` | 36,332 | 13,001 | 11,592 | 5,236 | 1,561 | 1,120 |
+| \`image\` | 26,373 | 9,843 | 8,745 | 3,845 | 1,148 | 815 |
+| \`input\` | 47,049 | 16,178 | 14,347 | 7,005 | 2,242 | 1,478 |
+| \`kbd\` | 28,084 | 10,789 | 9,553 | 3,518 | 1,104 | 774 |
+| \`legend\` | 36,396 | 13,369 | 11,949 | 2,955 | 984 | 682 |
+| \`lightbox\` | 57,138 | 19,382 | 17,237 | 16,760 | 4,614 | 3,463 |
+| \`line-chart\` | 102,350 | 35,823 | 31,666 | 16,812 | 5,062 | 4,206 |
+| \`list\` | 62,949 | 21,723 | 19,337 | 15,258 | 4,394 | 3,364 |
+| \`listbox\` | 78,070 | 25,947 | 22,965 | 15,605 | 4,579 | 3,395 |
+| \`loader\` | 27,341 | 10,451 | 9,310 | 2,785 | 940 | 677 |
+| \`log\` | 80,937 | 27,698 | 24,593 | 37,582 | 11,597 | 9,825 |
+| \`map\` | 81,046 | 25,212 | 22,053 | 37,496 | 10,232 | 8,090 |
+| \`megamenu\` | 61,165 | 22,169 | 19,586 | 8,723 | 2,442 | 1,704 |
+| \`menu\` | 98,510 | 32,959 | 29,021 | 30,262 | 7,971 | 6,316 |
+| \`meter\` | 32,921 | 12,484 | 11,131 | 4,980 | 1,464 | 1,175 |
+| \`motion-toggle\` | 26,353 | 10,250 | 9,108 | 1,426 | 514 | 316 |
+| \`navigation\` | 33,861 | 12,731 | 11,315 | 3,364 | 1,161 | 888 |
+| \`notifications\` | 59,539 | 20,332 | 18,148 | 18,280 | 5,038 | 4,017 |
+| \`number-input\` | 57,629 | 19,358 | 17,261 | 13,579 | 3,609 | 2,827 |
+| \`object-inspector\` | 115,897 | 39,008 | 34,310 | 36,018 | 10,397 | 8,445 |
+| \`option\` | 27,049 | 9,970 | 8,881 | 4,522 | 1,202 | 896 |
+| \`outline\` | 34,490 | 12,937 | 11,488 | 7,878 | 2,548 | 1,797 |
+| \`pagination\` | 138,030 | 44,305 | 38,517 | 45,681 | 11,904 | 9,410 |
+| \`pin-input\` | 48,848 | 17,044 | 15,220 | 7,207 | 2,364 | 1,697 |
+| \`popover\` | 64,882 | 23,350 | 20,625 | 6,460 | 1,852 | 1,283 |
+| \`progress\` | 29,235 | 11,153 | 9,959 | 3,006 | 943 | 696 |
+| \`qr-code\` | 43,669 | 17,003 | 15,113 | 17,002 | 6,288 | 5,291 |
+| \`quote\` | 23,088 | 9,112 | 8,040 | 1,209 | 499 | 432 |
+| \`radio\` | 43,333 | 14,777 | 13,152 | 3,815 | 1,205 | 816 |
+| \`rating\` | 51,593 | 17,779 | 15,883 | 8,057 | 2,440 | 1,706 |
+| \`scatter-chart\` | 98,654 | 34,303 | 30,247 | 20,338 | 6,374 | 5,276 |
+| \`scroll-area\` | 31,294 | 11,433 | 10,150 | 8,518 | 2,583 | 1,963 |
+| \`select\` | 116,719 | 38,717 | 33,960 | 26,155 | 7,165 | 5,494 |
+| \`skeleton\` | 22,900 | 8,871 | 7,891 | 991 | 377 | 277 |
+| \`skip-link\` | 24,547 | 9,607 | 8,536 | 1,223 | 456 | 336 |
+| \`slider\` | 54,642 | 18,411 | 16,505 | 13,623 | 3,851 | 2,958 |
+| \`sparkline\` | 49,258 | 17,982 | 16,072 | 5,982 | 2,086 | 1,613 |
+| \`spatial-bar-chart\` | 105,167 | 37,122 | 32,643 | 19,854 | 6,518 | 5,233 |
+| \`spatial-heatmap\` | 117,089 | 39,972 | 35,153 | 31,736 | 9,641 | 7,867 |
+| \`spatial-ribbon-chart\` | 104,288 | 36,728 | 32,391 | 20,791 | 6,921 | 5,582 |
+| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,785 | 19,085 | 6,281 | 5,062 |
+| \`spatial-surface-chart\` | 105,443 | 37,265 | 32,895 | 21,949 | 7,465 | 6,084 |
+| \`spatial-treemap\` | 106,561 | 37,910 | 33,352 | 21,370 | 7,346 | 5,941 |
+| \`speed-dial\` | 69,618 | 25,068 | 22,217 | 10,934 | 2,964 | 2,314 |
+| \`splitter\` | 45,071 | 15,638 | 13,995 | 14,506 | 3,884 | 3,124 |
+| \`stat\` | 26,285 | 10,056 | 8,958 | 2,322 | 765 | 519 |
+| \`steps\` | 54,926 | 19,123 | 17,061 | 13,804 | 3,887 | 3,073 |
+| \`switch\` | 40,096 | 13,832 | 12,335 | 1,679 | 618 | 506 |
+| \`table\` | 119,408 | 37,410 | 32,491 | 45,149 | 12,317 | 9,944 |
+| \`tabs\` | 47,080 | 16,201 | 14,421 | 10,491 | 2,847 | 2,118 |
+| \`tag\` | 43,623 | 15,994 | 14,277 | 8,450 | 2,507 | 1,811 |
+| \`textarea\` | 44,973 | 15,361 | 13,745 | 5,489 | 1,613 | 1,183 |
+| \`time-input\` | 170,882 | 53,314 | 46,321 | 48,574 | 12,340 | 9,937 |
+| \`time-picker\` | 101,126 | 32,099 | 28,322 | 33,987 | 9,197 | 7,261 |
+| \`timeline\` | 32,429 | 12,281 | 11,016 | 4,086 | 1,199 | 863 |
+| \`toast\` | 52,298 | 18,497 | 16,512 | 12,164 | 3,516 | 2,684 |
+| \`toggle\` | 46,246 | 15,540 | 13,826 | 6,005 | 1,800 | 1,291 |
+| \`toolbar\` | 31,817 | 11,859 | 10,565 | 5,156 | 1,626 | 1,170 |
+| \`tooltip\` | 59,698 | 21,530 | 19,098 | 8,504 | 2,352 | 1,775 |
+| \`tour\` | 85,264 | 29,314 | 25,917 | 20,091 | 5,517 | 4,414 |
+| \`tree\` | 68,641 | 23,150 | 20,567 | 17,198 | 4,915 | 3,955 |
+| \`trend\` | 30,937 | 12,024 | 10,726 | 3,590 | 1,102 | 800 |
+| \`video\` | 143,863 | 45,087 | 39,321 | 66,787 | 16,894 | 13,884 |
+| \`video-playlist\` | 128,994 | 41,833 | 36,771 | 42,860 | 11,206 | 9,239 |
+| \`virtual-list\` | 64,382 | 21,913 | 19,494 | 23,393 | 7,169 | 5,818 |
 
 ### Styled tier
 
@@ -4725,119 +5367,119 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 35,311 | 12,653 | 11,234 | 8,743 | 2,443 | 1,945 |
-| \`announcement\` | 41,307 | 14,364 | 12,795 | 9,277 | 2,477 | 1,910 |
-| \`app-header\` | 37,449 | 13,102 | 11,678 | 11,015 | 2,965 | 2,404 |
-| \`area-chart\` | 98,393 | 33,575 | 29,660 | 22,128 | 6,245 | 4,997 |
-| \`aura\` | 58,599 | 19,870 | 17,603 | 31,639 | 9,617 | 8,046 |
-| \`avatar\` | 33,464 | 12,351 | 11,079 | 6,945 | 1,964 | 1,455 |
-| \`badge\` | 32,595 | 11,820 | 10,528 | 8,436 | 2,150 | 1,738 |
-| \`bar-chart\` | 108,944 | 35,725 | 31,579 | 32,531 | 8,343 | 6,870 |
-| \`blockquote\` | 26,332 | 9,968 | 8,810 | 4,611 | 1,416 | 1,209 |
-| \`breadcrumbs\` | 43,220 | 15,115 | 13,521 | 14,282 | 3,647 | 2,889 |
-| \`button\` | 41,612 | 14,008 | 12,455 | 11,321 | 2,870 | 2,237 |
-| \`button-group\` | 31,138 | 11,066 | 9,812 | 8,407 | 2,205 | 1,651 |
-| \`callout\` | 39,049 | 14,536 | 12,915 | 6,659 | 1,915 | 1,478 |
-| \`canvas\` | 129,523 | 38,715 | 33,910 | 89,608 | 24,825 | 20,816 |
-| \`card\` | 27,725 | 10,099 | 8,962 | 5,976 | 1,633 | 1,319 |
-| \`carousel\` | 54,063 | 17,260 | 15,433 | 25,704 | 6,036 | 4,919 |
-| \`chat\` | 94,925 | 29,209 | 25,823 | 42,981 | 10,843 | 8,730 |
-| \`checkbox\` | 46,865 | 15,190 | 13,521 | 9,580 | 2,483 | 1,896 |
-| \`checkbox-group\` | 54,826 | 17,244 | 15,384 | 15,537 | 3,997 | 3,023 |
-| \`code\` | 21,154 | 8,332 | 7,400 | 976 | 381 | 287 |
-| \`code-block\` | 127,213 | 38,714 | 34,179 | 61,298 | 14,674 | 12,043 |
-| \`color-input\` | 184,176 | 51,349 | 44,895 | 97,504 | 20,448 | 17,029 |
-| \`color-picker\` | 140,348 | 38,509 | 33,849 | 84,175 | 18,133 | 15,092 |
-| \`combobox\` | 147,503 | 44,927 | 39,514 | 51,252 | 12,065 | 9,617 |
-| \`command\` | 110,838 | 33,878 | 29,872 | 41,331 | 10,480 | 8,487 |
-| \`copy-button\` | 92,577 | 29,825 | 26,424 | 30,351 | 7,146 | 5,767 |
-| \`data-table\` | 230,715 | 66,817 | 57,223 | 120,287 | 29,325 | 23,912 |
-| \`date-input\` | 162,349 | 48,215 | 42,508 | 59,338 | 13,170 | 10,667 |
-| \`date-picker\` | 69,281 | 22,363 | 19,996 | 28,248 | 7,038 | 5,662 |
-| \`description-list\` | 25,855 | 9,517 | 8,465 | 4,508 | 1,254 | 970 |
-| \`dialog\` | 43,407 | 14,900 | 13,275 | 10,933 | 3,020 | 2,453 |
-| \`divider\` | 25,291 | 9,546 | 8,433 | 3,698 | 1,124 | 881 |
-| \`donut-chart\` | 99,170 | 33,262 | 29,410 | 24,574 | 6,693 | 5,431 |
-| \`drawer\` | 48,772 | 16,542 | 14,790 | 13,511 | 3,736 | 2,963 |
-| \`drilldown\` | 48,438 | 16,238 | 14,468 | 15,376 | 4,007 | 3,098 |
-| \`empty\` | 25,550 | 9,761 | 8,642 | 3,242 | 1,092 | 766 |
-| \`file-input\` | 69,285 | 22,419 | 19,894 | 24,610 | 6,500 | 5,231 |
-| \`filter-input\` | 108,688 | 34,990 | 30,998 | 32,463 | 8,378 | 6,774 |
-| \`flex\` | 25,740 | 9,194 | 8,146 | 4,762 | 1,032 | 929 |
-| \`format-date\` | 30,414 | 11,403 | 10,154 | 4,669 | 1,383 | 1,002 |
-| \`graph\` | 91,503 | 27,441 | 24,189 | 38,992 | 9,539 | 7,678 |
-| \`grid\` | 27,002 | 9,845 | 8,732 | 5,637 | 1,435 | 1,229 |
-| \`heatmap\` | 106,453 | 35,370 | 31,213 | 27,245 | 7,425 | 5,968 |
-| \`icon\` | 83,995 | 28,566 | 24,451 | 60,128 | 20,162 | 16,415 |
-| \`icon-button\` | 43,040 | 13,980 | 12,441 | 12,750 | 2,859 | 2,203 |
-| \`image\` | 26,892 | 9,946 | 8,816 | 5,192 | 1,598 | 1,225 |
-| \`input\` | 50,619 | 17,064 | 15,045 | 11,592 | 3,501 | 2,678 |
-| \`kbd\` | 29,504 | 11,109 | 9,821 | 5,494 | 1,668 | 1,221 |
-| \`legend\` | 40,423 | 14,213 | 12,591 | 8,066 | 2,255 | 1,775 |
-| \`lightbox\` | 62,016 | 20,155 | 17,914 | 23,004 | 5,960 | 4,593 |
-| \`line-chart\` | 102,454 | 34,256 | 30,369 | 25,861 | 6,815 | 5,532 |
-| \`list\` | 68,150 | 22,813 | 20,367 | 21,568 | 5,926 | 4,682 |
-| \`listbox\` | 81,154 | 26,541 | 23,418 | 19,991 | 5,668 | 4,240 |
-| \`loader\` | 29,263 | 10,815 | 9,653 | 5,641 | 1,684 | 1,370 |
-| \`log\` | 91,550 | 29,627 | 26,315 | 49,199 | 14,063 | 11,709 |
-| \`map\` | 112,126 | 29,780 | 26,174 | 69,978 | 15,410 | 12,648 |
-| \`megamenu\` | 65,058 | 22,889 | 20,256 | 13,607 | 3,558 | 2,679 |
-| \`menu\` | 108,403 | 34,710 | 30,630 | 41,092 | 10,114 | 8,143 |
-| \`meter\` | 37,896 | 13,376 | 11,953 | 11,049 | 2,795 | 2,305 |
-| \`motion-toggle\` | 27,312 | 10,459 | 9,307 | 3,044 | 972 | 719 |
-| \`navigation\` | 36,814 | 13,267 | 11,776 | 7,076 | 2,006 | 1,676 |
-| \`notifications\` | 71,839 | 22,457 | 20,075 | 31,690 | 7,637 | 6,153 |
-| \`number-input\` | 61,253 | 20,025 | 17,833 | 18,489 | 4,793 | 3,736 |
-| \`object-inspector\` | 130,338 | 41,205 | 36,235 | 51,885 | 13,165 | 10,703 |
-| \`option\` | 29,672 | 10,761 | 9,548 | 7,711 | 2,181 | 1,777 |
-| \`orb\` | 36,209 | 13,750 | 12,270 | 10,015 | 3,713 | 3,102 |
-| \`outline\` | 37,846 | 13,457 | 11,935 | 12,073 | 3,433 | 2,707 |
-| \`pagination\` | 153,264 | 46,929 | 40,876 | 62,367 | 15,172 | 12,140 |
-| \`pin-input\` | 50,409 | 17,316 | 15,441 | 10,057 | 3,146 | 2,472 |
-| \`popover\` | 67,005 | 23,748 | 21,050 | 9,507 | 2,642 | 1,928 |
-| \`progress\` | 35,232 | 12,380 | 11,056 | 10,100 | 2,587 | 2,222 |
-| \`qr-code\` | 44,321 | 17,120 | 15,275 | 18,585 | 6,757 | 5,635 |
-| \`quote\` | 23,074 | 9,079 | 8,007 | 1,751 | 685 | 482 |
-| \`radio\` | 50,349 | 15,976 | 14,205 | 11,592 | 2,738 | 2,078 |
-| \`rating\` | 54,190 | 18,518 | 16,515 | 11,944 | 3,635 | 2,813 |
-| \`sandbox\` | 106,904 | 32,470 | 28,434 | 74,624 | 20,229 | 17,015 |
-| \`scatter-chart\` | 100,317 | 33,784 | 29,867 | 25,193 | 6,964 | 5,590 |
-| \`scroll-area\` | 35,437 | 12,025 | 10,665 | 13,489 | 3,564 | 2,801 |
-| \`select\` | 124,418 | 40,070 | 35,144 | 35,145 | 9,048 | 7,095 |
-| \`skeleton\` | 26,090 | 9,663 | 8,583 | 4,738 | 1,387 | 1,097 |
-| \`skip-link\` | 25,441 | 9,851 | 8,691 | 2,779 | 953 | 679 |
-| \`slider\` | 67,842 | 20,140 | 18,046 | 28,107 | 6,147 | 4,915 |
-| \`sparkline\` | 53,442 | 18,850 | 16,823 | 11,419 | 3,468 | 2,707 |
-| \`spatial-bar-chart\` | 110,683 | 37,998 | 33,460 | 28,827 | 8,573 | 6,953 |
-| \`spatial-heatmap\` | 123,212 | 40,986 | 36,071 | 41,313 | 11,815 | 9,777 |
-| \`spatial-ribbon-chart\` | 109,655 | 37,575 | 33,186 | 29,617 | 8,969 | 7,397 |
-| \`spatial-scatter-chart\` | 107,952 | 36,809 | 32,463 | 27,965 | 8,237 | 6,655 |
-| \`spatial-surface-chart\` | 110,331 | 38,025 | 33,535 | 30,294 | 9,367 | 7,788 |
-| \`spatial-treemap\` | 112,031 | 38,807 | 34,114 | 30,297 | 9,418 | 7,675 |
-| \`speed-dial\` | 75,797 | 26,105 | 23,141 | 17,945 | 4,385 | 3,422 |
-| \`splitter\` | 49,804 | 16,207 | 14,499 | 20,430 | 4,897 | 3,960 |
-| \`stat\` | 28,117 | 10,371 | 9,278 | 5,156 | 1,447 | 1,194 |
-| \`steps\` | 67,449 | 21,377 | 19,020 | 27,416 | 6,615 | 5,346 |
-| \`strands\` | 62,788 | 23,354 | 20,585 | 38,012 | 13,681 | 11,870 |
-| \`switch\` | 43,562 | 14,636 | 13,040 | 5,998 | 1,756 | 1,330 |
-| \`table\` | 135,900 | 40,155 | 34,911 | 62,691 | 15,518 | 12,666 |
-| \`tabs\` | 55,263 | 17,752 | 15,831 | 19,435 | 4,713 | 3,775 |
-| \`tag\` | 47,247 | 16,757 | 14,968 | 13,012 | 3,667 | 2,791 |
-| \`text\` | 28,756 | 9,942 | 8,773 | 7,394 | 1,497 | 1,221 |
-| \`textarea\` | 47,785 | 15,949 | 14,223 | 9,317 | 2,646 | 1,979 |
-| \`time-input\` | 193,597 | 56,836 | 49,517 | 72,822 | 16,542 | 13,531 |
-| \`time-picker\` | 111,928 | 33,946 | 29,876 | 46,251 | 11,610 | 9,278 |
-| \`timeline\` | 38,179 | 13,325 | 11,919 | 10,945 | 2,702 | 2,232 |
-| \`toast\` | 58,767 | 19,783 | 17,645 | 20,004 | 5,404 | 4,311 |
-| \`toggle\` | 50,439 | 16,509 | 14,676 | 10,854 | 3,074 | 2,458 |
-| \`toolbar\` | 33,726 | 12,065 | 10,720 | 7,821 | 2,144 | 1,747 |
-| \`tooltip\` | 61,420 | 21,834 | 19,360 | 11,218 | 3,096 | 2,475 |
-| \`tour\` | 93,708 | 30,740 | 27,174 | 29,780 | 7,465 | 6,014 |
-| \`tree\` | 76,275 | 24,651 | 21,967 | 25,873 | 6,877 | 5,599 |
-| \`trend\` | 31,231 | 12,049 | 10,723 | 4,980 | 1,532 | 1,282 |
-| \`video\` | 162,777 | 48,192 | 42,003 | 87,167 | 20,547 | 17,118 |
-| \`video-playlist\` | 143,639 | 44,279 | 38,929 | 58,705 | 14,169 | 11,616 |
-| \`virtual-list\` | 65,445 | 22,138 | 19,717 | 25,281 | 7,639 | 6,158 |
+| \`accordion\` | 36,104 | 12,942 | 11,549 | 8,794 | 2,432 | 1,899 |
+| \`announcement\` | 42,276 | 14,775 | 13,228 | 9,296 | 2,461 | 1,848 |
+| \`app-header\` | 38,326 | 13,450 | 11,973 | 11,045 | 2,971 | 2,442 |
+| \`area-chart\` | 107,559 | 36,865 | 32,515 | 22,602 | 6,333 | 5,144 |
+| \`aura\` | 59,567 | 20,254 | 17,941 | 31,767 | 9,666 | 8,316 |
+| \`avatar\` | 34,890 | 12,911 | 11,530 | 6,987 | 1,978 | 1,656 |
+| \`badge\` | 33,626 | 12,189 | 10,865 | 8,458 | 2,158 | 1,747 |
+| \`bar-chart\` | 122,404 | 40,670 | 35,940 | 36,918 | 9,892 | 8,184 |
+| \`blockquote\` | 26,905 | 10,186 | 9,009 | 4,610 | 1,426 | 1,083 |
+| \`breadcrumbs\` | 44,356 | 15,535 | 13,899 | 14,306 | 3,646 | 3,017 |
+| \`button\` | 42,638 | 14,385 | 12,821 | 11,526 | 2,919 | 2,286 |
+| \`button-group\` | 31,709 | 11,294 | 10,028 | 8,408 | 2,202 | 1,655 |
+| \`callout\` | 40,077 | 14,932 | 13,285 | 6,659 | 1,926 | 1,486 |
+| \`canvas\` | 131,001 | 39,286 | 34,369 | 89,671 | 24,923 | 20,892 |
+| \`card\` | 28,297 | 10,317 | 9,175 | 5,976 | 1,633 | 1,226 |
+| \`carousel\` | 55,526 | 17,813 | 15,963 | 25,788 | 6,085 | 4,831 |
+| \`chat\` | 96,367 | 29,721 | 26,295 | 43,087 | 10,858 | 8,853 |
+| \`checkbox\` | 47,728 | 15,518 | 13,836 | 9,579 | 2,487 | 1,908 |
+| \`checkbox-group\` | 55,688 | 17,587 | 15,651 | 15,535 | 4,008 | 3,086 |
+| \`code\` | 21,726 | 8,560 | 7,606 | 976 | 377 | 382 |
+| \`code-block\` | 129,247 | 39,457 | 34,785 | 61,803 | 14,528 | 12,279 |
+| \`color-input\` | 186,124 | 52,091 | 45,562 | 98,147 | 20,720 | 17,291 |
+| \`color-picker\` | 142,298 | 39,184 | 34,386 | 84,819 | 18,371 | 15,252 |
+| \`combobox\` | 149,243 | 45,632 | 40,195 | 51,428 | 12,037 | 9,738 |
+| \`command\` | 112,469 | 34,490 | 30,368 | 41,644 | 10,582 | 8,652 |
+| \`copy-button\` | 94,256 | 30,466 | 26,980 | 30,769 | 7,291 | 5,878 |
+| \`data-table\` | 232,707 | 67,583 | 57,864 | 120,745 | 29,581 | 23,977 |
+| \`date-input\` | 164,353 | 48,935 | 43,089 | 59,950 | 13,125 | 10,875 |
+| \`date-picker\` | 71,139 | 22,979 | 20,542 | 28,748 | 7,139 | 5,654 |
+| \`description-list\` | 26,427 | 9,731 | 8,674 | 4,508 | 1,275 | 877 |
+| \`dialog\` | 44,311 | 15,226 | 13,612 | 11,064 | 3,040 | 2,320 |
+| \`divider\` | 25,863 | 9,771 | 8,637 | 3,697 | 1,132 | 815 |
+| \`donut-chart\` | 102,652 | 34,418 | 30,426 | 24,673 | 6,687 | 5,572 |
+| \`drawer\` | 49,642 | 16,871 | 15,090 | 13,612 | 3,747 | 3,025 |
+| \`drilldown\` | 49,204 | 16,541 | 14,765 | 15,375 | 4,004 | 3,098 |
+| \`empty\` | 26,316 | 10,055 | 8,906 | 3,267 | 1,090 | 883 |
+| \`file-input\` | 70,648 | 22,941 | 20,369 | 24,668 | 6,540 | 5,360 |
+| \`filter-input\` | 110,412 | 35,679 | 31,644 | 32,396 | 8,372 | 6,797 |
+| \`flex\` | 26,312 | 9,424 | 8,375 | 4,761 | 1,041 | 832 |
+| \`format-date\` | 31,463 | 11,789 | 10,532 | 4,712 | 1,389 | 950 |
+| \`graph\` | 92,941 | 27,948 | 24,622 | 39,115 | 9,599 | 7,810 |
+| \`grid\` | 27,762 | 10,137 | 8,994 | 5,655 | 1,457 | 1,188 |
+| \`heatmap\` | 110,057 | 36,548 | 32,263 | 27,373 | 7,430 | 6,014 |
+| \`icon\` | 85,551 | 29,194 | 25,031 | 60,473 | 20,643 | 16,501 |
+| \`icon-button\` | 44,066 | 14,350 | 12,783 | 12,955 | 2,917 | 2,251 |
+| \`image\` | 27,760 | 10,306 | 9,129 | 5,216 | 1,623 | 1,202 |
+| \`input\` | 51,304 | 17,264 | 15,273 | 11,243 | 3,350 | 2,496 |
+| \`kbd\` | 30,078 | 11,329 | 10,047 | 5,494 | 1,656 | 1,218 |
+| \`legend\` | 41,634 | 14,661 | 13,051 | 8,065 | 2,233 | 1,665 |
+| \`lightbox\` | 63,432 | 20,712 | 18,433 | 23,035 | 5,934 | 4,680 |
+| \`line-chart\` | 113,713 | 38,278 | 33,804 | 28,159 | 7,540 | 6,233 |
+| \`list\` | 69,295 | 23,266 | 20,712 | 21,585 | 5,916 | 4,764 |
+| \`listbox\` | 82,511 | 27,061 | 23,895 | 20,034 | 5,683 | 4,322 |
+| \`loader\` | 30,222 | 11,214 | 10,030 | 5,652 | 1,707 | 1,399 |
+| \`log\` | 92,605 | 29,988 | 26,578 | 49,238 | 13,837 | 11,768 |
+| \`map\` | 114,692 | 30,616 | 26,855 | 71,126 | 15,703 | 12,901 |
+| \`megamenu\` | 66,134 | 23,308 | 20,640 | 13,673 | 3,614 | 2,780 |
+| \`menu\` | 109,435 | 35,105 | 30,901 | 41,177 | 10,171 | 8,292 |
+| \`meter\` | 39,093 | 13,830 | 12,394 | 11,136 | 2,821 | 2,333 |
+| \`motion-toggle\` | 27,988 | 10,726 | 9,535 | 3,044 | 996 | 805 |
+| \`navigation\` | 37,585 | 13,566 | 12,044 | 7,077 | 2,005 | 1,539 |
+| \`notifications\` | 73,027 | 22,893 | 20,441 | 31,757 | 7,639 | 6,268 |
+| \`number-input\` | 62,610 | 20,544 | 18,288 | 18,544 | 4,834 | 3,694 |
+| \`object-inspector\` | 132,306 | 41,847 | 36,873 | 52,407 | 13,126 | 10,719 |
+| \`option\` | 30,245 | 10,972 | 9,759 | 7,708 | 2,180 | 1,723 |
+| \`orb\` | 36,885 | 14,019 | 12,487 | 10,014 | 3,695 | 3,083 |
+| \`outline\` | 38,722 | 13,792 | 12,269 | 12,095 | 3,423 | 2,644 |
+| \`pagination\` | 155,030 | 47,597 | 41,410 | 62,664 | 15,116 | 12,369 |
+| \`pin-input\` | 52,228 | 17,955 | 16,008 | 10,570 | 3,313 | 2,507 |
+| \`popover\` | 68,034 | 24,117 | 21,308 | 9,594 | 2,638 | 1,983 |
+| \`progress\` | 36,415 | 12,815 | 11,466 | 10,169 | 2,605 | 2,076 |
+| \`qr-code\` | 45,270 | 17,490 | 15,576 | 18,586 | 6,787 | 5,767 |
+| \`quote\` | 23,646 | 9,303 | 8,218 | 1,750 | 694 | 466 |
+| \`radio\` | 51,120 | 16,282 | 14,511 | 11,591 | 2,749 | 2,105 |
+| \`rating\` | 55,527 | 19,005 | 16,948 | 11,973 | 3,667 | 2,928 |
+| \`sandbox\` | 108,218 | 32,974 | 28,890 | 74,725 | 20,351 | 17,034 |
+| \`scatter-chart\` | 108,028 | 36,473 | 32,145 | 29,693 | 8,586 | 6,916 |
+| \`scroll-area\` | 36,301 | 12,383 | 11,025 | 13,508 | 3,564 | 2,884 |
+| \`select\` | 125,846 | 40,631 | 35,659 | 35,267 | 9,129 | 7,098 |
+| \`skeleton\` | 26,848 | 9,947 | 8,858 | 4,755 | 1,398 | 1,117 |
+| \`skip-link\` | 26,118 | 10,114 | 8,973 | 2,778 | 966 | 785 |
+| \`slider\` | 69,605 | 20,728 | 18,556 | 28,572 | 6,253 | 4,988 |
+| \`sparkline\` | 54,716 | 19,331 | 17,256 | 11,422 | 3,445 | 2,832 |
+| \`spatial-bar-chart\` | 114,232 | 39,173 | 34,497 | 28,899 | 8,556 | 6,886 |
+| \`spatial-heatmap\` | 126,828 | 42,153 | 36,998 | 41,457 | 11,702 | 9,766 |
+| \`spatial-ribbon-chart\` | 113,204 | 38,749 | 34,162 | 29,690 | 8,956 | 7,374 |
+| \`spatial-scatter-chart\` | 111,501 | 37,966 | 33,461 | 28,039 | 8,231 | 6,662 |
+| \`spatial-surface-chart\` | 113,878 | 39,172 | 34,539 | 30,366 | 9,349 | 7,842 |
+| \`spatial-treemap\` | 115,578 | 39,956 | 35,130 | 30,367 | 9,373 | 7,723 |
+| \`speed-dial\` | 76,667 | 26,451 | 23,434 | 17,966 | 4,376 | 3,533 |
+| \`splitter\` | 51,121 | 16,689 | 14,971 | 20,542 | 4,916 | 4,082 |
+| \`stat\` | 29,171 | 10,751 | 9,607 | 5,193 | 1,467 | 1,194 |
+| \`steps\` | 68,915 | 21,887 | 19,477 | 27,781 | 6,739 | 5,662 |
+| \`strands\` | 63,680 | 23,697 | 20,891 | 38,177 | 13,705 | 11,852 |
+| \`switch\` | 44,449 | 14,978 | 13,325 | 6,021 | 1,773 | 1,338 |
+| \`table\` | 136,948 | 40,477 | 35,271 | 62,692 | 15,338 | 12,668 |
+| \`tabs\` | 56,031 | 18,047 | 16,065 | 19,434 | 4,733 | 3,847 |
+| \`tag\` | 48,197 | 17,126 | 15,315 | 13,011 | 3,621 | 2,857 |
+| \`text\` | 29,286 | 10,212 | 9,014 | 7,182 | 1,494 | 1,095 |
+| \`textarea\` | 48,905 | 16,377 | 14,632 | 9,403 | 2,654 | 2,098 |
+| \`time-input\` | 195,260 | 57,479 | 50,074 | 72,937 | 16,508 | 13,588 |
+| \`time-picker\` | 113,448 | 34,519 | 30,422 | 46,303 | 11,562 | 9,305 |
+| \`timeline\` | 39,321 | 13,742 | 12,312 | 10,973 | 2,701 | 2,248 |
+| \`toast\` | 60,192 | 20,339 | 18,151 | 20,046 | 5,402 | 4,278 |
+| \`toggle\` | 51,106 | 16,791 | 14,924 | 10,851 | 3,065 | 2,304 |
+| \`toolbar\` | 34,496 | 12,352 | 10,991 | 7,820 | 2,142 | 1,667 |
+| \`tooltip\` | 62,502 | 22,262 | 19,733 | 11,290 | 3,110 | 2,485 |
+| \`tour\` | 95,265 | 31,293 | 27,689 | 30,070 | 7,561 | 6,075 |
+| \`tree\` | 77,329 | 25,058 | 22,304 | 25,871 | 6,863 | 5,731 |
+| \`trend\` | 32,854 | 12,576 | 11,227 | 5,487 | 1,641 | 1,260 |
+| \`video\` | 164,366 | 48,811 | 42,551 | 87,272 | 20,643 | 17,163 |
+| \`video-playlist\` | 144,942 | 44,812 | 39,319 | 58,789 | 14,041 | 11,807 |
+| \`virtual-list\` | 66,376 | 22,417 | 19,968 | 25,370 | 7,675 | 6,240 |
 
 ## What an install adds to \`node_modules\`
 
@@ -4845,16 +5487,17 @@ These sizes are what an install adds to your disk, which is what an install
 budget limits. Each row is the unpacked size of exactly what a package
 publishes, as listed in its \`files\` field. The sizes do not include source
 maps. We strip them from the tarball when we pack it, and the Source maps
-stripped column shows the bytes we removed.
+stripped column shows the bytes we removed. We also pack each JSON file
+without its whitespace, and the sizes count each one that way.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,613,946 | 571 | 754,871 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 27,117,081 | 768 | 2,496,473 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
-| \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 121,672 | 6 | 0 | none |
-| \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
-| \`@fusion.dev/helix\` | 28,632,821 | 1,021 | 565,595 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix-core\` | 2,191,244 | 587 | 791,148 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
+| \`@fusion.dev/helix-headless\` | 23,979,650 | 772 | 2,534,725 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-icons\` | 152,695 | 21 | 49,995 | \`svgo\` |
+| \`@fusion.dev/helix-styles\` | 121,825 | 6 | 0 | none |
+| \`@fusion.dev/helix-theme\` | 449,779 | 8 | 6,255 | none |
+| \`@fusion.dev/helix\` | 24,617,831 | 1,023 | 566,915 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -5017,9 +5660,9 @@ trailing: true
 
 # Other frameworks
 
-This page covers Solid, Qwik, Lit, Ember, Alpine, htmx, and any other framework
-that puts elements in a document. They all follow the same three rules and need
-nothing else.
+This page covers Preact, Solid, Qwik, Lit, Ember, Alpine, htmx, and any other
+framework that puts elements in a document. They all follow the same three
+rules and need nothing else.
 
 ## The three rules
 
@@ -5053,11 +5696,12 @@ in full.
 
 | Framework | Notes |
 |---|---|
-| Solid | Sets properties on custom elements by default. Use \`prop:\` to force one and \`attr:\` to force the other. \`on:helix-before-change\` binds the literal name |
-| Qwik | Works as JSX. Bind with \`document:on…\` or a ref, since a plain \`on*\` prop is normalized |
-| Lit | \`.prop=\`, \`?bool=\`, and \`@helix-before-change=\` work with no setup |
-| Ember | Angle-bracket invocation passes attributes only, so set properties from a modifier |
 | Alpine, htmx | Markup and attributes only, which work with every component. Refusing a change needs script |
+| Ember | Angle-bracket invocation passes attributes only, so set properties from a modifier |
+| Lit | \`.prop=\`, \`?bool=\`, and \`@helix-before-change=\` work with no setup |
+| Preact | Sets a property when the element has one, and an attribute otherwise. \`onhelix-before-change\` binds the literal name. [Typings](#typings) says how to type the tags |
+| Qwik | Works as JSX. Bind with \`document:on…\` or a ref, since a plain \`on*\` prop is normalized |
+| Solid | Sets properties on custom elements by default. Use \`prop:\` to force one and \`attr:\` to force the other. \`on:helix-before-change\` binds the literal name. [Typings](#typings) says how to type the tags |
 
 We do not test these frameworks, so they share one page. If your framework needs
 something the three rules do not cover, tell us. It is a gap in this page or in
@@ -5065,11 +5709,50 @@ the library.
 
 ## Typings
 
-\`@fusion.dev/helix/jsx\` is the base for typing any framework that uses JSX, and
-the Svelte typings are built from it. If your framework needs a different
-format, use the manifest at \`@fusion.dev/helix/custom-elements.json\`. It
-describes every tag, prop, event, and part, and we generate all our typings from
-it.
+\`@fusion.dev/helix/jsx\` types the tags for React, Preact, and Solid, and it is
+the base for typing any other framework that uses JSX. The Svelte typings read
+their props from it. It needs only the types of the framework you use, and it
+compiles with \`skipLibCheck: false\`.
+
+\`ref\` and \`style\` take the types of the framework the tag is written in:
+
+- React: React's \`Ref\` and \`CSSProperties\`.
+- Preact: Preact's \`Ref\`, and the \`style\` a \`<div>\` takes, which is a string or
+  an object.
+- Solid: the element or a callback that receives it, and the \`style\` a \`<div>\`
+  takes, which is a string or an object.
+- Any other framework: the element or a callback that receives it, and an
+  object of style properties.
+
+In Preact and Solid, import the typings once, anywhere TypeScript sees it:
+
+\`\`\`ts
+import '@fusion.dev/helix/jsx'
+\`\`\`
+
+Preact reads the tags with \`jsxImportSource: "preact"\` and with \`h\` as the JSX
+factory. If your \`paths\` alias \`react\` to \`preact/compat\`, the tags take \`ref\`
+and \`style\` as \`preact/compat\` types React's, so \`style\` takes an object.
+
+Solid reads the tags with \`jsxImportSource: "solid-js"\`, and each tag also
+takes \`prop:\`, \`attr:\`, and \`on:\` forms of its props and events.
+
+With \`jsxImportSource: "solid-js/h"\`, Solid runs without its compiler, and the
+same import types the tags. Each prop also takes a function that returns its
+value, and \`h\` calls that function again when a signal it reads changes. A
+property whose value is a function, such as a slider's \`formatter\`, takes only a
+function that returns it, because \`h\` calls any function it is given:
+
+\`\`\`tsx
+<helix-slider disabled={() => busy()} formatter={() => format} label="Volume" />
+\`\`\`
+
+\`ref\`, \`children\`, and the handlers named \`on…\`, such as
+\`on:helix-before-change\`, take their values as they are.
+
+If your framework needs a different format, use the manifest at
+\`@fusion.dev/helix/custom-elements.json\`. It describes every tag, prop, event,
+and part, and we generate all our typings from it.
 
 ## Register the elements
 
@@ -5349,7 +6032,7 @@ helix-select::part(trigger) {
   font-variant-numeric: tabular-nums;
 }
 
-helix-dialog::part(dialog) {
+helix-dialog::part(surface) {
   max-inline-size: 40rem;
 }
 \`\`\`
@@ -5379,16 +6062,17 @@ helix-video::part(overflow-header) { … }
 \`\`\`
 
 \`<helix-date-input>\` renders a date picker in the \`picker\` role, so the picker's
-\`cell\` part is \`picker-cell\`. When the child's part is the role itself, the
-forwarded name is the role alone. The tooltip inside \`<helix-copy-button>\` is
-\`tooltip\`, and its arrow is \`tooltip-arrow\`.
+\`cell\` part is \`picker-cell\`. The tooltip inside \`<helix-copy-button>\` is in the
+\`tooltip\` role, so its \`surface\` is \`tooltip-surface\` and its arrow is
+\`tooltip-arrow\`. When the child's part is the role itself, the forwarded name is
+the role alone: each line inside \`<helix-log>\` is \`line\`.
 
 A part that changes with a state has a second name while the state is active,
 and that name is forwarded too. A tooltip placed below its button is also
-\`tooltip-bottom\`, and its arrow is also \`tooltip-arrow-bottom\`. Your stylesheet
-can use these names to style each side, which it cannot detect any other way.
-The arrow already faces the button on every side. Use the names for styles you
-add on top.
+\`tooltip-surface-bottom\`, and its arrow is also \`tooltip-arrow-bottom\`. Your
+stylesheet can use these names to style each side, which it cannot detect any
+other way. The arrow already faces the button on every side. Use the names for
+styles you add on top.
 
 **The prefix keeps part names unique.** A component and its child can use the
 same word. This happened once: \`Command\` forwarded the listbox's \`search-field\`
@@ -5418,8 +6102,8 @@ so you learn each name once:
 | \`container\` | An element's own outer box. |
 | \`content\` | A region you fill. |
 | \`panel\` | A region switched between, or a sheet anchored to an edge. |
-| \`surface\` | A floating panel drawn over the page. |
-| \`viewport\` | A scrollport the component reads the position of. |
+| \`surface\` | A floating panel drawn over the page, such as a menu, a popover, a tooltip, or a dialog. |
+| \`viewport\` | The box that shows part of a larger area: a scrollport, or the frame a map or a graph is panned and zoomed in. |
 
 A part that names something specific to one component, such as \`thumb\`,
 \`swatch\`, or \`weekday\`, is listed on that component's page.
@@ -5591,6 +6275,8 @@ starts with that value and keeps applying its own changes, so the markup below
 works without a handler.
 
 \`\`\`tsx
+import { flushSync } from 'react-dom'
+
 // Seeded: the element owns it from there.
 <helix-input default-value="Ada" label="Name" />
 
@@ -5602,7 +6288,7 @@ works without a handler.
   label="Name"
   onhelix-before-change={(event) => {
     event.preventDefault()
-    setName(clean(event.detail.value))
+    flushSync(() => setName(clean(event.detail.value)))
   }}
   value={name}
 />
@@ -5613,6 +6299,18 @@ refuse it. React restores a native \`<input>\` whose state did not change, and i
 does not do this for a custom element. A handler that does not call \`setState\`
 leaves the element with the new value.
 
+**Set the state inside \`flushSync\` when you write your own value.** React sets
+the priority of a state update from the type of the event being handled.
+\`helix-before-change\` is not one of the types React lists, so the update gets
+the default priority and renders in a later task. A key that arrives before that
+task lands in the text from before the update, and the keys typed in between are
+lost. A barcode scanner, a password manager, and a test send keys that fast:
+Playwright typing \`Ada L!\` with no delay into a field that keeps lowercase
+letters left it empty. \`flushSync\` renders the update before your handler
+returns, so the element holds your value when the next key arrives. The same
+applies to every field you type into, such as \`helix-textarea\`,
+\`helix-number-input\`, and \`helix-pin-input\`.
+
 *Until August 26, 2026, this page described the opposite behavior, and the typings
 enforced it. Writing \`value\` made you the owner of the state. The element
 applied no change until you set the value, and \`<helix-input value="Ada" />\`
@@ -5789,7 +6487,7 @@ Three Markdown constructs need components, because HTML alone cannot hold what
 they need:
 
 - **Fenced code** becomes \`helix-code-block\`, with the fence's language as its
-  \`label\`. A \`<pre>\` has no label or copy button.
+  \`label\` and its \`language\`. A \`<pre>\` has no label or copy button.
 - **Alerts** such as \`> [!WARNING]\` become \`helix-callout\`. A \`<blockquote>\` has no
   tone. \`NOTE\` becomes \`tone="info"\`, \`TIP\` becomes \`success\`, \`WARNING\` becomes
   \`warning\`, and \`CAUTION\` becomes \`danger\`. \`IMPORTANT\` has no tone. Each
@@ -5804,13 +6502,29 @@ The \`rehype\` plugin from \`@fusion.dev/helix/rehype\` makes all three changes
 tree your Markdown library has already built. It parses nothing, so your
 library, its dialect, and your sanitizing stay yours. Add it to any pipeline
 that reaches rehype, such as \`remark\` with \`remark-rehype\`, \`react-markdown\`, or
-MDX:
+MDX.
+
+Tables are GitHub Flavored Markdown, so your pipeline needs \`remark-gfm\` to
+parse them. Without it, a table stays a paragraph of pipes. For a \`remark\`
+pipeline, install:
+
+\`\`\`sh
+bun add unified remark-parse remark-gfm remark-rehype rehype-stringify
+\`\`\`
+
+Then add the plugin after \`remark-rehype\`:
 
 \`\`\`js
 import rehypeHelix from '@fusion.dev/helix/rehype'
+import rehypeStringify from 'rehype-stringify'
+import remarkGfm from 'remark-gfm'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
 
 const html = await unified()
   .use(remarkParse)
+  .use(remarkGfm)
   .use(remarkRehype)
   .use(rehypeHelix)
   .use(rehypeStringify)
@@ -6095,8 +6809,10 @@ You can edit every example on a component's page. When you change the markup,
 the preview redraws. When you change the stylesheet beside it, the preview
 restyles.
 
-To build a playground of your own, you would use the same elements. The
-isolation described below makes it safe to run markup that someone else wrote.
+To build a playground of your own, use the same elements: the sandbox from
+\`@fusion.dev/helix/sandbox\`, and the editor from \`@fusion.dev/helix-sandbox\`.
+The isolation described below makes it safe to run markup that someone else
+wrote.
 
 ## How the preview is isolated
 
@@ -6243,7 +6959,7 @@ preview, and \`helix-caret\` from it fills the status bar's position. A wrapper
 around CodeMirror:
 
 \`\`\`ts
-import { HelixBeforeEditEvent } from '@fusion.dev/helix'
+import { HelixBeforeEditEvent } from '@fusion.dev/helix-core'
 import { EditorView, basicSetup } from 'codemirror'
 
 class CodeEditor extends HTMLElement {
@@ -6300,16 +7016,18 @@ own message from \`:state(failed)\`.
 
 ## The frame document
 
-\`helix-sandbox-preview\` loads \`src\` into a sandboxed frame. You provide that
-document. It loads the styles and the elements your examples use, and it talks
-to the preview through \`postMessage\`.
+\`helix-sandbox-preview\` runs each example in a sandboxed frame. The frame
+document either comes with the preview or is one you host.
 
-Without \`src\`, the preview loads a built-in document. It runs the example's
-HTML, CSS, and scripts, and reports the console, uncaught errors, the height,
-and presses, so a sandbox renders with nothing to host. It defines no element,
-so set \`src\` to a document of your own when your examples use Helix
-components. Its script is inline, so a page whose Content Security Policy
-refuses inline scripts needs a \`src\` too.
+**Without \`src\`, the preview loads a built-in document**, so a sandbox needs
+nothing hosted. It runs the example's HTML, CSS, and scripts, and reports the
+console, uncaught errors, the height, and presses. It defines no element, so
+set \`src\` to a document of your own when your examples use Helix components.
+Its script is inline, so a page whose Content Security Policy refuses inline
+scripts needs a \`src\` too.
+
+**With \`src\`, the preview loads your document.** It loads the styles and the
+elements your examples use, and it talks to the preview through \`postMessage\`.
 
 The messages:
 
@@ -6333,9 +7051,18 @@ it was given. The types are exported from \`@fusion.dev/helix/sandbox\` as
 you. Call it once in the frame document, after your elements are defined. It
 writes each render into \`#preview-root\`, runs the example's scripts, relays
 its console, its uncaught errors, and its unhandled promise rejections,
-reports its height and its presses, and adds the rules for the four layouts. A frame follows. \`/helix.css\` is the stylesheet from
-\`@fusion.dev/helix-styles\`, and \`/frame.js\` is a classic script you bundle,
-for the reason under "How the preview is isolated":
+reports its height and its presses, and adds the rules for the four layouts.
+
+The frame's own script must be a classic script, bundled into one file. A
+module does not load there. The frame's origin is opaque, so a module import
+back to your site is a cross-origin request, which fails unless your server
+answers it with CORS headers. A stylesheet \`<link>\` is not checked, so the
+styles load as they are.
+
+A frame follows. \`/frame.js\` is the bundle. \`/helix.css\` is the stylesheet
+from \`@fusion.dev/helix-styles\`, and it imports \`primitives.css\`, \`tokens.css\`,
+\`base.css\`, and \`elements.css\` from beside it, so serve the five files from
+the package's \`dist\` folder together:
 
 \`\`\`html
 <!doctype html>
@@ -6367,19 +7094,56 @@ Logs from the example appear in the console panel. Logs from the page around it
 do not. We patch the console inside the frame on purpose, so the panel shows
 what the example logs and nothing else.
 
-## The package is private
+## The editor and the highlighter
+
+\`@fusion.dev/helix-sandbox\` is the editor the component pages use, and the
+highlighter that colors their code. Install it beside the library:
+
+\`\`\`sh
+npm install @fusion.dev/helix @fusion.dev/helix-styles @fusion.dev/helix-sandbox
+\`\`\`
+
+Each entry does one thing:
+
+- \`@fusion.dev/helix-sandbox/editor\` registers \`helix-sandbox-editor\`, a
+  source pane with CodeMirror behind it.
+- \`@fusion.dev/helix-sandbox/highlight\` turns a snippet into highlighted HTML,
+  on a server or in a page, with no editor.
+- \`@fusion.dev/helix-sandbox/code-block\` colors every Code Block on the page.
+
+The editor is a source pane, so it goes in the \`source\` slot, with a \`name\`
+the sandbox reads:
+
+\`\`\`html
+<helix-sandbox>
+  <helix-sandbox-editor
+    language="html"
+    name="html"
+    slot="source"
+    value="<p>Hello</p>"
+  ></helix-sandbox-editor>
+  <helix-sandbox-preview slot="preview"></helix-sandbox-preview>
+</helix-sandbox>
+\`\`\`
+
+\`\`\`ts
+import '@fusion.dev/helix/sandbox'
+import '@fusion.dev/helix-sandbox/editor'
+\`\`\`
 
-\`@fusion.dev/helix-sandbox\` is not published. It is the editor and spec runner
-for this repository, and it is Helix tooling. It depends on the repository:
+The [Sandbox reference](/helix/components/sandbox#helix-sandbox-editor) lists
+the editor's properties, events, methods, and states.
 
-- The elements depend on the frame.
-- The frame depends on the build.
-- The build depends on this repository's layout.
+\`highlight\` reads the same grammars as the editor. By default each token is a
+span with Lezer's \`tok-\` class, for a stylesheet of your own. Pass
+\`syntaxHighlighter\` for the editor's classes, and put \`syntaxRules\` in the
+stylesheet where the result is drawn for the editor's colors:
 
-To add editable examples to your own documentation today, you would build the
-editor yourself, from the manifest and the \`.examples\` files. This is a gap we
-have not filled, and we have no policy against filling it. Tell us if you need
-it.
+\`\`\`ts
+import { highlight, syntaxHighlighter } from '@fusion.dev/helix-sandbox/highlight'
+
+const markup = highlight('const total = 1', 'ts', syntaxHighlighter)
+\`\`\`
 `,
     'server-rendering': `---
 description: How components render on a server with no DOM, and what waits for the browser.
@@ -6468,8 +7232,8 @@ Run your page's own scripts after the definitions load. Hydration expects that
 order. A property you set before hydration is one the server did not render
 with.
 
-\`bun run check:spec:dsd\` renders every example with Lit SSR, hydrates it in
-Chromium, and compares it with the same example rendered on a client.
+We render every component example in both tiers with Lit SSR, hydrate it in
+Chromium, and compare it with the same example rendered on a client.
 
 React server components do not use declarative shadow DOM. Their output is
 replayed through DOM APIs, and declarative shadow DOM does not activate for
@@ -7228,12 +7992,18 @@ state yourself, cancel the change and assign your own value:
   label="Name"
   onhelix-before-change={(event) => {
     event.preventDefault()
-    setName(sanitize(event.detail.value))
+    flushSync(() => setName(sanitize(event.detail.value)))
   }}
   value={name}
 />
 \`\`\`
 
+Assign your value before the next key arrives, or that key lands in the text
+from before your value. Vue, Svelte, and Solid apply a bound value in time. In
+React, set the state inside \`flushSync\`, as [React](./react) explains. In
+Angular without zone.js, call \`detectChanges()\` after you set the signal, as
+[Angular](./angular) explains.
+
 The platform uses the same pattern. You call \`preventDefault()\` to cancel:
 
 - a form submit
@@ -7431,7 +8201,8 @@ its own components, and the same applies to anything you build with it.
 The theme engine measures each ink against the ground it is actually painted
 on. The ladder records which pairs occur. For example, \`foreground\` on
 \`surface-overlay\` is a real pair, and \`foreground-on-primary\` on \`surface\` is
-not. See [Color](./color).
+not. A field's fill, \`well\`, is translucent, so the text in a field is measured
+against the well over each surface. See [Color](./color).
 `,
     svelte: `---
 description: The Svelte typings, and how Svelte passes props and binds events.
@@ -7447,30 +8218,74 @@ import '@fusion.dev/helix/svelte'
 \`\`\`
 
 Add this types-only import once. It augments \`SvelteHTMLElements\`, so every
-Helix tag is typed in a component. The import re-exports the JSX types. Svelte
-binds a handler as \`onhelix-before-change={…}\`, which is the shape those types
-already describe. With one shared copy of the types, the Svelte and JSX typings
-cannot disagree.
+Helix tag is typed in a component. Svelte binds a handler as
+\`onhelix-before-change={…}\`, which is the shape the JSX typings already
+describe, so the Svelte typings read each tag's props from
+\`@fusion.dev/helix/jsx\`. The two cannot disagree.
+
+The typings need only Svelte's own types, and they compile with
+\`skipLibCheck: false\`.
 
 ## Pass props and bind events
 
 \`\`\`svelte
-<helix-input label="Name" onchange={(event) => (name = event.target.value)} value={name} />
+<helix-input
+  label="Name"
+  onchange={(event) => (name = event.currentTarget.value)}
+  value={name}
+></helix-input>
 \`\`\`
 
 Svelte sets a property when the element has one, and an attribute otherwise. It
 binds \`on*\` with \`addEventListener\`. Svelte shows no unknown-element warning,
 and you do not need a compiler flag.
 
+Read the value from \`event.currentTarget\`, which is typed as the element.
+\`event.target\` is an \`EventTarget | null\`, which has no \`value\`.
+
 Svelte passes objects and arrays as properties on its own:
 
 \`\`\`svelte
-<helix-data-table label="People" rows={people} />
+<helix-data-table label="People" rows={people}></helix-data-table>
 \`\`\`
 
 Svelte's own attributes are typed on every Helix tag as well, so \`onclick\`,
 \`class\`, and a \`style\` string check as they do on a \`div\`.
 
+## Hold the element
+
+\`bind:this\` holds the element, typed as its class:
+
+\`\`\`svelte
+<script lang="ts">
+  import type { HelixInput } from '@fusion.dev/helix'
+
+  let input: HelixInput | undefined = $state()
+</script>
+
+<helix-input bind:this={input} label="Name"></helix-input>
+\`\`\`
+
+## Type a handler in the script
+
+A handler written on the tag takes its event type from the tag. A handler
+written in the script names its event type, which \`@fusion.dev/helix/jsx\`
+exports for each element and event:
+
+\`\`\`svelte
+<script lang="ts">
+  import type { HelixInputHelixBeforeChangeElementEvent } from '@fusion.dev/helix/jsx'
+
+  const refuseLong = (event: HelixInputHelixBeforeChangeElementEvent) => {
+    if (event.detail.value.length > 40) {
+      event.preventDefault()
+    }
+  }
+</script>
+
+<helix-input label="Handle" onhelix-before-change={refuseLong}></helix-input>
+\`\`\`
+
 ## Ignore the click warnings on a control
 
 \`svelte-check\` warns about an \`onclick\` on any Helix element. Its accessibility
@@ -7490,8 +8305,10 @@ right. Use a control there.
 
 These two rules apply in every framework.
 
-\`bind:\` does not work on a Helix control, because custom elements have no
-two-way binding convention to opt into. Read the value from the event.
+Two-way bindings do not work on a Helix control, because custom elements have
+no two-way binding convention to opt into. Svelte accepts \`bind:value\` only on
+\`<input>\`, \`<textarea>\`, and \`<select>\`, and \`bind:checked\` only on \`<input>\`.
+Read the value from the event.
 
 A declared \`value\`, \`open\`, \`checked\`, or \`active\` is a seed. The element starts
 with that value and then applies its own changes. To refuse a change, cancel the
@@ -7573,9 +8390,10 @@ its target. Its three tabs are:
 - **Contrast.** The pairs that fail, or a line saying that every pair passes.
 - **Collisions.** Colors too close to each other to tell apart, such as the
   primary color and a status color.
-- **Unverifiable.** Pairs whose background is translucent, so there is no known
-  color to measure against. This is the cost of a translucent material, and
-  the theme builder reports it.
+- **Unverifiable.** Pairs whose background is translucent over something the
+  engine cannot know, such as a photograph or the page under a translucent
+  material, so there is no known color to measure against. This is the cost of
+  a translucent material, and the theme builder reports it.
 
 ## What the theme builder gives you
 
@@ -7589,6 +8407,17 @@ stylesheet:
 }
 \`\`\`
 
+The block holds one mode, the one the preview shows, under the scope
+\`[data-theme="preview"]\`. Put that attribute on the element to theme, or change
+the selector. Under any selector other than \`:root\`, also add
+\`data-helix-theme\` to the element. The block sets the seeds the stylesheet
+derives the chart colors, the spacing, and the corner radii from, and the
+stylesheet reads seeds only at \`:root\` or on an element with
+\`data-helix-theme\`. See [Two ways to theme](./theming#two-ways-to-theme).
+
+For a page with both modes, derive the intent with \`deriveModes\` or
+\`helix theme build\`, as [Derive both modes](./theming#derive-both-modes) shows.
+
 The page's link holds every input you changed, so a link is the theme. To derive
 the theme in your own build, write the same inputs as an intent object:
 
@@ -7639,7 +8468,11 @@ changing them one at a time. A change to one value can break the contrast of a
 component elsewhere, and nothing tells you.
 
 \`@fusion.dev/helix-theme\` computes a complete token set from a few intent
-inputs, and every text and background pair meets its contrast target.
+inputs. It solves each text color against the backgrounds it lands on, measures
+every pair in its surface model, and reports any pair that misses its contrast
+target. \`foreground-subtle\` is not in the model. It is a fixed step of the
+stylesheet's gray ramp, and the engine does not solve it, so its contrast is not
+guaranteed.
 
 ## Two ways to theme
 
@@ -7855,8 +8688,8 @@ depends only on the packages below it.
 Neither is a tier, and you do not need either one to render a component.
 
 There is no React package. We generate the framework typings into
-\`@fusion.dev/helix\`, and the bridge that repairs React's hydration of custom
-events is in \`@fusion.dev/helix-core\`. See [React](./react).
+\`@fusion.dev/helix\` and \`@fusion.dev/helix-headless\`, and the bridge that
+repairs React's hydration of custom events is in \`@fusion.dev/helix-core\`. See [React](./react).
 
 ## Why the tiers are separate packages
 
@@ -7898,7 +8731,7 @@ export class HelixHeadlessAccordionItem extends MixinControllerOpen(HelixElement
   }
 }
 
-// web/src/accordion/root/accordion-root.ts
+// styled/src/accordion/root/accordion-root.ts
 // extends the headless one, adds presentation only
 import { styles } from './accordion-root.css.js'
 
@@ -7912,7 +8745,7 @@ export class HelixAccordion extends HelixHeadlessAccordion {
 \`\`\`
 
 \`\`\`css
-/* web/src/accordion/item/accordion-item.css */
+/* styled/src/accordion/item/accordion-item.css */
 [part='trigger'] {
   min-block-size: var(--helix-size-control);
   padding: var(--helix-space-sm);
@@ -7949,8 +8782,8 @@ as unstyled text and then changes into a card. The delay is short. It is most
 visible on a server-rendered page, where the markup arrives long before the
 JavaScript.
 
-\`@fusion.dev/helix\` includes \`elements.css\`, which hides each of its tags until
-the tag's definition loads:
+\`@fusion.dev/helix-styles\` includes \`elements.css\`, which hides each tag of the
+styled tier until the tag's definition loads:
 
 \`\`\`css
 helix-card:not(:defined) {
@@ -7958,7 +8791,7 @@ helix-card:not(:defined) {
 }
 \`\`\`
 
-**The base tier ships no such file on purpose.** There are three reasons, and
+**The headless tier ships no such file on purpose.** There are three reasons, and
 the third one affects you most.
 
 First, hiding an element is a design choice. Below the styled tier, we ship only
@@ -7972,20 +8805,21 @@ inside, because there is no shadow root before the upgrade. The rule has to
 live in your stylesheet, so the choice is yours.
 
 Third, one file for every tag would not fit your project. You import only the
-base elements you use, so a generated list would include tags you never ship.
+headless elements you use, so a generated list would include tags you never ship.
 Write the rule for the elements you have:
 
 \`\`\`css
-helix-base-accordion:not(:defined),
-helix-base-dialog:not(:defined) {
+helix-headless-accordion:not(:defined),
+helix-headless-dialog:not(:defined) {
   visibility: hidden;
 }
 \`\`\`
 
-Use \`visibility\` so the element keeps its place in the layout and the page does
-not reflow when it upgrades. \`display: none\` collapses the box, and the content
-jumps in when the definition arrives. That replaces a flash of unstyled text
-with a shift of everything below it.
+Use \`visibility\`, so a hidden element keeps the size of its unstyled content.
+The layout still settles when the element upgrades and takes its own size.
+\`display: none\` collapses the box, so the element takes no space until the
+definition arrives, and then everything below it shifts by the element's full
+size.
 
 You may want to hide nothing. If your first paint matters more than the final
 layout, or your page has to be readable with JavaScript turned off, let the
@@ -8289,8 +9123,11 @@ writes where an installed family stands in for it, as \`native-element\`.
 
 Each family's API is in the packages you installed, and on this site:
 
-- \`helix api family <family>\`, or the MCP tool \`helix_family\`
-- \`node_modules/@fusion.dev/helix/api.json\`
+- \`helix api family <family>\`, or the MCP tool \`helix_family\`, which read every
+  Helix package you installed
+- \`node_modules/@fusion.dev/helix/api.json\`, and the \`api.json\` of each other
+  Helix package you installed, which lists the elements it adds to a family,
+  such as \`helix-sandbox-editor\` in \`@fusion.dev/helix-sandbox\`
 - \`https://fusion.dev/helix/components/<family>.md\` and \`.json\`
 
 Each lists the import lines, every tag, every property with its literal union,
@@ -8344,12 +9181,15 @@ block a change, call \`preventDefault()\` on the matching \`helix-before-*\` eve
   label="Name"
   onhelix-before-change={(event) => {
     event.preventDefault()
-    setName(clean(event.detail.value))
+    flushSync(() => setName(clean(event.detail.value)))
   }}
   value={name}
 />
 \`\`\`
 
+Set the state inside \`flushSync\` from \`react-dom\`. Without it, React renders the
+update in a later task, and keys typed faster than that are lost.
+
 A form reset returns the element to \`default-value\` and the matching attributes
 for the other states. See [State and control](./state-and-control).
 
@@ -8459,12 +9299,13 @@ Run these after you write Helix code, and fix every finding at \`error\` and
 
 | Command | MCP tool | What it finds |
 |---|---|---|
-| \`helix scan\` | \`helix_check\` | Unknown tags, attributes, values, slots, parts, hooks, events, and tokens, a native element a Helix family replaces, a missing import, and the rest, each with its file and line |
+| \`helix scan\` | \`helix_check\` | Unknown tags, attributes, values, slots, parts, hooks, events, and tokens, a native element a Helix family replaces, a missing import, a button inside a button, \`disabled="false"\`, and the rest, each with its file and line |
 | \`helix diagnostics --once <url>\` | \`helix_check_page\` | The same on the running page, and what the library logged as it ran |
 | \`helix theme audit\` | \`helix_audit_theme\` | Every foreground and background pair in your theme that misses its contrast target |
 
 \`helix scan --file <path>\` reports one file's findings and still reads the whole
-project, so an import in another file counts.
+project, so an import in another file counts. [Diagnostics](./diagnostics)
+lists every kind of finding, and what the checks do not cover.
 
 ## What this guide does not cover
 
@@ -8579,8 +9420,14 @@ import '@fusion.dev/helix-styles/helix.css'
 base layer. If you import the layers one at a time, import \`elements.css\` last.
 
 \`elements.css\` hides each tag with \`:not(:defined)\` until the element upgrades.
-It uses \`visibility\`, so the page does not reflow. Without it, a card appears as
-unstyled text and then jumps into its card layout.
+It uses \`visibility\`, so a hidden element keeps the size of its unstyled
+content. The layout settles when the elements upgrade and take their own size.
+Without the file, a card appears as unstyled text and then jumps into its card
+layout.
+
+A data table that serves its first page as rows is the one element shown before
+it upgrades. \`elements.css\` lays out those rows as the table draws them. See
+[React](./react).
 
 We generate the file from the element sources, and it lists every tag by name.
 CSS has no selector for any custom element, and a bare \`:not(:defined)\` would
@@ -8598,36 +9445,31 @@ use a button.
 
 ## Turn off an attribute that is on by default
 
-A boolean attribute is off until you write it, with four exceptions. These are
-on until you write the string \`"false"\`:
-
-- \`modal\` on Drawer
-- \`playsinline\` on Video
-- \`default-pinned\` on Chat
-- \`tab-indents\` on Sandbox Source
+A boolean attribute is off until you write it, unless its default is \`true\`. The
+property table on each component's page shows the default. An attribute whose
+default is \`true\` stays on until you write the string \`"false"\`, such as \`modal\`
+on Drawer:
 
 \`\`\`html
 <helix-drawer modal="false"></helix-drawer>
 \`\`\`
 
-In JSX, \`modal={false}\` sets the property and does the same. Other features
-that are on by default turn off with an attribute named \`no-\`, such as
-\`no-copy\`.
+\`"false"\` is the only value that turns it off. An empty value, or any other
+string, leaves it on. In JSX, \`modal={false}\` sets the property and does the
+same. Other features that are on by default turn off with an attribute named
+\`no-\`, such as \`no-copy\`.
 
 ## Declarative shadow DOM is opt-in
 
-The site ships no declarative shadow DOM (DSD). The shadow styles load with the
-element definition. You do not need to configure anything. If you render with
-Lit SSR yourself, its declarative shadow DOM hydrates. See
-[Server rendering](./server-rendering).
-
-The site ships no DSD for three reasons:
+The elements need no declarative shadow DOM (DSD). Each element attaches its
+shadow root and loads its styles with its definition, so you do not need to
+configure anything. If you render with Lit SSR yourself, the DSD it writes
+hydrates. See [Server rendering](./server-rendering).
 
-- DSD cannot activate for nodes inserted by script.
-- React inserts a server component's output by replaying the flight payload
-  through DOM APIs, without running the component again.
-- The patch that made DSD work hooked into webpack, and Turbopack ignores that
-  hook without an error.
+DSD does not work in a React server component. React inserts a server
+component's output by replaying the flight payload through DOM APIs, without
+running the component again, and DSD does not activate for nodes that a script
+inserts.
 `,
     versioning: `---
 description: What a Helix version number means, and which packages are released together.
@@ -8662,13 +9504,13 @@ the same version were tested together.
 
 ## The version number comes from the Git tag
 
-Every manifest in the repository has the version \`0.0.0-dev\`. CI writes the real
-number into each manifest seconds before packing.
+CI computes each version from the Git tags and writes it into every package
+manifest seconds before packing. Once the release is promoted, CI commits the
+same number back to \`main\`. The \`version\` in each Helix \`package.json\` in the
+repository is therefore the last release, and the tag is the record it copies.
 
-If you read the source, you will see \`0.0.0-dev\` on every package, including
-released ones. We do not commit the real number back. That would need a bot
-with push access that overrides branch protection, and \`git tag\` already records
-the number.
+The Rust crates stay at \`0.0.0-dev\`. The \`helix\` binary reports the version of
+the npm package it was installed with.
 
 Releases use two kinds of tag:
 
@@ -8700,8 +9542,15 @@ one of:
 - \`stable\`
 - \`deprecated\`
 
-Most components are experimental today, and their status says so. We will not
-change a status to make the library look more finished than it is.
+Most components are stable. These families are experimental, and their status
+says so:
+
+- the spatial charts, which draw in three dimensions
+- Log
+- Strands
+- Motion Toggle
+
+We will not change a status to make the library look more finished than it is.
 
 ## Release notes
 
@@ -8739,7 +9588,7 @@ accept a subset of an axis's values.
   tone="primary"
 >Save</helix-button>
 <helix-card separation="outlined">…</helix-card>
-<helix-megamenu material="glass">…</helix-megamenu>
+<helix-drawer material="glass">…</helix-drawer>
 \`\`\`
 
 ## Why there is no \`appearance\` attribute
@@ -8763,9 +9612,16 @@ build.
 ## When a property needs two axes
 
 **If two values can apply at the same time, they belong on two axes.**
-\`Megamenu\` is the example. \`variant="band"\` sets the layout of its panel, and
-glass is a \`material\`. A panel can be a band and glass at once, so the two
-values sit on two axes. A panel can also be glass and outlined at once.
+\`Card\` is the example. \`separation\` sets where its surface ends, and \`material\`
+sets what fills it. A card can be outlined and glass at once, so the two values
+sit on two axes:
+
+\`\`\`html
+<helix-card
+  material="glass"
+  separation="outlined"
+>…</helix-card>
+\`\`\`
 
 If you are adding a property and cannot decide which axis it belongs on, it is
 usually two properties.
@@ -9141,6 +9997,23 @@ Helix tag in an SFC template has typed props and events. The generated file
 declares the augmentation under both \`vue\` and \`@vue/runtime-core\`, because
 different tools read different ones.
 
+## Report a misspelled prop
+
+\`vue-tsc\` checks the value of each prop a Helix tag declares. By default, it
+does not report a prop name that the tag does not declare, so a misspelled prop
+compiles. To report one, turn on \`checkUnknownProps\` in \`tsconfig.json\`:
+
+\`\`\`json
+{
+  "vueCompilerOptions": {
+    "checkUnknownProps": true
+  }
+}
+\`\`\`
+
+\`strictTemplates\` turns it on with the rest of Vue's strict template checks.
+Either option also reports a \`data-*\` attribute on a Helix tag.
+
 ## Mark Helix tags as custom elements
 
 Without this setting, Vue treats \`<helix-button>\` as a component it cannot find
@@ -9195,7 +10068,7 @@ work. See [State and control](./state-and-control).
 <helix-input default-value="Ada" label="Name" />
 
 <!-- Mirrored: bind the notification and let the element apply. -->
-<helix-input label="Name" @change="name = $event.target.value" />
+<helix-input label="Name" @change="name = ($event.currentTarget as HelixInput).value" />
 
 <!-- Refused: you take the decision for this one change. -->
 <helix-input
@@ -9204,6 +10077,16 @@ work. See [State and control](./state-and-control).
   @helix-before-change="$event.preventDefault(); name = clean($event.detail.value)"
 />
 \`\`\`
+
+For a native event such as \`change\`, \`vue-tsc\` types \`$event.currentTarget\` as
+\`EventTarget | null\`, which has no \`value\`. The mirrored line casts it to the
+element's class, which you import as a type from the family's subpath:
+
+\`\`\`vue
+<script setup lang="ts">
+import type { HelixInput } from '@fusion.dev/helix/input'
+</script>
+\`\`\`
 `,
     'without-a-bundler': `---
 description: Use the Helix styles on a page with no build step, and why the elements need a bundler for now.
@@ -9239,10 +10122,10 @@ own URL. Copy the whole \`dist\` folder and link \`helix.css\`. We checked this
 Chromium: one \`<link>\` makes five requests, and every layer resolves.
 
 *Until August 24, 2026, this page listed \`tokens.css\` and \`base.css\` without
-\`primitives.css\`. \`tokens.css\` refers to a primitive 297 times and imports
-nothing. If you followed the old instructions, all 185 semantic tokens are
-declared and every color resolves to \`rgba(0, 0, 0, 0)\`. If your page looks
-unstyled in that way, link \`helix.css\`.*
+\`primitives.css\`. \`tokens.css\` refers to the primitives throughout and imports
+nothing. If you followed the old instructions, every semantic token is declared
+and every color resolves to \`rgba(0, 0, 0, 0)\`. If your page looks unstyled in
+that way, link \`helix.css\`.*
 
 \`elements.css\` matters most on a page with no bundler. Without a bundler, the
 module graph loads over the network, so the markup is on the page longer before
@@ -9255,9 +10138,11 @@ package made its import relative. Only a bundler resolves a bare specifier in an
 
 \`@fusion.dev/helix\` imports its dependencies by bare specifiers, such as
 \`@fusion.dev/helix-core\` and \`lit\`. A browser resolves a bare specifier only
-through an import map, and the elements import 97 separate subpaths of
-\`@fusion.dev/helix-headless\`. An import map would need an entry for each one,
-and for each subpath of \`lit\`.
+through an import map. The elements import a separate subpath of
+\`@fusion.dev/helix-headless\` for each family, and the package's \`exports\` maps
+each one to an \`index.js\` in a folder of its own, so an import map would need an
+entry for each one. A subpath of \`lit\` is the path of its file, so one \`"lit/"\` entry
+covers all of them.
 
 To use the elements, load them through a bundler, as
 [Installation](./installation) shows. A CDN that rewrites bare specifiers into