@fusion.dev/helix-docs 0.208.0 → 0.209.0

package/dist/sources.generated.js

@@ -263,7 +263,7 @@ send keys that fast. \`detectChanges()\` renders the change before your handler
 returns.
 `,
     'browser-support': `---
-description: The browser features Helix uses, and the browser we test in.
+description: The browser features Helix uses, and the browsers we test in.
 order: 5
 section: Getting started
 title: Browser support
@@ -277,12 +277,32 @@ support in older browsers. Your browser needs every feature Helix uses.
 
 ## What we test
 
-We test in Chromium, through Playwright. The DOM specs run in it, and the pixel
-baselines are captured in it, on Linux, with the network blocked.
+We test in Chromium and WebKit, through Playwright, on Linux, with the network
+blocked.
 
-We do not run the tests in Firefox or Safari. The rest of this page lists the
-browser features Helix uses. If you ship Helix to Firefox or Safari and find
-something broken, please report it. Our tests would not have caught it.
+- The DOM specs run in both.
+- The pixel baselines are captured in Chromium only.
+
+WebKit is the engine in Safari, and the system webview a Tauri app draws with on
+macOS and Linux. Playwright builds its own WebKit from the same source as
+Safari, so a difference that only Safari shows can still get past our tests.
+
+We do not run the tests in Firefox. The rest of this page lists the browser
+features Helix uses. If you ship Helix to Firefox or Safari and find something
+broken, please report it.
+
+### Known differences in WebKit
+
+A few specs still fail in WebKit. We keep each one on a list until it is fixed.
+
+- Checkbox Group, Radio Group, Option, Toast, and Tooltip name or describe their
+  host through \`ElementInternals\`, pointing into their own shadow root. WebKit
+  reads those references back as empty. We have not yet checked whether
+  VoiceOver still reads the name.
+- In Virtual List, End can leave the last row below the viewport after \`gap\`
+  changes on a list that is already drawn.
+- In the sandbox's source pane, in WebKit on macOS, one undo after an indent
+  also removes the text typed before it.
 
 ## Browser features Helix uses
 
@@ -411,7 +431,7 @@ names the tag to define.
 
 [//]: # (renders)
 
-**38 of the 106 headless families interpolate another family's tag**, across 24 distinct children.
+**39 of the 107 headless families interpolate another family's tag**, across 26 distinct children.
 
 | Family | Renders |
 |---|---|
@@ -434,6 +454,7 @@ names the tag to define.
 | \`pagination\` | \`option\`, \`select\` |
 | \`select\` | \`listbox\` |
 | \`steps\`, \`tour\` | \`button\` |
+| \`terminal\` | \`button\`, \`icon-button\`, \`toolbar\` |
 | \`time-input\` | \`tag\`, \`time-picker\` |
 | \`time-picker\` | \`listbox\`, \`option\` |
 | \`video\`, \`video-playlist\` | \`menu\`, \`menu-item\` |
@@ -5101,7 +5122,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 264,965 | 85,796 | 73,204 |
+| Lit and \`@fusion.dev/helix-core\` | 266,106 | 85,971 | 73,239 |
 
 ## Whole packages
 
@@ -5112,12 +5133,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 264,174 | 85,658 | 72,792 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,457,984 | 408,952 | 306,853 | 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-core\` | 265,315 | 85,814 | 72,940 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,477,055 | 413,517 | 310,509 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-icons\` | 56,982 | 18,222 | 15,516 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 4,030 | 1,791 | 1,560 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
 | \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,920 | 123,363 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
-| \`@fusion.dev/helix\` | 2,178,920 | 564,548 | 402,727 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,206,311 | 570,788 | 406,879 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -5131,20 +5152,20 @@ shows the whole cost of using the base layer on its own.
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
 | \`base.css\` | 33,986 | 4,785 | 4,158 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
-| \`elements.css\` | 19,633 | 2,937 | 2,632 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
+| \`elements.css\` | 19,686 | 2,942 | 2,638 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
 | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
 | \`primitives.css\` | 7,511 | 1,401 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
 | \`tokens.css\` | 23,030 | 2,795 | 2,319 | The 200 semantic tokens. Every styled component needs them. |
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 19,331 bytes gzipped alone, and it adds 4,376 to a page that already has Helix. The shared runtime is 77 percent of the first component, and the component itself is 23 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
+**Most of your first component is the shared runtime.** The median styled family is 19,793 bytes gzipped alone, and it adds 4,537 to a page that already has Helix. The shared runtime is 77 percent of the first component, and the component itself is 23 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the 113 styled components, the smallest is \`code\` at 8,560 bytes gzipped alone, and the largest is \`data-table\` at 67,564. Every family together is 564,548.
+Across the 114 styled components, the smallest is \`code\` at 8,560 bytes gzipped alone, and the largest is \`data-table\` at 67,608. Every family together is 570,788.
 
-No family imports a barrel. The \`barrels\` rule in \`fusion x workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 408,952 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 113 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
+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 413,517 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 114 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 18,197 bytes gzipped alone.
+The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 18,410 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -5156,43 +5177,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 42,729 | 14,402 | 12,812 |
+| \`button\` | **Helix** | 42,729 | 14,402 | 12,850 |
 | | Carbon | 133,058 | 20,959 | 17,685 |
 | | Material Web | 47,060 | 14,173 | 12,591 |
 | | Spectrum | 98,792 | 22,045 | 18,674 |
 | | Web Awesome | 136,044 | 33,730 | 28,760 |
-| \`checkbox\` | **Helix** | 47,728 | 15,518 | 13,835 |
+| \`checkbox\` | **Helix** | 47,728 | 15,519 | 13,814 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Spectrum | 62,492 | 15,437 | 13,481 |
 | | Web Awesome | 115,251 | 28,728 | 24,420 |
-| \`dialog\` | **Helix** | 44,311 | 15,225 | 13,593 |
+| \`dialog\` | **Helix** | 44,311 | 15,228 | 13,600 |
 | | Carbon | 510,866 | 67,390 | 39,189 |
 | | Material Web | 34,238 | 11,510 | 10,229 |
 | | Spectrum | 155,708 | 31,899 | 26,262 |
 | | Web Awesome | 148,657 | 36,692 | 31,388 |
-| \`radio\` | **Helix** | 51,120 | 16,281 | 14,511 |
+| \`radio\` | **Helix** | 51,120 | 16,284 | 14,491 |
 | | Carbon | 63,055 | 16,887 | 14,605 |
 | | Material Web | 41,044 | 13,234 | 11,757 |
 | | Spectrum | 38,685 | 10,660 | 9,370 |
 | | Web Awesome | 112,026 | 27,416 | 23,128 |
-| \`switch\` | **Helix** | 44,449 | 14,978 | 13,360 |
+| \`switch\` | **Helix** | 44,449 | 14,979 | 13,332 |
 | | Carbon | 69,423 | 17,127 | 14,764 |
 | | Material Web | 50,155 | 14,577 | 12,935 |
 | | Spectrum | 62,322 | 15,059 | 13,321 |
 | | Web Awesome | 45,876 | 15,003 | 13,475 |
-| \`tabs\` | **Helix** | 56,031 | 18,048 | 16,065 |
+| \`tabs\` | **Helix** | 56,031 | 18,046 | 16,086 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Spectrum | 64,875 | 18,298 | 16,283 |
 | | Web Awesome | 153,439 | 37,030 | 31,737 |
-| \`tooltip\` | **Helix** | 62,502 | 22,262 | 19,733 |
+| \`tooltip\` | **Helix** | 62,502 | 22,264 | 19,787 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 | | Web Awesome | 70,568 | 24,005 | 21,107 |
 
-At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,621 bytes gzipped. 8 of 27 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,624 bytes gzipped. 8 of 27 peer measurements are smaller than the Helix row.
 
 Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
 
@@ -5266,112 +5287,113 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 32,671 | 12,095 | 10,732 | 5,377 | 1,559 | 1,194 |
-| \`announcement\` | 37,661 | 13,706 | 12,236 | 4,700 | 1,380 | 1,049 |
-| \`app-header\` | 33,168 | 12,242 | 10,882 | 5,900 | 1,761 | 1,246 |
-| \`area-chart\` | 99,355 | 34,967 | 30,847 | 14,417 | 4,437 | 3,594 |
-| \`avatar\` | 31,887 | 12,152 | 10,893 | 3,999 | 1,247 | 878 |
-| \`badge\` | 28,118 | 10,943 | 9,778 | 2,960 | 888 | 610 |
-| \`bar-chart\` | 107,369 | 37,644 | 33,272 | 21,901 | 6,878 | 5,672 |
-| \`blockquote\` | 24,679 | 9,638 | 8,549 | 2,400 | 883 | 697 |
-| \`breadcrumbs\` | 37,419 | 14,329 | 12,824 | 7,381 | 2,415 | 1,791 |
-| \`button\` | 36,221 | 12,969 | 11,566 | 5,127 | 1,523 | 1,079 |
-| \`button-group\` | 28,214 | 10,616 | 9,418 | 4,923 | 1,508 | 1,108 |
-| \`callout\` | 36,284 | 13,987 | 12,431 | 2,884 | 961 | 621 |
-| \`canvas\` | 109,962 | 35,313 | 30,864 | 68,989 | 21,024 | 17,559 |
-| \`card\` | 24,397 | 9,311 | 8,253 | 2,090 | 634 | 510 |
-| \`carousel\` | 45,040 | 16,011 | 14,306 | 15,317 | 4,235 | 3,211 |
-| \`chat\` | 80,951 | 26,985 | 23,864 | 27,678 | 8,076 | 6,463 |
-| \`checkbox\` | 41,242 | 14,016 | 12,507 | 3,107 | 960 | 626 |
-| \`checkbox-group\` | 48,465 | 15,944 | 14,216 | 8,321 | 2,373 | 1,670 |
-| \`code\` | 20,869 | 8,248 | 7,311 | 138 | 67 | -24 |
-| \`code-block\` | 104,774 | 35,631 | 31,450 | 37,349 | 10,789 | 8,793 |
-| \`color-input\` | 143,744 | 45,826 | 39,997 | 55,780 | 14,227 | 11,687 |
-| \`color-picker\` | 105,363 | 33,633 | 29,447 | 47,900 | 12,700 | 10,347 |
-| \`combobox\` | 133,766 | 42,655 | 37,560 | 35,968 | 9,135 | 7,200 |
-| \`command\` | 101,170 | 32,142 | 28,266 | 30,351 | 8,182 | 6,420 |
-| \`copy-button\` | 82,225 | 28,295 | 25,059 | 18,756 | 5,071 | 3,954 |
-| \`data-table\` | 201,919 | 62,147 | 53,113 | 89,974 | 24,051 | 19,103 |
-| \`date-input\` | 143,049 | 45,174 | 39,736 | 38,666 | 9,516 | 7,499 |
-| \`date-picker\` | 63,093 | 21,512 | 19,333 | 20,720 | 5,657 | 4,438 |
-| \`description-list\` | 23,472 | 8,993 | 7,999 | 1,565 | 499 | 281 |
-| \`dialog\` | 39,175 | 13,970 | 12,448 | 5,948 | 1,764 | 1,187 |
-| \`divider\` | 23,564 | 9,144 | 8,084 | 1,414 | 496 | 402 |
-| \`donut-chart\` | 92,673 | 32,268 | 28,551 | 14,717 | 4,499 | 3,630 |
-| \`drawer\` | 43,812 | 15,481 | 13,807 | 7,798 | 2,316 | 1,754 |
-| \`drilldown\` | 43,527 | 15,249 | 13,621 | 9,709 | 2,685 | 2,002 |
-| \`empty\` | 25,007 | 9,578 | 8,497 | 1,976 | 647 | 432 |
-| \`file-input\` | 59,118 | 20,550 | 18,267 | 13,152 | 4,120 | 3,216 |
-| \`filter-input\` | 99,578 | 33,494 | 29,711 | 21,569 | 6,178 | 4,967 |
-| \`format-date\` | 31,209 | 11,674 | 10,418 | 4,474 | 1,291 | 983 |
-| \`graph\` | 76,986 | 25,237 | 22,389 | 23,180 | 6,769 | 5,435 |
-| \`heatmap\` | 101,735 | 34,695 | 30,622 | 19,071 | 5,601 | 4,482 |
-| \`icon\` | 83,516 | 28,587 | 24,478 | 58,618 | 20,086 | 16,021 |
-| \`icon-button\` | 36,332 | 13,001 | 11,592 | 5,236 | 1,561 | 1,053 |
-| \`image\` | 26,373 | 9,843 | 8,744 | 3,845 | 1,149 | 788 |
-| \`input\` | 47,049 | 16,178 | 14,346 | 7,005 | 2,243 | 1,490 |
-| \`kbd\` | 28,084 | 10,789 | 9,553 | 3,518 | 1,104 | 719 |
-| \`legend\` | 36,396 | 13,369 | 11,949 | 2,955 | 985 | 683 |
-| \`lightbox\` | 57,138 | 19,382 | 17,237 | 16,760 | 4,615 | 3,540 |
-| \`line-chart\` | 102,350 | 35,823 | 31,629 | 16,812 | 5,063 | 4,189 |
-| \`list\` | 62,949 | 21,721 | 19,378 | 15,258 | 4,395 | 3,423 |
-| \`listbox\` | 78,070 | 25,947 | 22,965 | 15,605 | 4,580 | 3,414 |
-| \`loader\` | 27,341 | 10,451 | 9,311 | 2,785 | 941 | 602 |
-| \`log\` | 80,937 | 27,697 | 24,555 | 37,582 | 11,597 | 9,883 |
-| \`map\` | 81,046 | 25,212 | 22,051 | 37,496 | 10,232 | 8,063 |
-| \`megamenu\` | 61,165 | 22,169 | 19,586 | 8,723 | 2,443 | 1,696 |
-| \`menu\` | 98,510 | 32,960 | 29,043 | 30,262 | 7,971 | 6,326 |
-| \`meter\` | 32,921 | 12,484 | 11,131 | 4,980 | 1,464 | 1,070 |
-| \`motion-toggle\` | 26,353 | 10,248 | 9,108 | 1,426 | 515 | 353 |
-| \`navigation\` | 33,861 | 12,731 | 11,315 | 3,364 | 1,162 | 816 |
-| \`notifications\` | 59,539 | 20,330 | 18,124 | 18,280 | 5,038 | 3,887 |
-| \`number-input\` | 57,629 | 19,358 | 17,238 | 13,579 | 3,610 | 2,722 |
-| \`object-inspector\` | 115,897 | 39,008 | 34,362 | 36,018 | 10,397 | 8,308 |
-| \`option\` | 27,049 | 9,970 | 8,881 | 4,522 | 1,202 | 845 |
-| \`outline\` | 34,490 | 12,936 | 11,488 | 7,878 | 2,548 | 1,867 |
-| \`pagination\` | 138,030 | 44,303 | 38,484 | 45,681 | 11,904 | 9,402 |
-| \`pin-input\` | 48,848 | 17,044 | 15,222 | 7,207 | 2,365 | 1,631 |
-| \`popover\` | 64,882 | 23,350 | 20,646 | 6,460 | 1,853 | 1,338 |
-| \`progress\` | 29,235 | 11,153 | 9,958 | 3,006 | 944 | 719 |
-| \`qr-code\` | 43,669 | 17,003 | 15,114 | 17,002 | 6,288 | 5,419 |
-| \`quote\` | 23,088 | 9,112 | 8,040 | 1,209 | 498 | 378 |
-| \`radio\` | 43,333 | 14,777 | 13,152 | 3,815 | 1,205 | 744 |
-| \`rating\` | 51,593 | 17,779 | 15,862 | 8,057 | 2,441 | 1,711 |
-| \`scatter-chart\` | 98,654 | 34,303 | 30,299 | 20,338 | 6,375 | 5,214 |
-| \`scroll-area\` | 31,294 | 11,433 | 10,150 | 8,518 | 2,583 | 1,991 |
-| \`select\` | 116,719 | 38,717 | 33,953 | 26,155 | 7,165 | 5,404 |
-| \`skeleton\` | 22,900 | 8,871 | 7,874 | 991 | 378 | 202 |
-| \`skip-link\` | 24,547 | 9,607 | 8,536 | 1,223 | 457 | 341 |
-| \`slider\` | 54,642 | 18,411 | 16,519 | 13,623 | 3,852 | 2,979 |
-| \`sparkline\` | 49,258 | 17,982 | 16,072 | 5,982 | 2,087 | 1,500 |
-| \`spatial-bar-chart\` | 105,167 | 37,123 | 32,692 | 19,854 | 6,519 | 5,259 |
-| \`spatial-heatmap\` | 117,089 | 39,972 | 35,133 | 31,736 | 9,642 | 7,709 |
-| \`spatial-ribbon-chart\` | 104,288 | 36,729 | 32,399 | 20,791 | 6,922 | 5,684 |
-| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,712 | 19,085 | 6,281 | 4,973 |
-| \`spatial-surface-chart\` | 105,443 | 37,265 | 32,821 | 21,949 | 7,465 | 6,084 |
-| \`spatial-treemap\` | 106,561 | 37,910 | 33,351 | 21,370 | 7,346 | 5,825 |
-| \`speed-dial\` | 69,618 | 25,068 | 22,169 | 10,934 | 2,966 | 2,326 |
-| \`splitter\` | 45,071 | 15,639 | 13,995 | 14,506 | 3,885 | 3,027 |
-| \`stat\` | 26,285 | 10,056 | 8,959 | 2,322 | 766 | 442 |
-| \`steps\` | 54,926 | 19,122 | 17,014 | 13,804 | 3,888 | 2,989 |
-| \`switch\` | 40,096 | 13,832 | 12,335 | 1,679 | 619 | 349 |
-| \`table\` | 119,408 | 37,410 | 32,504 | 45,149 | 12,317 | 9,872 |
-| \`tabs\` | 47,080 | 16,201 | 14,408 | 10,491 | 2,847 | 2,214 |
-| \`tag\` | 43,623 | 15,992 | 14,289 | 8,450 | 2,508 | 1,791 |
-| \`textarea\` | 44,973 | 15,361 | 13,719 | 5,489 | 1,614 | 1,138 |
-| \`time-input\` | 170,882 | 53,314 | 46,284 | 48,574 | 12,340 | 9,861 |
-| \`time-picker\` | 101,126 | 32,099 | 28,238 | 33,987 | 9,197 | 7,160 |
-| \`timeline\` | 32,429 | 12,281 | 11,016 | 4,086 | 1,200 | 772 |
-| \`toast\` | 52,298 | 18,497 | 16,518 | 12,164 | 3,516 | 2,610 |
-| \`toggle\` | 46,246 | 15,540 | 13,826 | 6,005 | 1,801 | 1,245 |
-| \`toolbar\` | 31,817 | 11,859 | 10,565 | 5,156 | 1,628 | 1,149 |
-| \`tooltip\` | 59,698 | 21,530 | 19,098 | 8,504 | 2,352 | 1,784 |
-| \`tour\` | 85,264 | 29,314 | 25,885 | 20,091 | 5,520 | 4,335 |
-| \`tree\` | 68,641 | 23,150 | 20,590 | 17,198 | 4,916 | 3,796 |
-| \`trend\` | 30,937 | 12,023 | 10,732 | 3,590 | 1,099 | 845 |
-| \`video\` | 143,863 | 45,087 | 39,252 | 66,787 | 16,894 | 13,859 |
-| \`video-playlist\` | 128,994 | 41,833 | 36,773 | 42,860 | 11,206 | 9,139 |
-| \`virtual-list\` | 64,382 | 21,913 | 19,494 | 23,393 | 7,169 | 5,849 |
+| \`accordion\` | 32,671 | 12,094 | 10,733 | 5,377 | 1,558 | 1,223 |
+| \`announcement\` | 37,661 | 13,708 | 12,261 | 4,700 | 1,372 | 1,069 |
+| \`app-header\` | 33,168 | 12,241 | 10,876 | 5,900 | 1,744 | 1,346 |
+| \`area-chart\` | 99,355 | 34,965 | 30,812 | 14,415 | 4,382 | 3,616 |
+| \`avatar\` | 31,887 | 12,152 | 10,894 | 3,999 | 1,220 | 994 |
+| \`badge\` | 28,118 | 10,943 | 9,778 | 2,960 | 875 | 742 |
+| \`bar-chart\` | 107,369 | 37,640 | 33,226 | 21,901 | 6,885 | 5,792 |
+| \`blockquote\` | 24,679 | 9,637 | 8,534 | 2,400 | 853 | 791 |
+| \`breadcrumbs\` | 37,419 | 14,327 | 12,786 | 7,381 | 2,378 | 1,839 |
+| \`button\` | 36,221 | 12,970 | 11,572 | 5,127 | 1,507 | 1,119 |
+| \`button-group\` | 28,214 | 10,616 | 9,417 | 4,923 | 1,479 | 1,048 |
+| \`callout\` | 36,284 | 13,987 | 12,429 | 2,884 | 966 | 667 |
+| \`canvas\` | 109,988 | 35,325 | 30,896 | 68,989 | 21,021 | 17,663 |
+| \`card\` | 24,397 | 9,311 | 8,258 | 2,090 | 609 | 414 |
+| \`carousel\` | 45,167 | 16,073 | 14,357 | 15,330 | 4,224 | 3,429 |
+| \`chat\` | 81,069 | 27,038 | 23,898 | 27,682 | 8,068 | 6,441 |
+| \`checkbox\` | 41,242 | 14,017 | 12,499 | 3,107 | 939 | 733 |
+| \`checkbox-group\` | 48,465 | 15,945 | 14,237 | 8,321 | 2,325 | 1,771 |
+| \`code\` | 20,869 | 8,248 | 7,310 | 138 | 55 | 91 |
+| \`code-block\` | 104,774 | 35,632 | 31,408 | 37,349 | 10,762 | 8,854 |
+| \`color-input\` | 143,744 | 45,822 | 39,965 | 55,780 | 14,213 | 11,830 |
+| \`color-picker\` | 105,363 | 33,633 | 29,451 | 47,900 | 12,658 | 10,525 |
+| \`combobox\` | 133,766 | 42,658 | 37,464 | 35,968 | 9,150 | 7,270 |
+| \`command\` | 101,170 | 32,144 | 28,259 | 30,351 | 8,155 | 6,543 |
+| \`copy-button\` | 82,225 | 28,296 | 25,012 | 18,756 | 5,036 | 3,976 |
+| \`data-table\` | 202,025 | 62,203 | 53,212 | 89,966 | 24,051 | 19,229 |
+| \`date-input\` | 143,049 | 45,174 | 39,695 | 38,666 | 9,514 | 7,669 |
+| \`date-picker\` | 63,093 | 21,513 | 19,286 | 20,720 | 5,624 | 4,549 |
+| \`description-list\` | 23,472 | 8,992 | 7,982 | 1,565 | 491 | 312 |
+| \`dialog\` | 39,175 | 13,971 | 12,445 | 5,948 | 1,750 | 1,361 |
+| \`divider\` | 23,564 | 9,143 | 8,084 | 1,414 | 468 | 290 |
+| \`donut-chart\` | 92,673 | 32,265 | 28,574 | 14,717 | 4,458 | 3,659 |
+| \`drawer\` | 43,812 | 15,483 | 13,811 | 7,798 | 2,288 | 1,812 |
+| \`drilldown\` | 43,527 | 15,251 | 13,602 | 9,709 | 2,688 | 2,127 |
+| \`empty\` | 25,007 | 9,577 | 8,495 | 1,976 | 615 | 514 |
+| \`file-input\` | 59,118 | 20,551 | 18,298 | 13,152 | 4,110 | 3,332 |
+| \`filter-input\` | 99,578 | 33,492 | 29,737 | 21,569 | 6,139 | 4,864 |
+| \`format-date\` | 31,209 | 11,674 | 10,454 | 4,474 | 1,258 | 922 |
+| \`graph\` | 76,986 | 25,233 | 22,351 | 23,180 | 6,735 | 5,588 |
+| \`heatmap\` | 101,735 | 34,690 | 30,621 | 19,071 | 5,563 | 4,485 |
+| \`icon\` | 84,375 | 28,941 | 24,780 | 59,477 | 20,470 | 16,556 |
+| \`icon-button\` | 36,332 | 12,999 | 11,592 | 5,236 | 1,537 | 1,070 |
+| \`image\` | 26,373 | 9,843 | 8,744 | 3,845 | 1,133 | 966 |
+| \`input\` | 47,049 | 16,179 | 14,344 | 7,005 | 2,218 | 1,560 |
+| \`kbd\` | 28,084 | 10,787 | 9,545 | 3,518 | 1,086 | 792 |
+| \`legend\` | 36,396 | 13,369 | 11,915 | 2,955 | 963 | 707 |
+| \`lightbox\` | 57,138 | 19,379 | 17,221 | 16,762 | 4,594 | 3,574 |
+| \`line-chart\` | 102,350 | 35,825 | 31,641 | 16,812 | 5,020 | 4,178 |
+| \`list\` | 62,949 | 21,721 | 19,340 | 15,258 | 4,364 | 3,453 |
+| \`listbox\` | 78,070 | 25,949 | 22,952 | 15,605 | 4,558 | 3,702 |
+| \`loader\` | 27,341 | 10,451 | 9,310 | 2,785 | 909 | 838 |
+| \`log\` | 80,937 | 27,698 | 24,547 | 37,582 | 11,600 | 9,885 |
+| \`map\` | 81,046 | 25,210 | 22,087 | 37,496 | 10,221 | 8,232 |
+| \`megamenu\` | 61,165 | 22,171 | 19,600 | 8,723 | 2,415 | 1,696 |
+| \`menu\` | 98,510 | 32,958 | 29,064 | 30,262 | 7,978 | 6,564 |
+| \`meter\` | 32,921 | 12,485 | 11,169 | 4,980 | 1,426 | 1,185 |
+| \`motion-toggle\` | 26,353 | 10,249 | 9,108 | 1,426 | 485 | 409 |
+| \`navigation\` | 33,861 | 12,731 | 11,315 | 3,364 | 1,123 | 853 |
+| \`notifications\` | 59,565 | 20,344 | 18,123 | 18,280 | 5,014 | 4,131 |
+| \`number-input\` | 57,629 | 19,359 | 17,254 | 13,579 | 3,610 | 2,851 |
+| \`object-inspector\` | 115,897 | 39,007 | 34,366 | 36,018 | 10,378 | 8,431 |
+| \`option\` | 27,049 | 9,971 | 8,857 | 4,522 | 1,163 | 868 |
+| \`outline\` | 34,611 | 12,984 | 11,534 | 7,888 | 2,551 | 1,880 |
+| \`pagination\` | 138,030 | 44,309 | 38,510 | 45,681 | 11,877 | 9,516 |
+| \`pin-input\` | 48,848 | 17,045 | 15,224 | 7,207 | 2,358 | 1,761 |
+| \`popover\` | 64,882 | 23,348 | 20,630 | 6,460 | 1,849 | 1,384 |
+| \`progress\` | 29,235 | 11,152 | 9,980 | 3,006 | 911 | 699 |
+| \`qr-code\` | 43,669 | 17,005 | 15,118 | 17,002 | 6,262 | 5,336 |
+| \`quote\` | 23,088 | 9,111 | 8,039 | 1,209 | 469 | 437 |
+| \`radio\` | 43,333 | 14,778 | 13,155 | 3,815 | 1,194 | 928 |
+| \`rating\` | 51,593 | 17,779 | 15,843 | 8,057 | 2,431 | 1,811 |
+| \`scatter-chart\` | 98,654 | 34,306 | 30,268 | 20,338 | 6,357 | 5,276 |
+| \`scroll-area\` | 31,294 | 11,433 | 10,149 | 8,518 | 2,565 | 2,112 |
+| \`select\` | 116,719 | 38,719 | 33,938 | 26,155 | 7,152 | 5,621 |
+| \`skeleton\` | 22,900 | 8,871 | 7,874 | 991 | 357 | 251 |
+| \`skip-link\` | 24,547 | 9,607 | 8,535 | 1,223 | 436 | 351 |
+| \`slider\` | 54,642 | 18,410 | 16,473 | 13,623 | 3,834 | 2,938 |
+| \`sparkline\` | 49,258 | 17,983 | 16,021 | 5,980 | 2,056 | 1,731 |
+| \`spatial-bar-chart\` | 105,167 | 37,124 | 32,657 | 19,854 | 6,506 | 5,327 |
+| \`spatial-heatmap\` | 117,089 | 39,972 | 35,195 | 31,738 | 9,608 | 7,970 |
+| \`spatial-ribbon-chart\` | 104,288 | 36,725 | 32,402 | 20,791 | 6,921 | 5,748 |
+| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,675 | 19,085 | 6,254 | 5,104 |
+| \`spatial-surface-chart\` | 105,443 | 37,265 | 32,832 | 21,949 | 7,454 | 6,208 |
+| \`spatial-treemap\` | 106,561 | 37,909 | 33,341 | 21,370 | 7,339 | 5,940 |
+| \`speed-dial\` | 69,618 | 25,072 | 22,188 | 10,934 | 2,947 | 2,313 |
+| \`splitter\` | 45,071 | 15,639 | 13,967 | 14,506 | 3,849 | 3,069 |
+| \`stat\` | 26,285 | 10,056 | 8,955 | 2,322 | 726 | 548 |
+| \`steps\` | 54,926 | 19,119 | 17,023 | 13,804 | 3,872 | 3,213 |
+| \`switch\` | 40,096 | 13,831 | 12,333 | 1,679 | 580 | 328 |
+| \`table\` | 119,434 | 37,421 | 32,590 | 45,149 | 12,294 | 10,099 |
+| \`tabs\` | 47,080 | 16,201 | 14,426 | 10,491 | 2,844 | 2,157 |
+| \`tag\` | 43,623 | 15,997 | 14,325 | 8,450 | 2,504 | 2,018 |
+| \`terminal\` | 71,467 | 23,680 | 20,852 | 30,239 | 8,332 | 6,765 |
+| \`textarea\` | 44,973 | 15,362 | 13,739 | 5,489 | 1,612 | 1,177 |
+| \`time-input\` | 170,882 | 53,314 | 46,296 | 48,574 | 12,288 | 9,892 |
+| \`time-picker\` | 101,126 | 32,100 | 28,228 | 33,987 | 9,180 | 7,342 |
+| \`timeline\` | 32,429 | 12,281 | 11,016 | 4,086 | 1,172 | 885 |
+| \`toast\` | 52,298 | 18,495 | 16,474 | 12,164 | 3,488 | 2,803 |
+| \`toggle\` | 46,246 | 15,538 | 13,827 | 6,005 | 1,792 | 1,366 |
+| \`toolbar\` | 31,928 | 11,893 | 10,591 | 5,267 | 1,646 | 1,305 |
+| \`tooltip\` | 59,698 | 21,530 | 19,094 | 8,504 | 2,362 | 1,899 |
+| \`tour\` | 85,264 | 29,312 | 25,904 | 20,091 | 5,495 | 4,376 |
+| \`tree\` | 68,641 | 23,148 | 20,593 | 17,198 | 4,875 | 3,942 |
+| \`trend\` | 30,937 | 12,024 | 10,725 | 3,590 | 1,081 | 913 |
+| \`video\` | 143,863 | 45,086 | 39,243 | 66,787 | 16,872 | 13,886 |
+| \`video-playlist\` | 128,994 | 41,833 | 36,721 | 42,860 | 11,159 | 9,199 |
+| \`virtual-list\` | 64,382 | 21,914 | 19,520 | 23,393 | 7,150 | 5,810 |
 
 ### Styled tier
 
@@ -5379,119 +5401,120 @@ 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\` | 36,104 | 12,942 | 11,549 | 8,794 | 2,434 | 1,844 |
-| \`announcement\` | 42,276 | 14,774 | 13,216 | 9,296 | 2,462 | 1,854 |
-| \`app-header\` | 38,326 | 13,450 | 11,973 | 11,045 | 2,971 | 2,290 |
-| \`area-chart\` | 107,559 | 36,866 | 32,511 | 22,602 | 6,334 | 5,280 |
-| \`aura\` | 59,567 | 20,253 | 17,946 | 31,767 | 9,666 | 8,116 |
-| \`avatar\` | 34,890 | 12,910 | 11,548 | 6,987 | 1,979 | 1,591 |
-| \`badge\` | 33,626 | 12,190 | 10,866 | 8,458 | 2,159 | 1,676 |
-| \`bar-chart\` | 122,404 | 40,670 | 35,871 | 36,918 | 9,892 | 8,222 |
-| \`blockquote\` | 26,905 | 10,186 | 9,009 | 4,610 | 1,426 | 1,092 |
-| \`breadcrumbs\` | 44,356 | 15,535 | 13,878 | 14,306 | 3,647 | 3,017 |
-| \`button\` | 42,729 | 14,402 | 12,812 | 11,617 | 2,937 | 2,362 |
-| \`button-group\` | 31,709 | 11,295 | 10,029 | 8,408 | 2,202 | 1,666 |
-| \`callout\` | 40,077 | 14,932 | 13,285 | 6,659 | 1,927 | 1,417 |
-| \`canvas\` | 131,001 | 39,287 | 34,374 | 89,671 | 24,923 | 20,876 |
-| \`card\` | 28,297 | 10,317 | 9,175 | 5,976 | 1,634 | 1,228 |
-| \`carousel\` | 55,526 | 17,812 | 15,969 | 25,788 | 6,087 | 4,831 |
-| \`chat\` | 96,244 | 29,708 | 26,317 | 42,964 | 10,846 | 8,823 |
-| \`checkbox\` | 47,728 | 15,518 | 13,835 | 9,579 | 2,487 | 1,846 |
-| \`checkbox-group\` | 55,688 | 17,587 | 15,651 | 15,535 | 4,010 | 3,001 |
-| \`code\` | 21,726 | 8,560 | 7,605 | 976 | 378 | 353 |
-| \`code-block\` | 129,247 | 39,457 | 34,820 | 61,803 | 14,529 | 12,126 |
-| \`color-input\` | 186,215 | 52,107 | 45,578 | 98,238 | 20,737 | 17,207 |
-| \`color-picker\` | 142,389 | 39,199 | 34,366 | 84,910 | 18,384 | 15,229 |
-| \`combobox\` | 149,120 | 45,610 | 40,115 | 51,305 | 12,018 | 9,770 |
-| \`command\` | 112,469 | 34,490 | 30,368 | 41,644 | 10,582 | 8,569 |
-| \`copy-button\` | 94,256 | 30,467 | 26,949 | 30,769 | 7,292 | 5,845 |
-| \`data-table\` | 232,584 | 67,564 | 57,782 | 120,622 | 29,563 | 23,967 |
-| \`date-input\` | 164,353 | 48,934 | 42,951 | 59,950 | 13,125 | 10,803 |
-| \`date-picker\` | 71,139 | 22,979 | 20,573 | 28,748 | 7,140 | 5,751 |
-| \`description-list\` | 26,427 | 9,731 | 8,674 | 4,508 | 1,276 | 947 |
-| \`dialog\` | 44,311 | 15,225 | 13,593 | 11,064 | 3,040 | 2,365 |
-| \`divider\` | 25,863 | 9,771 | 8,637 | 3,697 | 1,133 | 839 |
-| \`donut-chart\` | 102,652 | 34,419 | 30,376 | 24,673 | 6,688 | 5,492 |
-| \`drawer\` | 49,642 | 16,870 | 15,043 | 13,612 | 3,748 | 3,013 |
-| \`drilldown\` | 49,204 | 16,541 | 14,765 | 15,375 | 4,005 | 3,300 |
-| \`empty\` | 26,316 | 10,056 | 8,907 | 3,267 | 1,091 | 967 |
-| \`file-input\` | 70,648 | 22,941 | 20,421 | 24,668 | 6,541 | 5,376 |
-| \`filter-input\` | 110,412 | 35,679 | 31,581 | 32,396 | 8,373 | 6,767 |
-| \`flex\` | 26,312 | 9,424 | 8,375 | 4,761 | 1,042 | 854 |
-| \`format-date\` | 31,463 | 11,789 | 10,568 | 4,712 | 1,390 | 1,001 |
-| \`graph\` | 92,818 | 27,924 | 24,609 | 38,992 | 9,576 | 7,765 |
-| \`grid\` | 27,762 | 10,137 | 8,994 | 5,655 | 1,457 | 1,189 |
-| \`heatmap\` | 110,057 | 36,548 | 32,267 | 27,373 | 7,431 | 6,030 |
-| \`icon\` | 85,551 | 29,192 | 25,040 | 60,473 | 20,644 | 16,559 |
-| \`icon-button\` | 44,066 | 14,349 | 12,787 | 12,955 | 2,918 | 2,065 |
-| \`image\` | 27,760 | 10,306 | 9,130 | 5,216 | 1,623 | 1,184 |
-| \`input\` | 51,304 | 17,264 | 15,273 | 11,243 | 3,350 | 2,448 |
-| \`kbd\` | 30,078 | 11,329 | 10,047 | 5,494 | 1,657 | 1,277 |
-| \`legend\` | 41,634 | 14,661 | 13,051 | 8,065 | 2,234 | 1,745 |
-| \`lightbox\` | 63,432 | 20,711 | 18,452 | 23,035 | 5,935 | 4,646 |
-| \`line-chart\` | 113,713 | 38,278 | 33,815 | 28,159 | 7,541 | 6,209 |
-| \`list\` | 69,295 | 23,266 | 20,712 | 21,585 | 5,917 | 4,766 |
-| \`listbox\` | 82,511 | 27,061 | 23,895 | 20,034 | 5,683 | 4,380 |
-| \`loader\` | 30,222 | 11,214 | 10,030 | 5,652 | 1,708 | 1,439 |
-| \`log\` | 92,717 | 29,992 | 26,641 | 49,350 | 13,841 | 11,831 |
-| \`map\` | 114,692 | 30,616 | 26,855 | 71,126 | 15,703 | 12,812 |
-| \`megamenu\` | 66,134 | 23,308 | 20,628 | 13,673 | 3,615 | 2,731 |
-| \`menu\` | 109,435 | 35,106 | 30,898 | 41,177 | 10,171 | 8,269 |
-| \`meter\` | 39,093 | 13,830 | 12,385 | 11,136 | 2,822 | 2,255 |
-| \`motion-toggle\` | 27,988 | 10,725 | 9,553 | 3,044 | 997 | 780 |
-| \`navigation\` | 37,585 | 13,566 | 12,044 | 7,077 | 2,002 | 1,525 |
-| \`notifications\` | 73,027 | 22,892 | 20,443 | 31,757 | 7,639 | 6,186 |
-| \`number-input\` | 62,610 | 20,544 | 18,289 | 18,544 | 4,834 | 3,826 |
-| \`object-inspector\` | 132,306 | 41,847 | 36,864 | 52,407 | 13,126 | 10,884 |
-| \`option\` | 30,122 | 10,930 | 9,731 | 7,585 | 2,139 | 1,628 |
-| \`orb\` | 36,885 | 14,019 | 12,487 | 10,014 | 3,696 | 3,082 |
-| \`outline\` | 38,722 | 13,793 | 12,272 | 12,095 | 3,424 | 2,547 |
-| \`pagination\` | 154,907 | 47,576 | 41,403 | 62,541 | 15,095 | 12,285 |
-| \`pin-input\` | 52,228 | 17,955 | 16,033 | 10,570 | 3,314 | 2,561 |
-| \`popover\` | 68,034 | 24,117 | 21,327 | 9,594 | 2,639 | 1,929 |
-| \`progress\` | 36,415 | 12,814 | 11,465 | 10,169 | 2,605 | 2,148 |
-| \`qr-code\` | 45,270 | 17,490 | 15,562 | 18,586 | 6,787 | 5,653 |
-| \`quote\` | 23,646 | 9,303 | 8,221 | 1,750 | 694 | 452 |
-| \`radio\` | 51,120 | 16,281 | 14,511 | 11,591 | 2,750 | 2,079 |
-| \`rating\` | 55,527 | 19,005 | 16,948 | 11,973 | 3,668 | 2,787 |
-| \`sandbox\` | 108,218 | 32,974 | 28,888 | 74,725 | 20,351 | 17,024 |
-| \`scatter-chart\` | 108,028 | 36,473 | 32,160 | 29,693 | 8,586 | 6,988 |
-| \`scroll-area\` | 36,301 | 12,383 | 11,006 | 13,508 | 3,564 | 2,864 |
-| \`select\` | 125,846 | 40,630 | 35,567 | 35,267 | 9,129 | 7,138 |
-| \`skeleton\` | 26,848 | 9,947 | 8,858 | 4,755 | 1,399 | 1,129 |
-| \`skip-link\` | 26,118 | 10,114 | 8,973 | 2,778 | 966 | 644 |
-| \`slider\` | 69,605 | 20,728 | 18,555 | 28,572 | 6,254 | 5,046 |
-| \`sparkline\` | 54,716 | 19,331 | 17,265 | 11,422 | 3,446 | 2,743 |
-| \`spatial-bar-chart\` | 114,232 | 39,173 | 34,460 | 28,899 | 8,556 | 7,091 |
-| \`spatial-heatmap\` | 126,828 | 42,153 | 37,042 | 41,457 | 11,703 | 9,678 |
-| \`spatial-ribbon-chart\` | 113,204 | 38,749 | 34,137 | 29,690 | 8,957 | 7,394 |
-| \`spatial-scatter-chart\` | 111,501 | 37,967 | 33,427 | 28,039 | 8,232 | 6,725 |
-| \`spatial-surface-chart\` | 113,878 | 39,172 | 34,535 | 30,366 | 9,349 | 7,757 |
-| \`spatial-treemap\` | 115,578 | 39,956 | 35,170 | 30,367 | 9,373 | 7,713 |
-| \`speed-dial\` | 76,667 | 26,452 | 23,500 | 17,966 | 4,376 | 3,473 |
-| \`splitter\` | 51,121 | 16,689 | 14,971 | 20,542 | 4,917 | 3,959 |
-| \`stat\` | 29,171 | 10,751 | 9,607 | 5,193 | 1,468 | 1,184 |
-| \`steps\` | 69,006 | 21,901 | 19,490 | 27,872 | 6,755 | 5,472 |
-| \`strands\` | 63,680 | 23,697 | 20,851 | 38,177 | 13,704 | 11,824 |
-| \`switch\` | 44,449 | 14,978 | 13,360 | 6,021 | 1,774 | 1,214 |
-| \`table\` | 136,948 | 40,477 | 35,255 | 62,692 | 15,338 | 12,765 |
-| \`tabs\` | 56,031 | 18,048 | 16,065 | 19,434 | 4,734 | 3,769 |
-| \`tag\` | 48,197 | 17,125 | 15,305 | 13,011 | 3,622 | 2,828 |
-| \`text\` | 29,286 | 10,212 | 9,014 | 7,182 | 1,494 | 1,080 |
-| \`textarea\` | 48,905 | 16,375 | 14,606 | 9,403 | 2,654 | 1,987 |
-| \`time-input\` | 195,137 | 57,471 | 50,039 | 72,814 | 16,501 | 13,617 |
-| \`time-picker\` | 113,325 | 34,508 | 30,385 | 46,180 | 11,554 | 9,263 |
-| \`timeline\` | 39,321 | 13,742 | 12,310 | 10,973 | 2,701 | 2,092 |
-| \`toast\` | 60,192 | 20,339 | 18,181 | 20,046 | 5,403 | 4,285 |
-| \`toggle\` | 51,106 | 16,791 | 14,924 | 10,851 | 3,065 | 2,347 |
-| \`toolbar\` | 34,496 | 12,352 | 10,991 | 7,820 | 2,144 | 1,608 |
-| \`tooltip\` | 62,502 | 22,262 | 19,733 | 11,290 | 3,110 | 2,459 |
-| \`tour\` | 95,356 | 31,307 | 27,699 | 30,161 | 7,578 | 6,116 |
-| \`tree\` | 77,329 | 25,058 | 22,310 | 25,871 | 6,864 | 5,687 |
-| \`trend\` | 32,854 | 12,575 | 11,243 | 5,487 | 1,643 | 1,319 |
-| \`video\` | 164,366 | 48,811 | 42,545 | 87,272 | 20,643 | 17,126 |
-| \`video-playlist\` | 144,942 | 44,812 | 39,350 | 58,789 | 14,041 | 11,779 |
-| \`virtual-list\` | 66,376 | 22,417 | 19,968 | 25,370 | 7,676 | 6,206 |
+| \`accordion\` | 36,104 | 12,946 | 11,493 | 8,794 | 2,416 | 1,908 |
+| \`announcement\` | 42,276 | 14,774 | 13,229 | 9,296 | 2,445 | 1,966 |
+| \`app-header\` | 38,326 | 13,449 | 11,970 | 11,045 | 2,958 | 2,506 |
+| \`area-chart\` | 107,559 | 36,864 | 32,535 | 22,602 | 6,329 | 5,149 |
+| \`aura\` | 59,567 | 20,253 | 17,948 | 31,765 | 9,603 | 8,230 |
+| \`avatar\` | 34,890 | 12,911 | 11,528 | 6,987 | 1,972 | 1,598 |
+| \`badge\` | 33,626 | 12,189 | 10,864 | 8,456 | 2,141 | 1,689 |
+| \`bar-chart\` | 122,404 | 40,670 | 35,879 | 36,918 | 9,900 | 8,408 |
+| \`blockquote\` | 26,905 | 10,186 | 9,009 | 4,610 | 1,396 | 1,193 |
+| \`breadcrumbs\` | 44,356 | 15,533 | 13,888 | 14,306 | 3,624 | 3,082 |
+| \`button\` | 42,729 | 14,402 | 12,850 | 11,617 | 2,951 | 2,411 |
+| \`button-group\` | 31,709 | 11,294 | 10,051 | 8,406 | 2,192 | 1,752 |
+| \`callout\` | 40,077 | 14,934 | 13,281 | 6,659 | 1,921 | 1,490 |
+| \`canvas\` | 131,027 | 39,298 | 34,339 | 89,671 | 24,909 | 21,002 |
+| \`card\` | 28,297 | 10,317 | 9,174 | 5,976 | 1,616 | 1,282 |
+| \`carousel\` | 55,653 | 17,867 | 16,026 | 25,801 | 6,075 | 4,977 |
+| \`chat\` | 96,362 | 29,761 | 26,363 | 42,968 | 10,824 | 8,851 |
+| \`checkbox\` | 47,728 | 15,519 | 13,814 | 9,579 | 2,460 | 1,917 |
+| \`checkbox-group\` | 55,688 | 17,587 | 15,677 | 15,535 | 3,997 | 3,145 |
+| \`code\` | 21,726 | 8,560 | 7,581 | 976 | 365 | 354 |
+| \`code-block\` | 129,247 | 39,452 | 34,803 | 61,803 | 14,544 | 12,361 |
+| \`color-input\` | 186,215 | 52,093 | 45,474 | 98,238 | 20,714 | 17,319 |
+| \`color-picker\` | 142,389 | 39,198 | 34,433 | 84,910 | 18,385 | 15,358 |
+| \`combobox\` | 149,120 | 45,609 | 40,052 | 51,305 | 12,010 | 9,886 |
+| \`command\` | 112,469 | 34,492 | 30,359 | 41,644 | 10,562 | 8,671 |
+| \`copy-button\` | 94,256 | 30,463 | 26,990 | 30,769 | 7,264 | 5,884 |
+| \`data-table\` | 232,690 | 67,608 | 57,838 | 120,614 | 29,536 | 23,990 |
+| \`date-input\` | 164,353 | 48,938 | 43,022 | 59,950 | 13,113 | 10,999 |
+| \`date-picker\` | 71,139 | 22,979 | 20,560 | 28,748 | 7,071 | 5,748 |
+| \`description-list\` | 26,427 | 9,731 | 8,674 | 4,508 | 1,259 | 1,074 |
+| \`dialog\` | 44,311 | 15,228 | 13,600 | 11,064 | 3,036 | 2,546 |
+| \`divider\` | 25,863 | 9,771 | 8,637 | 3,697 | 1,110 | 959 |
+| \`donut-chart\` | 102,652 | 34,415 | 30,413 | 24,673 | 6,674 | 5,474 |
+| \`drawer\` | 49,642 | 16,868 | 15,045 | 13,612 | 3,679 | 3,024 |
+| \`drilldown\` | 49,204 | 16,543 | 14,750 | 15,375 | 3,987 | 3,148 |
+| \`empty\` | 26,316 | 10,056 | 8,904 | 3,267 | 1,084 | 853 |
+| \`file-input\` | 70,648 | 22,940 | 20,402 | 24,668 | 6,517 | 5,314 |
+| \`filter-input\` | 110,412 | 35,682 | 31,633 | 32,396 | 8,349 | 6,810 |
+| \`flex\` | 26,312 | 9,424 | 8,375 | 4,761 | 1,007 | 816 |
+| \`format-date\` | 31,463 | 11,789 | 10,568 | 4,712 | 1,358 | 1,044 |
+| \`graph\` | 92,818 | 27,924 | 24,582 | 38,992 | 9,536 | 7,818 |
+| \`grid\` | 27,762 | 10,136 | 8,993 | 5,653 | 1,442 | 1,279 |
+| \`heatmap\` | 110,057 | 36,551 | 32,235 | 27,373 | 7,433 | 6,141 |
+| \`icon\` | 86,410 | 29,544 | 25,346 | 61,332 | 21,022 | 17,047 |
+| \`icon-button\` | 44,066 | 14,348 | 12,789 | 12,955 | 2,901 | 2,279 |
+| \`image\` | 27,760 | 10,306 | 9,128 | 5,214 | 1,587 | 1,229 |
+| \`input\` | 51,304 | 17,264 | 15,257 | 11,243 | 3,332 | 2,503 |
+| \`kbd\` | 30,078 | 11,327 | 10,002 | 5,494 | 1,642 | 1,395 |
+| \`legend\` | 41,634 | 14,661 | 13,022 | 8,065 | 2,234 | 1,742 |
+| \`lightbox\` | 63,432 | 20,711 | 18,435 | 23,037 | 5,928 | 4,781 |
+| \`line-chart\` | 113,713 | 38,275 | 33,788 | 28,159 | 7,544 | 6,213 |
+| \`list\` | 69,295 | 23,264 | 20,709 | 21,585 | 5,865 | 4,846 |
+| \`listbox\` | 82,511 | 27,060 | 23,925 | 20,034 | 5,672 | 4,460 |
+| \`loader\` | 30,222 | 11,214 | 10,000 | 5,652 | 1,689 | 1,391 |
+| \`log\` | 92,972 | 30,033 | 26,625 | 49,605 | 13,886 | 11,925 |
+| \`map\` | 114,692 | 30,616 | 26,911 | 71,126 | 15,681 | 12,962 |
+| \`megamenu\` | 66,134 | 23,306 | 20,647 | 13,673 | 3,602 | 2,759 |
+| \`menu\` | 109,435 | 35,105 | 30,951 | 41,177 | 10,159 | 8,404 |
+| \`meter\` | 39,093 | 13,832 | 12,348 | 11,136 | 2,809 | 2,384 |
+| \`motion-toggle\` | 27,988 | 10,726 | 9,544 | 3,044 | 959 | 707 |
+| \`navigation\` | 37,585 | 13,566 | 12,044 | 7,075 | 1,981 | 1,573 |
+| \`notifications\` | 73,053 | 22,904 | 20,449 | 31,757 | 7,612 | 6,265 |
+| \`number-input\` | 62,610 | 20,545 | 18,301 | 18,544 | 4,821 | 3,758 |
+| \`object-inspector\` | 132,306 | 41,847 | 36,846 | 52,407 | 13,098 | 10,906 |
+| \`option\` | 30,122 | 10,929 | 9,712 | 7,585 | 2,133 | 1,790 |
+| \`orb\` | 36,885 | 14,019 | 12,487 | 10,016 | 3,707 | 3,177 |
+| \`outline\` | 38,845 | 13,846 | 12,301 | 12,105 | 3,440 | 2,893 |
+| \`pagination\` | 154,907 | 47,575 | 41,364 | 62,541 | 15,085 | 12,496 |
+| \`pin-input\` | 52,228 | 17,953 | 16,004 | 10,570 | 3,276 | 2,567 |
+| \`popover\` | 68,034 | 24,115 | 21,386 | 9,594 | 2,630 | 2,102 |
+| \`progress\` | 36,415 | 12,815 | 11,483 | 10,169 | 2,593 | 2,218 |
+| \`qr-code\` | 45,270 | 17,490 | 15,584 | 18,586 | 6,747 | 5,751 |
+| \`quote\` | 23,646 | 9,303 | 8,221 | 1,750 | 667 | 512 |
+| \`radio\` | 51,120 | 16,284 | 14,491 | 11,591 | 2,733 | 2,180 |
+| \`rating\` | 55,527 | 19,005 | 16,927 | 11,973 | 3,663 | 2,900 |
+| \`sandbox\` | 108,218 | 32,975 | 28,892 | 74,725 | 20,337 | 17,089 |
+| \`scatter-chart\` | 108,028 | 36,474 | 32,155 | 29,693 | 8,555 | 6,997 |
+| \`scroll-area\` | 36,301 | 12,383 | 11,026 | 13,508 | 3,526 | 2,845 |
+| \`select\` | 125,846 | 40,635 | 35,644 | 35,267 | 9,098 | 7,292 |
+| \`skeleton\` | 26,848 | 9,947 | 8,858 | 4,755 | 1,362 | 1,107 |
+| \`skip-link\` | 26,118 | 10,114 | 8,973 | 2,778 | 933 | 742 |
+| \`slider\` | 69,605 | 20,727 | 18,561 | 28,572 | 6,231 | 5,058 |
+| \`sparkline\` | 54,716 | 19,332 | 17,251 | 11,420 | 3,429 | 2,883 |
+| \`spatial-bar-chart\` | 114,232 | 39,177 | 34,554 | 28,899 | 8,569 | 7,152 |
+| \`spatial-heatmap\` | 126,828 | 42,151 | 37,057 | 41,457 | 11,708 | 9,722 |
+| \`spatial-ribbon-chart\` | 113,204 | 38,746 | 34,111 | 29,690 | 8,962 | 7,482 |
+| \`spatial-scatter-chart\` | 111,501 | 37,966 | 33,427 | 28,039 | 8,229 | 6,793 |
+| \`spatial-surface-chart\` | 113,878 | 39,176 | 34,564 | 30,366 | 9,355 | 7,849 |
+| \`spatial-treemap\` | 115,580 | 39,960 | 35,142 | 30,367 | 9,371 | 7,882 |
+| \`speed-dial\` | 76,667 | 26,447 | 23,479 | 17,966 | 4,352 | 3,553 |
+| \`splitter\` | 51,121 | 16,689 | 14,958 | 20,542 | 4,919 | 4,024 |
+| \`stat\` | 29,171 | 10,751 | 9,607 | 5,193 | 1,464 | 1,161 |
+| \`steps\` | 69,006 | 21,902 | 19,511 | 27,872 | 6,706 | 5,584 |
+| \`strands\` | 63,680 | 23,700 | 20,906 | 38,177 | 13,675 | 11,897 |
+| \`switch\` | 44,449 | 14,979 | 13,332 | 6,021 | 1,764 | 1,274 |
+| \`table\` | 136,974 | 40,482 | 35,192 | 62,692 | 15,341 | 12,836 |
+| \`tabs\` | 56,031 | 18,046 | 16,086 | 19,434 | 4,722 | 3,889 |
+| \`tag\` | 48,197 | 17,125 | 15,310 | 13,011 | 3,602 | 2,851 |
+| \`terminal\` | 96,310 | 27,266 | 24,053 | 55,074 | 12,010 | 9,924 |
+| \`text\` | 29,286 | 10,212 | 9,014 | 7,182 | 1,462 | 1,170 |
+| \`textarea\` | 48,905 | 16,375 | 14,608 | 9,403 | 2,632 | 2,089 |
+| \`time-input\` | 195,137 | 57,469 | 50,040 | 72,814 | 16,486 | 13,672 |
+| \`time-picker\` | 113,325 | 34,509 | 30,370 | 46,180 | 11,545 | 9,441 |
+| \`timeline\` | 39,321 | 13,742 | 12,310 | 10,973 | 2,660 | 2,171 |
+| \`toast\` | 60,192 | 20,340 | 18,154 | 20,046 | 5,371 | 4,349 |
+| \`toggle\` | 51,106 | 16,788 | 14,913 | 10,851 | 3,062 | 2,407 |
+| \`toolbar\` | 34,607 | 12,386 | 11,016 | 7,931 | 2,138 | 1,722 |
+| \`tooltip\` | 62,502 | 22,264 | 19,787 | 11,290 | 3,098 | 2,516 |
+| \`tour\` | 95,356 | 31,302 | 27,727 | 30,161 | 7,570 | 6,170 |
+| \`tree\` | 77,329 | 25,057 | 22,299 | 25,871 | 6,844 | 5,730 |
+| \`trend\` | 32,854 | 12,576 | 11,211 | 5,487 | 1,631 | 1,299 |
+| \`video\` | 164,366 | 48,824 | 42,602 | 87,272 | 20,643 | 17,204 |
+| \`video-playlist\` | 144,942 | 44,815 | 39,295 | 58,789 | 13,995 | 11,786 |
+| \`virtual-list\` | 66,376 | 22,417 | 20,005 | 25,370 | 7,654 | 6,326 |
 
 ## What an install adds to \`node_modules\`
 
@@ -5504,12 +5527,12 @@ without its whitespace, and the sizes count each one that way.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,191,244 | 587 | 791,148 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 23,981,783 | 772 | 2,534,725 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
-| \`@fusion.dev/helix-icons\` | 152,695 | 21 | 49,995 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 122,338 | 6 | 0 | none |
+| \`@fusion.dev/helix-core\` | 2,209,739 | 599 | 796,698 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
+| \`@fusion.dev/helix-headless\` | 24,213,495 | 778 | 2,564,547 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-icons\` | 154,507 | 21 | 50,303 | \`svgo\` |
+| \`@fusion.dev/helix-styles\` | 122,391 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
-| \`@fusion.dev/helix\` | 24,619,675 | 1,023 | 566,915 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix\` | 24,834,707 | 1,029 | 569,278 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -8327,6 +8350,429 @@ A declared \`value\`, \`open\`, \`checked\`, or \`active\` is a seed. The elemen
 with that value and then applies its own changes. To refuse a change, cancel the
 matching \`helix-before-*\` event. Skipping a state update does not refuse it. See
 [State and control](./state-and-control).
+`,
+    terminals: `---
+description: Add a terminal that runs your own shell or process to your site, styled with your theme and drawn by xterm.js.
+section: Essentials
+title: Terminals
+---
+
+# Terminals
+
+Helix Terminal puts a frame around a terminal drawn by xterm.js or an emulator
+of your own. The frame adds a header with the terminal's name and controls, a
+find bar, and a status line for a process that exited. \`@fusion.dev/helix-terminal\`
+connects the frame to the emulator and themes it from your tokens. Helix does
+not start processes. You connect the frame to yours, such as a pseudo-terminal
+on your server or in a desktop app.
+
+## Add a terminal
+
+Install Helix, the terminal connector, xterm.js, and the xterm.js addons you
+want:
+
+\`\`\`sh
+bun add @fusion.dev/helix @fusion.dev/helix-terminal @xterm/xterm @xterm/addon-fit @xterm/addon-search @xterm/addon-web-links
+\`\`\`
+
+Add the frame and an element for xterm.js to draw in:
+
+\`\`\`html
+<helix-terminal label="~/project">
+  <div id="terminal"></div>
+</helix-terminal>
+\`\`\`
+
+Create the terminal in your theme, open it in the frame, then connect the two:
+
+\`\`\`js
+import '@fusion.dev/helix/terminal'
+import '@xterm/xterm/css/xterm.css'
+import { connectTerminal, terminalThemeReady } from '@fusion.dev/helix-terminal'
+import { xtermDriver, xtermOptions } from '@fusion.dev/helix-terminal/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { SearchAddon } from '@xterm/addon-search'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { Terminal } from '@xterm/xterm'
+
+const frame = document.querySelector('helix-terminal')
+const terminal = new Terminal(xtermOptions(await terminalThemeReady(frame)))
+terminal.open(document.getElementById('terminal'))
+
+const connection = connectTerminal(
+  frame,
+  xtermDriver(terminal, {
+    fit: new FitAddon(),
+    search: new SearchAddon(),
+    webLinks: WebLinksAddon,
+  }),
+)
+
+// Later, when the terminal goes away:
+connection.disconnect()
+terminal.dispose()
+\`\`\`
+
+\`terminalThemeReady\` waits until your tokens can be read and the monospaced
+face has loaded. xterm.js measures its cells in the face it opens with, so a
+terminal created before the face loads keeps the fallback face's cell size.
+
+Pass each addon new. The driver loads them, so do not load them yourself.
+
+## Connect a process
+
+The frame takes the process's output and sends what the reader types and the
+size of the grid. This example connects a pseudo-terminal on your server over
+a WebSocket:
+
+\`\`\`js
+const socket = new WebSocket('wss://example.com/pty')
+socket.binaryType = 'arraybuffer'
+
+// The process's output, as the bytes it wrote.
+socket.addEventListener('message', (event) => frame.write(new Uint8Array(event.data)))
+
+// What the reader types and pastes, encoded for the program.
+frame.addEventListener('helix-terminal-input', (event) => {
+  socket.send(JSON.stringify({ input: event.detail.data }))
+})
+
+// The grid's size, which the pseudo-terminal takes as rows and columns.
+frame.addEventListener('helix-terminal-resize', (event) => {
+  const { columns, rows } = event.detail
+  socket.send(JSON.stringify({ columns, rows }))
+})
+\`\`\`
+
+In a Tauri app, a command writes input to the pseudo-terminal and an event
+carries its output back. The frame takes the same three calls.
+
+- \`write(data)\` takes a string or a \`Uint8Array\` of UTF-8. Output written
+  before \`connectTerminal\` runs is held and written first, so the process can
+  start before xterm.js loads.
+- \`helix-terminal-input\` carries \`data\` and \`binary\`. \`binary\` is \`true\` for
+  some mouse reports, whose characters are each one byte: write them as bytes
+  with \`Uint8Array.from(data, (character) => character.charCodeAt(0))\`.
+- \`helix-terminal-resize\` carries \`columns\` and \`rows\`, and \`width\` and
+  \`height\` in CSS pixels, which a pseudo-terminal's size also takes. It is sent
+  once when the frame connects and again whenever the grid changes size.
+- \`paste(text)\` inputs text as a paste does. It arrives as
+  \`helix-terminal-input\`, wrapped in the bracketed paste codes when the program
+  asked for them.
+
+### Keep up with a fast process
+
+\`write()\` returns a promise that resolves once xterm.js has parsed the output.
+A process can write faster than a terminal draws, so pause it while too much
+is waiting:
+
+\`\`\`js
+let waiting = 0
+
+pty.onData(async (chunk) => {
+  waiting += chunk.length
+  if (waiting > 1_000_000) {
+    pty.pause()
+  }
+  await frame.write(chunk)
+  waiting -= chunk.length
+  if (waiting < 100_000) {
+    pty.resume()
+  }
+})
+\`\`\`
+
+### When the process exits
+
+Set \`exit-code\` when the process exits. The status line says how it exited,
+the frame stops sending input, and a Restart button appears. Restart sends
+\`helix-terminal-restart\`. Start a new process, clear \`exitCode\`, and write the
+new output:
+
+Put buttons of your own beside Restart in the \`exit-actions\` slot, such as one
+that opens the whole log. They show once the process exits.
+
+\`\`\`js
+pty.onExit((code) => {
+  frame.exitCode = code
+})
+
+frame.addEventListener('helix-terminal-restart', () => {
+  frame.exitCode = undefined
+  frame.reset()
+  pty = start()
+})
+\`\`\`
+
+## What the connector does
+
+\`connectTerminal\` links the frame to the emulator:
+
+- The frame's output reaches the emulator, and the reader's input reaches the
+  frame.
+- The grid fits the frame and fits again when the frame changes size. Set
+  \`columns\` and \`rows\` on the frame for a grid of a fixed size.
+- The emulator is themed from your tokens, and themed again when your theme or
+  color mode changes.
+- Every cell's text keeps a contrast of 4.5:1 against its ground, so a color a
+  program chose stays readable on your theme. Pass \`{ contrast: 7 }\` for a
+  higher floor, or \`{ contrast: 1 }\` to draw every color as the program wrote
+  it.
+- The cursor stops blinking and scrolling stops animating when a reader has
+  asked for reduced motion.
+- \`connection.fit()\` fits the grid again, for a page that resized the frame in
+  a way the connector cannot see.
+- \`connection.disconnect()\` puts back everything \`connectTerminal\` changed.
+
+Use \`xtermDriver(terminal, addons)\` for xterm.js 6. xterm.js is not bundled
+with Helix, so you can use the version you already have.
+
+## Use other xterm.js addons
+
+You create the xterm.js terminal, so you load any addon on it the way
+xterm.js describes, before or after you connect. This loads the WebGL renderer
+and the Unicode 11 character widths:
+
+\`\`\`js
+import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { WebglAddon } from '@xterm/addon-webgl'
+
+const terminal = new Terminal({
+  ...xtermOptions(await terminalThemeReady(frame)),
+  allowProposedApi: true,
+})
+terminal.open(document.getElementById('terminal'))
+terminal.loadAddon(new WebglAddon())
+terminal.loadAddon(new Unicode11Addon())
+terminal.unicode.activeVersion = '11'
+\`\`\`
+
+The connector sets the theme, the face, and its options on the terminal
+itself, so an addon such as the WebGL renderer draws in your theme and keeps
+the contrast floor.
+
+- **Fit, search, and web links go to the driver.** Pass them to \`xtermDriver\`
+  unloaded, and the driver loads them: an addon loaded twice breaks. They are
+  also what draws the frame's find bar and sends \`helix-terminal-link\`. With a
+  search addon of your own, the frame draws no Find control, and with a web
+  links addon of your own, a link it finds skips the event.
+- **Some addons need xterm.js's proposed API.** xterm.js refuses its Unicode
+  handling, decorations, markers, and character joiners until
+  \`allowProposedApi\` is on, and the Unicode 11 addon uses the first of these.
+  The driver turns the option on while it holds a search addon and puts it
+  back as it was on disconnect, so set it when you create the terminal for any
+  other addon that needs it.
+- **The connection owns the link handler.** While connected, the driver sets
+  xterm.js's \`linkHandler\` so every link reaches \`helix-terminal-link\`, and it
+  puts yours back on disconnect. Listen for the event to handle a link.
+- **The key handler stays yours.** The frame takes its own keys before xterm.js
+  sees them, so \`attachCustomKeyEventHandler\` is free for keys of your own.
+
+## Style the terminal with your theme
+
+The frame reads each color from a custom property, and the connector draws
+the terminal in it. The styled frame sets every one from your tokens. Set one
+on the terminal to choose a color yourself:
+
+\`\`\`css
+helix-terminal {
+  --terminal-ansi-blue: #3b82f6;
+  --terminal-cursor-color: var(--helix-color-accent);
+}
+\`\`\`
+
+| Property | Default | Draws |
+|---|---|---|
+| \`--terminal-active-match-background-color\` | Warning, mixed with the ground | The current match of a search |
+| \`--terminal-active-match-border-color\` | \`--helix-color-warning\` | The edge of the current match |
+| \`--terminal-ansi-black\` | \`--helix-color-foreground\` in light, \`--helix-color-border\` in dark | ANSI black |
+| \`--terminal-ansi-blue\` | \`--helix-color-info\` | ANSI blue |
+| \`--terminal-ansi-cyan\` | Info mixed with success | ANSI cyan |
+| \`--terminal-ansi-green\` | \`--helix-color-success\` | ANSI green |
+| \`--terminal-ansi-magenta\` | \`--helix-color-syntax-callable\` | ANSI magenta |
+| \`--terminal-ansi-red\` | \`--helix-color-danger\` | ANSI red |
+| \`--terminal-ansi-white\` | \`--helix-color-foreground-subtle\` in light, between muted and the foreground in dark | ANSI white |
+| \`--terminal-ansi-yellow\` | \`--helix-color-warning\` | ANSI yellow |
+| \`--terminal-background-color\` | \`--helix-color-background\` | The ground |
+| \`--terminal-color\` | \`--helix-color-foreground\` | Text where the program sets no color |
+| \`--terminal-cursor-color\` | \`--helix-color-primary\` | The cursor |
+| \`--terminal-match-background-color\` | Warning, mixed more quietly with the ground | Every other match of a search |
+| \`--terminal-scrollbar-thumb-color\` | \`--helix-scrollbar-thumb-color\` | The scrollbar |
+| \`--terminal-selection-background-color\` | Primary at 30% | Selected text |
+
+Each bright color has a property of its own, such as \`--terminal-ansi-bright-red\`,
+and defaults to its color mixed a quarter of the way to \`--helix-color-foreground\`,
+so it is lighter in dark mode and darker in light. Set a color alone and its
+bright form follows it. The bright gray, \`--terminal-ansi-bright-black\`,
+defaults to \`--helix-color-foreground-muted\`, and bright white to
+\`--helix-color-border\` in light and \`--helix-color-foreground\` in dark.
+
+On the headless tier, \`helix-headless-terminal\` sets none of them. Set the
+ones you want, and xterm.js keeps its own color for the rest.
+
+The colors share Log's hues, so a program's output reads the same in a log and
+in a terminal side by side. The four grays keep their order from dark to light
+in each color mode: a program that fills a panel with black expects it to be
+dark. Text a program writes in a gray that is faint against your ground is
+lifted to the contrast floor.
+
+The grid is drawn in the viewport's face, which the styled frame sets from
+\`--terminal-font-family\`, the monospaced face by default, and
+\`--terminal-font-size\`, the small text step. It also takes
+\`--terminal-block-size\`, \`--terminal-border-color\`,
+\`--terminal-header-background-color\`, \`--terminal-padding\`, and
+\`--terminal-radius\`. The [Terminal reference](/helix/components/terminal) lists
+what each one draws.
+
+## Show a command's output
+
+Set \`readonly\` to show output that takes no input, such as a command an agent
+ran. The frame draws no cursor and sends no input. Set \`columns\` and \`rows\` to
+draw the output at the size the command ran at:
+
+\`\`\`html
+<helix-terminal controls="find copy" label="bun run build" readonly columns="80" rows="12">
+  <div id="transcript"></div>
+</helix-terminal>
+\`\`\`
+
+## Fill a pane
+
+Set \`fill\` for a terminal that fills a pane, such as one side of a \`Splitter\`.
+The frame covers its container, which needs a position of its own, such as
+\`position: relative\`. Set \`separation="plain"\` where the pane already draws its
+edges. Put buttons of your own in the \`actions\` slot, before the built-in
+controls, and in \`find-actions\` for the find bar. Each takes the size of the
+buttons beside it:
+
+\`\`\`html
+<div class="pane">
+  <helix-terminal fill label="zsh" separation="plain">
+    <helix-icon-button label="New terminal" slot="actions">
+      <helix-icon name="plus"></helix-icon>
+    </helix-icon-button>
+    <div id="terminal"></div>
+  </helix-terminal>
+</div>
+\`\`\`
+
+The frame keeps its own \`label\` when a program sets its title.
+\`helix-terminal-title\` carries the new title, so you can show it where it
+belongs, such as on the tab the terminal sits under.
+
+## Links
+
+A link in the output sends \`helix-terminal-link\` with its \`href\` when a reader
+activates it. Left alone, the frame opens an \`http\` or \`https\` address in a new
+tab and opens nothing else, since a program can write any address. Cancel the
+event to open the link yourself, as a desktop app does through the system's
+browser:
+
+\`\`\`js
+frame.addEventListener('helix-terminal-link', (event) => {
+  event.preventDefault()
+  openInBrowser(event.detail.href)
+})
+\`\`\`
+
+Links a program writes as hyperlinks always work. Pass \`WebLinksAddon\` to
+\`xtermDriver\` to also make the addresses in plain text into links.
+
+## Keyboard and screen readers
+
+- Every key goes to the program, including Tab, Shift+Tab, and Escape, except
+  the keys below.
+- Control+Shift+F, or Command+F on a Mac, opens the find bar. Enter moves to
+  the next match and Shift+Enter to the previous one. Escape closes the bar and
+  returns focus to the terminal. Screen readers hear how many matches there are.
+- Control+Shift+C copies the selection. On a Mac, Command+C does.
+- Control+M, or Control+Shift+M on a Mac, switches Tab between typing in the
+  terminal and moving focus out of it. The status line says when Tab moves
+  focus, and screen readers hear each change. The terminal's input describes
+  this key to a screen reader. In a terminal, Control+M types the same
+  character as Enter.
+- The frame is a named group. Its controls come before the terminal in the
+  tab order, as one toolbar: Tab reaches it once, and the arrow keys move
+  between its buttons, including the ones you put in \`actions\`. The find bar's
+  buttons are a second toolbar after its field. The terminal's input is one tab
+  stop. Name each terminal with \`label\` so a reader can tell several apart.
+- A terminal draws its grid as a picture of text, which a screen reader cannot
+  read. Set \`screen-reader-mode\` to have xterm.js keep the grid as lines a
+  screen reader can move through, and announce new output as it arrives. It
+  costs time on every write, so it is off by default. A browser cannot tell
+  whether a screen reader is running, so connect it to a setting your reader
+  can turn on:
+
+  \`\`\`js
+  frame.screenReaderMode = settings.screenReader
+  \`\`\`
+
+- \`text()\` returns the lines on screen as plain text, and \`text('all')\`
+  returns every line the scrollback holds, which is how an assistant reads a
+  terminal it has been allowed to see.
+
+## Write a driver
+
+To use another emulator, write a driver: an object that draws the frame's
+output and tells the frame what the reader typed. \`connectTerminal\` calls it.
+\`xtermDriver\` is one, and the \`TerminalDriver\` type in
+\`@fusion.dev/helix-terminal\` describes every method.
+
+### Required methods
+
+- \`write(data, done)\` draws the program's output, a string or a \`Uint8Array\`,
+  and calls \`done\` once it has been parsed.
+- \`onInput(input)\` calls \`input(data, binary)\` with what the reader types or
+  pastes, encoded for the program, and returns a function that stops.
+
+### Optional methods
+
+Each optional method turns on a feature. Without it, the feature is off and
+nothing fails. A control in the header that a driver cannot answer is not
+drawn.
+
+| Method | What it must do | Turns on |
+|---|---|---|
+| \`clear()\` | Clear the scrollback, keeping the cursor's line | The clear button, and \`clear()\` |
+| \`element()\` | Return the element the emulator draws in | Refitting when it changes size |
+| \`fit()\` | Fit the grid to its element, and report the new size through \`onResize\` | A grid that fills the frame |
+| \`focus()\` | Focus the emulator's input | \`focus()\`, and focus returning from the find bar |
+| \`input()\` | Return the element that takes keys | Naming the input for screen readers |
+| \`onBell(rang)\` | Call \`rang\` on the bell, and return a function that stops | \`helix-terminal-bell\` and the flash |
+| \`onLink(activated)\` | Call \`activated(href)\` when a link is used, and return a function that stops | \`helix-terminal-link\` |
+| \`onResize(resized)\` | Call \`resized({ columns, rows })\` when the grid changes size | \`helix-terminal-resize\` after the first |
+| \`onSelection(changed)\` | Call \`changed\` when the selection changes | The copy button's state |
+| \`onTitle(changed)\` | Call \`changed(title)\` when the program sets its title | \`helix-terminal-title\` |
+| \`options(options)\` | Apply \`contrast\`, \`cursor\`, \`input\`, \`motion\`, and \`screenReader\` | Read-only output, the contrast floor, reduced motion, and screen reader mode |
+| \`paste(text)\` | Input text as a paste does | \`paste()\` |
+| \`pixels()\` | Return the grid's \`width\` and \`height\` in CSS pixels | The pixel size in \`helix-terminal-resize\` |
+| \`release()\` | Put back what the driver changed | A clean \`disconnect()\` |
+| \`reset()\` | Reset the emulator | \`reset()\` |
+| \`resize(columns, rows)\` | Set the grid's size in cells | \`columns\` and \`rows\` on the frame |
+| \`search\` | An object with \`find(query, options, matches)\`, \`end()\`, and \`onResults(found)\` | The find bar |
+| \`selection()\` | Return the selected text | The copy button and its key |
+| \`size()\` | Return the grid's \`{ columns, rows }\` | The first \`helix-terminal-resize\` |
+| \`text(scope)\` | Return the screen, or with \`all\` the scrollback, as text | \`text()\` |
+| \`theme(theme)\` | Draw in \`theme.colors\` and \`theme.font\` | Theming |
+
+\`connection.disconnect()\` calls every function a method returned, detaches the
+driver from the frame, and calls \`release()\`.
+
+### Draw your own terminal
+
+A page that draws a terminal without a driver hands the frame a renderer of
+its own with \`frame.attach(renderer)\`. It returns the calls that tell the frame
+what happened: \`input\`, \`resized\`, \`title\`, \`bell\`, \`link\`, \`selected\`, \`found\`,
+and \`detach\`. The \`TerminalRenderer\` and \`TerminalSink\` types in
+\`@fusion.dev/helix-headless/terminal\` describe both.
+
+### Test a driver
+
+Our specs test the xterm.js driver twice. A stand-in terminal records what the
+driver asks of it, which runs anywhere. Then the browser specs connect a frame
+to the real xterm.js, write output, type, search, and check what the frame
+said. Test your driver the same way: connect it to a frame, write to the frame,
+and read \`text()\` back.
 `,
     'theme-builder': `---
 description: Enter your theme inputs and see every token Helix computes from them.