@fusion.dev/helix-docs 0.130.0 → 0.132.0

package/dist/sources.generated.js

@@ -1763,6 +1763,33 @@ Set a default for every note with the driver's options, such as
 \`sigmaDriver(sigma, { material: 'glass', shape: 'circle' })\`. cosmos.gl draws a
 note's \`shape\` and not its \`emphasis\` or \`material\`.
 
+## Show a legend
+
+Set \`legend\` to name the groups over the drawing, each in its color. Each name
+is a button that shows or hides the group's notes, in the drawing and in the
+list:
+
+\`\`\`html
+<helix-graph label="Company notes" legend>
+  <div></div>
+</helix-graph>
+\`\`\`
+
+\`hiddenGroups\` holds the names of the groups turned off. Set it to start with
+some hidden. A press sends \`helix-graph-filter\` first, with every group that
+would be hidden. Cancel it to keep the groups as they were, or to keep them in
+your own state and set \`hiddenGroups\` yourself:
+
+\`\`\`ts
+frame.addEventListener('helix-graph-filter', (event) => {
+  event.preventDefault()
+  frame.hiddenGroups = event.detail.hidden
+})
+\`\`\`
+
+The legend is drawn where the notes have two groups or more. On a frame
+narrower than 40rem it is one row, which scrolls.
+
 ## Select a note
 
 Pressing a note selects it, and pressing where no note is clears the selection.
@@ -2282,7 +2309,8 @@ computed from \`brand\` or from the Helix design language. A theme that sets onl
 |---|---|
 | \`brand\` | Your main brand color. Required |
 | \`accent\` | The second emphasis color. Defaults to the brand color. \`{ from: 'brand', rotate: 180 }\` gives the complementary color |
-| \`neutral\` | The gray ramp, which can be tinted toward the brand |
+| \`background\` | The page's color, \`{ light, dark }\`, for a page that is not pure white or pure black. The surfaces keep their contrast with it, and the grays take its tint. A page no text color can reach the contrast target on is refused |
+| \`neutral\` | The gray ramp, which can be tinted toward the brand. With \`background\`, it takes the page's tint |
 | \`status\` | \`info\`, \`success\`, \`warning\`, and \`danger\`. A color pins one. An object adjusts its hue while it keeps its meaning |
 | \`chroma\` | How saturated the palette is, independent of hue |
 | \`scheme\` | \`'light'\` or \`'dark'\`, for a theme that has only one mode |
@@ -3306,7 +3334,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 183,972 | 58,625 | 49,668 |
+| Lit and \`@fusion.dev/helix-core\` | 184,181 | 58,652 | 49,665 |
 
 ## Whole packages
 
@@ -3317,11 +3345,11 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 183,526 | 58,197 | 49,382 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 744,183 | 192,766 | 149,315 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 183,735 | 58,230 | 49,473 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 746,073 | 193,246 | 149,775 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 55,565 | 17,727 | 14,864 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| \`@fusion.dev/helix\` | 1,284,331 | 300,652 | 220,010 | Every styled family. |
+| \`@fusion.dev/helix\` | 1,291,284 | 301,883 | 220,711 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -3342,13 +3370,13 @@ shows the whole cost of using the base layer on its own.
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 21,356 bytes gzipped alone, and it adds 2,260 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 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 21,372 bytes gzipped alone, and it adds 2,254 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 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 104 styled components, the smallest is \`code\` at 9,914 bytes gzipped alone, and the largest is \`data-table\` at 63,785. Every family together is 300,652.
+Across the 104 styled components, the smallest is \`code\` at 9,928 bytes gzipped alone, and the largest is \`data-table\` at 63,813. Every family together is 301,883.
 
-No family imports a barrel. The \`barrels\` rule in \`fusion workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 192,766 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 104 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 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 193,246 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 104 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 21,912 bytes gzipped alone.
+The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 21,928 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -3360,43 +3388,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 43,625 | 12,540 | 11,001 |
+| \`button\` | **Helix** | 43,806 | 12,554 | 11,023 |
 | | 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** | 48,869 | 13,913 | 12,220 |
+| \`checkbox\` | **Helix** | 49,050 | 13,927 | 12,237 |
 | | 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** | 40,757 | 12,115 | 10,693 |
+| \`dialog\` | **Helix** | 40,938 | 12,132 | 10,723 |
 | | 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** | 52,386 | 14,377 | 12,634 |
+| \`radio\` | **Helix** | 52,567 | 14,389 | 12,655 |
 | | 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** | 45,958 | 13,443 | 11,806 |
+| \`switch\` | **Helix** | 46,139 | 13,459 | 11,778 |
 | | 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** | 47,068 | 13,471 | 11,852 |
+| \`tabs\` | **Helix** | 47,249 | 13,492 | 11,867 |
 | | 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** | 67,648 | 21,959 | 19,420 |
+| \`tooltip\` | **Helix** | 67,829 | 21,974 | 19,470 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 
-At least one system is smaller than Helix on \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 3,717 bytes gzipped. 8 of 28 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 3,729 bytes gzipped. 8 of 28 peer measurements are smaller than the Helix row.
 
 - **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
 - **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
@@ -3440,104 +3468,104 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 92,320 | 30,104 | 24,545 | 2,875 | 742 | 638 |
-| \`announcement\` | 89,736 | 29,283 | 23,868 | 1,386 | 357 | 233 |
-| \`app-header\` | 33,322 | 10,209 | 8,981 | 1,248 | 274 | 159 |
-| \`area-chart\` | 79,244 | 26,176 | 23,109 | 11,004 | 3,358 | 2,670 |
-| \`avatar\` | 35,371 | 10,801 | 9,527 | 3,257 | 874 | 643 |
-| \`badge\` | 32,858 | 10,137 | 8,912 | 1,163 | 297 | 219 |
-| \`bar-chart\` | 80,895 | 26,537 | 23,439 | 12,644 | 3,707 | 3,021 |
-| \`blockquote\` | 32,872 | 10,162 | 8,928 | 774 | 177 | 168 |
-| \`breadcrumbs\` | 88,776 | 28,630 | 23,481 | 1,965 | 450 | 338 |
-| \`button\` | 37,532 | 11,421 | 10,035 | 3,182 | 812 | 540 |
-| \`button-group\` | 32,728 | 10,043 | 8,831 | 661 | 137 | 84 |
-| \`callout\` | 87,896 | 28,486 | 23,338 | 914 | 237 | 184 |
-| \`canvas\` | 93,945 | 27,721 | 24,258 | 50,034 | 14,929 | 12,517 |
-| \`card\` | 32,762 | 10,060 | 8,842 | 694 | 150 | 73 |
-| \`carousel\` | 98,179 | 31,605 | 25,934 | 10,942 | 2,756 | 2,316 |
-| \`chat\` | 111,568 | 36,458 | 29,867 | 17,447 | 5,119 | 4,327 |
-| \`checkbox\` | 42,243 | 12,451 | 10,940 | 2,703 | 741 | 528 |
-| \`checkbox-group\` | 45,367 | 13,146 | 11,530 | 5,307 | 1,329 | 982 |
-| \`code\` | 31,347 | 9,626 | 8,466 | 451 | 74 | -4 |
-| \`code-block\` | 133,622 | 43,657 | 36,760 | 17,288 | 4,499 | 3,789 |
-| \`color-input\` | 151,598 | 47,705 | 40,199 | 25,691 | 5,996 | 5,040 |
-| \`color-picker\` | 118,043 | 37,095 | 30,514 | 19,588 | 4,695 | 3,962 |
-| \`combobox\` | 146,510 | 46,395 | 38,931 | 21,146 | 5,232 | 4,231 |
-| \`command\` | 116,460 | 36,380 | 29,745 | 18,065 | 4,593 | 3,705 |
-| \`copy-button\` | 128,220 | 42,023 | 35,279 | 11,883 | 2,930 | 2,408 |
-| \`data-table\` | 186,713 | 56,860 | 48,041 | 57,295 | 14,502 | 12,021 |
-| \`date-input\` | 144,768 | 45,890 | 38,548 | 19,177 | 4,836 | 3,923 |
-| \`date-picker\` | 99,955 | 32,332 | 26,398 | 9,900 | 2,716 | 2,148 |
-| \`description-list\` | 32,831 | 9,998 | 8,769 | 1,132 | 182 | 149 |
-| \`dialog\` | 36,380 | 11,095 | 9,756 | 2,717 | 771 | 576 |
-| \`divider\` | 33,078 | 10,233 | 8,978 | 981 | 237 | 97 |
-| \`donut-chart\` | 77,027 | 25,133 | 22,183 | 10,214 | 2,953 | 2,466 |
-| \`drawer\` | 35,133 | 10,733 | 9,426 | 1,761 | 472 | 404 |
-| \`drilldown\` | 96,821 | 31,476 | 25,613 | 5,704 | 1,488 | 1,167 |
-| \`empty\` | 33,325 | 10,295 | 9,030 | 956 | 240 | 124 |
-| \`file-input\` | 100,268 | 32,315 | 26,350 | 6,215 | 1,790 | 1,471 |
-| \`filter-input\` | 157,062 | 49,093 | 41,414 | 28,023 | 6,778 | 5,534 |
-| \`format-date\` | 36,341 | 11,211 | 9,892 | 2,867 | 692 | 461 |
-| \`graph\` | 112,981 | 36,030 | 29,569 | 9,932 | 2,820 | 2,386 |
-| \`heatmap\` | 78,249 | 25,359 | 22,345 | 10,872 | 2,971 | 2,407 |
-| \`icon\` | 87,463 | 28,303 | 23,183 | 1,018 | 243 | 202 |
-| \`icon-button\` | 37,931 | 11,453 | 10,064 | 3,581 | 852 | 625 |
-| \`image\` | 34,901 | 10,593 | 9,328 | 3,156 | 811 | 721 |
-| \`input\` | 99,356 | 31,796 | 25,949 | 4,745 | 1,302 | 965 |
-| \`kbd\` | 34,682 | 10,828 | 9,526 | 2,976 | 927 | 719 |
-| \`legend\` | 36,734 | 11,333 | 9,974 | 1,080 | 285 | 159 |
-| \`lightbox\` | 41,116 | 12,371 | 10,866 | 4,807 | 1,243 | 908 |
-| \`line-chart\` | 78,825 | 25,867 | 22,831 | 10,667 | 3,066 | 2,515 |
-| \`list\` | 33,784 | 10,241 | 9,005 | 1,726 | 353 | 299 |
-| \`listbox\` | 108,172 | 34,495 | 28,108 | 11,262 | 3,049 | 2,431 |
-| \`loader\` | 32,968 | 10,164 | 8,924 | 900 | 240 | 96 |
-| \`map\` | 133,137 | 39,632 | 32,810 | 33,027 | 7,673 | 6,215 |
-| \`megamenu\` | 63,226 | 20,871 | 18,438 | 4,941 | 1,275 | 1,003 |
-| \`menu\` | 126,948 | 41,932 | 35,135 | 8,855 | 2,191 | 1,685 |
-| \`meter\` | 36,158 | 11,012 | 9,702 | 4,099 | 1,066 | 862 |
-| \`navigation\` | 34,662 | 10,697 | 9,395 | 1,361 | 307 | 163 |
-| \`notifications\` | 104,000 | 33,057 | 26,940 | 11,383 | 2,635 | 2,181 |
-| \`number-input\` | 102,284 | 32,617 | 26,649 | 7,670 | 2,002 | 1,521 |
-| \`object-inspector\` | 141,321 | 46,247 | 38,885 | 19,550 | 5,221 | 4,279 |
-| \`option\` | 35,023 | 10,607 | 9,342 | 2,958 | 653 | 403 |
-| \`outline\` | 38,086 | 11,889 | 10,459 | 4,628 | 1,322 | 975 |
-| \`pagination\` | 150,637 | 47,104 | 39,524 | 27,821 | 6,540 | 5,281 |
-| \`pin-input\` | 44,541 | 13,235 | 11,659 | 5,241 | 1,555 | 1,232 |
-| \`popover\` | 60,432 | 20,114 | 17,726 | 1,899 | 490 | 313 |
-| \`progress\` | 34,009 | 10,438 | 9,187 | 1,951 | 491 | 361 |
-| \`qr-code\` | 44,658 | 14,489 | 12,767 | 12,983 | 4,867 | 4,021 |
-| \`quote\` | 32,251 | 9,916 | 8,695 | 552 | 128 | 52 |
-| \`radio\` | 44,090 | 12,861 | 11,273 | 2,874 | 726 | 509 |
-| \`rating\` | 46,255 | 13,823 | 12,178 | 6,646 | 1,865 | 1,465 |
-| \`scatter-chart\` | 78,729 | 25,800 | 22,693 | 11,346 | 3,365 | 2,688 |
-| \`scroll-area\` | 34,494 | 10,602 | 9,304 | 2,743 | 736 | 503 |
-| \`select\` | 138,747 | 44,523 | 37,301 | 16,144 | 4,086 | 3,384 |
-| \`skeleton\` | 31,440 | 9,658 | 8,486 | 544 | 101 | 50 |
-| \`skip-link\` | 33,030 | 10,223 | 8,986 | 1,178 | 341 | 175 |
-| \`slider\` | 45,080 | 13,265 | 11,697 | 5,627 | 1,514 | 1,112 |
-| \`sparkline\` | 39,153 | 12,367 | 10,898 | 2,387 | 781 | 568 |
-| \`speed-dial\` | 118,457 | 39,524 | 33,181 | 3,743 | 913 | 647 |
-| \`splitter\` | 42,533 | 12,676 | 11,224 | 10,282 | 2,598 | 2,120 |
-| \`stat\` | 33,216 | 10,098 | 8,877 | 1,148 | 195 | 95 |
-| \`steps\` | 97,006 | 31,091 | 25,355 | 6,264 | 1,483 | 1,143 |
-| \`switch\` | 41,592 | 12,370 | 10,837 | 1,650 | 481 | 273 |
-| \`table\` | 99,146 | 32,283 | 26,280 | 10,158 | 2,803 | 2,244 |
-| \`tabs\` | 40,832 | 12,205 | 10,698 | 3,925 | 845 | 587 |
-| \`tag\` | 88,176 | 28,560 | 23,300 | 895 | 185 | 125 |
-| \`textarea\` | 43,779 | 12,879 | 11,289 | 3,996 | 1,079 | 823 |
-| \`time-input\` | 157,898 | 49,104 | 41,306 | 29,016 | 7,059 | 5,800 |
-| \`time-picker\` | 117,015 | 37,083 | 30,307 | 19,136 | 5,114 | 4,173 |
-| \`timeline\` | 88,625 | 28,550 | 23,460 | 1,809 | 391 | 317 |
-| \`toast\` | 91,982 | 29,698 | 24,204 | 4,078 | 950 | 728 |
-| \`toggle\` | 45,776 | 13,386 | 11,799 | 3,342 | 820 | 604 |
-| \`toolbar\` | 34,822 | 10,796 | 9,515 | 2,624 | 719 | 542 |
-| \`tooltip\` | 64,570 | 21,200 | 18,750 | 6,369 | 1,720 | 1,278 |
-| \`tour\` | 70,389 | 22,624 | 19,907 | 11,032 | 2,732 | 2,247 |
-| \`tree\` | 98,840 | 31,909 | 25,969 | 7,223 | 1,881 | 1,592 |
-| \`trend\` | 87,503 | 28,348 | 23,258 | 1,056 | 278 | 245 |
-| \`video\` | 155,165 | 48,771 | 41,158 | 32,520 | 7,643 | 6,468 |
-| \`video-playlist\` | 134,438 | 43,546 | 36,518 | 14,940 | 3,432 | 2,768 |
-| \`virtual-list\` | 38,680 | 12,069 | 10,609 | 2,413 | 714 | 513 |
+| \`accordion\` | 92,501 | 30,124 | 24,580 | 2,875 | 735 | 651 |
+| \`announcement\` | 89,917 | 29,305 | 23,824 | 1,386 | 356 | 276 |
+| \`app-header\` | 33,503 | 10,226 | 8,992 | 1,248 | 263 | 196 |
+| \`area-chart\` | 79,425 | 26,192 | 23,066 | 11,004 | 3,367 | 2,721 |
+| \`avatar\` | 35,552 | 10,823 | 9,574 | 3,257 | 879 | 700 |
+| \`badge\` | 33,039 | 10,154 | 8,911 | 1,163 | 297 | 216 |
+| \`bar-chart\` | 81,076 | 26,555 | 23,488 | 12,644 | 3,701 | 3,035 |
+| \`blockquote\` | 33,053 | 10,175 | 8,938 | 774 | 176 | 128 |
+| \`breadcrumbs\` | 88,957 | 28,651 | 23,520 | 1,965 | 451 | 379 |
+| \`button\` | 37,713 | 11,437 | 10,046 | 3,182 | 812 | 670 |
+| \`button-group\` | 32,909 | 10,061 | 8,843 | 661 | 137 | 34 |
+| \`callout\` | 88,077 | 28,508 | 23,396 | 914 | 233 | 168 |
+| \`canvas\` | 94,126 | 27,730 | 24,309 | 50,034 | 14,930 | 12,613 |
+| \`card\` | 32,943 | 10,076 | 8,874 | 694 | 143 | 79 |
+| \`carousel\` | 98,360 | 31,625 | 25,963 | 10,942 | 2,744 | 2,230 |
+| \`chat\` | 111,749 | 36,472 | 29,900 | 17,447 | 5,110 | 4,204 |
+| \`checkbox\` | 42,424 | 12,472 | 10,962 | 2,703 | 748 | 514 |
+| \`checkbox-group\` | 45,548 | 13,159 | 11,549 | 5,307 | 1,316 | 1,017 |
+| \`code\` | 31,528 | 9,644 | 8,470 | 451 | 77 | -1 |
+| \`code-block\` | 133,803 | 43,664 | 36,792 | 17,288 | 4,490 | 3,847 |
+| \`color-input\` | 151,779 | 47,718 | 40,233 | 25,691 | 5,998 | 4,976 |
+| \`color-picker\` | 118,224 | 37,113 | 30,494 | 19,588 | 4,689 | 3,874 |
+| \`combobox\` | 146,722 | 46,415 | 38,946 | 21,177 | 5,239 | 4,380 |
+| \`command\` | 116,641 | 36,394 | 29,750 | 18,065 | 4,588 | 3,719 |
+| \`copy-button\` | 128,401 | 42,039 | 35,305 | 11,883 | 2,933 | 2,322 |
+| \`data-table\` | 186,894 | 56,878 | 48,021 | 57,295 | 14,485 | 11,997 |
+| \`date-input\` | 144,981 | 45,912 | 38,562 | 19,209 | 4,845 | 4,000 |
+| \`date-picker\` | 100,136 | 32,351 | 26,467 | 9,900 | 2,714 | 2,336 |
+| \`description-list\` | 33,012 | 10,012 | 8,793 | 1,132 | 182 | 155 |
+| \`dialog\` | 36,561 | 11,114 | 9,752 | 2,717 | 765 | 587 |
+| \`divider\` | 33,259 | 10,251 | 8,997 | 981 | 237 | 144 |
+| \`donut-chart\` | 77,208 | 25,153 | 22,270 | 10,214 | 2,959 | 2,474 |
+| \`drawer\` | 35,314 | 10,755 | 9,427 | 1,761 | 466 | 446 |
+| \`drilldown\` | 97,002 | 31,492 | 25,596 | 5,704 | 1,481 | 1,170 |
+| \`empty\` | 33,506 | 10,310 | 9,098 | 956 | 233 | 140 |
+| \`file-input\` | 100,500 | 32,345 | 26,387 | 6,266 | 1,803 | 1,479 |
+| \`filter-input\` | 157,243 | 49,107 | 41,347 | 28,023 | 6,779 | 5,542 |
+| \`format-date\` | 36,522 | 11,235 | 9,940 | 2,867 | 684 | 532 |
+| \`graph\` | 114,708 | 36,466 | 29,953 | 11,479 | 3,233 | 2,708 |
+| \`heatmap\` | 78,430 | 25,372 | 22,403 | 10,872 | 2,982 | 2,366 |
+| \`icon\` | 87,644 | 28,324 | 23,220 | 1,018 | 245 | 126 |
+| \`icon-button\` | 38,112 | 11,466 | 10,070 | 3,581 | 852 | 646 |
+| \`image\` | 35,082 | 10,613 | 9,334 | 3,156 | 809 | 657 |
+| \`input\` | 99,537 | 31,813 | 25,941 | 4,745 | 1,288 | 938 |
+| \`kbd\` | 34,863 | 10,848 | 9,529 | 2,976 | 922 | 855 |
+| \`legend\` | 36,915 | 11,350 | 9,960 | 1,080 | 272 | 189 |
+| \`lightbox\` | 41,297 | 12,391 | 10,850 | 4,807 | 1,230 | 1,011 |
+| \`line-chart\` | 79,006 | 25,890 | 22,857 | 10,667 | 3,075 | 2,501 |
+| \`list\` | 33,965 | 10,256 | 9,022 | 1,726 | 349 | 265 |
+| \`listbox\` | 108,353 | 34,516 | 28,179 | 11,262 | 3,044 | 2,405 |
+| \`loader\` | 33,149 | 10,182 | 8,936 | 900 | 233 | 132 |
+| \`map\` | 133,318 | 39,647 | 32,893 | 33,027 | 7,682 | 6,249 |
+| \`megamenu\` | 63,407 | 20,893 | 18,412 | 4,941 | 1,268 | 1,012 |
+| \`menu\` | 127,129 | 41,951 | 35,088 | 8,855 | 2,191 | 1,752 |
+| \`meter\` | 36,339 | 11,032 | 9,727 | 4,099 | 1,058 | 850 |
+| \`navigation\` | 34,843 | 10,709 | 9,395 | 1,361 | 301 | 226 |
+| \`notifications\` | 104,181 | 33,078 | 26,996 | 11,383 | 2,637 | 2,263 |
+| \`number-input\` | 102,465 | 32,630 | 26,674 | 7,670 | 2,010 | 1,515 |
+| \`object-inspector\` | 141,502 | 46,264 | 38,895 | 19,550 | 5,225 | 4,370 |
+| \`option\` | 35,204 | 10,629 | 9,352 | 2,958 | 646 | 543 |
+| \`outline\` | 38,267 | 11,902 | 10,469 | 4,628 | 1,320 | 1,075 |
+| \`pagination\` | 150,818 | 47,121 | 39,598 | 27,821 | 6,525 | 5,229 |
+| \`pin-input\` | 44,722 | 13,245 | 11,628 | 5,241 | 1,548 | 1,179 |
+| \`popover\` | 60,613 | 20,139 | 17,762 | 1,899 | 486 | 360 |
+| \`progress\` | 34,190 | 10,456 | 9,184 | 1,951 | 488 | 352 |
+| \`qr-code\` | 44,839 | 14,504 | 12,798 | 12,983 | 4,859 | 4,083 |
+| \`quote\` | 32,432 | 9,937 | 8,724 | 552 | 125 | -55 |
+| \`radio\` | 44,271 | 12,878 | 11,314 | 2,874 | 720 | 568 |
+| \`rating\` | 46,436 | 13,840 | 12,202 | 6,646 | 1,862 | 1,447 |
+| \`scatter-chart\` | 78,910 | 25,815 | 22,718 | 11,346 | 3,364 | 2,755 |
+| \`scroll-area\` | 34,675 | 10,620 | 9,312 | 2,743 | 736 | 635 |
+| \`select\` | 138,928 | 44,536 | 37,346 | 16,144 | 4,078 | 3,263 |
+| \`skeleton\` | 31,621 | 9,676 | 8,488 | 544 | 103 | 52 |
+| \`skip-link\` | 33,211 | 10,244 | 8,980 | 1,178 | 329 | 235 |
+| \`slider\` | 45,261 | 13,279 | 11,755 | 5,627 | 1,513 | 1,325 |
+| \`sparkline\` | 39,334 | 12,383 | 10,923 | 2,387 | 779 | 670 |
+| \`speed-dial\` | 118,638 | 39,539 | 33,189 | 3,743 | 915 | 719 |
+| \`splitter\` | 42,714 | 12,692 | 11,214 | 10,282 | 2,596 | 2,223 |
+| \`stat\` | 33,397 | 10,120 | 8,906 | 1,148 | 193 | 173 |
+| \`steps\` | 97,187 | 31,106 | 25,374 | 6,264 | 1,479 | 1,106 |
+| \`switch\` | 41,773 | 12,384 | 10,883 | 1,650 | 497 | 338 |
+| \`table\` | 99,327 | 32,297 | 26,296 | 10,158 | 2,798 | 2,311 |
+| \`tabs\` | 41,013 | 12,219 | 10,747 | 3,925 | 834 | 594 |
+| \`tag\` | 88,370 | 28,577 | 23,348 | 908 | 197 | 161 |
+| \`textarea\` | 43,960 | 12,892 | 11,311 | 3,996 | 1,070 | 755 |
+| \`time-input\` | 158,111 | 49,133 | 41,350 | 29,048 | 7,058 | 5,895 |
+| \`time-picker\` | 117,196 | 37,094 | 30,330 | 19,136 | 5,104 | 4,148 |
+| \`timeline\` | 88,806 | 28,574 | 23,446 | 1,809 | 380 | 300 |
+| \`toast\` | 92,163 | 29,709 | 24,315 | 4,078 | 951 | 820 |
+| \`toggle\` | 45,957 | 13,403 | 11,795 | 3,342 | 816 | 583 |
+| \`toolbar\` | 35,003 | 10,814 | 9,482 | 2,624 | 717 | 552 |
+| \`tooltip\` | 64,751 | 21,220 | 18,782 | 6,369 | 1,715 | 1,350 |
+| \`tour\` | 70,570 | 22,635 | 19,952 | 11,032 | 2,719 | 2,232 |
+| \`tree\` | 99,021 | 31,924 | 25,969 | 7,223 | 1,882 | 1,539 |
+| \`trend\` | 87,684 | 28,370 | 23,291 | 1,056 | 289 | 243 |
+| \`video\` | 155,346 | 48,784 | 41,231 | 32,520 | 7,642 | 6,463 |
+| \`video-playlist\` | 134,619 | 43,557 | 36,484 | 14,940 | 3,436 | 2,859 |
+| \`virtual-list\` | 38,861 | 12,087 | 10,662 | 2,413 | 711 | 522 |
 
 ### Styled tier
 
@@ -3545,110 +3573,110 @@ 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\` | 95,662 | 30,960 | 25,232 | 6,204 | 1,546 | 1,300 |
-| \`announcement\` | 94,298 | 30,394 | 24,787 | 5,932 | 1,409 | 1,172 |
-| \`app-header\` | 37,212 | 11,108 | 9,804 | 5,121 | 1,172 | 935 |
-| \`area-chart\` | 86,630 | 27,780 | 24,508 | 18,366 | 4,984 | 4,085 |
-| \`aura\` | 100,349 | 33,607 | 29,144 | 65,483 | 23,028 | 19,584 |
-| \`avatar\` | 38,957 | 11,565 | 10,219 | 6,833 | 1,646 | 1,309 |
-| \`badge\` | 35,962 | 10,848 | 9,500 | 4,250 | 1,004 | 877 |
-| \`bar-chart\` | 93,699 | 29,090 | 25,706 | 25,425 | 6,302 | 5,236 |
-| \`blockquote\` | 34,028 | 10,452 | 9,175 | 1,914 | 470 | 376 |
-| \`breadcrumbs\` | 92,342 | 29,446 | 24,153 | 5,518 | 1,250 | 1,035 |
-| \`button\` | 43,625 | 12,540 | 11,001 | 9,257 | 1,945 | 1,552 |
-| \`button-group\` | 34,404 | 10,429 | 9,160 | 2,320 | 530 | 393 |
-| \`callout\` | 89,897 | 29,044 | 23,850 | 2,899 | 763 | 638 |
-| \`canvas\` | 114,250 | 31,463 | 27,404 | 70,328 | 18,724 | 15,698 |
-| \`card\` | 36,043 | 10,898 | 9,570 | 3,963 | 985 | 779 |
-| \`carousel\` | 108,967 | 33,342 | 27,506 | 21,719 | 4,521 | 3,771 |
-| \`chat\` | 125,725 | 38,987 | 32,099 | 31,590 | 7,630 | 6,344 |
-| \`checkbox\` | 48,869 | 13,913 | 12,220 | 9,313 | 2,207 | 1,810 |
-| \`checkbox-group\` | 47,648 | 13,738 | 12,043 | 7,574 | 1,920 | 1,506 |
-| \`code\` | 32,424 | 9,914 | 8,735 | 1,511 | 377 | 302 |
-| \`code-block\` | 150,072 | 46,529 | 39,105 | 33,717 | 7,228 | 6,096 |
-| \`color-input\` | 185,279 | 52,850 | 44,776 | 59,352 | 11,293 | 9,572 |
-| \`color-picker\` | 146,021 | 41,643 | 34,498 | 47,560 | 9,287 | 7,925 |
-| \`combobox\` | 161,618 | 49,022 | 41,298 | 36,231 | 7,907 | 6,583 |
-| \`command\` | 127,212 | 38,485 | 31,636 | 28,803 | 6,696 | 5,632 |
-| \`copy-button\` | 138,224 | 43,824 | 36,829 | 21,871 | 4,664 | 3,847 |
-| \`data-table\` | 224,999 | 63,785 | 53,661 | 95,314 | 21,356 | 17,352 |
-| \`date-input\` | 160,779 | 48,867 | 41,264 | 35,177 | 7,838 | 6,622 |
-| \`date-picker\` | 105,572 | 33,511 | 27,376 | 15,499 | 3,873 | 3,160 |
-| \`description-list\` | 35,209 | 10,576 | 9,283 | 3,502 | 778 | 691 |
-| \`dialog\` | 40,757 | 12,115 | 10,693 | 7,079 | 1,794 | 1,540 |
-| \`divider\` | 35,234 | 10,761 | 9,426 | 3,120 | 767 | 548 |
-| \`donut-chart\` | 86,134 | 27,031 | 23,848 | 19,297 | 4,913 | 4,047 |
-| \`drawer\` | 39,396 | 11,745 | 10,321 | 6,007 | 1,496 | 1,208 |
-| \`drilldown\` | 101,518 | 32,568 | 26,478 | 10,393 | 2,522 | 2,011 |
-| \`empty\` | 34,765 | 10,741 | 9,412 | 2,380 | 687 | 571 |
-| \`file-input\` | 111,646 | 34,597 | 28,338 | 17,594 | 4,027 | 3,432 |
-| \`filter-input\` | 185,398 | 53,627 | 45,167 | 56,353 | 11,390 | 9,461 |
-| \`flex\` | 33,785 | 10,276 | 9,018 | 2,078 | 453 | 459 |
-| \`format-date\` | 36,989 | 11,363 | 10,057 | 3,497 | 860 | 605 |
-| \`graph\` | 122,906 | 38,060 | 31,321 | 19,840 | 4,869 | 4,125 |
-| \`grid\` | 34,378 | 10,455 | 9,189 | 2,667 | 624 | 499 |
-| \`heatmap\` | 85,047 | 26,758 | 23,628 | 17,648 | 4,428 | 3,703 |
-| \`icon\` | 88,169 | 28,489 | 23,351 | 1,707 | 425 | 279 |
-| \`icon-button\` | 43,946 | 12,470 | 10,935 | 9,582 | 1,863 | 1,527 |
-| \`image\` | 36,603 | 11,072 | 9,744 | 4,840 | 1,292 | 1,024 |
-| \`input\` | 105,721 | 33,249 | 27,143 | 11,104 | 2,682 | 2,185 |
-| \`kbd\` | 36,094 | 11,290 | 9,930 | 4,373 | 1,366 | 1,126 |
-| \`legend\` | 41,550 | 12,459 | 10,924 | 5,790 | 1,395 | 1,057 |
-| \`lightbox\` | 44,129 | 13,129 | 11,498 | 7,805 | 1,990 | 1,581 |
-| \`line-chart\` | 88,596 | 27,885 | 24,661 | 20,419 | 5,125 | 4,203 |
-| \`list\` | 37,850 | 11,191 | 9,839 | 5,782 | 1,308 | 1,123 |
-| \`listbox\` | 112,689 | 35,554 | 29,011 | 15,768 | 4,082 | 3,241 |
-| \`loader\` | 36,134 | 10,932 | 9,611 | 4,051 | 988 | 818 |
-| \`map\` | 169,380 | 45,150 | 37,620 | 69,255 | 13,216 | 10,988 |
-| \`megamenu\` | 68,107 | 21,944 | 19,465 | 9,805 | 2,348 | 1,910 |
-| \`menu\` | 134,475 | 43,580 | 36,472 | 16,362 | 3,800 | 3,193 |
-| \`meter\` | 41,556 | 12,162 | 10,714 | 9,479 | 2,233 | 1,849 |
-| \`navigation\` | 36,043 | 11,092 | 9,747 | 2,726 | 716 | 557 |
-| \`notifications\` | 117,111 | 35,494 | 29,147 | 24,486 | 5,062 | 4,216 |
-| \`number-input\` | 107,164 | 33,803 | 27,604 | 12,539 | 3,156 | 2,513 |
-| \`object-inspector\` | 154,958 | 48,512 | 41,005 | 33,167 | 7,554 | 6,270 |
-| \`option\` | 38,277 | 11,517 | 10,146 | 6,201 | 1,576 | 1,262 |
-| \`orb\` | 42,981 | 13,915 | 12,267 | 8,623 | 3,226 | 2,764 |
-| \`outline\` | 41,826 | 12,674 | 11,186 | 8,351 | 2,122 | 1,741 |
-| \`pagination\` | 168,620 | 50,145 | 42,237 | 45,786 | 9,629 | 7,866 |
-| \`pin-input\` | 47,706 | 14,054 | 12,317 | 8,389 | 2,388 | 1,893 |
-| \`popover\` | 63,068 | 20,767 | 18,348 | 4,517 | 1,162 | 878 |
-| \`progress\` | 39,038 | 11,616 | 10,242 | 6,962 | 1,669 | 1,479 |
-| \`qr-code\` | 46,321 | 14,913 | 13,142 | 14,629 | 5,298 | 4,484 |
-| \`quote\` | 32,906 | 10,089 | 8,829 | 1,191 | 295 | 139 |
-| \`radio\` | 52,386 | 14,377 | 12,634 | 11,160 | 2,287 | 1,846 |
-| \`rating\` | 50,567 | 15,061 | 13,273 | 10,941 | 3,088 | 2,455 |
-| \`sandbox\` | 68,268 | 17,969 | 15,882 | 35,718 | 7,860 | 6,630 |
-| \`scatter-chart\` | 87,121 | 27,604 | 24,333 | 19,718 | 5,206 | 4,225 |
-| \`scroll-area\` | 37,642 | 11,265 | 9,884 | 5,874 | 1,400 | 1,131 |
-| \`select\` | 151,600 | 46,936 | 39,399 | 28,986 | 6,502 | 5,281 |
-| \`skeleton\` | 33,958 | 10,417 | 9,143 | 2,242 | 592 | 498 |
-| \`skip-link\` | 34,493 | 10,637 | 9,306 | 2,624 | 735 | 579 |
-| \`slider\` | 56,160 | 15,264 | 13,480 | 16,690 | 3,539 | 2,921 |
-| \`sparkline\` | 43,071 | 13,319 | 11,741 | 6,293 | 1,754 | 1,426 |
-| \`speed-dial\` | 126,089 | 41,044 | 34,451 | 11,356 | 2,371 | 1,861 |
-| \`splitter\` | 48,605 | 13,670 | 12,124 | 16,336 | 3,637 | 3,029 |
-| \`stat\` | 36,641 | 10,814 | 9,526 | 4,565 | 917 | 771 |
-| \`steps\` | 110,647 | 33,568 | 27,517 | 19,894 | 3,925 | 3,264 |
-| \`switch\` | 45,958 | 13,443 | 11,806 | 6,001 | 1,581 | 1,217 |
-| \`table\` | 104,740 | 33,466 | 27,286 | 15,746 | 3,983 | 3,341 |
-| \`tabs\` | 47,068 | 13,471 | 11,852 | 10,154 | 2,160 | 1,804 |
-| \`tag\` | 91,379 | 29,452 | 24,044 | 4,083 | 1,021 | 872 |
-| \`text\` | 35,905 | 10,626 | 9,311 | 4,200 | 896 | 611 |
-| \`textarea\` | 47,214 | 13,722 | 12,021 | 7,418 | 1,927 | 1,545 |
-| \`time-input\` | 179,388 | 52,680 | 44,444 | 50,488 | 10,698 | 9,022 |
-| \`time-picker\` | 128,743 | 39,268 | 32,265 | 30,852 | 7,320 | 6,138 |
-| \`timeline\` | 91,938 | 29,325 | 24,151 | 5,110 | 1,136 | 952 |
-| \`toast\` | 99,515 | 31,404 | 25,689 | 11,599 | 2,599 | 2,141 |
-| \`toggle\` | 50,971 | 14,593 | 12,822 | 8,525 | 2,071 | 1,665 |
-| \`toolbar\` | 36,114 | 11,095 | 9,765 | 3,899 | 1,025 | 797 |
-| \`tooltip\` | 67,648 | 21,959 | 19,420 | 9,429 | 2,453 | 1,940 |
-| \`tour\` | 79,940 | 24,211 | 21,389 | 20,565 | 4,385 | 3,644 |
-| \`tree\` | 104,690 | 33,320 | 27,207 | 13,069 | 3,304 | 2,790 |
-| \`trend\` | 90,722 | 29,104 | 23,884 | 4,271 | 989 | 878 |
-| \`video\` | 174,583 | 52,245 | 44,246 | 51,918 | 11,162 | 9,518 |
-| \`video-playlist\` | 148,555 | 46,147 | 38,726 | 29,038 | 5,998 | 5,072 |
-| \`virtual-list\` | 39,472 | 12,286 | 10,806 | 3,187 | 935 | 703 |
+| \`accordion\` | 95,843 | 30,972 | 25,266 | 6,204 | 1,543 | 1,321 |
+| \`announcement\` | 94,479 | 30,406 | 24,827 | 5,932 | 1,410 | 1,248 |
+| \`app-header\` | 37,393 | 11,126 | 9,799 | 5,121 | 1,166 | 934 |
+| \`area-chart\` | 86,811 | 27,796 | 24,497 | 18,366 | 4,988 | 4,144 |
+| \`aura\` | 100,530 | 33,627 | 29,130 | 65,483 | 23,032 | 19,723 |
+| \`avatar\` | 39,138 | 11,584 | 10,220 | 6,833 | 1,646 | 1,298 |
+| \`badge\` | 36,143 | 10,869 | 9,524 | 4,250 | 1,001 | 733 |
+| \`bar-chart\` | 93,880 | 29,107 | 25,756 | 25,425 | 6,313 | 5,329 |
+| \`blockquote\` | 34,209 | 10,468 | 9,196 | 1,914 | 467 | 315 |
+| \`breadcrumbs\` | 92,523 | 29,466 | 24,178 | 5,518 | 1,244 | 1,129 |
+| \`button\` | 43,806 | 12,554 | 11,023 | 9,257 | 1,937 | 1,505 |
+| \`button-group\` | 34,585 | 10,450 | 9,174 | 2,320 | 528 | 375 |
+| \`callout\` | 90,078 | 29,063 | 23,826 | 2,899 | 756 | 687 |
+| \`canvas\` | 114,431 | 31,475 | 27,500 | 70,328 | 18,720 | 15,791 |
+| \`card\` | 36,224 | 10,920 | 9,591 | 3,963 | 975 | 846 |
+| \`carousel\` | 109,148 | 33,349 | 27,483 | 21,719 | 4,507 | 3,749 |
+| \`chat\` | 125,906 | 39,002 | 32,127 | 31,590 | 7,633 | 6,410 |
+| \`checkbox\` | 49,050 | 13,927 | 12,237 | 9,313 | 2,208 | 1,876 |
+| \`checkbox-group\` | 47,829 | 13,751 | 12,052 | 7,574 | 1,903 | 1,474 |
+| \`code\` | 32,605 | 9,928 | 8,729 | 1,511 | 377 | 380 |
+| \`code-block\` | 150,253 | 46,548 | 39,158 | 33,717 | 7,215 | 6,126 |
+| \`color-input\` | 185,460 | 52,861 | 44,724 | 59,352 | 11,295 | 9,511 |
+| \`color-picker\` | 146,202 | 41,656 | 34,488 | 47,560 | 9,284 | 7,867 |
+| \`combobox\` | 161,978 | 49,085 | 41,270 | 36,410 | 7,955 | 6,615 |
+| \`command\` | 127,393 | 38,493 | 31,618 | 28,803 | 6,694 | 5,583 |
+| \`copy-button\` | 138,405 | 43,830 | 36,878 | 21,871 | 4,664 | 3,877 |
+| \`data-table\` | 225,180 | 63,813 | 53,600 | 95,314 | 21,365 | 17,447 |
+| \`date-input\` | 161,140 | 48,929 | 41,318 | 35,357 | 7,899 | 6,643 |
+| \`date-picker\` | 105,753 | 33,518 | 27,415 | 15,499 | 3,859 | 3,238 |
+| \`description-list\` | 35,390 | 10,586 | 9,287 | 3,502 | 768 | 694 |
+| \`dialog\` | 40,938 | 12,132 | 10,723 | 7,079 | 1,782 | 1,494 |
+| \`divider\` | 35,415 | 10,782 | 9,444 | 3,120 | 769 | 585 |
+| \`donut-chart\` | 86,315 | 27,042 | 23,859 | 19,297 | 4,915 | 4,121 |
+| \`drawer\` | 39,577 | 11,767 | 10,345 | 6,007 | 1,482 | 1,263 |
+| \`drilldown\` | 101,699 | 32,584 | 26,513 | 10,393 | 2,528 | 2,071 |
+| \`empty\` | 34,946 | 10,764 | 9,445 | 2,380 | 678 | 489 |
+| \`file-input\` | 112,026 | 34,672 | 28,381 | 17,793 | 4,076 | 3,392 |
+| \`filter-input\` | 185,579 | 53,639 | 45,210 | 56,353 | 11,398 | 9,498 |
+| \`flex\` | 33,966 | 10,295 | 9,062 | 2,078 | 445 | 296 |
+| \`format-date\` | 37,170 | 11,382 | 10,030 | 3,497 | 860 | 608 |
+| \`graph\` | 129,548 | 39,000 | 32,083 | 26,302 | 5,795 | 4,960 |
+| \`grid\` | 34,559 | 10,478 | 9,220 | 2,667 | 630 | 522 |
+| \`heatmap\` | 85,228 | 26,779 | 23,661 | 17,648 | 4,434 | 3,682 |
+| \`icon\` | 88,350 | 28,509 | 23,354 | 1,707 | 422 | 288 |
+| \`icon-button\` | 44,127 | 12,484 | 10,977 | 9,582 | 1,854 | 1,563 |
+| \`image\` | 36,784 | 11,092 | 9,750 | 4,840 | 1,285 | 1,066 |
+| \`input\` | 105,902 | 33,263 | 27,153 | 11,104 | 2,685 | 2,139 |
+| \`kbd\` | 36,275 | 11,305 | 9,919 | 4,373 | 1,361 | 1,190 |
+| \`legend\` | 41,731 | 12,479 | 10,955 | 5,790 | 1,387 | 1,129 |
+| \`lightbox\` | 44,310 | 13,142 | 11,532 | 7,805 | 1,983 | 1,745 |
+| \`line-chart\` | 88,777 | 27,900 | 24,579 | 20,419 | 5,132 | 4,223 |
+| \`list\` | 38,031 | 11,207 | 9,858 | 5,782 | 1,294 | 1,042 |
+| \`listbox\` | 112,870 | 35,565 | 29,019 | 15,768 | 4,072 | 3,333 |
+| \`loader\` | 36,315 | 10,953 | 9,628 | 4,051 | 984 | 832 |
+| \`map\` | 169,561 | 45,161 | 37,585 | 69,255 | 13,207 | 10,925 |
+| \`megamenu\` | 68,288 | 21,962 | 19,385 | 9,805 | 2,346 | 1,953 |
+| \`menu\` | 134,656 | 43,587 | 36,501 | 16,362 | 3,797 | 3,179 |
+| \`meter\` | 41,737 | 12,178 | 10,745 | 9,479 | 2,229 | 1,935 |
+| \`navigation\` | 36,224 | 11,110 | 9,735 | 2,726 | 713 | 628 |
+| \`notifications\` | 117,292 | 35,506 | 29,125 | 24,486 | 5,059 | 4,265 |
+| \`number-input\` | 107,345 | 33,815 | 27,626 | 12,539 | 3,150 | 2,570 |
+| \`object-inspector\` | 155,139 | 48,519 | 40,992 | 33,167 | 7,563 | 6,311 |
+| \`option\` | 38,458 | 11,533 | 10,163 | 6,201 | 1,574 | 1,257 |
+| \`orb\` | 43,162 | 13,930 | 12,278 | 8,623 | 3,224 | 2,742 |
+| \`outline\` | 42,007 | 12,688 | 11,173 | 8,351 | 2,127 | 1,739 |
+| \`pagination\` | 168,801 | 50,172 | 42,283 | 45,786 | 9,632 | 7,910 |
+| \`pin-input\` | 47,887 | 14,070 | 12,392 | 8,389 | 2,378 | 1,911 |
+| \`popover\` | 63,249 | 20,782 | 18,412 | 4,517 | 1,152 | 901 |
+| \`progress\` | 39,219 | 11,635 | 10,236 | 6,962 | 1,660 | 1,423 |
+| \`qr-code\` | 46,502 | 14,934 | 13,135 | 14,629 | 5,292 | 4,421 |
+| \`quote\` | 33,087 | 10,103 | 8,861 | 1,191 | 301 | 174 |
+| \`radio\` | 52,567 | 14,389 | 12,655 | 11,160 | 2,278 | 1,837 |
+| \`rating\` | 50,748 | 15,074 | 13,288 | 10,941 | 3,097 | 2,603 |
+| \`sandbox\` | 68,449 | 17,986 | 15,926 | 35,718 | 7,859 | 6,648 |
+| \`scatter-chart\` | 87,302 | 27,618 | 24,317 | 19,718 | 5,204 | 4,299 |
+| \`scroll-area\` | 37,823 | 11,283 | 9,885 | 5,874 | 1,399 | 1,169 |
+| \`select\` | 151,781 | 46,954 | 39,374 | 28,986 | 6,495 | 5,409 |
+| \`skeleton\` | 34,139 | 10,437 | 9,182 | 2,242 | 602 | 477 |
+| \`skip-link\` | 34,674 | 10,659 | 9,332 | 2,624 | 740 | 563 |
+| \`slider\` | 56,341 | 15,274 | 13,484 | 16,690 | 3,537 | 2,999 |
+| \`sparkline\` | 43,252 | 13,336 | 11,745 | 6,293 | 1,749 | 1,448 |
+| \`speed-dial\` | 126,270 | 41,059 | 34,489 | 11,356 | 2,382 | 1,920 |
+| \`splitter\` | 48,786 | 13,681 | 12,145 | 16,336 | 3,627 | 3,136 |
+| \`stat\` | 36,822 | 10,836 | 9,555 | 4,565 | 915 | 730 |
+| \`steps\` | 110,828 | 33,587 | 27,521 | 19,894 | 3,918 | 3,257 |
+| \`switch\` | 46,139 | 13,459 | 11,778 | 6,001 | 1,568 | 1,279 |
+| \`table\` | 104,921 | 33,482 | 27,341 | 15,746 | 3,981 | 3,421 |
+| \`tabs\` | 47,249 | 13,492 | 11,867 | 10,154 | 2,155 | 1,927 |
+| \`tag\` | 91,721 | 29,528 | 24,083 | 4,244 | 1,063 | 870 |
+| \`text\` | 36,086 | 10,644 | 9,325 | 4,200 | 880 | 692 |
+| \`textarea\` | 47,395 | 13,733 | 12,034 | 7,418 | 1,928 | 1,528 |
+| \`time-input\` | 179,749 | 52,754 | 44,471 | 50,668 | 10,753 | 8,930 |
+| \`time-picker\` | 128,924 | 39,284 | 32,256 | 30,852 | 7,322 | 6,068 |
+| \`timeline\` | 92,119 | 29,344 | 24,098 | 5,110 | 1,130 | 917 |
+| \`toast\` | 99,696 | 31,426 | 25,725 | 11,599 | 2,601 | 2,189 |
+| \`toggle\` | 51,152 | 14,607 | 12,844 | 8,525 | 2,066 | 1,725 |
+| \`toolbar\` | 36,295 | 11,108 | 9,755 | 3,899 | 1,022 | 824 |
+| \`tooltip\` | 67,829 | 21,974 | 19,470 | 9,429 | 2,451 | 2,085 |
+| \`tour\` | 80,121 | 24,220 | 21,448 | 20,565 | 4,378 | 3,738 |
+| \`tree\` | 104,871 | 33,337 | 27,201 | 13,069 | 3,306 | 2,728 |
+| \`trend\` | 90,903 | 29,129 | 23,898 | 4,271 | 985 | 862 |
+| \`video\` | 174,764 | 52,259 | 44,284 | 51,918 | 11,165 | 9,570 |
+| \`video-playlist\` | 148,736 | 46,165 | 38,681 | 29,038 | 5,998 | 5,022 |
+| \`virtual-list\` | 39,653 | 12,303 | 10,814 | 3,187 | 927 | 746 |
 
 ## What an install adds to \`node_modules\`
 
@@ -3660,12 +3688,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 1,190,205 | 171 | 266,642 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
-| \`@fusion.dev/helix-headless\` | 13,487,232 | 510 | 1,074,142 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
+| \`@fusion.dev/helix-core\` | 1,192,742 | 171 | 267,144 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
+| \`@fusion.dev/helix-headless\` | 13,508,620 | 510 | 1,077,666 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 150,162 | 21 | 50,346 | \`svgo\` |
 | \`@fusion.dev/helix-styles\` | 102,155 | 6 | 0 | none |
-| \`@fusion.dev/helix-theme\` | 500,416 | 8 | 5,191 | none |
-| \`@fusion.dev/helix\` | 14,601,142 | 876 | 373,588 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
+| \`@fusion.dev/helix-theme\` | 514,288 | 8 | 5,300 | none |
+| \`@fusion.dev/helix\` | 14,621,013 | 876 | 373,802 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
 
 ## Not measured yet
 
@@ -5557,53 +5585,60 @@ a theme from a few inputs, and the theme builder shows you the result.
 
 You enter the same inputs that \`derive()\` takes:
 
-- a brand color
-- a chroma ceiling
-- a radius
-- a density
-- a contrast target
-- a motion character
+- **Color:** the brand, the color scheme, the contrast target, the saturation,
+  the accent angle, and the page's color in light and in dark
+- **Shape and type:** the density, the corner radius, the three faces, the body
+  size, and the type scale
+- **Status:** how far the status colors follow the palette, and how far their
+  hues may move
+- **Motion, separation, and material:** the motion character, how surfaces are
+  set apart, and how floating surfaces are blurred and see-through
 
-The theme builder runs the full derivation. It shows you every token, and the
-components drawn with them.
+The theme builder runs the full derivation on every change. It shows a page
+drawn with the theme, and the stylesheet the theme generates beside it.
 
-It shows light and dark at the same time. \`[data-color-mode]\` works on any
-element, so the two previews are two subtrees of one document. See
-[Color modes](./color-modes).
+The Color scheme field picks which half you see: light, dark, or the site's own
+mode. See [Color modes](./color-modes).
 
-## The contrast column
+## A page of your own color
 
-The contrast column lists every color pair Helix computed. Each pair shows its
-ratio, measured against the background it is painted on. A pair has one of
-three states:
+The Light page and Dark page fields give the page a color, such as a warm cream
+or a deep teal. They start at pure white and pure black, the page Helix draws
+without one. The surfaces keep the contrast with the page they keep with white
+or black, the grays take its tint, and every text color is solved against it. A
+page that no text color can reach the contrast target on is left out of the
+preview, and a caption under the fields says so.
 
-- **Met.** The pair reaches the target.
-- **Unverifiable.** The background is translucent, so there is no known color
-  to measure against. The pair neither passes nor fails. This is the cost of a
-  translucent material, and the theme builder reports it.
-- **Pinned.** You set the color yourself. The engine did not compute it, so its
-  contrast is not guaranteed.
+## The audit
 
-A column of \`unverifiable\` pairs means your theme makes a trade. The column lets
-you see that you made it.
+The audit lists every color pair Helix computed. Each pair shows its ratio,
+measured against the background it is painted on, and either passes or fails
+its target. Its three tabs are:
 
-## What the theme builder exports
+- **Contrast.** The pairs that fail, or a line saying that every pair passes.
+- **Collisions.** Colors too close to each other to tell apart, such as the
+  primary color and a status color.
+- **Unverifiable.** Pairs whose background is translucent, so there is no known
+  color to measure against. This is the cost of a translucent material, and
+  the theme builder reports it.
 
-The theme builder gives you the token block as CSS, to paste into your own
+## What the theme builder gives you
+
+The generated stylesheet is the token block as CSS, to paste into your own
 stylesheet:
 
 \`\`\`css
-:root {
-  --helix-color-primary: oklch(…);
+[data-theme="preview"] {
+  --helix-color-background: #f7f2eb;
   …
 }
 \`\`\`
 
-It also gives you the intent object, to keep in your repository and derive the
-theme from again:
+The page's link holds every input you changed, so a link is the theme. To derive
+the theme in your own build, write the same inputs as an intent object:
 
 \`\`\`ts
-export const theme = { brand: '#2563eb', chroma: { ceiling: 0.1 }, radius: 2 }
+export const theme = { background: { light: '#f7f2eb' }, brand: '#ff6200' }
 \`\`\`
 
 **Keep the intent object in your repository.** The tokens are the output of a