@fusion.dev/helix-docs 0.191.0 → 0.192.0

package/dist/sources.generated.js

@@ -4356,7 +4356,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 251,850 | 80,719 | 69,123 |
+| Lit and \`@fusion.dev/helix-core\` | 251,850 | 80,719 | 69,051 |
 
 ## Whole packages
 
@@ -4367,12 +4367,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,805 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,359,170 | 380,216 | 285,227 | Every headless family. The barrel entry includes all of them. |
+| \`@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-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,111 | 529,015 | 377,332 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,043,729 | 529,254 | 377,743 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -4395,11 +4395,11 @@ shows the whole cost of using the base layer on its own.
 
 **Most of your first component is the shared runtime.** The median styled family is 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.
 
-Across the 108 styled components, the smallest is \`code\` at 8,332 bytes gzipped alone, and the largest is \`data-table\` at 66,818. Every family together is 529,015.
+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.
 
-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,216 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,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.
 
-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.
+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.
 
 ## Compared with other systems
 
@@ -4411,37 +4411,37 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 41,612 | 14,008 | 12,455 |
+| \`button\` | **Helix** | 41,612 | 14,008 | 12,420 |
 | | 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,504 |
+| \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,518 |
 | | 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,853 | 13,261 |
+| \`dialog\` | **Helix** | 43,360 | 14,855 | 13,243 |
 | | 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,216 |
+| \`radio\` | **Helix** | 50,349 | 15,974 | 14,201 |
 | | 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,636 | 13,022 |
+| \`switch\` | **Helix** | 43,562 | 14,637 | 13,009 |
 | | 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,791 |
+| \`tabs\` | **Helix** | 55,263 | 17,752 | 15,775 |
 | | 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,361 |
+| \`tooltip\` | **Helix** | 61,420 | 21,834 | 19,393 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -4493,107 +4493,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,462 | 5,329 | 1,575 | 1,137 |
-| \`announcement\` | 36,692 | 13,311 | 11,888 | 4,682 | 1,386 | 1,053 |
-| \`app-header\` | 32,289 | 11,898 | 10,559 | 5,871 | 1,771 | 1,283 |
-| \`area-chart\` | 90,301 | 31,727 | 28,060 | 14,057 | 4,328 | 3,553 |
-| \`avatar\` | 30,463 | 11,595 | 10,364 | 3,957 | 1,211 | 841 |
-| \`badge\` | 27,088 | 10,568 | 9,406 | 2,942 | 897 | 661 |
-| \`bar-chart\` | 94,416 | 32,821 | 29,043 | 18,022 | 5,406 | 4,236 |
-| \`blockquote\` | 24,107 | 9,421 | 8,312 | 2,402 | 887 | 687 |
-| \`breadcrumbs\` | 36,279 | 13,907 | 12,384 | 7,360 | 2,421 | 1,861 |
-| \`button\` | 35,194 | 12,591 | 11,196 | 4,925 | 1,443 | 1,066 |
-| \`button-group\` | 27,640 | 10,382 | 9,202 | 4,927 | 1,509 | 1,101 |
-| \`callout\` | 35,256 | 13,592 | 12,066 | 2,884 | 981 | 696 |
-| \`canvas\` | 108,483 | 34,750 | 30,377 | 68,924 | 20,915 | 17,505 |
-| \`card\` | 23,777 | 9,053 | 8,016 | 2,090 | 654 | 518 |
-| \`carousel\` | 42,748 | 15,233 | 13,621 | 15,005 | 4,187 | 3,214 |
-| \`chat\` | 79,390 | 26,446 | 23,420 | 27,455 | 8,063 | 6,319 |
-| \`checkbox\` | 40,374 | 13,681 | 12,202 | 3,107 | 957 | 607 |
-| \`checkbox-group\` | 47,602 | 15,599 | 13,896 | 8,325 | 2,356 | 1,675 |
-| \`code\` | 20,301 | 8,015 | 7,094 | 138 | 74 | 4 |
-| \`code-block\` | 102,738 | 34,888 | 30,813 | 36,842 | 10,761 | 8,742 |
-| \`color-input\` | 141,792 | 45,090 | 39,427 | 55,134 | 14,318 | 11,478 |
-| \`color-picker\` | 103,415 | 32,966 | 28,874 | 47,255 | 12,727 | 10,254 |
-| \`combobox\` | 132,023 | 41,952 | 36,963 | 35,789 | 9,121 | 7,100 |
-| \`command\` | 99,513 | 31,474 | 27,706 | 30,059 | 8,123 | 6,379 |
-| \`copy-button\` | 80,548 | 27,648 | 24,485 | 18,341 | 4,985 | 3,803 |
-| \`data-table\` | 199,900 | 61,426 | 52,479 | 89,490 | 23,843 | 19,061 |
-| \`date-input\` | 141,223 | 44,511 | 39,190 | 38,228 | 9,471 | 7,449 |
-| \`date-picker\` | 61,360 | 20,935 | 18,795 | 20,345 | 5,604 | 4,374 |
-| \`description-list\` | 22,900 | 8,765 | 7,766 | 1,565 | 526 | 276 |
-| \`dialog\` | 38,247 | 13,596 | 12,111 | 5,837 | 1,727 | 1,228 |
-| \`divider\` | 22,991 | 8,923 | 7,886 | 1,416 | 508 | 330 |
-| \`donut-chart\` | 89,212 | 31,129 | 27,517 | 14,641 | 4,489 | 3,535 |
-| \`drawer\` | 42,892 | 15,121 | 13,461 | 7,698 | 2,298 | 1,728 |
-| \`drilldown\` | 42,756 | 14,940 | 13,341 | 9,709 | 2,723 | 2,093 |
-| \`empty\` | 24,194 | 9,250 | 8,200 | 1,951 | 642 | 473 |
-| \`file-input\` | 57,757 | 20,017 | 17,795 | 13,093 | 4,143 | 3,166 |
-| \`filter-input\` | 97,846 | 32,818 | 29,094 | 21,629 | 6,179 | 4,963 |
-| \`format-date\` | 30,158 | 11,290 | 10,065 | 4,434 | 1,266 | 924 |
-| \`graph\` | 74,369 | 24,503 | 21,605 | 21,877 | 6,475 | 5,188 |
-| \`heatmap\` | 98,128 | 33,502 | 29,564 | 18,944 | 5,578 | 4,266 |
-| \`icon\` | 82,157 | 28,049 | 23,964 | 58,304 | 19,614 | 16,099 |
-| \`icon-button\` | 35,305 | 12,619 | 11,225 | 5,034 | 1,472 | 1,144 |
-| \`image\` | 25,504 | 9,479 | 8,405 | 3,823 | 1,153 | 900 |
-| \`input\` | 46,361 | 15,974 | 14,086 | 7,352 | 2,426 | 1,723 |
-| \`kbd\` | 27,511 | 10,569 | 9,376 | 3,516 | 1,113 | 766 |
-| \`legend\` | 35,184 | 12,934 | 11,488 | 2,957 | 988 | 691 |
-| \`lightbox\` | 55,724 | 18,815 | 16,716 | 16,730 | 4,662 | 3,467 |
-| \`line-chart\` | 91,335 | 31,880 | 28,257 | 14,762 | 4,390 | 3,475 |
-| \`list\` | 61,803 | 21,291 | 18,940 | 15,241 | 4,436 | 3,318 |
-| \`listbox\` | 76,711 | 25,426 | 22,469 | 15,564 | 4,611 | 3,353 |
-| \`loader\` | 26,379 | 10,040 | 8,907 | 2,775 | 945 | 660 |
-| \`map\` | 78,565 | 24,394 | 21,314 | 37,026 | 10,112 | 7,929 |
-| \`megamenu\` | 60,027 | 21,697 | 19,185 | 8,596 | 2,356 | 1,676 |
-| \`menu\` | 97,473 | 32,552 | 28,715 | 30,180 | 7,955 | 6,288 |
-| \`meter\` | 31,721 | 12,025 | 10,715 | 4,894 | 1,437 | 1,199 |
-| \`navigation\` | 33,088 | 12,436 | 11,038 | 3,366 | 1,152 | 787 |
-| \`notifications\` | 58,346 | 19,879 | 17,743 | 18,207 | 5,059 | 4,004 |
-| \`number-input\` | 56,271 | 18,841 | 16,796 | 13,523 | 3,637 | 2,747 |
-| \`object-inspector\` | 113,929 | 38,373 | 33,774 | 35,493 | 10,274 | 8,069 |
-| \`option\` | 26,477 | 9,763 | 8,663 | 4,524 | 1,201 | 901 |
-| \`outline\` | 33,612 | 12,597 | 11,178 | 7,856 | 2,562 | 1,860 |
-| \`pagination\` | 136,258 | 43,650 | 37,956 | 45,378 | 11,896 | 9,336 |
-| \`pin-input\` | 47,068 | 16,412 | 14,642 | 6,736 | 2,224 | 1,610 |
-| \`popover\` | 63,806 | 22,940 | 20,302 | 6,374 | 1,845 | 1,397 |
-| \`progress\` | 28,084 | 10,727 | 9,550 | 2,970 | 919 | 758 |
-| \`qr-code\` | 42,719 | 16,647 | 14,826 | 17,004 | 6,295 | 5,275 |
-| \`quote\` | 22,516 | 8,884 | 7,827 | 1,211 | 533 | 385 |
-| \`radio\` | 42,561 | 14,464 | 12,871 | 3,817 | 1,191 | 828 |
-| \`rating\` | 50,257 | 17,291 | 15,420 | 8,028 | 2,426 | 1,761 |
-| \`scatter-chart\` | 91,226 | 31,675 | 28,011 | 16,126 | 4,809 | 3,792 |
-| \`scroll-area\` | 30,430 | 11,078 | 9,813 | 8,499 | 2,589 | 1,943 |
-| \`select\` | 115,289 | 38,175 | 33,463 | 26,033 | 7,152 | 5,349 |
-| \`skeleton\` | 22,328 | 8,643 | 7,700 | 991 | 406 | 238 |
-| \`skip-link\` | 23,871 | 9,337 | 8,259 | 1,225 | 500 | 302 |
-| \`slider\` | 52,873 | 17,826 | 15,916 | 13,159 | 3,775 | 2,933 |
-| \`sparkline\` | 47,984 | 17,499 | 15,600 | 5,980 | 2,121 | 1,625 |
-| \`spatial-heatmap\` | 106,543 | 35,963 | 31,725 | 26,485 | 7,651 | 6,135 |
-| \`spatial-scatter-chart\` | 94,415 | 33,050 | 29,159 | 16,256 | 5,251 | 4,207 |
-| \`spatial-surface-chart\` | 96,111 | 33,771 | 29,811 | 17,890 | 5,911 | 4,698 |
-| \`speed-dial\` | 68,751 | 24,717 | 21,968 | 10,915 | 2,964 | 2,242 |
-| \`splitter\` | 43,751 | 15,169 | 13,529 | 14,396 | 3,846 | 3,015 |
-| \`stat\` | 25,255 | 9,674 | 8,601 | 2,303 | 767 | 454 |
-| \`steps\` | 53,623 | 18,635 | 16,624 | 13,602 | 3,853 | 3,097 |
-| \`switch\` | 39,233 | 13,496 | 12,030 | 1,679 | 610 | 321 |
-| \`table\` | 118,358 | 37,061 | 32,239 | 45,147 | 12,471 | 9,949 |
-| \`tabs\` | 46,310 | 15,908 | 14,143 | 10,491 | 2,879 | 2,169 |
-| \`tag\` | 42,676 | 15,619 | 13,985 | 8,454 | 2,532 | 1,758 |
-| \`textarea\` | 43,852 | 14,939 | 13,347 | 5,402 | 1,596 | 1,140 |
-| \`time-input\` | 169,269 | 52,675 | 45,792 | 48,510 | 12,432 | 9,823 |
-| \`time-picker\` | 99,603 | 31,517 | 27,753 | 33,933 | 9,203 | 7,081 |
-| \`timeline\` | 31,286 | 11,862 | 10,612 | 4,061 | 1,217 | 875 |
-| \`toast\` | 50,871 | 17,939 | 15,975 | 12,123 | 3,514 | 2,756 |
-| \`toggle\` | 45,577 | 15,271 | 13,574 | 6,007 | 1,818 | 1,390 |
-| \`toolbar\` | 31,047 | 11,572 | 10,294 | 5,158 | 1,656 | 1,309 |
-| \`tooltip\` | 58,616 | 21,090 | 18,732 | 8,433 | 2,350 | 1,823 |
-| \`tour\` | 83,670 | 28,721 | 25,403 | 19,814 | 5,441 | 4,144 |
-| \`tree\` | 67,586 | 22,717 | 20,253 | 17,198 | 4,960 | 3,853 |
-| \`trend\` | 29,717 | 11,568 | 10,337 | 3,486 | 1,114 | 846 |
-| \`video\` | 141,208 | 44,137 | 38,471 | 66,218 | 16,798 | 13,694 |
-| \`video-playlist\` | 127,686 | 41,300 | 36,326 | 42,774 | 11,208 | 9,159 |
-| \`virtual-list\` | 63,451 | 21,631 | 19,286 | 23,305 | 7,147 | 5,746 |
+| \`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 |
 
 ### Styled tier
 
@@ -4601,114 +4601,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,212 | 8,746 | 2,445 | 1,896 |
-| \`announcement\` | 41,307 | 14,363 | 12,791 | 9,278 | 2,474 | 1,876 |
-| \`app-header\` | 37,449 | 13,103 | 11,681 | 11,016 | 2,985 | 2,330 |
-| \`area-chart\` | 98,393 | 33,576 | 29,663 | 22,130 | 6,227 | 4,994 |
-| \`aura\` | 56,085 | 19,320 | 17,112 | 29,774 | 9,287 | 7,830 |
-| \`avatar\` | 33,464 | 12,351 | 11,019 | 6,945 | 1,975 | 1,565 |
-| \`badge\` | 32,595 | 11,820 | 10,534 | 8,438 | 2,152 | 1,748 |
-| \`bar-chart\` | 108,944 | 35,725 | 31,603 | 32,531 | 8,366 | 6,760 |
-| \`blockquote\` | 26,332 | 9,968 | 8,814 | 4,612 | 1,413 | 1,140 |
-| \`breadcrumbs\` | 43,220 | 15,115 | 13,513 | 14,285 | 3,663 | 2,958 |
-| \`button\` | 41,612 | 14,008 | 12,455 | 11,324 | 2,879 | 2,275 |
-| \`button-group\` | 31,138 | 11,066 | 9,807 | 8,408 | 2,198 | 1,654 |
-| \`callout\` | 39,049 | 14,535 | 12,915 | 6,659 | 1,932 | 1,569 |
-| \`canvas\` | 129,523 | 38,715 | 33,881 | 89,608 | 24,790 | 20,937 |
-| \`card\` | 27,678 | 10,059 | 8,928 | 5,976 | 1,639 | 1,242 |
-| \`carousel\` | 53,234 | 17,022 | 15,279 | 25,476 | 6,003 | 4,796 |
-| \`chat\` | 94,674 | 29,166 | 25,842 | 42,729 | 10,812 | 8,672 |
-| \`checkbox\` | 46,865 | 15,190 | 13,504 | 9,580 | 2,473 | 1,836 |
-| \`checkbox-group\` | 54,826 | 17,244 | 15,357 | 15,538 | 4,014 | 3,122 |
-| \`code\` | 21,154 | 8,332 | 7,403 | 976 | 407 | 321 |
-| \`code-block\` | 127,213 | 38,713 | 34,184 | 61,301 | 14,710 | 12,075 |
-| \`color-input\` | 184,176 | 51,349 | 44,889 | 97,505 | 20,450 | 17,049 |
-| \`color-picker\` | 140,348 | 38,509 | 33,760 | 84,178 | 18,270 | 15,134 |
-| \`combobox\` | 147,503 | 44,927 | 39,581 | 51,253 | 12,081 | 9,670 |
-| \`command\` | 110,791 | 33,833 | 29,778 | 41,332 | 10,518 | 8,412 |
-| \`copy-button\` | 92,577 | 29,824 | 26,422 | 30,354 | 7,208 | 5,752 |
-| \`data-table\` | 230,715 | 66,818 | 57,191 | 120,284 | 29,331 | 23,807 |
-| \`date-input\` | 162,349 | 48,215 | 42,406 | 59,337 | 13,203 | 10,778 |
-| \`date-picker\` | 69,281 | 22,362 | 20,026 | 28,248 | 7,041 | 5,630 |
-| \`description-list\` | 25,855 | 9,517 | 8,441 | 4,508 | 1,258 | 985 |
-| \`dialog\` | 43,360 | 14,853 | 13,261 | 10,933 | 3,018 | 2,385 |
-| \`divider\` | 25,291 | 9,545 | 8,427 | 3,699 | 1,139 | 952 |
-| \`donut-chart\` | 99,170 | 33,262 | 29,379 | 24,576 | 6,671 | 5,316 |
-| \`drawer\` | 48,725 | 16,506 | 14,714 | 13,512 | 3,705 | 3,002 |
-| \`drilldown\` | 48,438 | 16,238 | 14,488 | 15,377 | 4,031 | 3,117 |
-| \`empty\` | 25,503 | 9,726 | 8,595 | 3,242 | 1,089 | 811 |
-| \`file-input\` | 69,285 | 22,418 | 19,908 | 24,612 | 6,540 | 5,241 |
-| \`filter-input\` | 108,688 | 34,990 | 31,010 | 32,465 | 8,391 | 6,772 |
-| \`flex\` | 25,740 | 9,193 | 8,152 | 4,763 | 1,045 | 829 |
-| \`format-date\` | 30,414 | 11,403 | 10,152 | 4,672 | 1,395 | 1,088 |
-| \`graph\` | 89,037 | 27,079 | 23,917 | 36,527 | 9,167 | 7,331 |
-| \`grid\` | 27,002 | 9,845 | 8,730 | 5,638 | 1,465 | 1,331 |
-| \`heatmap\` | 105,486 | 35,190 | 31,065 | 26,281 | 7,243 | 5,851 |
-| \`icon\` | 83,995 | 28,566 | 24,455 | 60,129 | 20,127 | 16,411 |
-| \`icon-button\` | 43,040 | 13,980 | 12,429 | 12,753 | 2,874 | 2,216 |
-| \`image\` | 26,892 | 9,946 | 8,805 | 5,193 | 1,601 | 1,355 |
-| \`input\` | 50,619 | 17,063 | 15,068 | 11,593 | 3,532 | 2,583 |
-| \`kbd\` | 29,504 | 11,109 | 9,797 | 5,494 | 1,656 | 1,219 |
-| \`legend\` | 40,423 | 14,213 | 12,586 | 8,067 | 2,273 | 1,746 |
-| \`lightbox\` | 62,016 | 20,155 | 17,903 | 23,006 | 5,997 | 4,537 |
-| \`line-chart\` | 102,454 | 34,257 | 30,360 | 25,863 | 6,824 | 5,521 |
-| \`list\` | 68,150 | 22,814 | 20,350 | 21,568 | 5,956 | 4,724 |
-| \`listbox\` | 81,154 | 26,541 | 23,439 | 19,993 | 5,717 | 4,273 |
-| \`loader\` | 29,263 | 10,815 | 9,650 | 5,642 | 1,693 | 1,267 |
-| \`map\` | 111,513 | 29,575 | 25,972 | 69,963 | 15,520 | 12,562 |
-| \`megamenu\` | 64,996 | 22,864 | 20,187 | 13,546 | 3,514 | 2,643 |
-| \`menu\` | 108,403 | 34,710 | 30,634 | 41,097 | 10,145 | 8,240 |
-| \`meter\` | 37,896 | 13,376 | 11,974 | 11,050 | 2,795 | 2,390 |
-| \`navigation\` | 36,814 | 13,267 | 11,767 | 7,077 | 2,012 | 1,532 |
-| \`notifications\` | 71,808 | 22,445 | 20,068 | 31,662 | 7,634 | 6,190 |
-| \`number-input\` | 61,253 | 20,026 | 17,816 | 18,490 | 4,826 | 3,686 |
-| \`object-inspector\` | 130,338 | 41,205 | 36,270 | 51,881 | 13,180 | 10,608 |
-| \`option\` | 29,672 | 10,762 | 9,538 | 7,711 | 2,200 | 1,708 |
-| \`orb\` | 35,265 | 13,487 | 12,000 | 9,732 | 3,655 | 2,926 |
-| \`outline\` | 37,846 | 13,457 | 11,967 | 12,073 | 3,433 | 2,661 |
-| \`pagination\` | 153,264 | 46,929 | 40,831 | 62,365 | 15,223 | 12,176 |
-| \`pin-input\` | 50,409 | 17,315 | 15,430 | 10,058 | 3,142 | 2,498 |
-| \`popover\` | 66,958 | 23,701 | 20,940 | 9,508 | 2,639 | 1,938 |
-| \`progress\` | 35,232 | 12,380 | 11,038 | 10,101 | 2,590 | 2,274 |
-| \`qr-code\` | 44,321 | 17,121 | 15,239 | 18,588 | 6,777 | 5,727 |
-| \`quote\` | 23,074 | 9,078 | 7,992 | 1,752 | 694 | 509 |
-| \`radio\` | 50,349 | 15,974 | 14,216 | 11,594 | 2,747 | 2,205 |
-| \`rating\` | 54,190 | 18,518 | 16,485 | 11,945 | 3,633 | 2,824 |
-| \`sandbox\` | 104,428 | 31,486 | 27,553 | 72,144 | 19,144 | 16,096 |
-| \`scatter-chart\` | 100,317 | 33,784 | 29,881 | 25,196 | 6,950 | 5,562 |
-| \`scroll-area\` | 35,437 | 12,026 | 10,703 | 13,489 | 3,576 | 2,763 |
-| \`select\` | 124,418 | 40,070 | 35,195 | 35,145 | 9,069 | 7,094 |
-| \`skeleton\` | 26,090 | 9,663 | 8,598 | 4,738 | 1,404 | 1,062 |
-| \`skip-link\` | 25,441 | 9,851 | 8,690 | 2,780 | 969 | 728 |
-| \`slider\` | 67,842 | 20,140 | 18,017 | 28,108 | 6,151 | 4,812 |
-| \`sparkline\` | 53,442 | 18,850 | 16,801 | 11,420 | 3,469 | 2,764 |
-| \`spatial-heatmap\` | 115,480 | 38,024 | 33,555 | 35,399 | 9,730 | 7,856 |
-| \`spatial-scatter-chart\` | 101,873 | 34,752 | 30,658 | 23,693 | 6,973 | 5,538 |
-| \`spatial-surface-chart\` | 103,007 | 35,444 | 31,283 | 24,765 | 7,584 | 6,216 |
-| \`speed-dial\` | 75,797 | 26,105 | 23,173 | 17,945 | 4,386 | 3,377 |
-| \`splitter\` | 49,804 | 16,207 | 14,510 | 20,430 | 4,913 | 3,890 |
-| \`stat\` | 28,117 | 10,371 | 9,242 | 5,157 | 1,466 | 1,165 |
-| \`steps\` | 67,449 | 21,377 | 19,062 | 27,416 | 6,645 | 5,276 |
-| \`strands\` | 62,138 | 23,151 | 20,411 | 38,012 | 13,745 | 11,848 |
-| \`switch\` | 43,562 | 14,636 | 13,022 | 5,998 | 1,757 | 1,272 |
-| \`table\` | 135,900 | 40,155 | 34,995 | 62,688 | 15,587 | 12,609 |
-| \`tabs\` | 55,263 | 17,752 | 15,791 | 19,436 | 4,752 | 3,703 |
-| \`tag\` | 47,247 | 16,755 | 14,987 | 13,015 | 3,624 | 2,881 |
-| \`text\` | 28,756 | 9,942 | 8,760 | 7,395 | 1,508 | 1,167 |
-| \`textarea\` | 47,785 | 15,947 | 14,223 | 9,318 | 2,652 | 2,095 |
-| \`time-input\` | 193,597 | 56,836 | 49,522 | 72,825 | 16,676 | 13,576 |
-| \`time-picker\` | 111,928 | 33,946 | 29,846 | 46,250 | 11,626 | 9,201 |
-| \`timeline\` | 38,179 | 13,326 | 11,920 | 10,946 | 2,728 | 2,067 |
-| \`toast\` | 58,767 | 19,782 | 17,682 | 20,005 | 5,380 | 4,286 |
-| \`toggle\` | 50,439 | 16,509 | 14,663 | 10,854 | 3,069 | 2,544 |
-| \`toolbar\` | 33,726 | 12,065 | 10,761 | 7,822 | 2,153 | 1,731 |
-| \`tooltip\` | 61,420 | 21,834 | 19,361 | 11,219 | 3,086 | 2,409 |
-| \`tour\` | 93,661 | 30,697 | 27,163 | 29,784 | 7,469 | 5,963 |
-| \`tree\` | 76,275 | 24,651 | 21,996 | 25,873 | 6,899 | 5,550 |
-| \`trend\` | 31,231 | 12,049 | 10,721 | 4,981 | 1,595 | 1,225 |
-| \`video\` | 161,715 | 47,867 | 41,822 | 86,709 | 20,348 | 17,061 |
-| \`video-playlist\` | 143,639 | 44,278 | 38,928 | 58,710 | 14,184 | 11,642 |
-| \`virtual-list\` | 65,445 | 22,138 | 19,676 | 25,282 | 7,660 | 6,111 |
+| \`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 |
 
 ## What an install adds to \`node_modules\`
 
@@ -4721,11 +4721,11 @@ 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,848,480 | 730 | 2,311,975 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-headless\` | 25,855,666 | 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,137,393 | 981 | 543,329 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix\` | 27,138,779 | 981 | 543,329 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -6700,6 +6700,181 @@ that uses it changes when the region's density changes.
 **Do not use a raw value when the scale has no step for it.** If a gap really
 falls between \`sm\` and \`md\`, note it and do not write \`11px\`. It usually means
 the two things it separates belong at different levels of the layout.
+`,
+    'spatial-charts': `---
+description: Add charts drawn in three dimensions to your site, styled with your theme, in SVG or with three.js.
+section: Essentials
+title: Spatial charts
+---
+
+# Spatial charts
+
+Helix has three charts drawn in three dimensions. Each reads its numbers from a
+table in the document, as every Helix chart does:
+
+- \`Spatial Heatmap\` draws a strip of days as a relief, each day a prism as tall
+  as its reading.
+- \`Spatial Scatter Chart\` places each row as a point in a box, by three measures
+  at once.
+- \`Spatial Surface Chart\` draws one measure as a surface over two others, such
+  as load by hour and by day.
+
+Each chart draws itself in SVG. \`@fusion.dev/helix-plot\` can also draw it with
+three.js, in a view you can drag round and zoom.
+
+## Draw a spatial chart
+
+Put the table in the document, and point the chart at it with \`for\`:
+
+\`\`\`html
+<table
+  data-hidden-visually
+  id="load"
+>
+  <caption>Load over a week</caption>
+  <thead>
+    <tr>
+      <th scope="col">Slot</th>
+      <th scope="col">Hour</th>
+      <th scope="col">Day</th>
+      <th scope="col">Requests a minute</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><th scope="row">Mon 08:00</th><td>8</td><td>1</td><td>994</td></tr>
+    …
+  </tbody>
+</table>
+
+<helix-spatial-surface-chart for="load"></helix-spatial-surface-chart>
+\`\`\`
+
+Each chart reads its columns in its own way:
+
+- **Spatial Scatter Chart** takes the first three numeric columns as across, up,
+  and in depth. \`group-by\` names a column of text that colors each point by its
+  group.
+- **Spatial Surface Chart** takes the first numeric column as across, the second
+  as depth, and the third as the height. A place on the grid with no reading
+  leaves a hole.
+- **Spatial Heatmap** reads its table as \`Heatmap\` does, down each column of
+  \`rows\` and then across. Its table goes inside it.
+
+The drawing is SVG. A server writes the chart's frame, and the drawing arrives
+when the chart reads its table in the browser.
+
+## Draw it with three.js
+
+Install the package and three.js:
+
+\`\`\`sh
+bun add @fusion.dev/helix-plot three
+\`\`\`
+
+Put an element inside the chart for three.js to draw in, and connect the two:
+
+\`\`\`html
+<helix-spatial-scatter-chart
+  for="customers"
+  group-by="Segment"
+>
+  <div></div>
+</helix-spatial-scatter-chart>
+\`\`\`
+
+\`\`\`js
+import { connectSpatialScatterChart } from '@fusion.dev/helix-plot'
+import { threeScatterDriver } from '@fusion.dev/helix-plot/three'
+
+const chart = document.querySelector('helix-spatial-scatter-chart')
+const connection = connectSpatialScatterChart(chart, threeScatterDriver(chart.querySelector('div')))
+\`\`\`
+
+Each chart has its own connector and driver:
+
+| Chart | Connector | Driver |
+|---|---|---|
+| \`Spatial Heatmap\` | \`connectSpatialHeatmap\` | \`threeHeatmapDriver\` |
+| \`Spatial Scatter Chart\` | \`connectSpatialScatterChart\` | \`threeScatterDriver\` |
+| \`Spatial Surface Chart\` | \`connectSpatialSurfaceChart\` | \`threeSurfaceDriver\` |
+
+\`Spatial Heatmap\` takes the element in its \`renderer\` slot, because its table
+is inside it:
+
+\`\`\`html
+<helix-spatial-heatmap
+  for="commits"
+  rows="7"
+>
+  <table id="commits">…</table>
+  <div slot="renderer"></div>
+</helix-spatial-heatmap>
+\`\`\`
+
+Once three.js has drawn, the chart hides its SVG drawing.
+\`connection.disconnect()\` frees the renderer and shows the SVG drawing again.
+
+## Choose SVG or three.js
+
+| | SVG | three.js |
+|---|---|---|
+| What it needs | Nothing more than the chart | \`@fusion.dev/helix-plot\`, three.js, and WebGL |
+| How the view moves | Shift with an arrow turns it a step | Drag to turn, the wheel or a pinch to zoom, and Shift with an arrow to turn a step |
+| Light | Shaded by which way each face turns, with no perspective | Lit from above, in perspective |
+| Without WebGL | Drawn | Not drawn, and the SVG drawing stays |
+
+Start with SVG. Connect three.js where a reader gains from turning the chart
+freely, or where the data is too large for SVG to draw smoothly.
+
+## Read a chart with the pointer and the keys
+
+A pointer resting on a reading shows its row in the chart's tooltip, the same
+tooltip every Helix chart shows. A tap shows it until a tap lands elsewhere.
+
+The plot takes focus, and the keys move the reading:
+
+| Key | Spatial Scatter Chart | Spatial Surface Chart |
+|---|---|---|
+| Right, Left | The next or the previous point, in the table's order | Across, to the next or the previous place |
+| Up, Down | Among the point's measures, which the readout says first | In depth, back and forward |
+| Home, End | The first or the last point | The first or the last place |
+| Shift with an arrow | Turns the view a step | Turns the view a step |
+| Enter, Space | Presses the point | Presses the place |
+| Escape | Lets the reading go | Lets the reading go |
+
+\`Spatial Heatmap\` takes \`Heatmap\`'s keys, and Shift with an arrow turns its
+view, except under \`selection-mode="multiple"\`, where it selects a range.
+
+In three.js, a turn moves over a quarter of a second, and with reduced motion
+set it happens at once. The SVG drawing turns in one step. No spatial chart
+turns by itself.
+
+## Color a spatial chart
+
+Each chart takes its colors from your theme, and these hooks change them:
+
+- **Spatial Scatter Chart**: each group takes a series color,
+  \`--chart-series-1\` and on.
+- **Spatial Surface Chart**: the surface is shaded from \`--spatial-surface-chart-low\`
+  to \`--spatial-surface-chart-high\`.
+- **Spatial Heatmap**: each day takes its tone's color, as on \`Heatmap\`:
+  \`--heatmap-tone-1\` to \`--heatmap-tone-5\` along the ramp, or a named tone such
+  as \`--heatmap-tone-success\`. \`--spatial-heatmap-left-shade\` and
+  \`--spatial-heatmap-right-shade\` set how much less light each side of a prism
+  is than its top.
+
+three.js reads the same colors, so the two drawings agree. It lights the
+prisms and the surface itself, so the two shade hooks apply to the SVG drawing
+alone.
+
+## Many drawings on one page
+
+Every three.js drawing Helix makes on a page shares six WebGL contexts, the
+spatial charts' and the graphs' alike. Past six, a drawing far off screen gives
+its context back and takes it again as it comes near.
+
+A three.js drawing draws only while something moves. It asks the browser for no
+frames at rest, or while it is out of view.
 `,
     'state-and-control': `---
 description: How a property you set becomes a starting value, and how to cancel or take over a change.