@fusion.dev/helix-docs 0.140.0 → 0.142.0

package/dist/sources.generated.js

@@ -837,14 +837,18 @@ separation](./surfaces-and-separation).
 Inks are the colors that go on grounds. The base ink is \`foreground\`.
 
 - \`foreground-muted\` and \`foreground-subtle\` are for text that recedes.
-- \`foreground-on-accent\` is for text on a filled accent color.
+- Text on a filled color takes the ink named for that fill:
+  - \`foreground-on-primary\` on \`primary-surface\`
+  - \`foreground-on-accent\` on \`accent-surface\`
+  - \`foreground-on-status\` on the four status fills
 
 ### Intent
 
 Intent colors show what something means.
 
 - \`primary\` and \`accent\` are for emphasis. Each has \`-hover\`, \`-active\`, and
-  \`-subtle\` variants.
+  \`-subtle\` variants. With no brand color set, both are ink: near-black in
+  light mode and near-white in dark mode.
 - \`info\`, \`success\`, \`warning\`, and \`danger\` are for status. Each has a
   \`-surface\` and a \`-surface-hover\` variant for the tinted box that holds the
   message.
@@ -873,9 +877,10 @@ OKLCH lets the theme engine *solve* for a palette from your brand color. See
 
 ## How the engine meets contrast targets
 
-The engine measures each ink against the ground it will be painted on. It then
-searches for the lightness that meets the target. Every pair it produces meets
-the target.
+The engine measures each ink against the ground it will be painted on. A brand
+color that already meets the target there is used as it is. For any other color,
+the engine searches for the lightness that meets the target. Every pair it
+produces meets the target.
 
 The engine can solve only the pairs it knows about, so we check two things:
 
@@ -2356,16 +2361,17 @@ const theme = engine.derive({ brand: '#2563eb' })
 
 [Deriving a theme](./theming) shows how Node loads the engine.
 
-**\`brand\` is the only required input.** Every other field has a default,
-computed from \`brand\` or from the Helix design language. A theme that sets only
-\`brand\` is a valid theme.
+**Every input is optional.** With no \`brand\`, the theme is ink: the primary
+color is near-black in light mode and near-white in dark mode. Every other field
+has a default, computed from \`brand\` or from the Helix design language, so an
+empty intent, \`{}\`, is a valid theme.
 
 ## Color
 
 | Field | What it controls |
 |---|---|
-| \`brand\` | Your main brand color. Required |
-| \`accent\` | The second emphasis color. Defaults to the brand color. \`{ from: 'brand', rotate: 180 }\` gives the complementary color |
+| \`brand\` | Your main brand color, or \`{ light, dark }\` for a different one in each mode. Without one, the theme is ink, and so is a mode the pair leaves out |
+| \`accent\` | The second emphasis color. Defaults to the brand color, or to ink with no brand. \`{ from: 'brand', rotate: 180 }\` gives the complementary color, and needs a 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 |
@@ -2373,6 +2379,12 @@ computed from \`brand\` or from the Helix design language. A theme that sets onl
 | \`scheme\` | \`'light'\` or \`'dark'\`, for a theme that has only one mode |
 | \`tokens\` | Literal overrides by token name, for values no other field sets |
 
+**A brand color that already meets the contrast target is used as it is.**
+Where it clears every surface it lands on, it is the primary color, and where
+its label clears on it, it is the fill. A navy brand stays navy on a light page.
+A color that does not meet the target keeps its hue and chroma, and its
+lightness moves only as far as the target needs.
+
 \`accent\` can be defined relative to the brand. \`status\` colors cannot. If
 \`danger\` rotated with the brand, your users would have to learn a new warning
 color for each product.
@@ -2385,7 +2397,9 @@ settings:
 - \`scale\` multiplies the chroma the brand color supplies.
 
 Both apply to every derived color, including the brand color, because in a
-monotone theme the brand is gray too. Neither applies to a color you pinned. A
+monotone theme the brand is gray too. A gray brand is solved like any other, to
+the gray nearest the page that meets the contrast target, which is a mid gray.
+For black and white, leave out \`brand\`. Neither applies to a color you pinned. A
 pinned color is used exactly as you set it.
 
 ## Contrast
@@ -2815,15 +2829,15 @@ fixes a sanitizing flaw in earlier versions, so use 6.4.1 or later.
 - Land uses \`surface\`.
 - Water uses \`info\`.
 - Parks use \`success\`.
-- Main roads use \`primary\`, your brand color.
+- Main roads use \`primary\`, your brand color, or ink with no brand.
 - Smaller roads, buildings, borders, and labels use \`foreground\`.
 
 It also draws landmarks, highway signs, and neighborhood names:
 
 - A landmark is an icon on a disc and its name, in a color for its kind:
   parks, museums, schools, hotels, hospitals, stations, and stadiums from zoom
-  14, and food and shops from zoom 16. Each color is a fixed hue at your brand
-  color's lightness, so the kinds stay apart in any theme.
+  14, and food and shops from zoom 16. Each color is a fixed hue at the
+  lightness of \`primary\`, so the kinds stay apart in any theme.
 - A highway's number is on its sign, drawn to the Federal Highway
   Administration's outlines: the red and blue Interstate shield, the white US
   route shield, the white circle of a state route, and a plain plate for other
@@ -3391,7 +3405,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 186,211 | 59,378 | 50,249 |
+| Lit and \`@fusion.dev/helix-core\` | 186,211 | 59,378 | 50,307 |
 
 ## Whole packages
 
@@ -3402,11 +3416,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 185,764 | 59,007 | 50,019 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 749,000 | 194,362 | 150,529 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 185,764 | 59,007 | 50,015 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 749,093 | 194,398 | 150,586 | 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,294,834 | 303,074 | 221,546 | Every styled family. |
+| \`@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,270 | 155,600 | 125,779 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
+| \`@fusion.dev/helix\` | 1,296,493 | 303,277 | 221,913 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -3419,19 +3434,19 @@ shows the whole cost of using the base layer on its own.
 
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`base.css\` | 30,785 | 4,456 | 3,871 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
+| \`base.css\` | 30,786 | 4,465 | 3,884 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
 | \`elements.css\` | 8,807 | 1,488 | 1,318 | 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\` | 6,390 | 1,260 | 1,084 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
-| \`tokens.css\` | 20,987 | 2,567 | 2,138 | The 191 semantic tokens. Every styled component needs them. |
+| \`primitives.css\` | 7,510 | 1,402 | 1,201 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
+| \`tokens.css\` | 22,349 | 2,664 | 2,247 | The 193 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 21,975 bytes gzipped alone, and it adds 2,263 to a page that already has Helix. The shared runtime is 90 percent of the first component, and the component itself is 10 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,977 bytes gzipped alone, and it adds 2,262 to a page that already has Helix. The shared runtime is 90 percent of the first component, and the component itself is 10 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 10,492 bytes gzipped alone, and the largest is \`data-table\` at 64,440. Every family together is 303,074.
+Across the 104 styled components, the smallest is \`code\` at 10,492 bytes gzipped alone, and the largest is \`data-table\` at 64,440. Every family together is 303,277.
 
-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 194,362 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 194,398 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 22,536 bytes gzipped alone.
 
@@ -3445,37 +3460,37 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 45,626 | 13,152 | 11,576 |
+| \`button\` | **Helix** | 45,627 | 13,160 | 11,529 |
 | | 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** | 50,794 | 14,479 | 12,769 |
+| \`checkbox\` | **Helix** | 50,794 | 14,479 | 12,747 |
 | | 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** | 42,582 | 12,668 | 11,158 |
+| \`dialog\` | **Helix** | 42,582 | 12,668 | 11,149 |
 | | 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** | 54,213 | 14,925 | 13,148 |
+| \`radio\` | **Helix** | 54,213 | 14,925 | 13,149 |
 | | 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** | 47,783 | 13,986 | 12,265 |
+| \`switch\` | **Helix** | 47,784 | 13,981 | 12,294 |
 | | 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** | 48,895 | 14,048 | 12,302 |
+| \`tabs\` | **Helix** | 48,895 | 14,048 | 12,307 |
 | | 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** | 69,601 | 22,599 | 19,955 |
+| \`tooltip\` | **Helix** | 69,601 | 22,599 | 19,940 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -3525,104 +3540,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\` | 94,146 | 30,684 | 25,069 | 2,875 | 725 | 630 |
-| \`announcement\` | 91,561 | 29,855 | 24,301 | 1,386 | 365 | 283 |
-| \`app-header\` | 35,147 | 10,773 | 9,481 | 1,248 | 260 | 218 |
-| \`area-chart\` | 81,239 | 26,783 | 23,595 | 11,166 | 3,382 | 2,802 |
-| \`avatar\` | 37,234 | 11,387 | 10,033 | 3,296 | 894 | 744 |
-| \`badge\` | 34,683 | 10,703 | 9,375 | 1,163 | 300 | 261 |
-| \`bar-chart\` | 82,848 | 27,157 | 23,985 | 12,769 | 3,695 | 3,078 |
-| \`blockquote\` | 34,697 | 10,730 | 9,445 | 774 | 176 | 165 |
-| \`breadcrumbs\` | 90,601 | 29,203 | 23,993 | 1,965 | 443 | 407 |
-| \`button\` | 39,369 | 11,986 | 10,531 | 3,195 | 817 | 683 |
-| \`button-group\` | 34,553 | 10,610 | 9,319 | 661 | 140 | 108 |
-| \`callout\` | 89,721 | 29,063 | 23,925 | 914 | 244 | 302 |
-| \`canvas\` | 95,827 | 28,300 | 24,806 | 50,036 | 14,959 | 12,568 |
-| \`card\` | 34,587 | 10,627 | 9,328 | 694 | 140 | 75 |
-| \`carousel\` | 100,004 | 32,186 | 26,478 | 10,943 | 2,734 | 2,354 |
-| \`chat\` | 113,488 | 37,076 | 30,423 | 17,449 | 5,101 | 4,222 |
-| \`checkbox\` | 44,186 | 13,038 | 11,445 | 2,821 | 785 | 541 |
-| \`checkbox-group\` | 47,310 | 13,723 | 12,075 | 5,425 | 1,366 | 1,026 |
-| \`code\` | 33,172 | 10,192 | 8,966 | 451 | 78 | 101 |
-| \`code-block\` | 135,605 | 44,215 | 37,260 | 17,443 | 4,511 | 3,823 |
-| \`color-input\` | 153,554 | 48,213 | 40,671 | 25,821 | 6,025 | 5,098 |
-| \`color-picker\` | 119,924 | 37,667 | 30,970 | 19,644 | 4,699 | 3,969 |
-| \`combobox\` | 148,369 | 46,880 | 39,388 | 21,175 | 5,213 | 4,289 |
-| \`command\` | 118,287 | 36,947 | 30,311 | 18,064 | 4,593 | 3,786 |
-| \`copy-button\` | 130,185 | 42,566 | 35,830 | 12,019 | 2,960 | 2,419 |
-| \`data-table\` | 188,875 | 57,527 | 48,606 | 57,535 | 14,589 | 12,091 |
-| \`date-input\` | 146,628 | 46,371 | 39,018 | 19,212 | 4,832 | 4,072 |
-| \`date-picker\` | 101,780 | 32,896 | 26,907 | 9,900 | 2,706 | 2,223 |
-| \`description-list\` | 34,656 | 10,565 | 9,285 | 1,132 | 172 | 113 |
-| \`dialog\` | 38,205 | 11,659 | 10,250 | 2,717 | 777 | 607 |
-| \`divider\` | 34,903 | 10,809 | 9,498 | 981 | 255 | 211 |
-| \`donut-chart\` | 78,982 | 25,781 | 22,748 | 10,339 | 2,969 | 2,498 |
-| \`drawer\` | 36,958 | 11,299 | 9,907 | 1,761 | 470 | 470 |
-| \`drilldown\` | 98,646 | 32,043 | 26,063 | 5,704 | 1,493 | 1,272 |
-| \`empty\` | 35,150 | 10,853 | 9,532 | 956 | 243 | 234 |
-| \`file-input\` | 102,144 | 32,877 | 26,853 | 6,266 | 1,808 | 1,398 |
-| \`filter-input\` | 158,975 | 49,594 | 41,859 | 28,070 | 6,799 | 5,602 |
-| \`format-date\` | 38,166 | 11,770 | 10,402 | 2,868 | 694 | 492 |
-| \`graph\` | 116,500 | 37,045 | 30,466 | 11,480 | 3,231 | 2,826 |
-| \`heatmap\` | 80,204 | 25,982 | 22,898 | 10,997 | 2,991 | 2,476 |
-| \`icon\` | 89,288 | 28,882 | 23,700 | 1,018 | 246 | 218 |
-| \`icon-button\` | 39,768 | 12,018 | 10,551 | 3,594 | 858 | 699 |
-| \`image\` | 36,726 | 11,156 | 9,804 | 3,157 | 812 | 633 |
-| \`input\` | 101,182 | 32,362 | 26,442 | 4,746 | 1,276 | 952 |
-| \`kbd\` | 36,507 | 11,395 | 10,045 | 2,976 | 915 | 821 |
-| \`legend\` | 38,559 | 11,901 | 10,461 | 1,080 | 276 | 291 |
-| \`lightbox\` | 42,999 | 12,949 | 11,346 | 4,807 | 1,236 | 1,040 |
-| \`line-chart\` | 80,779 | 26,486 | 23,451 | 10,792 | 3,085 | 2,517 |
-| \`list\` | 35,609 | 10,806 | 9,513 | 1,726 | 332 | 390 |
-| \`listbox\` | 109,996 | 35,061 | 28,619 | 11,263 | 3,065 | 2,440 |
-| \`loader\` | 34,793 | 10,731 | 9,436 | 900 | 231 | 176 |
-| \`map\` | 135,023 | 40,242 | 33,390 | 33,030 | 7,707 | 6,308 |
-| \`megamenu\` | 65,092 | 21,481 | 18,877 | 4,941 | 1,278 | 1,018 |
-| \`menu\` | 128,815 | 42,454 | 35,616 | 8,856 | 2,186 | 1,812 |
-| \`meter\` | 37,983 | 11,582 | 10,180 | 4,100 | 1,065 | 897 |
-| \`navigation\` | 36,542 | 11,280 | 9,892 | 1,417 | 341 | 243 |
-| \`notifications\` | 105,825 | 33,645 | 27,461 | 11,384 | 2,617 | 2,193 |
-| \`number-input\` | 104,106 | 33,173 | 27,116 | 7,671 | 1,990 | 1,667 |
-| \`object-inspector\` | 143,395 | 46,771 | 39,437 | 19,705 | 5,248 | 4,396 |
-| \`option\` | 36,848 | 11,171 | 9,858 | 2,959 | 665 | 479 |
-| \`outline\` | 39,911 | 12,458 | 10,978 | 4,628 | 1,325 | 1,048 |
-| \`pagination\` | 152,465 | 47,581 | 40,032 | 27,823 | 6,528 | 5,289 |
-| \`pin-input\` | 46,366 | 13,784 | 12,112 | 5,242 | 1,562 | 1,226 |
-| \`popover\` | 62,296 | 20,724 | 18,261 | 1,899 | 512 | 427 |
-| \`progress\` | 35,834 | 11,003 | 9,687 | 1,951 | 489 | 411 |
-| \`qr-code\` | 46,483 | 15,044 | 13,217 | 12,984 | 4,827 | 4,097 |
-| \`quote\` | 34,076 | 10,491 | 9,205 | 552 | 118 | 150 |
-| \`radio\` | 45,916 | 13,427 | 11,815 | 2,874 | 726 | 577 |
-| \`rating\` | 48,121 | 14,397 | 12,668 | 6,689 | 1,880 | 1,468 |
-| \`scatter-chart\` | 80,683 | 26,413 | 23,305 | 11,471 | 3,371 | 2,817 |
-| \`scroll-area\` | 36,319 | 11,164 | 9,803 | 2,743 | 736 | 638 |
-| \`select\` | 140,575 | 45,036 | 37,743 | 16,146 | 4,083 | 3,393 |
-| \`skeleton\` | 33,265 | 10,227 | 8,965 | 544 | 105 | 186 |
-| \`skip-link\` | 34,855 | 10,796 | 9,479 | 1,178 | 333 | 271 |
-| \`slider\` | 46,905 | 13,805 | 12,202 | 5,628 | 1,517 | 1,248 |
-| \`sparkline\` | 40,978 | 12,925 | 11,384 | 2,387 | 793 | 676 |
-| \`speed-dial\` | 120,323 | 40,071 | 33,729 | 3,743 | 918 | 686 |
-| \`splitter\` | 44,358 | 13,240 | 11,675 | 10,283 | 2,587 | 2,236 |
-| \`stat\` | 35,041 | 10,666 | 9,414 | 1,148 | 184 | 185 |
-| \`steps\` | 98,861 | 31,678 | 25,897 | 6,295 | 1,469 | 1,204 |
-| \`switch\` | 43,417 | 12,920 | 11,338 | 1,650 | 514 | 340 |
-| \`table\` | 100,971 | 32,855 | 26,771 | 10,159 | 2,796 | 2,359 |
-| \`tabs\` | 42,654 | 12,774 | 11,209 | 3,925 | 822 | 683 |
-| \`tag\` | 90,014 | 29,133 | 23,817 | 908 | 198 | 152 |
-| \`textarea\` | 45,604 | 13,423 | 11,777 | 3,997 | 1,064 | 823 |
-| \`time-input\` | 159,758 | 49,618 | 41,808 | 29,051 | 7,092 | 5,836 |
-| \`time-picker\` | 118,842 | 37,643 | 30,837 | 19,136 | 5,108 | 4,212 |
-| \`timeline\` | 90,450 | 29,131 | 23,926 | 1,809 | 361 | 329 |
-| \`toast\` | 93,807 | 30,268 | 24,794 | 4,078 | 949 | 854 |
-| \`toggle\` | 47,603 | 13,958 | 12,282 | 3,342 | 815 | 679 |
-| \`toolbar\` | 36,647 | 11,354 | 9,975 | 2,624 | 704 | 632 |
-| \`tooltip\` | 66,523 | 21,820 | 19,264 | 6,494 | 1,749 | 1,358 |
-| \`tour\` | 72,280 | 23,251 | 20,434 | 11,097 | 2,771 | 2,270 |
-| \`tree\` | 100,665 | 32,488 | 26,468 | 7,224 | 1,878 | 1,481 |
-| \`trend\` | 89,328 | 28,928 | 23,763 | 1,056 | 268 | 261 |
-| \`video\` | 157,146 | 49,283 | 41,752 | 32,577 | 7,665 | 6,497 |
-| \`video-playlist\` | 136,305 | 44,053 | 37,099 | 14,942 | 3,424 | 2,823 |
-| \`virtual-list\` | 40,597 | 12,665 | 11,136 | 2,413 | 718 | 544 |
+| \`accordion\` | 94,146 | 30,683 | 25,048 | 2,875 | 725 | 525 |
+| \`announcement\` | 91,561 | 29,855 | 24,330 | 1,386 | 365 | 257 |
+| \`app-header\` | 35,147 | 10,774 | 9,501 | 1,248 | 260 | 223 |
+| \`area-chart\` | 81,239 | 26,783 | 23,588 | 11,166 | 3,382 | 2,786 |
+| \`avatar\` | 37,234 | 11,387 | 10,034 | 3,296 | 894 | 656 |
+| \`badge\` | 34,683 | 10,703 | 9,380 | 1,163 | 300 | 222 |
+| \`bar-chart\` | 82,848 | 27,158 | 23,975 | 12,769 | 3,695 | 3,043 |
+| \`blockquote\` | 34,697 | 10,730 | 9,428 | 774 | 176 | 120 |
+| \`breadcrumbs\` | 90,601 | 29,203 | 23,983 | 1,965 | 443 | 351 |
+| \`button\` | 39,369 | 11,986 | 10,532 | 3,195 | 817 | 669 |
+| \`button-group\` | 34,553 | 10,610 | 9,335 | 661 | 140 | 70 |
+| \`callout\` | 89,781 | 29,092 | 23,925 | 975 | 274 | 162 |
+| \`canvas\` | 95,827 | 28,300 | 24,845 | 50,036 | 14,959 | 12,534 |
+| \`card\` | 34,587 | 10,627 | 9,329 | 694 | 139 | 138 |
+| \`carousel\` | 100,004 | 32,186 | 26,391 | 10,943 | 2,734 | 2,273 |
+| \`chat\` | 113,488 | 37,076 | 30,421 | 17,449 | 5,101 | 4,161 |
+| \`checkbox\` | 44,186 | 13,038 | 11,448 | 2,821 | 785 | 560 |
+| \`checkbox-group\` | 47,310 | 13,724 | 12,081 | 5,425 | 1,365 | 1,028 |
+| \`code\` | 33,172 | 10,193 | 8,966 | 451 | 78 | 11 |
+| \`code-block\` | 135,605 | 44,216 | 37,314 | 17,443 | 4,510 | 3,792 |
+| \`color-input\` | 153,586 | 48,219 | 40,693 | 25,853 | 6,031 | 5,035 |
+| \`color-picker\` | 119,956 | 37,674 | 30,993 | 19,676 | 4,707 | 3,874 |
+| \`combobox\` | 148,369 | 46,881 | 39,333 | 21,175 | 5,213 | 4,199 |
+| \`command\` | 118,287 | 36,947 | 30,248 | 18,064 | 4,593 | 3,693 |
+| \`copy-button\` | 130,185 | 42,566 | 35,793 | 12,019 | 2,959 | 2,458 |
+| \`data-table\` | 188,875 | 57,528 | 48,602 | 57,535 | 14,589 | 12,096 |
+| \`date-input\` | 146,628 | 46,371 | 39,066 | 19,212 | 4,831 | 4,021 |
+| \`date-picker\` | 101,780 | 32,896 | 26,896 | 9,900 | 2,706 | 2,074 |
+| \`description-list\` | 34,656 | 10,565 | 9,263 | 1,132 | 172 | 72 |
+| \`dialog\` | 38,205 | 11,660 | 10,229 | 2,717 | 777 | 605 |
+| \`divider\` | 34,903 | 10,809 | 9,498 | 981 | 255 | 210 |
+| \`donut-chart\` | 78,982 | 25,781 | 22,706 | 10,339 | 2,969 | 2,458 |
+| \`drawer\` | 36,958 | 11,299 | 9,898 | 1,761 | 470 | 375 |
+| \`drilldown\` | 98,646 | 32,042 | 26,061 | 5,704 | 1,493 | 1,238 |
+| \`empty\` | 35,150 | 10,853 | 9,527 | 956 | 243 | 93 |
+| \`file-input\` | 102,144 | 32,877 | 26,913 | 6,266 | 1,808 | 1,383 |
+| \`filter-input\` | 158,975 | 49,595 | 41,851 | 28,070 | 6,798 | 5,653 |
+| \`format-date\` | 38,166 | 11,770 | 10,403 | 2,868 | 694 | 545 |
+| \`graph\` | 116,500 | 37,045 | 30,481 | 11,480 | 3,231 | 2,707 |
+| \`heatmap\` | 80,204 | 25,983 | 22,871 | 10,997 | 2,991 | 2,473 |
+| \`icon\` | 89,288 | 28,882 | 23,682 | 1,018 | 246 | 233 |
+| \`icon-button\` | 39,768 | 12,019 | 10,552 | 3,594 | 857 | 686 |
+| \`image\` | 36,726 | 11,156 | 9,804 | 3,157 | 811 | 573 |
+| \`input\` | 101,182 | 32,362 | 26,482 | 4,746 | 1,276 | 928 |
+| \`kbd\` | 36,507 | 11,395 | 10,035 | 2,976 | 915 | 698 |
+| \`legend\` | 38,559 | 11,901 | 10,462 | 1,080 | 276 | 203 |
+| \`lightbox\` | 42,999 | 12,950 | 11,349 | 4,807 | 1,236 | 976 |
+| \`line-chart\` | 80,779 | 26,486 | 23,366 | 10,792 | 3,085 | 2,519 |
+| \`list\` | 35,609 | 10,806 | 9,499 | 1,726 | 332 | 179 |
+| \`listbox\` | 109,996 | 35,061 | 28,720 | 11,263 | 3,065 | 2,402 |
+| \`loader\` | 34,793 | 10,731 | 9,435 | 900 | 230 | 100 |
+| \`map\` | 135,023 | 40,242 | 33,340 | 33,030 | 7,707 | 6,233 |
+| \`megamenu\` | 65,092 | 21,481 | 18,935 | 4,941 | 1,278 | 960 |
+| \`menu\` | 128,815 | 42,454 | 35,585 | 8,856 | 2,186 | 1,736 |
+| \`meter\` | 37,983 | 11,582 | 10,180 | 4,100 | 1,064 | 841 |
+| \`navigation\` | 36,542 | 11,280 | 9,892 | 1,417 | 341 | 173 |
+| \`notifications\` | 105,825 | 33,645 | 27,486 | 11,384 | 2,616 | 2,095 |
+| \`number-input\` | 104,106 | 33,173 | 27,128 | 7,671 | 1,990 | 1,534 |
+| \`object-inspector\` | 143,395 | 46,771 | 39,474 | 19,705 | 5,248 | 4,362 |
+| \`option\` | 36,848 | 11,172 | 9,860 | 2,959 | 665 | 435 |
+| \`outline\` | 39,911 | 12,458 | 10,950 | 4,628 | 1,325 | 1,029 |
+| \`pagination\` | 152,465 | 47,581 | 40,058 | 27,823 | 6,528 | 5,228 |
+| \`pin-input\` | 46,366 | 13,784 | 12,123 | 5,242 | 1,562 | 1,109 |
+| \`popover\` | 62,296 | 20,724 | 18,262 | 1,899 | 512 | 373 |
+| \`progress\` | 35,834 | 11,003 | 9,690 | 1,951 | 489 | 399 |
+| \`qr-code\` | 46,483 | 15,044 | 13,227 | 12,984 | 4,827 | 3,940 |
+| \`quote\` | 34,076 | 10,491 | 9,201 | 552 | 118 | 6 |
+| \`radio\` | 45,916 | 13,427 | 11,812 | 2,874 | 726 | 540 |
+| \`rating\` | 48,121 | 14,397 | 12,649 | 6,689 | 1,880 | 1,438 |
+| \`scatter-chart\` | 80,683 | 26,413 | 23,273 | 11,471 | 3,371 | 2,735 |
+| \`scroll-area\` | 36,319 | 11,164 | 9,804 | 2,743 | 736 | 544 |
+| \`select\` | 140,575 | 45,037 | 37,768 | 16,146 | 4,083 | 3,234 |
+| \`skeleton\` | 33,265 | 10,227 | 8,965 | 544 | 105 | 25 |
+| \`skip-link\` | 34,855 | 10,796 | 9,481 | 1,178 | 333 | 249 |
+| \`slider\` | 46,905 | 13,806 | 12,176 | 5,628 | 1,517 | 1,226 |
+| \`sparkline\` | 40,978 | 12,925 | 11,384 | 2,387 | 793 | 617 |
+| \`speed-dial\` | 120,323 | 40,071 | 33,762 | 3,743 | 918 | 710 |
+| \`splitter\` | 44,358 | 13,240 | 11,673 | 10,283 | 2,586 | 2,114 |
+| \`stat\` | 35,041 | 10,666 | 9,363 | 1,148 | 184 | 91 |
+| \`steps\` | 98,861 | 31,678 | 25,899 | 6,295 | 1,469 | 1,153 |
+| \`switch\` | 43,417 | 12,921 | 11,341 | 1,650 | 514 | 404 |
+| \`table\` | 100,971 | 32,855 | 26,761 | 10,159 | 2,795 | 2,324 |
+| \`tabs\` | 42,654 | 12,774 | 11,190 | 3,925 | 822 | 656 |
+| \`tag\` | 90,014 | 29,133 | 23,787 | 908 | 198 | 143 |
+| \`textarea\` | 45,604 | 13,423 | 11,760 | 3,997 | 1,064 | 873 |
+| \`time-input\` | 159,758 | 49,619 | 41,831 | 29,051 | 7,092 | 5,867 |
+| \`time-picker\` | 118,842 | 37,643 | 30,835 | 19,136 | 5,108 | 4,225 |
+| \`timeline\` | 90,450 | 29,131 | 23,959 | 1,809 | 361 | 264 |
+| \`toast\` | 93,807 | 30,268 | 24,791 | 4,078 | 949 | 738 |
+| \`toggle\` | 47,603 | 13,958 | 12,288 | 3,342 | 815 | 602 |
+| \`toolbar\` | 36,647 | 11,354 | 9,982 | 2,624 | 704 | 507 |
+| \`tooltip\` | 66,523 | 21,821 | 19,248 | 6,494 | 1,748 | 1,368 |
+| \`tour\` | 72,280 | 23,251 | 20,432 | 11,097 | 2,771 | 2,167 |
+| \`tree\` | 100,665 | 32,488 | 26,470 | 7,224 | 1,878 | 1,479 |
+| \`trend\` | 89,328 | 28,928 | 23,769 | 1,056 | 268 | 264 |
+| \`video\` | 157,146 | 49,283 | 41,779 | 32,577 | 7,665 | 6,504 |
+| \`video-playlist\` | 136,305 | 44,054 | 36,969 | 14,942 | 3,424 | 2,721 |
+| \`virtual-list\` | 40,597 | 12,665 | 11,142 | 2,413 | 718 | 481 |
 
 ### Styled tier
 
@@ -3630,110 +3645,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\` | 97,484 | 31,527 | 25,700 | 6,204 | 1,540 | 1,300 |
-| \`announcement\` | 96,325 | 30,966 | 25,247 | 6,133 | 1,433 | 1,259 |
-| \`app-header\` | 39,037 | 11,664 | 10,282 | 5,121 | 1,173 | 1,006 |
-| \`area-chart\` | 88,624 | 28,374 | 24,971 | 18,528 | 4,995 | 4,135 |
-| \`aura\` | 102,174 | 34,162 | 29,657 | 65,484 | 23,034 | 19,635 |
-| \`avatar\` | 40,820 | 12,141 | 10,668 | 6,872 | 1,666 | 1,389 |
-| \`badge\` | 37,787 | 11,408 | 10,020 | 4,250 | 1,000 | 860 |
-| \`bar-chart\` | 95,653 | 29,690 | 26,197 | 25,550 | 6,313 | 5,226 |
-| \`blockquote\` | 35,853 | 11,017 | 9,681 | 1,914 | 481 | 437 |
-| \`breadcrumbs\` | 94,168 | 30,039 | 24,666 | 5,518 | 1,237 | 1,075 |
-| \`button\` | 45,626 | 13,152 | 11,576 | 9,434 | 2,004 | 1,672 |
-| \`button-group\` | 36,229 | 10,989 | 9,644 | 2,320 | 527 | 401 |
-| \`callout\` | 91,722 | 29,620 | 24,351 | 2,899 | 755 | 713 |
-| \`canvas\` | 116,132 | 32,041 | 27,946 | 70,330 | 18,726 | 15,720 |
-| \`card\` | 37,868 | 11,464 | 10,059 | 3,963 | 987 | 803 |
-| \`carousel\` | 110,792 | 33,934 | 28,002 | 21,720 | 4,518 | 3,882 |
-| \`chat\` | 127,645 | 39,597 | 32,702 | 31,592 | 7,644 | 6,456 |
-| \`checkbox\` | 50,794 | 14,479 | 12,769 | 9,413 | 2,243 | 1,829 |
-| \`checkbox-group\` | 49,591 | 14,306 | 12,570 | 7,692 | 1,940 | 1,537 |
-| \`code\` | 34,249 | 10,492 | 9,229 | 1,511 | 372 | 329 |
-| \`code-block\` | 152,055 | 47,064 | 39,663 | 33,872 | 7,284 | 6,215 |
-| \`color-input\` | 187,399 | 53,407 | 45,270 | 59,647 | 11,364 | 9,601 |
-| \`color-picker\` | 148,067 | 42,280 | 35,054 | 47,780 | 9,366 | 7,955 |
-| \`combobox\` | 163,625 | 49,536 | 41,773 | 36,412 | 7,971 | 6,663 |
-| \`command\` | 129,039 | 39,047 | 32,092 | 28,805 | 6,715 | 5,648 |
-| \`copy-button\` | 140,189 | 44,369 | 37,335 | 22,009 | 4,700 | 3,878 |
-| \`data-table\` | 227,144 | 64,440 | 54,181 | 95,535 | 21,433 | 17,475 |
-| \`date-input\` | 162,787 | 49,387 | 41,716 | 35,359 | 7,915 | 6,614 |
-| \`date-picker\` | 107,397 | 34,083 | 27,936 | 15,499 | 3,867 | 3,210 |
-| \`description-list\` | 37,034 | 11,136 | 9,768 | 3,502 | 769 | 613 |
-| \`dialog\` | 42,582 | 12,668 | 11,158 | 7,079 | 1,783 | 1,617 |
-| \`divider\` | 37,059 | 11,328 | 9,933 | 3,120 | 770 | 653 |
-| \`donut-chart\` | 88,088 | 27,651 | 24,405 | 19,422 | 4,910 | 4,182 |
-| \`drawer\` | 41,221 | 12,296 | 10,809 | 6,007 | 1,482 | 1,369 |
-| \`drilldown\` | 103,343 | 33,144 | 27,027 | 10,391 | 2,512 | 2,126 |
-| \`empty\` | 36,590 | 11,297 | 9,904 | 2,380 | 703 | 537 |
-| \`file-input\` | 113,670 | 35,207 | 28,900 | 17,794 | 4,073 | 3,467 |
-| \`filter-input\` | 187,314 | 54,145 | 45,767 | 56,402 | 11,409 | 9,586 |
-| \`flex\` | 35,610 | 10,843 | 9,517 | 2,078 | 453 | 442 |
-| \`format-date\` | 38,814 | 11,917 | 10,519 | 3,498 | 870 | 630 |
-| \`graph\` | 131,342 | 39,600 | 32,618 | 26,303 | 5,764 | 5,002 |
-| \`grid\` | 36,203 | 11,031 | 9,681 | 2,667 | 625 | 638 |
-| \`heatmap\` | 87,000 | 27,374 | 24,204 | 17,773 | 4,424 | 3,649 |
-| \`icon\` | 89,994 | 29,073 | 23,839 | 1,707 | 413 | 350 |
-| \`icon-button\` | 45,785 | 13,026 | 11,440 | 9,595 | 1,866 | 1,578 |
-| \`image\` | 38,428 | 11,635 | 10,203 | 4,841 | 1,287 | 1,087 |
-| \`input\` | 107,548 | 33,803 | 27,645 | 11,102 | 2,659 | 2,220 |
-| \`kbd\` | 37,919 | 11,848 | 10,403 | 4,373 | 1,374 | 1,269 |
-| \`legend\` | 43,375 | 13,019 | 11,400 | 5,790 | 1,390 | 1,143 |
-| \`lightbox\` | 46,011 | 13,699 | 11,981 | 7,803 | 1,988 | 1,684 |
-| \`line-chart\` | 90,551 | 28,485 | 25,150 | 20,543 | 5,161 | 4,265 |
-| \`list\` | 39,692 | 11,749 | 10,324 | 5,799 | 1,305 | 1,132 |
-| \`listbox\` | 114,516 | 36,116 | 29,514 | 15,768 | 4,062 | 3,263 |
-| \`loader\` | 37,959 | 11,498 | 10,105 | 4,051 | 995 | 875 |
-| \`map\` | 171,264 | 45,752 | 38,116 | 69,258 | 13,163 | 11,051 |
-| \`megamenu\` | 69,973 | 22,584 | 19,939 | 9,806 | 2,356 | 2,030 |
-| \`menu\` | 136,343 | 44,102 | 37,098 | 16,360 | 3,787 | 3,143 |
-| \`meter\` | 43,381 | 12,722 | 11,221 | 9,480 | 2,236 | 2,000 |
-| \`navigation\` | 38,193 | 11,742 | 10,282 | 3,051 | 806 | 710 |
-| \`notifications\` | 118,939 | 36,071 | 29,623 | 24,488 | 5,037 | 4,321 |
-| \`number-input\` | 108,991 | 34,360 | 28,087 | 12,537 | 3,136 | 2,579 |
-| \`object-inspector\` | 157,034 | 49,035 | 41,455 | 33,322 | 7,585 | 6,335 |
-| \`option\` | 40,102 | 12,078 | 10,614 | 6,203 | 1,565 | 1,256 |
-| \`orb\` | 44,808 | 14,467 | 12,748 | 8,624 | 3,203 | 2,792 |
-| \`outline\` | 43,651 | 13,234 | 11,675 | 8,351 | 2,118 | 1,786 |
-| \`pagination\` | 170,448 | 50,616 | 42,673 | 45,787 | 9,637 | 7,940 |
-| \`pin-input\` | 49,531 | 14,595 | 12,839 | 8,390 | 2,385 | 1,875 |
-| \`popover\` | 64,932 | 21,365 | 18,834 | 4,517 | 1,169 | 912 |
-| \`progress\` | 40,863 | 12,174 | 10,743 | 6,962 | 1,676 | 1,501 |
-| \`qr-code\` | 48,148 | 15,475 | 13,637 | 14,629 | 5,259 | 4,433 |
-| \`quote\` | 34,731 | 10,653 | 9,342 | 1,191 | 291 | 202 |
-| \`radio\` | 54,213 | 14,925 | 13,148 | 11,161 | 2,282 | 1,855 |
-| \`rating\` | 52,430 | 15,623 | 13,761 | 10,984 | 3,118 | 2,562 |
-| \`sandbox\` | 70,095 | 18,502 | 16,399 | 35,720 | 7,874 | 6,624 |
-| \`scatter-chart\` | 89,076 | 28,200 | 24,903 | 19,840 | 5,218 | 4,346 |
-| \`scroll-area\` | 39,467 | 11,819 | 10,360 | 5,874 | 1,383 | 1,226 |
-| \`select\` | 153,428 | 47,407 | 39,837 | 28,985 | 6,519 | 5,336 |
-| \`skeleton\` | 35,783 | 10,980 | 9,659 | 2,242 | 595 | 521 |
-| \`skip-link\` | 36,318 | 11,202 | 9,792 | 2,624 | 721 | 587 |
-| \`slider\` | 57,985 | 15,793 | 13,952 | 16,691 | 3,550 | 3,194 |
-| \`sparkline\` | 44,898 | 13,878 | 12,220 | 6,293 | 1,748 | 1,565 |
-| \`speed-dial\` | 127,952 | 41,582 | 34,987 | 11,354 | 2,365 | 1,928 |
-| \`splitter\` | 50,430 | 14,234 | 12,618 | 16,337 | 3,634 | 3,077 |
-| \`stat\` | 38,466 | 11,377 | 10,026 | 4,565 | 916 | 767 |
-| \`steps\` | 112,666 | 34,210 | 28,051 | 20,086 | 3,970 | 3,374 |
-| \`switch\` | 47,783 | 13,986 | 12,265 | 6,001 | 1,576 | 1,260 |
-| \`table\` | 106,565 | 34,049 | 27,809 | 15,748 | 3,973 | 3,313 |
-| \`tabs\` | 48,895 | 14,048 | 12,302 | 10,154 | 2,153 | 1,785 |
-| \`tag\` | 93,365 | 30,080 | 24,604 | 4,244 | 1,062 | 918 |
-| \`text\` | 37,730 | 11,196 | 9,822 | 4,200 | 929 | 704 |
-| \`textarea\` | 49,038 | 14,259 | 12,527 | 7,416 | 1,938 | 1,604 |
-| \`time-input\` | 181,396 | 53,205 | 44,980 | 50,671 | 10,793 | 9,146 |
-| \`time-picker\` | 130,570 | 39,823 | 32,785 | 30,854 | 7,357 | 6,045 |
-| \`timeline\` | 93,763 | 29,912 | 24,568 | 5,110 | 1,131 | 972 |
-| \`toast\` | 101,341 | 31,985 | 26,205 | 11,599 | 2,621 | 2,221 |
-| \`toggle\` | 52,798 | 15,149 | 13,333 | 8,526 | 2,061 | 1,734 |
-| \`toolbar\` | 37,939 | 11,649 | 10,232 | 3,899 | 1,021 | 833 |
-| \`tooltip\` | 69,601 | 22,599 | 19,955 | 9,554 | 2,494 | 2,072 |
-| \`tour\` | 81,995 | 24,876 | 21,969 | 20,794 | 4,490 | 3,755 |
-| \`tree\` | 106,515 | 33,905 | 27,709 | 13,067 | 3,291 | 2,836 |
-| \`trend\` | 92,548 | 29,699 | 24,436 | 4,271 | 982 | 894 |
-| \`video\` | 176,566 | 52,761 | 44,794 | 51,979 | 11,227 | 9,669 |
-| \`video-playlist\` | 150,421 | 46,636 | 39,269 | 29,040 | 5,998 | 5,024 |
-| \`virtual-list\` | 41,389 | 12,878 | 11,305 | 3,187 | 935 | 870 |
+| \`accordion\` | 97,484 | 31,527 | 25,720 | 6,204 | 1,539 | 1,224 |
+| \`announcement\` | 96,325 | 30,966 | 25,285 | 6,133 | 1,433 | 1,253 |
+| \`app-header\` | 39,037 | 11,664 | 10,276 | 5,121 | 1,173 | 920 |
+| \`area-chart\` | 88,624 | 28,374 | 25,107 | 18,528 | 4,995 | 4,085 |
+| \`aura\` | 102,182 | 34,152 | 29,576 | 65,492 | 23,022 | 19,678 |
+| \`avatar\` | 40,820 | 12,142 | 10,668 | 6,872 | 1,666 | 1,331 |
+| \`badge\` | 38,056 | 11,452 | 10,036 | 4,519 | 1,047 | 783 |
+| \`bar-chart\` | 95,653 | 29,690 | 26,180 | 25,550 | 6,313 | 5,269 |
+| \`blockquote\` | 35,853 | 11,017 | 9,681 | 1,914 | 481 | 343 |
+| \`breadcrumbs\` | 94,168 | 30,039 | 24,651 | 5,518 | 1,237 | 964 |
+| \`button\` | 45,627 | 13,160 | 11,529 | 9,435 | 2,011 | 1,550 |
+| \`button-group\` | 36,229 | 10,989 | 9,644 | 2,320 | 527 | 399 |
+| \`callout\` | 91,867 | 29,665 | 24,435 | 3,044 | 803 | 671 |
+| \`canvas\` | 116,132 | 32,041 | 27,994 | 70,330 | 18,726 | 15,688 |
+| \`card\` | 37,868 | 11,465 | 10,065 | 3,963 | 987 | 911 |
+| \`carousel\` | 110,792 | 33,934 | 27,992 | 21,720 | 4,518 | 3,808 |
+| \`chat\` | 127,645 | 39,597 | 32,623 | 31,592 | 7,644 | 6,393 |
+| \`checkbox\` | 50,794 | 14,479 | 12,747 | 9,413 | 2,242 | 1,902 |
+| \`checkbox-group\` | 49,591 | 14,307 | 12,571 | 7,692 | 1,940 | 1,481 |
+| \`code\` | 34,249 | 10,492 | 9,217 | 1,511 | 371 | 205 |
+| \`code-block\` | 152,056 | 47,070 | 39,706 | 33,873 | 7,293 | 6,166 |
+| \`color-input\` | 187,784 | 53,476 | 45,374 | 60,032 | 11,434 | 9,656 |
+| \`color-picker\` | 148,452 | 42,352 | 35,077 | 48,165 | 9,437 | 7,975 |
+| \`combobox\` | 163,625 | 49,536 | 41,777 | 36,412 | 7,971 | 6,579 |
+| \`command\` | 129,039 | 39,047 | 32,118 | 28,805 | 6,714 | 5,583 |
+| \`copy-button\` | 140,190 | 44,376 | 37,309 | 22,010 | 4,707 | 3,839 |
+| \`data-table\` | 227,144 | 64,440 | 54,243 | 95,535 | 21,432 | 17,399 |
+| \`date-input\` | 162,787 | 49,387 | 41,713 | 35,359 | 7,915 | 6,640 |
+| \`date-picker\` | 107,397 | 34,083 | 27,925 | 15,499 | 3,867 | 3,227 |
+| \`description-list\` | 37,034 | 11,136 | 9,767 | 3,502 | 769 | 588 |
+| \`dialog\` | 42,582 | 12,668 | 11,149 | 7,079 | 1,783 | 1,444 |
+| \`divider\` | 37,059 | 11,328 | 9,883 | 3,120 | 770 | 661 |
+| \`donut-chart\` | 88,088 | 27,652 | 24,448 | 19,422 | 4,910 | 4,046 |
+| \`drawer\` | 41,221 | 12,296 | 10,809 | 6,007 | 1,482 | 1,236 |
+| \`drilldown\` | 103,343 | 33,143 | 27,043 | 10,391 | 2,512 | 2,045 |
+| \`empty\` | 36,590 | 11,297 | 9,906 | 2,380 | 703 | 532 |
+| \`file-input\` | 113,670 | 35,207 | 28,858 | 17,794 | 4,073 | 3,385 |
+| \`filter-input\` | 187,314 | 54,146 | 45,758 | 56,402 | 11,409 | 9,430 |
+| \`flex\` | 35,610 | 10,843 | 9,518 | 2,078 | 453 | 288 |
+| \`format-date\` | 38,814 | 11,917 | 10,521 | 3,498 | 869 | 597 |
+| \`graph\` | 131,342 | 39,600 | 32,625 | 26,303 | 5,764 | 4,954 |
+| \`grid\` | 36,203 | 11,032 | 9,682 | 2,667 | 625 | 548 |
+| \`heatmap\` | 87,000 | 27,374 | 24,209 | 17,773 | 4,424 | 3,704 |
+| \`icon\` | 89,994 | 29,073 | 23,803 | 1,707 | 413 | 249 |
+| \`icon-button\` | 45,786 | 13,032 | 11,450 | 9,596 | 1,871 | 1,524 |
+| \`image\` | 38,428 | 11,636 | 10,203 | 4,841 | 1,286 | 983 |
+| \`input\` | 107,548 | 33,803 | 27,666 | 11,102 | 2,659 | 2,146 |
+| \`kbd\` | 37,919 | 11,849 | 10,401 | 4,373 | 1,374 | 1,102 |
+| \`legend\` | 43,375 | 13,019 | 11,402 | 5,790 | 1,390 | 1,065 |
+| \`lightbox\` | 46,011 | 13,699 | 11,982 | 7,803 | 1,988 | 1,691 |
+| \`line-chart\` | 90,551 | 28,485 | 25,178 | 20,543 | 5,161 | 4,248 |
+| \`list\` | 39,692 | 11,749 | 10,316 | 5,799 | 1,305 | 1,028 |
+| \`listbox\` | 114,516 | 36,116 | 29,507 | 15,768 | 4,062 | 3,193 |
+| \`loader\` | 37,959 | 11,498 | 10,113 | 4,051 | 995 | 850 |
+| \`map\` | 172,078 | 45,778 | 38,214 | 70,072 | 13,195 | 10,982 |
+| \`megamenu\` | 69,973 | 22,584 | 19,943 | 9,806 | 2,356 | 1,940 |
+| \`menu\` | 136,343 | 44,103 | 36,938 | 16,360 | 3,787 | 3,120 |
+| \`meter\` | 43,381 | 12,723 | 11,216 | 9,480 | 2,236 | 1,950 |
+| \`navigation\` | 38,193 | 11,742 | 10,309 | 3,051 | 806 | 599 |
+| \`notifications\` | 118,939 | 36,071 | 29,654 | 24,488 | 5,037 | 4,318 |
+| \`number-input\` | 108,991 | 34,360 | 28,109 | 12,537 | 3,136 | 2,412 |
+| \`object-inspector\` | 157,035 | 49,044 | 41,533 | 33,323 | 7,593 | 6,290 |
+| \`option\` | 40,102 | 12,078 | 10,633 | 6,203 | 1,565 | 1,227 |
+| \`orb\` | 44,808 | 14,467 | 12,827 | 8,624 | 3,203 | 2,739 |
+| \`outline\` | 43,651 | 13,234 | 11,666 | 8,351 | 2,118 | 1,707 |
+| \`pagination\` | 170,448 | 50,616 | 42,697 | 45,787 | 9,636 | 7,884 |
+| \`pin-input\` | 49,531 | 14,596 | 12,812 | 8,390 | 2,385 | 1,811 |
+| \`popover\` | 64,967 | 21,370 | 18,889 | 4,552 | 1,174 | 940 |
+| \`progress\` | 40,863 | 12,174 | 10,738 | 6,962 | 1,676 | 1,351 |
+| \`qr-code\` | 48,148 | 15,475 | 13,626 | 14,629 | 5,259 | 4,338 |
+| \`quote\` | 34,731 | 10,653 | 9,342 | 1,191 | 291 | 170 |
+| \`radio\` | 54,213 | 14,925 | 13,149 | 11,161 | 2,282 | 1,825 |
+| \`rating\` | 52,430 | 15,623 | 13,762 | 10,984 | 3,118 | 2,550 |
+| \`sandbox\` | 70,095 | 18,502 | 16,376 | 35,720 | 7,874 | 6,644 |
+| \`scatter-chart\` | 89,076 | 28,201 | 24,812 | 19,840 | 5,218 | 4,151 |
+| \`scroll-area\` | 39,467 | 11,819 | 10,362 | 5,874 | 1,383 | 1,076 |
+| \`select\` | 153,428 | 47,408 | 39,903 | 28,985 | 6,519 | 5,382 |
+| \`skeleton\` | 35,783 | 10,980 | 9,662 | 2,242 | 595 | 514 |
+| \`skip-link\` | 36,318 | 11,203 | 9,793 | 2,624 | 721 | 509 |
+| \`slider\` | 57,985 | 15,794 | 13,955 | 16,691 | 3,550 | 2,975 |
+| \`sparkline\` | 44,898 | 13,878 | 12,223 | 6,293 | 1,748 | 1,435 |
+| \`speed-dial\` | 127,953 | 41,580 | 34,957 | 11,355 | 2,362 | 1,845 |
+| \`splitter\` | 50,430 | 14,234 | 12,600 | 16,337 | 3,634 | 3,026 |
+| \`stat\` | 38,466 | 11,377 | 10,026 | 4,565 | 916 | 741 |
+| \`steps\` | 112,667 | 34,217 | 28,069 | 20,087 | 3,975 | 3,300 |
+| \`switch\` | 47,784 | 13,981 | 12,294 | 6,002 | 1,571 | 1,193 |
+| \`table\` | 106,565 | 34,049 | 27,858 | 15,748 | 3,973 | 3,328 |
+| \`tabs\` | 48,895 | 14,048 | 12,307 | 10,154 | 2,153 | 1,662 |
+| \`tag\` | 93,365 | 30,080 | 24,585 | 4,244 | 1,062 | 876 |
+| \`text\` | 37,730 | 11,196 | 9,827 | 4,200 | 929 | 671 |
+| \`textarea\` | 49,038 | 14,260 | 12,528 | 7,416 | 1,937 | 1,499 |
+| \`time-input\` | 181,396 | 53,205 | 44,990 | 50,671 | 10,793 | 8,954 |
+| \`time-picker\` | 130,570 | 39,823 | 32,754 | 30,854 | 7,357 | 6,058 |
+| \`timeline\` | 93,763 | 29,912 | 24,586 | 5,110 | 1,130 | 964 |
+| \`toast\` | 101,341 | 31,985 | 26,187 | 11,599 | 2,621 | 2,077 |
+| \`toggle\` | 52,798 | 15,150 | 13,334 | 8,526 | 2,061 | 1,650 |
+| \`toolbar\` | 37,939 | 11,649 | 10,232 | 3,899 | 1,021 | 823 |
+| \`tooltip\` | 69,601 | 22,599 | 19,940 | 9,554 | 2,494 | 1,994 |
+| \`tour\` | 81,996 | 24,885 | 21,939 | 20,795 | 4,495 | 3,592 |
+| \`tree\` | 106,515 | 33,905 | 27,704 | 13,067 | 3,290 | 2,729 |
+| \`trend\` | 92,548 | 29,699 | 24,398 | 4,271 | 981 | 828 |
+| \`video\` | 176,566 | 52,762 | 44,869 | 51,979 | 11,227 | 9,576 |
+| \`video-playlist\` | 150,421 | 46,636 | 39,281 | 29,040 | 5,998 | 4,992 |
+| \`virtual-list\` | 41,389 | 12,878 | 11,354 | 3,187 | 935 | 643 |
 
 ## What an install adds to \`node_modules\`
 
@@ -3745,12 +3760,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 1,219,107 | 179 | 274,658 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
-| \`@fusion.dev/helix-headless\` | 13,708,657 | 511 | 1,078,828 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
+| \`@fusion.dev/helix-core\` | 1,219,204 | 179 | 274,659 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
+| \`@fusion.dev/helix-headless\` | 13,709,247 | 511 | 1,079,071 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 150,162 | 21 | 50,346 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 102,268 | 6 | 0 | none |
-| \`@fusion.dev/helix-theme\` | 514,288 | 8 | 5,300 | none |
-| \`@fusion.dev/helix\` | 14,850,059 | 877 | 373,843 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
+| \`@fusion.dev/helix-styles\` | 106,097 | 6 | 0 | none |
+| \`@fusion.dev/helix-theme\` | 528,598 | 8 | 5,393 | none |
+| \`@fusion.dev/helix\` | 14,852,492 | 877 | 373,887 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
 
 ## Not measured yet
 
@@ -5575,7 +5590,7 @@ its own components, and the same applies to anything you build with it.
 
 The theme engine measures each ink against the ground it is actually painted
 on. The ladder records which pairs occur. For example, \`foreground\` on
-\`surface-overlay\` is a real pair, and \`foreground-on-accent\` on \`surface\` is
+\`surface-overlay\` is a real pair, and \`foreground-on-primary\` on \`surface\` is
 not. See [Color](./color).
 `,
     svelte: `---
@@ -5675,6 +5690,11 @@ drawn with the theme, and the stylesheet the theme generates beside it.
 The Color scheme field picks which half you see: light, dark, or the site's own
 mode. See [Color modes](./color-modes).
 
+The builder starts from ink, the palette Helix draws with no brand color:
+near-black in light mode and near-white in dark. Turn on **Brand color** to
+derive the palette from a color of your own. The accent angle is measured from
+the brand, so it applies only with one.
+
 ## A page of your own color
 
 The Light page and Dark page fields give the page a color, such as a warm cream
@@ -5758,6 +5778,22 @@ title: Deriving a theme
 
 Helix computes your color tokens from a few inputs, such as your brand color.
 
+## Without a brand color
+
+With no brand color set, Helix draws in ink. The primary color is near-black in
+light mode and near-white in dark mode, and a filled button is the opposite of
+the page, with the page's own color for its label. The neutral ramp supplies
+both, so a gray with a tint gives a tinted ink. Set a brand color to replace the
+ink, as a seed in CSS or as \`brand\` in the theme engine.
+
+Before ink, the default was a blue. To keep it, set it as your seed:
+
+\`\`\`css
+:root {
+  --helix-seed-brand: oklch(0.539 0.19 258);
+}
+\`\`\`
+
 When a design system ships two hundred fixed color values, you theme it by
 changing them one at a time. A change to one value can break the contrast of a
 component elsewhere, and nothing tells you.
@@ -5788,8 +5824,9 @@ resolved at the root. The stylesheet declares the ramp again on each
 
 Tuned does not guarantee contrast. CSS has no contrast function.
 \`oklch(from …)\` can step and rotate a color, but it cannot search for the
-lightness that meets a target. The contrast figures built into the ramp are
-exact for the default seed and approximate for any other.
+lightness that meets a target. The contrast figures built into the ramp were
+measured on one blue seed, so they are exact for that seed and approximate for
+any other.
 
 **Verified** uses the theme engine. It searches for each color that meets its
 target, measures every pair, and returns the theme with any violations:
@@ -5860,6 +5897,16 @@ console.log(css[':root'])
 A value that is not a color and still changes with the mode, such as the edge
 of a floating surface, is set by rules after the block, one for each mode.
 
+The CLI writes the same block. \`helix theme init\` writes a \`helix.theme.json\`,
+with your brand color if you pass \`--brand\`. \`helix theme build\` derives it in
+both modes, unless the file names a \`scheme\`, and refuses to write a theme with
+a pair that misses its target:
+
+\`\`\`sh
+helix theme init --brand '#0b3d91'
+helix theme build --out theme.css
+\`\`\`
+
 ## Color one section
 
 A section in a color of its own, such as a deep teal band on a cream page, is a
@@ -5899,8 +5946,10 @@ Equal numeric steps in sRGB do not look like equal steps. That makes scales and
 contrast math in sRGB unreliable. Helix computes themes in OKLCH for this
 reason. Colors are written in OKLCH and converted to other formats on output.
 
-The engine keeps your brand color's hue and chroma and changes only its
-lightness to meet the target. Your brand color stays recognizable, and its
+The engine keeps your brand color's hue and chroma. Where the color already
+meets the contrast target, the engine uses it as it is: a navy brand stays navy
+on a light page. Where it does not, the engine changes only its lightness, by as
+little as the target needs. Your brand color stays recognizable, and its
 contrast is guaranteed.
 
 ## Errors the engine prevents