@fusion.dev/helix-docs 0.227.0 → 0.229.0

package/dist/sources.generated.js

@@ -1417,9 +1417,9 @@ The surfaces above it form an ordered ladder:
 | --- | --- | --- |
 | \`--helix-color-background\` | <span data-token-swatch style={{ background: 'var(--helix-color-background)' }} /> | The page background. Every other surface sits on it. |
 | \`--helix-color-surface\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface)' }} /> | A surface on the page, such as a card or a panel. The separation policy sets it apart with a fill, a border, or a shadow. |
-| \`--helix-color-surface-raised\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A raised surface on the page, such as a selected tab or a hovered row. Its fill is one step down the ramp. |
+| \`--helix-color-surface-raised\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A panel raised inside a surface, such as a card inside a card. Its fill is one step down the ramp. |
 | \`--helix-color-surface-overlay\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its edge and its shadow set it apart. |
-| \`--helix-color-surface-sunken\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface that holds a value, such as an input, a track, or a groove. Its fill sets it apart. |
+| \`--helix-color-surface-sunken\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface, such as a track or a groove. Its fill sets it apart. A field reads \`well\`. |
 
 [//]: # (/tokens)
 
@@ -1440,7 +1440,8 @@ Inks are the colors that go on grounds. The base ink is \`foreground\`.
   placeholder, a hint, or a caption. The engine solves it to the contrast
   target.
 - \`foreground-subtle\` recedes further. It is for marks that are not text, such
-  as a separator, a chevron, or a grip, and for the text of a disabled control.
+  as a separator, a chevron, or a grip. A disabled control fades whole, through
+  \`--helix-opacity-disabled\`.
   It is a fixed step of the gray ramp, and the engine does not solve it, so its
   contrast is not guaranteed. Use \`foreground-muted\` for text that is read.
 - Text on a filled color takes the ink named for that fill:
@@ -1532,7 +1533,7 @@ readable grays has room for one quiet ink, and \`foreground-muted\` is that ink,
 \`foreground-subtle\` stays a fixed step of the stylesheet's gray ramp and its
 contrast is not guaranteed. A component paints its quiet text in
 \`foreground-muted\`, and keeps \`foreground-subtle\` for marks that are not text and
-for the text of a disabled control.
+for a mark that recedes.
 
 The engine can solve only the pairs it knows about, so we check two things:
 
@@ -2155,6 +2156,7 @@ for the cases the top layer does not cover:
 | \`--helix-shadow-lg\` | \`0 12px 32px var(--_helix-shadow-ink-lg)\` |
 | \`--helix-shadow-surface\` | \`var(--helix-shadow-none)\` |
 | \`--helix-shadow-floating\` | \`var(--helix-shadow-lg)\` |
+| \`--helix-shadow-raised\` | \`var(--helix-shadow-floating)\` |
 
 [//]: # (/tokens)
 
@@ -2164,19 +2166,21 @@ separation](./surfaces-and-separation).
 
 ## Material
 
-Eight tokens describe translucency:
+Ten tokens describe translucency:
 
 [//]: # (tokens:material)
 
 | Token | Value | For |
 | --- | --- | --- |
-| \`--helix-material-backdrop\` | \`blur(var(--helix-material-blur-md)) saturate(1.5)\` | The tint behind a modal. |
+| \`--helix-material-backdrop\` | \`blur(var(--helix-material-blur-md)) saturate(1.5)\` | The blur and saturation behind a translucent surface. |
 | \`--helix-material-opacity\` | \`1\` | How opaque a translucent surface is. |
 | \`--helix-material-blur-sm\` | \`8px\` | The lightest backdrop blur. |
 | \`--helix-material-blur-md\` | \`16px\` | The backdrop blur behind a modal. |
 | \`--helix-material-blur-lg\` | \`32px\` | The heaviest backdrop blur. |
-| \`--helix-material-translucent\` | \`color-mix(in oklab, light-dark(oklch(1 0 0), oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258))) 30%, transparent)\` | The translucent background, for a surface that shows what is behind it. |
+| \`--helix-material-translucent\` | \`light-dark(color-mix(in oklab, oklch(1 0 0) 30%, transparent), color-mix(in oklab, oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258)) 60%, transparent))\` | The translucent background, for a surface that shows what is behind it. |
 | \`--helix-material-translucent-strong\` | \`color-mix(in oklab, light-dark(oklch(1 0 0), oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258))) 88%, transparent)\` | The stronger translucent background, for a surface that shows less of what is behind it. |
+| \`--helix-material-modal\` | \`light-dark(var(--helix-material-translucent-strong), var(--helix-material-translucent))\` | The glass of a Dialog or Drawer, which sits over its own scrim. |
+| \`--helix-material-panel\` | \`light-dark(color-mix(in oklab, oklch(1 0 0) 72%, transparent), var(--helix-material-translucent))\` | The glass of a panel over the page, such as a Menu, Popover, or Tooltip. |
 | \`--helix-material-border\` | \`light-dark(color-mix(in oklab, oklch(0.15 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258)) 14%, transparent), color-mix(in oklab, oklch(1 0 0) 12%, transparent))\` | The border a translucent surface needs to keep a visible edge. |
 
 [//]: # (/tokens)
@@ -3512,10 +3516,16 @@ If you do not have a project yet, the scaffolder writes one with Helix
 installed, the stylesheets imported, and every element registered:
 
 \`\`\`sh
-npm create @fusion.dev/helix-app@latest my-app -- --template react-vite
+npm create @fusion.dev/helix-app@latest
+\`\`\`
+
+The command asks for a project name and a template. To skip the questions, name
+both:
+
+\`\`\`sh
+npm create @fusion.dev/helix-app@latest my-app --template react-vite
 \`\`\`
 
-Leave out \`--template\`, and the command lists the templates and writes nothing.
 Each template starts with the same three pages:
 
 - a landing page
@@ -5236,7 +5246,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 295,793 | 95,872 | 82,242 |
+| Lit and \`@fusion.dev/helix-core\` | 295,976 | 95,937 | 82,276 |
 
 ## Whole packages
 
@@ -5247,12 +5257,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 295,002 | 95,659 | 81,788 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,699,188 | 468,311 | 352,481 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 295,185 | 95,717 | 82,039 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,699,516 | 468,456 | 352,516 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 77,621 | 24,510 | 20,384 | The whole glyph set. |
-| \`@fusion.dev/helix-theme\` | 4,022 | 1,720 | 1,541 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,285 | 123,363 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
-| \`@fusion.dev/helix\` | 2,503,553 | 640,892 | 458,348 | Every styled family. |
+| \`@fusion.dev/helix-theme\` | 3,934 | 1,681 | 1,504 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
+| \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,292 | 123,106 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
+| \`@fusion.dev/helix\` | 2,529,538 | 646,637 | 460,613 | Every styled family. |
 | \`lit\` | 15,396 | 5,990 | 5,419 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -5265,21 +5275,21 @@ shows the whole cost of using the base layer on its own.
 
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`base.css\` | 37,882 | 5,293 | 4,566 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
-| \`elements.css\` | 24,939 | 3,469 | 3,047 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
+| \`base.css\` | 40,063 | 5,632 | 4,871 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
+| \`elements.css\` | 25,548 | 3,544 | 3,075 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
 | \`helix.css\` | 207 | 149 | 118 | The other four stylesheets in one import, in the order they must load. |
-| \`primitives.css\` | 7,511 | 1,411 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
-| \`tokens.css\` | 23,137 | 2,849 | 2,385 | The 200 semantic tokens. Every styled component needs them. |
+| \`primitives.css\` | 8,425 | 1,562 | 1,336 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
+| \`tokens.css\` | 25,264 | 3,172 | 2,648 | The 218 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 22,915 bytes gzipped alone, and it adds 5,550 to a page that already has Helix. The shared runtime is 76 percent of the first component, and the component itself is 24 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 23,033 bytes gzipped alone, and it adds 5,635 to a page that already has Helix. The shared runtime is 76 percent of the first component, and the component itself is 24 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 122 styled components, the smallest is \`code\` at 9,897 bytes gzipped alone, and the largest is \`data-table\` at 76,831. Every family together is 640,892.
+Across the 122 styled components, the smallest is \`code\` at 9,891 bytes gzipped alone, and the largest is \`data-table\` at 77,433. Every family together is 646,637.
 
-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 468,311 bytes gzipped, whatever else the page imports. That is 20 times the median family above. All 122 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 468,456 bytes gzipped, whatever else the page imports. That is 20 times the median family above. All 122 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,062 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,090 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -5291,43 +5301,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 49,256 | 16,177 | 14,575 |
+| \`button\` | **Helix** | 51,030 | 16,394 | 14,782 |
 | | Carbon | 133,019 | 20,696 | 17,673 |
 | | Material Web | 47,039 | 13,980 | 12,488 |
 | | Spectrum | 98,861 | 21,731 | 18,547 |
 | | Web Awesome | 136,082 | 34,015 | 28,815 |
-| \`checkbox\` | **Helix** | 52,190 | 16,959 | 15,262 |
+| \`checkbox\` | **Helix** | 53,351 | 17,195 | 15,450 |
 | | Carbon | 60,226 | 15,349 | 13,476 |
 | | Material Web | 43,770 | 13,361 | 11,940 |
 | | Spectrum | 60,006 | 14,720 | 12,834 |
 | | Web Awesome | 115,313 | 28,720 | 24,391 |
-| \`dialog\` | **Helix** | 48,868 | 16,563 | 14,889 |
+| \`dialog\` | **Helix** | 49,001 | 16,607 | 14,965 |
 | | Carbon | 510,751 | 66,753 | 39,054 |
 | | Material Web | 34,234 | 11,327 | 10,171 |
 | | Spectrum | 152,934 | 30,766 | 25,567 |
 | | Web Awesome | 148,696 | 36,894 | 31,476 |
-| \`radio\` | **Helix** | 55,036 | 17,528 | 15,711 |
+| \`radio\` | **Helix** | 55,902 | 17,740 | 15,918 |
 | | Carbon | 62,982 | 16,599 | 14,519 |
 | | Material Web | 41,029 | 13,048 | 11,659 |
 | | Spectrum | 38,765 | 10,485 | 9,337 |
 | | Web Awesome | 112,100 | 27,426 | 23,157 |
-| \`switch\` | **Helix** | 49,022 | 16,458 | 14,793 |
+| \`switch\` | **Helix** | 50,303 | 16,733 | 15,038 |
 | | Carbon | 69,388 | 16,861 | 14,710 |
 | | Material Web | 50,129 | 14,355 | 12,869 |
 | | Spectrum | 62,390 | 14,852 | 13,259 |
 | | Web Awesome | 45,922 | 15,043 | 13,489 |
-| \`tabs\` | **Helix** | 61,660 | 19,580 | 17,602 |
+| \`tabs\` | **Helix** | 62,387 | 19,678 | 17,707 |
 | | Carbon | 578,657 | 72,708 | 43,044 |
 | | Material Web | 38,875 | 12,619 | 11,290 |
 | | Spectrum | 64,371 | 17,857 | 16,004 |
 | | Web Awesome | 153,457 | 37,241 | 31,779 |
-| \`tooltip\` | **Helix** | 67,881 | 23,741 | 21,350 |
+| \`tooltip\` | **Helix** | 67,875 | 23,746 | 21,328 |
 | | Carbon | 189,319 | 29,833 | 22,169 |
 | | Material Web | | not shipped | |
 | | Spectrum | 136,084 | 39,731 | 34,997 |
 | | Web Awesome | 70,482 | 23,540 | 21,032 |
 
-At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 7,043 bytes gzipped. 14 of 27 peer measurements are smaller than the Helix row.
+At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 7,255 bytes gzipped. 14 of 27 peer measurements are smaller than the Helix row.
 
 Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
 
@@ -5401,120 +5411,120 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 36,788 | 13,361 | 12,020 | 5,369 | 1,509 | 1,130 |
-| \`announcement\` | 41,504 | 14,908 | 13,453 | 4,788 | 1,395 | 939 |
-| \`app-header\` | 37,460 | 13,637 | 12,256 | 6,103 | 1,830 | 1,242 |
-| \`area-chart\` | 110,876 | 38,448 | 34,332 | 14,781 | 4,514 | 3,661 |
-| \`avatar\` | 35,972 | 13,427 | 12,199 | 3,980 | 1,241 | 963 |
-| \`badge\` | 32,204 | 12,204 | 11,028 | 2,941 | 888 | 675 |
-| \`bar-chart\` | 118,895 | 41,035 | 36,595 | 22,275 | 6,957 | 5,693 |
-| \`blockquote\` | 28,797 | 10,962 | 9,867 | 2,400 | 869 | 566 |
-| \`breadcrumbs\` | 42,197 | 15,744 | 14,225 | 7,912 | 2,506 | 1,933 |
-| \`button\` | 41,599 | 14,659 | 13,253 | 5,695 | 1,678 | 1,121 |
-| \`button-group\` | 32,666 | 11,956 | 10,770 | 4,897 | 1,458 | 933 |
-| \`callout\` | 40,054 | 15,113 | 13,582 | 2,875 | 991 | 572 |
-| \`canvas\` | 179,749 | 56,211 | 49,008 | 86,219 | 25,107 | 20,734 |
-| \`card\` | 28,502 | 10,629 | 9,573 | 2,074 | 613 | 355 |
-| \`carousel\` | 49,408 | 17,356 | 15,659 | 15,477 | 4,258 | 3,131 |
-| \`chat\` | 141,862 | 46,119 | 40,766 | 44,186 | 12,189 | 9,600 |
-| \`checkbox\` | 45,709 | 15,485 | 13,917 | 3,154 | 977 | 568 |
-| \`checkbox-group\` | 52,892 | 17,350 | 15,566 | 8,351 | 2,349 | 1,699 |
-| \`code\` | 24,987 | 9,593 | 8,634 | 136 | 58 | 29 |
-| \`code-block\` | 113,571 | 38,287 | 34,010 | 40,487 | 11,881 | 9,552 |
-| \`code-editor\` | 101,737 | 31,707 | 28,089 | 37,299 | 9,473 | 7,556 |
-| \`code-input\` | 65,648 | 22,501 | 20,155 | 10,559 | 3,403 | 2,626 |
-| \`color-input\` | 149,480 | 47,456 | 41,607 | 56,692 | 14,690 | 11,807 |
-| \`color-picker\` | 110,841 | 35,126 | 31,169 | 48,828 | 13,100 | 10,426 |
-| \`combobox\` | 150,510 | 47,620 | 41,927 | 37,524 | 9,378 | 7,358 |
-| \`command\` | 127,691 | 39,998 | 35,172 | 38,272 | 9,836 | 7,929 |
-| \`copy-button\` | 88,951 | 30,221 | 26,963 | 19,839 | 5,299 | 4,092 |
-| \`data-table\` | 221,008 | 67,295 | 58,028 | 93,771 | 24,749 | 19,689 |
-| \`date-input\` | 147,158 | 45,984 | 40,751 | 38,735 | 9,419 | 7,539 |
-| \`date-picker\` | 67,350 | 22,765 | 20,572 | 20,821 | 5,643 | 4,386 |
-| \`description-list\` | 27,583 | 10,321 | 9,292 | 1,554 | 488 | 238 |
-| \`device-screen\` | 122,587 | 38,605 | 34,181 | 46,259 | 11,427 | 9,013 |
-| \`dialog\` | 43,110 | 15,225 | 13,667 | 6,075 | 1,792 | 1,310 |
-| \`divider\` | 28,042 | 10,561 | 9,492 | 1,410 | 478 | 372 |
-| \`donut-chart\` | 104,235 | 35,857 | 32,064 | 15,091 | 4,568 | 3,628 |
-| \`drawer\` | 47,598 | 16,648 | 14,963 | 7,778 | 2,238 | 1,695 |
-| \`drilldown\` | 48,006 | 16,533 | 14,854 | 10,059 | 2,734 | 1,985 |
-| \`editor\` | 178,365 | 54,257 | 47,104 | 83,366 | 20,563 | 16,564 |
-| \`empty\` | 29,125 | 10,883 | 9,801 | 1,974 | 632 | 352 |
-| \`file-input\` | 63,256 | 21,755 | 19,588 | 13,323 | 4,169 | 3,129 |
-| \`filter-input\` | 113,026 | 37,877 | 33,651 | 21,663 | 6,136 | 4,900 |
-| \`find\` | 78,192 | 25,912 | 23,113 | 21,809 | 5,714 | 4,445 |
-| \`format-date\` | 35,311 | 12,970 | 11,693 | 4,462 | 1,239 | 865 |
-| \`graph\` | 146,422 | 46,082 | 40,312 | 40,018 | 10,986 | 8,704 |
-| \`heatmap\` | 113,308 | 38,184 | 34,064 | 19,434 | 5,634 | 4,485 |
-| \`icon\` | 108,395 | 36,072 | 30,980 | 78,520 | 25,856 | 20,902 |
-| \`icon-button\` | 41,708 | 14,699 | 13,261 | 5,802 | 1,677 | 1,212 |
-| \`image\` | 30,491 | 11,154 | 10,066 | 3,842 | 1,114 | 797 |
-| \`input\` | 62,209 | 21,267 | 18,957 | 7,350 | 2,354 | 1,670 |
-| \`kbd\` | 34,229 | 12,746 | 11,457 | 3,926 | 1,248 | 749 |
-| \`legend\` | 44,093 | 15,636 | 14,129 | 2,764 | 882 | 613 |
-| \`lightbox\` | 60,994 | 20,490 | 18,414 | 16,839 | 4,618 | 3,490 |
-| \`line-chart\` | 113,879 | 39,281 | 35,058 | 17,183 | 5,120 | 4,173 |
-| \`list\` | 67,327 | 23,172 | 20,687 | 15,570 | 4,398 | 3,357 |
-| \`listbox\` | 94,025 | 31,049 | 27,457 | 16,516 | 4,667 | 3,531 |
-| \`loader\` | 31,541 | 11,772 | 10,633 | 2,875 | 939 | 743 |
-| \`log\` | 89,716 | 30,000 | 26,924 | 40,360 | 12,454 | 10,330 |
-| \`map\` | 159,903 | 47,424 | 40,953 | 63,298 | 15,415 | 11,838 |
-| \`markdown\` | 140,272 | 47,304 | 41,847 | 62,608 | 19,541 | 16,095 |
-| \`megamenu\` | 65,596 | 23,362 | 20,892 | 8,742 | 2,372 | 1,736 |
-| \`menu\` | 106,453 | 34,787 | 30,999 | 32,752 | 8,411 | 6,741 |
-| \`meter\` | 38,888 | 14,279 | 12,919 | 6,365 | 1,817 | 1,466 |
-| \`motion-toggle\` | 30,535 | 11,627 | 10,453 | 1,539 | 546 | 345 |
-| \`navigation\` | 37,912 | 13,969 | 12,527 | 3,497 | 1,155 | 765 |
-| \`notifications\` | 64,044 | 21,590 | 19,432 | 18,695 | 5,071 | 3,907 |
-| \`number-input\` | 61,522 | 20,549 | 18,480 | 13,492 | 3,630 | 2,683 |
-| \`object-inspector\` | 124,337 | 41,342 | 36,614 | 37,188 | 10,577 | 8,409 |
-| \`option\` | 31,105 | 11,300 | 10,179 | 4,446 | 1,156 | 930 |
-| \`outline\` | 41,449 | 14,806 | 13,355 | 10,620 | 3,116 | 2,340 |
-| \`pagination\` | 154,678 | 49,079 | 42,862 | 47,274 | 12,176 | 9,641 |
-| \`pin-input\` | 52,802 | 18,248 | 16,424 | 7,187 | 2,356 | 1,597 |
-| \`popover\` | 69,330 | 24,448 | 21,878 | 6,480 | 1,829 | 1,394 |
-| \`progress\` | 33,407 | 12,448 | 11,245 | 3,075 | 943 | 706 |
-| \`qr-code\` | 47,683 | 18,136 | 16,366 | 16,927 | 6,238 | 5,219 |
-| \`quote\` | 27,206 | 10,427 | 9,378 | 1,205 | 496 | 366 |
-| \`radio\` | 47,265 | 16,015 | 14,390 | 3,799 | 1,216 | 689 |
-| \`rating\` | 56,091 | 19,233 | 17,281 | 8,272 | 2,510 | 1,849 |
-| \`scatter-chart\` | 110,294 | 37,894 | 33,784 | 20,721 | 6,411 | 5,265 |
-| \`scroll-area\` | 35,923 | 12,852 | 11,564 | 9,027 | 2,675 | 1,963 |
-| \`select\` | 132,912 | 43,503 | 38,266 | 27,302 | 7,298 | 5,521 |
-| \`shortcut-overlay\` | 54,311 | 19,106 | 17,144 | 11,631 | 3,434 | 2,596 |
-| \`skeleton\` | 26,984 | 10,208 | 9,193 | 954 | 352 | 237 |
-| \`skip-link\` | 28,768 | 10,918 | 9,827 | 1,334 | 493 | 309 |
-| \`slider\` | 59,094 | 19,779 | 17,836 | 13,667 | 3,858 | 2,988 |
-| \`sparkline\` | 53,331 | 19,123 | 17,287 | 5,968 | 2,066 | 1,662 |
-| \`spatial-bar-chart\` | 125,627 | 43,813 | 38,996 | 28,914 | 9,746 | 8,183 |
-| \`spatial-heatmap\` | 128,676 | 43,337 | 38,588 | 32,104 | 9,605 | 7,840 |
-| \`spatial-ribbon-chart\` | 116,031 | 40,304 | 35,898 | 21,327 | 7,072 | 5,892 |
-| \`spatial-scatter-chart\` | 114,102 | 39,466 | 35,189 | 19,459 | 6,296 | 5,083 |
-| \`spatial-surface-chart\` | 117,034 | 40,689 | 36,229 | 22,328 | 7,461 | 6,153 |
-| \`spatial-treemap\` | 118,137 | 41,301 | 36,746 | 21,742 | 7,349 | 6,077 |
-| \`speed-dial\` | 74,018 | 26,161 | 23,402 | 11,107 | 2,926 | 2,252 |
-| \`splitter\` | 49,870 | 17,059 | 15,406 | 15,021 | 3,923 | 3,121 |
-| \`stat\` | 30,366 | 11,365 | 10,271 | 2,291 | 745 | 478 |
-| \`steps\` | 60,474 | 20,856 | 18,684 | 14,540 | 4,049 | 3,131 |
-| \`switch\` | 44,568 | 15,309 | 13,740 | 1,733 | 653 | 312 |
-| \`table\` | 125,700 | 38,956 | 34,233 | 45,249 | 12,360 | 9,871 |
-| \`tabs\` | 51,456 | 17,513 | 15,743 | 10,607 | 2,836 | 2,108 |
-| \`tag\` | 47,412 | 17,109 | 15,423 | 8,490 | 2,490 | 1,801 |
-| \`terminal\` | 141,582 | 44,590 | 39,284 | 54,204 | 13,434 | 10,706 |
-| \`textarea\` | 59,949 | 20,471 | 18,390 | 5,642 | 1,666 | 1,149 |
-| \`time-input\` | 187,028 | 58,029 | 50,530 | 50,345 | 12,609 | 10,012 |
-| \`time-picker\` | 117,065 | 37,039 | 32,683 | 35,289 | 9,369 | 7,364 |
-| \`timeline\` | 36,581 | 13,679 | 12,359 | 4,128 | 1,205 | 792 |
-| \`toast\` | 74,603 | 25,177 | 22,476 | 20,050 | 5,568 | 4,385 |
-| \`toggle\` | 51,029 | 16,915 | 15,259 | 6,038 | 1,789 | 1,312 |
-| \`toolbar\` | 37,383 | 13,551 | 12,196 | 1,406 | 490 | 379 |
-| \`tooltip\` | 65,000 | 22,983 | 20,661 | 8,862 | 2,438 | 1,905 |
-| \`tour\` | 90,755 | 30,739 | 27,470 | 21,104 | 5,648 | 4,416 |
-| \`tree\` | 72,738 | 24,341 | 21,771 | 17,539 | 4,881 | 3,851 |
-| \`trend\` | 35,034 | 13,356 | 12,086 | 3,577 | 1,125 | 722 |
-| \`video\` | 152,045 | 46,721 | 41,178 | 69,404 | 17,300 | 13,937 |
-| \`video-playlist\` | 137,298 | 43,792 | 38,787 | 45,878 | 11,720 | 9,463 |
-| \`virtual-list\` | 72,396 | 23,976 | 21,620 | 25,472 | 7,513 | 6,173 |
+| \`accordion\` | 36,788 | 13,361 | 12,020 | 5,369 | 1,500 | 1,268 |
+| \`announcement\` | 41,457 | 14,900 | 13,441 | 4,740 | 1,396 | 1,071 |
+| \`app-header\` | 37,460 | 13,637 | 12,256 | 6,103 | 1,854 | 1,444 |
+| \`area-chart\` | 110,876 | 38,447 | 34,332 | 14,781 | 4,513 | 3,608 |
+| \`avatar\` | 35,972 | 13,427 | 12,201 | 3,980 | 1,220 | 956 |
+| \`badge\` | 32,204 | 12,203 | 11,028 | 2,941 | 892 | 597 |
+| \`bar-chart\` | 118,895 | 41,035 | 36,573 | 22,275 | 6,940 | 5,773 |
+| \`blockquote\` | 28,797 | 10,962 | 9,858 | 2,400 | 867 | 659 |
+| \`breadcrumbs\` | 42,197 | 15,744 | 14,225 | 7,912 | 2,475 | 1,982 |
+| \`button\` | 41,599 | 14,659 | 13,252 | 5,695 | 1,671 | 1,281 |
+| \`button-group\` | 32,666 | 11,956 | 10,770 | 4,897 | 1,448 | 1,021 |
+| \`callout\` | 40,054 | 15,113 | 13,581 | 2,875 | 978 | 561 |
+| \`canvas\` | 179,748 | 56,211 | 49,040 | 86,218 | 25,126 | 20,782 |
+| \`card\` | 28,502 | 10,629 | 9,573 | 2,074 | 604 | 427 |
+| \`carousel\` | 49,408 | 17,356 | 15,663 | 15,477 | 4,228 | 3,212 |
+| \`chat\` | 141,862 | 46,119 | 40,754 | 44,186 | 12,178 | 9,824 |
+| \`checkbox\` | 45,880 | 15,551 | 13,986 | 3,154 | 968 | 531 |
+| \`checkbox-group\` | 53,063 | 17,409 | 15,636 | 8,351 | 2,348 | 1,637 |
+| \`code\` | 24,987 | 9,594 | 8,634 | 136 | 56 | 26 |
+| \`code-block\` | 113,571 | 38,287 | 34,058 | 40,487 | 11,876 | 9,671 |
+| \`code-editor\` | 101,908 | 31,761 | 28,181 | 37,299 | 9,458 | 7,537 |
+| \`code-input\` | 65,819 | 22,562 | 20,231 | 10,559 | 3,404 | 2,667 |
+| \`color-input\` | 149,663 | 47,505 | 41,673 | 56,692 | 14,677 | 11,731 |
+| \`color-picker\` | 111,024 | 35,190 | 31,228 | 48,828 | 13,094 | 10,515 |
+| \`combobox\` | 150,681 | 47,679 | 42,037 | 37,524 | 9,357 | 7,554 |
+| \`command\` | 127,865 | 40,054 | 35,177 | 38,275 | 9,850 | 7,958 |
+| \`copy-button\` | 88,951 | 30,220 | 26,967 | 19,839 | 5,288 | 4,277 |
+| \`data-table\` | 221,226 | 67,370 | 58,093 | 93,818 | 24,748 | 19,768 |
+| \`date-input\` | 147,341 | 46,050 | 40,733 | 38,735 | 9,429 | 7,512 |
+| \`date-picker\` | 67,521 | 22,828 | 20,640 | 20,821 | 5,655 | 4,443 |
+| \`description-list\` | 27,583 | 10,321 | 9,292 | 1,554 | 472 | 276 |
+| \`device-screen\` | 122,587 | 38,605 | 34,154 | 46,259 | 11,425 | 8,971 |
+| \`dialog\` | 43,110 | 15,224 | 13,683 | 6,075 | 1,764 | 1,350 |
+| \`divider\` | 28,042 | 10,561 | 9,492 | 1,410 | 470 | 260 |
+| \`donut-chart\` | 104,235 | 35,856 | 32,052 | 15,091 | 4,581 | 3,810 |
+| \`drawer\` | 47,598 | 16,648 | 14,967 | 7,778 | 2,247 | 1,726 |
+| \`drilldown\` | 48,006 | 16,533 | 14,855 | 10,059 | 2,751 | 2,044 |
+| \`editor\` | 178,365 | 54,257 | 47,093 | 83,366 | 20,555 | 16,494 |
+| \`empty\` | 29,125 | 10,883 | 9,801 | 1,974 | 617 | 573 |
+| \`file-input\` | 63,427 | 21,818 | 19,663 | 13,323 | 4,171 | 3,269 |
+| \`filter-input\` | 113,201 | 37,956 | 33,740 | 21,667 | 6,137 | 4,804 |
+| \`find\` | 78,192 | 25,912 | 23,118 | 21,809 | 5,725 | 4,648 |
+| \`format-date\` | 35,311 | 12,970 | 11,694 | 4,462 | 1,232 | 956 |
+| \`graph\` | 146,422 | 46,082 | 40,298 | 40,018 | 10,961 | 8,725 |
+| \`heatmap\` | 113,308 | 38,184 | 34,075 | 19,434 | 5,625 | 4,515 |
+| \`icon\` | 108,395 | 36,072 | 30,978 | 78,520 | 25,847 | 20,937 |
+| \`icon-button\` | 41,708 | 14,700 | 13,261 | 5,802 | 1,690 | 1,221 |
+| \`image\` | 30,568 | 11,189 | 10,097 | 3,918 | 1,148 | 885 |
+| \`input\` | 62,380 | 21,324 | 19,014 | 7,350 | 2,348 | 1,635 |
+| \`kbd\` | 34,229 | 12,745 | 11,457 | 3,926 | 1,223 | 797 |
+| \`legend\` | 44,093 | 15,635 | 14,129 | 2,764 | 880 | 700 |
+| \`lightbox\` | 60,994 | 20,491 | 18,414 | 16,839 | 4,590 | 3,477 |
+| \`line-chart\` | 113,879 | 39,280 | 35,063 | 17,183 | 5,116 | 4,210 |
+| \`list\` | 67,337 | 23,179 | 20,653 | 15,580 | 4,413 | 3,380 |
+| \`listbox\` | 94,196 | 31,117 | 27,549 | 16,516 | 4,661 | 3,574 |
+| \`loader\` | 31,541 | 11,771 | 10,632 | 2,875 | 935 | 643 |
+| \`log\` | 89,716 | 30,000 | 26,857 | 40,360 | 12,455 | 10,428 |
+| \`map\` | 159,902 | 47,425 | 40,946 | 63,297 | 15,403 | 11,765 |
+| \`markdown\` | 140,272 | 47,304 | 41,835 | 62,608 | 19,520 | 16,181 |
+| \`megamenu\` | 65,596 | 23,361 | 20,892 | 8,742 | 2,377 | 1,651 |
+| \`menu\` | 106,453 | 34,786 | 30,995 | 32,752 | 8,412 | 6,802 |
+| \`meter\` | 38,842 | 14,273 | 12,906 | 6,317 | 1,806 | 1,458 |
+| \`motion-toggle\` | 30,535 | 11,627 | 10,462 | 1,539 | 538 | 222 |
+| \`navigation\` | 37,912 | 13,969 | 12,528 | 3,497 | 1,143 | 792 |
+| \`notifications\` | 64,044 | 21,590 | 19,442 | 18,695 | 5,087 | 4,084 |
+| \`number-input\` | 61,693 | 20,615 | 18,576 | 13,492 | 3,618 | 2,620 |
+| \`object-inspector\` | 124,337 | 41,342 | 36,581 | 37,188 | 10,583 | 8,522 |
+| \`option\` | 31,108 | 11,303 | 10,187 | 4,449 | 1,159 | 769 |
+| \`outline\` | 41,449 | 14,805 | 13,355 | 10,620 | 3,123 | 2,394 |
+| \`pagination\` | 154,896 | 49,153 | 43,004 | 47,321 | 12,189 | 9,605 |
+| \`pin-input\` | 52,973 | 18,297 | 16,471 | 7,187 | 2,336 | 1,744 |
+| \`popover\` | 69,330 | 24,448 | 21,878 | 6,480 | 1,830 | 1,258 |
+| \`progress\` | 33,407 | 12,448 | 11,243 | 3,075 | 920 | 690 |
+| \`qr-code\` | 47,683 | 18,137 | 16,367 | 16,927 | 6,231 | 5,202 |
+| \`quote\` | 27,206 | 10,426 | 9,378 | 1,205 | 491 | 340 |
+| \`radio\` | 47,436 | 16,068 | 14,448 | 3,799 | 1,202 | 721 |
+| \`rating\` | 56,262 | 19,297 | 17,333 | 8,272 | 2,503 | 1,806 |
+| \`scatter-chart\` | 110,294 | 37,893 | 33,793 | 20,721 | 6,415 | 5,193 |
+| \`scroll-area\` | 35,923 | 12,851 | 11,556 | 9,027 | 2,665 | 2,044 |
+| \`select\` | 133,127 | 43,582 | 38,339 | 27,346 | 7,308 | 5,821 |
+| \`shortcut-overlay\` | 54,311 | 19,106 | 17,122 | 11,631 | 3,450 | 2,645 |
+| \`skeleton\` | 26,984 | 10,208 | 9,193 | 954 | 342 | 259 |
+| \`skip-link\` | 28,768 | 10,917 | 9,827 | 1,334 | 482 | 289 |
+| \`slider\` | 59,265 | 19,843 | 17,919 | 13,667 | 3,834 | 2,926 |
+| \`sparkline\` | 53,331 | 19,123 | 17,302 | 5,968 | 2,051 | 1,572 |
+| \`spatial-bar-chart\` | 125,627 | 43,813 | 38,931 | 28,914 | 9,736 | 8,062 |
+| \`spatial-heatmap\` | 128,676 | 43,336 | 38,620 | 32,104 | 9,616 | 7,778 |
+| \`spatial-ribbon-chart\` | 116,031 | 40,303 | 35,889 | 21,327 | 7,069 | 5,791 |
+| \`spatial-scatter-chart\` | 114,102 | 39,465 | 35,179 | 19,459 | 6,272 | 5,037 |
+| \`spatial-surface-chart\` | 117,034 | 40,688 | 36,245 | 22,328 | 7,450 | 6,125 |
+| \`spatial-treemap\` | 118,137 | 41,301 | 36,749 | 21,742 | 7,332 | 5,976 |
+| \`speed-dial\` | 74,018 | 26,161 | 23,398 | 11,107 | 2,920 | 2,205 |
+| \`splitter\` | 49,870 | 17,059 | 15,405 | 15,021 | 3,904 | 3,156 |
+| \`stat\` | 30,366 | 11,365 | 10,271 | 2,291 | 723 | 417 |
+| \`steps\` | 60,474 | 20,856 | 18,679 | 14,540 | 4,057 | 3,081 |
+| \`switch\` | 44,845 | 15,379 | 13,815 | 1,839 | 647 | 352 |
+| \`table\` | 125,871 | 39,017 | 34,309 | 45,249 | 12,336 | 10,011 |
+| \`tabs\` | 51,456 | 17,513 | 15,733 | 10,607 | 2,805 | 2,075 |
+| \`tag\` | 47,412 | 17,109 | 15,426 | 8,490 | 2,486 | 1,887 |
+| \`terminal\` | 141,582 | 44,590 | 39,304 | 54,204 | 13,424 | 10,842 |
+| \`textarea\` | 60,120 | 20,534 | 18,465 | 5,642 | 1,649 | 1,148 |
+| \`time-input\` | 187,214 | 58,094 | 50,516 | 50,348 | 12,609 | 10,049 |
+| \`time-picker\` | 117,251 | 37,109 | 32,751 | 35,292 | 9,374 | 7,440 |
+| \`timeline\` | 36,581 | 13,679 | 12,364 | 4,128 | 1,187 | 816 |
+| \`toast\` | 74,603 | 25,177 | 22,489 | 20,050 | 5,576 | 4,441 |
+| \`toggle\` | 51,200 | 16,980 | 15,343 | 6,038 | 1,776 | 1,401 |
+| \`toolbar\` | 37,383 | 13,551 | 12,197 | 1,406 | 491 | 426 |
+| \`tooltip\` | 65,000 | 22,983 | 20,661 | 8,862 | 2,422 | 1,917 |
+| \`tour\` | 90,755 | 30,739 | 27,492 | 21,104 | 5,653 | 4,432 |
+| \`tree\` | 72,738 | 24,341 | 21,768 | 17,539 | 4,871 | 3,911 |
+| \`trend\` | 35,034 | 13,356 | 12,086 | 3,577 | 1,128 | 832 |
+| \`video\` | 152,045 | 46,721 | 41,237 | 69,404 | 17,300 | 13,981 |
+| \`video-playlist\` | 137,298 | 43,792 | 38,753 | 45,878 | 11,730 | 9,454 |
+| \`virtual-list\` | 72,396 | 23,976 | 21,628 | 25,472 | 7,518 | 6,222 |
 
 ### Styled tier
 
@@ -5522,128 +5532,128 @@ 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\` | 40,217 | 14,216 | 12,771 | 8,788 | 2,386 | 1,949 |
-| \`announcement\` | 46,117 | 15,939 | 14,388 | 9,382 | 2,454 | 1,841 |
-| \`app-header\` | 42,621 | 14,828 | 13,355 | 11,246 | 3,024 | 2,413 |
-| \`area-chart\` | 120,454 | 40,557 | 36,210 | 24,355 | 6,665 | 5,362 |
-| \`aura\` | 64,184 | 21,751 | 19,448 | 32,004 | 9,687 | 8,066 |
-| \`avatar\` | 38,970 | 14,169 | 12,846 | 6,964 | 1,980 | 1,569 |
-| \`badge\` | 37,710 | 13,446 | 12,137 | 8,435 | 2,132 | 1,640 |
-| \`bar-chart\` | 135,311 | 44,252 | 39,501 | 38,673 | 10,242 | 8,459 |
-| \`blockquote\` | 31,018 | 11,503 | 10,350 | 4,608 | 1,410 | 1,045 |
-| \`breadcrumbs\` | 49,213 | 16,960 | 15,278 | 14,918 | 3,777 | 3,023 |
-| \`button\` | 49,256 | 16,177 | 14,575 | 13,332 | 3,195 | 2,520 |
-| \`button-group\` | 36,163 | 12,635 | 11,427 | 8,378 | 2,144 | 1,715 |
-| \`callout\` | 43,845 | 16,045 | 14,425 | 6,648 | 1,921 | 1,523 |
-| \`canvas\` | 214,020 | 61,607 | 53,958 | 120,476 | 30,721 | 25,551 |
-| \`card\` | 32,401 | 11,628 | 10,485 | 5,958 | 1,608 | 1,186 |
-| \`carousel\` | 59,895 | 19,118 | 17,343 | 25,946 | 6,076 | 4,784 |
-| \`chat\` | 179,720 | 54,378 | 48,038 | 79,359 | 19,649 | 16,244 |
-| \`checkbox\` | 52,190 | 16,959 | 15,262 | 9,617 | 2,489 | 1,873 |
-| \`checkbox-group\` | 60,104 | 18,966 | 16,997 | 15,554 | 3,970 | 2,975 |
-| \`code\` | 25,842 | 9,897 | 8,921 | 972 | 368 | 332 |
-| \`code-block\` | 141,674 | 42,399 | 37,636 | 68,566 | 16,128 | 13,162 |
-| \`code-editor\` | 132,746 | 35,888 | 31,796 | 68,302 | 13,907 | 11,271 |
-| \`code-input\` | 80,798 | 26,902 | 24,128 | 22,581 | 6,880 | 5,593 |
-| \`color-input\` | 193,253 | 53,854 | 47,241 | 100,452 | 21,025 | 17,340 |
-| \`color-picker\` | 149,088 | 40,760 | 36,110 | 87,075 | 18,841 | 15,423 |
-| \`combobox\` | 177,485 | 54,011 | 47,518 | 61,349 | 14,871 | 12,078 |
-| \`command\` | 154,679 | 46,715 | 40,878 | 61,962 | 15,656 | 12,946 |
-| \`copy-button\` | 104,615 | 32,690 | 29,168 | 35,479 | 7,882 | 6,290 |
-| \`data-table\` | 266,891 | 76,831 | 66,098 | 136,619 | 33,428 | 26,879 |
-| \`date-input\` | 168,543 | 49,731 | 44,123 | 60,091 | 13,240 | 10,812 |
-| \`date-picker\` | 75,396 | 24,195 | 21,829 | 28,847 | 7,090 | 5,652 |
-| \`description-list\` | 30,533 | 11,064 | 9,964 | 4,493 | 1,256 | 861 |
-| \`device-screen\` | 143,681 | 42,193 | 37,335 | 67,336 | 15,071 | 12,097 |
-| \`dialog\` | 48,868 | 16,563 | 14,889 | 11,811 | 3,140 | 2,449 |
-| \`divider\` | 30,340 | 11,173 | 10,051 | 3,691 | 1,114 | 864 |
-| \`donut-chart\` | 115,589 | 38,201 | 34,143 | 26,438 | 7,005 | 5,753 |
-| \`drawer\` | 53,528 | 18,048 | 16,223 | 13,686 | 3,699 | 2,982 |
-| \`drilldown\` | 53,685 | 17,818 | 16,001 | 15,727 | 4,025 | 3,009 |
-| \`editor\` | 222,769 | 60,471 | 52,613 | 127,752 | 26,927 | 22,040 |
-| \`empty\` | 30,432 | 11,353 | 10,212 | 3,263 | 1,091 | 682 |
-| \`file-input\` | 74,781 | 24,151 | 21,735 | 24,828 | 6,562 | 5,312 |
-| \`filter-input\` | 134,913 | 43,377 | 38,557 | 40,410 | 10,818 | 8,932 |
-| \`find\` | 102,866 | 29,322 | 26,061 | 46,485 | 9,269 | 7,357 |
-| \`flex\` | 30,430 | 10,756 | 9,677 | 4,761 | 1,034 | 920 |
-| \`format-date\` | 35,565 | 13,094 | 11,803 | 4,698 | 1,346 | 1,072 |
-| \`graph\` | 175,865 | 50,598 | 44,166 | 69,440 | 15,619 | 12,476 |
-| \`grid\` | 31,880 | 11,440 | 10,346 | 5,650 | 1,435 | 1,124 |
-| \`heatmap\` | 123,013 | 40,318 | 35,940 | 29,119 | 7,761 | 6,347 |
-| \`icon\` | 110,428 | 36,672 | 31,498 | 80,371 | 26,383 | 21,547 |
-| \`icon-button\` | 53,001 | 16,399 | 14,761 | 17,079 | 3,442 | 2,708 |
-| \`image\` | 31,876 | 11,613 | 10,463 | 5,207 | 1,568 | 1,223 |
-| \`input\` | 77,465 | 25,726 | 22,999 | 19,462 | 5,843 | 4,601 |
-| \`kbd\` | 36,435 | 13,329 | 11,949 | 6,116 | 1,823 | 1,325 |
-| \`legend\` | 49,334 | 16,920 | 15,249 | 7,866 | 2,167 | 1,688 |
-| \`lightbox\` | 67,279 | 21,825 | 19,630 | 23,114 | 5,887 | 4,617 |
-| \`line-chart\` | 126,626 | 41,929 | 37,434 | 29,914 | 7,842 | 6,412 |
-| \`list\` | 73,668 | 24,659 | 22,024 | 21,897 | 5,911 | 4,639 |
-| \`listbox\` | 110,173 | 35,677 | 31,565 | 29,372 | 8,308 | 6,614 |
-| \`loader\` | 34,424 | 12,530 | 11,320 | 5,740 | 1,717 | 1,226 |
-| \`log\` | 106,381 | 33,038 | 29,656 | 57,028 | 15,634 | 13,122 |
-| \`map\` | 206,709 | 54,490 | 47,085 | 110,092 | 22,336 | 17,887 |
-| \`markdown\` | 172,399 | 52,068 | 46,065 | 94,719 | 24,397 | 20,211 |
-| \`megamenu\` | 70,645 | 24,511 | 21,956 | 13,773 | 3,534 | 2,809 |
-| \`menu\` | 118,673 | 37,197 | 33,133 | 44,956 | 10,909 | 8,874 |
-| \`meter\` | 47,432 | 16,009 | 14,478 | 14,899 | 3,608 | 2,985 |
-| \`motion-toggle\` | 32,169 | 12,106 | 10,861 | 3,155 | 1,034 | 713 |
-| \`navigation\` | 41,636 | 14,818 | 13,264 | 7,206 | 1,989 | 1,460 |
-| \`notifications\` | 77,524 | 24,119 | 21,694 | 32,161 | 7,640 | 6,139 |
-| \`number-input\` | 66,501 | 21,753 | 19,540 | 18,455 | 4,804 | 3,746 |
-| \`object-inspector\` | 144,379 | 44,497 | 39,352 | 57,202 | 13,805 | 11,243 |
-| \`option\` | 34,170 | 12,241 | 11,032 | 7,503 | 2,125 | 1,601 |
-| \`orb\` | 40,942 | 15,257 | 13,794 | 9,996 | 3,686 | 3,096 |
-| \`outline\` | 47,889 | 16,157 | 14,576 | 17,042 | 4,458 | 3,486 |
-| \`pagination\` | 183,162 | 55,752 | 48,773 | 72,624 | 18,050 | 14,466 |
-| \`pin-input\` | 56,180 | 19,131 | 17,213 | 10,546 | 3,243 | 2,389 |
-| \`popover\` | 73,236 | 25,367 | 22,699 | 10,368 | 2,741 | 2,046 |
-| \`progress\` | 40,587 | 14,105 | 12,770 | 10,242 | 2,576 | 2,223 |
-| \`qr-code\` | 49,283 | 18,619 | 16,832 | 18,509 | 6,705 | 5,598 |
-| \`quote\` | 27,762 | 10,613 | 9,550 | 1,744 | 693 | 426 |
-| \`radio\` | 55,036 | 17,528 | 15,711 | 11,564 | 2,751 | 1,966 |
-| \`rating\` | 60,021 | 20,445 | 18,366 | 12,186 | 3,719 | 2,733 |
-| \`sandbox\` | 212,690 | 61,609 | 53,163 | 149,207 | 39,581 | 32,104 |
-| \`scatter-chart\` | 121,046 | 40,258 | 36,023 | 31,457 | 8,877 | 7,154 |
-| \`scroll-area\` | 43,866 | 14,232 | 12,824 | 16,953 | 4,137 | 3,145 |
-| \`select\` | 153,820 | 48,899 | 42,984 | 44,913 | 11,781 | 9,542 |
-| \`shortcut-overlay\` | 62,103 | 20,798 | 18,686 | 19,408 | 5,155 | 4,139 |
-| \`skeleton\` | 30,931 | 11,286 | 10,172 | 4,716 | 1,376 | 1,124 |
-| \`skip-link\` | 30,338 | 11,428 | 10,251 | 2,887 | 995 | 692 |
-| \`slider\` | 74,143 | 22,101 | 19,940 | 28,691 | 6,248 | 4,980 |
-| \`sparkline\` | 58,788 | 20,432 | 18,464 | 11,406 | 3,399 | 2,684 |
-| \`spatial-bar-chart\` | 137,900 | 46,373 | 41,235 | 41,162 | 12,320 | 10,226 |
-| \`spatial-heatmap\` | 139,798 | 45,725 | 40,679 | 43,210 | 12,061 | 9,914 |
-| \`spatial-ribbon-chart\` | 126,327 | 42,547 | 37,868 | 31,604 | 9,347 | 7,736 |
-| \`spatial-scatter-chart\` | 124,456 | 41,661 | 37,153 | 29,790 | 8,490 | 6,903 |
-| \`spatial-surface-chart\` | 126,850 | 42,829 | 38,230 | 32,127 | 9,621 | 8,054 |
-| \`spatial-treemap\` | 128,537 | 43,581 | 38,763 | 32,121 | 9,646 | 8,048 |
-| \`speed-dial\` | 81,060 | 27,548 | 24,695 | 18,133 | 4,355 | 3,481 |
-| \`splitter\` | 56,008 | 18,111 | 16,381 | 21,147 | 4,992 | 3,946 |
-| \`stat\` | 33,246 | 12,062 | 10,901 | 5,160 | 1,480 | 1,084 |
-| \`steps\` | 75,697 | 23,728 | 21,242 | 29,752 | 6,984 | 5,628 |
-| \`strands\` | 68,950 | 25,204 | 22,464 | 39,058 | 13,870 | 12,070 |
-| \`switch\` | 49,022 | 16,458 | 14,793 | 6,169 | 1,788 | 1,287 |
-| \`table\` | 143,467 | 41,990 | 36,999 | 63,012 | 15,518 | 12,705 |
-| \`tabs\` | 61,660 | 19,580 | 17,602 | 20,808 | 4,929 | 3,984 |
-| \`tag\` | 51,985 | 18,223 | 16,438 | 13,051 | 3,577 | 2,838 |
-| \`terminal\` | 175,850 | 49,377 | 43,520 | 88,452 | 18,376 | 14,870 |
-| \`text\` | 33,404 | 11,509 | 10,312 | 7,178 | 1,458 | 1,082 |
-| \`textarea\` | 75,690 | 24,957 | 22,436 | 18,254 | 5,256 | 4,217 |
-| \`time-input\` | 222,800 | 65,638 | 57,064 | 83,073 | 19,366 | 15,826 |
-| \`time-picker\` | 140,696 | 42,811 | 37,697 | 55,889 | 14,298 | 11,723 |
-| \`timeline\` | 43,470 | 15,146 | 13,674 | 11,014 | 2,672 | 2,111 |
-| \`toast\` | 89,991 | 28,137 | 25,122 | 35,434 | 8,547 | 6,955 |
-| \`toggle\` | 55,883 | 18,168 | 16,375 | 10,882 | 3,031 | 2,377 |
-| \`toolbar\` | 40,062 | 14,020 | 12,628 | 4,068 | 1,004 | 636 |
-| \`tooltip\` | 67,881 | 23,741 | 21,350 | 11,725 | 3,188 | 2,478 |
-| \`tour\` | 101,987 | 32,857 | 29,382 | 32,330 | 7,798 | 6,270 |
-| \`tree\` | 81,748 | 26,349 | 23,523 | 26,526 | 6,926 | 5,610 |
-| \`trend\` | 36,950 | 13,914 | 12,545 | 5,472 | 1,648 | 1,281 |
-| \`video\` | 173,841 | 50,677 | 44,756 | 91,177 | 21,113 | 17,461 |
-| \`video-playlist\` | 154,530 | 47,006 | 41,558 | 63,105 | 14,987 | 12,337 |
-| \`virtual-list\` | 74,388 | 24,484 | 22,116 | 27,449 | 8,044 | 6,742 |
-| \`voice-level\` | 38,396 | 14,077 | 12,735 | 7,526 | 2,475 | 1,952 |
+| \`accordion\` | 40,600 | 14,334 | 12,888 | 9,171 | 2,497 | 1,910 |
+| \`announcement\` | 46,675 | 16,077 | 14,492 | 9,940 | 2,595 | 2,014 |
+| \`app-header\` | 43,126 | 14,954 | 13,451 | 11,751 | 3,151 | 2,432 |
+| \`area-chart\` | 121,093 | 40,629 | 36,210 | 24,994 | 6,721 | 5,472 |
+| \`aura\` | 64,208 | 21,759 | 19,457 | 32,028 | 9,693 | 8,035 |
+| \`avatar\` | 38,970 | 14,169 | 12,846 | 6,964 | 1,976 | 1,565 |
+| \`badge\` | 37,710 | 13,446 | 12,155 | 8,435 | 2,127 | 1,645 |
+| \`bar-chart\` | 135,950 | 44,333 | 39,456 | 39,312 | 10,339 | 8,515 |
+| \`blockquote\` | 31,018 | 11,503 | 10,350 | 4,608 | 1,428 | 1,077 |
+| \`breadcrumbs\` | 49,161 | 16,991 | 15,346 | 14,866 | 3,803 | 3,181 |
+| \`button\` | 51,030 | 16,394 | 14,782 | 15,106 | 3,437 | 2,606 |
+| \`button-group\` | 37,634 | 12,817 | 11,530 | 9,849 | 2,312 | 1,780 |
+| \`callout\` | 44,389 | 16,178 | 14,565 | 7,192 | 2,043 | 1,564 |
+| \`canvas\` | 215,795 | 61,865 | 54,178 | 122,251 | 30,991 | 25,725 |
+| \`card\` | 32,549 | 11,648 | 10,478 | 6,106 | 1,627 | 1,316 |
+| \`carousel\` | 60,368 | 19,217 | 17,432 | 26,419 | 6,153 | 4,977 |
+| \`chat\` | 181,657 | 54,542 | 48,170 | 81,296 | 19,801 | 16,268 |
+| \`checkbox\` | 53,351 | 17,195 | 15,450 | 10,607 | 2,652 | 1,970 |
+| \`checkbox-group\` | 61,265 | 19,201 | 17,201 | 16,544 | 4,143 | 3,163 |
+| \`code\` | 25,799 | 9,891 | 8,913 | 929 | 370 | 265 |
+| \`code-block\` | 143,335 | 42,639 | 37,815 | 70,227 | 16,338 | 13,361 |
+| \`code-editor\` | 138,604 | 36,527 | 32,373 | 73,989 | 14,489 | 11,702 |
+| \`code-input\` | 81,581 | 27,048 | 24,259 | 23,193 | 6,957 | 5,727 |
+| \`color-input\` | 198,405 | 54,552 | 47,858 | 105,421 | 21,620 | 17,778 |
+| \`color-picker\` | 153,625 | 41,385 | 36,641 | 91,429 | 19,362 | 15,878 |
+| \`combobox\` | 178,926 | 54,255 | 47,765 | 62,619 | 15,047 | 12,240 |
+| \`command\` | 155,896 | 46,983 | 41,226 | 63,008 | 15,878 | 13,078 |
+| \`copy-button\` | 106,147 | 32,910 | 29,359 | 37,011 | 8,097 | 6,485 |
+| \`data-table\` | 271,191 | 77,433 | 66,560 | 140,748 | 34,007 | 27,400 |
+| \`date-input\` | 170,564 | 50,063 | 44,450 | 61,929 | 13,503 | 11,101 |
+| \`date-picker\` | 76,199 | 24,403 | 22,029 | 29,479 | 7,242 | 5,836 |
+| \`description-list\` | 30,533 | 11,064 | 9,991 | 4,493 | 1,242 | 949 |
+| \`device-screen\` | 145,112 | 42,411 | 37,492 | 68,767 | 15,273 | 12,202 |
+| \`dialog\` | 49,001 | 16,607 | 14,965 | 11,944 | 3,173 | 2,520 |
+| \`divider\` | 30,340 | 11,172 | 10,047 | 3,691 | 1,120 | 872 |
+| \`donut-chart\` | 116,228 | 38,270 | 34,223 | 27,077 | 7,076 | 5,772 |
+| \`drawer\` | 53,803 | 18,099 | 16,284 | 13,961 | 3,737 | 3,079 |
+| \`drilldown\` | 53,845 | 17,855 | 16,023 | 15,887 | 4,054 | 3,169 |
+| \`editor\` | 228,892 | 61,095 | 53,129 | 133,875 | 27,574 | 22,529 |
+| \`empty\` | 30,432 | 11,353 | 10,212 | 3,263 | 1,087 | 749 |
+| \`file-input\` | 75,855 | 24,371 | 21,965 | 25,731 | 6,707 | 5,425 |
+| \`filter-input\` | 136,421 | 43,728 | 38,855 | 41,747 | 11,105 | 9,139 |
+| \`find\` | 107,805 | 29,817 | 26,511 | 51,429 | 9,819 | 7,898 |
+| \`flex\` | 30,430 | 10,756 | 9,707 | 4,761 | 1,028 | 764 |
+| \`format-date\` | 35,565 | 13,094 | 11,839 | 4,698 | 1,352 | 1,044 |
+| \`graph\` | 178,021 | 50,865 | 44,428 | 71,596 | 15,869 | 12,803 |
+| \`grid\` | 31,880 | 11,439 | 10,342 | 5,650 | 1,438 | 1,267 |
+| \`heatmap\` | 122,989 | 40,321 | 35,919 | 29,095 | 7,750 | 6,305 |
+| \`icon\` | 110,428 | 36,672 | 31,490 | 80,371 | 26,383 | 21,306 |
+| \`icon-button\` | 54,438 | 16,620 | 14,942 | 18,516 | 3,642 | 2,912 |
+| \`image\` | 32,388 | 11,869 | 10,678 | 5,714 | 1,809 | 1,556 |
+| \`input\` | 78,473 | 25,926 | 23,129 | 20,299 | 5,974 | 4,744 |
+| \`kbd\` | 36,435 | 13,329 | 11,949 | 6,116 | 1,815 | 1,404 |
+| \`legend\` | 49,997 | 16,998 | 15,281 | 8,529 | 2,243 | 1,703 |
+| \`lightbox\` | 67,329 | 21,838 | 19,602 | 23,164 | 5,917 | 4,611 |
+| \`line-chart\` | 127,265 | 42,007 | 37,486 | 30,553 | 7,917 | 6,582 |
+| \`list\` | 73,821 | 24,719 | 22,074 | 22,050 | 5,973 | 4,818 |
+| \`listbox\` | 110,742 | 35,801 | 31,681 | 29,770 | 8,381 | 6,738 |
+| \`loader\` | 34,424 | 12,530 | 11,320 | 5,740 | 1,693 | 1,405 |
+| \`log\` | 107,047 | 33,190 | 29,784 | 57,694 | 15,780 | 13,216 |
+| \`map\` | 208,581 | 54,758 | 47,294 | 111,964 | 22,649 | 18,240 |
+| \`markdown\` | 174,602 | 52,374 | 46,355 | 96,924 | 24,684 | 20,620 |
+| \`megamenu\` | 70,840 | 24,557 | 22,009 | 13,968 | 3,578 | 2,820 |
+| \`menu\` | 118,652 | 37,203 | 33,165 | 44,935 | 10,897 | 8,895 |
+| \`meter\` | 47,448 | 16,021 | 14,486 | 14,914 | 3,596 | 2,970 |
+| \`motion-toggle\` | 32,193 | 12,119 | 10,871 | 3,179 | 1,034 | 783 |
+| \`navigation\` | 41,636 | 14,818 | 13,266 | 7,206 | 1,970 | 1,544 |
+| \`notifications\` | 78,786 | 24,298 | 21,861 | 33,423 | 7,860 | 6,392 |
+| \`number-input\` | 67,521 | 21,947 | 19,701 | 19,310 | 4,939 | 3,739 |
+| \`object-inspector\` | 146,083 | 44,742 | 39,547 | 58,906 | 14,058 | 11,411 |
+| \`option\` | 34,685 | 12,348 | 11,143 | 8,019 | 2,208 | 1,694 |
+| \`orb\` | 40,942 | 15,257 | 13,793 | 9,996 | 3,673 | 3,075 |
+| \`outline\` | 47,977 | 16,188 | 14,615 | 17,130 | 4,487 | 3,617 |
+| \`pagination\` | 186,601 | 56,219 | 49,160 | 75,892 | 18,444 | 14,888 |
+| \`pin-input\` | 56,548 | 19,258 | 17,335 | 10,743 | 3,309 | 2,525 |
+| \`popover\` | 73,176 | 25,353 | 22,698 | 10,308 | 2,725 | 2,039 |
+| \`progress\` | 40,587 | 14,105 | 12,770 | 10,242 | 2,580 | 2,191 |
+| \`qr-code\` | 49,283 | 18,619 | 16,827 | 18,509 | 6,707 | 5,582 |
+| \`quote\` | 27,762 | 10,613 | 9,534 | 1,744 | 683 | 529 |
+| \`radio\` | 55,902 | 17,740 | 15,918 | 12,259 | 2,875 | 2,192 |
+| \`rating\` | 60,614 | 20,592 | 18,531 | 12,608 | 3,786 | 2,884 |
+| \`sandbox\` | 216,655 | 62,180 | 53,446 | 153,172 | 40,132 | 32,562 |
+| \`scatter-chart\` | 121,685 | 40,323 | 35,962 | 32,096 | 8,931 | 7,310 |
+| \`scroll-area\` | 43,914 | 14,246 | 12,843 | 17,001 | 4,127 | 3,298 |
+| \`select\` | 154,991 | 49,124 | 43,184 | 45,913 | 11,930 | 9,640 |
+| \`shortcut-overlay\` | 62,236 | 20,843 | 18,755 | 19,541 | 5,202 | 4,242 |
+| \`skeleton\` | 30,931 | 11,286 | 10,172 | 4,716 | 1,374 | 1,132 |
+| \`skip-link\` | 30,338 | 11,428 | 10,251 | 2,887 | 998 | 719 |
+| \`slider\` | 75,152 | 22,320 | 20,144 | 29,529 | 6,410 | 5,172 |
+| \`sparkline\` | 58,829 | 20,447 | 18,463 | 11,447 | 3,392 | 2,800 |
+| \`spatial-bar-chart\` | 138,709 | 46,486 | 41,319 | 41,972 | 12,435 | 10,378 |
+| \`spatial-heatmap\` | 139,774 | 45,715 | 40,658 | 43,190 | 12,067 | 10,057 |
+| \`spatial-ribbon-chart\` | 127,017 | 42,634 | 37,941 | 32,302 | 9,444 | 7,825 |
+| \`spatial-scatter-chart\` | 125,146 | 41,751 | 37,143 | 30,483 | 8,579 | 6,990 |
+| \`spatial-surface-chart\` | 126,901 | 42,847 | 38,247 | 32,177 | 9,627 | 8,049 |
+| \`spatial-treemap\` | 129,227 | 43,665 | 38,859 | 32,816 | 9,730 | 8,095 |
+| \`speed-dial\` | 81,227 | 27,567 | 24,682 | 18,300 | 4,375 | 3,532 |
+| \`splitter\` | 56,486 | 18,178 | 16,437 | 21,625 | 5,047 | 3,987 |
+| \`stat\` | 33,307 | 12,096 | 10,939 | 5,221 | 1,504 | 1,090 |
+| \`steps\` | 77,940 | 24,019 | 21,481 | 31,995 | 7,276 | 5,946 |
+| \`strands\` | 68,951 | 25,199 | 22,450 | 39,059 | 13,862 | 12,041 |
+| \`switch\` | 50,303 | 16,733 | 15,038 | 7,279 | 2,021 | 1,730 |
+| \`table\` | 145,996 | 42,519 | 37,439 | 65,370 | 15,966 | 13,105 |
+| \`tabs\` | 62,387 | 19,678 | 17,707 | 21,535 | 5,016 | 4,027 |
+| \`tag\` | 52,308 | 18,329 | 16,541 | 13,374 | 3,681 | 2,789 |
+| \`terminal\` | 181,074 | 49,926 | 43,999 | 93,676 | 18,901 | 15,365 |
+| \`text\` | 33,428 | 11,521 | 10,321 | 7,202 | 1,486 | 1,158 |
+| \`textarea\` | 76,541 | 25,139 | 22,603 | 18,934 | 5,352 | 4,426 |
+| \`time-input\` | 224,986 | 66,011 | 57,400 | 85,076 | 19,677 | 16,129 |
+| \`time-picker\` | 141,895 | 43,036 | 37,915 | 56,909 | 14,479 | 11,827 |
+| \`timeline\` | 43,501 | 15,167 | 13,674 | 11,045 | 2,685 | 2,190 |
+| \`toast\` | 92,525 | 28,483 | 25,418 | 37,969 | 8,918 | 7,337 |
+| \`toggle\` | 56,561 | 18,350 | 16,546 | 11,389 | 3,145 | 2,471 |
+| \`toolbar\` | 41,311 | 14,252 | 12,846 | 5,317 | 1,210 | 915 |
+| \`tooltip\` | 67,875 | 23,746 | 21,328 | 11,719 | 3,179 | 2,556 |
+| \`tour\` | 103,763 | 33,065 | 29,540 | 34,100 | 8,031 | 6,513 |
+| \`tree\` | 82,083 | 26,421 | 23,571 | 26,861 | 6,982 | 5,746 |
+| \`trend\` | 36,950 | 13,914 | 12,545 | 5,472 | 1,650 | 1,247 |
+| \`video\` | 174,654 | 50,781 | 44,844 | 91,996 | 21,206 | 17,558 |
+| \`video-playlist\` | 154,474 | 47,022 | 41,630 | 63,049 | 15,002 | 12,274 |
+| \`virtual-list\` | 74,438 | 24,495 | 22,117 | 27,499 | 8,047 | 6,569 |
+| \`voice-level\` | 38,397 | 14,073 | 12,743 | 7,527 | 2,468 | 2,057 |
 
 ## What an install adds to \`node_modules\`
 
@@ -5656,12 +5666,12 @@ without its whitespace, and the sizes count each one that way.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,238,908 | 491 | 839,402 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 23,432,287 | 1,082 | 2,941,841 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-core\` | 2,241,154 | 493 | 840,404 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
+| \`@fusion.dev/helix-headless\` | 23,422,463 | 1,082 | 2,941,851 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 202,243 | 22 | 63,839 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 131,750 | 6 | 0 | none |
-| \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
-| \`@fusion.dev/helix\` | 23,581,858 | 1,151 | 644,779 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix-styles\` | 141,390 | 6 | 0 | none |
+| \`@fusion.dev/helix-theme\` | 453,016 | 8 | 6,257 | none |
+| \`@fusion.dev/helix\` | 23,614,639 | 1,159 | 647,957 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -7575,7 +7585,7 @@ This makes every card, dialog, input, and button squarer at once, because \`sm\`
 See [Deriving a theme](./theming).
 
 Setting \`--helix-radii-md\` changes only what uses \`md\`. Buttons, inputs, and
-dialogs use \`sm\`, and cards use \`lg\`, so none of them change. Each step is
+dialogs use \`sm\`, and cards use \`md\`, so none of them change. Each step is
 computed from the seed on its own, so overriding one step changes only that
 step. To change the rounding everywhere, set the seed.
 
@@ -7592,9 +7602,8 @@ step. To change the rounding everywhere, set the seed.
 They all have the same corner, whatever their size. You compare a radius with
 the corners next to it, so the size of the panel does not matter.
 
-Circles do not use these tokens. An avatar, a loader, and a radio are circles by
-design, so they set \`50%\` directly. A theme that squares off everything else
-does not change them.
+An avatar and a radio are circles by design, so they read \`--helix-radii-full\`.
+A theme that squares off everything else does not change them.
 
 ## Border widths
 
@@ -7662,8 +7671,7 @@ Size does three jobs:
 - Emphasis shows which control matters most. The \`emphasis\` axis sets it. A
   filled primary button marks the important action much more clearly than eight
   more pixels of height.
-- Fit depends on the region. A toolbar is tight, a hero is spacious, and a table
-  row is tighter still. The region sets the fit for every control in it.
+- Fit depends on the region. A toolbar is tight and a hero is spacious. The region sets the fit for every control in it.
 - Optical role applies only to things that are not controls. An avatar at 24 in
   a list and at 96 on a profile are two different pictures. That is why
   \`Avatar\`, \`Loader\`, and \`Orb\` keep a \`size\`.
@@ -7757,6 +7765,7 @@ up one step of padding taller than the input beside it.
 | \`--helix-space-xl\` | \`calc(2rem * var(--helix-seed-density, 1))\` |
 | \`--helix-space-2xl\` | \`calc(3rem * var(--helix-seed-density, 1))\` |
 | \`--helix-space-3xl\` | \`calc(4rem * var(--helix-seed-density, 1))\` |
+| \`--helix-space-field\` | \`var(--helix-space-sm)\` |
 | \`--helix-space-control\` | \`var(--helix-space-md)\` |
 
 [//]: # (/tokens)
@@ -7766,7 +7775,7 @@ arithmetic, such as \`space-4\` being twice \`space-2\`. That stops being true a
 soon as the scale is tuned, and it leads to a \`space-4.5\` the first time
 something does not fit.
 
-\`--helix-space-control\` is a tenth token of a different kind. It is the inset a
+\`--helix-space-control\` and \`--helix-space-field\` are two more of a different kind. It is the inset a
 control uses, and it follows the region's density. It is not a step on the
 scale. See [Size and density](./size-and-density).
 
@@ -7782,7 +7791,7 @@ Use the space tokens for gap, padding, and margin:
 
 ## Size
 
-The size scale has forty-one tokens, and almost all of them name a specific
+Almost all of the size tokens name a specific
 thing:
 
 - \`--helix-size-control\`
@@ -8304,11 +8313,11 @@ title: Surfaces and separation
 
 # Surfaces and separation
 
-**Separate each surface from what is behind it with exactly one of four
-things.** The four are a fill, an edge, a lift, and space. A design language
-leads with one of them. Helix uses an edge for surfaces on the page and a lift
-for surfaces above it. A card has a hairline border and no shadow. A menu has a
-shadow and no hairline border. The surface ladder below sets the ground color
+**Separate each surface from what is behind it with four things: a fill, an
+edge, a lift, and space.** A design language leads with one of them. Helix leads
+with an edge for surfaces on the page and a lift for surfaces above it. A card
+has a hairline border and no shadow. A menu has a shadow and a hairline border,
+because a shadow cannot show on a near-black page. The surface ladder below sets the ground color
 for each place a surface can sit.
 
 ## The four ways to separate a surface
@@ -8357,16 +8366,16 @@ A surface's ground color token names where the surface sits:
 | --- | --- | --- |
 | \`--helix-color-background\` | <span data-token-swatch style={{ background: 'var(--helix-color-background)' }} /> | The page background. Every other surface sits on it. |
 | \`--helix-color-surface\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface)' }} /> | A surface on the page, such as a card or a panel. The separation policy sets it apart with a fill, a border, or a shadow. |
-| \`--helix-color-surface-raised\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A raised surface on the page, such as a selected tab or a hovered row. Its fill is one step down the ramp. |
+| \`--helix-color-surface-raised\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A panel raised inside a surface, such as a card inside a card. Its fill is one step down the ramp. |
 | \`--helix-color-surface-overlay\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its edge and its shadow set it apart. |
-| \`--helix-color-surface-sunken\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface that holds a value, such as an input, a track, or a groove. Its fill sets it apart. |
+| \`--helix-color-surface-sunken\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface, such as a track or a groove. Its fill sets it apart. A field reads \`well\`. |
 
 [//]: # (/tokens)
 
-**\`raised\` goes one step down the ramp.** A selected tab's pill, a hovered row,
-and an option under the pointer all have the page on every side. Only their
-fill separates them, and on a white page a fill has to be a step darker to be
-seen. \`overlay\` works the other way. Its edge and its shadow separate it, so on
+**\`raised\` goes one step down the ramp.** A panel inside a surface has a surface
+on every side. Only its fill separates it, and on a white page a fill has to be a
+step darker to be seen. A lit row is different: it takes \`hover\`, a wash measured
+against whatever it sits on. \`overlay\` works the other way. Its edge and its shadow separate it, so on
 a white page it is white.
 
 ## Using the page color inside a component
@@ -9128,7 +9137,9 @@ 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 were
 measured on one blue seed, so they are exact for that seed and approximate for
-any other.
+any other. The label on a solid button turns black on a seed lighter than L 0.68.
+The focus ring still follows the seed, so use the verified engine for a very
+light brand, where the ring measures 1.23:1 on white.
 
 **Verified** uses the theme engine. It searches for each color that meets its
 target, measures every pair, and returns the theme with any violations:
@@ -10401,8 +10412,9 @@ reached the same rule in their own declarations, so the rule is stated here.
 
 **A family that reports a status accepts only the status values.** \`Callout\` and
 \`Toast\` both state this. A callout reports a status and never a brand role, so
-it accepts four of the seven tones. There is no neutral status. Accepting a
-value the family cannot draw is worse than leaving the value out.
+it accepts five of the seven tones, the four statuses and \`neutral\`, which is a
+note that reports no status. Accepting a value the family cannot draw is worse
+than leaving the value out.
 
 **A family whose resting state has no tone does not need \`neutral\`.** \`Text\`
 gives this reason for having no \`default\` value. A value that matches no rule
@@ -10446,13 +10458,13 @@ and this section explains why.
 | Value | What it draws |
 |---|---|
 | \`elevated\` | A surface lifted off the page, with a shadow under it |
-| \`filled\` | A ground of its own, and no edge |
-| \`outlined\` | An edge over the ground it already has |
-| \`plain\` | Neither, so the box ends where its content does |
+| \`filled\` | A ground of its own, and no edge. What the ground is belongs to the family |
+| \`outlined\` | An edge and no fill. A family whose text or thumb needs its ground to read, such as Log or Toggle Group, does not offer it. On Card, this differs from unset, which has a fill and an edge |
+| \`plain\` | No frame of its own. A family keeps what its content needs to stay readable, and its reference says what stays |
 
 **Most families leave out \`elevated\` because of what the value means.** A shadow
 shows that the box floats above the page. That is true of a card picked up off a
-grid and of an announcement laid over the content. It is false of:
+grid and of a node on a board. It is false of:
 
 - a row in a feed
 - a groove a thumb sits in
@@ -10460,7 +10472,7 @@ grid and of an announcement laid over the content. It is false of:
 - a bar across a video
 
 A family that accepts only the other three values needs no reason for it. A
-family that accepts \`elevated\` has made a choice, and \`Card\` and \`Announcement\`
+family that accepts \`elevated\` has made a choice, and \`Card\` and \`Canvas Node\`
 both accept it.
 
 ## What each nesting value does
@@ -10490,7 +10502,7 @@ value changes meaning partway along.
 | Value | What it draws |
 |---|---|
 | \`solid\` | The tone as a full ground, with the ink flipped to read on it |
-| \`subtle\` | A wash of the tone and no edge, the quietest thing that still has a surface |
+| \`subtle\` | A wash of the tone and no edge, the quietest thing that still has a surface. A chart mark keeps its edge |
 | \`outlined\` | An edge in the tone |
 | \`ghost\` | Nothing at rest, the tone carried by the ink alone |
 | \`muted\` | Quieter ink, where there is no surface to quiet |
@@ -10501,8 +10513,9 @@ fill stays under the edge, because the area shows a value and removing the fill
 would hide that value. In both cases, \`outlined\` sets how much ink the element
 uses, based on what the element needs the ink for.
 
-**\`muted\` is for something whose only ink is its letterforms.** Only text takes
-it, because everything else has a surface to make quieter first. Leaving it off
+**\`muted\` is for something whose only ink is its letterforms.** Text takes it,
+because everything else has a surface to make quieter first. Spatial Bar Chart
+also takes it, to draw neutral bars with one lit in its tone. Leaving it off
 other families is intentional.
 
 ## What each material draws
@@ -10516,7 +10529,7 @@ smeared, and a filter behind an opaque ground cannot be seen. With no
 | Value | What it draws |
 |---|---|
 | \`glass\` | A translucent ground and the backdrop filter that makes it read |
-| \`frosted\` | The same pair turned up, a heavier ground under a heavier blur |
+| \`frosted\` | The same pair turned up, a heavier ground under a heavier blur. A Dialog or Drawer's \`glass\` is already as heavy in light, so there the two differ by blur alone |
 | \`transparent\` | Neither, so the page shows through structure and spacing |
 
 Use \`frosted\` for a surface that has to stay readable over a busy page. A theme
@@ -10547,15 +10560,17 @@ the width the splitter actually has.
 
 ## What each size draws
 
-\`size\` applies to pictures and regions, and never to controls. That rule sets
-the scope of the axis. One of the four values is a different kind of step.
+\`size\` applies to pictures and regions, and never to one control. Toolbar and
+Button Group take it because they are regions: it sets every control inside
+them at once, as \`data-density\` does for a block. That rule sets the scope of
+the axis. One of the four values is a different kind of step.
 
 | Value | What it draws |
 |---|---|
 | \`sm\` | The small step |
-| \`md\` | The middle step, and the resting state for a family that has one |
+| \`md\` | The middle step, and the resting state for most families. Toolbar rests at \`sm\`, being dense by nature |
 | \`lg\` | The large step |
-| \`full\` | The whole region, less the same inset every other step already leaves |
+| \`full\` | The whole width of the region, less the same inset every other step already leaves |
 
 **\`full\` is one more step on the \`size\` axis.** A takeover dialog is the same
 setting taken further, so it belongs on this axis. A separate \`fullscreen\`
@@ -10578,7 +10593,7 @@ The table at the top describes \`tone\` in words and names four of its values.
 | \`danger\` | Destructive, or already wrong |
 
 The first three are intents, and the last four are statuses. A family that
-accepts a subset is choosing between these two groups. The section on \`neutral\`
+accepts a subset usually chooses between these two groups. The section on \`neutral\`
 above says when to accept it.
 
 ## What each width value does
@@ -10589,7 +10604,7 @@ component, separate from \`size\`.
 
 | Value | What it draws |
 |---|---|
-| \`auto\` | As wide as its content. This is the resting behavior, written out |
+| \`auto\` | As wide as its content. This is the resting behavior on most families, written out. On Description List, which fills the row at rest, it is the departure |
 | \`full\` | All the inline space its parent gives it |
 
 **A \`width\` that takes a number is a different property with the same name.** A