@fusion.dev/helix-docs 0.198.0 → 0.199.0

package/dist/sources.generated.js

@@ -377,11 +377,11 @@ open.
 
 [//]: # (renders)
 
-**34 of the 101 headless families interpolate another family's tag**, across 22 distinct children.
+**37 of the 105 headless families interpolate another family's tag**, across 22 distinct children.
 
 | Family | Renders |
 |---|---|
-| \`area-chart\`, \`bar-chart\`, \`copy-button\`, \`donut-chart\`, \`heatmap\`, \`line-chart\`, \`scatter-chart\`, \`spatial-heatmap\`, \`spatial-scatter-chart\`, \`spatial-surface-chart\` | \`tooltip\` |
+| \`area-chart\`, \`bar-chart\`, \`copy-button\`, \`donut-chart\`, \`heatmap\`, \`line-chart\`, \`scatter-chart\`, \`spatial-bar-chart\`, \`spatial-heatmap\`, \`spatial-ribbon-chart\`, \`spatial-scatter-chart\`, \`spatial-surface-chart\`, \`spatial-treemap\` | \`tooltip\` |
 | \`breadcrumbs\` | \`breadcrumb\` |
 | \`chat\` | \`chat-message\` |
 | \`checkbox-group\`, \`table\` | \`checkbox\` |
@@ -725,12 +725,15 @@ title: Charting
 Helix has these chart families, and each one has its own API page:
 
 - \`Bar Chart\`
+- \`Spatial Bar Chart\`, drawn in three dimensions
 - \`Line Chart\`
+- \`Spatial Ribbon Chart\`, drawn in three dimensions
 - \`Area Chart\`
 - \`Scatter Chart\`
 - \`Spatial Scatter Chart\`, drawn in three dimensions
 - \`Spatial Surface Chart\`, drawn in three dimensions
 - \`Donut Chart\`
+- \`Spatial Treemap\`, drawn in three dimensions
 - \`Heatmap\`
 - \`Spatial Heatmap\`, drawn in three dimensions
 - \`Sparkline\`
@@ -746,15 +749,29 @@ Choose a chart by the question it answers.
 
 - **How much, compared.** \`Bar Chart\`. A bar's length is its value, so it always
   starts at zero.
+- **How much, across two sets of names.** \`Spatial Bar Chart\`, with a bar for
+  each category and series, standing in a box you can turn. Use it where the
+  shape across both matters more than any one value. \`Bar Chart\` is read more
+  exactly.
 - **How something moved over time.** \`Line Chart\`. It measures from the data's
   own range, so a small change still shows. Its \`area\` puts a light wash under
   each line. Each wash is drawn from the floor on its own and overlaps the
   others.
+- **How several series moved over the same places, each apart.** \`Spatial
+  Ribbon Chart\`, with a ribbon for each series, one behind another, in a box
+  you can turn. Use it where series cross and a line chart tangles them. \`Line
+  Chart\` is read more exactly.
 - **How a total is made up over time.** \`Area Chart\`. Each column is stacked on
   the one below, so the top edge is the total and a band's thickness is its
   share. Use it when the parts add up to a total. \`Line Chart\` with \`area\`
   overlaps the series, and \`Area Chart\` adds them.
 - **Parts of one whole, at one moment.** \`Donut Chart\`.
+- **How large each item is within its group, and how it stands on a second
+  measure.** \`Spatial Treemap\`, with a block for each row, its area its size
+  and its height the second measure, gathered by group on a floor you can
+  turn. Use it where many items share a whole, such as each service's
+  requests and its response time. Its table and its tooltip carry the exact
+  values.
 - **Whether two measures relate.** \`Scatter Chart\`, with one point per row.
 - **Where rows fall on three measures, and which gather together.** \`Spatial
   Scatter Chart\`, with one point per row in a box you can turn. Use it for data
@@ -775,9 +792,9 @@ Choose a chart by the question it answers.
   Use \`Trend\` to show which way one measurement moved and whether that is good
   news.
 
-The three spatial charts draw themselves in 3D in SVG, which a
+The six spatial charts draw themselves in 3D in SVG, which a
 print and a page without WebGL show too, and a drag or Shift with an arrow
-turns. \`@fusion.dev/helix-plot\` can also draw all three with three.js, lit and
+turns. \`@fusion.dev/helix-plot\` can also draw all six with three.js, lit and
 in perspective, in a view you can drag round and zoom. The
 [spatial charts guide](./spatial-charts) covers both.
 
@@ -843,9 +860,15 @@ reading a chart is usually read for:
 - \`Donut Chart\`: each slice's share of the whole.
 - \`Scatter Chart\`: each series' number of points and how strongly the two
   measures relate.
+- \`Spatial Bar Chart\`: its number of bars, series, and categories, and the
+  range of its values.
+- \`Spatial Ribbon Chart\`: its number of readings, series, and places, and the
+  range of its values.
 - \`Spatial Scatter Chart\`: its three measures and its number of points.
 - \`Spatial Surface Chart\`: its measures, its number of readings, and the range
   of its heights.
+- \`Spatial Treemap\`: its number of items and groups, and the range of their
+  sizes.
 
 \`Heatmap\` and \`Spatial Heatmap\` are each an image with that name. \`Sparkline\` takes a \`label\` of its own.
 
@@ -921,6 +944,9 @@ These parts keep their direction:
 - \`Spatial Scatter Chart\` and \`Spatial Surface Chart\` are laid out as on a
   left-to-right page, because all three of their axes are measures. Their
   summaries and tooltips follow the page's direction.
+- \`Spatial Bar Chart\`, \`Spatial Ribbon Chart\`, and \`Spatial Treemap\` are laid
+  out as on a left-to-right page too, since each drawing is a box you turn. Its summary and tooltip follow the page's
+  direction.
 
 To keep a chart left to right on a right-to-left page, such as a number line in
 a mathematics text, set \`dir="ltr"\` on the chart element. You need nothing else.
@@ -4420,7 +4446,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 253,599 | 81,597 | 69,835 |
+| Lit and \`@fusion.dev/helix-core\` | 254,802 | 82,008 | 70,066 |
 
 ## Whole packages
 
@@ -4431,12 +4457,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 252,808 | 81,456 | 69,437 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,366,720 | 383,154 | 287,408 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-core\` | 254,011 | 81,843 | 69,741 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,397,717 | 388,834 | 292,259 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
 | \`fusion_helix_theme_bg.wasm\` | 490,971 | 155,905 | 125,923 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
-| \`@fusion.dev/helix\` | 2,050,629 | 531,895 | 379,555 | Every styled family. |
+| \`@fusion.dev/helix\` | 2,099,417 | 539,624 | 385,224 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -4450,20 +4476,20 @@ shows the whole cost of using the base layer on its own.
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
 | \`base.css\` | 34,352 | 4,806 | 4,174 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
-| \`elements.css\` | 19,204 | 2,877 | 2,568 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
+| \`elements.css\` | 19,482 | 2,915 | 2,603 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
 | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
 | \`primitives.css\` | 7,511 | 1,401 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
 | \`tokens.css\` | 22,747 | 2,757 | 2,314 | The 197 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 18,136 bytes gzipped alone, and it adds 4,014 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
+**Most of your first component is the shared runtime.** The median styled family is 18,684 bytes gzipped alone, and it adds 4,196 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the 108 styled components, the smallest is \`code\` at 8,333 bytes gzipped alone, and the largest is \`data-table\` at 66,818. Every family together is 531,895.
+Across the 112 styled components, the smallest is \`code\` at 8,332 bytes gzipped alone, and the largest is \`data-table\` at 66,816. Every family together is 539,624.
 
-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 383,154 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 108 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
+No family imports a barrel. The \`barrels\` rule in \`fusion x workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 388,834 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 112 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
 
-The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 17,291 bytes gzipped alone.
+The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 17,500 bytes gzipped alone.
 
 ## Compared with other systems
 
@@ -4475,37 +4501,37 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 41,612 | 14,008 | 12,454 |
+| \`button\` | **Helix** | 41,612 | 14,008 | 12,463 |
 | | Carbon | 133,058 | 20,959 | 17,685 |
 | | Material Web | 47,060 | 14,173 | 12,591 |
 | | Shoelace | 62,628 | 18,287 | 15,805 |
 | | Spectrum | 98,792 | 22,045 | 18,674 |
-| \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,545 |
+| \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,546 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Shoelace | 47,614 | 15,177 | 13,301 |
 | | Spectrum | 62,492 | 15,437 | 13,481 |
-| \`dialog\` | **Helix** | 43,407 | 14,900 | 13,269 |
+| \`dialog\` | **Helix** | 43,407 | 14,900 | 13,271 |
 | | Carbon | 510,866 | 67,390 | 39,189 |
 | | Material Web | 34,238 | 11,510 | 10,229 |
 | | Shoelace | 52,754 | 17,698 | 15,554 |
 | | Spectrum | 155,708 | 31,899 | 26,262 |
-| \`radio\` | **Helix** | 50,349 | 15,975 | 14,201 |
+| \`radio\` | **Helix** | 50,349 | 15,975 | 14,202 |
 | | Carbon | 63,055 | 16,887 | 14,605 |
 | | Material Web | 41,044 | 13,234 | 11,757 |
 | | Shoelace | 34,865 | 12,027 | 10,559 |
 | | Spectrum | 38,685 | 10,660 | 9,370 |
-| \`switch\` | **Helix** | 43,562 | 14,637 | 13,011 |
+| \`switch\` | **Helix** | 43,562 | 14,638 | 13,034 |
 | | Carbon | 69,423 | 17,127 | 14,764 |
 | | Material Web | 50,155 | 14,577 | 12,935 |
 | | Shoelace | 37,833 | 11,814 | 10,568 |
 | | Spectrum | 62,322 | 15,059 | 13,321 |
-| \`tabs\` | **Helix** | 55,263 | 17,753 | 15,850 |
+| \`tabs\` | **Helix** | 55,263 | 17,752 | 15,793 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Shoelace | 54,573 | 17,140 | 15,068 |
 | | Spectrum | 64,875 | 18,298 | 16,283 |
-| \`tooltip\` | **Helix** | 61,420 | 21,834 | 19,363 |
+| \`tooltip\` | **Helix** | 61,420 | 21,834 | 19,333 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -4557,107 +4583,111 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 31,879 | 11,804 | 10,470 | 5,330 | 1,573 | 1,190 |
-| \`announcement\` | 36,692 | 13,312 | 11,862 | 4,681 | 1,394 | 925 |
-| \`app-header\` | 32,289 | 11,898 | 10,594 | 5,870 | 1,775 | 1,181 |
-| \`area-chart\` | 90,301 | 31,728 | 28,102 | 14,060 | 4,347 | 3,427 |
-| \`avatar\` | 30,463 | 11,596 | 10,369 | 3,957 | 1,201 | 841 |
-| \`badge\` | 27,088 | 10,568 | 9,407 | 2,944 | 912 | 646 |
-| \`bar-chart\` | 94,416 | 32,822 | 29,101 | 18,023 | 5,408 | 4,205 |
-| \`blockquote\` | 24,107 | 9,421 | 8,332 | 2,401 | 904 | 542 |
-| \`breadcrumbs\` | 36,279 | 13,907 | 12,385 | 7,361 | 2,403 | 1,879 |
-| \`button\` | 35,194 | 12,591 | 11,199 | 4,926 | 1,455 | 1,036 |
-| \`button-group\` | 27,640 | 10,382 | 9,200 | 4,929 | 1,518 | 1,086 |
-| \`callout\` | 35,256 | 13,593 | 12,065 | 2,884 | 986 | 597 |
-| \`canvas\` | 108,483 | 34,751 | 30,385 | 68,925 | 20,948 | 17,449 |
-| \`card\` | 23,824 | 9,093 | 8,055 | 2,090 | 641 | 442 |
-| \`carousel\` | 42,748 | 15,233 | 13,622 | 15,006 | 4,161 | 3,125 |
-| \`chat\` | 79,390 | 26,446 | 23,340 | 27,457 | 8,045 | 6,390 |
-| \`checkbox\` | 40,374 | 13,681 | 12,199 | 3,107 | 949 | 536 |
-| \`checkbox-group\` | 47,602 | 15,600 | 13,896 | 8,324 | 2,379 | 1,660 |
-| \`code\` | 20,301 | 8,015 | 7,121 | 138 | 79 | -27 |
-| \`code-block\` | 102,738 | 34,890 | 30,788 | 36,847 | 10,721 | 8,601 |
-| \`color-input\` | 141,792 | 45,090 | 39,380 | 55,137 | 14,278 | 11,504 |
-| \`color-picker\` | 103,415 | 32,966 | 28,885 | 47,255 | 12,678 | 10,199 |
-| \`combobox\` | 132,023 | 41,952 | 36,962 | 35,792 | 9,090 | 7,003 |
-| \`command\` | 99,560 | 31,521 | 27,757 | 30,062 | 8,097 | 6,307 |
-| \`copy-button\` | 80,548 | 27,649 | 24,493 | 18,340 | 4,952 | 3,752 |
-| \`data-table\` | 199,900 | 61,426 | 52,479 | 89,489 | 23,842 | 18,936 |
-| \`date-input\` | 141,223 | 44,511 | 39,086 | 38,231 | 9,442 | 7,362 |
-| \`date-picker\` | 61,360 | 20,935 | 18,727 | 20,346 | 5,589 | 4,297 |
-| \`description-list\` | 22,900 | 8,765 | 7,766 | 1,565 | 517 | 239 |
-| \`dialog\` | 38,294 | 13,634 | 12,133 | 5,837 | 1,717 | 1,156 |
-| \`divider\` | 22,991 | 8,924 | 7,883 | 1,415 | 523 | 206 |
-| \`donut-chart\` | 89,212 | 31,130 | 27,510 | 14,642 | 4,497 | 3,518 |
-| \`drawer\` | 42,939 | 15,158 | 13,507 | 7,699 | 2,307 | 1,674 |
-| \`drilldown\` | 42,756 | 14,941 | 13,297 | 9,709 | 2,720 | 2,018 |
-| \`empty\` | 24,241 | 9,287 | 8,243 | 1,951 | 636 | 420 |
-| \`file-input\` | 57,757 | 20,019 | 17,808 | 13,094 | 4,117 | 3,196 |
-| \`filter-input\` | 97,846 | 32,819 | 29,097 | 21,631 | 6,176 | 4,792 |
-| \`format-date\` | 30,158 | 11,290 | 10,085 | 4,435 | 1,269 | 936 |
-| \`graph\` | 74,369 | 24,504 | 21,640 | 21,879 | 6,450 | 5,022 |
-| \`heatmap\` | 98,128 | 33,501 | 29,561 | 18,942 | 5,586 | 4,270 |
-| \`icon\` | 82,157 | 28,051 | 23,964 | 58,303 | 19,563 | 16,020 |
-| \`icon-button\` | 35,305 | 12,619 | 11,227 | 5,035 | 1,481 | 974 |
-| \`image\` | 25,504 | 9,480 | 8,405 | 3,823 | 1,159 | 792 |
-| \`input\` | 46,361 | 15,972 | 14,093 | 7,351 | 2,398 | 1,699 |
-| \`kbd\` | 27,511 | 10,570 | 9,336 | 3,518 | 1,127 | 699 |
-| \`legend\` | 35,184 | 12,935 | 11,491 | 2,956 | 1,007 | 719 |
-| \`lightbox\` | 55,724 | 18,816 | 16,711 | 16,731 | 4,656 | 3,368 |
-| \`line-chart\` | 91,335 | 31,881 | 28,255 | 14,763 | 4,403 | 3,427 |
-| \`list\` | 61,803 | 21,292 | 18,957 | 15,242 | 4,416 | 3,250 |
-| \`listbox\` | 76,711 | 25,427 | 22,459 | 15,565 | 4,603 | 3,363 |
-| \`loader\` | 26,379 | 10,041 | 8,940 | 2,774 | 952 | 568 |
-| \`map\` | 78,565 | 24,393 | 21,324 | 37,032 | 10,098 | 7,764 |
-| \`megamenu\` | 60,027 | 21,698 | 19,183 | 8,595 | 2,376 | 1,668 |
-| \`menu\` | 97,473 | 32,553 | 28,726 | 30,182 | 7,944 | 6,175 |
-| \`meter\` | 31,721 | 12,025 | 10,720 | 4,893 | 1,451 | 1,032 |
-| \`navigation\` | 33,088 | 12,436 | 11,034 | 3,365 | 1,147 | 710 |
-| \`notifications\` | 58,346 | 19,881 | 17,733 | 18,209 | 5,059 | 3,857 |
-| \`number-input\` | 56,271 | 18,842 | 16,800 | 13,525 | 3,613 | 2,582 |
-| \`object-inspector\` | 113,929 | 38,373 | 33,740 | 35,495 | 10,278 | 8,056 |
-| \`option\` | 26,477 | 9,763 | 8,665 | 4,524 | 1,211 | 802 |
-| \`outline\` | 33,612 | 12,597 | 11,194 | 7,858 | 2,574 | 1,818 |
-| \`pagination\` | 136,258 | 43,650 | 37,903 | 45,382 | 11,881 | 9,318 |
-| \`pin-input\` | 47,068 | 16,413 | 14,640 | 6,737 | 2,231 | 1,499 |
-| \`popover\` | 63,853 | 22,982 | 20,298 | 6,374 | 1,850 | 1,195 |
-| \`progress\` | 28,084 | 10,728 | 9,550 | 2,969 | 921 | 705 |
-| \`qr-code\` | 42,719 | 16,647 | 14,800 | 17,005 | 6,286 | 5,223 |
-| \`quote\` | 22,516 | 8,885 | 7,827 | 1,210 | 523 | 258 |
-| \`radio\` | 42,561 | 14,465 | 12,867 | 3,817 | 1,197 | 667 |
-| \`rating\` | 50,257 | 17,291 | 15,435 | 8,028 | 2,437 | 1,605 |
-| \`scatter-chart\` | 91,226 | 31,676 | 28,010 | 16,128 | 4,818 | 3,723 |
-| \`scroll-area\` | 30,430 | 11,079 | 9,813 | 8,499 | 2,585 | 1,878 |
-| \`select\` | 115,289 | 38,175 | 33,416 | 26,034 | 7,129 | 5,312 |
-| \`skeleton\` | 22,328 | 8,644 | 7,666 | 991 | 404 | 154 |
-| \`skip-link\` | 23,871 | 9,338 | 8,264 | 1,224 | 496 | 246 |
-| \`slider\` | 52,873 | 17,825 | 15,916 | 13,158 | 3,777 | 2,936 |
-| \`sparkline\` | 47,984 | 17,500 | 15,601 | 5,982 | 2,128 | 1,631 |
-| \`spatial-heatmap\` | 113,453 | 38,788 | 34,092 | 31,595 | 9,607 | 7,667 |
-| \`spatial-scatter-chart\` | 98,077 | 34,518 | 30,441 | 18,240 | 5,992 | 4,687 |
-| \`spatial-surface-chart\` | 99,770 | 35,241 | 31,060 | 19,869 | 6,684 | 5,258 |
-| \`speed-dial\` | 68,751 | 24,718 | 21,860 | 10,914 | 2,936 | 2,219 |
-| \`splitter\` | 43,751 | 15,169 | 13,535 | 14,395 | 3,867 | 2,988 |
-| \`stat\` | 25,255 | 9,675 | 8,601 | 2,302 | 761 | 479 |
-| \`steps\` | 53,623 | 18,636 | 16,567 | 13,604 | 3,826 | 3,031 |
-| \`switch\` | 39,233 | 13,496 | 12,036 | 1,679 | 630 | 355 |
-| \`table\` | 118,358 | 37,062 | 32,249 | 45,150 | 12,431 | 9,883 |
-| \`tabs\` | 46,310 | 15,908 | 14,141 | 10,493 | 2,873 | 2,087 |
-| \`tag\` | 42,676 | 15,620 | 13,971 | 8,456 | 2,533 | 1,807 |
-| \`textarea\` | 43,852 | 14,941 | 13,325 | 5,403 | 1,610 | 1,115 |
-| \`time-input\` | 169,269 | 52,676 | 45,765 | 48,513 | 12,431 | 9,737 |
-| \`time-picker\` | 99,603 | 31,518 | 27,730 | 33,934 | 9,195 | 7,080 |
-| \`timeline\` | 31,286 | 11,863 | 10,638 | 4,062 | 1,202 | 771 |
-| \`toast\` | 50,871 | 17,940 | 16,003 | 12,125 | 3,530 | 2,694 |
-| \`toggle\` | 45,577 | 15,272 | 13,575 | 6,009 | 1,806 | 1,344 |
-| \`toolbar\` | 31,047 | 11,573 | 10,296 | 5,159 | 1,673 | 1,204 |
-| \`tooltip\` | 58,616 | 21,090 | 18,726 | 8,435 | 2,353 | 1,740 |
-| \`tour\` | 83,717 | 28,763 | 25,379 | 19,810 | 5,445 | 4,257 |
-| \`tree\` | 67,586 | 22,717 | 20,253 | 17,200 | 4,961 | 3,810 |
-| \`trend\` | 29,717 | 11,569 | 10,337 | 3,488 | 1,120 | 777 |
-| \`video\` | 141,208 | 44,138 | 38,459 | 66,219 | 16,730 | 13,598 |
-| \`video-playlist\` | 127,686 | 41,300 | 36,361 | 42,779 | 11,205 | 9,066 |
-| \`virtual-list\` | 63,451 | 21,632 | 19,310 | 23,304 | 7,150 | 5,647 |
+| \`accordion\` | 31,879 | 11,804 | 10,470 | 5,328 | 1,581 | 1,198 |
+| \`announcement\` | 36,692 | 13,312 | 11,862 | 4,681 | 1,368 | 1,014 |
+| \`app-header\` | 32,289 | 11,898 | 10,558 | 5,870 | 1,748 | 1,405 |
+| \`area-chart\` | 90,301 | 31,728 | 28,036 | 14,057 | 4,342 | 3,432 |
+| \`avatar\` | 30,463 | 11,596 | 10,365 | 3,957 | 1,214 | 921 |
+| \`badge\` | 27,088 | 10,568 | 9,406 | 2,942 | 889 | 748 |
+| \`bar-chart\` | 94,416 | 32,822 | 29,077 | 18,022 | 5,410 | 4,349 |
+| \`blockquote\` | 24,107 | 9,421 | 8,333 | 2,401 | 878 | 766 |
+| \`breadcrumbs\` | 36,279 | 13,907 | 12,385 | 7,357 | 2,410 | 1,974 |
+| \`button\` | 35,194 | 12,591 | 11,197 | 4,922 | 1,424 | 1,070 |
+| \`button-group\` | 27,640 | 10,382 | 9,202 | 4,926 | 1,515 | 1,183 |
+| \`callout\` | 35,256 | 13,593 | 12,065 | 2,884 | 964 | 750 |
+| \`canvas\` | 108,483 | 34,751 | 30,355 | 68,924 | 20,931 | 17,663 |
+| \`card\` | 23,824 | 9,093 | 8,054 | 2,090 | 626 | 483 |
+| \`carousel\` | 43,576 | 15,460 | 13,784 | 15,235 | 4,221 | 3,257 |
+| \`chat\` | 79,390 | 26,446 | 23,403 | 27,455 | 8,022 | 6,473 |
+| \`checkbox\` | 40,374 | 13,681 | 12,222 | 3,107 | 960 | 607 |
+| \`checkbox-group\` | 47,602 | 15,601 | 13,903 | 8,324 | 2,348 | 1,822 |
+| \`code\` | 20,301 | 8,016 | 7,126 | 138 | 66 | 108 |
+| \`code-block\` | 102,738 | 34,890 | 30,794 | 36,843 | 10,711 | 8,723 |
+| \`color-input\` | 141,792 | 45,091 | 39,358 | 55,133 | 14,293 | 11,577 |
+| \`color-picker\` | 103,415 | 32,966 | 28,896 | 47,251 | 12,670 | 10,256 |
+| \`combobox\` | 132,023 | 41,951 | 36,914 | 35,789 | 9,085 | 7,043 |
+| \`command\` | 99,560 | 31,522 | 27,745 | 30,059 | 8,104 | 6,335 |
+| \`copy-button\` | 80,548 | 27,650 | 24,493 | 18,340 | 4,939 | 3,839 |
+| \`data-table\` | 199,900 | 61,424 | 52,547 | 89,488 | 23,799 | 19,045 |
+| \`date-input\` | 141,223 | 44,512 | 39,182 | 38,227 | 9,424 | 7,495 |
+| \`date-picker\` | 61,360 | 20,934 | 18,736 | 20,345 | 5,600 | 4,413 |
+| \`description-list\` | 22,900 | 8,765 | 7,765 | 1,565 | 492 | 489 |
+| \`dialog\` | 38,294 | 13,635 | 12,173 | 5,837 | 1,715 | 1,323 |
+| \`divider\` | 22,991 | 8,924 | 7,879 | 1,415 | 503 | 351 |
+| \`donut-chart\` | 89,212 | 31,129 | 27,528 | 14,639 | 4,496 | 3,596 |
+| \`drawer\` | 42,939 | 15,158 | 13,506 | 7,697 | 2,296 | 1,721 |
+| \`drilldown\` | 42,756 | 14,939 | 13,337 | 9,708 | 2,702 | 2,089 |
+| \`empty\` | 24,241 | 9,287 | 8,242 | 1,951 | 639 | 406 |
+| \`file-input\` | 57,757 | 20,019 | 17,813 | 13,093 | 4,122 | 3,272 |
+| \`filter-input\` | 97,846 | 32,819 | 29,119 | 21,628 | 6,186 | 4,908 |
+| \`format-date\` | 30,158 | 11,290 | 10,085 | 4,431 | 1,266 | 992 |
+| \`graph\` | 75,588 | 24,761 | 21,893 | 23,095 | 6,734 | 5,483 |
+| \`heatmap\` | 98,128 | 33,501 | 29,597 | 18,941 | 5,574 | 4,470 |
+| \`icon\` | 82,157 | 28,051 | 23,964 | 58,303 | 19,611 | 16,129 |
+| \`icon-button\` | 35,305 | 12,619 | 11,226 | 5,031 | 1,447 | 1,075 |
+| \`image\` | 25,504 | 9,479 | 8,403 | 3,822 | 1,132 | 1,008 |
+| \`input\` | 46,361 | 15,975 | 14,088 | 7,351 | 2,387 | 1,684 |
+| \`kbd\` | 27,511 | 10,569 | 9,360 | 3,516 | 1,111 | 825 |
+| \`legend\` | 35,184 | 12,935 | 11,489 | 2,956 | 979 | 775 |
+| \`lightbox\` | 55,724 | 18,815 | 16,719 | 16,728 | 4,631 | 3,470 |
+| \`line-chart\` | 91,335 | 31,881 | 28,258 | 14,760 | 4,398 | 3,598 |
+| \`list\` | 61,803 | 21,294 | 18,990 | 15,241 | 4,415 | 3,478 |
+| \`listbox\` | 76,711 | 25,427 | 22,459 | 15,562 | 4,563 | 3,408 |
+| \`loader\` | 26,379 | 10,041 | 8,906 | 2,774 | 914 | 742 |
+| \`map\` | 79,178 | 24,571 | 21,484 | 37,042 | 10,074 | 8,087 |
+| \`megamenu\` | 60,027 | 21,698 | 19,179 | 8,595 | 2,368 | 1,703 |
+| \`menu\` | 97,473 | 32,551 | 28,736 | 30,180 | 7,920 | 6,511 |
+| \`meter\` | 31,721 | 12,025 | 10,720 | 4,893 | 1,409 | 1,196 |
+| \`motion-toggle\` | 25,678 | 9,986 | 8,865 | 1,426 | 509 | 304 |
+| \`navigation\` | 33,088 | 12,436 | 11,035 | 3,365 | 1,157 | 949 |
+| \`notifications\` | 58,346 | 19,881 | 17,702 | 18,207 | 5,058 | 3,921 |
+| \`number-input\` | 56,271 | 18,842 | 16,806 | 13,522 | 3,584 | 2,761 |
+| \`object-inspector\` | 113,929 | 38,373 | 33,780 | 35,491 | 10,255 | 8,178 |
+| \`option\` | 26,477 | 9,763 | 8,664 | 4,523 | 1,184 | 985 |
+| \`outline\` | 33,612 | 12,597 | 11,181 | 7,856 | 2,559 | 1,938 |
+| \`pagination\` | 136,258 | 43,649 | 37,947 | 45,379 | 11,839 | 9,429 |
+| \`pin-input\` | 47,068 | 16,412 | 14,639 | 6,735 | 2,225 | 1,650 |
+| \`popover\` | 63,853 | 22,982 | 20,306 | 6,373 | 1,853 | 1,331 |
+| \`progress\` | 28,084 | 10,728 | 9,550 | 2,969 | 910 | 787 |
+| \`qr-code\` | 42,719 | 16,647 | 14,829 | 17,001 | 6,289 | 5,336 |
+| \`quote\` | 22,516 | 8,883 | 7,827 | 1,210 | 511 | 473 |
+| \`radio\` | 42,561 | 14,464 | 12,864 | 3,817 | 1,200 | 863 |
+| \`rating\` | 50,257 | 17,291 | 15,428 | 8,027 | 2,434 | 1,851 |
+| \`scatter-chart\` | 91,226 | 31,676 | 27,992 | 16,123 | 4,842 | 3,778 |
+| \`scroll-area\` | 30,430 | 11,078 | 9,811 | 8,499 | 2,573 | 2,024 |
+| \`select\` | 115,289 | 38,175 | 33,404 | 26,031 | 7,119 | 5,462 |
+| \`skeleton\` | 22,328 | 8,644 | 7,665 | 991 | 396 | 427 |
+| \`skip-link\` | 23,871 | 9,338 | 8,264 | 1,224 | 475 | 342 |
+| \`slider\` | 52,873 | 17,827 | 15,915 | 13,158 | 3,777 | 2,951 |
+| \`sparkline\` | 47,984 | 17,500 | 15,637 | 5,979 | 2,127 | 1,770 |
+| \`spatial-bar-chart\` | 101,564 | 35,946 | 31,687 | 19,726 | 6,511 | 5,217 |
+| \`spatial-heatmap\` | 113,473 | 38,795 | 34,033 | 31,592 | 9,583 | 7,752 |
+| \`spatial-ribbon-chart\` | 100,738 | 35,554 | 31,364 | 20,718 | 6,906 | 5,710 |
+| \`spatial-scatter-chart\` | 98,971 | 34,841 | 30,763 | 19,012 | 6,269 | 5,012 |
+| \`spatial-surface-chart\` | 101,895 | 36,126 | 31,787 | 21,876 | 7,442 | 6,059 |
+| \`spatial-treemap\` | 102,958 | 36,743 | 32,389 | 21,244 | 7,366 | 5,914 |
+| \`speed-dial\` | 68,751 | 24,718 | 21,857 | 10,914 | 2,968 | 2,276 |
+| \`splitter\` | 43,751 | 15,169 | 13,535 | 14,396 | 3,840 | 3,040 |
+| \`stat\` | 25,255 | 9,675 | 8,600 | 2,302 | 754 | 648 |
+| \`steps\` | 53,623 | 18,634 | 16,599 | 13,601 | 3,845 | 3,048 |
+| \`switch\` | 39,233 | 13,496 | 12,036 | 1,679 | 600 | 355 |
+| \`table\` | 118,358 | 37,062 | 32,238 | 45,146 | 12,425 | 10,011 |
+| \`tabs\` | 46,310 | 15,908 | 14,139 | 10,491 | 2,876 | 2,230 |
+| \`tag\` | 42,676 | 15,621 | 13,970 | 8,453 | 2,544 | 1,934 |
+| \`textarea\` | 43,852 | 14,940 | 13,344 | 5,401 | 1,602 | 1,126 |
+| \`time-input\` | 169,269 | 52,675 | 45,775 | 48,509 | 12,419 | 9,849 |
+| \`time-picker\` | 99,603 | 31,518 | 27,755 | 33,932 | 9,178 | 7,249 |
+| \`timeline\` | 31,286 | 11,863 | 10,612 | 4,060 | 1,184 | 1,000 |
+| \`toast\` | 50,871 | 17,940 | 16,020 | 12,122 | 3,515 | 2,674 |
+| \`toggle\` | 45,577 | 15,271 | 13,601 | 6,007 | 1,805 | 1,331 |
+| \`toolbar\` | 31,047 | 11,572 | 10,296 | 5,157 | 1,639 | 1,339 |
+| \`tooltip\` | 58,616 | 21,090 | 18,709 | 8,432 | 2,348 | 1,867 |
+| \`tour\` | 83,717 | 28,763 | 25,370 | 19,811 | 5,427 | 4,280 |
+| \`tree\` | 67,586 | 22,717 | 20,254 | 17,197 | 4,927 | 3,857 |
+| \`trend\` | 29,717 | 11,568 | 10,337 | 3,485 | 1,070 | 901 |
+| \`video\` | 142,270 | 44,463 | 38,773 | 66,678 | 16,801 | 13,931 |
+| \`video-playlist\` | 127,686 | 41,297 | 36,312 | 42,775 | 11,170 | 9,257 |
+| \`virtual-list\` | 63,451 | 21,631 | 19,240 | 23,304 | 7,149 | 5,852 |
 
 ### Styled tier
 
@@ -4665,114 +4695,118 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 35,311 | 12,653 | 11,211 | 8,747 | 2,422 | 1,879 |
-| \`announcement\` | 41,307 | 14,365 | 12,837 | 9,277 | 2,479 | 1,910 |
-| \`app-header\` | 37,449 | 13,103 | 11,680 | 11,015 | 2,977 | 2,278 |
-| \`area-chart\` | 98,393 | 33,576 | 29,680 | 22,133 | 6,229 | 4,979 |
-| \`aura\` | 56,085 | 19,320 | 17,112 | 29,775 | 9,288 | 7,741 |
-| \`avatar\` | 33,464 | 12,351 | 11,017 | 6,945 | 1,969 | 1,543 |
-| \`badge\` | 32,595 | 11,820 | 10,531 | 8,440 | 2,169 | 1,659 |
-| \`bar-chart\` | 108,944 | 35,726 | 31,541 | 32,532 | 8,363 | 6,836 |
-| \`blockquote\` | 26,332 | 9,969 | 8,824 | 4,613 | 1,446 | 1,110 |
-| \`breadcrumbs\` | 43,220 | 15,115 | 13,466 | 14,286 | 3,647 | 2,931 |
-| \`button\` | 41,612 | 14,008 | 12,454 | 11,325 | 2,891 | 2,306 |
-| \`button-group\` | 31,138 | 11,066 | 9,810 | 8,410 | 2,210 | 1,655 |
-| \`callout\` | 39,049 | 14,536 | 12,904 | 6,659 | 1,927 | 1,479 |
-| \`canvas\` | 129,523 | 38,716 | 33,893 | 89,609 | 24,828 | 20,814 |
-| \`card\` | 27,725 | 10,100 | 8,971 | 5,976 | 1,632 | 1,285 |
-| \`carousel\` | 53,234 | 17,022 | 15,281 | 25,477 | 5,979 | 4,753 |
-| \`chat\` | 94,674 | 29,166 | 25,839 | 42,734 | 10,809 | 8,712 |
-| \`checkbox\` | 46,865 | 15,190 | 13,545 | 9,580 | 2,490 | 1,875 |
-| \`checkbox-group\` | 54,826 | 17,244 | 15,362 | 15,537 | 4,010 | 3,032 |
-| \`code\` | 21,154 | 8,333 | 7,394 | 976 | 402 | 306 |
-| \`code-block\` | 127,213 | 38,715 | 34,200 | 61,302 | 14,711 | 12,022 |
-| \`color-input\` | 184,176 | 51,349 | 44,970 | 97,507 | 20,443 | 17,063 |
-| \`color-picker\` | 140,348 | 38,509 | 33,789 | 84,179 | 18,166 | 15,017 |
-| \`combobox\` | 147,503 | 44,927 | 39,535 | 51,256 | 12,039 | 9,701 |
-| \`command\` | 110,838 | 33,879 | 29,788 | 41,333 | 10,476 | 8,406 |
-| \`copy-button\` | 92,577 | 29,825 | 26,459 | 30,353 | 7,185 | 5,623 |
-| \`data-table\` | 230,715 | 66,818 | 57,218 | 120,291 | 29,344 | 23,737 |
-| \`date-input\` | 162,349 | 48,215 | 42,429 | 59,342 | 13,178 | 10,777 |
-| \`date-picker\` | 69,281 | 22,362 | 20,076 | 28,249 | 7,035 | 5,594 |
-| \`description-list\` | 25,855 | 9,517 | 8,461 | 4,508 | 1,255 | 896 |
-| \`dialog\` | 43,407 | 14,900 | 13,269 | 10,933 | 2,993 | 2,270 |
-| \`divider\` | 25,291 | 9,545 | 8,433 | 3,698 | 1,155 | 859 |
-| \`donut-chart\` | 99,170 | 33,263 | 29,404 | 24,577 | 6,676 | 5,263 |
-| \`drawer\` | 48,772 | 16,543 | 14,790 | 13,513 | 3,692 | 2,863 |
-| \`drilldown\` | 48,438 | 16,240 | 14,452 | 15,379 | 4,018 | 3,114 |
-| \`empty\` | 25,550 | 9,762 | 8,646 | 3,242 | 1,093 | 754 |
-| \`file-input\` | 69,285 | 22,420 | 19,925 | 24,613 | 6,514 | 5,217 |
-| \`filter-input\` | 108,688 | 34,991 | 30,999 | 32,466 | 8,399 | 6,715 |
-| \`flex\` | 25,740 | 9,194 | 8,149 | 4,762 | 1,035 | 791 |
-| \`format-date\` | 30,414 | 11,403 | 10,154 | 4,673 | 1,393 | 1,002 |
-| \`graph\` | 89,037 | 27,080 | 23,932 | 36,529 | 9,141 | 7,335 |
-| \`grid\` | 27,002 | 9,846 | 8,742 | 5,639 | 1,458 | 1,141 |
-| \`heatmap\` | 105,486 | 35,190 | 31,089 | 26,279 | 7,237 | 5,756 |
-| \`icon\` | 83,995 | 28,568 | 24,460 | 60,128 | 20,114 | 16,317 |
-| \`icon-button\` | 43,040 | 13,981 | 12,449 | 12,754 | 2,865 | 2,094 |
-| \`image\` | 26,892 | 9,947 | 8,805 | 5,193 | 1,611 | 1,269 |
-| \`input\` | 50,619 | 17,063 | 15,042 | 11,594 | 3,496 | 2,541 |
-| \`kbd\` | 29,504 | 11,109 | 9,826 | 5,496 | 1,660 | 1,242 |
-| \`legend\` | 40,423 | 14,214 | 12,626 | 8,066 | 2,282 | 1,806 |
-| \`lightbox\` | 62,016 | 20,155 | 17,939 | 23,007 | 5,966 | 4,589 |
-| \`line-chart\` | 102,454 | 34,257 | 30,357 | 25,865 | 6,820 | 5,541 |
-| \`list\` | 68,150 | 22,814 | 20,334 | 21,569 | 5,915 | 4,601 |
-| \`listbox\` | 81,154 | 26,542 | 23,469 | 19,994 | 5,689 | 4,225 |
-| \`loader\` | 29,263 | 10,816 | 9,653 | 5,641 | 1,700 | 1,300 |
-| \`map\` | 111,513 | 29,574 | 26,003 | 69,971 | 15,441 | 12,533 |
-| \`megamenu\` | 64,996 | 22,865 | 20,241 | 13,546 | 3,541 | 2,663 |
-| \`menu\` | 108,403 | 34,710 | 30,611 | 41,096 | 10,137 | 8,171 |
-| \`meter\` | 37,896 | 13,377 | 11,942 | 11,049 | 2,800 | 2,340 |
-| \`navigation\` | 36,814 | 13,268 | 11,768 | 7,076 | 2,010 | 1,562 |
-| \`notifications\` | 71,839 | 22,457 | 20,073 | 31,694 | 7,653 | 6,159 |
-| \`number-input\` | 61,253 | 20,026 | 17,847 | 18,492 | 4,794 | 3,725 |
-| \`object-inspector\` | 130,338 | 41,205 | 36,244 | 51,889 | 13,159 | 10,624 |
-| \`option\` | 29,672 | 10,762 | 9,547 | 7,712 | 2,201 | 1,727 |
-| \`orb\` | 35,265 | 13,488 | 12,044 | 9,730 | 3,661 | 2,877 |
-| \`outline\` | 37,846 | 13,457 | 11,936 | 12,075 | 3,444 | 2,649 |
-| \`pagination\` | 153,264 | 46,929 | 40,904 | 62,371 | 15,207 | 12,144 |
-| \`pin-input\` | 50,409 | 17,316 | 15,432 | 10,059 | 3,133 | 2,412 |
-| \`popover\` | 67,005 | 23,749 | 20,997 | 9,508 | 2,640 | 1,933 |
-| \`progress\` | 35,232 | 12,380 | 11,029 | 10,100 | 2,594 | 2,035 |
-| \`qr-code\` | 44,321 | 17,121 | 15,278 | 18,589 | 6,787 | 5,649 |
-| \`quote\` | 23,074 | 9,079 | 8,006 | 1,751 | 719 | 536 |
-| \`radio\` | 50,349 | 15,975 | 14,201 | 11,592 | 2,734 | 2,024 |
-| \`rating\` | 54,190 | 18,519 | 16,485 | 11,945 | 3,654 | 2,769 |
-| \`sandbox\` | 104,428 | 31,484 | 27,618 | 72,146 | 19,183 | 16,076 |
-| \`scatter-chart\` | 100,317 | 33,785 | 29,903 | 25,198 | 6,981 | 5,576 |
-| \`scroll-area\` | 35,437 | 12,025 | 10,702 | 13,489 | 3,556 | 2,729 |
-| \`select\` | 124,418 | 40,070 | 35,070 | 35,148 | 9,050 | 7,061 |
-| \`skeleton\` | 26,090 | 9,664 | 8,591 | 4,738 | 1,397 | 1,005 |
-| \`skip-link\` | 25,441 | 9,852 | 8,690 | 2,779 | 968 | 664 |
-| \`slider\` | 67,842 | 20,140 | 18,004 | 28,109 | 6,167 | 4,953 |
-| \`sparkline\` | 53,442 | 18,851 | 16,823 | 11,422 | 3,470 | 2,793 |
-| \`spatial-heatmap\` | 122,253 | 40,833 | 35,876 | 40,379 | 11,664 | 9,447 |
-| \`spatial-scatter-chart\` | 105,573 | 36,235 | 31,930 | 25,715 | 7,728 | 6,116 |
-| \`spatial-surface-chart\` | 106,704 | 36,932 | 32,594 | 26,782 | 8,346 | 6,763 |
-| \`speed-dial\` | 75,797 | 26,105 | 23,146 | 17,946 | 4,388 | 3,365 |
-| \`splitter\` | 49,804 | 16,208 | 14,471 | 20,431 | 4,916 | 3,949 |
-| \`stat\` | 28,117 | 10,372 | 9,280 | 5,156 | 1,472 | 1,088 |
-| \`steps\` | 67,449 | 21,378 | 19,014 | 27,419 | 6,623 | 5,388 |
-| \`strands\` | 62,138 | 23,151 | 20,383 | 38,013 | 13,698 | 11,732 |
-| \`switch\` | 43,562 | 14,637 | 13,011 | 5,998 | 1,760 | 1,308 |
-| \`table\` | 135,900 | 40,155 | 34,988 | 62,694 | 15,564 | 12,603 |
-| \`tabs\` | 55,263 | 17,753 | 15,850 | 19,437 | 4,744 | 3,697 |
-| \`tag\` | 47,247 | 16,757 | 14,968 | 13,015 | 3,633 | 2,852 |
-| \`text\` | 28,756 | 9,943 | 8,755 | 7,397 | 1,530 | 1,096 |
-| \`textarea\` | 47,785 | 15,949 | 14,233 | 9,319 | 2,649 | 1,972 |
-| \`time-input\` | 193,597 | 56,836 | 49,544 | 72,826 | 16,608 | 13,456 |
-| \`time-picker\` | 111,928 | 33,946 | 29,861 | 46,255 | 11,612 | 9,259 |
-| \`timeline\` | 38,179 | 13,327 | 11,921 | 10,948 | 2,704 | 2,072 |
-| \`toast\` | 58,767 | 19,783 | 17,649 | 20,007 | 5,392 | 4,230 |
-| \`toggle\` | 50,439 | 16,510 | 14,665 | 10,856 | 3,075 | 2,487 |
-| \`toolbar\` | 33,726 | 12,066 | 10,723 | 7,823 | 2,165 | 1,548 |
-| \`tooltip\` | 61,420 | 21,834 | 19,363 | 11,221 | 3,098 | 2,367 |
-| \`tour\` | 93,708 | 30,741 | 27,203 | 29,782 | 7,474 | 5,891 |
-| \`tree\` | 76,275 | 24,652 | 21,958 | 25,874 | 6,891 | 5,510 |
-| \`trend\` | 31,231 | 12,050 | 10,722 | 4,983 | 1,582 | 1,179 |
-| \`video\` | 161,715 | 47,867 | 41,857 | 86,708 | 20,441 | 16,948 |
-| \`video-playlist\` | 143,639 | 44,278 | 38,893 | 58,711 | 14,180 | 11,638 |
-| \`virtual-list\` | 65,445 | 22,138 | 19,702 | 25,281 | 7,664 | 6,196 |
+| \`accordion\` | 35,311 | 12,653 | 11,212 | 8,743 | 2,444 | 2,007 |
+| \`announcement\` | 41,307 | 14,365 | 12,835 | 9,277 | 2,478 | 1,934 |
+| \`app-header\` | 37,449 | 13,103 | 11,680 | 11,015 | 2,965 | 2,383 |
+| \`area-chart\` | 98,393 | 33,576 | 29,689 | 22,128 | 6,245 | 4,988 |
+| \`aura\` | 56,731 | 19,524 | 17,294 | 29,771 | 9,256 | 7,782 |
+| \`avatar\` | 33,464 | 12,351 | 11,051 | 6,945 | 1,965 | 1,623 |
+| \`badge\` | 32,595 | 11,821 | 10,534 | 8,436 | 2,150 | 1,800 |
+| \`bar-chart\` | 108,944 | 35,726 | 31,545 | 32,531 | 8,343 | 6,831 |
+| \`blockquote\` | 26,332 | 9,968 | 8,824 | 4,611 | 1,417 | 1,225 |
+| \`breadcrumbs\` | 43,220 | 15,115 | 13,467 | 14,282 | 3,648 | 2,955 |
+| \`button\` | 41,612 | 14,008 | 12,463 | 11,321 | 2,870 | 2,184 |
+| \`button-group\` | 31,138 | 11,066 | 9,805 | 8,407 | 2,205 | 1,804 |
+| \`callout\` | 39,049 | 14,536 | 12,903 | 6,659 | 1,916 | 1,582 |
+| \`canvas\` | 129,523 | 38,716 | 33,883 | 89,608 | 24,826 | 20,818 |
+| \`card\` | 27,725 | 10,100 | 8,972 | 5,976 | 1,633 | 1,373 |
+| \`carousel\` | 54,063 | 17,259 | 15,485 | 25,704 | 6,036 | 4,941 |
+| \`chat\` | 94,674 | 29,166 | 25,855 | 42,730 | 10,802 | 8,767 |
+| \`checkbox\` | 46,865 | 15,190 | 13,546 | 9,580 | 2,483 | 2,007 |
+| \`checkbox-group\` | 54,826 | 17,245 | 15,350 | 15,537 | 3,997 | 3,090 |
+| \`code\` | 21,154 | 8,332 | 7,401 | 976 | 381 | 441 |
+| \`code-block\` | 127,213 | 38,715 | 34,203 | 61,298 | 14,675 | 12,130 |
+| \`color-input\` | 184,176 | 51,349 | 44,924 | 97,504 | 20,447 | 17,138 |
+| \`color-picker\` | 140,348 | 38,509 | 33,783 | 84,175 | 18,134 | 15,255 |
+| \`combobox\` | 147,503 | 44,927 | 39,514 | 51,252 | 12,065 | 9,828 |
+| \`command\` | 110,838 | 33,879 | 29,802 | 41,331 | 10,481 | 8,632 |
+| \`copy-button\` | 92,577 | 29,826 | 26,387 | 30,351 | 7,146 | 5,750 |
+| \`data-table\` | 230,715 | 66,816 | 57,279 | 120,287 | 29,326 | 23,863 |
+| \`date-input\` | 162,349 | 48,216 | 42,409 | 59,338 | 13,171 | 10,902 |
+| \`date-picker\` | 69,281 | 22,361 | 19,960 | 28,248 | 7,038 | 5,690 |
+| \`description-list\` | 25,855 | 9,517 | 8,462 | 4,508 | 1,254 | 1,048 |
+| \`dialog\` | 43,407 | 14,900 | 13,271 | 10,933 | 3,021 | 2,446 |
+| \`divider\` | 25,291 | 9,545 | 8,432 | 3,698 | 1,124 | 869 |
+| \`donut-chart\` | 99,170 | 33,263 | 29,428 | 24,574 | 6,693 | 5,419 |
+| \`drawer\` | 48,772 | 16,543 | 14,744 | 13,511 | 3,736 | 3,005 |
+| \`drilldown\` | 48,438 | 16,237 | 14,483 | 15,376 | 4,007 | 3,121 |
+| \`empty\` | 25,550 | 9,762 | 8,646 | 3,242 | 1,092 | 941 |
+| \`file-input\` | 69,285 | 22,420 | 19,915 | 24,610 | 6,500 | 5,334 |
+| \`filter-input\` | 108,688 | 34,991 | 30,973 | 32,463 | 8,378 | 6,810 |
+| \`flex\` | 25,740 | 9,194 | 8,149 | 4,762 | 1,032 | 900 |
+| \`format-date\` | 30,414 | 11,403 | 10,192 | 4,669 | 1,383 | 1,119 |
+| \`graph\` | 91,503 | 27,441 | 24,207 | 38,992 | 9,539 | 7,723 |
+| \`grid\` | 27,002 | 9,846 | 8,729 | 5,637 | 1,435 | 1,217 |
+| \`heatmap\` | 106,453 | 35,371 | 31,194 | 27,245 | 7,426 | 5,991 |
+| \`icon\` | 83,995 | 28,568 | 24,460 | 60,128 | 20,162 | 16,446 |
+| \`icon-button\` | 43,040 | 13,980 | 12,448 | 12,750 | 2,859 | 2,175 |
+| \`image\` | 26,892 | 9,946 | 8,805 | 5,192 | 1,599 | 1,236 |
+| \`input\` | 50,619 | 17,064 | 15,059 | 11,592 | 3,501 | 2,612 |
+| \`kbd\` | 29,504 | 11,109 | 9,827 | 5,494 | 1,668 | 1,298 |
+| \`legend\` | 40,423 | 14,214 | 12,625 | 8,066 | 2,255 | 1,798 |
+| \`lightbox\` | 62,016 | 20,153 | 17,926 | 23,004 | 5,960 | 4,695 |
+| \`line-chart\` | 102,454 | 34,257 | 30,343 | 25,861 | 6,815 | 5,633 |
+| \`list\` | 68,150 | 22,815 | 20,352 | 21,568 | 5,925 | 4,735 |
+| \`listbox\` | 81,154 | 26,542 | 23,472 | 19,991 | 5,668 | 4,397 |
+| \`loader\` | 29,263 | 10,816 | 9,648 | 5,641 | 1,684 | 1,405 |
+| \`map\` | 112,126 | 29,779 | 26,161 | 69,978 | 15,410 | 12,538 |
+| \`megamenu\` | 64,996 | 22,865 | 20,223 | 13,545 | 3,529 | 2,749 |
+| \`menu\` | 108,403 | 34,708 | 30,605 | 41,092 | 10,114 | 8,249 |
+| \`meter\` | 37,896 | 13,377 | 11,956 | 11,049 | 2,795 | 2,409 |
+| \`motion-toggle\` | 27,312 | 10,459 | 9,290 | 3,044 | 972 | 739 |
+| \`navigation\` | 36,814 | 13,269 | 11,771 | 7,076 | 2,006 | 1,662 |
+| \`notifications\` | 71,839 | 22,457 | 20,073 | 31,690 | 7,637 | 6,244 |
+| \`number-input\` | 61,253 | 20,026 | 17,843 | 18,489 | 4,793 | 3,688 |
+| \`object-inspector\` | 130,338 | 41,203 | 36,246 | 51,885 | 13,166 | 10,680 |
+| \`option\` | 29,672 | 10,762 | 9,547 | 7,711 | 2,181 | 1,703 |
+| \`orb\` | 35,926 | 13,696 | 12,216 | 9,732 | 3,657 | 3,041 |
+| \`outline\` | 37,846 | 13,458 | 11,935 | 12,073 | 3,434 | 2,795 |
+| \`pagination\` | 153,264 | 46,927 | 40,897 | 62,367 | 15,173 | 12,332 |
+| \`pin-input\` | 50,409 | 17,316 | 15,429 | 10,057 | 3,146 | 2,424 |
+| \`popover\` | 67,005 | 23,749 | 21,047 | 9,507 | 2,642 | 1,984 |
+| \`progress\` | 35,232 | 12,380 | 11,028 | 10,100 | 2,587 | 2,299 |
+| \`qr-code\` | 44,321 | 17,121 | 15,238 | 18,585 | 6,758 | 5,743 |
+| \`quote\` | 23,074 | 9,078 | 8,006 | 1,751 | 686 | 571 |
+| \`radio\` | 50,349 | 15,975 | 14,202 | 11,592 | 2,738 | 2,195 |
+| \`rating\` | 54,190 | 18,516 | 16,485 | 11,944 | 3,635 | 2,787 |
+| \`sandbox\` | 104,428 | 31,486 | 27,628 | 72,147 | 19,191 | 16,187 |
+| \`scatter-chart\` | 100,317 | 33,785 | 29,860 | 25,193 | 6,964 | 5,695 |
+| \`scroll-area\` | 35,437 | 12,026 | 10,705 | 13,489 | 3,564 | 2,789 |
+| \`select\` | 124,418 | 40,070 | 35,163 | 35,145 | 9,049 | 7,195 |
+| \`skeleton\` | 26,090 | 9,664 | 8,581 | 4,738 | 1,387 | 1,202 |
+| \`skip-link\` | 25,441 | 9,851 | 8,690 | 2,779 | 953 | 823 |
+| \`slider\` | 67,842 | 20,140 | 18,019 | 28,107 | 6,148 | 5,049 |
+| \`sparkline\` | 53,442 | 18,851 | 16,822 | 11,419 | 3,468 | 2,868 |
+| \`spatial-bar-chart\` | 110,308 | 37,931 | 33,402 | 28,452 | 8,506 | 6,876 |
+| \`spatial-heatmap\` | 123,212 | 40,987 | 36,065 | 41,313 | 11,816 | 9,680 |
+| \`spatial-ribbon-chart\` | 109,556 | 37,551 | 33,172 | 29,518 | 8,943 | 7,299 |
+| \`spatial-scatter-chart\` | 107,852 | 36,785 | 32,440 | 27,865 | 8,210 | 6,665 |
+| \`spatial-surface-chart\` | 110,231 | 38,002 | 33,563 | 30,194 | 9,344 | 7,791 |
+| \`spatial-treemap\` | 111,658 | 38,742 | 34,076 | 29,924 | 9,353 | 7,604 |
+| \`speed-dial\` | 75,797 | 26,105 | 23,181 | 17,945 | 4,385 | 3,405 |
+| \`splitter\` | 49,804 | 16,207 | 14,470 | 20,430 | 4,897 | 3,950 |
+| \`stat\` | 28,117 | 10,371 | 9,280 | 5,156 | 1,447 | 1,168 |
+| \`steps\` | 67,449 | 21,378 | 19,083 | 27,416 | 6,615 | 5,400 |
+| \`strands\` | 62,788 | 23,354 | 20,586 | 38,012 | 13,681 | 12,054 |
+| \`switch\` | 43,562 | 14,638 | 13,034 | 5,998 | 1,756 | 1,363 |
+| \`table\` | 135,900 | 40,155 | 35,008 | 62,691 | 15,519 | 12,755 |
+| \`tabs\` | 55,263 | 17,752 | 15,793 | 19,435 | 4,713 | 3,864 |
+| \`tag\` | 47,247 | 16,757 | 14,963 | 13,012 | 3,667 | 2,854 |
+| \`text\` | 28,756 | 9,943 | 8,755 | 7,394 | 1,497 | 1,237 |
+| \`textarea\` | 47,785 | 15,949 | 14,232 | 9,317 | 2,646 | 2,152 |
+| \`time-input\` | 193,597 | 56,836 | 49,550 | 72,822 | 16,543 | 13,577 |
+| \`time-picker\` | 111,928 | 33,946 | 29,864 | 46,251 | 11,611 | 9,301 |
+| \`timeline\` | 38,179 | 13,327 | 11,920 | 10,945 | 2,702 | 2,237 |
+| \`toast\` | 58,767 | 19,783 | 17,679 | 20,004 | 5,404 | 4,356 |
+| \`toggle\` | 50,439 | 16,508 | 14,664 | 10,854 | 3,075 | 2,441 |
+| \`toolbar\` | 33,726 | 12,065 | 10,722 | 7,821 | 2,144 | 1,663 |
+| \`tooltip\` | 61,420 | 21,834 | 19,333 | 11,218 | 3,096 | 2,449 |
+| \`tour\` | 93,708 | 30,741 | 27,206 | 29,780 | 7,465 | 6,026 |
+| \`tree\` | 76,275 | 24,652 | 21,951 | 25,873 | 6,878 | 5,567 |
+| \`trend\` | 31,231 | 12,049 | 10,721 | 4,980 | 1,533 | 1,210 |
+| \`video\` | 162,777 | 48,192 | 42,068 | 87,167 | 20,548 | 17,055 |
+| \`video-playlist\` | 143,639 | 44,277 | 38,909 | 58,705 | 14,169 | 11,826 |
+| \`virtual-list\` | 65,445 | 22,138 | 19,686 | 25,281 | 7,639 | 6,251 |
 
 ## What an install adds to \`node_modules\`
 
@@ -4784,12 +4818,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,603,668 | 569 | 751,479 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
-| \`@fusion.dev/helix-headless\` | 25,885,588 | 730 | 2,329,616 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
+| \`@fusion.dev/helix-core\` | 2,613,946 | 571 | 754,871 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
+| \`@fusion.dev/helix-headless\` | 26,627,974 | 752 | 2,413,305 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 121,243 | 6 | 0 | none |
+| \`@fusion.dev/helix-styles\` | 121,521 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
-| \`@fusion.dev/helix\` | 27,261,374 | 981 | 543,384 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
+| \`@fusion.dev/helix\` | 28,180,077 | 1,005 | 553,331 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
 
 ## Not measured yet
 
@@ -4894,6 +4928,44 @@ The turning \`Loader\` slows to one turn every four seconds. A loader that stops
 looks broken, and the turn still shows that work is in progress. The pending
 ring on \`IconButton\` slows the same way.
 
+## Pause the page's motion
+
+Motion that starts by itself and runs longer than five seconds needs a way to
+pause it, under WCAG 2.2.2. \`Motion Toggle\` pauses all of it on the page at
+once, and a second press lets it run again:
+
+\`\`\`html
+<helix-motion-toggle>Pause motion</helix-motion-toggle>
+\`\`\`
+
+While the page's motion is paused:
+
+- \`Carousel\` stops rotating under \`autoplay\`.
+- \`Video\` pauses a video that started itself, and plays it again after.
+- \`Aura\`, \`Orb\`, and \`Strands\` hold the frame they show.
+- A graph that \`connectGraph\` lays out stops where its notes stand, and its
+  three.js view stops turning.
+- A map layer's \`frames\` stop on the frame they show.
+
+The choice is the page's, held on the document element as
+\`data-helix-motion="paused"\`. Set it in your markup to start the page paused,
+or call \`pauseMotion\` from \`@fusion.dev/helix-core\`, and select on the
+attribute to pause motion of your own:
+
+\`\`\`js
+import { pauseMotion } from '@fusion.dev/helix-core'
+
+pauseMotion()
+pauseMotion(false)
+\`\`\`
+
+With reduced motion set, \`Carousel\` and \`Video\` do not start by themselves,
+and a graph lays out its notes with the drawing hidden, then shows them where
+they settle.
+
+A graph layout that runs past five seconds also offers its own button, in the
+graph's frame, that stops it where the notes stand.
+
 ## Starting styles and view transitions
 
 Overlays use \`@starting-style\` to animate in. It sets a starting value and needs
@@ -6773,19 +6845,30 @@ title: Spatial charts
 
 # Spatial charts
 
-Helix has three charts drawn in three dimensions. Each reads its numbers from a
+Helix has six charts drawn in three dimensions. Each reads its numbers from a
 table in the document, as every Helix chart does:
 
+- \`Spatial Bar Chart\` stands a bar for each category and series, each as tall
+  as its value, such as signups by region and by quarter.
 - \`Spatial Heatmap\` draws a strip of days as a relief, each day a prism as tall
   as its reading.
+- \`Spatial Ribbon Chart\` draws a ribbon for each series, one behind another,
+  its top following the values across, such as latency by region over two
+  weeks.
 - \`Spatial Scatter Chart\` places each row as a point in a box, by three measures
   at once.
 - \`Spatial Surface Chart\` draws one measure as a surface over two others, such
   as load by hour and by day.
+- \`Spatial Treemap\` shares a floor out among blocks, each as large as one
+  measure and as tall as another, gathered by group, such as each service's
+  requests and its response time.
 
 Each chart draws itself in SVG. \`@fusion.dev/helix-plot\` can also draw it with
 three.js, in a view you can drag round and zoom.
 
+**Every spatial chart is experimental**, so its API can change.
+[Versioning](./versioning#stability) lists each status.
+
 ## Draw a spatial chart
 
 Put the table in the document, and point the chart at it with \`for\`:
@@ -6815,12 +6898,25 @@ Put the table in the document, and point the chart at it with \`for\`:
 
 Each chart reads its columns in its own way:
 
+- **Spatial Bar Chart** reads its table as \`Bar Chart\` does: each row is a
+  category, and each numeric column a series. Categories run across and series
+  back in depth, the first series in front, so one series is a single row of
+  bars.
+- **Spatial Ribbon Chart** reads its table as \`Line Chart\` does: each row is a
+  place along the ribbons, and each numeric column a series. Places run across
+  and series back in depth, the first series in front. A place with no reading
+  ends a ribbon short.
 - **Spatial Scatter Chart** takes the first three numeric columns as across, up,
   and in depth. \`group-by\` names a column of text that colors each point by its
   group.
 - **Spatial Surface Chart** takes the first numeric column as across, the second
   as depth, and the third as the height. A place on the grid with no reading
   leaves a hole.
+- **Spatial Treemap** takes the first numeric column as each block's size, its
+  share of the floor, and the second as its height. \`group-by\` names a column
+  of text that gathers its rows into one part of the floor, in one color. With
+  no second numeric column, the blocks stand as one slab. A row with no size
+  is left out.
 - **Spatial Heatmap** reads its table as \`Heatmap\` does, down each column of
   \`rows\` and then across. Its table goes inside it.
 
@@ -6858,9 +6954,12 @@ Each chart has its own connector and driver:
 
 | Chart | Connector | Driver |
 |---|---|---|
+| \`Spatial Bar Chart\` | \`connectSpatialBarChart\` | \`threeBarDriver\` |
 | \`Spatial Heatmap\` | \`connectSpatialHeatmap\` | \`threeHeatmapDriver\` |
+| \`Spatial Ribbon Chart\` | \`connectSpatialRibbonChart\` | \`threeRibbonDriver\` |
 | \`Spatial Scatter Chart\` | \`connectSpatialScatterChart\` | \`threeScatterDriver\` |
 | \`Spatial Surface Chart\` | \`connectSpatialSurfaceChart\` | \`threeSurfaceDriver\` |
+| \`Spatial Treemap\` | \`connectSpatialTreemap\` | \`threeTreemapDriver\` |
 
 \`Spatial Heatmap\` takes the element in its \`renderer\` slot, because its table
 is inside it:
@@ -6898,10 +6997,60 @@ Chromium on an Apple silicon Mac:
 | \`Spatial Scatter Chart\` | 2,000 points | 5,000 points: 67 ms a turn step |
 | \`Spatial Surface Chart\` | 900 readings, a grid of 30 by 30 | 1,600 readings: 50 ms, and 3,600: 113 ms |
 | \`Spatial Heatmap\` | 365 days | 730 days: 50 ms, and 1,825: 132 ms |
+| \`Spatial Bar Chart\` | 400 bars | 800 bars: 66 ms, and 1,600: 124 ms |
+| \`Spatial Ribbon Chart\` | 800 readings | 1,600 readings: 50 ms, and 3,200: 83 ms |
+| \`Spatial Treemap\` | 400 blocks | 800 blocks: 68 ms, and 1,600: 151 ms |
 
 A slower machine reaches these sizes sooner. three.js draws each chart on the
 graphics card.
 
+## Read a place more closely
+
+Two options help you read where a reading stands:
+
+- \`drop-lines\` on \`Spatial Scatter Chart\` draws a line from each point straight
+  down to the floor, in its group's color, so where a point stands across and in
+  depth reads off the floor's grid.
+- \`contours\` on \`Spatial Surface Chart\` draws the surface's contour lines on it,
+  at each tick of its height, so its shape reads as on a map, and two places at
+  the same height read as such.
+
+three.js draws both as well.
+
+## Draw a chart for a landing page
+
+\`no-box\` draws \`Spatial Bar Chart\`, \`Spatial Ribbon Chart\`, \`Spatial Scatter
+Chart\`, \`Spatial Surface Chart\`, or \`Spatial Treemap\` with no box, grid,
+numbers, or names, and nothing behind it, so the readings stand on the page as
+a picture does:
+
+\`\`\`html
+<helix-spatial-surface-chart
+  emphasis="outlined"
+  for="load"
+  label="Load over a week"
+  no-box
+></helix-spatial-surface-chart>
+\`\`\`
+
+The table, the summary, the tooltip, and the keys still carry every value, and
+three.js draws no box either. \`Spatial Heatmap\` has no box, and its \`start\` and
+\`end\` slots are the only names it draws, so leave them empty for the same
+picture.
+
+## When a 3D bar or ribbon chart fits
+
+A flat \`Bar Chart\` is read more exactly. Studies of 3D bars measure readers
+judging a value less closely than on flat ones, and a bar can stand behind
+another. Use \`Spatial Bar Chart\` where the shape across two sets of names
+matters more than any one value, such as which regions grew in which quarters.
+A drag turns the view to show a bar another hides, and the tooltip and the
+table carry every exact value.
+
+The same holds for \`Spatial Ribbon Chart\` beside \`Line Chart\`. Use it where
+series cross often enough that their lines tangle, and each in its own depth
+reads apart.
+
 ## Read a chart with the pointer and the keys
 
 A pointer resting on a reading shows its row in the chart's tooltip, the same
@@ -6921,6 +7070,15 @@ The plot takes focus, and the keys move the reading:
 | Enter, Space | Presses the point | Presses the place |
 | Escape | Lets the reading go | Lets the reading go |
 
+\`Spatial Bar Chart\` reads as \`Spatial Surface Chart\` does: the left and right
+arrows move from category to category, and the down and up arrows from series to
+series. \`Spatial Ribbon Chart\` reads the same way, from place to place along a
+ribbon and from ribbon to ribbon.
+
+\`Spatial Treemap\` reads as \`Spatial Scatter Chart\` does: the left and right
+arrows move from item to item in the table's order, and the down and up arrows
+among the item's measures.
+
 \`Spatial Heatmap\` takes \`Heatmap\`'s keys, and Shift with an arrow turns its
 view, except under \`selection-mode="multiple"\`, where it selects a range.
 
@@ -6928,8 +7086,9 @@ In three.js, a step of Shift with an arrow moves over a quarter of a second,
 and with reduced motion set it happens at once. In the SVG drawing, a step
 happens at once, and a drag turns the view as the pointer moves. Both drawings
 turn round the middle of the data and keep their size through a drag, so
-nothing else on the page moves. Once the drag ends, the SVG drawing settles
-into the space that fits it, at once with reduced motion set. No spatial chart
+nothing else on the page moves. Once a drag or a step ends, each settles into
+the space that fits it, at once with reduced motion set. three.js keeps the
+zoom you chose. No spatial chart
 turns by itself.
 
 The numbers and names stand outside the box, along the edges that face the
@@ -6941,17 +7100,36 @@ the two ends of its front edge, clear of the relief.
 
 Each chart takes its colors from your theme, and these hooks change them:
 
+- **Spatial Bar Chart**: each series takes a series color,
+  \`--chart-series-1\` and on, and each face of a bar is that color darkened by
+  how far it turns from the light.
+- **Spatial Ribbon Chart**: each series takes a series color, \`--chart-series-1\`
+  and on, and each face of a ribbon is that color darkened by how far it turns
+  from the light.
 - **Spatial Scatter Chart**: each group takes a series color,
   \`--chart-series-1\` and on.
 - **Spatial Surface Chart**: the surface is shaded from \`--spatial-surface-chart-low\`
   to \`--spatial-surface-chart-high\`.
+- **Spatial Treemap**: each group takes a series color, \`--chart-series-1\` and
+  on, and each face of a block is that color darkened by how far it turns from
+  the light.
 - **Spatial Heatmap**: each day takes its tone's color, as on \`Heatmap\`:
   \`--heatmap-tone-1\` to \`--heatmap-tone-5\` along the ramp, or a named tone such
   as \`--heatmap-tone-success\`. \`--spatial-heatmap-left-shade\` and
   \`--spatial-heatmap-right-shade\` set how much less light each side of a prism
   is than its top.
 
-three.js reads the same colors, so the two drawings agree. It lights the
+\`emphasis\` and \`material\` change how the marks are drawn, as on every chart:
+
+- \`emphasis="outlined"\` draws each mark as its edge over a fill faded toward
+  the page. On \`Spatial Surface Chart\` it is a wireframe.
+- \`emphasis="subtle"\` draws a faint wash under the same edge, which shows what
+  stands behind a prism, a point, or a fold of the surface.
+- \`material="glass"\` lets the most of what is behind each mark through, and
+  \`material="frosted"\` less.
+
+three.js reads the same colors, \`emphasis\`, and \`material\`, so the two drawings
+agree. It lights the
 prisms and the surface itself, so the two shade hooks apply to the SVG drawing
 alone.