@fusion.dev/helix-docs 0.223.1 → 0.225.0

package/dist/sources.generated.js

@@ -541,17 +541,16 @@ Each flag does one job, and the manifest is incomplete without either:
 - \`--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 members it inherits, as well as the ones you
-wrote.
+Then run a typings generator over the manifest, such as \`@wc-toolkit/jsx-types\`
+or \`@wc-toolkit/vuejs-types\`. The typings for \`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'
+import type { HelixBeforeChangeEvent, HelixBeforeFilterEvent } from '@fusion.dev/helix-core'
 \`\`\`
 
 Without that line, a project that sets \`skipLibCheck\` gets no error, and each
@@ -575,9 +574,8 @@ declare module 'react' {
 
 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
-repository.
+\`@fusion.dev/helix-cem\`, the step that writes our own typings from our manifests,
+is not published. It is build tooling for this repository.
 
 ### The tag map
 
@@ -2235,8 +2233,9 @@ ways:
 
 - The class name is in the manifest, so the framework typings can emit a typed
   callback. A bare \`CustomEvent\` would give \`(detail: unknown)\`.
-- The package augments \`HTMLElementEventMap\`, which types \`addEventListener\`
-  when you write plain HTML.
+- The family augments \`HTMLElementEventMap\` for its own events, and core does
+  for the events several families share. Importing a family types
+  \`addEventListener\` for its events when you write plain HTML.
 - The name is defined on the class, so a dispatch and a listener always use the
   same string.
 
@@ -2276,9 +2275,10 @@ from an unprefixed name, and you would.
   \`helix-before-open\` and \`helix-before-close\`. Overlays nest, and an inner
   overlay's lifecycle must never reach the outer overlay that contains it. A
   menu that closes inside a dialog does not close the dialog.
-- **Coordination events** bubble and are composed. These are \`helix-select\`,
-  \`helix-dismiss\`, and \`helix-before-change\`. A parent or a router can intercept
-  them across a shadow boundary, so you can use a \`Tree\` as navigation.
+- **Coordination events** bubble and are composed. These are
+  \`helix-before-select\`, \`helix-dismiss\`, and \`helix-before-change\`. A parent or
+  a router can intercept them across a shadow boundary, so you can use a \`Tree\`
+  as navigation.
 
 If you listen on a container and receive nothing, the event is probably a
 lifecycle event. Add the listener to the element itself.
@@ -2296,31 +2296,157 @@ dialog.addEventListener('helix-before-close', (event) => {
 })
 \`\`\`
 
-Every dispatched event is checked against a declaration, and every declaration
-against a dispatch, so every event you can listen for is documented.
+Every dispatched event is checked against a declaration, so every event you can
+listen for is documented. A declaration needs no dispatch of its own, because a
+parent declares the events its children send and a form control declares the
+native event it relays.
+
+## Names
+
+Every Helix event follows one grammar:
+
+- A request is named \`helix-before-<verb>\`. It is cancelable, carries what is
+  being proposed, and is sent before anything moves.
+- Its notification is the native event where the platform has one, such as
+  \`change\` or \`toggle\`. Otherwise it is \`helix-<verb>\`, the same verb without
+  \`before\`. It is not cancelable, carries the state now in force, and is sent
+  once the change stands. A request that is refused sends no notification.
+- \`toggle\` means open and closed, as it does on \`<details>\`. A checked state
+  uses \`helix-before-check\`, followed by \`change\` on a form control or by
+  \`helix-check\` elsewhere.
+
+Two notifications use the past tense, because the plain verb is taken:
+\`helix-resized\`, since \`helix-resize\` reports a measurement, and
+\`helix-pasted\`, since \`paste\` is the clipboard event.
+
+### Commands
+
+Five events are cancelable and have no \`before\` in their name. Each one is a
+command you can refuse, and no notification follows, because nothing is in
+force afterwards to report:
+
+- \`helix-create\`, a value a combobox list does not hold
+- \`helix-dismiss\`, an element asking to be taken away
+- \`helix-send\`, what a reader wrote in a chat composer
+- \`helix-shortcut\`, a chord that was pressed
+- \`helix-terminal-link\`, an address a terminal would open
+
+### Changed in October 2026
+
+Requests that had plain names now carry \`before\`, and the plain name is the
+notification:
+
+- \`helix-sort\`, \`helix-filter\`, \`helix-select\`, and \`helix-reorder\` were the
+  requests on Data Table. They are \`helix-before-sort\`, \`helix-before-filter\`,
+  \`helix-before-select\`, and \`helix-before-reorder\` now. The plain names are
+  the notifications that were \`helix-sorted\`, \`helix-filtered\`,
+  \`helix-selected\`, and \`helix-reordered\`. **A page that bound \`helix-sort\` to
+  refuse a sort binds \`helix-before-sort\` now**, because \`helix-sort\` arrives
+  after the order has moved and cannot be refused.
+- \`helix-navigate\` is \`helix-before-navigate\`, and \`helix-navigate\` follows it
+  on Pagination, Data Table, Date Picker, and Drilldown. Pagination and Data
+  Table sent \`helix-activate\` after a page moved, and send \`helix-navigate\`
+  now.
+- \`helix-select\` on Carousel is \`helix-before-activate\`, and \`helix-activate\`
+  still follows it.
+- \`helix-facet\`, \`helix-graph-filter\`, and \`helix-read\` are
+  \`helix-before-facet\`, \`helix-before-graph-filter\`, and \`helix-before-read\`,
+  and each plain name is the notification after it.
+- \`helix-before-toggle\` is \`helix-before-check\`, and \`helix-toggle\` is
+  \`helix-check\`. A row of Table that opens sends \`helix-before-expand\` and
+  \`helix-expand\`.
+- \`helix-reorder\` on a list, a tree, or a table is no longer cancelable. Refuse
+  \`helix-before-reorder\` to keep an item where it is.
 
 ## Helix events
 
+Each component's page lists the events it sends, with the class and the detail.
+
+### Requests and notifications
+
+| Event | Meaning |
+|---|---|
+| \`helix-before-activate\`, \`helix-activate\` | A set is about to make a different child current, and then did |
+| \`helix-before-change\` | A value is about to change. \`input\` and \`change\` follow |
+| \`helix-before-check\`, \`helix-check\` | A checked state is about to change, and then did. A form control sends \`change\` in place of \`helix-check\` |
+| \`helix-before-collapse\`, \`helix-collapse\` | A splitter's pane is about to shut or reopen, and then did |
+| \`helix-before-edit\`, \`helix-edit\` | A sandbox's source is about to be edited, and then was |
+| \`helix-before-expand\`, \`helix-expand\` | Rows of a table are about to open or close in place, and then did |
+| \`helix-before-facet\`, \`helix-facet\` | A filter input's field is about to be filtered by other values, and then was |
+| \`helix-before-filter\`, \`helix-filter\` | A list or a table is about to narrow what it shows, and then did |
+| \`helix-before-follow\`, \`helix-follow\` | A press on a link in a table cell is about to load its page, and then is |
+| \`helix-before-graph-filter\`, \`helix-graph-filter\` | A graph is about to show or hide a group's notes, and then did |
+| \`helix-before-listen\`, \`helix-listen\` | A field is about to listen for dictation, and then put a phrase in its text |
+| \`helix-before-move\`, \`helix-move\` | Cards on a canvas are about to move, and then did |
+| \`helix-before-navigate\`, \`helix-navigate\` | A component is about to move the view it shows, such as a page or a month, and then did |
+| \`helix-before-open\`, \`helix-before-close\` | An open state is about to change. \`toggle\` follows |
+| \`helix-before-panel-resize\`, \`helix-panel-resize\` | A sandbox's panel is about to change height, and then did |
+| \`helix-before-paste\`, \`helix-pasted\` | Cards are about to be pasted onto a canvas, and then were |
+| \`helix-before-pin\`, \`helix-pin\` | A transcript is about to be pinned to the bottom or let go of it, and then was |
+| \`helix-before-read\`, \`helix-read\` | A notification is about to be marked read or unread, and then was |
+| \`helix-before-reconnect\`, \`helix-reconnect\` | A connection's end on a canvas is about to move, and then did |
+| \`helix-before-relabel\`, \`helix-relabel\` | A label a canvas draws is about to change, and then did |
+| \`helix-before-reorder\`, \`helix-reorder\` | A row, an item, or a column is about to move to a new place, and then did |
+| \`helix-before-resize\`, \`helix-resized\` | A splitter's divider is about to settle, and then did |
+| \`helix-before-select\`, \`helix-select\` | An item in a set is about to be chosen, and then a selection changed |
+| \`helix-before-sort\`, \`helix-sort\` | A table is about to change its order, and then did |
+| \`helix-before-split\`, \`helix-split\` | The divider between a sandbox's panes is about to move, and then did |
+
+### Command events
+
+| Event | Meaning |
+|---|---|
+| \`helix-create\` | A combobox was asked for a value its list does not hold |
+| \`helix-dismiss\` | An element asks to be taken away |
+| \`helix-send\` | A chat composer is handing over what the reader wrote |
+| \`helix-shortcut\` | A shortcut's chord was pressed |
+| \`helix-terminal-link\` | A link in a terminal's output was activated |
+
+### Other notifications
+
 | Event | Meaning |
 |---|---|
-| \`helix-before-change\` | A value is about to change, cancelable |
-| \`helix-before-toggle\` | A checked state is about to flip, cancelable |
-| \`helix-before-open\`, \`helix-before-close\` | An open state is about to change, cancelable |
-| \`helix-before-activate\`, \`helix-activate\` | A set is about to make a different child current, cancelable, and then did |
-| \`helix-before-pin\`, \`helix-pin\` | A chat transcript is about to be pinned to the bottom or let go of it, cancelable, and then was |
-| \`helix-before-resize\`, \`helix-resized\` | A splitter's divider is about to settle, cancelable, and then did |
-| \`helix-before-collapse\`, \`helix-collapse\` | A splitter's pane is about to shut or reopen, cancelable, and then did |
-| \`helix-select\` | An item was chosen from a set |
-| \`helix-dismiss\` | A user asked for something to close |
-| \`helix-next\`, \`helix-previous\` | Movement through a sequence |
-| \`helix-filter\` | A query changed in a filtering control |
-| \`helix-navigate\` | A component is about to navigate |
-| \`helix-copy\` | Something was copied |
-| \`helix-caret\` | The cursor moved in a text control |
+| \`helix-action\` | A reader acted on a list row |
+| \`helix-aura-fallback\` | An aura stopped drawing its shader and shows its gradient |
+| \`helix-band\` | A meter's reading moved into another band |
+| \`helix-canvas-edit\` | A reader asked to edit a card |
+| \`helix-canvas-pan\`, \`helix-canvas-zoom\`, \`helix-canvas-view\` | A canvas moved, zoomed, or changed its view |
+| \`helix-caret\` | The cursor moved in a text editor |
+| \`helix-clear\` | A reader cleared a value |
 | \`helix-complete\` | A control that fills up has filled |
-| \`helix-create\` | A new item was made from a query |
+| \`helix-connect\` | A reader asked for two cards to be joined |
 | \`helix-console\` | The sandbox passes on a log message |
-| \`helix-tour-ask\`, \`helix-sample-start\`, \`helix-sample-end\` | Tour and color sampling |
+| \`helix-copy\`, \`helix-copy-error\` | Something was copied, or nothing could be |
+| \`helix-device-button\`, \`helix-device-key\`, \`helix-device-screenshot\` | A device screen's button, key, or screenshot was asked for |
+| \`helix-device-scroll\`, \`helix-device-swipe\`, \`helix-device-tap\`, \`helix-device-text\`, \`helix-device-touch\` | A reader scrolled, swiped, tapped, pasted, or touched a device screen |
+| \`helix-end\` | A video playlist reached its last entry and stopped |
+| \`helix-found\` | A search found its matches, or moved among them |
+| \`helix-graph-layout\`, \`helix-graph-ready\` | A graph's layout settled, or the graph was drawn whole |
+| \`helix-graph-pan\`, \`helix-graph-zoom\` | A reader asked a graph to move or to zoom |
+| \`helix-graph-part-change\`, \`helix-graph-signal\` | What a graph's connector draws changed, or something passed between two notes |
+| \`helix-history\` | A transcript reached its oldest turn, and older ones can be fetched |
+| \`helix-load\` | A lazy tree branch opened and asks for its children |
+| \`helix-load-more\` | A reader asked for more items |
+| \`helix-map-cluster\` | A reader pressed a cluster of map markers |
+| \`helix-map-pan\`, \`helix-map-rotate\`, \`helix-map-tilt\`, \`helix-map-zoom\` | A reader asked a map to move, rotate, tilt, or zoom |
+| \`helix-map-part-change\`, \`helix-map-ready\` | What a map's connector draws changed, or the map was drawn whole |
+| \`helix-next\`, \`helix-previous\` | A reader asked for the next or the previous item in a sequence |
+| \`helix-plot-change\`, \`helix-plot-turn\` | What a plot's connector draws changed, or a reader turned a 3D plot by key |
+| \`helix-press\` | A control was pressed and acted |
+| \`helix-preview\` | A control shows what a press would choose |
+| \`helix-range-change\` | The items a virtual list shows changed |
+| \`helix-reading-change\`, \`helix-reading-press\` | A chart moved to a reading, or a reading was pressed |
+| \`helix-reject\` | A file field refused some of the files it was given |
+| \`helix-remove\` | A reader asked for cards or connections to be taken away |
+| \`helix-resize\` | A preview reports how much room its content needs |
+| \`helix-sample-start\`, \`helix-sample-end\` | The eyedropper opened, or closed |
+| \`helix-scrolled\` | A header started or stopped floating over the page |
+| \`helix-stop\` | A reader asked for what is under way to stop |
+| \`helix-strands-fallback\` | A strands element stopped drawing its ribbon and shows its gradient |
+| \`helix-terminal-bell\`, \`helix-terminal-title\` | A terminal's program rang the bell or set its title |
+| \`helix-terminal-input\`, \`helix-terminal-resize\`, \`helix-terminal-restart\` | A terminal has input for the process, changed size, or was asked to restart |
+| \`helix-tour-ask\`, \`helix-tour-status\` | A tour stop asked the tour to move, or the tour's progress changed |
+| \`helix-typing\` | A reader started or stopped writing in a chat composer |
 
 Every stateful component also sends native events once the change is applied:
 
@@ -2331,32 +2457,6 @@ Every stateful component also sends native events once the change is applied:
 - \`close\` on a dialog
 - \`load\` and \`error\` on an image
 
-Each component's page lists the events it dispatches, with the class and the
-detail. The table above lists the common ones.
-
-## Requests under a plain name
-
-A few events with no \`before\` in their name are also cancelable requests. Each
-is sent before the change, and you refuse the change with \`preventDefault()\`:
-
-- \`helix-navigate\` on Pagination, Data Table, and Date Picker
-- \`helix-sort\`, \`helix-filter\`, \`helix-select\`, and \`helix-reorder\` on Data Table
-- \`helix-select\` on Carousel
-
-Each of these requests had its name before the library had a word for the
-notification, so the notification has its own name. It is sent after the
-change, is not cancelable, and carries the new state:
-
-- \`helix-activate\` after the page moves on Pagination and Data Table, and after
-  the slide moves on Carousel
-- \`helix-sorted\`, \`helix-filtered\`, \`helix-selected\`, and \`helix-reordered\` on
-  Data Table
-- \`input\` and \`change\` together on Pagination Size, as a native \`<select>\`
-  sends them
-
-A request that is refused sends no notification. Date Picker's \`helix-navigate\`
-moves the month on show, and the month sends no notification.
-
 ## Events in a framework
 
 Native events use their usual props, such as \`onChange\`, \`onInput\`, and
@@ -2851,12 +2951,13 @@ list:
 \`\`\`
 
 \`hiddenGroups\` holds the names of the groups turned off. Set it to start with
-some hidden. A press sends \`helix-graph-filter\` first, with every group that
-would be hidden. Cancel it to keep the groups as they were, or to keep them in
-your own state and set \`hiddenGroups\` yourself:
+some hidden. A press sends \`helix-before-graph-filter\` first, with every group
+that would be hidden. Cancel it to keep the groups as they were, or to keep them
+in your own state and set \`hiddenGroups\` yourself. \`helix-graph-filter\` follows
+once the groups have changed, with every group now hidden:
 
 \`\`\`ts
-frame.addEventListener('helix-graph-filter', (event) => {
+frame.addEventListener('helix-before-graph-filter', (event) => {
   event.preventDefault()
   frame.hiddenGroups = event.detail.hidden
 })
@@ -3148,7 +3249,8 @@ The frame sends these events. Their names follow Map's: \`helix-graph-pan\`,
 |---|---|---|---|
 | \`helix-before-activate\` | A note is about to be selected | Yes | You, to keep the selection in your own state |
 | \`helix-activate\` | A note was selected, in the list or the drawing | No | You |
-| \`helix-graph-filter\` | A group in the legend was pressed, before its notes are shown or hidden | Yes | You, to set \`hiddenGroups\` yourself |
+| \`helix-before-graph-filter\` | A group in the legend was pressed, before its notes are shown or hidden | Yes | You, to set \`hiddenGroups\` yourself |
+| \`helix-graph-filter\` | A group's notes were shown or hidden | No | You |
 | \`helix-graph-layout\` | A layout settled, with where it put each note | No | You, to keep the positions |
 | \`helix-graph-ready\` | The graph has been drawn whole | No | You, to show the graph once it is finished |
 | \`helix-graph-pan\` | An arrow key or a pan button asked the drawing to move | No | \`connectGraph\`, or your own renderer |
@@ -3692,13 +3794,13 @@ 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.
+description: What Fusion Helix is, and the packages it includes.
 order: 1
 section: Getting started
 title: Introduction
 ---
 
-# Helix
+# Fusion Helix
 
 Helix is a design system of web components. It includes:
 
@@ -4846,7 +4948,7 @@ tile is lit while its layer is shown. Pressing a tile sets its layer's \`hidden\
 attribute, and \`connectMap\` does not draw a hidden layer. Write \`hidden\` on a
 layer to start it turned off.
 
-Before it sets \`hidden\`, a tile sends \`helix-before-toggle\` from the layer, with
+Before it sets \`hidden\`, a tile sends \`helix-before-check\` from the layer, with
 \`checked\` true when the layer is to be shown. Store the choice from it, or
 cancel it to keep the layer as it is.
 
@@ -5134,7 +5236,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 308,011 | 97,129 | 83,060 |
+| Lit and \`@fusion.dev/helix-core\` | 295,793 | 95,872 | 82,135 |
 
 ## Whole packages
 
@@ -5145,12 +5247,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 307,220 | 96,945 | 82,678 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,674,494 | 460,588 | 347,732 | Every headless family. The barrel entry includes all of them. |
-| \`@fusion.dev/helix-icons\` | 68,014 | 21,684 | 18,012 | The whole glyph set. |
+| \`@fusion.dev/helix-core\` | 295,002 | 95,659 | 81,879 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,699,188 | 468,312 | 352,549 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-icons\` | 77,621 | 24,510 | 20,384 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 4,022 | 1,720 | 1,541 | 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\` | 412,026 | 152,285 | 123,363 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
-| \`@fusion.dev/helix\` | 2,467,504 | 631,089 | 452,523 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,503,553 | 640,892 | 458,056 | Every styled family. |
 | \`lit\` | 15,396 | 5,990 | 5,419 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -5163,7 +5265,7 @@ shows the whole cost of using the base layer on its own.
 
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`base.css\` | 36,395 | 5,186 | 4,481 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
+| \`base.css\` | 37,882 | 5,293 | 4,566 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
 | \`elements.css\` | 24,939 | 3,469 | 3,047 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
 | \`helix.css\` | 207 | 149 | 118 | The other four stylesheets in one import, in the order they must load. |
 | \`primitives.css\` | 7,511 | 1,411 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
@@ -5171,17 +5273,17 @@ shows the whole cost of using the base layer on its own.
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 22,580 bytes gzipped alone, and it adds 5,547 to a page that already has Helix. The shared runtime is 75 percent of the first component, and the component itself is 25 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 22,915 bytes gzipped alone, and it adds 5,550 to a page that already has Helix. The shared runtime is 76 percent of the first component, and the component itself is 24 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 122 styled components, the smallest is \`code\` at 9,733 bytes gzipped alone, and the largest is \`data-table\` at 75,362. Every family together is 631,089.
+Across the 122 styled components, the smallest is \`code\` at 9,897 bytes gzipped alone, and the largest is \`data-table\` at 76,830. Every family together is 640,892.
 
-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 460,588 bytes gzipped, whatever else the page imports. That is 20 times the median family above. All 122 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 468,312 bytes gzipped, whatever else the page imports. That is 20 times the median family above. All 122 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 20,770 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 21,062 bytes gzipped alone.
 
 ## Compared with other systems
 
-We compare Helix with the libraries of custom elements listed under the table. \`turbo run peers\` measured them on October 9, 2026. It installs pinned versions into \`.local\` and bundles them with the same harness as the tables above. The Helix rows are measured on every run of \`bun run gen:metrics\`, so they always match this repository.
+We compare Helix with the libraries of custom elements listed under the table. \`turbo run peers\` measured them on October 31, 2026. It installs pinned versions into \`.local\` and bundles them with the same harness as the tables above. The Helix rows are measured on every run of \`bun run gen:metrics\`, so they always match this repository.
 
 Every system in the table is built on Lit. The runtime is the same library in every column, so the differences come from the components. React component libraries are left out, because comparing a custom element with a React component would measure the framework.
 
@@ -5189,43 +5291,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 47,115 | 15,724 | 14,141 |
-| | 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** | 51,825 | 16,807 | 15,118 |
-| | 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** | 48,335 | 16,369 | 14,717 |
-| | 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** | 54,658 | 17,359 | 15,577 |
-| | 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** | 48,654 | 16,303 | 14,596 |
-| | 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** | 61,069 | 19,404 | 17,442 |
-| | 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** | 67,354 | 23,589 | 21,181 |
-| | Carbon | 189,382 | 30,354 | 22,273 |
+| \`button\` | **Helix** | 49,256 | 16,177 | 14,575 |
+| | Carbon | 133,019 | 20,696 | 17,673 |
+| | Material Web | 47,039 | 13,980 | 12,488 |
+| | Spectrum | 98,861 | 21,731 | 18,547 |
+| | Web Awesome | 136,082 | 34,015 | 28,815 |
+| \`checkbox\` | **Helix** | 52,190 | 16,959 | 15,251 |
+| | Carbon | 60,226 | 15,349 | 13,476 |
+| | Material Web | 43,770 | 13,361 | 11,940 |
+| | Spectrum | 60,006 | 14,720 | 12,834 |
+| | Web Awesome | 115,313 | 28,720 | 24,391 |
+| \`dialog\` | **Helix** | 48,868 | 16,562 | 14,903 |
+| | Carbon | 510,751 | 66,753 | 39,054 |
+| | Material Web | 34,234 | 11,327 | 10,171 |
+| | Spectrum | 152,934 | 30,766 | 25,567 |
+| | Web Awesome | 148,696 | 36,894 | 31,476 |
+| \`radio\` | **Helix** | 55,036 | 17,528 | 15,711 |
+| | Carbon | 62,982 | 16,599 | 14,519 |
+| | Material Web | 41,029 | 13,048 | 11,659 |
+| | Spectrum | 38,765 | 10,485 | 9,337 |
+| | Web Awesome | 112,100 | 27,426 | 23,157 |
+| \`switch\` | **Helix** | 49,022 | 16,458 | 14,793 |
+| | Carbon | 69,388 | 16,861 | 14,710 |
+| | Material Web | 50,129 | 14,355 | 12,869 |
+| | Spectrum | 62,390 | 14,852 | 13,259 |
+| | Web Awesome | 45,922 | 15,043 | 13,489 |
+| \`tabs\` | **Helix** | 61,660 | 19,580 | 17,624 |
+| | Carbon | 578,657 | 72,708 | 43,044 |
+| | Material Web | 38,875 | 12,619 | 11,290 |
+| | Spectrum | 64,371 | 17,857 | 16,004 |
+| | Web Awesome | 153,457 | 37,241 | 31,779 |
+| \`tooltip\` | **Helix** | 67,881 | 23,741 | 21,342 |
+| | Carbon | 189,319 | 29,833 | 22,169 |
 | | Material Web | | not shipped | |
-| | Spectrum | 136,599 | 40,552 | 35,286 |
-| | Web Awesome | 70,568 | 24,005 | 21,107 |
+| | Spectrum | 136,084 | 39,731 | 34,997 |
+| | Web Awesome | 70,482 | 23,540 | 21,032 |
 
-At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 6,699 bytes gzipped. 13 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\`, \`tooltip\`. The largest gap is radio against Spectrum, at 7,043 bytes gzipped. 14 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.
 
@@ -5238,7 +5340,7 @@ Every specifier we measured is in [\`peers.json\`](https://github.com/project-fu
 
 ## What each system ships
 
-Every system in the size comparison ships buttons, form controls, menus, and dialogs. This table lists jobs beyond those, and the elements each system ships for each job. Each name comes from the manifest the system publishes, read by \`turbo run peers\` on October 9, 2026. The Helix column reads \`@fusion.dev/helix\` on every run.
+Every system in the size comparison ships buttons, form controls, menus, and dialogs. This table lists jobs beyond those, and the elements each system ships for each job. Each name comes from the manifest the system publishes, read by \`turbo run peers\` on October 31, 2026. The Helix column reads \`@fusion.dev/helix\` on every run.
 
 A system covers a job when its manifest defines an element with one of a fixed list of names, after its prefix. The list is the same for every system, and it is in \`build-metrics.mjs\`. An empty cell means no element has one of those names. A system can still do the job with a pattern, a separate library, or an element under another name.
 
@@ -5299,120 +5401,120 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 36,249 | 13,190 | 11,858 | 5,367 | 1,517 | 1,186 |
-| \`announcement\` | 40,862 | 14,703 | 13,249 | 4,686 | 1,360 | 966 |
-| \`app-header\` | 36,395 | 13,257 | 11,923 | 5,886 | 1,708 | 1,204 |
-| \`area-chart\` | 110,349 | 38,275 | 34,140 | 14,791 | 4,535 | 3,609 |
-| \`avatar\` | 35,444 | 13,264 | 11,991 | 3,992 | 1,195 | 856 |
-| \`badge\` | 31,681 | 12,042 | 10,884 | 2,953 | 855 | 563 |
-| \`bar-chart\` | 118,370 | 40,886 | 36,427 | 22,289 | 6,943 | 5,752 |
-| \`blockquote\` | 28,258 | 10,799 | 9,725 | 2,398 | 861 | 617 |
-| \`breadcrumbs\` | 41,360 | 15,512 | 14,042 | 7,768 | 2,452 | 2,013 |
-| \`button\` | 40,609 | 14,319 | 12,901 | 5,479 | 1,574 | 1,178 |
-| \`button-group\` | 32,150 | 11,807 | 10,624 | 4,918 | 1,416 | 1,000 |
-| \`callout\` | 39,513 | 14,942 | 13,482 | 2,880 | 948 | 728 |
-| \`canvas\` | 178,196 | 55,660 | 48,627 | 83,464 | 24,641 | 20,489 |
-| \`card\` | 27,975 | 10,466 | 9,427 | 2,088 | 630 | 458 |
-| \`carousel\` | 48,676 | 17,119 | 15,487 | 15,306 | 4,194 | 3,157 |
-| \`chat\` | 140,595 | 45,630 | 40,328 | 43,277 | 11,988 | 9,650 |
-| \`checkbox\` | 45,348 | 15,333 | 13,780 | 3,173 | 954 | 674 |
-| \`checkbox-group\` | 52,546 | 17,193 | 15,431 | 8,385 | 2,315 | 1,626 |
-| \`code\` | 24,448 | 9,430 | 8,484 | 136 | 47 | -41 |
-| \`code-block\` | 112,454 | 37,835 | 33,648 | 40,141 | 11,795 | 9,541 |
-| \`code-editor\` | 100,650 | 31,304 | 27,726 | 36,904 | 9,394 | 7,604 |
-| \`code-input\` | 65,283 | 22,349 | 20,000 | 10,584 | 3,398 | 2,672 |
-| \`color-input\` | 148,596 | 46,980 | 41,258 | 56,194 | 14,497 | 11,620 |
-| \`color-picker\` | 109,920 | 34,751 | 30,792 | 48,312 | 12,871 | 10,520 |
-| \`combobox\` | 149,112 | 47,094 | 41,525 | 36,985 | 9,238 | 7,326 |
-| \`command\` | 126,133 | 39,601 | 34,814 | 37,885 | 9,795 | 7,851 |
-| \`copy-button\` | 87,833 | 29,786 | 26,650 | 19,498 | 5,178 | 4,141 |
-| \`data-table\` | 217,811 | 66,306 | 57,350 | 91,273 | 24,076 | 19,188 |
-| \`date-input\` | 146,579 | 45,805 | 40,537 | 38,637 | 9,400 | 7,552 |
-| \`date-picker\` | 66,650 | 22,606 | 20,369 | 20,710 | 5,618 | 4,373 |
-| \`description-list\` | 27,049 | 10,166 | 9,142 | 1,561 | 507 | 291 |
-| \`device-screen\` | 121,255 | 38,176 | 33,747 | 44,469 | 11,092 | 8,796 |
-| \`dialog\` | 42,577 | 15,038 | 13,519 | 6,080 | 1,750 | 1,285 |
-| \`divider\` | 27,503 | 10,399 | 9,342 | 1,412 | 467 | 383 |
-| \`donut-chart\` | 103,708 | 35,681 | 31,870 | 15,108 | 4,617 | 3,807 |
-| \`drawer\` | 47,059 | 16,454 | 14,760 | 7,774 | 2,264 | 1,792 |
-| \`drilldown\` | 46,798 | 16,231 | 14,590 | 9,706 | 2,650 | 1,949 |
-| \`editor\` | 176,430 | 53,602 | 46,681 | 82,539 | 20,308 | 16,598 |
-| \`empty\` | 28,586 | 10,724 | 9,663 | 1,974 | 628 | 476 |
-| \`file-input\` | 62,360 | 21,394 | 19,233 | 13,122 | 4,083 | 3,124 |
-| \`filter-input\` | 111,932 | 37,408 | 33,302 | 21,269 | 6,054 | 4,776 |
-| \`find\` | 77,004 | 25,519 | 22,795 | 21,396 | 5,586 | 4,425 |
-| \`format-date\` | 34,772 | 12,811 | 11,580 | 4,460 | 1,224 | 1,012 |
-| \`graph\` | 144,814 | 45,608 | 39,842 | 38,115 | 10,626 | 8,537 |
-| \`heatmap\` | 112,781 | 38,051 | 33,906 | 19,451 | 5,668 | 4,494 |
-| \`icon\` | 98,587 | 33,273 | 28,565 | 69,259 | 23,112 | 18,677 |
-| \`icon-button\` | 40,715 | 14,342 | 12,923 | 5,586 | 1,591 | 1,250 |
-| \`image\` | 29,952 | 10,991 | 9,921 | 3,838 | 1,116 | 795 |
-| \`input\` | 61,842 | 21,122 | 18,800 | 7,367 | 2,294 | 1,534 |
-| \`kbd\` | 32,753 | 12,222 | 10,974 | 3,622 | 1,106 | 781 |
-| \`legend\` | 43,554 | 15,484 | 13,987 | 2,760 | 861 | 542 |
-| \`lightbox\` | 60,461 | 20,320 | 18,226 | 16,845 | 4,583 | 3,475 |
-| \`line-chart\` | 113,352 | 39,144 | 35,014 | 17,196 | 5,121 | 4,262 |
-| \`list\` | 66,141 | 22,766 | 20,321 | 15,226 | 4,309 | 3,336 |
-| \`listbox\` | 93,333 | 30,800 | 27,317 | 16,371 | 4,669 | 3,601 |
-| \`loader\` | 30,911 | 11,578 | 10,458 | 2,781 | 876 | 627 |
-| \`log\` | 89,075 | 29,814 | 26,713 | 40,277 | 12,439 | 10,367 |
-| \`map\` | 157,108 | 46,680 | 40,347 | 60,222 | 14,879 | 11,472 |
-| \`markdown\` | 139,161 | 46,879 | 41,638 | 62,289 | 19,398 | 16,086 |
-| \`megamenu\` | 64,709 | 23,080 | 20,624 | 8,719 | 2,339 | 1,633 |
-| \`menu\` | 104,714 | 34,179 | 30,513 | 32,349 | 8,315 | 6,774 |
-| \`meter\` | 37,733 | 13,876 | 12,562 | 6,077 | 1,709 | 1,376 |
-| \`motion-toggle\` | 29,880 | 11,436 | 10,324 | 1,424 | 500 | 267 |
-| \`navigation\` | 37,237 | 13,780 | 12,351 | 3,362 | 1,112 | 787 |
-| \`notifications\` | 62,751 | 21,147 | 19,057 | 18,254 | 5,020 | 3,961 |
-| \`number-input\` | 61,189 | 20,411 | 18,318 | 13,544 | 3,615 | 2,757 |
-| \`object-inspector\` | 123,135 | 40,897 | 36,209 | 36,768 | 10,465 | 8,463 |
-| \`option\` | 30,624 | 11,141 | 10,039 | 4,511 | 1,143 | 769 |
-| \`outline\` | 38,181 | 14,038 | 12,639 | 7,884 | 2,472 | 1,697 |
-| \`pagination\` | 153,802 | 48,807 | 42,702 | 46,956 | 12,155 | 9,586 |
-| \`pin-input\` | 52,429 | 18,113 | 16,268 | 7,197 | 2,363 | 1,768 |
-| \`popover\` | 68,441 | 24,182 | 21,669 | 6,457 | 1,808 | 1,336 |
-| \`progress\` | 32,788 | 12,280 | 11,085 | 2,998 | 922 | 652 |
-| \`qr-code\` | 47,144 | 17,973 | 16,199 | 16,929 | 6,240 | 5,174 |
-| \`quote\` | 26,667 | 10,268 | 9,211 | 1,207 | 472 | 353 |
-| \`radio\` | 46,884 | 15,862 | 14,231 | 3,811 | 1,165 | 693 |
-| \`rating\` | 55,176 | 18,863 | 16,971 | 8,050 | 2,411 | 1,808 |
-| \`scatter-chart\` | 109,769 | 37,707 | 33,686 | 20,731 | 6,438 | 5,201 |
-| \`scroll-area\` | 35,384 | 12,683 | 11,405 | 9,025 | 2,658 | 2,046 |
-| \`select\` | 132,234 | 43,267 | 38,099 | 27,170 | 7,320 | 5,570 |
-| \`shortcut-overlay\` | 53,089 | 18,747 | 16,808 | 11,419 | 3,404 | 2,638 |
-| \`skeleton\` | 26,479 | 10,047 | 9,058 | 989 | 368 | 234 |
-| \`skip-link\` | 28,115 | 10,723 | 9,669 | 1,219 | 434 | 293 |
-| \`slider\` | 58,728 | 19,641 | 17,706 | 13,680 | 3,843 | 2,925 |
-| \`sparkline\` | 52,792 | 18,953 | 17,101 | 5,964 | 2,072 | 1,638 |
-| \`spatial-bar-chart\` | 125,100 | 43,684 | 38,883 | 28,919 | 9,721 | 8,115 |
-| \`spatial-heatmap\` | 128,149 | 43,195 | 38,392 | 32,120 | 9,614 | 7,857 |
-| \`spatial-ribbon-chart\` | 115,504 | 40,147 | 35,763 | 21,336 | 7,097 | 5,765 |
-| \`spatial-scatter-chart\` | 113,575 | 39,322 | 35,012 | 19,470 | 6,321 | 5,162 |
-| \`spatial-surface-chart\` | 116,507 | 40,561 | 36,186 | 22,339 | 7,463 | 6,157 |
-| \`spatial-treemap\` | 117,610 | 41,156 | 36,639 | 21,752 | 7,405 | 5,970 |
-| \`speed-dial\` | 73,135 | 25,919 | 23,209 | 10,922 | 2,915 | 2,155 |
-| \`splitter\` | 48,652 | 16,694 | 15,027 | 14,489 | 3,772 | 2,997 |
-| \`stat\` | 29,848 | 11,203 | 10,119 | 2,314 | 748 | 456 |
-| \`steps\` | 59,294 | 20,417 | 18,317 | 14,144 | 3,931 | 3,098 |
-| \`switch\` | 44,200 | 15,153 | 13,591 | 1,745 | 621 | 397 |
-| \`table\` | 124,760 | 38,525 | 33,937 | 45,135 | 12,310 | 9,861 |
-| \`tabs\` | 50,864 | 17,330 | 15,583 | 10,563 | 2,812 | 2,035 |
-| \`tag\` | 46,829 | 16,925 | 15,276 | 8,441 | 2,466 | 1,812 |
-| \`terminal\` | 140,189 | 44,102 | 38,864 | 52,671 | 13,171 | 10,606 |
-| \`textarea\` | 59,582 | 20,301 | 18,193 | 5,667 | 1,672 | 1,157 |
-| \`time-input\` | 186,373 | 57,771 | 50,239 | 50,184 | 12,580 | 10,010 |
-| \`time-picker\` | 116,346 | 36,806 | 32,451 | 35,105 | 9,344 | 7,410 |
-| \`timeline\` | 35,983 | 13,503 | 12,201 | 4,076 | 1,179 | 807 |
-| \`toast\` | 73,507 | 24,693 | 22,101 | 19,746 | 5,516 | 4,455 |
-| \`toggle\` | 50,672 | 16,771 | 15,126 | 6,071 | 1,769 | 1,242 |
-| \`toolbar\` | 38,352 | 13,948 | 12,582 | 1,364 | 482 | 288 |
-| \`tooltip\` | 64,471 | 22,829 | 20,540 | 8,878 | 2,456 | 1,903 |
-| \`tour\` | 89,668 | 30,392 | 27,092 | 20,487 | 5,525 | 4,319 |
-| \`tree\` | 72,238 | 24,175 | 21,587 | 17,554 | 4,879 | 3,871 |
-| \`trend\` | 34,495 | 13,196 | 11,902 | 3,581 | 1,104 | 817 |
-| \`video\` | 149,977 | 46,137 | 40,667 | 68,341 | 16,997 | 13,849 |
-| \`video-playlist\` | 135,166 | 43,160 | 38,181 | 44,922 | 11,507 | 9,445 |
-| \`virtual-list\` | 71,136 | 23,618 | 21,269 | 25,061 | 7,392 | 6,104 |
+| \`accordion\` | 36,788 | 13,361 | 12,026 | 5,369 | 1,509 | 1,246 |
+| \`announcement\` | 41,504 | 14,908 | 13,466 | 4,788 | 1,395 | 1,019 |
+| \`app-header\` | 37,460 | 13,637 | 12,255 | 6,103 | 1,830 | 1,351 |
+| \`area-chart\` | 110,876 | 38,448 | 34,287 | 14,781 | 4,514 | 3,757 |
+| \`avatar\` | 35,972 | 13,427 | 12,143 | 3,980 | 1,241 | 1,018 |
+| \`badge\` | 32,204 | 12,204 | 11,028 | 2,941 | 888 | 721 |
+| \`bar-chart\` | 118,895 | 41,035 | 36,705 | 22,275 | 6,957 | 5,826 |
+| \`blockquote\` | 28,797 | 10,962 | 9,858 | 2,400 | 869 | 846 |
+| \`breadcrumbs\` | 42,197 | 15,744 | 14,197 | 7,912 | 2,506 | 2,043 |
+| \`button\` | 41,599 | 14,659 | 13,253 | 5,695 | 1,678 | 1,299 |
+| \`button-group\` | 32,666 | 11,956 | 10,770 | 4,897 | 1,458 | 1,134 |
+| \`callout\` | 40,054 | 15,113 | 13,582 | 2,875 | 991 | 723 |
+| \`canvas\` | 179,749 | 56,211 | 49,044 | 86,219 | 25,107 | 20,710 |
+| \`card\` | 28,502 | 10,629 | 9,573 | 2,074 | 612 | 434 |
+| \`carousel\` | 49,408 | 17,356 | 15,659 | 15,477 | 4,258 | 3,417 |
+| \`chat\` | 141,862 | 46,118 | 40,749 | 44,186 | 12,188 | 9,811 |
+| \`checkbox\` | 45,709 | 15,485 | 13,917 | 3,154 | 976 | 669 |
+| \`checkbox-group\` | 52,892 | 17,350 | 15,566 | 8,351 | 2,349 | 1,733 |
+| \`code\` | 24,987 | 9,593 | 8,634 | 136 | 57 | 185 |
+| \`code-block\` | 113,571 | 38,287 | 34,059 | 40,487 | 11,881 | 9,657 |
+| \`code-editor\` | 101,737 | 31,707 | 28,120 | 37,299 | 9,473 | 7,636 |
+| \`code-input\` | 65,648 | 22,502 | 20,156 | 10,559 | 3,403 | 2,727 |
+| \`color-input\` | 149,480 | 47,457 | 41,618 | 56,692 | 14,689 | 11,797 |
+| \`color-picker\` | 110,841 | 35,126 | 31,062 | 48,828 | 13,100 | 10,584 |
+| \`combobox\` | 150,510 | 47,620 | 41,969 | 37,524 | 9,377 | 7,572 |
+| \`command\` | 127,691 | 39,998 | 35,131 | 38,272 | 9,836 | 8,034 |
+| \`copy-button\` | 88,951 | 30,220 | 27,056 | 19,839 | 5,299 | 4,319 |
+| \`data-table\` | 221,008 | 67,295 | 58,026 | 93,771 | 24,749 | 19,852 |
+| \`date-input\` | 147,158 | 45,983 | 40,770 | 38,735 | 9,418 | 7,609 |
+| \`date-picker\` | 67,350 | 22,765 | 20,573 | 20,821 | 5,643 | 4,542 |
+| \`description-list\` | 27,583 | 10,321 | 9,292 | 1,554 | 488 | 386 |
+| \`device-screen\` | 122,587 | 38,606 | 34,154 | 46,259 | 11,428 | 9,254 |
+| \`dialog\` | 43,110 | 15,224 | 13,674 | 6,075 | 1,792 | 1,341 |
+| \`divider\` | 28,042 | 10,561 | 9,492 | 1,410 | 477 | 410 |
+| \`donut-chart\` | 104,235 | 35,857 | 32,022 | 15,091 | 4,568 | 3,819 |
+| \`drawer\` | 47,598 | 16,646 | 14,963 | 7,778 | 2,238 | 1,811 |
+| \`drilldown\` | 48,006 | 16,533 | 14,855 | 10,059 | 2,734 | 2,133 |
+| \`editor\` | 178,365 | 54,257 | 47,099 | 83,366 | 20,565 | 16,638 |
+| \`empty\` | 29,125 | 10,883 | 9,801 | 1,974 | 632 | 451 |
+| \`file-input\` | 63,256 | 21,755 | 19,588 | 13,323 | 4,168 | 3,381 |
+| \`filter-input\` | 113,026 | 37,877 | 33,687 | 21,663 | 6,136 | 4,977 |
+| \`find\` | 78,192 | 25,912 | 23,097 | 21,809 | 5,714 | 4,589 |
+| \`format-date\` | 35,311 | 12,970 | 11,694 | 4,462 | 1,239 | 1,079 |
+| \`graph\` | 146,422 | 46,082 | 40,289 | 40,018 | 10,986 | 8,787 |
+| \`heatmap\` | 113,308 | 38,184 | 34,052 | 19,434 | 5,633 | 4,553 |
+| \`icon\` | 108,395 | 36,072 | 30,948 | 78,520 | 25,858 | 21,076 |
+| \`icon-button\` | 41,708 | 14,699 | 13,261 | 5,802 | 1,677 | 1,339 |
+| \`image\` | 30,491 | 11,154 | 10,066 | 3,842 | 1,114 | 855 |
+| \`input\` | 62,209 | 21,267 | 18,950 | 7,350 | 2,354 | 1,704 |
+| \`kbd\` | 34,229 | 12,745 | 11,457 | 3,926 | 1,248 | 946 |
+| \`legend\` | 44,093 | 15,635 | 14,131 | 2,764 | 882 | 757 |
+| \`lightbox\` | 60,994 | 20,490 | 18,420 | 16,839 | 4,620 | 3,560 |
+| \`line-chart\` | 113,879 | 39,281 | 35,064 | 17,183 | 5,119 | 4,332 |
+| \`list\` | 67,327 | 23,172 | 20,695 | 15,570 | 4,399 | 3,469 |
+| \`listbox\` | 94,025 | 31,049 | 27,458 | 16,516 | 4,667 | 3,600 |
+| \`loader\` | 31,541 | 11,772 | 10,633 | 2,875 | 939 | 771 |
+| \`log\` | 89,716 | 30,000 | 26,936 | 40,360 | 12,454 | 10,448 |
+| \`map\` | 159,903 | 47,424 | 40,889 | 63,298 | 15,415 | 11,963 |
+| \`markdown\` | 140,272 | 47,304 | 41,923 | 62,608 | 19,541 | 16,199 |
+| \`megamenu\` | 65,596 | 23,361 | 20,888 | 8,742 | 2,371 | 1,769 |
+| \`menu\` | 106,453 | 34,786 | 31,008 | 32,752 | 8,411 | 6,761 |
+| \`meter\` | 38,888 | 14,279 | 12,919 | 6,365 | 1,816 | 1,557 |
+| \`motion-toggle\` | 30,535 | 11,627 | 10,438 | 1,539 | 546 | 512 |
+| \`navigation\` | 37,912 | 13,969 | 12,527 | 3,497 | 1,155 | 924 |
+| \`notifications\` | 64,044 | 21,590 | 19,419 | 18,695 | 5,071 | 3,984 |
+| \`number-input\` | 61,522 | 20,549 | 18,505 | 13,492 | 3,631 | 2,668 |
+| \`object-inspector\` | 124,337 | 41,341 | 36,615 | 37,188 | 10,577 | 8,534 |
+| \`option\` | 31,105 | 11,300 | 10,179 | 4,446 | 1,156 | 992 |
+| \`outline\` | 41,449 | 14,805 | 13,355 | 10,620 | 3,116 | 2,475 |
+| \`pagination\` | 154,678 | 49,078 | 42,971 | 47,274 | 12,176 | 9,619 |
+| \`pin-input\` | 52,802 | 18,248 | 16,422 | 7,187 | 2,355 | 1,731 |
+| \`popover\` | 69,330 | 24,446 | 21,873 | 6,480 | 1,829 | 1,373 |
+| \`progress\` | 33,407 | 12,448 | 11,245 | 3,075 | 943 | 797 |
+| \`qr-code\` | 47,683 | 18,136 | 16,365 | 16,927 | 6,237 | 5,334 |
+| \`quote\` | 27,206 | 10,427 | 9,378 | 1,205 | 495 | 496 |
+| \`radio\` | 47,265 | 16,015 | 14,390 | 3,799 | 1,216 | 852 |
+| \`rating\` | 56,091 | 19,232 | 17,300 | 8,272 | 2,510 | 1,993 |
+| \`scatter-chart\` | 110,294 | 37,894 | 33,785 | 20,721 | 6,411 | 5,239 |
+| \`scroll-area\` | 35,923 | 12,852 | 11,564 | 9,027 | 2,675 | 2,209 |
+| \`select\` | 132,912 | 43,503 | 38,266 | 27,302 | 7,298 | 5,575 |
+| \`shortcut-overlay\` | 54,311 | 19,106 | 17,122 | 11,631 | 3,434 | 2,677 |
+| \`skeleton\` | 26,984 | 10,208 | 9,193 | 954 | 352 | 246 |
+| \`skip-link\` | 28,768 | 10,918 | 9,827 | 1,334 | 493 | 392 |
+| \`slider\` | 59,094 | 19,779 | 17,836 | 13,667 | 3,858 | 3,048 |
+| \`sparkline\` | 53,331 | 19,123 | 17,302 | 5,968 | 2,066 | 1,678 |
+| \`spatial-bar-chart\` | 125,627 | 43,814 | 39,016 | 28,914 | 9,746 | 8,298 |
+| \`spatial-heatmap\` | 128,676 | 43,336 | 38,577 | 32,104 | 9,605 | 7,954 |
+| \`spatial-ribbon-chart\` | 116,031 | 40,304 | 35,899 | 21,327 | 7,072 | 5,907 |
+| \`spatial-scatter-chart\` | 114,102 | 39,466 | 35,227 | 19,459 | 6,296 | 5,157 |
+| \`spatial-surface-chart\` | 117,034 | 40,689 | 36,273 | 22,328 | 7,461 | 6,241 |
+| \`spatial-treemap\` | 118,137 | 41,302 | 36,776 | 21,742 | 7,347 | 6,067 |
+| \`speed-dial\` | 74,018 | 26,161 | 23,417 | 11,107 | 2,926 | 2,328 |
+| \`splitter\` | 49,870 | 17,059 | 15,405 | 15,021 | 3,922 | 3,170 |
+| \`stat\` | 30,366 | 11,365 | 10,271 | 2,291 | 745 | 694 |
+| \`steps\` | 60,474 | 20,856 | 18,679 | 14,540 | 4,049 | 3,252 |
+| \`switch\` | 44,568 | 15,309 | 13,740 | 1,733 | 653 | 542 |
+| \`table\` | 125,700 | 38,956 | 34,236 | 45,249 | 12,359 | 9,989 |
+| \`tabs\` | 51,456 | 17,513 | 15,743 | 10,607 | 2,836 | 2,298 |
+| \`tag\` | 47,412 | 17,109 | 15,423 | 8,490 | 2,490 | 1,974 |
+| \`terminal\` | 141,582 | 44,590 | 39,262 | 54,204 | 13,434 | 10,874 |
+| \`textarea\` | 59,949 | 20,470 | 18,372 | 5,642 | 1,666 | 1,217 |
+| \`time-input\` | 187,028 | 58,028 | 50,470 | 50,345 | 12,609 | 10,323 |
+| \`time-picker\` | 117,065 | 37,039 | 32,669 | 35,289 | 9,369 | 7,484 |
+| \`timeline\` | 36,581 | 13,679 | 12,356 | 4,128 | 1,205 | 906 |
+| \`toast\` | 74,603 | 25,177 | 22,460 | 20,050 | 5,568 | 4,542 |
+| \`toggle\` | 51,029 | 16,915 | 15,259 | 6,038 | 1,789 | 1,548 |
+| \`toolbar\` | 37,383 | 13,551 | 12,196 | 1,406 | 490 | 449 |
+| \`tooltip\` | 65,000 | 22,983 | 20,705 | 8,862 | 2,438 | 1,950 |
+| \`tour\` | 90,755 | 30,739 | 27,452 | 21,104 | 5,648 | 4,508 |
+| \`tree\` | 72,738 | 24,341 | 21,759 | 17,539 | 4,881 | 3,930 |
+| \`trend\` | 35,034 | 13,355 | 12,049 | 3,577 | 1,125 | 906 |
+| \`video\` | 152,045 | 46,722 | 41,220 | 69,404 | 17,301 | 14,061 |
+| \`video-playlist\` | 137,298 | 43,792 | 38,789 | 45,878 | 11,720 | 9,618 |
+| \`virtual-list\` | 72,396 | 23,976 | 21,619 | 25,472 | 7,513 | 6,275 |
 
 ### Styled tier
 
@@ -5420,128 +5522,128 @@ 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\` | 39,678 | 14,026 | 12,613 | 8,780 | 2,376 | 2,037 |
-| \`announcement\` | 45,475 | 15,743 | 14,214 | 9,282 | 2,440 | 1,910 |
-| \`app-header\` | 41,555 | 14,431 | 12,987 | 11,031 | 2,940 | 2,325 |
-| \`area-chart\` | 119,927 | 40,401 | 36,044 | 24,362 | 6,676 | 5,565 |
-| \`aura\` | 63,103 | 21,347 | 19,098 | 31,766 | 9,602 | 7,944 |
-| \`avatar\` | 38,443 | 14,011 | 12,676 | 6,972 | 1,963 | 1,531 |
-| \`badge\` | 37,184 | 13,274 | 11,984 | 8,449 | 2,108 | 1,757 |
-| \`bar-chart\` | 134,784 | 44,109 | 39,285 | 38,681 | 10,256 | 8,487 |
-| \`blockquote\` | 30,479 | 11,331 | 10,208 | 4,606 | 1,400 | 1,169 |
-| \`breadcrumbs\` | 48,377 | 16,720 | 15,114 | 14,770 | 3,725 | 3,093 |
-| \`button\` | 47,115 | 15,724 | 14,141 | 11,967 | 3,024 | 2,346 |
-| \`button-group\` | 35,644 | 12,486 | 11,233 | 8,401 | 2,139 | 1,606 |
-| \`callout\` | 43,304 | 15,881 | 14,320 | 6,655 | 1,905 | 1,413 |
-| \`canvas\` | 210,936 | 60,969 | 53,269 | 116,183 | 30,097 | 25,167 |
-| \`card\` | 31,874 | 11,466 | 10,314 | 5,972 | 1,592 | 1,329 |
-| \`carousel\` | 59,164 | 18,892 | 17,095 | 25,777 | 6,040 | 4,870 |
-| \`chat\` | 178,459 | 53,930 | 47,650 | 78,459 | 19,359 | 15,986 |
-| \`checkbox\` | 51,825 | 16,807 | 15,118 | 9,638 | 2,472 | 1,982 |
-| \`checkbox-group\` | 59,758 | 18,815 | 16,833 | 15,584 | 3,976 | 3,135 |
-| \`code\` | 25,303 | 9,733 | 8,755 | 972 | 359 | 274 |
-| \`code-block\` | 139,027 | 41,788 | 37,181 | 66,699 | 15,892 | 12,996 |
-| \`code-editor\` | 128,975 | 35,292 | 31,301 | 65,232 | 13,575 | 11,129 |
-| \`code-input\` | 80,437 | 26,742 | 23,932 | 22,608 | 6,924 | 5,628 |
-| \`color-input\` | 191,137 | 53,288 | 46,757 | 98,726 | 20,690 | 17,190 |
-| \`color-picker\` | 146,933 | 40,248 | 35,692 | 85,332 | 18,429 | 15,185 |
-| \`combobox\` | 176,094 | 53,486 | 47,179 | 60,821 | 14,743 | 12,011 |
-| \`command\` | 153,126 | 46,327 | 40,626 | 61,590 | 15,563 | 12,811 |
-| \`copy-button\` | 101,964 | 32,118 | 28,706 | 33,613 | 7,620 | 6,212 |
-| \`data-table\` | 259,981 | 75,362 | 64,937 | 130,393 | 32,297 | 26,011 |
-| \`date-input\` | 167,958 | 49,546 | 43,964 | 60,003 | 13,201 | 10,838 |
-| \`date-picker\` | 74,694 | 24,028 | 21,621 | 28,738 | 7,061 | 5,694 |
-| \`description-list\` | 30,000 | 10,907 | 9,804 | 4,500 | 1,218 | 814 |
-| \`device-screen\` | 140,815 | 41,618 | 36,835 | 64,014 | 14,630 | 11,741 |
-| \`dialog\` | 48,335 | 16,369 | 14,717 | 11,824 | 3,146 | 2,430 |
-| \`divider\` | 29,801 | 11,012 | 9,904 | 3,693 | 1,121 | 778 |
-| \`donut-chart\` | 115,062 | 38,018 | 34,022 | 26,449 | 7,032 | 5,769 |
-| \`drawer\` | 52,989 | 17,874 | 16,052 | 13,688 | 3,665 | 3,007 |
-| \`drilldown\` | 52,472 | 17,497 | 15,760 | 15,370 | 3,969 | 3,095 |
-| \`editor\` | 218,148 | 59,655 | 51,982 | 124,249 | 26,533 | 21,869 |
-| \`empty\` | 29,893 | 11,194 | 10,054 | 3,263 | 1,075 | 742 |
-| \`file-input\` | 73,885 | 23,775 | 21,396 | 24,632 | 6,450 | 5,361 |
-| \`filter-input\` | 133,823 | 42,981 | 38,227 | 40,024 | 10,699 | 8,833 |
-| \`find\` | 98,997 | 28,719 | 25,599 | 43,394 | 8,952 | 7,156 |
-| \`flex\` | 29,891 | 10,601 | 9,557 | 4,759 | 995 | 761 |
-| \`format-date\` | 35,026 | 12,935 | 11,667 | 4,696 | 1,344 | 1,363 |
-| \`graph\` | 172,724 | 49,905 | 43,573 | 66,004 | 15,117 | 12,195 |
-| \`grid\` | 31,341 | 11,281 | 10,180 | 5,652 | 1,448 | 1,248 |
-| \`heatmap\` | 122,486 | 40,168 | 35,761 | 29,126 | 7,733 | 6,286 |
-| \`icon\` | 100,618 | 33,877 | 29,111 | 71,110 | 23,642 | 19,046 |
-| \`icon-button\` | 50,475 | 15,918 | 14,307 | 15,330 | 3,209 | 2,575 |
-| \`image\` | 31,337 | 11,457 | 10,312 | 5,199 | 1,527 | 1,202 |
-| \`input\` | 77,104 | 25,555 | 22,763 | 19,492 | 5,862 | 4,593 |
-| \`kbd\` | 34,961 | 12,826 | 11,501 | 5,812 | 1,726 | 1,290 |
-| \`legend\` | 48,795 | 16,773 | 15,104 | 7,864 | 2,128 | 1,587 |
-| \`lightbox\` | 66,746 | 21,652 | 19,450 | 23,116 | 5,919 | 4,677 |
-| \`line-chart\` | 126,099 | 41,803 | 37,288 | 29,925 | 7,870 | 6,481 |
-| \`list\` | 72,482 | 24,246 | 21,714 | 21,551 | 5,853 | 4,700 |
-| \`listbox\` | 109,491 | 35,457 | 31,341 | 29,227 | 8,324 | 6,761 |
-| \`loader\` | 33,789 | 12,336 | 11,181 | 5,648 | 1,654 | 1,328 |
-| \`log\` | 105,740 | 32,837 | 29,498 | 56,941 | 15,608 | 13,105 |
-| \`map\` | 202,379 | 53,634 | 46,513 | 105,489 | 21,756 | 17,582 |
-| \`markdown\` | 169,758 | 51,532 | 45,667 | 92,864 | 24,163 | 20,182 |
-| \`megamenu\` | 69,758 | 24,236 | 21,681 | 13,752 | 3,527 | 2,837 |
-| \`menu\` | 116,934 | 36,590 | 32,617 | 44,558 | 10,740 | 8,812 |
-| \`meter\` | 46,277 | 15,618 | 14,133 | 14,605 | 3,482 | 2,901 |
-| \`motion-toggle\` | 31,514 | 11,912 | 10,676 | 3,040 | 963 | 680 |
-| \`navigation\` | 40,961 | 14,625 | 13,102 | 7,071 | 1,943 | 1,402 |
-| \`notifications\` | 76,232 | 23,678 | 21,405 | 31,722 | 7,598 | 6,204 |
-| \`number-input\` | 66,171 | 21,601 | 19,407 | 18,507 | 4,804 | 3,700 |
-| \`object-inspector\` | 141,639 | 43,908 | 38,934 | 55,250 | 13,574 | 10,993 |
-| \`option\` | 33,689 | 12,080 | 10,905 | 7,569 | 2,121 | 1,660 |
-| \`orb\` | 40,417 | 15,079 | 13,628 | 10,006 | 3,685 | 3,128 |
-| \`outline\` | 42,409 | 14,904 | 13,440 | 12,101 | 3,384 | 2,716 |
-| \`pagination\` | 182,295 | 55,484 | 48,571 | 72,319 | 17,892 | 14,557 |
-| \`pin-input\` | 55,807 | 19,003 | 17,070 | 10,558 | 3,275 | 2,479 |
-| \`popover\` | 72,347 | 25,104 | 22,477 | 10,347 | 2,744 | 2,191 |
-| \`progress\` | 39,966 | 13,911 | 12,608 | 10,155 | 2,550 | 2,207 |
-| \`qr-code\` | 48,744 | 18,461 | 16,720 | 18,511 | 6,731 | 5,714 |
-| \`quote\` | 27,223 | 10,456 | 9,389 | 1,746 | 669 | 460 |
-| \`radio\` | 54,658 | 17,359 | 15,577 | 11,578 | 2,706 | 2,124 |
-| \`rating\` | 59,104 | 20,073 | 18,040 | 11,964 | 3,649 | 2,843 |
-| \`sandbox\` | 209,571 | 60,920 | 52,511 | 145,326 | 38,977 | 31,754 |
-| \`scatter-chart\` | 120,519 | 40,082 | 35,752 | 31,470 | 8,851 | 7,301 |
-| \`scroll-area\` | 43,327 | 14,070 | 12,662 | 16,953 | 4,081 | 3,315 |
-| \`select\` | 153,149 | 48,687 | 42,791 | 44,784 | 11,782 | 9,535 |
-| \`shortcut-overlay\` | 60,880 | 20,448 | 18,408 | 19,196 | 5,144 | 4,223 |
-| \`skeleton\` | 30,425 | 11,121 | 10,027 | 4,751 | 1,342 | 1,115 |
-| \`skip-link\` | 29,685 | 11,238 | 10,067 | 2,774 | 947 | 705 |
-| \`slider\` | 73,692 | 21,950 | 19,776 | 28,627 | 6,230 | 5,062 |
-| \`sparkline\` | 58,249 | 20,284 | 18,323 | 11,404 | 3,433 | 2,752 |
-| \`spatial-bar-chart\` | 137,375 | 46,202 | 40,962 | 41,171 | 12,315 | 10,284 |
-| \`spatial-heatmap\` | 139,271 | 45,587 | 40,536 | 43,224 | 12,014 | 9,963 |
-| \`spatial-ribbon-chart\` | 125,800 | 42,368 | 37,750 | 31,619 | 9,365 | 7,725 |
-| \`spatial-scatter-chart\` | 123,929 | 41,483 | 36,959 | 29,802 | 8,519 | 6,992 |
-| \`spatial-surface-chart\` | 126,323 | 42,659 | 38,063 | 32,138 | 9,619 | 8,006 |
-| \`spatial-treemap\` | 128,010 | 43,404 | 38,659 | 32,130 | 9,690 | 7,943 |
-| \`speed-dial\` | 80,178 | 27,325 | 24,457 | 17,946 | 4,319 | 3,492 |
-| \`splitter\` | 54,702 | 17,726 | 16,030 | 20,521 | 4,808 | 4,062 |
-| \`stat\` | 32,726 | 11,914 | 10,760 | 5,183 | 1,468 | 1,077 |
-| \`steps\` | 73,366 | 23,209 | 20,805 | 28,202 | 6,758 | 5,505 |
-| \`strands\` | 67,865 | 24,813 | 22,108 | 38,808 | 13,774 | 11,860 |
-| \`switch\` | 48,654 | 16,303 | 14,596 | 6,183 | 1,809 | 1,377 |
-| \`table\` | 142,528 | 41,639 | 36,642 | 62,907 | 15,457 | 12,706 |
-| \`tabs\` | 61,069 | 19,404 | 17,442 | 20,758 | 4,901 | 4,117 |
-| \`tag\` | 51,398 | 18,022 | 16,245 | 13,000 | 3,587 | 2,817 |
-| \`terminal\` | 171,770 | 48,670 | 42,921 | 84,241 | 17,829 | 14,578 |
-| \`text\` | 32,865 | 11,351 | 10,175 | 7,176 | 1,452 | 985 |
-| \`textarea\` | 75,307 | 24,786 | 22,291 | 18,259 | 5,241 | 4,336 |
-| \`time-input\` | 222,150 | 65,393 | 56,878 | 82,919 | 19,246 | 15,822 |
-| \`time-picker\` | 139,978 | 42,612 | 37,476 | 55,712 | 14,290 | 11,565 |
-| \`timeline\` | 42,871 | 14,945 | 13,474 | 10,948 | 2,677 | 2,170 |
-| \`toast\` | 87,746 | 27,513 | 24,671 | 33,969 | 8,403 | 6,939 |
-| \`toggle\` | 55,526 | 18,006 | 16,209 | 10,915 | 3,030 | 2,296 |
-| \`toolbar\` | 41,030 | 14,434 | 13,023 | 4,026 | 967 | 647 |
-| \`tooltip\` | 67,354 | 23,589 | 21,181 | 11,743 | 3,219 | 2,622 |
-| \`tour\` | 99,755 | 32,398 | 28,884 | 30,558 | 7,571 | 6,163 |
-| \`tree\` | 81,248 | 26,172 | 23,429 | 26,549 | 6,905 | 5,641 |
-| \`trend\` | 36,411 | 13,732 | 12,419 | 5,476 | 1,647 | 1,269 |
-| \`video\` | 171,773 | 50,073 | 44,128 | 90,123 | 20,796 | 17,457 |
-| \`video-playlist\` | 152,398 | 46,356 | 41,061 | 62,152 | 14,701 | 12,213 |
-| \`virtual-list\` | 73,128 | 24,127 | 21,693 | 27,036 | 7,888 | 6,609 |
-| \`voice-level\` | 37,864 | 13,918 | 12,547 | 7,531 | 2,494 | 2,082 |
+| \`accordion\` | 40,217 | 14,216 | 12,771 | 8,788 | 2,386 | 1,910 |
+| \`announcement\` | 46,117 | 15,939 | 14,385 | 9,382 | 2,454 | 1,950 |
+| \`app-header\` | 42,621 | 14,828 | 13,353 | 11,246 | 3,024 | 2,448 |
+| \`area-chart\` | 120,454 | 40,557 | 36,161 | 24,355 | 6,665 | 5,614 |
+| \`aura\` | 64,184 | 21,751 | 19,470 | 32,004 | 9,687 | 8,017 |
+| \`avatar\` | 38,970 | 14,169 | 12,846 | 6,964 | 1,979 | 1,659 |
+| \`badge\` | 37,710 | 13,446 | 12,155 | 8,435 | 2,132 | 1,876 |
+| \`bar-chart\` | 135,311 | 44,252 | 39,481 | 38,673 | 10,242 | 8,532 |
+| \`blockquote\` | 31,018 | 11,503 | 10,350 | 4,608 | 1,410 | 1,136 |
+| \`breadcrumbs\` | 49,213 | 16,960 | 15,319 | 14,918 | 3,776 | 3,039 |
+| \`button\` | 49,256 | 16,177 | 14,575 | 13,332 | 3,195 | 2,531 |
+| \`button-group\` | 36,163 | 12,635 | 11,405 | 8,378 | 2,144 | 1,793 |
+| \`callout\` | 43,845 | 16,046 | 14,450 | 6,648 | 1,920 | 1,502 |
+| \`canvas\` | 214,020 | 61,606 | 53,821 | 120,476 | 30,721 | 25,734 |
+| \`card\` | 32,401 | 11,628 | 10,485 | 5,958 | 1,608 | 1,352 |
+| \`carousel\` | 59,895 | 19,118 | 17,343 | 25,946 | 6,076 | 4,880 |
+| \`chat\` | 179,720 | 54,377 | 48,013 | 79,359 | 19,649 | 16,250 |
+| \`checkbox\` | 52,190 | 16,959 | 15,251 | 9,617 | 2,489 | 1,903 |
+| \`checkbox-group\` | 60,104 | 18,965 | 16,997 | 15,554 | 3,970 | 3,083 |
+| \`code\` | 25,842 | 9,897 | 8,924 | 972 | 368 | 390 |
+| \`code-block\` | 141,674 | 42,399 | 37,629 | 68,566 | 16,128 | 13,309 |
+| \`code-editor\` | 132,746 | 35,888 | 31,805 | 68,302 | 13,907 | 11,401 |
+| \`code-input\` | 80,798 | 26,901 | 24,041 | 22,581 | 6,880 | 5,695 |
+| \`color-input\` | 193,253 | 53,854 | 47,239 | 100,452 | 21,025 | 17,504 |
+| \`color-picker\` | 149,088 | 40,760 | 36,078 | 87,075 | 18,841 | 15,451 |
+| \`combobox\` | 177,485 | 54,010 | 47,539 | 61,349 | 14,871 | 12,173 |
+| \`command\` | 154,679 | 46,715 | 40,908 | 61,962 | 15,656 | 12,897 |
+| \`copy-button\` | 104,615 | 32,690 | 29,128 | 35,479 | 7,882 | 6,424 |
+| \`data-table\` | 266,891 | 76,830 | 66,082 | 136,619 | 33,428 | 27,101 |
+| \`date-input\` | 168,543 | 49,732 | 44,166 | 60,091 | 13,240 | 11,027 |
+| \`date-picker\` | 75,396 | 24,195 | 21,787 | 28,847 | 7,090 | 5,809 |
+| \`description-list\` | 30,533 | 11,064 | 9,963 | 4,493 | 1,256 | 1,060 |
+| \`device-screen\` | 143,681 | 42,194 | 37,317 | 67,336 | 15,072 | 12,262 |
+| \`dialog\` | 48,868 | 16,562 | 14,903 | 11,811 | 3,140 | 2,663 |
+| \`divider\` | 30,340 | 11,173 | 10,050 | 3,691 | 1,114 | 964 |
+| \`donut-chart\` | 115,589 | 38,201 | 34,101 | 26,438 | 7,005 | 5,785 |
+| \`drawer\` | 53,528 | 18,047 | 16,243 | 13,686 | 3,698 | 3,113 |
+| \`drilldown\` | 53,685 | 17,818 | 16,019 | 15,727 | 4,025 | 3,319 |
+| \`editor\` | 222,769 | 60,471 | 52,617 | 127,752 | 26,929 | 22,221 |
+| \`empty\` | 30,432 | 11,353 | 10,212 | 3,263 | 1,091 | 867 |
+| \`file-input\` | 74,781 | 24,151 | 21,682 | 24,828 | 6,562 | 5,377 |
+| \`filter-input\` | 134,913 | 43,377 | 38,543 | 40,410 | 10,818 | 8,881 |
+| \`find\` | 102,866 | 29,322 | 26,134 | 46,485 | 9,268 | 7,463 |
+| \`flex\` | 30,430 | 10,756 | 9,677 | 4,761 | 1,034 | 824 |
+| \`format-date\` | 35,565 | 13,094 | 11,804 | 4,698 | 1,346 | 1,226 |
+| \`graph\` | 175,865 | 50,597 | 44,134 | 69,440 | 15,619 | 12,682 |
+| \`grid\` | 31,880 | 11,439 | 10,342 | 5,650 | 1,434 | 1,241 |
+| \`heatmap\` | 123,013 | 40,319 | 35,980 | 29,119 | 7,761 | 6,452 |
+| \`icon\` | 110,428 | 36,672 | 31,583 | 80,371 | 26,384 | 21,471 |
+| \`icon-button\` | 53,001 | 16,399 | 14,761 | 17,079 | 3,442 | 2,694 |
+| \`image\` | 31,876 | 11,613 | 10,463 | 5,207 | 1,567 | 1,266 |
+| \`input\` | 77,465 | 25,726 | 22,933 | 19,462 | 5,843 | 4,724 |
+| \`kbd\` | 36,435 | 13,329 | 11,949 | 6,116 | 1,823 | 1,465 |
+| \`legend\` | 49,334 | 16,920 | 15,249 | 7,866 | 2,167 | 1,765 |
+| \`lightbox\` | 67,279 | 21,825 | 19,596 | 23,114 | 5,887 | 4,672 |
+| \`line-chart\` | 126,626 | 41,929 | 37,424 | 29,914 | 7,842 | 6,568 |
+| \`list\` | 73,668 | 24,659 | 22,019 | 21,897 | 5,912 | 4,774 |
+| \`listbox\` | 110,173 | 35,677 | 31,525 | 29,372 | 8,308 | 6,795 |
+| \`loader\` | 34,424 | 12,530 | 11,320 | 5,740 | 1,717 | 1,429 |
+| \`log\` | 106,381 | 33,038 | 29,664 | 57,028 | 15,634 | 13,232 |
+| \`map\` | 206,709 | 54,489 | 47,086 | 110,092 | 22,335 | 18,137 |
+| \`markdown\` | 172,399 | 52,068 | 46,097 | 94,719 | 24,397 | 20,422 |
+| \`megamenu\` | 70,645 | 24,510 | 21,956 | 13,773 | 3,533 | 2,752 |
+| \`menu\` | 118,673 | 37,197 | 33,150 | 44,956 | 10,909 | 8,924 |
+| \`meter\` | 47,432 | 16,009 | 14,478 | 14,899 | 3,608 | 2,969 |
+| \`motion-toggle\` | 32,169 | 12,107 | 10,856 | 3,155 | 1,034 | 825 |
+| \`navigation\` | 41,636 | 14,818 | 13,266 | 7,206 | 1,989 | 1,611 |
+| \`notifications\` | 77,524 | 24,119 | 21,699 | 32,161 | 7,640 | 6,382 |
+| \`number-input\` | 66,501 | 21,753 | 19,564 | 18,455 | 4,805 | 3,676 |
+| \`object-inspector\` | 144,379 | 44,496 | 39,332 | 57,202 | 13,805 | 11,404 |
+| \`option\` | 34,170 | 12,241 | 11,045 | 7,503 | 2,125 | 1,789 |
+| \`orb\` | 40,942 | 15,257 | 13,794 | 9,996 | 3,686 | 3,110 |
+| \`outline\` | 47,889 | 16,157 | 14,576 | 17,042 | 4,458 | 3,598 |
+| \`pagination\` | 183,162 | 55,752 | 48,798 | 72,624 | 18,050 | 14,640 |
+| \`pin-input\` | 56,180 | 19,131 | 17,213 | 10,546 | 3,242 | 2,456 |
+| \`popover\` | 73,236 | 25,367 | 22,698 | 10,368 | 2,741 | 2,242 |
+| \`progress\` | 40,587 | 14,105 | 12,743 | 10,242 | 2,576 | 2,182 |
+| \`qr-code\` | 49,283 | 18,619 | 16,844 | 18,509 | 6,705 | 5,696 |
+| \`quote\` | 27,762 | 10,613 | 9,547 | 1,744 | 693 | 534 |
+| \`radio\` | 55,036 | 17,528 | 15,711 | 11,564 | 2,751 | 2,084 |
+| \`rating\` | 60,021 | 20,445 | 18,378 | 12,186 | 3,719 | 2,898 |
+| \`sandbox\` | 212,690 | 61,609 | 53,152 | 149,207 | 39,581 | 32,292 |
+| \`scatter-chart\` | 121,046 | 40,258 | 35,895 | 31,457 | 8,877 | 7,364 |
+| \`scroll-area\` | 43,866 | 14,232 | 12,824 | 16,953 | 4,137 | 3,337 |
+| \`select\` | 153,820 | 48,899 | 43,037 | 44,913 | 11,781 | 9,616 |
+| \`shortcut-overlay\` | 62,103 | 20,797 | 18,702 | 19,408 | 5,155 | 4,212 |
+| \`skeleton\` | 30,931 | 11,286 | 10,172 | 4,716 | 1,376 | 1,210 |
+| \`skip-link\` | 30,338 | 11,427 | 10,251 | 2,887 | 995 | 774 |
+| \`slider\` | 74,143 | 22,101 | 19,934 | 28,691 | 6,248 | 5,146 |
+| \`sparkline\` | 58,788 | 20,432 | 18,435 | 11,406 | 3,399 | 2,754 |
+| \`spatial-bar-chart\` | 137,900 | 46,373 | 41,148 | 41,162 | 12,320 | 10,436 |
+| \`spatial-heatmap\` | 139,798 | 45,725 | 40,698 | 43,210 | 12,061 | 10,052 |
+| \`spatial-ribbon-chart\` | 126,327 | 42,547 | 37,878 | 31,604 | 9,347 | 7,903 |
+| \`spatial-scatter-chart\` | 124,456 | 41,661 | 37,136 | 29,790 | 8,490 | 6,994 |
+| \`spatial-surface-chart\` | 126,850 | 42,829 | 38,275 | 32,127 | 9,621 | 8,153 |
+| \`spatial-treemap\` | 128,537 | 43,581 | 38,763 | 32,121 | 9,646 | 8,086 |
+| \`speed-dial\` | 81,060 | 27,548 | 24,682 | 18,133 | 4,355 | 3,569 |
+| \`splitter\` | 56,008 | 18,110 | 16,398 | 21,147 | 4,992 | 4,124 |
+| \`stat\` | 33,246 | 12,062 | 10,901 | 5,160 | 1,480 | 1,176 |
+| \`steps\` | 75,697 | 23,728 | 21,243 | 29,752 | 6,984 | 5,762 |
+| \`strands\` | 68,950 | 25,205 | 22,431 | 39,058 | 13,870 | 12,159 |
+| \`switch\` | 49,022 | 16,458 | 14,793 | 6,169 | 1,788 | 1,353 |
+| \`table\` | 143,467 | 41,990 | 37,054 | 63,012 | 15,518 | 12,706 |
+| \`tabs\` | 61,660 | 19,580 | 17,624 | 20,808 | 4,929 | 4,177 |
+| \`tag\` | 51,985 | 18,223 | 16,439 | 13,051 | 3,577 | 2,833 |
+| \`terminal\` | 175,850 | 49,377 | 43,545 | 88,452 | 18,375 | 14,962 |
+| \`text\` | 33,404 | 11,508 | 10,312 | 7,178 | 1,458 | 1,225 |
+| \`textarea\` | 75,690 | 24,957 | 22,384 | 18,254 | 5,256 | 4,367 |
+| \`time-input\` | 222,800 | 65,638 | 57,083 | 83,073 | 19,366 | 15,929 |
+| \`time-picker\` | 140,696 | 42,811 | 37,721 | 55,889 | 14,298 | 11,735 |
+| \`timeline\` | 43,470 | 15,146 | 13,631 | 11,014 | 2,671 | 2,337 |
+| \`toast\` | 89,991 | 28,136 | 25,122 | 35,434 | 8,547 | 7,006 |
+| \`toggle\` | 55,883 | 18,168 | 16,374 | 10,882 | 3,031 | 2,453 |
+| \`toolbar\` | 40,062 | 14,020 | 12,630 | 4,068 | 1,004 | 888 |
+| \`tooltip\` | 67,881 | 23,741 | 21,342 | 11,725 | 3,188 | 2,583 |
+| \`tour\` | 101,987 | 32,857 | 29,344 | 32,330 | 7,798 | 6,358 |
+| \`tree\` | 81,748 | 26,349 | 23,546 | 26,526 | 6,926 | 5,782 |
+| \`trend\` | 36,950 | 13,914 | 12,545 | 5,472 | 1,648 | 1,420 |
+| \`video\` | 173,841 | 50,679 | 44,784 | 91,177 | 21,114 | 17,672 |
+| \`video-playlist\` | 154,530 | 47,005 | 41,568 | 63,105 | 14,987 | 12,463 |
+| \`virtual-list\` | 74,388 | 24,483 | 22,103 | 27,449 | 8,044 | 6,717 |
+| \`voice-level\` | 38,396 | 14,077 | 12,747 | 7,526 | 2,475 | 2,154 |
 
 ## What an install adds to \`node_modules\`
 
@@ -5554,12 +5656,12 @@ without its whitespace, and the sizes count each one that way.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,430,061 | 641 | 902,790 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 26,646,684 | 826 | 2,833,950 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
-| \`@fusion.dev/helix-icons\` | 179,625 | 21 | 57,665 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 130,263 | 6 | 0 | none |
+| \`@fusion.dev/helix-core\` | 2,238,908 | 491 | 839,402 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
+| \`@fusion.dev/helix-headless\` | 23,432,287 | 1,082 | 2,941,841 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-icons\` | 202,243 | 22 | 63,839 | \`svgo\` |
+| \`@fusion.dev/helix-styles\` | 131,750 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
-| \`@fusion.dev/helix\` | 27,238,055 | 1,089 | 623,571 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix\` | 23,581,858 | 1,151 | 644,779 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -5738,7 +5840,7 @@ element.items = tabs
 \`\`\`
 
 **Bind events with \`addEventListener\`, using the event's own name.** Helix event
-names, such as \`helix-before-open\`, \`helix-before-change\`, and \`helix-select\`,
+names, such as \`helix-before-open\`, \`helix-before-change\`, and \`helix-before-select\`,
 are lowercase and hyphenated. They have no camel-case variant. Your framework's
 \`on*\` syntax needs to pass that exact name through.
 
@@ -6649,15 +6751,15 @@ title: Routing and navigation
 
 # Routing and navigation
 
-Some components navigate, such as a tree used as a sidebar, a button that opens
-another page, or a tab that is a page. Each of these should be a link. A
+Some components navigate, such as a tree used as a sidebar, a menu item that
+opens another page, or a tab that is a page. Each of these should be a link. A
 framework router does not handle a link inside a shadow root the way it handles
 its own links.
 
 ## A component that navigates renders its own anchor
 
-\`Tree.Item\` and \`Button\` both take an \`href\`. With an \`href\`, the element you
-press *is* an \`<a>\`:
+\`Tree.Item\`, \`Tab\`, and \`Menu.Item\` take an \`href\`. With an \`href\`, the element
+you press *is* an \`<a>\`:
 
 \`\`\`html
 <helix-tree-item
@@ -6746,9 +6848,11 @@ changes the structure of the markup as well as adding an attribute. Without an
 \`href\`, nothing moves. The wrapper stays the \`treeitem\` and contains its group,
 the same way an \`<li>\` contains a \`<ul>\`.
 
-Tabs have no equivalent published pattern. Web Awesome has the same problem. Its
-answer is to drop the anchor and navigate in JavaScript. That works, and you
-lose every item in the list above.
+A tab with an \`href\` renders \`role="tab"\` on the \`<a>\` itself, so a press,
+Enter, and the browser's own link gestures follow it. It sends \`helix-before-select\`
+first, and canceling that keeps the browser from following, so a client-side
+router can follow it instead. Web Awesome drops the anchor and navigates in
+JavaScript, which loses every item in the list above.
 
 ## Use client-side routing with real anchors
 
@@ -6809,9 +6913,14 @@ That is expected.
 
 | Component | Notes |
 |---|---|
-| \`Button\` | Renders an \`<a>\` styled as a button. |
 | \`Tree.Item\` | Changes the ARIA shape, as above. A linked branch navigates from its row and opens from its chevron. |
 | \`Menu.Item\` | The row becomes the anchor and carries \`menuitem\`. Takes \`target\`, \`rel\` and \`download\`. |
+| \`Tab\` | The tab becomes the anchor and carries \`tab\`. Takes \`target\` and \`rel\`. \`helix-before-select\` comes first, and canceling it keeps the browser from following. |
+
+\`Button\` never renders an anchor, because a router renders its own \`<a>\` and
+cannot render one inside the button's shadow root. For a link that looks like a
+button, put the \`data-button\` recipe on your own anchor, such as
+\`<Link data-button="solid" href="/pricing">\`, which draws the same control.
 
 Other components that should navigate do not take an \`href\` yet. To make one
 navigate, slot a link into it. \`Tree.Item\` follows a slotted anchor when you
@@ -6847,8 +6956,8 @@ it cannot work here.
 
 No arrangement of the markup meets both of these constraints.
 
-**In a command palette, navigate from the \`helix-select\` event.** Listen for
-\`helix-select\` on \`helix-command\` and call your router. A palette entry is a
+**In a command palette, navigate from the \`helix-before-select\` event.** Listen for
+\`helix-before-select\` on \`helix-command\` and call your router. A palette entry is a
 command, and "go to Settings" is a command that navigates. Command palettes in
 other applications work the same way. You lose the gestures that only a real
 anchor has:
@@ -7041,7 +7150,7 @@ preview, and \`helix-caret\` from it fills the status bar's position. A wrapper
 around CodeMirror:
 
 \`\`\`ts
-import { HelixBeforeEditEvent } from '@fusion.dev/helix-core'
+import { HelixBeforeEditEvent } from '@fusion.dev/helix/sandbox/events'
 import { EditorView, basicSetup } from 'codemirror'
 
 class CodeEditor extends HTMLElement {
@@ -9795,7 +9904,7 @@ casing must match. Outside React, use
 
 **Lifecycle events do not bubble. Coordination events do.**
 \`helix-before-open\` and \`helix-before-close\` reach the element and stop there,
-so a menu closing inside a dialog does not close the dialog. \`helix-select\`,
+so a menu closing inside a dialog does not close the dialog. \`helix-before-select\`,
 \`helix-before-change\`, and \`helix-dismiss\` cross shadow boundaries, so you can
 listen for them on a container. If a listener on a wrapper receives nothing, the
 event is a lifecycle event. Put the listener on the element.
@@ -9952,12 +10061,37 @@ The bug is [facebook/react#35446](https://github.com/facebook/react/issues/35446
 and it is still open. The elements work around it for you.
 
 Every Helix element binds the handler itself, just before it dispatches any
-event, using the function React already holds for it. We measured this in
-Chrome against React 19.2.8. On a hydrated page, the first event reaches the
-handler. After React binds its own listener, no event is delivered twice.
+event, using the function React already holds for it. On a hydrated page, the
+first event reaches the handler. After React binds its own listener, no event
+is delivered twice.
 
 You do not need to do anything, and nothing changes when React fixes the bug.
 
+We measured this in Chromium against React 19.3.1 on October 25, 2026. Each
+version below rendered a page with \`renderToString\` and hydrated it with
+\`hydrateRoot\`:
+
+| React | Bug present | Helix handles it |
+| --- | --- | --- |
+| 19.0.9 | Yes | Yes |
+| 19.2.9 | Yes | Yes |
+| 19.3.1 | Yes | Yes |
+| 19.3.0 canary of October 23, 2026 | Yes | Yes |
+| 18.3.1 | Yes | The first event only |
+
+Helix supports React 19. React 18 binds no \`on\` prop on a custom element at
+all. Helix binds the first handler, but each render that passes a new function
+adds another listener, so a handler runs once for every render it has been
+through.
+
+In a development build, the page logs an error when React has a root and no
+Helix element finds the props React holds for it. This means the installed
+React stores its props under a key Helix does not read, and every \`onhelix-*\`
+handler on a server-rendered page is dead. Pin React to a version in the table,
+and open an issue at
+[github.com/project-fusion/fusion](https://github.com/project-fusion/fusion/issues)
+that names the version you installed.
+
 React's own events work when they bubble. \`onClick\` on a \`<helix-button>\` goes
 through React's synthetic event system, which hydration sets up.
 
@@ -9979,8 +10113,8 @@ written.
 - \`onhelix-sample-start\` reaches \`helix-sample-start\`. ✅
 - \`onHelixOpen\` binds an event called \`HelixOpen\`, which is never dispatched. ❌
 
-The number of hyphens does not matter. We measured this in Chrome against React
-19.2.8.
+The number of hyphens does not matter. We measured this in Chromium against
+React 19.3.1.
 
 ## Register the elements in one client component
 
@@ -10486,7 +10620,13 @@ npx playwright install --with-deps chromium
 
 Capture runs in Playwright, which you install beside the command line. The
 rest of \`helix\` needs no browser, so Playwright is an optional peer, and
-\`helix visual test\` names it when it is missing.
+\`helix visual test\` names it when it is missing. A config in TypeScript needs
+Node 22.18 or later. On an older Node, write it as \`visual.config.mjs\`.
+
+**On macOS and Windows, a run skips until you choose where baselines are taken.**
+\`test\` and \`update\` say so, compare nothing, and exit 0, because text draws
+differently on each platform. Take baselines on Linux, or set \`platform: 'any'\`
+to compare on the machine in front of you.
 
 ## Commands
 
@@ -10517,6 +10657,38 @@ Each run ends with one line that says what it compared and what it skipped.
 \`helix --json visual …\` prints one JSON document on stdout and moves the
 sentences to stderr.
 
+## Picture a site
+
+Picture a production build, because a dev server draws its own overlays, and they
+differ from run to run. \`visual.config.ts\`, for a Next.js site:
+
+\`\`\`ts
+import { defineConfig } from '@fusion.dev/helix-cli/visual'
+
+export default defineConfig({
+  sources: [
+    {
+      baselines: 'visual/baselines',
+      kind: 'server',
+      name: 'site',
+      routes: ['/', '/pricing', { name: 'not-found', path: '/nope', status: 404 }],
+      start: 'npm run start -- --port 3100',
+      url: 'http://localhost:3100',
+    },
+  ],
+})
+\`\`\`
+
+\`\`\`sh
+npm run build
+npx helix visual update
+\`\`\`
+
+\`update\` writes the baselines and the fingerprint, and its report shows each
+picture it wrote. Look at them, commit them, and run \`helix visual test\` from then
+on. Any page that answers 400 or above fails the entry, unless its route names that
+\`status\`.
+
 ## The config
 
 \`visual.config.ts\`, in the directory you run \`helix visual\` from:
@@ -10553,9 +10725,28 @@ export default defineConfig({
   width, and dark when you give none. Each baseline is written beside its
   entry as \`<stem>.<name>.png\`.
 - **\`serve\`** is URL paths served from disk, relative to the config.
+- **\`baselines\`** is, on a server source, the directory its baselines are written
+  in, relative to the config.
+- **\`platform\`** is where baselines are taken and compared: \`linux\` unless you set
+  \`any\`.
+- **\`network\`** is what a page may reach. \`origin\`, the default, refuses every
+  request to another host and names each host in the log and in \`run.json\`.
+  \`{ allow: ['tiles.example.com'] }\` lets those hosts through, and \`open\` lets every
+  host through.
+- **\`mask\`** is selectors whose elements are painted over in every picture, for
+  what changes on its own, such as a clock. A mask paints over the element's box and
+  anything drawn on top of it. The run names a mask that matches nothing on a page,
+  or only elements with no box.
+- **\`style\`** is a stylesheet applied while each picture is taken, to hold still
+  what \`mask\` cannot.
+- **\`settle.selector\`** names what a page matches once it has drawn what it draws
+  late, such as a map's tiles. The entry fails when nothing matches within
+  \`settle.timeout\`, 30 seconds unless you set it.
 - **\`settle.readyProperty\`** names a property your elements carry holding a
   promise that resolves once they have rendered. The run awaits it before each
-  shot.
+  shot, for 5 seconds, and then names the tags still waiting.
+- **\`settle.elements\`** limits the custom elements a run waits for to one tag
+  prefix, for a framework that writes hyphenated tags it never defines.
 - **\`aria\`** keeps each entry's accessibility snapshot beside its baselines
   and compares it as text, so a lost label fails even when no pixel moved.
 - **\`checks\`** adds judgments that need no baseline: \`code\` fails a code block