@fusion.dev/helix-docs 0.186.0 → 0.187.0

package/dist/sources.generated.js

@@ -761,6 +761,17 @@ table should not be seen, hide it visually, and the data is still there:
 >…</table>
 \`\`\`
 
+A table hidden this way takes no room on the page, however many rows it has.
+Inside an element with a \`transform\` or a \`filter\`, a long hidden table still
+lengthens that element's scrolling area. Wrap the table in a hidden \`<div>\`
+there:
+
+\`\`\`html
+<div data-hidden-visually>
+  <table id="revenue">…</table>
+</div>
+\`\`\`
+
 The table's caption becomes the chart's accessible name unless you set \`label\`.
 The caption usually has the right words already.
 
@@ -907,15 +918,20 @@ type such as \`ButtonEmphasis\` sends you somewhere else to look.
 ## Markdown and JSON for each component family
 
 \`\`\`
-/components/<family>.md
-/components/<family>.json
+https://fusion.dev/helix/components/<family>.md
+https://fusion.dev/helix/components/<family>.json
 \`\`\`
 
-These are static files. The \`.md\` file has:
+These are static files, one pair for each family. Read the family you are
+writing instead of the whole manifest. The manifest holds every family in one
+file, and it is several megabytes.
+
+The \`.md\` file has:
 
 - the family's metadata
+- a Usage block with the import lines for the family
 - every element's description and API tables
-- the examples
+- the examples, each with the import lines it needs
 
 The HTML page leaves the examples out on purpose. The page lists what a
 component can do, and the sandbox beside it shows what the component looks
@@ -923,24 +939,49 @@ like. Keeping pictures out of the reference keeps it the one place you can trust
 to be complete. An agent cannot use the sandbox, and it reads an example as
 text, so the \`.md\` file includes the examples.
 
-The \`.json\` file has the same family as structured data.
+Each example the visual check pictures links its pictures under it: wide at
+640 pixels, narrow at 390, and dark at 640, taken in the environment that
+\`examples.json\` records. Compare a render of your own to them.
+
+The \`.json\` file has the same family as structured data, and three fields an
+agent uses most:
+
+- \`usage\`, the import block for each tier
+- \`imports\` on each example, an import line for every element it writes
+- \`specifier\` and \`words\` on each element: the line that registers it, and the
+  properties \`registerWords\` translates
+
+## Import every family you write
 
-## Rules the build checks
+Each tag needs its family's entry imported. A family registers its own parts,
+so \`@fusion.dev/helix/tabs\` registers Tab and Tab Panel. A family does not
+register another family's elements that you write inside it:
 
-Code that looks right can still fail these checks:
+\`\`\`js
+import '@fusion.dev/helix/select'
+import '@fusion.dev/helix/option'
+\`\`\`
+
+Without the Option import, the options are unknown elements and the Select
+offers nothing. The same is true
+of the layout around an example: a Button inside a Flex needs both imports.
+Copy the import lines above an example together with its markup.
 
-| Rule | Check |
+## Check the code you wrote
+
+These checks run on your project, and each one prints JSON with \`--json\`:
+
+| Command | What it finds |
 |---|---|
-| A dispatched event must be declared | \`helix component --only events\` |
-| A documented part must be rendered | \`helix component\`'s \`parts\` |
-| A documented CSS hook must be read | \`helix component --only hooks\` |
-| A visual property draws from its axis | \`helix component\`'s \`axes\` |
-| A form control styles with \`:disabled\` | \`helix component --only disabled\` |
-| A component that animates supports reduced motion | \`helix component --only motion\` |
-| No component reads a primitive token | \`helix component\`'s \`tokens\` |
+| \`helix scan\` | Unknown tags, attributes, values, slots, parts, hooks, React event props, and tokens, a \`--_helix-\` primitive read, \`[disabled]\` on a form control, a selector on an attribute the element never writes back, and a tag whose entry nothing imports, each with its file and line |
+| \`helix theme audit\` | Every foreground and background pair in your theme that misses its contrast target |
+| \`initDiagnostics()\` from \`@fusion.dev/helix-diagnostics\` | The same findings on the running page, and what the library reports as it runs, such as an option nobody imported |
 
-If you generate Helix code, watch the first two rules. Breaking them produces
-output that looks like it works and is wrong.
+\`helix scan\` and \`helix theme audit\` exit 1 when they find an error and 0 when
+they find none. Run them after you write Helix code, and fix each finding
+before you finish. \`helix scan --file <path>\` reports one file's findings, and
+\`helix scan --stdin tsx\` reads a snippet from stdin. Both still read the whole
+project, so an import in another file counts.
 
 ## The index
 
@@ -968,28 +1009,57 @@ Each family page has a menu beside its title with:
 The links send the URL, because the URL stays current. A pasted copy starts to
 go stale as soon as you paste it.
 
-## Compute a theme with \`helix mcp\`
+## The Helix MCP server
 
 \`\`\`sh
-helix mcp
+helix mcp init --client claude
 \`\`\`
 
-The three sources above are fixed sets. Every tag, token, and example is
-published, and an agent can fetch it. None of them has the theme for *your*
-brand color. The input is a color, and there are infinitely many colors, so
-Helix has to compute the theme when an agent requests it.
+\`helix mcp\` runs an MCP server over stdio. It answers from the Helix packages
+your project installs, so every answer is for the version you build with, and
+each one names that package and version. \`helix mcp init\` adds the server to
+the file your client reads and keeps every other server in it:
 
-\`helix mcp\` runs an MCP server over stdio with two tools:
+| Client | File |
+|---|---|
+| \`claude\` | \`.mcp.json\` |
+| \`cursor\` | \`.cursor/mcp.json\` |
+| \`vscode\` | \`.vscode/mcp.json\` |
 
-- \`helix_audit_theme\` measures every foreground against the background it is
-  painted on. It reports each pair with its ratio and target.
-- \`helix_derive_theme\` returns the CSS.
+The server runs \`npx @fusion.dev/helix-cli mcp\`, which is the copy in your
+project. It has eight tools:
+
+| Tool | What it returns |
+|---|---|
+| \`helix_find\` | The families that answer a name, an alias, a tag, or a purpose, best first |
+| \`helix_family\` | One family's tags, properties and their unions, events and their React props, slots, parts, custom properties, words, and import lines |
+| \`helix_example\` | One example as HTML and TSX, with its stylesheet, the import lines it needs, and links to its pictures |
+| \`helix_imports\` | The import lines for a list of tags, and the closest tag to any unknown one |
+| \`helix_tokens\` | The semantic tokens, by a word in the name or description and by category |
+| \`helix_check\` | The findings \`helix scan\` reports for the files you name, or for a snippet before you write it |
+| \`helix_audit_theme\` | Every foreground and background pair a brand color derives to, with its ratio and target |
+| \`helix_derive_theme\` | The theme's CSS |
+
+Each result is structured, with an output schema, and the same JSON as text.
+A name that matches more than one family, such as \`Dropdown\`, returns an error
+listing each family. The theme tools take the same JSON that a
+\`helix.theme.json\` file holds.
+
+Each lookup is also a command, for a script or a person:
+
+\`\`\`sh
+helix api find dropdown
+helix api family select
+helix api example select
+helix api imports helix-select helix-option
+helix api tokens surface --category color
+\`\`\`
 
-Both take the same JSON that a \`helix.theme.json\` file holds.
+\`--json\` prints what the MCP tool returns.
 
-**\`helix mcp\` does not return a palette that fails its own targets**, the same
-as \`helix theme build\`. A failing palette pasted into a stylesheet is worse than
-a warning above it, and an agent does not read warnings.
+**\`helix_derive_theme\` does not return a palette that fails its own targets**,
+the same as \`helix theme build\`. A failing palette pasted into a stylesheet is
+worse than a warning above it, and an agent does not read warnings.
 
 You run \`helix mcp\` yourself, and we do not host it. A server we operated would
 be one more service between you and your own tokens. \`helix mcp\` is a
@@ -998,17 +1068,12 @@ no network requests.
 
 ## What we do not publish for agents
 
-**\`llms-full.txt\`, or any other whole-library download.** A single file with
-every page goes out of date as soon as anything changes. Each link in \`llms.txt\`
-can be cached on its own and stays current on its own.
+**\`llms-full.txt\`, or any other whole-library download of the pages.** A single
+file with every page goes out of date as soon as anything changes. Each link in
+\`llms.txt\` can be cached on its own and stays current on its own.
 
-The two sources already here cover what such a file would be for. \`llms.txt\` is
-the index, in one request, and each family's \`.md\` file is its document. Fetch
-the families you use.
-
-**A search index.** The site has a search index for people. There is nothing an
-agent can query yet. Reading \`llms.txt\` and the documents it names takes less
-work than learning most search APIs.
+\`llms.txt\` is the index, in one request, and each family's \`.md\` file is its
+document. Fetch the families you use, or ask \`helix mcp\`.
 `,
     color: `---
 description: The color roles, why Helix uses OKLCH, and how the engine meets contrast targets.
@@ -4232,7 +4297,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 248,564 | 79,270 | 67,929 |
+| Lit and \`@fusion.dev/helix-core\` | 248,564 | 79,270 | 67,889 |
 
 ## Whole packages
 
@@ -4243,12 +4308,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 247,773 | 79,121 | 67,632 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,337,367 | 373,053 | 279,948 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 247,773 | 79,121 | 67,573 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,337,367 | 373,053 | 279,925 | 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,015,564 | 520,954 | 371,957 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,015,564 | 520,954 | 371,815 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -4261,7 +4326,7 @@ shows the whole cost of using the base layer on its own.
 
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`base.css\` | 34,301 | 4,796 | 4,165 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
+| \`base.css\` | 34,352 | 4,806 | 4,174 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
 | \`elements.css\` | 19,050 | 2,860 | 2,551 | 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. |
@@ -4271,11 +4336,11 @@ shows the whole cost of using the base layer on its own.
 
 **Most of your first component is the shared runtime.** The median styled family is 17,535 bytes gzipped alone, and it adds 3,868 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 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 106 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 520,954.
+Across the 106 styled components, the smallest is \`code\` at 8,333 bytes gzipped alone, and the largest is \`data-table\` at 66,818. Every family together is 520,954.
 
-No family imports a barrel. The \`barrels\` rule in \`fusion 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 373,053 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 106 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 373,053 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 106 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 16,647 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 16,645 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -4287,12 +4352,12 @@ 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,007 | 12,442 |
+| \`button\` | **Helix** | 41,612 | 14,007 | 12,441 |
 | | Carbon | 133,058 | 20,959 | 17,685 |
 | | Material Web | 47,060 | 14,173 | 12,591 |
 | | Shoelace | 62,628 | 18,287 | 15,805 |
 | | Spectrum | 98,792 | 22,045 | 18,674 |
-| \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,518 |
+| \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,516 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Shoelace | 47,614 | 15,177 | 13,301 |
@@ -4302,22 +4367,22 @@ The table has no whole-library row. That row would compare how many components e
 | | Material Web | 34,238 | 11,510 | 10,229 |
 | | Shoelace | 52,754 | 17,698 | 15,554 |
 | | Spectrum | 155,708 | 31,899 | 26,262 |
-| \`radio\` | **Helix** | 50,349 | 15,977 | 14,206 |
+| \`radio\` | **Helix** | 50,349 | 15,977 | 14,203 |
 | | Carbon | 63,055 | 16,887 | 14,605 |
 | | Material Web | 41,044 | 13,234 | 11,757 |
 | | Shoelace | 34,865 | 12,027 | 10,559 |
 | | Spectrum | 38,685 | 10,660 | 9,370 |
-| \`switch\` | **Helix** | 43,562 | 14,637 | 13,013 |
+| \`switch\` | **Helix** | 43,562 | 14,637 | 13,010 |
 | | Carbon | 69,423 | 17,127 | 14,764 |
 | | Material Web | 50,155 | 14,577 | 12,935 |
 | | Shoelace | 37,833 | 11,814 | 10,568 |
 | | Spectrum | 62,322 | 15,059 | 13,321 |
-| \`tabs\` | **Helix** | 55,263 | 17,753 | 15,817 |
+| \`tabs\` | **Helix** | 55,263 | 17,753 | 15,835 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Shoelace | 54,573 | 17,140 | 15,068 |
 | | Spectrum | 64,875 | 18,298 | 16,283 |
-| \`tooltip\` | **Helix** | 61,420 | 21,833 | 19,367 |
+| \`tooltip\` | **Helix** | 61,420 | 21,833 | 19,366 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -4369,105 +4434,105 @@ 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,805 | 10,464 | 5,329 | 1,598 | 1,288 |
-| \`announcement\` | 36,692 | 13,313 | 11,854 | 4,682 | 1,425 | 1,097 |
-| \`app-header\` | 32,289 | 11,898 | 10,609 | 5,871 | 1,795 | 1,324 |
-| \`area-chart\` | 90,301 | 31,724 | 28,047 | 14,058 | 4,345 | 3,420 |
-| \`avatar\` | 30,463 | 11,596 | 10,369 | 3,957 | 1,234 | 1,023 |
-| \`badge\` | 27,088 | 10,568 | 9,406 | 2,942 | 919 | 622 |
-| \`bar-chart\` | 94,416 | 32,821 | 29,071 | 18,026 | 5,441 | 4,348 |
-| \`blockquote\` | 24,107 | 9,420 | 8,336 | 2,402 | 913 | 692 |
-| \`breadcrumbs\` | 36,279 | 13,906 | 12,382 | 7,360 | 2,451 | 1,943 |
-| \`button\` | 35,194 | 12,591 | 11,223 | 4,925 | 1,471 | 991 |
-| \`button-group\` | 27,640 | 10,382 | 9,203 | 4,928 | 1,516 | 1,059 |
-| \`callout\` | 35,256 | 13,594 | 12,071 | 2,884 | 992 | 707 |
-| \`canvas\` | 108,483 | 34,750 | 30,375 | 68,927 | 20,973 | 17,497 |
-| \`card\` | 23,777 | 9,054 | 8,020 | 2,090 | 655 | 421 |
-| \`carousel\` | 42,748 | 15,234 | 13,595 | 15,006 | 4,215 | 3,227 |
-| \`chat\` | 79,390 | 26,446 | 23,401 | 27,455 | 8,116 | 6,306 |
-| \`checkbox\` | 40,374 | 13,681 | 12,199 | 3,107 | 979 | 599 |
-| \`checkbox-group\` | 47,602 | 15,599 | 13,897 | 8,325 | 2,351 | 1,714 |
-| \`code\` | 20,301 | 8,015 | 7,122 | 138 | 67 | 17 |
-| \`code-block\` | 102,738 | 34,889 | 30,808 | 36,843 | 10,785 | 8,721 |
-| \`color-input\` | 141,792 | 45,087 | 39,361 | 55,136 | 14,334 | 11,701 |
-| \`color-picker\` | 103,415 | 32,966 | 28,895 | 47,256 | 12,743 | 10,327 |
-| \`combobox\` | 132,023 | 41,951 | 36,949 | 35,791 | 9,112 | 7,147 |
-| \`command\` | 99,513 | 31,476 | 27,709 | 30,061 | 8,171 | 6,377 |
-| \`copy-button\` | 80,548 | 27,649 | 24,490 | 18,341 | 4,985 | 3,952 |
-| \`data-table\` | 199,900 | 61,428 | 52,533 | 89,488 | 23,783 | 19,131 |
-| \`date-input\` | 141,223 | 44,512 | 39,128 | 38,229 | 9,447 | 7,477 |
-| \`date-picker\` | 61,360 | 20,936 | 18,727 | 20,347 | 5,579 | 4,376 |
-| \`description-list\` | 22,900 | 8,765 | 7,766 | 1,565 | 525 | 354 |
-| \`dialog\` | 38,247 | 13,598 | 12,117 | 5,837 | 1,753 | 1,270 |
-| \`divider\` | 22,991 | 8,924 | 7,882 | 1,416 | 502 | 308 |
-| \`donut-chart\` | 89,212 | 31,127 | 27,532 | 14,641 | 4,497 | 3,607 |
-| \`drawer\` | 42,892 | 15,123 | 13,459 | 7,698 | 2,295 | 1,773 |
-| \`drilldown\` | 42,756 | 14,941 | 13,297 | 9,710 | 2,724 | 2,102 |
-| \`empty\` | 24,194 | 9,250 | 8,201 | 1,951 | 658 | 492 |
-| \`file-input\` | 57,757 | 20,019 | 17,802 | 13,094 | 4,155 | 3,297 |
-| \`filter-input\` | 97,846 | 32,819 | 29,138 | 21,630 | 6,198 | 4,943 |
-| \`format-date\` | 30,158 | 11,290 | 10,090 | 4,434 | 1,263 | 1,011 |
-| \`graph\` | 74,369 | 24,504 | 21,694 | 21,878 | 6,484 | 5,303 |
-| \`heatmap\` | 98,128 | 33,505 | 29,602 | 18,944 | 5,590 | 4,509 |
-| \`icon\` | 82,157 | 28,050 | 23,964 | 58,304 | 19,661 | 15,889 |
-| \`icon-button\` | 35,305 | 12,620 | 11,241 | 5,034 | 1,512 | 1,109 |
-| \`image\` | 25,504 | 9,479 | 8,417 | 3,824 | 1,152 | 828 |
-| \`input\` | 46,361 | 15,974 | 14,090 | 7,352 | 2,452 | 1,740 |
-| \`isometric-heatmap\` | 102,771 | 34,713 | 30,582 | 23,536 | 6,748 | 5,312 |
-| \`kbd\` | 27,511 | 10,570 | 9,367 | 3,516 | 1,152 | 763 |
-| \`legend\` | 35,184 | 12,935 | 11,492 | 2,957 | 1,019 | 665 |
-| \`lightbox\` | 55,724 | 18,818 | 16,720 | 16,730 | 4,692 | 3,478 |
-| \`line-chart\` | 91,335 | 31,880 | 28,254 | 14,762 | 4,418 | 3,490 |
-| \`list\` | 61,803 | 21,292 | 18,957 | 15,242 | 4,449 | 3,418 |
-| \`listbox\` | 76,711 | 25,427 | 22,460 | 15,565 | 4,585 | 3,526 |
-| \`loader\` | 26,379 | 10,041 | 8,907 | 2,775 | 969 | 736 |
-| \`map\` | 78,565 | 24,393 | 21,320 | 37,025 | 10,128 | 7,906 |
-| \`megamenu\` | 60,027 | 21,698 | 19,179 | 8,595 | 2,405 | 1,679 |
-| \`menu\` | 97,473 | 32,550 | 28,755 | 30,180 | 7,996 | 6,403 |
-| \`meter\` | 31,721 | 12,026 | 10,720 | 4,894 | 1,453 | 1,168 |
-| \`navigation\` | 33,088 | 12,436 | 11,040 | 3,366 | 1,183 | 906 |
-| \`notifications\` | 58,346 | 19,881 | 17,753 | 18,207 | 5,055 | 3,960 |
-| \`number-input\` | 56,271 | 18,839 | 16,767 | 13,524 | 3,662 | 2,679 |
-| \`object-inspector\` | 113,929 | 38,372 | 33,685 | 35,492 | 10,303 | 8,256 |
-| \`option\` | 26,477 | 9,763 | 8,661 | 4,525 | 1,231 | 1,010 |
-| \`outline\` | 33,612 | 12,597 | 11,179 | 7,856 | 2,569 | 1,958 |
-| \`pagination\` | 136,258 | 43,650 | 37,920 | 45,377 | 11,934 | 9,424 |
-| \`pin-input\` | 47,068 | 16,413 | 14,656 | 6,736 | 2,253 | 1,742 |
-| \`popover\` | 63,806 | 22,940 | 20,269 | 6,375 | 1,876 | 1,338 |
-| \`progress\` | 28,084 | 10,730 | 9,552 | 2,970 | 933 | 740 |
-| \`qr-code\` | 42,719 | 16,647 | 14,867 | 17,004 | 6,288 | 5,231 |
-| \`quote\` | 22,516 | 8,885 | 7,828 | 1,211 | 523 | 318 |
-| \`radio\` | 42,561 | 14,464 | 12,882 | 3,817 | 1,227 | 920 |
-| \`rating\` | 50,257 | 17,289 | 15,436 | 8,029 | 2,456 | 1,783 |
-| \`scatter-chart\` | 91,226 | 31,675 | 28,012 | 16,127 | 4,840 | 3,841 |
-| \`scroll-area\` | 30,430 | 11,079 | 9,814 | 8,499 | 2,602 | 2,032 |
-| \`select\` | 115,289 | 38,173 | 33,415 | 26,033 | 7,140 | 5,445 |
-| \`skeleton\` | 22,328 | 8,644 | 7,667 | 991 | 367 | 221 |
-| \`skip-link\` | 23,871 | 9,337 | 8,265 | 1,225 | 493 | 347 |
-| \`slider\` | 52,873 | 17,824 | 15,978 | 13,159 | 3,817 | 3,005 |
-| \`sparkline\` | 47,984 | 17,500 | 15,601 | 5,981 | 2,162 | 1,713 |
-| \`speed-dial\` | 68,751 | 24,718 | 21,905 | 10,915 | 2,990 | 2,283 |
-| \`splitter\` | 43,751 | 15,167 | 13,536 | 14,397 | 3,878 | 3,113 |
-| \`stat\` | 25,255 | 9,675 | 8,602 | 2,303 | 781 | 514 |
-| \`steps\` | 53,623 | 18,635 | 16,628 | 13,603 | 3,869 | 3,023 |
-| \`switch\` | 39,233 | 13,495 | 12,048 | 1,679 | 625 | 342 |
-| \`table\` | 118,358 | 37,061 | 32,265 | 45,150 | 12,475 | 9,909 |
-| \`tabs\` | 46,310 | 15,908 | 14,148 | 10,491 | 2,916 | 2,165 |
-| \`tag\` | 42,676 | 15,621 | 13,972 | 8,455 | 2,548 | 1,894 |
-| \`textarea\` | 43,852 | 14,941 | 13,325 | 5,402 | 1,622 | 1,186 |
-| \`time-input\` | 169,269 | 52,676 | 45,799 | 48,511 | 12,418 | 9,843 |
-| \`time-picker\` | 99,603 | 31,518 | 27,730 | 33,933 | 9,190 | 7,195 |
-| \`timeline\` | 31,286 | 11,863 | 10,607 | 4,061 | 1,260 | 884 |
-| \`toast\` | 50,871 | 17,940 | 16,020 | 12,124 | 3,529 | 2,727 |
-| \`toggle\` | 45,577 | 15,270 | 13,580 | 6,007 | 1,799 | 1,302 |
-| \`toolbar\` | 31,047 | 11,573 | 10,294 | 5,158 | 1,694 | 1,305 |
-| \`tooltip\` | 58,616 | 21,090 | 18,716 | 8,434 | 2,378 | 1,782 |
-| \`tour\` | 83,670 | 28,721 | 25,340 | 19,815 | 5,458 | 4,223 |
-| \`tree\` | 67,586 | 22,717 | 20,190 | 17,199 | 4,979 | 3,851 |
-| \`trend\` | 29,717 | 11,569 | 10,337 | 3,487 | 1,133 | 732 |
-| \`video\` | 141,208 | 44,138 | 38,533 | 66,217 | 16,841 | 13,728 |
-| \`video-playlist\` | 127,686 | 41,301 | 36,316 | 42,775 | 11,224 | 9,052 |
-| \`virtual-list\` | 63,451 | 21,631 | 19,310 | 23,305 | 7,171 | 5,803 |
+| \`accordion\` | 31,879 | 11,805 | 10,464 | 5,329 | 1,598 | 1,201 |
+| \`announcement\` | 36,692 | 13,313 | 11,857 | 4,682 | 1,425 | 1,151 |
+| \`app-header\` | 32,289 | 11,899 | 10,609 | 5,871 | 1,795 | 1,314 |
+| \`area-chart\` | 90,301 | 31,725 | 28,033 | 14,058 | 4,345 | 3,519 |
+| \`avatar\` | 30,463 | 11,596 | 10,395 | 3,957 | 1,234 | 996 |
+| \`badge\` | 27,088 | 10,568 | 9,410 | 2,942 | 919 | 680 |
+| \`bar-chart\` | 94,416 | 32,821 | 29,079 | 18,026 | 5,441 | 4,384 |
+| \`blockquote\` | 24,107 | 9,421 | 8,333 | 2,402 | 913 | 792 |
+| \`breadcrumbs\` | 36,279 | 13,906 | 12,381 | 7,360 | 2,451 | 1,863 |
+| \`button\` | 35,194 | 12,591 | 11,199 | 4,925 | 1,471 | 1,101 |
+| \`button-group\` | 27,640 | 10,382 | 9,203 | 4,928 | 1,516 | 1,108 |
+| \`callout\` | 35,256 | 13,595 | 12,070 | 2,884 | 992 | 672 |
+| \`canvas\` | 108,483 | 34,750 | 30,378 | 68,927 | 20,973 | 17,579 |
+| \`card\` | 23,777 | 9,053 | 8,018 | 2,090 | 655 | 458 |
+| \`carousel\` | 42,748 | 15,234 | 13,592 | 15,006 | 4,215 | 3,284 |
+| \`chat\` | 79,390 | 26,446 | 23,340 | 27,455 | 8,116 | 6,323 |
+| \`checkbox\` | 40,374 | 13,681 | 12,223 | 3,107 | 979 | 715 |
+| \`checkbox-group\` | 47,602 | 15,600 | 13,904 | 8,325 | 2,351 | 1,675 |
+| \`code\` | 20,301 | 8,015 | 7,128 | 138 | 67 | 44 |
+| \`code-block\` | 102,738 | 34,889 | 30,829 | 36,843 | 10,785 | 8,723 |
+| \`color-input\` | 141,792 | 45,087 | 39,353 | 55,136 | 14,334 | 11,579 |
+| \`color-picker\` | 103,415 | 32,966 | 28,889 | 47,256 | 12,743 | 10,286 |
+| \`combobox\` | 132,023 | 41,951 | 36,926 | 35,791 | 9,112 | 7,114 |
+| \`command\` | 99,513 | 31,476 | 27,699 | 30,061 | 8,170 | 6,287 |
+| \`copy-button\` | 80,548 | 27,649 | 24,493 | 18,341 | 4,985 | 3,862 |
+| \`data-table\` | 199,900 | 61,427 | 52,552 | 89,488 | 23,783 | 19,122 |
+| \`date-input\` | 141,223 | 44,512 | 39,087 | 38,229 | 9,447 | 7,481 |
+| \`date-picker\` | 61,360 | 20,936 | 18,758 | 20,347 | 5,579 | 4,404 |
+| \`description-list\` | 22,900 | 8,766 | 7,766 | 1,565 | 525 | 363 |
+| \`dialog\` | 38,247 | 13,598 | 12,117 | 5,837 | 1,753 | 1,370 |
+| \`divider\` | 22,991 | 8,924 | 7,882 | 1,416 | 502 | 365 |
+| \`donut-chart\` | 89,212 | 31,127 | 27,516 | 14,641 | 4,497 | 3,726 |
+| \`drawer\` | 42,892 | 15,123 | 13,470 | 7,698 | 2,295 | 1,762 |
+| \`drilldown\` | 42,756 | 14,941 | 13,298 | 9,710 | 2,724 | 2,115 |
+| \`empty\` | 24,194 | 9,251 | 8,200 | 1,951 | 658 | 452 |
+| \`file-input\` | 57,757 | 20,019 | 17,787 | 13,094 | 4,155 | 3,327 |
+| \`filter-input\` | 97,846 | 32,818 | 29,095 | 21,630 | 6,199 | 4,832 |
+| \`format-date\` | 30,158 | 11,290 | 10,090 | 4,434 | 1,263 | 1,027 |
+| \`graph\` | 74,369 | 24,503 | 21,668 | 21,878 | 6,484 | 5,239 |
+| \`heatmap\` | 98,128 | 33,504 | 29,599 | 18,944 | 5,590 | 4,500 |
+| \`icon\` | 82,157 | 28,050 | 23,958 | 58,304 | 19,661 | 16,059 |
+| \`icon-button\` | 35,305 | 12,620 | 11,230 | 5,034 | 1,512 | 1,196 |
+| \`image\` | 25,504 | 9,480 | 8,403 | 3,824 | 1,152 | 876 |
+| \`input\` | 46,361 | 15,974 | 14,090 | 7,352 | 2,452 | 1,782 |
+| \`isometric-heatmap\` | 102,771 | 34,712 | 30,611 | 23,536 | 6,749 | 5,369 |
+| \`kbd\` | 27,511 | 10,571 | 9,363 | 3,516 | 1,152 | 829 |
+| \`legend\` | 35,184 | 12,935 | 11,491 | 2,957 | 1,019 | 860 |
+| \`lightbox\` | 55,724 | 18,816 | 16,708 | 16,730 | 4,692 | 3,556 |
+| \`line-chart\` | 91,335 | 31,881 | 28,246 | 14,762 | 4,418 | 3,595 |
+| \`list\` | 61,803 | 21,294 | 18,990 | 15,242 | 4,449 | 3,468 |
+| \`listbox\` | 76,711 | 25,427 | 22,518 | 15,565 | 4,585 | 3,562 |
+| \`loader\` | 26,379 | 10,041 | 8,907 | 2,775 | 969 | 755 |
+| \`map\` | 78,565 | 24,393 | 21,306 | 37,025 | 10,128 | 7,979 |
+| \`megamenu\` | 60,027 | 21,698 | 19,184 | 8,595 | 2,405 | 1,729 |
+| \`menu\` | 97,473 | 32,550 | 28,740 | 30,180 | 7,996 | 6,317 |
+| \`meter\` | 31,721 | 12,026 | 10,720 | 4,894 | 1,453 | 1,142 |
+| \`navigation\` | 33,088 | 12,436 | 11,039 | 3,366 | 1,183 | 972 |
+| \`notifications\` | 58,346 | 19,881 | 17,738 | 18,207 | 5,055 | 4,084 |
+| \`number-input\` | 56,271 | 18,839 | 16,788 | 13,524 | 3,662 | 2,808 |
+| \`object-inspector\` | 113,929 | 38,372 | 33,710 | 35,492 | 10,303 | 8,228 |
+| \`option\` | 26,477 | 9,764 | 8,662 | 4,525 | 1,231 | 929 |
+| \`outline\` | 33,612 | 12,598 | 11,179 | 7,856 | 2,569 | 1,942 |
+| \`pagination\` | 136,258 | 43,650 | 37,968 | 45,377 | 11,934 | 9,430 |
+| \`pin-input\` | 47,068 | 16,413 | 14,656 | 6,736 | 2,253 | 1,679 |
+| \`popover\` | 63,806 | 22,941 | 20,269 | 6,375 | 1,876 | 1,391 |
+| \`progress\` | 28,084 | 10,730 | 9,552 | 2,970 | 933 | 784 |
+| \`qr-code\` | 42,719 | 16,645 | 14,846 | 17,004 | 6,288 | 5,327 |
+| \`quote\` | 22,516 | 8,885 | 7,828 | 1,211 | 523 | 436 |
+| \`radio\` | 42,561 | 14,464 | 12,878 | 3,817 | 1,227 | 860 |
+| \`rating\` | 50,257 | 17,289 | 15,409 | 8,029 | 2,456 | 1,823 |
+| \`scatter-chart\` | 91,226 | 31,676 | 27,953 | 16,127 | 4,840 | 3,799 |
+| \`scroll-area\` | 30,430 | 11,079 | 9,814 | 8,499 | 2,602 | 2,068 |
+| \`select\` | 115,289 | 38,173 | 33,453 | 26,033 | 7,140 | 5,340 |
+| \`skeleton\` | 22,328 | 8,644 | 7,666 | 991 | 367 | 229 |
+| \`skip-link\` | 23,871 | 9,338 | 8,265 | 1,225 | 493 | 350 |
+| \`slider\` | 52,873 | 17,826 | 15,978 | 13,159 | 3,817 | 2,927 |
+| \`sparkline\` | 47,984 | 17,500 | 15,601 | 5,981 | 2,162 | 1,673 |
+| \`speed-dial\` | 68,751 | 24,718 | 21,898 | 10,915 | 2,990 | 2,359 |
+| \`splitter\` | 43,751 | 15,167 | 13,536 | 14,397 | 3,878 | 3,177 |
+| \`stat\` | 25,255 | 9,675 | 8,601 | 2,303 | 781 | 553 |
+| \`steps\` | 53,623 | 18,636 | 16,567 | 13,603 | 3,869 | 3,159 |
+| \`switch\` | 39,233 | 13,495 | 12,048 | 1,679 | 625 | 396 |
+| \`table\` | 118,358 | 37,061 | 32,288 | 45,150 | 12,476 | 10,092 |
+| \`tabs\` | 46,310 | 15,908 | 14,148 | 10,491 | 2,916 | 2,292 |
+| \`tag\` | 42,676 | 15,620 | 13,972 | 8,455 | 2,548 | 2,025 |
+| \`textarea\` | 43,852 | 14,941 | 13,326 | 5,402 | 1,622 | 1,271 |
+| \`time-input\` | 169,269 | 52,676 | 45,838 | 48,511 | 12,418 | 9,781 |
+| \`time-picker\` | 99,603 | 31,517 | 27,728 | 33,933 | 9,190 | 7,178 |
+| \`timeline\` | 31,286 | 11,863 | 10,638 | 4,061 | 1,259 | 981 |
+| \`toast\` | 50,871 | 17,940 | 16,020 | 12,124 | 3,529 | 2,769 |
+| \`toggle\` | 45,577 | 15,270 | 13,576 | 6,007 | 1,799 | 1,303 |
+| \`toolbar\` | 31,047 | 11,573 | 10,294 | 5,158 | 1,694 | 1,299 |
+| \`tooltip\` | 58,616 | 21,091 | 18,704 | 8,434 | 2,378 | 1,931 |
+| \`tour\` | 83,670 | 28,722 | 25,379 | 19,815 | 5,458 | 4,358 |
+| \`tree\` | 67,586 | 22,717 | 20,230 | 17,199 | 4,979 | 3,932 |
+| \`trend\` | 29,717 | 11,568 | 10,337 | 3,487 | 1,133 | 886 |
+| \`video\` | 141,208 | 44,137 | 38,490 | 66,217 | 16,841 | 13,759 |
+| \`video-playlist\` | 127,686 | 41,301 | 36,312 | 42,775 | 11,224 | 9,029 |
+| \`virtual-list\` | 63,451 | 21,632 | 19,226 | 23,305 | 7,171 | 5,849 |
 
 ### Styled tier
 
@@ -4475,112 +4540,112 @@ 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,654 | 11,215 | 8,746 | 2,463 | 1,916 |
-| \`announcement\` | 41,307 | 14,365 | 12,844 | 9,278 | 2,489 | 1,985 |
-| \`app-header\` | 37,449 | 13,103 | 11,662 | 11,016 | 3,009 | 2,360 |
-| \`area-chart\` | 98,393 | 33,578 | 29,651 | 22,131 | 6,256 | 5,128 |
-| \`aura\` | 56,085 | 19,320 | 17,143 | 29,774 | 9,335 | 7,766 |
-| \`avatar\` | 33,464 | 12,350 | 11,080 | 6,945 | 2,007 | 1,587 |
-| \`badge\` | 32,595 | 11,820 | 10,525 | 8,438 | 2,177 | 1,751 |
-| \`bar-chart\` | 108,944 | 35,724 | 31,575 | 32,533 | 8,394 | 6,783 |
-| \`blockquote\` | 26,332 | 9,969 | 8,824 | 4,612 | 1,452 | 1,145 |
-| \`breadcrumbs\` | 43,220 | 15,115 | 13,516 | 14,285 | 3,697 | 3,035 |
-| \`button\` | 41,612 | 14,007 | 12,442 | 11,324 | 2,907 | 2,208 |
-| \`button-group\` | 31,138 | 11,066 | 9,812 | 8,409 | 2,229 | 1,663 |
-| \`callout\` | 39,049 | 14,537 | 12,949 | 6,659 | 1,950 | 1,507 |
-| \`canvas\` | 129,523 | 38,717 | 33,900 | 89,611 | 24,897 | 20,827 |
-| \`card\` | 27,678 | 10,059 | 8,913 | 5,976 | 1,650 | 1,337 |
-| \`carousel\` | 53,234 | 17,022 | 15,256 | 25,477 | 6,037 | 4,854 |
-| \`chat\` | 94,674 | 29,166 | 25,836 | 42,730 | 10,859 | 8,708 |
-| \`checkbox\` | 46,865 | 15,190 | 13,518 | 9,580 | 2,503 | 1,866 |
-| \`checkbox-group\` | 54,826 | 17,244 | 15,360 | 15,542 | 4,028 | 3,141 |
-| \`code\` | 21,154 | 8,332 | 7,402 | 976 | 399 | 250 |
-| \`code-block\` | 127,213 | 38,714 | 34,154 | 61,300 | 14,740 | 12,034 |
-| \`color-input\` | 184,176 | 51,349 | 44,958 | 97,504 | 20,559 | 17,117 |
-| \`color-picker\` | 140,348 | 38,508 | 33,795 | 84,177 | 18,389 | 15,128 |
-| \`combobox\` | 147,503 | 44,927 | 39,580 | 51,254 | 12,085 | 9,637 |
-| \`command\` | 110,791 | 33,835 | 29,839 | 41,332 | 10,522 | 8,410 |
-| \`copy-button\` | 92,577 | 29,825 | 26,382 | 30,355 | 7,219 | 5,764 |
-| \`data-table\` | 230,715 | 66,817 | 57,321 | 120,282 | 29,305 | 23,748 |
-| \`date-input\` | 162,349 | 48,215 | 42,373 | 59,336 | 13,196 | 10,838 |
-| \`date-picker\` | 69,281 | 22,363 | 19,983 | 28,250 | 7,010 | 5,689 |
-| \`description-list\` | 25,855 | 9,517 | 8,468 | 4,508 | 1,284 | 1,011 |
-| \`dialog\` | 43,360 | 14,855 | 13,244 | 10,933 | 3,007 | 2,360 |
-| \`divider\` | 25,291 | 9,547 | 8,433 | 3,699 | 1,140 | 919 |
-| \`donut-chart\` | 99,170 | 33,263 | 29,408 | 24,576 | 6,712 | 5,401 |
-| \`drawer\` | 48,725 | 16,508 | 14,718 | 13,512 | 3,708 | 2,986 |
-| \`drilldown\` | 48,438 | 16,235 | 14,452 | 15,378 | 4,052 | 3,212 |
-| \`empty\` | 25,503 | 9,726 | 8,598 | 3,242 | 1,117 | 869 |
-| \`file-input\` | 69,285 | 22,419 | 19,908 | 24,612 | 6,551 | 5,350 |
-| \`filter-input\` | 108,688 | 34,991 | 30,996 | 32,465 | 8,412 | 6,741 |
-| \`flex\` | 25,740 | 9,194 | 8,150 | 4,763 | 1,047 | 777 |
-| \`format-date\` | 30,414 | 11,403 | 10,189 | 4,672 | 1,402 | 1,018 |
-| \`graph\` | 89,037 | 27,080 | 23,878 | 36,528 | 9,184 | 7,415 |
-| \`grid\` | 27,002 | 9,846 | 8,736 | 5,638 | 1,467 | 1,230 |
-| \`heatmap\` | 105,486 | 35,189 | 31,027 | 26,281 | 7,263 | 5,838 |
-| \`icon\` | 83,995 | 28,567 | 24,459 | 60,129 | 20,177 | 16,416 |
-| \`icon-button\` | 43,040 | 13,981 | 12,448 | 12,753 | 2,882 | 2,273 |
-| \`image\` | 26,892 | 9,946 | 8,814 | 5,194 | 1,620 | 1,342 |
-| \`input\` | 50,619 | 17,063 | 15,054 | 11,597 | 3,559 | 2,693 |
-| \`isometric-heatmap\` | 110,852 | 36,558 | 32,285 | 31,598 | 8,642 | 6,989 |
-| \`kbd\` | 29,504 | 11,109 | 9,837 | 5,494 | 1,685 | 1,228 |
-| \`legend\` | 40,423 | 14,214 | 12,618 | 8,067 | 2,264 | 1,840 |
-| \`lightbox\` | 62,016 | 20,155 | 17,924 | 23,006 | 6,017 | 4,600 |
-| \`line-chart\` | 102,454 | 34,257 | 30,359 | 25,863 | 6,849 | 5,601 |
-| \`list\` | 68,150 | 22,815 | 20,344 | 21,569 | 5,958 | 4,732 |
-| \`listbox\` | 81,154 | 26,541 | 23,468 | 19,994 | 5,703 | 4,450 |
-| \`loader\` | 29,263 | 10,814 | 9,643 | 5,642 | 1,730 | 1,425 |
-| \`map\` | 111,513 | 29,575 | 26,001 | 69,961 | 15,526 | 12,613 |
-| \`megamenu\` | 64,996 | 22,865 | 20,230 | 13,547 | 3,558 | 2,750 |
-| \`menu\` | 108,403 | 34,711 | 30,620 | 41,098 | 10,160 | 8,241 |
-| \`meter\` | 37,896 | 13,377 | 11,935 | 11,050 | 2,820 | 2,364 |
-| \`navigation\` | 36,814 | 13,268 | 11,770 | 7,077 | 2,025 | 1,612 |
-| \`notifications\` | 71,808 | 22,447 | 20,022 | 31,663 | 7,637 | 6,217 |
-| \`number-input\` | 61,253 | 20,024 | 17,816 | 18,491 | 4,850 | 3,746 |
-| \`object-inspector\` | 130,338 | 41,206 | 36,279 | 51,884 | 13,190 | 10,742 |
-| \`option\` | 29,672 | 10,762 | 9,552 | 7,712 | 2,213 | 1,732 |
-| \`orb\` | 35,265 | 13,488 | 12,000 | 9,730 | 3,689 | 3,140 |
-| \`outline\` | 37,846 | 13,458 | 11,934 | 12,073 | 3,491 | 2,777 |
-| \`pagination\` | 153,264 | 46,929 | 40,864 | 62,366 | 15,240 | 12,233 |
-| \`pin-input\` | 50,409 | 17,316 | 15,440 | 10,058 | 3,179 | 2,488 |
-| \`popover\` | 66,958 | 23,702 | 20,990 | 9,509 | 2,658 | 2,018 |
-| \`progress\` | 35,232 | 12,380 | 11,035 | 10,101 | 2,602 | 2,164 |
-| \`qr-code\` | 44,321 | 17,121 | 15,245 | 18,589 | 6,787 | 5,691 |
-| \`quote\` | 23,074 | 9,079 | 8,008 | 1,752 | 733 | 533 |
-| \`radio\` | 50,349 | 15,977 | 14,206 | 11,594 | 2,766 | 2,076 |
-| \`rating\` | 54,190 | 18,519 | 16,487 | 11,946 | 3,671 | 2,832 |
-| \`sandbox\` | 104,428 | 31,484 | 27,571 | 72,147 | 19,289 | 16,088 |
-| \`scatter-chart\` | 100,317 | 33,784 | 29,808 | 25,197 | 6,982 | 5,547 |
-| \`scroll-area\` | 35,437 | 12,025 | 10,665 | 13,489 | 3,582 | 2,874 |
-| \`select\` | 124,418 | 40,070 | 35,148 | 35,147 | 9,067 | 7,030 |
-| \`skeleton\` | 26,090 | 9,664 | 8,592 | 4,738 | 1,432 | 1,138 |
-| \`skip-link\` | 25,441 | 9,851 | 8,691 | 2,780 | 983 | 709 |
-| \`slider\` | 67,842 | 20,140 | 18,007 | 28,108 | 6,184 | 4,910 |
-| \`sparkline\` | 53,442 | 18,851 | 16,826 | 11,421 | 3,519 | 2,779 |
-| \`speed-dial\` | 75,797 | 26,105 | 23,140 | 17,946 | 4,404 | 3,470 |
-| \`splitter\` | 49,804 | 16,210 | 14,531 | 20,431 | 4,937 | 4,013 |
-| \`stat\` | 28,117 | 10,372 | 9,280 | 5,157 | 1,482 | 1,208 |
-| \`steps\` | 67,449 | 21,378 | 19,083 | 27,416 | 6,635 | 5,489 |
-| \`strands\` | 62,138 | 23,148 | 20,361 | 38,015 | 13,797 | 11,909 |
-| \`switch\` | 43,562 | 14,637 | 13,013 | 5,998 | 1,792 | 1,338 |
-| \`table\` | 135,900 | 40,155 | 34,987 | 62,687 | 15,581 | 12,683 |
-| \`tabs\` | 55,263 | 17,753 | 15,817 | 19,437 | 4,783 | 3,789 |
-| \`tag\` | 47,247 | 16,757 | 14,961 | 13,016 | 3,658 | 2,855 |
-| \`text\` | 28,756 | 9,943 | 8,755 | 7,396 | 1,519 | 1,156 |
-| \`textarea\` | 47,785 | 15,949 | 14,229 | 9,318 | 2,677 | 2,070 |
-| \`time-input\` | 193,597 | 56,836 | 49,452 | 72,824 | 16,646 | 13,480 |
-| \`time-picker\` | 111,928 | 33,946 | 29,876 | 46,251 | 11,627 | 9,291 |
-| \`timeline\` | 38,179 | 13,326 | 11,920 | 10,947 | 2,751 | 2,240 |
-| \`toast\` | 58,767 | 19,783 | 17,646 | 20,006 | 5,408 | 4,415 |
-| \`toggle\` | 50,439 | 16,510 | 14,670 | 10,854 | 3,077 | 2,529 |
-| \`toolbar\` | 33,726 | 12,066 | 10,723 | 7,822 | 2,163 | 1,589 |
-| \`tooltip\` | 61,420 | 21,833 | 19,367 | 11,220 | 3,137 | 2,485 |
-| \`tour\` | 93,661 | 30,695 | 27,173 | 29,787 | 7,497 | 6,129 |
-| \`tree\` | 76,275 | 24,651 | 21,984 | 25,874 | 6,942 | 5,589 |
-| \`trend\` | 31,231 | 12,050 | 10,741 | 4,982 | 1,613 | 1,261 |
-| \`video\` | 161,715 | 47,866 | 41,788 | 86,712 | 20,444 | 17,014 |
-| \`video-playlist\` | 143,639 | 44,279 | 38,912 | 58,709 | 14,189 | 11,763 |
-| \`virtual-list\` | 65,445 | 22,136 | 19,678 | 25,282 | 7,676 | 6,273 |
+| \`accordion\` | 35,311 | 12,654 | 11,236 | 8,746 | 2,463 | 1,998 |
+| \`announcement\` | 41,307 | 14,365 | 12,844 | 9,278 | 2,489 | 2,054 |
+| \`app-header\` | 37,449 | 13,103 | 11,662 | 11,016 | 3,009 | 2,470 |
+| \`area-chart\` | 98,393 | 33,578 | 29,660 | 22,131 | 6,256 | 5,025 |
+| \`aura\` | 56,085 | 19,320 | 17,126 | 29,774 | 9,335 | 7,865 |
+| \`avatar\` | 33,464 | 12,351 | 11,051 | 6,945 | 2,007 | 1,685 |
+| \`badge\` | 32,595 | 11,820 | 10,531 | 8,438 | 2,177 | 1,748 |
+| \`bar-chart\` | 108,944 | 35,724 | 31,568 | 32,533 | 8,394 | 6,820 |
+| \`blockquote\` | 26,332 | 9,968 | 8,824 | 4,612 | 1,452 | 1,164 |
+| \`breadcrumbs\` | 43,220 | 15,115 | 13,466 | 14,285 | 3,697 | 3,044 |
+| \`button\` | 41,612 | 14,007 | 12,441 | 11,324 | 2,907 | 2,346 |
+| \`button-group\` | 31,138 | 11,066 | 9,805 | 8,409 | 2,230 | 1,841 |
+| \`callout\` | 39,049 | 14,537 | 12,949 | 6,659 | 1,950 | 1,535 |
+| \`canvas\` | 129,523 | 38,718 | 33,863 | 89,611 | 24,897 | 20,987 |
+| \`card\` | 27,678 | 10,060 | 8,915 | 5,976 | 1,650 | 1,363 |
+| \`carousel\` | 53,234 | 17,022 | 15,256 | 25,477 | 6,038 | 4,946 |
+| \`chat\` | 94,674 | 29,166 | 25,830 | 42,730 | 10,859 | 8,749 |
+| \`checkbox\` | 46,865 | 15,190 | 13,516 | 9,580 | 2,503 | 1,920 |
+| \`checkbox-group\` | 54,826 | 17,244 | 15,360 | 15,542 | 4,028 | 3,169 |
+| \`code\` | 21,154 | 8,333 | 7,402 | 976 | 399 | 301 |
+| \`code-block\` | 127,213 | 38,714 | 34,143 | 61,300 | 14,740 | 12,109 |
+| \`color-input\` | 184,176 | 51,348 | 44,934 | 97,504 | 20,559 | 17,166 |
+| \`color-picker\` | 140,348 | 38,508 | 33,775 | 84,177 | 18,389 | 15,187 |
+| \`combobox\` | 147,503 | 44,927 | 39,531 | 51,254 | 12,085 | 9,694 |
+| \`command\` | 110,791 | 33,835 | 29,880 | 41,332 | 10,522 | 8,545 |
+| \`copy-button\` | 92,577 | 29,825 | 26,416 | 30,355 | 7,219 | 5,801 |
+| \`data-table\` | 230,715 | 66,818 | 57,324 | 120,282 | 29,306 | 23,816 |
+| \`date-input\` | 162,349 | 48,215 | 42,468 | 59,336 | 13,196 | 10,823 |
+| \`date-picker\` | 69,281 | 22,363 | 20,060 | 28,250 | 7,010 | 5,666 |
+| \`description-list\` | 25,855 | 9,518 | 8,459 | 4,508 | 1,284 | 1,017 |
+| \`dialog\` | 43,360 | 14,855 | 13,244 | 10,933 | 3,007 | 2,490 |
+| \`divider\` | 25,291 | 9,547 | 8,433 | 3,699 | 1,140 | 891 |
+| \`donut-chart\` | 99,170 | 33,263 | 29,415 | 24,576 | 6,712 | 5,427 |
+| \`drawer\` | 48,725 | 16,509 | 14,724 | 13,512 | 3,708 | 2,986 |
+| \`drilldown\` | 48,438 | 16,235 | 14,469 | 15,378 | 4,052 | 3,262 |
+| \`empty\` | 25,503 | 9,726 | 8,598 | 3,242 | 1,117 | 896 |
+| \`file-input\` | 69,285 | 22,420 | 19,930 | 24,612 | 6,551 | 5,279 |
+| \`filter-input\` | 108,688 | 34,990 | 30,999 | 32,465 | 8,412 | 6,787 |
+| \`flex\` | 25,740 | 9,194 | 8,149 | 4,763 | 1,047 | 850 |
+| \`format-date\` | 30,414 | 11,403 | 10,189 | 4,672 | 1,402 | 1,050 |
+| \`graph\` | 89,037 | 27,079 | 23,901 | 36,528 | 9,184 | 7,421 |
+| \`grid\` | 27,002 | 9,846 | 8,742 | 5,638 | 1,467 | 1,312 |
+| \`heatmap\` | 105,486 | 35,189 | 31,063 | 26,281 | 7,264 | 5,929 |
+| \`icon\` | 83,995 | 28,566 | 24,515 | 60,129 | 20,177 | 16,474 |
+| \`icon-button\` | 43,040 | 13,981 | 12,435 | 12,753 | 2,882 | 2,258 |
+| \`image\` | 26,892 | 9,947 | 8,792 | 5,194 | 1,620 | 1,337 |
+| \`input\` | 50,619 | 17,063 | 15,049 | 11,597 | 3,559 | 2,663 |
+| \`isometric-heatmap\` | 110,852 | 36,558 | 32,275 | 31,598 | 8,642 | 6,913 |
+| \`kbd\` | 29,504 | 11,110 | 9,838 | 5,494 | 1,685 | 1,342 |
+| \`legend\` | 40,423 | 14,214 | 12,607 | 8,067 | 2,264 | 1,846 |
+| \`lightbox\` | 62,016 | 20,155 | 17,964 | 23,006 | 6,017 | 4,683 |
+| \`line-chart\` | 102,454 | 34,257 | 30,340 | 25,863 | 6,849 | 5,539 |
+| \`list\` | 68,150 | 22,816 | 20,343 | 21,569 | 5,958 | 4,706 |
+| \`listbox\` | 81,154 | 26,542 | 23,465 | 19,994 | 5,703 | 4,473 |
+| \`loader\` | 29,263 | 10,814 | 9,643 | 5,642 | 1,730 | 1,396 |
+| \`map\` | 111,513 | 29,575 | 25,948 | 69,961 | 15,525 | 12,703 |
+| \`megamenu\` | 64,996 | 22,865 | 20,305 | 13,547 | 3,558 | 2,813 |
+| \`menu\` | 108,403 | 34,710 | 30,612 | 41,098 | 10,160 | 8,290 |
+| \`meter\` | 37,896 | 13,377 | 11,948 | 11,050 | 2,820 | 2,322 |
+| \`navigation\` | 36,814 | 13,268 | 11,774 | 7,077 | 2,025 | 1,612 |
+| \`notifications\` | 71,808 | 22,447 | 19,990 | 31,663 | 7,637 | 6,248 |
+| \`number-input\` | 61,253 | 20,024 | 17,846 | 18,491 | 4,850 | 3,838 |
+| \`object-inspector\` | 130,338 | 41,206 | 36,258 | 51,884 | 13,190 | 10,666 |
+| \`option\` | 29,672 | 10,762 | 9,552 | 7,712 | 2,213 | 1,846 |
+| \`orb\` | 35,265 | 13,488 | 12,001 | 9,730 | 3,689 | 3,108 |
+| \`outline\` | 37,846 | 13,459 | 11,945 | 12,073 | 3,491 | 2,800 |
+| \`pagination\` | 153,264 | 46,929 | 40,857 | 62,366 | 15,240 | 12,281 |
+| \`pin-input\` | 50,409 | 17,316 | 15,449 | 10,058 | 3,179 | 2,402 |
+| \`popover\` | 66,958 | 23,702 | 20,940 | 9,509 | 2,658 | 2,109 |
+| \`progress\` | 35,232 | 12,380 | 11,035 | 10,101 | 2,602 | 2,225 |
+| \`qr-code\` | 44,321 | 17,121 | 15,278 | 18,589 | 6,787 | 5,736 |
+| \`quote\` | 23,074 | 9,079 | 8,006 | 1,752 | 733 | 509 |
+| \`radio\` | 50,349 | 15,977 | 14,203 | 11,594 | 2,766 | 2,213 |
+| \`rating\` | 54,190 | 18,519 | 16,486 | 11,946 | 3,671 | 2,903 |
+| \`sandbox\` | 104,428 | 31,486 | 27,640 | 72,147 | 19,289 | 16,119 |
+| \`scatter-chart\` | 100,317 | 33,785 | 29,869 | 25,197 | 6,982 | 5,771 |
+| \`scroll-area\` | 35,437 | 12,027 | 10,702 | 13,489 | 3,582 | 2,961 |
+| \`select\` | 124,418 | 40,070 | 35,154 | 35,147 | 9,067 | 7,129 |
+| \`skeleton\` | 26,090 | 9,664 | 8,589 | 4,738 | 1,432 | 1,187 |
+| \`skip-link\` | 25,441 | 9,852 | 8,690 | 2,780 | 983 | 736 |
+| \`slider\` | 67,842 | 20,140 | 18,005 | 28,108 | 6,184 | 5,032 |
+| \`sparkline\` | 53,442 | 18,851 | 16,826 | 11,421 | 3,519 | 2,864 |
+| \`speed-dial\` | 75,797 | 26,105 | 23,139 | 17,946 | 4,404 | 3,516 |
+| \`splitter\` | 49,804 | 16,210 | 14,531 | 20,431 | 4,937 | 4,039 |
+| \`stat\` | 28,117 | 10,372 | 9,280 | 5,157 | 1,482 | 1,194 |
+| \`steps\` | 67,449 | 21,377 | 19,024 | 27,416 | 6,635 | 5,515 |
+| \`strands\` | 62,138 | 23,148 | 20,396 | 38,015 | 13,797 | 11,910 |
+| \`switch\` | 43,562 | 14,637 | 13,010 | 5,998 | 1,792 | 1,391 |
+| \`table\` | 135,900 | 40,155 | 34,934 | 62,687 | 15,581 | 12,776 |
+| \`tabs\` | 55,263 | 17,753 | 15,835 | 19,437 | 4,783 | 3,841 |
+| \`tag\` | 47,247 | 16,757 | 14,968 | 13,016 | 3,658 | 2,921 |
+| \`text\` | 28,756 | 9,943 | 8,755 | 7,396 | 1,519 | 1,235 |
+| \`textarea\` | 47,785 | 15,949 | 14,228 | 9,318 | 2,677 | 2,078 |
+| \`time-input\` | 193,597 | 56,836 | 49,504 | 72,824 | 16,646 | 13,498 |
+| \`time-picker\` | 111,928 | 33,946 | 29,864 | 46,251 | 11,628 | 9,328 |
+| \`timeline\` | 38,179 | 13,326 | 11,930 | 10,947 | 2,751 | 2,261 |
+| \`toast\` | 58,767 | 19,784 | 17,637 | 20,006 | 5,408 | 4,422 |
+| \`toggle\` | 50,439 | 16,510 | 14,668 | 10,854 | 3,077 | 2,438 |
+| \`toolbar\` | 33,726 | 12,066 | 10,723 | 7,822 | 2,163 | 1,769 |
+| \`tooltip\` | 61,420 | 21,833 | 19,366 | 11,220 | 3,137 | 2,485 |
+| \`tour\` | 93,661 | 30,696 | 27,184 | 29,787 | 7,497 | 6,053 |
+| \`tree\` | 76,275 | 24,651 | 21,972 | 25,874 | 6,942 | 5,517 |
+| \`trend\` | 31,231 | 12,049 | 10,722 | 4,982 | 1,613 | 1,281 |
+| \`video\` | 161,715 | 47,866 | 41,707 | 86,712 | 20,444 | 16,977 |
+| \`video-playlist\` | 143,639 | 44,278 | 38,886 | 58,709 | 14,189 | 11,798 |
+| \`virtual-list\` | 65,445 | 22,136 | 19,655 | 25,282 | 7,676 | 6,231 |
 
 ## What an install adds to \`node_modules\`
 
@@ -4593,11 +4658,11 @@ stripped column shows the bytes we removed.
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
 | \`@fusion.dev/helix-core\` | 2,561,244 | 559 | 727,996 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 22,147,132 | 714 | 2,256,499 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-headless\` | 25,354,104 | 716 | 2,256,499 | \`@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,038 | 6 | 0 | none |
+| \`@fusion.dev/helix-styles\` | 121,089 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
-| \`@fusion.dev/helix\` | 22,136,756 | 966 | 539,157 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix\` | 26,639,279 | 968 | 539,177 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -7641,7 +7706,7 @@ type needs less leading. \`--helix-leading-heading\` expresses that once, so no
 heading level needs its own multiplier.
 `,
     'using-helix-with-an-agent': `---
-description: Four mistakes that look like Helix bugs, and the files an agent should read.
+description: Five mistakes that look like Helix bugs, and the files an agent should read.
 parent: coding-agents
 section: Getting started
 title: Using Helix with an agent
@@ -7666,42 +7731,53 @@ link to. Paste the link into the file your tool reads. [The MCP
 server](./coding-agents) works with any vendor and runs code, and Claude,
 Cursor, Windsurf, and Zed all support it.
 
-## Read the manifest before writing a tag
+## Read the family before writing its tags
 
 \`\`\`
-https://fusion.dev/helix/custom-elements.json
-@fusion.dev/helix/custom-elements.json
+https://fusion.dev/helix/components/<family>.md
+https://fusion.dev/helix/components/<family>.json
 \`\`\`
 
-The manifest lists:
+Each family's file lists:
 
+- the import lines for the family
 - every tag
 - every property, with its literal union
-- every event, with its class
+- every event, with its class and its React prop
 - every slot, part, and custom property
+- the examples, each with the import lines it needs
 
-**If a tag is not in the manifest, it does not exist.** A property value outside
-a declared union is invalid. Property types are literal unions for this reason.
-\`'ghost' | 'outlined' | 'solid' | 'subtle'\` shows you the values, and a named
-type such as \`ButtonEmphasis\` sends you somewhere else to find them.
-
-When you need one family, fetch it as data:
-
-\`\`\`
-https://fusion.dev/helix/components/<family>.json
-https://fusion.dev/helix/components/<family>.md
-\`\`\`
+**If a tag is not in a family's file, it does not exist.** A property value
+outside a declared union is invalid. Property types are literal unions for this
+reason. \`'ghost' | 'outlined' | 'solid' | 'subtle'\` shows you the values, and a
+named type such as \`ButtonEmphasis\` sends you somewhere else to find them.
 
-The \`.md\` file has the API tables and the examples. The HTML page leaves the
-examples out on purpose. Start from \`https://fusion.dev/llms.txt\`. In one
-request, it names every document and these two sources.
+The manifest at \`https://fusion.dev/helix/custom-elements.json\` holds every
+family in one file, which is several megabytes. Read the families you use.
+Start from \`https://fusion.dev/llms.txt\`. In one request, it names every
+document and the machine-readable sources.
 
-## Four mistakes that look like Helix bugs
+## Five mistakes that look like Helix bugs
 
 Each of these looks like a bug in Helix. They are listed from the most common to
 the least common.
 
-### 1. Blocking a change without \`preventDefault()\`
+### 1. Writing a tag without importing its family
+
+Each tag needs its family's entry imported. A family does not register another
+family's elements that you write inside it, so a Select needs Option imported
+beside it, and a Data Table needs Table:
+
+\`\`\`js
+import '@fusion.dev/helix/select'
+import '@fusion.dev/helix/option'
+\`\`\`
+
+Without the second line, the options are unknown elements and the Select offers
+nothing. Each family's Usage block and each example list the lines to import.
+Copy them with the markup.
+
+### 2. Blocking a change without \`preventDefault()\`
 
 **Setting \`value\`, \`open\`, \`checked\`, or \`active\` sets the starting state and
 corrects the current state.** The element starts in that state and then applies
@@ -7733,7 +7809,7 @@ block a change, call \`preventDefault()\` on the matching \`helix-before-*\` eve
 A form reset returns the element to \`default-value\` and the matching attributes
 for the other states. See [State and control](./state-and-control).
 
-### 2. Using the exact event name
+### 3. Using the exact event name
 
 In React, write \`onhelix-before-open\`. \`onHelixOpen\` and \`onOpen\` do not work.
 React removes \`on\` from the prop name and listens for exactly the rest, so the
@@ -7747,7 +7823,7 @@ so a menu closing inside a dialog does not close the dialog. \`helix-select\`,
 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.
 
-### 3. Styling a disabled control with \`:disabled\`
+### 4. Styling a disabled control with \`:disabled\`
 
 \`\`\`css
 helix-input:disabled { … }   /* right: matches a disabled fieldset too */
@@ -7758,7 +7834,7 @@ The browser disables a control inside \`<fieldset disabled>\` without adding an
 attribute to it. The \`[disabled]\` selector does not match it, so the control
 looks enabled while it does not accept input.
 
-### 4. Loading every style layer before the elements
+### 5. Loading every style layer before the elements
 
 \`\`\`ts
 import '@fusion.dev/helix-styles/helix.css'
@@ -7879,18 +7955,15 @@ directory you own. You paste the line above, and you can delete it.
 
 ## Install the Helix MCP server
 
-\`\`\`json
-{
-  "mcpServers": {
-    "helix": { "command": "helix", "args": ["mcp"] }
-  }
-}
+\`\`\`sh
+helix mcp init --client claude
 \`\`\`
 
-\`helix mcp\` is a subcommand of the CLI. It serves MCP over stdio, which Claude,
-Cursor, Windsurf, and Zed all read. It computes the theme a given brand color
-produces, which no document can list. It runs on your machine, talks to a client
-you chose, and makes no network requests.
+\`helix mcp\` answers from the Helix packages your project installs: families,
+examples, import lines, tokens, and the theme a brand color produces. \`--client\`
+takes \`claude\`, \`cursor\`, or \`vscode\`, and writes the server into the file that
+client reads. [Coding agents](./coding-agents) lists the tools. It runs on your
+machine, talks to a client you chose, and makes no network requests.
 
 ## What this guide does not cover
 
@@ -7898,10 +7971,9 @@ you chose, and makes no network requests.
 and hooks change with the library, and they are in a file you can fetch. A list
 of them here would be a second copy that goes stale. Fetch the family.
 
-**The theme a brand color produces.** Helix computes it, so use \`helix mcp\`, an
-MCP server over stdio with \`helix_audit_theme\` and \`helix_derive_theme\`. Both
-take the same JSON that a \`helix.theme.json\` file holds. It runs on your
-machine, and we do not host it.
+**The theme a brand color produces.** Helix computes it, so call
+\`helix_derive_theme\`, or run \`helix theme build\`. Both take the same JSON that a
+\`helix.theme.json\` file holds.
 
 **Whether a component fits your case.** Read the examples to decide. Every
 family's \`.md\` file includes them as text, and