@fusion.dev/helix-docs 0.192.0 → 0.194.0

package/dist/sources.generated.js

@@ -930,7 +930,7 @@ table and is styled by the token system, and the table is its accessible
 representation. When you need a grammar of graphics, use a charting library.
 `,
     'coding-agents': `---
-description: The files an AI agent can read to write Helix code, and where to find each one.
+description: Install Helix for a coding agent, and the files an agent can read to write Helix code.
 order: 4
 section: Getting started
 title: Coding agents
@@ -942,6 +942,72 @@ We publish Helix as text for agents that write Helix code, so an agent does not
 need to read the rendered website. Three sources give it the library as text.
 We generate all three from the same sources as this site.
 
+## Install the plugin
+
+Helix's plugin gives an agent the [Helix skill](./using-helix-with-an-agent) and
+the Helix MCP server in one install. The server runs
+\`npx @fusion.dev/helix-cli mcp\`, the command line your project installs, so its
+answers are your version's.
+
+| Tool | Install |
+|---|---|
+| Claude Code | \`claude plugin marketplace add project-fusion/fusion\`, then \`claude plugin install helix@fusion\` |
+| Cursor | \`/plugin marketplace add https://github.com/project-fusion/fusion\` in Cursor's agent, then install \`helix\`. A team marketplace can import the repository instead |
+| VS Code | Add \`"chat.plugins.marketplaces": ["project-fusion/fusion"]\` to your settings, search \`@agentPlugins\` in the Extensions view, and install \`helix\` |
+| GitHub Copilot CLI | \`copilot plugin install project-fusion/fusion:helix/plugin\` |
+| Codex | \`codex plugin marketplace add project-fusion/fusion\`, then \`codex plugin add helix@fusion\` |
+| Devin | \`devin plugins install project-fusion/fusion#helix/plugin\` |
+| Gemini CLI | \`gemini skills install https://github.com/project-fusion/fusion.git --path helix/plugin/skills/helix\`, for the skill alone |
+
+The plugin follows the latest release of Helix. Its skill points to the copy in
+\`node_modules\`, which matches the version you installed.
+
+## Link the skill without a plugin
+
+**Point your tool at the skill, and do not copy it.** A copy starts to go stale
+as soon as you paste it, and the skill changes with the library. The skill in
+the package matches the Helix you installed.
+
+Most tools read skills from \`.agents/skills\`, and Claude Code and Cline from
+\`.claude/skills\`. Link it into the one your tool reads:
+
+\`\`\`sh
+mkdir -p .agents/skills
+ln -s ../../node_modules/@fusion.dev/helix/skills/helix .agents/skills/helix
+\`\`\`
+
+Other tools read a file in your repository. Add a line to it that names the
+skill, or this page:
+
+\`\`\`md
+Helix: read node_modules/@fusion.dev/helix/skills/helix/SKILL.md before
+writing components, and node_modules/@fusion.dev/helix/api.json for the API.
+\`\`\`
+
+| Tool | Where it goes |
+|---|---|
+| Claude Code | \`.claude/skills/helix\`, or a line in \`AGENTS.md\` or \`CLAUDE.md\` |
+| Cursor | \`.cursor/rules/\` |
+| GitHub Copilot | \`.github/copilot-instructions.md\` |
+| Anything else | Whatever it reads. The line is the same |
+
+We do not write those files for you, and we chose this on purpose. You would
+have to maintain a file we generated in your repository against our changes. A
+tool that rewrote it on install would be a dependency you did not ask for, in a
+directory you own. You add the link or the line, and you can delete it.
+
+## Install the Helix MCP server
+
+\`\`\`sh
+helix mcp init --client claude
+\`\`\`
+
+\`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. [The Helix MCP server](#the-helix-mcp-server) lists the tools. It runs on your
+machine, talks to a client you chose, and makes no network requests.
+
 ## The manifest
 
 \`\`\`
@@ -1009,37 +1075,12 @@ agent uses most:
 - \`specifier\` and \`words\` on each element: the line that registers it, and the
   properties \`registerWords\` translates
 
-## Import every family you write
-
-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:
-
-\`\`\`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.
-
 ## Check the code you wrote
 
-These checks run on your project, and each one prints JSON with \`--json\`:
-
-| Command | What it finds |
-|---|---|
-| \`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 |
-
-\`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.
+\`helix scan\`, \`helix diagnostics --once\`, and \`helix theme audit\` check what an
+agent wrote, and the MCP server runs the same checks.
+[Using Helix with an agent](./using-helix-with-an-agent#check-the-code-you-wrote)
+lists what each finds.
 
 ## The index
 
@@ -4356,7 +4397,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 251,850 | 80,719 | 69,051 |
+| Lit and \`@fusion.dev/helix-core\` | 251,897 | 80,754 | 69,093 |
 
 ## Whole packages
 
@@ -4367,12 +4408,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 251,059 | 80,557 | 68,786 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,359,782 | 380,639 | 285,473 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 251,106 | 80,604 | 68,830 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,359,829 | 380,685 | 285,603 | 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,043,729 | 529,254 | 377,743 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,043,807 | 529,318 | 377,652 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -4393,13 +4434,13 @@ 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 18,135 bytes gzipped alone, and it adds 4,023 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.
+**Most of your first component is the shared runtime.** The median styled family is 18,136 bytes gzipped alone, and it adds 4,021 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 108 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 529,254.
+Across the 108 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 529,318.
 
-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 380,639 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 108 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 380,685 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 108 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
 
-The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 17,293 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 17,291 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -4411,43 +4452,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 41,612 | 14,008 | 12,420 |
+| \`button\` | **Helix** | 41,612 | 14,008 | 12,455 |
 | | 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,514 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Shoelace | 47,614 | 15,177 | 13,301 |
 | | Spectrum | 62,492 | 15,437 | 13,481 |
-| \`dialog\` | **Helix** | 43,360 | 14,855 | 13,243 |
+| \`dialog\` | **Helix** | 43,407 | 14,900 | 13,271 |
 | | Carbon | 510,866 | 67,390 | 39,189 |
 | | 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,974 | 14,201 |
+| \`radio\` | **Helix** | 50,349 | 15,975 | 14,204 |
 | | 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,009 |
+| \`switch\` | **Helix** | 43,562 | 14,639 | 13,019 |
 | | 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,752 | 15,775 |
+| \`tabs\` | **Helix** | 55,263 | 17,752 | 15,850 |
 | | 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,834 | 19,393 |
+| \`tooltip\` | **Helix** | 61,420 | 21,834 | 19,346 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 
-At least one system is smaller than Helix on \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 5,314 bytes gzipped. 11 of 27 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 5,315 bytes gzipped. 11 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.
 
@@ -4493,107 +4534,107 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 31,879 | 11,804 | 10,470 | 5,329 | 1,575 | 1,256 |
-| \`announcement\` | 36,692 | 13,312 | 11,876 | 4,682 | 1,386 | 1,056 |
-| \`app-header\` | 32,289 | 11,898 | 10,585 | 5,871 | 1,771 | 1,332 |
-| \`area-chart\` | 90,301 | 31,727 | 28,021 | 14,057 | 4,328 | 3,571 |
-| \`avatar\` | 30,463 | 11,595 | 10,369 | 3,957 | 1,212 | 992 |
-| \`badge\` | 27,088 | 10,568 | 9,410 | 2,942 | 897 | 809 |
-| \`bar-chart\` | 94,416 | 32,821 | 29,080 | 18,022 | 5,407 | 4,361 |
-| \`blockquote\` | 24,107 | 9,421 | 8,332 | 2,402 | 887 | 743 |
-| \`breadcrumbs\` | 36,279 | 13,907 | 12,385 | 7,360 | 2,421 | 1,922 |
-| \`button\` | 35,194 | 12,591 | 11,200 | 4,925 | 1,443 | 1,149 |
-| \`button-group\` | 27,640 | 10,382 | 9,203 | 4,927 | 1,509 | 1,195 |
-| \`callout\` | 35,256 | 13,593 | 12,072 | 2,884 | 981 | 712 |
-| \`canvas\` | 108,483 | 34,750 | 30,384 | 68,924 | 20,915 | 17,537 |
-| \`card\` | 23,777 | 9,054 | 8,019 | 2,090 | 654 | 479 |
-| \`carousel\` | 42,748 | 15,233 | 13,608 | 15,005 | 4,187 | 3,250 |
-| \`chat\` | 79,390 | 26,446 | 23,381 | 27,455 | 8,063 | 6,360 |
-| \`checkbox\` | 40,374 | 13,681 | 12,222 | 3,107 | 957 | 656 |
-| \`checkbox-group\` | 47,602 | 15,599 | 13,904 | 8,325 | 2,356 | 1,816 |
-| \`code\` | 20,301 | 8,016 | 7,122 | 138 | 75 | 240 |
-| \`code-block\` | 102,738 | 34,889 | 30,831 | 36,842 | 10,761 | 8,794 |
-| \`color-input\` | 141,792 | 45,090 | 39,364 | 55,134 | 14,318 | 11,616 |
-| \`color-picker\` | 103,415 | 32,966 | 28,868 | 47,255 | 12,727 | 10,341 |
-| \`combobox\` | 132,023 | 41,951 | 36,945 | 35,789 | 9,121 | 7,168 |
-| \`command\` | 99,513 | 31,475 | 27,706 | 30,059 | 8,124 | 6,386 |
-| \`copy-button\` | 80,548 | 27,649 | 24,500 | 18,341 | 4,985 | 3,936 |
-| \`data-table\` | 199,900 | 61,426 | 52,599 | 89,490 | 23,843 | 19,079 |
-| \`date-input\` | 141,223 | 44,511 | 39,074 | 38,228 | 9,472 | 7,537 |
-| \`date-picker\` | 61,360 | 20,935 | 18,732 | 20,345 | 5,604 | 4,337 |
-| \`description-list\` | 22,900 | 8,765 | 7,766 | 1,565 | 526 | 419 |
-| \`dialog\` | 38,247 | 13,598 | 12,117 | 5,837 | 1,727 | 1,350 |
-| \`divider\` | 22,991 | 8,923 | 7,888 | 1,416 | 508 | 332 |
-| \`donut-chart\` | 89,212 | 31,129 | 27,510 | 14,641 | 4,489 | 3,621 |
-| \`drawer\` | 42,892 | 15,123 | 13,470 | 7,698 | 2,299 | 1,887 |
-| \`drilldown\` | 42,756 | 14,941 | 13,295 | 9,709 | 2,723 | 2,106 |
-| \`empty\` | 24,194 | 9,250 | 8,200 | 1,951 | 642 | 451 |
-| \`file-input\` | 57,757 | 20,019 | 17,836 | 13,093 | 4,143 | 3,249 |
-| \`filter-input\` | 97,846 | 32,819 | 29,103 | 21,629 | 6,180 | 4,854 |
-| \`format-date\` | 30,158 | 11,290 | 10,085 | 4,434 | 1,266 | 1,052 |
-| \`graph\` | 74,369 | 24,503 | 21,667 | 21,877 | 6,476 | 5,185 |
-| \`heatmap\` | 98,128 | 33,502 | 29,597 | 18,944 | 5,578 | 4,446 |
-| \`icon\` | 82,157 | 28,051 | 23,971 | 58,304 | 19,614 | 16,081 |
-| \`icon-button\` | 35,305 | 12,619 | 11,227 | 5,034 | 1,472 | 1,068 |
-| \`image\` | 25,504 | 9,479 | 8,405 | 3,823 | 1,153 | 933 |
-| \`input\` | 46,361 | 15,975 | 14,087 | 7,352 | 2,426 | 1,783 |
-| \`kbd\` | 27,511 | 10,569 | 9,338 | 3,516 | 1,114 | 876 |
-| \`legend\` | 35,184 | 12,934 | 11,491 | 2,957 | 988 | 785 |
-| \`lightbox\` | 55,724 | 18,816 | 16,718 | 16,730 | 4,662 | 3,434 |
-| \`line-chart\` | 91,335 | 31,880 | 28,296 | 14,762 | 4,390 | 3,634 |
-| \`list\` | 61,803 | 21,293 | 18,983 | 15,241 | 4,436 | 3,398 |
-| \`listbox\` | 76,711 | 25,427 | 22,459 | 15,564 | 4,611 | 3,478 |
-| \`loader\` | 26,379 | 10,041 | 8,907 | 2,775 | 945 | 814 |
-| \`map\` | 78,565 | 24,393 | 21,373 | 37,026 | 10,112 | 7,935 |
-| \`megamenu\` | 60,027 | 21,697 | 19,192 | 8,596 | 2,356 | 1,795 |
-| \`menu\` | 97,473 | 32,553 | 28,774 | 30,180 | 7,955 | 6,350 |
-| \`meter\` | 31,721 | 12,025 | 10,720 | 4,894 | 1,438 | 1,331 |
-| \`navigation\` | 33,088 | 12,436 | 11,038 | 3,366 | 1,152 | 1,022 |
-| \`notifications\` | 58,346 | 19,880 | 17,701 | 18,207 | 5,059 | 3,947 |
-| \`number-input\` | 56,271 | 18,841 | 16,796 | 13,523 | 3,637 | 2,673 |
-| \`object-inspector\` | 113,929 | 38,373 | 33,766 | 35,493 | 10,274 | 8,174 |
-| \`option\` | 26,477 | 9,763 | 8,665 | 4,524 | 1,201 | 924 |
-| \`outline\` | 33,612 | 12,597 | 11,180 | 7,856 | 2,562 | 2,017 |
-| \`pagination\` | 136,258 | 43,650 | 37,995 | 45,378 | 11,896 | 9,383 |
-| \`pin-input\` | 47,068 | 16,414 | 14,642 | 6,736 | 2,224 | 1,608 |
-| \`popover\` | 63,806 | 22,940 | 20,258 | 6,374 | 1,845 | 1,343 |
-| \`progress\` | 28,084 | 10,727 | 9,550 | 2,970 | 920 | 856 |
-| \`qr-code\` | 42,719 | 16,647 | 14,833 | 17,004 | 6,295 | 5,372 |
-| \`quote\` | 22,516 | 8,884 | 7,827 | 1,211 | 533 | 313 |
-| \`radio\` | 42,561 | 14,464 | 12,873 | 3,817 | 1,191 | 838 |
-| \`rating\` | 50,257 | 17,293 | 15,435 | 8,028 | 2,426 | 1,835 |
-| \`scatter-chart\` | 91,226 | 31,675 | 28,004 | 16,126 | 4,810 | 3,905 |
-| \`scroll-area\` | 30,430 | 11,078 | 9,814 | 8,499 | 2,589 | 2,068 |
-| \`select\` | 115,289 | 38,175 | 33,456 | 26,033 | 7,152 | 5,455 |
-| \`skeleton\` | 22,328 | 8,643 | 7,666 | 991 | 406 | 274 |
-| \`skip-link\` | 23,871 | 9,337 | 8,265 | 1,225 | 500 | 307 |
-| \`slider\` | 52,873 | 17,827 | 15,967 | 13,159 | 3,775 | 3,054 |
-| \`sparkline\` | 47,984 | 17,499 | 15,601 | 5,980 | 2,122 | 1,740 |
-| \`spatial-heatmap\` | 109,081 | 37,164 | 32,728 | 27,225 | 8,001 | 6,498 |
-| \`spatial-scatter-chart\` | 94,415 | 33,050 | 29,166 | 16,256 | 5,251 | 4,226 |
-| \`spatial-surface-chart\` | 96,111 | 33,772 | 29,722 | 17,890 | 5,911 | 4,777 |
-| \`speed-dial\` | 68,751 | 24,718 | 21,856 | 10,915 | 2,964 | 2,339 |
-| \`splitter\` | 43,751 | 15,169 | 13,536 | 14,396 | 3,846 | 3,053 |
-| \`stat\` | 25,255 | 9,675 | 8,619 | 2,303 | 767 | 521 |
-| \`steps\` | 53,623 | 18,636 | 16,599 | 13,602 | 3,853 | 3,146 |
-| \`switch\` | 39,233 | 13,496 | 12,036 | 1,679 | 610 | 415 |
-| \`table\` | 118,358 | 37,062 | 32,216 | 45,147 | 12,471 | 10,027 |
-| \`tabs\` | 46,310 | 15,908 | 14,141 | 10,491 | 2,879 | 2,221 |
-| \`tag\` | 42,676 | 15,621 | 13,970 | 8,454 | 2,532 | 1,990 |
-| \`textarea\` | 43,852 | 14,940 | 13,353 | 5,402 | 1,596 | 1,175 |
-| \`time-input\` | 169,269 | 52,675 | 45,788 | 48,510 | 12,432 | 9,928 |
-| \`time-picker\` | 99,603 | 31,517 | 27,755 | 33,933 | 9,203 | 7,198 |
-| \`timeline\` | 31,286 | 11,863 | 10,626 | 4,061 | 1,217 | 998 |
-| \`toast\` | 50,871 | 17,940 | 16,020 | 12,123 | 3,514 | 2,751 |
-| \`toggle\` | 45,577 | 15,269 | 13,606 | 6,007 | 1,819 | 1,438 |
-| \`toolbar\` | 31,047 | 11,572 | 10,294 | 5,158 | 1,656 | 1,348 |
-| \`tooltip\` | 58,616 | 21,090 | 18,701 | 8,433 | 2,350 | 1,865 |
-| \`tour\` | 83,670 | 28,721 | 25,378 | 19,814 | 5,442 | 4,322 |
-| \`tree\` | 67,586 | 22,717 | 20,253 | 17,198 | 4,960 | 3,915 |
-| \`trend\` | 29,717 | 11,568 | 10,337 | 3,486 | 1,114 | 748 |
-| \`video\` | 141,208 | 44,138 | 38,461 | 66,218 | 16,799 | 13,832 |
-| \`video-playlist\` | 127,686 | 41,301 | 36,361 | 42,774 | 11,208 | 9,211 |
-| \`virtual-list\` | 63,451 | 21,631 | 19,239 | 23,305 | 7,147 | 5,852 |
+| \`accordion\` | 31,879 | 11,804 | 10,470 | 5,329 | 1,584 | 1,204 |
+| \`announcement\` | 36,692 | 13,312 | 11,893 | 4,682 | 1,388 | 1,101 |
+| \`app-header\` | 32,289 | 11,898 | 10,551 | 5,871 | 1,759 | 1,312 |
+| \`area-chart\` | 90,301 | 31,727 | 28,017 | 14,057 | 4,331 | 3,465 |
+| \`avatar\` | 30,463 | 11,596 | 10,369 | 3,957 | 1,206 | 975 |
+| \`badge\` | 27,088 | 10,568 | 9,406 | 2,942 | 909 | 757 |
+| \`bar-chart\` | 94,416 | 32,821 | 29,056 | 18,022 | 5,411 | 4,357 |
+| \`blockquote\` | 24,107 | 9,420 | 8,334 | 2,402 | 884 | 652 |
+| \`breadcrumbs\` | 36,279 | 13,907 | 12,385 | 7,360 | 2,429 | 1,944 |
+| \`button\` | 35,194 | 12,591 | 11,200 | 4,925 | 1,443 | 1,131 |
+| \`button-group\` | 27,640 | 10,382 | 9,204 | 4,927 | 1,514 | 1,162 |
+| \`callout\` | 35,256 | 13,593 | 12,073 | 2,884 | 977 | 780 |
+| \`canvas\` | 108,483 | 34,750 | 30,428 | 68,924 | 20,914 | 17,652 |
+| \`card\` | 23,824 | 9,093 | 8,106 | 2,090 | 653 | 533 |
+| \`carousel\` | 42,748 | 15,233 | 13,610 | 15,005 | 4,196 | 3,211 |
+| \`chat\` | 79,390 | 26,446 | 23,375 | 27,455 | 8,064 | 6,395 |
+| \`checkbox\` | 40,374 | 13,681 | 12,198 | 3,107 | 953 | 678 |
+| \`checkbox-group\` | 47,602 | 15,601 | 13,897 | 8,325 | 2,365 | 1,717 |
+| \`code\` | 20,301 | 8,015 | 7,122 | 138 | 73 | 25 |
+| \`code-block\` | 102,738 | 34,889 | 30,833 | 36,842 | 10,758 | 8,782 |
+| \`color-input\` | 141,792 | 45,090 | 39,356 | 55,132 | 14,316 | 11,584 |
+| \`color-picker\` | 103,415 | 32,966 | 28,858 | 47,253 | 12,729 | 10,287 |
+| \`combobox\` | 132,023 | 41,951 | 36,939 | 35,789 | 9,118 | 7,130 |
+| \`command\` | 99,560 | 31,521 | 27,729 | 30,059 | 8,120 | 6,390 |
+| \`copy-button\` | 80,548 | 27,648 | 24,460 | 18,341 | 4,992 | 3,960 |
+| \`data-table\` | 199,900 | 61,426 | 52,524 | 89,488 | 23,835 | 19,149 |
+| \`date-input\` | 141,223 | 44,511 | 39,138 | 38,228 | 9,486 | 7,492 |
+| \`date-picker\` | 61,360 | 20,935 | 18,805 | 20,345 | 5,607 | 4,454 |
+| \`description-list\` | 22,900 | 8,765 | 7,765 | 1,565 | 529 | 302 |
+| \`dialog\` | 38,294 | 13,635 | 12,133 | 5,837 | 1,719 | 1,302 |
+| \`divider\` | 22,991 | 8,924 | 7,882 | 1,416 | 507 | 400 |
+| \`donut-chart\` | 89,212 | 31,129 | 27,564 | 14,641 | 4,489 | 3,590 |
+| \`drawer\` | 42,939 | 15,158 | 13,506 | 7,698 | 2,304 | 1,742 |
+| \`drilldown\` | 42,756 | 14,941 | 13,295 | 9,709 | 2,730 | 2,100 |
+| \`empty\` | 24,241 | 9,287 | 8,245 | 1,951 | 644 | 439 |
+| \`file-input\` | 57,757 | 20,019 | 17,807 | 13,093 | 4,149 | 3,315 |
+| \`filter-input\` | 97,846 | 32,818 | 29,132 | 21,629 | 6,183 | 4,933 |
+| \`format-date\` | 30,158 | 11,290 | 10,085 | 4,434 | 1,269 | 1,040 |
+| \`graph\` | 74,369 | 24,503 | 21,694 | 21,877 | 6,464 | 5,154 |
+| \`heatmap\` | 98,128 | 33,502 | 29,631 | 18,944 | 5,586 | 4,404 |
+| \`icon\` | 82,157 | 28,049 | 23,964 | 58,304 | 19,611 | 15,897 |
+| \`icon-button\` | 35,305 | 12,619 | 11,227 | 5,034 | 1,480 | 1,208 |
+| \`image\` | 25,504 | 9,479 | 8,405 | 3,823 | 1,151 | 945 |
+| \`input\` | 46,361 | 15,975 | 14,074 | 7,352 | 2,434 | 1,809 |
+| \`kbd\` | 27,511 | 10,569 | 9,338 | 3,516 | 1,119 | 901 |
+| \`legend\` | 35,184 | 12,934 | 11,492 | 2,957 | 993 | 759 |
+| \`lightbox\` | 55,724 | 18,816 | 16,719 | 16,730 | 4,681 | 3,522 |
+| \`line-chart\` | 91,335 | 31,880 | 28,245 | 14,762 | 4,405 | 3,591 |
+| \`list\` | 61,803 | 21,292 | 18,983 | 15,241 | 4,431 | 3,429 |
+| \`listbox\` | 76,711 | 25,427 | 22,459 | 15,564 | 4,618 | 3,475 |
+| \`loader\` | 26,379 | 10,041 | 8,930 | 2,775 | 948 | 654 |
+| \`map\` | 78,565 | 24,393 | 21,306 | 37,026 | 10,131 | 7,995 |
+| \`megamenu\` | 60,027 | 21,697 | 19,186 | 8,596 | 2,361 | 1,732 |
+| \`menu\` | 97,473 | 32,553 | 28,731 | 30,180 | 7,973 | 6,406 |
+| \`meter\` | 31,721 | 12,025 | 10,728 | 4,894 | 1,438 | 1,260 |
+| \`navigation\` | 33,088 | 12,436 | 11,036 | 3,366 | 1,150 | 954 |
+| \`notifications\` | 58,346 | 19,881 | 17,728 | 18,207 | 5,059 | 3,947 |
+| \`number-input\` | 56,271 | 18,842 | 16,797 | 13,523 | 3,633 | 2,708 |
+| \`object-inspector\` | 113,929 | 38,373 | 33,731 | 35,493 | 10,287 | 8,146 |
+| \`option\` | 26,477 | 9,763 | 8,667 | 4,524 | 1,192 | 940 |
+| \`outline\` | 33,612 | 12,597 | 11,180 | 7,856 | 2,581 | 2,088 |
+| \`pagination\` | 136,258 | 43,650 | 38,001 | 45,378 | 11,902 | 9,398 |
+| \`pin-input\` | 47,068 | 16,413 | 14,641 | 6,736 | 2,230 | 1,693 |
+| \`popover\` | 63,853 | 22,981 | 20,338 | 6,374 | 1,856 | 1,351 |
+| \`progress\` | 28,084 | 10,728 | 9,551 | 2,970 | 919 | 789 |
+| \`qr-code\` | 42,719 | 16,647 | 14,841 | 17,004 | 6,296 | 5,377 |
+| \`quote\` | 22,516 | 8,884 | 7,829 | 1,211 | 531 | 405 |
+| \`radio\` | 42,561 | 14,464 | 12,873 | 3,817 | 1,204 | 851 |
+| \`rating\` | 50,257 | 17,291 | 15,429 | 8,028 | 2,436 | 1,906 |
+| \`scatter-chart\` | 91,226 | 31,675 | 28,009 | 16,126 | 4,820 | 3,949 |
+| \`scroll-area\` | 30,430 | 11,078 | 9,813 | 8,499 | 2,593 | 2,089 |
+| \`select\` | 115,289 | 38,175 | 33,407 | 26,033 | 7,161 | 5,483 |
+| \`skeleton\` | 22,328 | 8,643 | 7,668 | 991 | 402 | 266 |
+| \`skip-link\` | 23,871 | 9,338 | 8,265 | 1,225 | 493 | 361 |
+| \`slider\` | 52,873 | 17,827 | 15,916 | 13,159 | 3,787 | 3,004 |
+| \`sparkline\` | 47,984 | 17,500 | 15,637 | 5,980 | 2,116 | 1,585 |
+| \`spatial-heatmap\` | 109,081 | 37,164 | 32,781 | 27,225 | 8,015 | 6,482 |
+| \`spatial-scatter-chart\` | 94,415 | 33,051 | 29,102 | 16,258 | 5,255 | 4,252 |
+| \`spatial-surface-chart\` | 96,111 | 33,772 | 29,752 | 17,890 | 5,910 | 4,832 |
+| \`speed-dial\` | 68,751 | 24,717 | 21,949 | 10,915 | 2,961 | 2,411 |
+| \`splitter\` | 43,751 | 15,169 | 13,536 | 14,396 | 3,855 | 3,139 |
+| \`stat\` | 25,255 | 9,674 | 8,601 | 2,303 | 765 | 559 |
+| \`steps\` | 53,623 | 18,636 | 16,600 | 13,602 | 3,849 | 3,027 |
+| \`switch\` | 39,233 | 13,495 | 12,037 | 1,679 | 615 | 474 |
+| \`table\` | 118,358 | 37,062 | 32,238 | 45,147 | 12,474 | 9,919 |
+| \`tabs\` | 46,310 | 15,908 | 14,138 | 10,491 | 2,883 | 2,252 |
+| \`tag\` | 42,676 | 15,621 | 13,972 | 8,454 | 2,531 | 1,931 |
+| \`textarea\` | 43,852 | 14,941 | 13,326 | 5,402 | 1,596 | 1,240 |
+| \`time-input\` | 169,269 | 52,675 | 45,763 | 48,510 | 12,450 | 9,857 |
+| \`time-picker\` | 99,603 | 31,518 | 27,788 | 33,933 | 9,200 | 7,222 |
+| \`timeline\` | 31,286 | 11,863 | 10,576 | 4,061 | 1,216 | 912 |
+| \`toast\` | 50,871 | 17,940 | 16,019 | 12,123 | 3,519 | 2,914 |
+| \`toggle\` | 45,577 | 15,271 | 13,575 | 6,007 | 1,808 | 1,331 |
+| \`toolbar\` | 31,047 | 11,573 | 10,294 | 5,158 | 1,661 | 1,302 |
+| \`tooltip\` | 58,616 | 21,090 | 18,709 | 8,433 | 2,352 | 1,956 |
+| \`tour\` | 83,717 | 28,762 | 25,413 | 19,814 | 5,443 | 4,255 |
+| \`tree\` | 67,586 | 22,717 | 20,231 | 17,198 | 4,962 | 3,902 |
+| \`trend\` | 29,717 | 11,568 | 10,337 | 3,486 | 1,116 | 926 |
+| \`video\` | 141,208 | 44,138 | 38,535 | 66,218 | 16,803 | 13,737 |
+| \`video-playlist\` | 127,686 | 41,301 | 36,388 | 42,774 | 11,219 | 9,185 |
+| \`virtual-list\` | 63,451 | 21,631 | 19,310 | 23,305 | 7,160 | 5,748 |
 
 ### Styled tier
 
@@ -4601,114 +4642,114 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 35,311 | 12,653 | 11,243 | 8,746 | 2,445 | 1,948 |
-| \`announcement\` | 41,307 | 14,365 | 12,833 | 9,278 | 2,474 | 2,031 |
-| \`app-header\` | 37,449 | 13,103 | 11,683 | 11,016 | 2,986 | 2,445 |
-| \`area-chart\` | 98,393 | 33,576 | 29,658 | 22,130 | 6,228 | 5,011 |
-| \`aura\` | 56,085 | 19,320 | 17,092 | 29,774 | 9,288 | 7,861 |
-| \`avatar\` | 33,464 | 12,351 | 11,022 | 6,945 | 1,975 | 1,683 |
-| \`badge\` | 32,595 | 11,821 | 10,511 | 8,438 | 2,152 | 1,710 |
-| \`bar-chart\` | 108,944 | 35,726 | 31,573 | 32,531 | 8,366 | 6,880 |
-| \`blockquote\` | 26,332 | 9,968 | 8,809 | 4,612 | 1,414 | 1,162 |
-| \`breadcrumbs\` | 43,220 | 15,115 | 13,466 | 14,285 | 3,663 | 2,974 |
-| \`button\` | 41,612 | 14,008 | 12,420 | 11,324 | 2,879 | 2,375 |
-| \`button-group\` | 31,138 | 11,066 | 9,811 | 8,408 | 2,198 | 1,803 |
-| \`callout\` | 39,049 | 14,537 | 12,940 | 6,659 | 1,932 | 1,616 |
-| \`canvas\` | 129,523 | 38,715 | 33,847 | 89,608 | 24,791 | 20,939 |
-| \`card\` | 27,678 | 10,059 | 8,914 | 5,976 | 1,639 | 1,351 |
-| \`carousel\` | 53,234 | 17,022 | 15,215 | 25,476 | 6,003 | 4,821 |
-| \`chat\` | 94,674 | 29,166 | 25,849 | 42,729 | 10,813 | 8,831 |
-| \`checkbox\` | 46,865 | 15,190 | 13,518 | 9,580 | 2,473 | 1,959 |
-| \`checkbox-group\` | 54,826 | 17,244 | 15,360 | 15,538 | 4,014 | 3,208 |
-| \`code\` | 21,154 | 8,333 | 7,414 | 976 | 407 | 463 |
-| \`code-block\` | 127,213 | 38,714 | 34,149 | 61,301 | 14,711 | 12,090 |
-| \`color-input\` | 184,176 | 51,349 | 44,873 | 97,505 | 20,451 | 17,115 |
-| \`color-picker\` | 140,348 | 38,509 | 33,804 | 84,178 | 18,270 | 15,095 |
-| \`combobox\` | 147,503 | 44,927 | 39,482 | 51,253 | 12,081 | 9,825 |
-| \`command\` | 110,791 | 33,835 | 29,737 | 41,332 | 10,518 | 8,485 |
-| \`copy-button\` | 92,577 | 29,825 | 26,436 | 30,354 | 7,209 | 5,753 |
-| \`data-table\` | 230,715 | 66,818 | 57,261 | 120,284 | 29,332 | 23,801 |
-| \`date-input\` | 162,349 | 48,216 | 42,359 | 59,337 | 13,203 | 10,908 |
-| \`date-picker\` | 69,281 | 22,362 | 19,988 | 28,248 | 7,042 | 5,628 |
-| \`description-list\` | 25,855 | 9,517 | 8,458 | 4,508 | 1,258 | 998 |
-| \`dialog\` | 43,360 | 14,855 | 13,243 | 10,933 | 3,018 | 2,483 |
-| \`divider\` | 25,291 | 9,545 | 8,433 | 3,699 | 1,139 | 935 |
-| \`donut-chart\` | 99,170 | 33,263 | 29,402 | 24,576 | 6,672 | 5,360 |
-| \`drawer\` | 48,725 | 16,508 | 14,716 | 13,512 | 3,705 | 2,967 |
-| \`drilldown\` | 48,438 | 16,238 | 14,448 | 15,377 | 4,031 | 3,256 |
-| \`empty\` | 25,503 | 9,726 | 8,589 | 3,242 | 1,089 | 985 |
-| \`file-input\` | 69,285 | 22,419 | 19,917 | 24,612 | 6,540 | 5,345 |
-| \`filter-input\` | 108,688 | 34,991 | 31,043 | 32,465 | 8,391 | 6,825 |
-| \`flex\` | 25,740 | 9,194 | 8,174 | 4,763 | 1,045 | 901 |
-| \`format-date\` | 30,414 | 11,403 | 10,154 | 4,672 | 1,395 | 1,169 |
-| \`graph\` | 89,037 | 27,079 | 23,907 | 36,527 | 9,167 | 7,455 |
-| \`grid\` | 27,002 | 9,846 | 8,729 | 5,638 | 1,466 | 1,309 |
-| \`heatmap\` | 105,486 | 35,190 | 31,043 | 26,281 | 7,243 | 5,862 |
-| \`icon\` | 83,995 | 28,567 | 24,447 | 60,129 | 20,127 | 16,447 |
-| \`icon-button\` | 43,040 | 13,980 | 12,449 | 12,753 | 2,874 | 2,393 |
-| \`image\` | 26,892 | 9,946 | 8,805 | 5,193 | 1,601 | 1,348 |
-| \`input\` | 50,619 | 17,064 | 15,040 | 11,593 | 3,532 | 2,700 |
-| \`kbd\` | 29,504 | 11,109 | 9,831 | 5,494 | 1,656 | 1,440 |
-| \`legend\` | 40,423 | 14,213 | 12,647 | 8,067 | 2,273 | 1,813 |
-| \`lightbox\` | 62,016 | 20,155 | 17,976 | 23,006 | 5,997 | 4,729 |
-| \`line-chart\` | 102,454 | 34,257 | 30,351 | 25,863 | 6,825 | 5,595 |
-| \`list\` | 68,150 | 22,814 | 20,348 | 21,568 | 5,956 | 4,680 |
-| \`listbox\` | 81,154 | 26,542 | 23,433 | 19,993 | 5,717 | 4,348 |
-| \`loader\` | 29,263 | 10,815 | 9,641 | 5,642 | 1,693 | 1,421 |
-| \`map\` | 111,513 | 29,574 | 26,020 | 69,963 | 15,520 | 12,612 |
-| \`megamenu\` | 64,996 | 22,864 | 20,217 | 13,546 | 3,514 | 2,779 |
-| \`menu\` | 108,403 | 34,710 | 30,603 | 41,097 | 10,145 | 8,216 |
-| \`meter\` | 37,896 | 13,377 | 11,975 | 11,050 | 2,795 | 2,437 |
-| \`navigation\` | 36,814 | 13,268 | 11,770 | 7,077 | 2,012 | 1,622 |
-| \`notifications\` | 71,808 | 22,446 | 20,064 | 31,662 | 7,634 | 6,277 |
-| \`number-input\` | 61,253 | 20,026 | 17,841 | 18,490 | 4,826 | 3,830 |
-| \`object-inspector\` | 130,338 | 41,205 | 36,215 | 51,881 | 13,180 | 10,743 |
-| \`option\` | 29,672 | 10,762 | 9,548 | 7,711 | 2,200 | 1,814 |
-| \`orb\` | 35,265 | 13,488 | 12,001 | 9,732 | 3,656 | 3,134 |
-| \`outline\` | 37,846 | 13,457 | 11,936 | 12,073 | 3,434 | 2,697 |
-| \`pagination\` | 153,264 | 46,929 | 40,841 | 62,365 | 15,223 | 12,273 |
-| \`pin-input\` | 50,409 | 17,316 | 15,447 | 10,058 | 3,143 | 2,440 |
-| \`popover\` | 66,958 | 23,702 | 20,994 | 9,508 | 2,639 | 2,007 |
-| \`progress\` | 35,232 | 12,380 | 11,029 | 10,101 | 2,590 | 2,193 |
-| \`qr-code\` | 44,321 | 17,121 | 15,245 | 18,588 | 6,777 | 5,738 |
-| \`quote\` | 23,074 | 9,078 | 7,995 | 1,752 | 694 | 585 |
-| \`radio\` | 50,349 | 15,974 | 14,201 | 11,594 | 2,747 | 2,142 |
-| \`rating\` | 54,190 | 18,518 | 16,500 | 11,945 | 3,633 | 3,037 |
-| \`sandbox\` | 104,428 | 31,486 | 27,627 | 72,144 | 19,144 | 16,122 |
-| \`scatter-chart\` | 100,317 | 33,784 | 29,874 | 25,196 | 6,951 | 5,662 |
-| \`scroll-area\` | 35,437 | 12,026 | 10,715 | 13,489 | 3,577 | 2,894 |
-| \`select\` | 124,418 | 40,070 | 35,151 | 35,145 | 9,069 | 7,163 |
-| \`skeleton\` | 26,090 | 9,664 | 8,585 | 4,738 | 1,404 | 1,203 |
-| \`skip-link\` | 25,441 | 9,851 | 8,690 | 2,780 | 969 | 863 |
-| \`slider\` | 67,842 | 20,140 | 18,012 | 28,108 | 6,151 | 4,988 |
-| \`sparkline\` | 53,442 | 18,850 | 16,822 | 11,420 | 3,469 | 2,926 |
-| \`spatial-heatmap\` | 118,016 | 39,202 | 34,563 | 36,139 | 10,078 | 8,224 |
-| \`spatial-scatter-chart\` | 101,873 | 34,752 | 30,661 | 23,693 | 6,973 | 5,687 |
-| \`spatial-surface-chart\` | 103,007 | 35,444 | 31,280 | 24,765 | 7,585 | 6,266 |
-| \`speed-dial\` | 75,797 | 26,105 | 23,189 | 17,945 | 4,386 | 3,472 |
-| \`splitter\` | 49,804 | 16,207 | 14,471 | 20,430 | 4,913 | 3,977 |
-| \`stat\` | 28,117 | 10,371 | 9,279 | 5,157 | 1,466 | 1,202 |
-| \`steps\` | 67,449 | 21,378 | 19,023 | 27,416 | 6,645 | 5,354 |
-| \`strands\` | 62,138 | 23,150 | 20,401 | 38,012 | 13,745 | 11,840 |
-| \`switch\` | 43,562 | 14,637 | 13,009 | 5,998 | 1,757 | 1,352 |
-| \`table\` | 135,900 | 40,155 | 34,965 | 62,688 | 15,587 | 12,685 |
-| \`tabs\` | 55,263 | 17,752 | 15,775 | 19,436 | 4,752 | 3,802 |
-| \`tag\` | 47,247 | 16,757 | 14,959 | 13,015 | 3,624 | 2,905 |
-| \`text\` | 28,756 | 9,942 | 8,755 | 7,395 | 1,508 | 1,237 |
-| \`textarea\` | 47,785 | 15,949 | 14,227 | 9,318 | 2,652 | 2,048 |
-| \`time-input\` | 193,597 | 56,836 | 49,584 | 72,825 | 16,676 | 13,510 |
-| \`time-picker\` | 111,928 | 33,946 | 29,852 | 46,250 | 11,626 | 9,335 |
-| \`timeline\` | 38,179 | 13,326 | 11,923 | 10,946 | 2,728 | 2,148 |
-| \`toast\` | 58,767 | 19,783 | 17,646 | 20,005 | 5,381 | 4,318 |
-| \`toggle\` | 50,439 | 16,510 | 14,665 | 10,854 | 3,070 | 2,459 |
-| \`toolbar\` | 33,726 | 12,065 | 10,723 | 7,822 | 2,154 | 1,799 |
-| \`tooltip\` | 61,420 | 21,834 | 19,393 | 11,219 | 3,086 | 2,499 |
-| \`tour\` | 93,661 | 30,697 | 27,169 | 29,784 | 7,469 | 5,931 |
-| \`tree\` | 76,275 | 24,651 | 21,973 | 25,873 | 6,900 | 5,606 |
-| \`trend\` | 31,231 | 12,049 | 10,746 | 4,981 | 1,596 | 1,293 |
-| \`video\` | 161,715 | 47,867 | 41,792 | 86,709 | 20,349 | 17,043 |
-| \`video-playlist\` | 143,639 | 44,279 | 38,944 | 58,710 | 14,185 | 11,749 |
-| \`virtual-list\` | 65,445 | 22,138 | 19,718 | 25,282 | 7,661 | 6,176 |
+| \`accordion\` | 35,311 | 12,653 | 11,212 | 8,746 | 2,446 | 2,060 |
+| \`announcement\` | 41,307 | 14,365 | 12,836 | 9,278 | 2,485 | 1,972 |
+| \`app-header\` | 37,449 | 13,103 | 11,680 | 11,016 | 2,982 | 2,438 |
+| \`area-chart\` | 98,393 | 33,576 | 29,680 | 22,130 | 6,236 | 5,083 |
+| \`aura\` | 56,085 | 19,320 | 17,090 | 29,774 | 9,282 | 7,803 |
+| \`avatar\` | 33,464 | 12,351 | 11,066 | 6,945 | 1,982 | 1,637 |
+| \`badge\` | 32,595 | 11,821 | 10,514 | 8,438 | 2,162 | 1,752 |
+| \`bar-chart\` | 108,944 | 35,726 | 31,539 | 32,531 | 8,360 | 6,866 |
+| \`blockquote\` | 26,332 | 9,968 | 8,824 | 4,612 | 1,422 | 1,221 |
+| \`breadcrumbs\` | 43,220 | 15,115 | 13,532 | 14,285 | 3,663 | 2,991 |
+| \`button\` | 41,612 | 14,008 | 12,455 | 11,324 | 2,890 | 2,340 |
+| \`button-group\` | 31,138 | 11,066 | 9,841 | 8,408 | 2,193 | 1,717 |
+| \`callout\` | 39,049 | 14,537 | 12,904 | 6,659 | 1,939 | 1,538 |
+| \`canvas\` | 129,523 | 38,715 | 33,849 | 89,608 | 24,792 | 20,896 |
+| \`card\` | 27,725 | 10,100 | 8,963 | 5,976 | 1,640 | 1,412 |
+| \`carousel\` | 53,234 | 17,022 | 15,227 | 25,476 | 6,005 | 4,908 |
+| \`chat\` | 94,674 | 29,166 | 25,837 | 42,729 | 10,823 | 8,822 |
+| \`checkbox\` | 46,865 | 15,190 | 13,514 | 9,580 | 2,480 | 1,943 |
+| \`checkbox-group\` | 54,826 | 17,244 | 15,360 | 15,538 | 4,019 | 3,109 |
+| \`code\` | 21,154 | 8,333 | 7,394 | 976 | 404 | 368 |
+| \`code-block\` | 127,213 | 38,714 | 34,147 | 61,301 | 14,729 | 12,023 |
+| \`color-input\` | 184,176 | 51,349 | 44,945 | 97,505 | 20,459 | 17,136 |
+| \`color-picker\` | 140,348 | 38,509 | 33,818 | 84,178 | 18,271 | 15,178 |
+| \`combobox\` | 147,503 | 44,927 | 39,538 | 51,253 | 12,079 | 9,675 |
+| \`command\` | 110,838 | 33,878 | 29,811 | 41,332 | 10,512 | 8,549 |
+| \`copy-button\` | 92,577 | 29,825 | 26,419 | 30,354 | 7,206 | 5,862 |
+| \`data-table\` | 230,715 | 66,818 | 57,241 | 120,284 | 29,334 | 23,795 |
+| \`date-input\` | 162,349 | 48,216 | 42,470 | 59,337 | 13,202 | 10,831 |
+| \`date-picker\` | 69,281 | 22,362 | 20,076 | 28,248 | 7,048 | 5,764 |
+| \`description-list\` | 25,855 | 9,517 | 8,467 | 4,508 | 1,253 | 1,082 |
+| \`dialog\` | 43,407 | 14,900 | 13,271 | 10,933 | 3,027 | 2,496 |
+| \`divider\` | 25,291 | 9,546 | 8,434 | 3,699 | 1,140 | 956 |
+| \`donut-chart\` | 99,170 | 33,263 | 29,399 | 24,576 | 6,688 | 5,395 |
+| \`drawer\` | 48,772 | 16,542 | 14,744 | 13,512 | 3,701 | 3,104 |
+| \`drilldown\` | 48,438 | 16,236 | 14,452 | 15,377 | 4,023 | 3,285 |
+| \`empty\` | 25,550 | 9,762 | 8,654 | 3,242 | 1,097 | 811 |
+| \`file-input\` | 69,285 | 22,419 | 19,952 | 24,612 | 6,538 | 5,331 |
+| \`filter-input\` | 108,688 | 34,990 | 30,983 | 32,465 | 8,398 | 6,864 |
+| \`flex\` | 25,740 | 9,194 | 8,150 | 4,763 | 1,041 | 911 |
+| \`format-date\` | 30,414 | 11,403 | 10,191 | 4,672 | 1,401 | 1,173 |
+| \`graph\` | 89,037 | 27,080 | 23,947 | 36,527 | 9,167 | 7,434 |
+| \`grid\` | 27,002 | 9,846 | 8,729 | 5,638 | 1,469 | 1,276 |
+| \`heatmap\` | 105,486 | 35,190 | 31,043 | 26,281 | 7,256 | 5,856 |
+| \`icon\` | 83,995 | 28,567 | 24,524 | 60,129 | 20,147 | 16,458 |
+| \`icon-button\` | 43,040 | 13,980 | 12,450 | 12,753 | 2,881 | 2,232 |
+| \`image\` | 26,892 | 9,946 | 8,806 | 5,193 | 1,595 | 1,359 |
+| \`input\` | 50,619 | 17,064 | 15,034 | 11,593 | 3,541 | 2,695 |
+| \`kbd\` | 29,504 | 11,108 | 9,827 | 5,494 | 1,668 | 1,277 |
+| \`legend\` | 40,423 | 14,214 | 12,646 | 8,067 | 2,286 | 1,752 |
+| \`lightbox\` | 62,016 | 20,155 | 17,955 | 23,006 | 5,985 | 4,597 |
+| \`line-chart\` | 102,454 | 34,257 | 30,365 | 25,863 | 6,820 | 5,495 |
+| \`list\` | 68,150 | 22,814 | 20,368 | 21,568 | 5,960 | 4,810 |
+| \`listbox\` | 81,154 | 26,542 | 23,470 | 19,993 | 5,717 | 4,361 |
+| \`loader\` | 29,263 | 10,815 | 9,652 | 5,642 | 1,704 | 1,404 |
+| \`map\` | 111,513 | 29,574 | 25,953 | 69,963 | 15,530 | 12,540 |
+| \`megamenu\` | 64,996 | 22,864 | 20,254 | 13,546 | 3,538 | 2,702 |
+| \`menu\` | 108,403 | 34,710 | 30,647 | 41,097 | 10,151 | 8,248 |
+| \`meter\` | 37,896 | 13,377 | 11,942 | 11,050 | 2,799 | 2,381 |
+| \`navigation\` | 36,814 | 13,269 | 11,770 | 7,077 | 2,016 | 1,595 |
+| \`notifications\` | 71,839 | 22,457 | 20,046 | 31,691 | 7,660 | 6,292 |
+| \`number-input\` | 61,253 | 20,026 | 17,829 | 18,490 | 4,814 | 3,860 |
+| \`object-inspector\` | 130,338 | 41,205 | 36,256 | 51,881 | 13,188 | 10,707 |
+| \`option\` | 29,672 | 10,762 | 9,548 | 7,711 | 2,201 | 1,779 |
+| \`orb\` | 35,265 | 13,488 | 12,001 | 9,732 | 3,645 | 3,055 |
+| \`outline\` | 37,846 | 13,458 | 11,936 | 12,073 | 3,441 | 2,856 |
+| \`pagination\` | 153,264 | 46,929 | 40,863 | 62,363 | 15,233 | 12,251 |
+| \`pin-input\` | 50,409 | 17,316 | 15,431 | 10,058 | 3,137 | 2,329 |
+| \`popover\` | 67,005 | 23,748 | 20,996 | 9,508 | 2,647 | 2,109 |
+| \`progress\` | 35,232 | 12,380 | 11,035 | 10,101 | 2,588 | 2,315 |
+| \`qr-code\` | 44,321 | 17,121 | 15,279 | 18,588 | 6,784 | 5,745 |
+| \`quote\` | 23,074 | 9,079 | 7,998 | 1,752 | 704 | 648 |
+| \`radio\` | 50,349 | 15,975 | 14,204 | 11,592 | 2,742 | 2,183 |
+| \`rating\` | 54,190 | 18,519 | 16,488 | 11,945 | 3,641 | 2,938 |
+| \`sandbox\` | 104,428 | 31,486 | 27,625 | 72,144 | 19,140 | 16,207 |
+| \`scatter-chart\` | 100,317 | 33,784 | 29,939 | 25,196 | 6,955 | 5,758 |
+| \`scroll-area\` | 35,437 | 12,026 | 10,702 | 13,489 | 3,575 | 2,930 |
+| \`select\` | 124,418 | 40,070 | 35,132 | 35,145 | 9,071 | 7,140 |
+| \`skeleton\` | 26,090 | 9,664 | 8,587 | 4,738 | 1,396 | 1,182 |
+| \`skip-link\` | 25,441 | 9,851 | 8,691 | 2,780 | 970 | 843 |
+| \`slider\` | 67,842 | 20,138 | 18,001 | 28,108 | 6,159 | 4,980 |
+| \`sparkline\` | 53,442 | 18,851 | 16,864 | 11,420 | 3,478 | 2,863 |
+| \`spatial-heatmap\` | 118,016 | 39,202 | 34,545 | 36,139 | 10,081 | 8,262 |
+| \`spatial-scatter-chart\` | 101,873 | 34,752 | 30,607 | 23,695 | 6,991 | 5,660 |
+| \`spatial-surface-chart\` | 103,007 | 35,444 | 31,284 | 24,765 | 7,587 | 6,162 |
+| \`speed-dial\` | 75,797 | 26,105 | 23,165 | 17,945 | 4,385 | 3,465 |
+| \`splitter\` | 49,804 | 16,208 | 14,471 | 20,430 | 4,922 | 4,076 |
+| \`stat\` | 28,117 | 10,371 | 9,280 | 5,157 | 1,469 | 1,201 |
+| \`steps\` | 67,449 | 21,378 | 19,083 | 27,416 | 6,651 | 5,427 |
+| \`strands\` | 62,138 | 23,151 | 20,397 | 38,012 | 13,741 | 11,850 |
+| \`switch\` | 43,562 | 14,639 | 13,019 | 5,998 | 1,762 | 1,477 |
+| \`table\` | 135,900 | 40,155 | 34,967 | 62,688 | 15,591 | 12,696 |
+| \`tabs\` | 55,263 | 17,752 | 15,850 | 19,436 | 4,760 | 3,803 |
+| \`tag\` | 47,247 | 16,757 | 14,961 | 13,013 | 3,628 | 2,912 |
+| \`text\` | 28,756 | 9,943 | 8,755 | 7,395 | 1,497 | 1,217 |
+| \`textarea\` | 47,785 | 15,949 | 14,234 | 9,318 | 2,650 | 2,138 |
+| \`time-input\` | 193,597 | 56,836 | 49,555 | 72,825 | 16,683 | 13,638 |
+| \`time-picker\` | 111,928 | 33,946 | 29,855 | 46,250 | 11,628 | 9,363 |
+| \`timeline\` | 38,179 | 13,327 | 11,920 | 10,946 | 2,723 | 2,242 |
+| \`toast\` | 58,767 | 19,783 | 17,679 | 20,005 | 5,383 | 4,363 |
+| \`toggle\` | 50,439 | 16,510 | 14,664 | 10,854 | 3,073 | 2,558 |
+| \`toolbar\` | 33,726 | 12,066 | 10,725 | 7,822 | 2,162 | 1,693 |
+| \`tooltip\` | 61,420 | 21,834 | 19,346 | 11,219 | 3,088 | 2,508 |
+| \`tour\` | 93,708 | 30,741 | 27,201 | 29,784 | 7,467 | 6,010 |
+| \`tree\` | 76,275 | 24,651 | 21,944 | 25,873 | 6,911 | 5,538 |
+| \`trend\` | 31,231 | 12,049 | 10,723 | 4,981 | 1,588 | 1,260 |
+| \`video\` | 161,715 | 47,867 | 41,782 | 86,709 | 20,350 | 17,119 |
+| \`video-playlist\` | 143,639 | 44,279 | 38,894 | 58,710 | 14,190 | 11,757 |
+| \`virtual-list\` | 65,445 | 22,138 | 19,709 | 25,282 | 7,667 | 6,257 |
 
 ## What an install adds to \`node_modules\`
 
@@ -4720,12 +4761,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,593,533 | 567 | 743,513 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 25,855,666 | 730 | 2,314,273 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-core\` | 2,593,631 | 567 | 743,574 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
+| \`@fusion.dev/helix-headless\` | 25,857,080 | 730 | 2,314,273 | \`@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,243 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
-| \`@fusion.dev/helix\` | 27,138,779 | 981 | 543,329 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix\` | 27,147,873 | 981 | 543,383 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -7944,7 +7985,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: Five mistakes that look like Helix bugs, and the files an agent should read.
+description: The rules an agent follows to write Helix code, and the five mistakes that look like Helix bugs.
 parent: coding-agents
 section: Getting started
 title: Using Helix with an agent
@@ -7953,41 +7994,52 @@ title: Using Helix with an agent
 
 # Using Helix with an agent
 
-This guide is in two places, and both say the same thing:
+This guide is what an agent reads before writing Helix code. It is also the
+\`helix\` skill: \`skills/helix/SKILL.md\` in \`@fusion.dev/helix\`, which matches the
+version installed, and the skill in Helix's plugin for coding agents. [Coding
+agents](./coding-agents) says how to install the plugin or link the skill.
 
-- this page, which [llms.txt](https://fusion.dev/llms.txt) indexes
-- \`skills/helix/SKILL.md\` inside \`@fusion.dev/helix\`, which matches the version
-  you installed and works offline
+## Use a Helix family wherever one exists
 
-[Link your tool to this guide](#link-your-tool-to-this-guide) says how to point
-each tool at one of them. [The MCP server](./coding-agents) works with any
-vendor and runs code, and Claude, Cursor, Windsurf, and Zed all support it.
+Write a Helix element for everything Helix has a family for, and a native
+element only for page structure. Before you write a native element, ask whether
+a family stands in for it:
 
-## Read the family before writing its tags
+- \`helix api find <tag>\`, or the MCP tool \`helix_find\`, answers a native tag
+  with its family: \`button\` finds Button, and \`h1\` finds Text.
+- Each family's file lists the native elements it replaces under \`replaces\`.
 
-\`\`\`
-https://fusion.dev/helix/components/<family>.md
-https://fusion.dev/helix/components/<family>.json
-\`\`\`
+These native elements have families:
 
-Each family's file lists:
+- controls: \`button\`, \`input\` of every visible type, \`select\`, and \`textarea\`
+- overlays and disclosure: \`dialog\` and \`details\`
+- text: \`h1\` to \`h6\` and \`p\`, which \`helix-text\` writes with \`as="h1"\` and the
+  rest
+- content: \`img\`, \`picture\`, \`hr\`, \`ul\`, \`ol\`, \`table\`, \`code\`, \`pre\`, \`kbd\`,
+  \`blockquote\`, \`q\`, \`video\`, \`progress\`, and \`meter\`
 
-- the import lines for the family
-- every tag
-- every property, with its literal union
-- every event, with its class and its React prop
-- every slot, part, and custom property
-- the examples, each with the import lines it needs
+Page structure stays native: \`main\`, \`section\`, \`article\`, \`header\`, \`footer\`,
+\`nav\`, \`form\`, \`label\`, \`div\`, \`span\`, and \`a\`. So does markup a CMS writes
+inside \`data-prose\`.
 
-**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.
+\`helix scan\` and the MCP tool \`helix_check\` report each native element a page
+writes where an installed family stands in for it, as \`native-element\`.
+
+## Look up a family before writing its tags
+
+Each family's API is in the packages you installed, and on this site:
 
-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.
+- \`helix api family <family>\`, or the MCP tool \`helix_family\`
+- \`node_modules/@fusion.dev/helix/api.json\`
+- \`https://fusion.dev/helix/components/<family>.md\` and \`.json\`
+
+Each lists the import lines, every tag, every property with its literal union,
+every event with its React prop, every slot, part, and custom property, and the
+examples with the imports each one needs.
+
+**If a tag is not in a family's file, it does not exist.** A property value
+outside a declared union is invalid. Find a family by name, alias, or purpose
+with \`helix api find\`, or the MCP tool \`helix_find\`.
 
 ## Five mistakes that look like Helix bugs
 
@@ -8092,12 +8144,9 @@ Each missing layer has its own symptom:
 - Unstyled headings mean \`base.css\` is missing.
 - No color anywhere means \`primitives.css\` or \`tokens.css\` is missing.
 
-To tell the last two apart, look at the stylesheet. The screen looks the same.
-Without \`tokens.css\`, nothing declares \`--helix-color-*\`. Without
-\`primitives.css\`, all 185 semantic tokens are declared and every color resolves
-to \`rgba(0, 0, 0, 0)\`, because \`tokens.css\` refers to a primitive 297 times and
-to nothing else. A missing \`primitives.css\` looks like a working install, and
-\`helix.css\` exists to prevent it.
+To tell the last two apart, look at the stylesheet. Without \`tokens.css\`,
+nothing declares \`--helix-color-*\`. Without \`primitives.css\`, every token is
+declared and every color resolves to transparent.
 
 ## Choosing a component family
 
@@ -8137,73 +8186,25 @@ You can style a component in three ways. Try them in this order:
 belong to \`@fusion.dev/helix-styles\`. The underscore marks them as internal.
 Read the semantic tokens that refer to them.
 
-## Styling HTML without custom elements
-
-\`@fusion.dev/helix-styles\` is plain CSS with no JavaScript. It includes recipes
-for markup that Helix does not render:
-
-\`\`\`html
-<button
-  data-button="solid"
-  data-button-tone="primary"
->Save</button>
-<article data-prose><h2>From a CMS</h2></article>
-<div data-density="sm">…</div>
-\`\`\`
-
-A recipe sets appearance only. It has none of these:
-
-- state
-- form participation
-- focus trapping
-- keyboard handling
-
-If you are adding a script to a recipe, use the component.
-
-## Link your tool to this guide
-
-**Point your tool at the guide, and do not copy it.** A copy starts to go stale
-as soon as you paste it, and the guide changes with the library.
-
-The skill in the package matches the Helix you installed. In Claude Code, link
-it into your project's skills folder:
-
-\`\`\`sh
-mkdir -p .claude/skills
-ln -s ../../node_modules/@fusion.dev/helix/skills/helix .claude/skills/helix
-\`\`\`
-
-Other tools read a file in your repository. Add a line to it that names the
-skill, or this page:
-
-\`\`\`md
-Helix: read node_modules/@fusion.dev/helix/skills/helix/SKILL.md before
-writing components, and node_modules/@fusion.dev/helix/api.json for the API.
-\`\`\`
+## Markup Helix does not render
 
-| Tool | Where it goes |
-|---|---|
-| Claude Code | \`.claude/skills/helix\`, or a line in \`AGENTS.md\` or \`CLAUDE.md\` |
-| Cursor | \`.cursor/rules/\` |
-| GitHub Copilot | \`.github/copilot-instructions.md\` |
-| Anything else | Whatever it reads. The line is the same |
+HTML that a CMS or a Markdown library writes, inside an element with
+\`data-prose\`, takes Helix's typography from \`@fusion.dev/helix-styles\` and needs
+no Helix elements. Everywhere else, write the Helix element.
 
-We do not write those files for you, and we chose this on purpose. You would
-have to maintain a file we generated in your repository against our changes. A
-tool that rewrote it on install would be a dependency you did not ask for, in a
-directory you own. You add the link or the line, and you can delete it.
+## Check the code you wrote
 
-## Install the Helix MCP server
+Run these after you write Helix code, and fix every finding at \`error\` and
+\`warn\` before you finish. Each prints JSON with \`--json\`.
 
-\`\`\`sh
-helix mcp init --client claude
-\`\`\`
+| Command | MCP tool | What it finds |
+|---|---|---|
+| \`helix scan\` | \`helix_check\` | Unknown tags, attributes, values, slots, parts, hooks, events, and tokens, a native element a Helix family replaces, a missing import, and the rest, each with its file and line |
+| \`helix diagnostics --once <url>\` | \`helix_check_page\` | The same on the running page, and what the library logged as it ran |
+| \`helix theme audit\` | \`helix_audit_theme\` | Every foreground and background pair in your theme that misses its contrast target |
 
-\`helix 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.
+\`helix scan --file <path>\` reports one file's findings and still reads the whole
+project, so an import in another file counts.
 
 ## What this guide does not cover