@fusion.dev/helix-docs 0.104.1 → 0.105.0

package/content/metrics.mdx

@@ -1,5 +1,5 @@
 ---
-description: What Helix costs a page, measured rather than claimed.
+description: How much Helix adds to a page, measured from the built packages.
 order: 7
 section: Getting started
 title: Metrics
@@ -7,152 +7,151 @@ title: Metrics
 
 # Metrics
 
-*Generated by `bun run gen:metrics` from the built packages. Do not edit: every
-number here is measured, and an edited one is a number nothing produced.*
+*Generated by `bun run gen:metrics` from the built packages. Do not edit the
+page by hand, because every number on it comes from a measurement.*
 
-Bundle size, and what a component costs in time. The two are kept apart on
-purpose: bytes are falsifiable across systems and belong in the comparison,
-and a render timing is a fact about a page, a machine and a day, so it never
-joins one.
+We measure Helix in two ways: the bytes it adds to your page, and the time its
+components take to render. We compare the bytes with other systems, because
+you can check a byte count on any machine. We keep the timings out of that
+comparison, because a timing depends on the page, the machine, and the day.
 
-## How these are measured
+## How we measure
 
-The method is on the page because a size table without one is a claim rather
-than a measurement.
+We publish the method so you can repeat each measurement.
 
-- **The published artifact, not the source.** Each row bundles `dist`, which is what npm ships, through Bun 1.1.43, minified, ESM, browser target, no source maps.
-- **Everything is bundled in, Lit included.** A page with no other Lit library pays for Lit, so it is counted. Its own row is in the package table below, so it can be subtracted.
-- **A package row re-exports the package; a component row imports it for effect.** That is how each is used: an element is imported to register itself, and a package is measured by its whole public API. Importing a `sideEffects: false` package for effect measures nothing, because a bundler is right to delete it.
-- **Gzip is level 9 and brotli is quality 11**, which is what a CDN serving static assets does.
-- **The bundler version is part of the number.** It is pinned in `packageManager` and in CI, so the same source measures the same in both places.
+- **The published files.** Each row bundles `dist`, the files npm ships, with Bun 1.1.43. The bundle is minified ESM for the browser, with no source maps.
+- **Everything is bundled, including Lit.** A page with no other Lit library downloads Lit, so we count it. Lit has its own row in the package table below, so you can subtract it.
+- **A package row re-exports the package, and a component row imports the component for effect.** You import an element to register it, so a component row measures that import. A package row measures the whole public API. Importing a `sideEffects: false` package for effect measures nothing, because the bundler removes it.
+- **Gzip runs at level 9 and brotli at quality 11**, the settings a CDN uses for static assets.
+- **The bundler version affects the numbers.** It is pinned in `packageManager` and in CI, so the same source gives the same numbers in both places.
 
-Two columns for every component, because there is no single honest number for
-a component in a library with a shared runtime:
+Each component has two columns. Components share a runtime, so no single
+number gives the cost of one component:
 
-- **Alone** is a page that uses this component and nothing else. It includes the runtime the component cannot work without, so it counts that runtime again for every component after the first.
-- **Added** is what this component costs a page that already has the runtime. It excludes what is shared, so it flatters the first component you install.
+- **Alone** is a page that uses the component and nothing else. It includes the runtime the component needs, so a sum of Alone numbers counts the runtime once for every component.
+- **Added** is what the component adds to a page that already has the runtime. It leaves out the shared runtime, so it understates the cost of your first component.
 
-Neither is the real number. The pair brackets it.
+The cost on your page falls between the two numbers.
 
-## The floor
+## The shared runtime
 
-Lit and `@fusion.dev/helix-core`, which is what every element needs and no element
-owns. **Added** is measured against this.
+The shared runtime is Lit and `@fusion.dev/helix-core`. Every element needs it,
+and no single element owns it. The Added columns are measured against it.
 
-**It is larger than most single components below, and that is not a mistake.**
-The floor re-exports the whole of `@fusion.dev/helix-core` so that it is the same size
-under every family. A family that reaches only part of core shakes the rest
-out and comes in smaller than the floor, which is the tree-shaking working:
-nobody ever downloads this floor on its own.
+The shared runtime is larger than most single components below. It re-exports
+all of `@fusion.dev/helix-core`, so it is the same size under every family. A
+family that uses only part of core leaves the rest out of its bundle, and can
+come in smaller than the shared runtime. No page downloads the shared runtime
+on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and `@fusion.dev/helix-core` | 167,209 | 54,066 | 45,791 |
+| Lit and `@fusion.dev/helix-core` | 167,631 | 54,135 | 45,804 |
 
 ## Whole packages
 
-Everything a package exports, retained. This is the ceiling rather than a
-typical page: `@fusion.dev/helix` and `@fusion.dev/helix-headless` are side-effectful, so
-a barrel import of either really does cost the whole row, and nothing in this
-repository does that. The per-component tables are what a page pays.
+Each row keeps everything a package exports, so it is the most the package can
+cost. `@fusion.dev/helix` and `@fusion.dev/helix-headless` have side effects, so a
+barrel import of either costs the whole row. Nothing in this repository imports
+either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| `@fusion.dev/helix-core` | 166,763 | 53,662 | 45,511 | Element base class, mixins, decorators, floating positioning. |
-| `@fusion.dev/helix-headless` | 679,245 | 176,721 | 137,416 | Every headless family, which is what the barrel means. |
+| `@fusion.dev/helix-core` | 167,185 | 53,719 | 45,579 | The element base class, mixins, decorators, and floating positioning. |
+| `@fusion.dev/helix-headless` | 692,504 | 179,427 | 139,511 | Every headless family. The barrel entry includes all of them. |
 | `@fusion.dev/helix-icons` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
-| `@fusion.dev/helix-theme` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
-| `@fusion.dev/helix` | 1,179,594 | 277,791 | 203,945 | Every styled family. |
-| `lit` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
+| `@fusion.dev/helix-theme` | 3,288 | 1,571 | 1,355 | The derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
+| `@fusion.dev/helix` | 1,213,542 | 284,037 | 207,956 | Every styled family. |
+| `lit` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
-## The stylesheets
+## Stylesheets
 
-Linked rather than bundled, so these are the files exactly as a browser
-receives them. `@fusion.dev/helix-styles` ships its stylesheets with the comments
-removed and keeps the reasoning in the repository, which is why these numbers
-are a quarter of what the sources weigh. It has no JavaScript at all, so this
-is the whole cost of adopting the base layer on its own.
+You link these files directly, so the sizes are the files as a browser
+receives them. `@fusion.dev/helix-styles` ships its stylesheets without comments
+and keeps the commented sources in the repository. The shipped files are a
+quarter of the size of the sources. The package has no JavaScript, so the table
+shows the whole cost of using the base layer on its own.
 
 | File | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| `base.css` | 30,672 | 4,430 | 3,844 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
-| `elements.css` | 8,174 | 1,388 | 1,250 | Hides each element until its definition loads, generated from the tags in `@fusion.dev/helix`. |
-| `helix.css` | 207 | 148 | 118 | The four above in one import, in the order they have to be in. |
-| `primitives.css` | 6,390 | 1,260 | 1,084 | The primitive layer. Private, shipped because `tokens.css` resolves into it. |
-| `tokens.css` | 20,987 | 2,567 | 2,138 | The 191 semantic tokens. Nothing paints without this. |
+| `base.css` | 30,672 | 4,430 | 3,844 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
+| `elements.css` | 8,457 | 1,433 | 1,282 | Hides each element until its definition loads. It is generated from the tags in `@fusion.dev/helix`. |
+| `helix.css` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
+| `primitives.css` | 6,390 | 1,260 | 1,084 | The primitive layer. It is private, and it ships because `tokens.css` refers to it. |
+| `tokens.css` | 20,987 | 2,567 | 2,138 | The 191 semantic tokens. Every styled component needs them. |
 
 ## What the numbers say
 
-**Most of a first component is the runtime under it.** The median styled family is 17,749 bytes gzipped alone and adds 2,176 to a page that already has Helix on it, so 88 percent of the first one is shared and 12 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
+**Most of your first component is the shared runtime.** The median styled family is 19,792 bytes gzipped alone, and it adds 2,196 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the tier: the cheapest is `code` at 9,701 gzipped alone, the dearest `data-table` at 59,924, over 103 components. Every family at once is 277,791.
+Across the 103 styled components, the smallest is `code` at 9,746 bytes gzipped alone, and the largest is `data-table` at 59,994. Every family together is 284,037.
 
-**No family imports a barrel, and the `barrels` rule in `fusion workspace` is what keeps it that way.** `@fusion.dev/helix-headless` is `sideEffects` over every module in `dist`, which is true of a file that calls `customElements.define` and which means a bundler may drop none of it: one `import { HelixHeadlessButton } from '@fusion.dev/helix-headless'` costs 176,721 bytes gzipped whatever else the page does, which is 10 times the median family measured above. The styled tier imports the family it extends instead, all 103 of them, and the check refuses the shape rather than the package name, so the rule follows `sideEffects` wherever it goes.
+No family imports a barrel. The `barrels` rule in `fusion workspace` enforces that. `@fusion.dev/helix-headless` marks every module in `dist` as having side effects, which is true of a file that calls `customElements.define`. A bundler can remove none of it. One `import { HelixHeadlessButton } from '@fusion.dev/helix-headless'` costs 179,427 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 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, and it is the control: `@fusion.dev/helix-core` is `sideEffects: false`, and a headless family is a median of 20,633 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 20,674 bytes gzipped alone.
 
-## Against other systems
+## Compared with other systems
 
-Four other libraries of custom elements, pinned and measured on 2026-08-24 by `turbo run peers`, which installs them into `.local` and bundles them through the harness that produced everything above. **Helix's own rows are measured on every run of `bun run gen:metrics`**, so the column that could go stale against this repository is the one that cannot.
+We compare Helix with four other libraries of custom elements. `turbo run peers` measured them on 2026-08-24. It installs pinned versions into `.local` and bundles them with the same harness as the tables above. The Helix rows are measured on every run of `bun run gen:metrics`, so they always match this repository.
 
-**Every system here is built on Lit**, so the runtime under the comparison is the same library in every column and what is left is the components. A React component library is not in the table, because comparing a custom element with a React component measures the framework.
+Every system in the table is built on Lit. The runtime is the same library in every column, so the differences come from the components. React component libraries are left out, because comparing a custom element with a React component would measure the framework.
 
-**There is no whole-library row**, deliberately. It would compare how many components each vendor decided to ship, and how each one counts a component, which is the number that looks most like a measurement and means least. Five components every one of these has is the comparison.
+The table has no whole-library row. That row would compare how many components each vendor ships and how each vendor counts a component. It would look like a measurement and mean little. The table compares five components that every system has.
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| `button` | **Helix** | 41,582 | 12,277 | 10,803 |
+| `button` | **Helix** | 41,947 | 12,322 | 10,856 |
 | | 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** | 45,986 | 13,465 | 11,834 |
+| `checkbox` | **Helix** | 46,351 | 13,506 | 11,862 |
 | | 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** | 38,816 | 11,888 | 10,487 |
+| `dialog` | **Helix** | 39,181 | 11,931 | 10,532 |
 | | 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** | 49,852 | 13,985 | 12,294 |
+| `radio` | **Helix** | 50,217 | 14,033 | 12,351 |
 | | 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,362 | 13,045 | 11,460 |
+| `switch` | **Helix** | 43,727 | 13,096 | 11,526 |
 | | 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** | 45,127 | 13,247 | 11,644 |
+| `tabs` | **Helix** | 45,492 | 13,287 | 11,706 |
 | | 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** | 65,707 | 21,725 | 19,226 |
+| `tooltip` | **Helix** | 66,072 | 21,770 | 19,269 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 
-**Where Helix loses**, which is the half of a comparison table worth reading: `dialog`, `radio`, `switch`, `tabs`, `tooltip`. The largest gap is radio against Spectrum, by 3,325 bytes gzipped. 7 of 28 peer measurements come in under ours.
+At least one system is smaller than Helix on `dialog`, `radio`, `switch`, `tabs`, `tooltip`. The largest gap is radio against Spectrum, at 3,373 bytes gzipped. 7 of 28 peer measurements are smaller than the Helix row.
 
 - **Carbon** `@carbon/web-components@2.61.0`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
 - **Material Web** `@material/web@2.5.0`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
 - **Shoelace** `@shoelace-style/shoelace@2.20.1`. Its tabs element is Tab Group.
 - **Spectrum** `@spectrum-web-components/button@1.12.2`. One package per component, so there is no barrel to import by accident.
 
-Every specifier measured is in [`peers.json`](https://github.com/project-fusion/fusion/blob/main/helix/docs/peers.json), so a disagreement with these numbers is a thing that can be run rather than argued.
+Every specifier we measured is in [`peers.json`](https://github.com/project-fusion/fusion/blob/main/helix/docs/peers.json), so you can run the same measurement yourself.
 
-## What it costs in time
+## What a component costs in time
 
-Measured on 2026-08-26 by `turbo run timings`, which drives a real browser against the built packages. The median of 9 runs each, on one machine.
+`turbo run timings` measured these on 2026-08-26 by loading the built packages in a real browser. Each figure is the median of 9 runs on one machine.
 
-**These never join the comparison above, and that is not a hedge.** Bytes are a fact about a package and can be held against anybody else's. A timing is a fact about a page, a machine and a day, so a column of somebody else's milliseconds would be comparing two laptops rather than two libraries.
+We do not compare these timings with other systems. A byte count belongs to a package, so you can compare it with any other package. A timing depends on the page, the machine, and the day. Timings from another library, measured on another machine, would show the difference between the two machines.
 
-**Nothing checks these.** A timing moves several percent between runs on one machine and much further between machines, so a gate on it would fail for reasons nobody caused, which is the fastest way to teach a team that red means nothing. `verify` does not run it. It is refreshed by hand, the same as the peer table, and the date above is the answer to how current it is.
+No check runs on these timings. A timing moves several percent between runs on one machine, and much more between machines. A check on it would fail when no code changed, and a team soon learns to ignore a check like that. `verify` does not run the measurement. We refresh it by hand, like the peer table, and the date above shows how current it is.
 
 | Component | Time to upgrade | First render | Hydration |
 | --- | --- | --- | --- |
@@ -162,257 +161,255 @@ Measured on 2026-08-26 by `turbo run timings`, which drives a real browser again
 | `tabs` | 6.60ms | 0.10ms | 6.90ms |
 | `tooltip` | 6.90ms | 0.10ms | 7.00ms |
 
-**Time to upgrade** is the gap between markup being in the document and its shadow root existing, which is the flash of unstyled content that server rendering exists to remove. It is measured the way it happens: the markup is parsed first and the definition arrives after, which is what a script at the foot of a page does. It is dominated by fetching and evaluating the module, so it tracks the byte tables above rather than saying something separate from them.
+**Time to upgrade** is the time from the markup entering the document to its shadow root existing. During that gap you see a flash of unstyled content, which server rendering removes. The measurement parses the markup first and loads the definition after it, in the same order as a script at the end of a page. Most of the time goes to fetching and evaluating the module, so the column follows the byte tables above.
 
-**First render** is what one fresh element costs once the definition is already there, from construction to its first update completing. It is mostly Lit's and is close to identical across families, which is the point: a family far off it is doing something in its first update that the others are not.
+**First render** is the time one new element takes once its definition has loaded, from construction to the end of its first update. Most of that time is spent in Lit, so it is close to the same for every family. A family far from the others does extra work in its first update.
 
-**Hydration** is the gap between a server-rendered tree sitting in the document and that same tree being live. It is the number server rendering exists to justify and the easiest of the three to fake, so it is measured against a document the server actually rendered and delivered: assigning that markup with `innerHTML` does not parse a declarative shadow root, so there would be nothing to adopt and every reading would be a rebuild wearing the right label.
+**Hydration** is the time from a server-rendered tree being in the document to that tree becoming live. Server rendering is worth using only if this number is small, and it is the easiest of the three to measure wrongly. We measure it against a document the server rendered and delivered. Markup assigned with `innerHTML` does not parse a declarative shadow root, so the element would have nothing to adopt, and every reading would be a rebuild.
 
-**Every figure above was checked for adoption rather than assumed to have it**, and the check is that adoption adds nothing: the count of parts in the shadow root before the definition arrives has to equal the count after. Marking a node and looking for it later passes either way, because Lit does not clear a shadow root it did not create, so a failed hydration leaves the mark in place and appends a second copy of the tree beneath it. Measured on Button with the support module removed, the parts went from one to two while the timing moved by half a millisecond, so without the adoption test the wrong number is indistinguishable from the right one. A row reading `(rebuilt)` is that failure, and there are none.
+We check every figure above for adoption. Adoption adds nothing to the shadow root, so the count of parts before the definition arrives must equal the count after. Marking a node and looking for it later does not work as a check. Lit does not clear a shadow root it did not create, so a failed hydration keeps the mark and adds a second copy of the tree below it. On Button with the support module removed, the parts went from one to two, and the timing moved by only half a millisecond. Without the adoption check, the wrong number looks the same as the right one. A row marked `(rebuilt)` shows that failure, and no row has it.
 
 ## Per component
 
-Alphabetical, so this is a lookup table. Bytes, not kilobytes, because a
-rounded number in a generated table is a number somebody has to un-round
-before they can check it.
+Families are in alphabetical order. Sizes are in bytes, so you can check each
+number without rounding.
 
 ### Headless tier
 
-Structure, accessibility, state and form participation. No presentation, and no stylesheet to load beside it.
+Structure, accessibility, state, and form participation. It has no presentation and no stylesheet to load.
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| `accordion` | 82,536 | 27,113 | 22,154 | 2,875 | 713 | 550 |
-| `announcement` | 79,952 | 26,279 | 21,448 | 1,386 | 344 | 234 |
-| `app-header` | 31,381 | 9,985 | 8,807 | 1,248 | 299 | 205 |
-| `area-chart` | 77,303 | 25,931 | 22,867 | 11,004 | 3,353 | 2,737 |
-| `avatar` | 33,430 | 10,573 | 9,324 | 3,257 | 844 | 647 |
-| `badge` | 30,917 | 9,916 | 8,733 | 1,163 | 293 | 174 |
-| `bar-chart` | 78,954 | 26,300 | 23,266 | 12,644 | 3,709 | 3,106 |
-| `blockquote` | 30,931 | 9,938 | 8,757 | 774 | 169 | 36 |
-| `breadcrumbs` | 78,992 | 25,619 | 21,102 | 1,965 | 431 | 269 |
-| `button` | 35,489 | 11,163 | 9,826 | 3,095 | 786 | 589 |
-| `button-group` | 30,787 | 9,826 | 8,634 | 661 | 134 | 23 |
-| `callout` | 78,112 | 25,489 | 21,032 | 914 | 220 | 77 |
-| `canvas` | 83,300 | 25,389 | 22,210 | 46,815 | 14,039 | 11,884 |
-| `card` | 30,821 | 9,839 | 8,681 | 694 | 136 | 21 |
-| `carousel` | 88,395 | 28,556 | 23,604 | 10,942 | 2,758 | 2,266 |
-| `chat` | 101,703 | 33,381 | 27,450 | 17,447 | 5,114 | 4,200 |
-| `checkbox` | 39,477 | 12,042 | 10,583 | 2,335 | 659 | 385 |
-| `checkbox-group` | 42,602 | 12,740 | 11,243 | 4,939 | 1,247 | 896 |
-| `code` | 29,406 | 9,408 | 8,295 | 451 | 70 | 8 |
-| `code-block` | 123,736 | 40,688 | 34,364 | 17,201 | 4,481 | 3,795 |
-| `color-input` | 141,082 | 44,732 | 37,640 | 25,120 | 5,879 | 4,913 |
-| `color-picker` | 107,621 | 33,933 | 27,996 | 19,110 | 4,588 | 3,879 |
-| `combobox` | 136,422 | 43,416 | 36,446 | 21,033 | 5,210 | 4,115 |
-| `command` | 106,399 | 33,297 | 27,283 | 17,978 | 4,608 | 3,826 |
-| `copy-button` | 118,334 | 39,058 | 32,859 | 11,796 | 2,898 | 2,347 |
-| `data-table` | 174,616 | 53,447 | 45,133 | 55,522 | 14,103 | 11,629 |
-| `date-input` | 134,778 | 42,924 | 36,088 | 19,132 | 4,836 | 3,946 |
-| `date-picker` | 90,171 | 29,280 | 24,019 | 9,900 | 2,707 | 2,228 |
-| `description-list` | 30,890 | 9,778 | 8,616 | 1,132 | 177 | 77 |
-| `dialog` | 34,439 | 10,872 | 9,582 | 2,717 | 759 | 587 |
-| `divider` | 31,137 | 10,015 | 8,801 | 981 | 224 | 100 |
-| `donut-chart` | 75,086 | 24,889 | 22,076 | 10,214 | 2,945 | 2,410 |
-| `drawer` | 33,192 | 10,509 | 9,240 | 1,761 | 450 | 367 |
-| `drilldown` | 87,007 | 28,484 | 23,216 | 5,704 | 1,491 | 1,194 |
-| `empty` | 31,384 | 10,073 | 8,850 | 956 | 228 | 142 |
-| `file-input` | 90,279 | 29,267 | 23,972 | 6,170 | 1,762 | 1,376 |
-| `filter-input` | 147,020 | 46,259 | 38,909 | 27,973 | 6,765 | 5,570 |
-| `format-date` | 34,400 | 10,991 | 9,724 | 2,867 | 702 | 435 |
-| `heatmap` | 76,308 | 25,114 | 22,176 | 10,872 | 2,992 | 2,409 |
-| `icon` | 77,679 | 25,315 | 20,885 | 1,018 | 214 | 107 |
-| `icon-button` | 35,888 | 11,192 | 9,853 | 3,494 | 817 | 597 |
-| `image` | 32,960 | 10,377 | 9,138 | 3,156 | 817 | 608 |
-| `input` | 89,369 | 28,744 | 23,534 | 4,702 | 1,277 | 969 |
-| `kbd` | 32,741 | 10,605 | 9,367 | 2,976 | 962 | 805 |
-| `legend` | 34,793 | 11,106 | 9,794 | 1,080 | 270 | 217 |
-| `lightbox` | 39,157 | 12,135 | 10,645 | 4,807 | 1,248 | 968 |
-| `line-chart` | 76,884 | 25,629 | 22,613 | 10,667 | 3,073 | 2,556 |
-| `list` | 31,843 | 10,006 | 8,793 | 1,726 | 330 | 218 |
-| `listbox` | 98,130 | 31,436 | 25,694 | 11,194 | 3,007 | 2,410 |
-| `loader` | 31,027 | 9,944 | 8,766 | 900 | 227 | 124 |
-| `map` | 37,788 | 11,634 | 10,274 | 1,430 | 334 | 294 |
-| `megamenu` | 61,268 | 20,633 | 18,243 | 4,941 | 1,310 | 958 |
-| `menu` | 117,110 | 38,988 | 32,679 | 8,848 | 2,206 | 1,690 |
-| `meter` | 34,217 | 10,792 | 9,527 | 4,099 | 1,038 | 855 |
-| `navigation` | 32,721 | 10,480 | 9,230 | 1,361 | 347 | 248 |
-| `notifications` | 94,186 | 30,011 | 24,584 | 11,383 | 2,641 | 2,223 |
-| `number-input` | 92,295 | 29,546 | 24,131 | 7,625 | 1,995 | 1,519 |
-| `object-inspector` | 131,384 | 43,335 | 36,432 | 19,463 | 5,186 | 4,359 |
-| `option` | 33,057 | 10,374 | 9,176 | 2,933 | 634 | 512 |
-| `outline` | 36,145 | 11,657 | 10,303 | 4,628 | 1,372 | 979 |
-| `pagination` | 140,375 | 44,097 | 37,106 | 27,534 | 6,451 | 5,187 |
-| `pin-input` | 42,393 | 12,958 | 11,422 | 5,194 | 1,513 | 1,184 |
-| `popover` | 58,474 | 19,869 | 17,545 | 1,899 | 469 | 323 |
-| `progress` | 32,068 | 10,221 | 9,026 | 1,951 | 473 | 346 |
-| `qr-code` | 42,717 | 14,258 | 12,582 | 12,983 | 4,696 | 4,016 |
-| `quote` | 30,310 | 9,699 | 8,541 | 552 | 115 | 30 |
-| `radio` | 41,655 | 12,507 | 11,017 | 2,822 | 688 | 479 |
-| `rating` | 44,128 | 13,552 | 11,954 | 6,605 | 1,869 | 1,496 |
-| `scatter-chart` | 76,788 | 25,544 | 22,534 | 11,346 | 3,388 | 2,760 |
-| `scroll-area` | 32,553 | 10,387 | 9,129 | 2,743 | 758 | 480 |
-| `select` | 128,485 | 41,493 | 34,788 | 15,857 | 3,998 | 3,153 |
-| `skeleton` | 29,499 | 9,440 | 8,319 | 544 | 105 | 84 |
-| `skip-link` | 31,089 | 10,005 | 8,805 | 1,178 | 347 | 186 |
-| `slider` | 42,887 | 12,980 | 11,458 | 5,535 | 1,476 | 1,142 |
-| `sparkline` | 37,212 | 12,128 | 10,715 | 2,387 | 765 | 564 |
-| `speed-dial` | 108,656 | 36,627 | 30,826 | 3,743 | 921 | 546 |
-| `splitter` | 40,592 | 12,444 | 11,024 | 10,282 | 2,582 | 2,181 |
-| `stat` | 31,275 | 9,878 | 8,695 | 1,148 | 173 | 80 |
-| `steps` | 87,120 | 28,071 | 23,039 | 6,177 | 1,460 | 1,183 |
-| `switch` | 39,094 | 12,000 | 10,582 | 1,550 | 460 | 361 |
-| `table` | 88,599 | 28,869 | 23,633 | 9,425 | 2,514 | 2,103 |
-| `tabs` | 38,891 | 11,979 | 10,536 | 3,925 | 856 | 587 |
-| `tag` | 78,392 | 25,579 | 20,933 | 895 | 170 | 166 |
-| `textarea` | 41,635 | 12,597 | 11,061 | 3,953 | 1,071 | 772 |
-| `time-input` | 147,722 | 46,246 | 38,831 | 28,815 | 7,038 | 5,912 |
-| `time-picker` | 106,885 | 33,964 | 27,930 | 18,980 | 5,081 | 4,154 |
-| `timeline` | 78,841 | 25,549 | 21,089 | 1,809 | 367 | 308 |
-| `toast` | 82,198 | 26,677 | 21,818 | 4,078 | 958 | 722 |
-| `toggle` | 43,690 | 13,114 | 11,577 | 3,342 | 814 | 561 |
-| `toolbar` | 32,881 | 10,571 | 9,293 | 2,624 | 760 | 468 |
-| `tooltip` | 62,629 | 20,975 | 18,591 | 6,369 | 1,736 | 1,342 |
-| `tour` | 68,346 | 22,331 | 19,781 | 10,945 | 2,735 | 2,133 |
-| `tree` | 89,026 | 28,882 | 23,609 | 7,223 | 1,930 | 1,460 |
-| `trend` | 77,719 | 25,349 | 20,921 | 1,056 | 268 | 209 |
-| `video` | 145,309 | 45,934 | 38,765 | 32,513 | 7,674 | 6,525 |
-| `video-playlist` | 124,600 | 40,610 | 34,124 | 14,933 | 3,475 | 2,807 |
-| `virtual-list` | 36,688 | 11,807 | 10,386 | 2,413 | 700 | 547 |
+| `accordion` | 82,901 | 27,154 | 22,228 | 2,875 | 723 | 599 |
+| `announcement` | 80,317 | 26,327 | 21,514 | 1,386 | 335 | 293 |
+| `app-header` | 31,746 | 10,029 | 8,858 | 1,248 | 272 | 204 |
+| `area-chart` | 77,668 | 25,981 | 22,873 | 11,004 | 3,364 | 2,731 |
+| `avatar` | 33,795 | 10,619 | 9,376 | 3,257 | 851 | 674 |
+| `badge` | 31,282 | 9,961 | 8,768 | 1,163 | 283 | 250 |
+| `bar-chart` | 79,319 | 26,337 | 23,258 | 12,644 | 3,701 | 3,090 |
+| `blockquote` | 31,296 | 9,982 | 8,795 | 774 | 157 | 103 |
+| `breadcrumbs` | 79,357 | 25,667 | 21,199 | 1,965 | 437 | 368 |
+| `button` | 35,854 | 11,208 | 9,849 | 3,095 | 794 | 588 |
+| `button-group` | 31,152 | 9,869 | 8,691 | 661 | 120 | 65 |
+| `callout` | 78,477 | 25,533 | 21,048 | 914 | 217 | 191 |
+| `canvas` | 83,665 | 25,431 | 22,249 | 46,815 | 14,052 | 11,876 |
+| `card` | 31,186 | 9,883 | 8,719 | 694 | 116 | 122 |
+| `carousel` | 88,760 | 28,594 | 23,618 | 10,942 | 2,759 | 2,267 |
+| `chat` | 102,068 | 33,433 | 27,460 | 17,447 | 5,117 | 4,235 |
+| `checkbox` | 39,842 | 12,090 | 10,632 | 2,335 | 654 | 382 |
+| `checkbox-group` | 42,967 | 12,782 | 11,281 | 4,939 | 1,249 | 1,015 |
+| `code` | 29,771 | 9,455 | 8,318 | 451 | 62 | 45 |
+| `code-block` | 124,101 | 40,739 | 34,366 | 17,201 | 4,506 | 3,737 |
+| `color-input` | 141,600 | 44,819 | 37,809 | 25,273 | 5,924 | 4,953 |
+| `color-picker` | 108,091 | 34,002 | 28,065 | 19,215 | 4,622 | 3,992 |
+| `combobox` | 136,787 | 43,454 | 36,534 | 21,033 | 5,217 | 4,287 |
+| `command` | 106,783 | 33,346 | 27,377 | 17,997 | 4,600 | 3,808 |
+| `copy-button` | 118,699 | 39,107 | 32,921 | 11,796 | 2,909 | 2,423 |
+| `data-table` | 174,981 | 53,493 | 45,112 | 55,522 | 14,090 | 11,680 |
+| `date-input` | 135,143 | 42,972 | 36,189 | 19,132 | 4,846 | 3,961 |
+| `date-picker` | 90,536 | 29,334 | 24,060 | 9,900 | 2,710 | 2,197 |
+| `description-list` | 31,255 | 9,820 | 8,631 | 1,132 | 166 | 133 |
+| `dialog` | 34,804 | 10,920 | 9,610 | 2,717 | 764 | 674 |
+| `divider` | 31,502 | 10,055 | 8,819 | 981 | 220 | 123 |
+| `donut-chart` | 75,451 | 24,938 | 22,046 | 10,214 | 2,960 | 2,616 |
+| `drawer` | 33,557 | 10,558 | 9,293 | 1,761 | 453 | 416 |
+| `drilldown` | 87,372 | 28,526 | 23,210 | 5,704 | 1,495 | 1,194 |
+| `empty` | 31,749 | 10,112 | 8,909 | 956 | 214 | 189 |
+| `file-input` | 90,644 | 29,316 | 23,959 | 6,170 | 1,761 | 1,345 |
+| `filter-input` | 147,385 | 46,304 | 38,962 | 27,973 | 6,764 | 5,611 |
+| `format-date` | 34,765 | 11,036 | 9,757 | 2,867 | 687 | 510 |
+| `heatmap` | 76,673 | 25,165 | 22,241 | 10,872 | 2,985 | 2,449 |
+| `icon` | 78,044 | 25,357 | 20,849 | 1,018 | 216 | 143 |
+| `icon-button` | 36,253 | 11,243 | 9,885 | 3,494 | 825 | 628 |
+| `image` | 33,325 | 10,417 | 9,166 | 3,156 | 815 | 691 |
+| `input` | 89,734 | 28,797 | 23,541 | 4,702 | 1,281 | 945 |
+| `kbd` | 33,106 | 10,647 | 9,406 | 2,976 | 951 | 696 |
+| `legend` | 35,158 | 11,146 | 9,802 | 1,080 | 268 | 220 |
+| `lightbox` | 39,522 | 12,181 | 10,706 | 4,807 | 1,253 | 1,061 |
+| `line-chart` | 77,249 | 25,679 | 22,678 | 10,667 | 3,076 | 2,588 |
+| `list` | 32,208 | 10,055 | 8,872 | 1,726 | 328 | 245 |
+| `listbox` | 98,495 | 31,487 | 25,684 | 11,194 | 3,014 | 2,433 |
+| `loader` | 31,392 | 9,987 | 8,780 | 900 | 207 | 245 |
+| `map` | 53,734 | 15,846 | 13,956 | 15,316 | 3,889 | 3,216 |
+| `megamenu` | 61,633 | 20,674 | 18,272 | 4,941 | 1,321 | 974 |
+| `menu` | 117,475 | 39,035 | 32,785 | 8,848 | 2,208 | 1,774 |
+| `meter` | 34,582 | 10,837 | 9,570 | 4,099 | 1,048 | 871 |
+| `navigation` | 33,086 | 10,518 | 9,271 | 1,361 | 328 | 243 |
+| `notifications` | 94,551 | 30,059 | 24,642 | 11,383 | 2,649 | 2,215 |
+| `number-input` | 92,660 | 29,603 | 24,178 | 7,625 | 2,007 | 1,553 |
+| `object-inspector` | 131,749 | 43,371 | 36,527 | 19,463 | 5,181 | 4,284 |
+| `option` | 33,422 | 10,422 | 9,209 | 2,933 | 641 | 445 |
+| `outline` | 36,510 | 11,706 | 10,328 | 4,628 | 1,357 | 1,031 |
+| `pagination` | 140,740 | 44,142 | 37,163 | 27,534 | 6,449 | 5,302 |
+| `pin-input` | 42,758 | 13,010 | 11,433 | 5,194 | 1,510 | 1,152 |
+| `popover` | 58,839 | 19,921 | 17,599 | 1,899 | 477 | 337 |
+| `progress` | 32,433 | 10,261 | 9,035 | 1,951 | 477 | 400 |
+| `qr-code` | 43,082 | 14,300 | 12,585 | 12,983 | 4,692 | 3,989 |
+| `quote` | 30,675 | 9,744 | 8,564 | 552 | 89 | 118 |
+| `radio` | 42,020 | 12,549 | 11,057 | 2,822 | 696 | 473 |
+| `rating` | 44,493 | 13,597 | 11,997 | 6,605 | 1,856 | 1,535 |
+| `scatter-chart` | 77,153 | 25,592 | 22,565 | 11,346 | 3,384 | 2,814 |
+| `scroll-area` | 32,918 | 10,423 | 9,151 | 2,743 | 747 | 517 |
+| `select` | 128,850 | 41,531 | 34,906 | 15,857 | 4,004 | 3,169 |
+| `skeleton` | 29,864 | 9,489 | 8,354 | 544 | 96 | 112 |
+| `skip-link` | 31,454 | 10,045 | 8,831 | 1,178 | 335 | 218 |
+| `slider` | 43,252 | 13,023 | 11,499 | 5,535 | 1,473 | 1,172 |
+| `sparkline` | 37,577 | 12,171 | 10,735 | 2,387 | 771 | 608 |
+| `speed-dial` | 109,021 | 36,657 | 30,848 | 3,743 | 931 | 643 |
+| `splitter` | 40,957 | 12,491 | 11,063 | 10,282 | 2,578 | 2,226 |
+| `stat` | 31,640 | 9,918 | 8,739 | 1,148 | 171 | 115 |
+| `steps` | 87,485 | 28,117 | 23,085 | 6,177 | 1,482 | 1,191 |
+| `switch` | 39,459 | 12,044 | 10,580 | 1,550 | 449 | 378 |
+| `table` | 88,964 | 28,904 | 23,621 | 9,425 | 2,518 | 2,151 |
+| `tabs` | 39,256 | 12,020 | 10,599 | 3,925 | 869 | 769 |
+| `tag` | 78,757 | 25,623 | 20,999 | 895 | 162 | 167 |
+| `textarea` | 42,000 | 12,640 | 11,086 | 3,953 | 1,064 | 726 |
+| `time-input` | 148,087 | 46,297 | 38,913 | 28,815 | 7,042 | 5,924 |
+| `time-picker` | 107,250 | 34,027 | 27,969 | 18,980 | 5,090 | 4,122 |
+| `timeline` | 79,206 | 25,596 | 21,098 | 1,809 | 365 | 300 |
+| `toast` | 82,563 | 26,731 | 21,884 | 4,078 | 959 | 769 |
+| `toggle` | 44,055 | 13,155 | 11,608 | 3,342 | 817 | 574 |
+| `toolbar` | 33,246 | 10,621 | 9,327 | 2,624 | 749 | 601 |
+| `tooltip` | 62,994 | 21,020 | 18,657 | 6,369 | 1,736 | 1,416 |
+| `tour` | 68,711 | 22,383 | 19,798 | 10,945 | 2,735 | 2,140 |
+| `tree` | 89,391 | 28,923 | 23,646 | 7,223 | 1,938 | 1,478 |
+| `trend` | 78,084 | 25,393 | 20,935 | 1,056 | 264 | 347 |
+| `video` | 145,674 | 45,979 | 38,881 | 32,513 | 7,667 | 6,523 |
+| `video-playlist` | 124,965 | 40,646 | 34,154 | 14,933 | 3,484 | 2,875 |
+| `virtual-list` | 37,053 | 11,852 | 10,471 | 2,413 | 701 | 486 |
 
 ### Styled tier
 
-The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gives you.
+The headless tier plus presentation. `bun add @fusion.dev/helix` installs this tier.
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| `accordion` | 85,878 | 27,937 | 22,865 | 6,204 | 1,514 | 1,296 |
-| `announcement` | 84,514 | 27,354 | 22,427 | 5,932 | 1,398 | 1,295 |
-| `app-header` | 35,271 | 10,878 | 9,595 | 5,121 | 1,183 | 996 |
-| `area-chart` | 84,689 | 27,535 | 24,301 | 18,366 | 4,993 | 4,102 |
-| `aura` | 98,408 | 33,379 | 28,948 | 65,483 | 22,860 | 19,645 |
-| `avatar` | 37,016 | 11,334 | 9,985 | 6,833 | 1,613 | 1,307 |
-| `badge` | 34,021 | 10,622 | 9,343 | 4,250 | 970 | 763 |
-| `bar-chart` | 91,758 | 28,839 | 25,545 | 25,425 | 6,306 | 5,296 |
-| `blockquote` | 32,087 | 10,227 | 9,022 | 1,914 | 437 | 367 |
-| `breadcrumbs` | 82,558 | 26,422 | 21,797 | 5,518 | 1,216 | 925 |
-| `button` | 41,582 | 12,277 | 10,803 | 9,170 | 1,893 | 1,576 |
-| `button-group` | 32,463 | 10,201 | 8,984 | 2,320 | 496 | 423 |
-| `callout` | 80,113 | 26,029 | 21,499 | 2,899 | 727 | 678 |
-| `canvas` | 102,332 | 28,840 | 25,145 | 65,832 | 17,479 | 14,782 |
-| `card` | 34,054 | 10,658 | 9,364 | 3,915 | 938 | 821 |
-| `carousel` | 99,183 | 30,280 | 25,092 | 21,719 | 4,517 | 3,771 |
-| `chat` | 115,860 | 35,891 | 29,623 | 31,590 | 7,638 | 6,415 |
-| `checkbox` | 45,986 | 13,465 | 11,834 | 8,828 | 2,061 | 1,729 |
-| `checkbox-group` | 44,785 | 13,302 | 11,727 | 7,108 | 1,812 | 1,286 |
-| `code` | 30,483 | 9,701 | 8,546 | 1,511 | 363 | 206 |
-| `code-block` | 140,186 | 43,576 | 36,685 | 33,630 | 7,230 | 6,048 |
-| `color-input` | 174,665 | 49,861 | 42,239 | 58,683 | 11,138 | 9,479 |
-| `color-picker` | 135,501 | 38,428 | 31,930 | 46,984 | 9,147 | 7,875 |
-| `combobox` | 151,374 | 46,091 | 38,730 | 35,962 | 7,879 | 6,491 |
-| `command` | 117,053 | 35,352 | 29,197 | 28,618 | 6,689 | 5,539 |
-| `copy-button` | 128,338 | 40,844 | 34,326 | 21,784 | 4,643 | 3,845 |
-| `data-table` | 211,986 | 59,924 | 50,478 | 92,625 | 20,562 | 16,853 |
-| `date-input` | 150,691 | 45,979 | 38,738 | 35,034 | 7,828 | 6,629 |
-| `date-picker` | 95,788 | 30,449 | 25,013 | 15,499 | 3,874 | 3,165 |
-| `description-list` | 33,268 | 10,342 | 9,088 | 3,502 | 748 | 599 |
-| `dialog` | 38,816 | 11,888 | 10,487 | 7,079 | 1,768 | 1,424 |
-| `divider` | 33,293 | 10,535 | 9,269 | 3,120 | 732 | 573 |
-| `donut-chart` | 84,193 | 26,777 | 23,724 | 19,297 | 4,920 | 4,059 |
-| `drawer` | 37,455 | 11,519 | 10,142 | 6,007 | 1,462 | 1,172 |
-| `drilldown` | 91,704 | 29,541 | 24,165 | 10,393 | 2,519 | 2,094 |
-| `empty` | 32,824 | 10,509 | 9,246 | 2,380 | 652 | 441 |
-| `file-input` | 101,559 | 31,496 | 25,932 | 17,451 | 3,963 | 3,279 |
-| `filter-input` | 175,233 | 50,739 | 42,735 | 56,180 | 11,346 | 9,474 |
-| `flex` | 31,844 | 10,054 | 8,843 | 2,078 | 434 | 365 |
-| `format-date` | 35,048 | 11,133 | 9,847 | 3,497 | 849 | 602 |
-| `grid` | 32,298 | 10,207 | 9,013 | 2,528 | 569 | 449 |
-| `heatmap` | 83,106 | 26,529 | 23,495 | 17,648 | 4,427 | 3,689 |
-| `icon` | 78,385 | 25,479 | 20,951 | 1,707 | 385 | 267 |
-| `icon-button` | 41,903 | 12,212 | 10,689 | 9,495 | 1,818 | 1,489 |
-| `image` | 34,662 | 10,847 | 9,539 | 4,840 | 1,280 | 896 |
-| `input` | 95,636 | 30,141 | 24,722 | 10,963 | 2,647 | 2,059 |
-| `kbd` | 34,153 | 11,061 | 9,731 | 4,373 | 1,393 | 1,142 |
-| `legend` | 39,609 | 12,225 | 10,701 | 5,790 | 1,379 | 1,088 |
-| `lightbox` | 42,170 | 12,884 | 11,326 | 7,805 | 1,997 | 1,605 |
-| `line-chart` | 86,655 | 27,631 | 24,417 | 20,419 | 5,130 | 4,182 |
-| `list` | 35,909 | 10,956 | 9,644 | 5,782 | 1,289 | 1,009 |
-| `listbox` | 102,549 | 32,435 | 26,524 | 15,602 | 4,034 | 3,261 |
-| `loader` | 34,193 | 10,704 | 9,440 | 4,051 | 962 | 785 |
-| `map` | 41,683 | 12,533 | 11,079 | 5,309 | 1,236 | 1,070 |
-| `megamenu` | 66,149 | 21,707 | 19,231 | 9,805 | 2,390 | 1,925 |
-| `menu` | 124,637 | 40,634 | 34,065 | 16,355 | 3,806 | 3,041 |
-| `meter` | 39,615 | 11,935 | 10,540 | 9,479 | 2,201 | 1,883 |
-| `navigation` | 34,102 | 10,867 | 9,559 | 2,726 | 731 | 479 |
-| `notifications` | 107,297 | 32,424 | 26,764 | 24,486 | 5,058 | 4,285 |
-| `number-input` | 97,077 | 30,683 | 25,068 | 12,396 | 3,119 | 2,511 |
-| `object-inspector` | 145,021 | 45,680 | 38,583 | 33,080 | 7,527 | 6,355 |
-| `option` | 36,311 | 11,282 | 9,960 | 6,176 | 1,543 | 1,282 |
-| `orb` | 41,040 | 13,676 | 12,101 | 8,623 | 3,193 | 2,734 |
-| `outline` | 39,885 | 12,441 | 11,020 | 8,351 | 2,153 | 1,721 |
-| `pagination` | 158,260 | 47,160 | 39,645 | 45,401 | 9,521 | 7,876 |
-| `pin-input` | 45,460 | 13,756 | 12,115 | 8,244 | 2,316 | 1,809 |
-| `popover` | 61,110 | 20,519 | 18,175 | 4,517 | 1,139 | 849 |
-| `progress` | 37,097 | 11,382 | 10,067 | 6,962 | 1,627 | 1,326 |
-| `qr-code` | 44,380 | 14,684 | 12,936 | 14,629 | 5,134 | 4,370 |
-| `quote` | 30,965 | 9,862 | 8,655 | 1,191 | 255 | 109 |
-| `radio` | 49,852 | 13,985 | 12,294 | 11,010 | 2,218 | 1,803 |
-| `rating` | 48,342 | 14,753 | 13,025 | 10,802 | 3,047 | 2,410 |
-| `sandbox` | 66,327 | 17,749 | 15,718 | 35,718 | 7,893 | 6,681 |
-| `scatter-chart` | 85,180 | 27,346 | 24,141 | 19,718 | 5,211 | 4,257 |
-| `scroll-area` | 35,701 | 11,035 | 9,685 | 5,874 | 1,397 | 1,056 |
-| `select` | 141,240 | 43,896 | 36,872 | 28,601 | 6,410 | 5,178 |
-| `skeleton` | 32,017 | 10,195 | 8,981 | 2,242 | 575 | 486 |
-| `skip-link` | 32,552 | 10,408 | 9,160 | 2,624 | 733 | 514 |
-| `slider` | 53,869 | 14,951 | 13,246 | 16,500 | 3,473 | 2,903 |
-| `sparkline` | 41,130 | 13,073 | 11,544 | 6,293 | 1,740 | 1,417 |
-| `speed-dial` | 116,288 | 38,118 | 32,077 | 11,356 | 2,372 | 1,897 |
-| `splitter` | 46,664 | 13,447 | 11,934 | 16,336 | 3,622 | 3,004 |
-| `stat` | 34,091 | 10,493 | 9,265 | 3,954 | 814 | 640 |
-| `steps` | 100,738 | 30,503 | 25,118 | 19,784 | 3,885 | 3,223 |
-| `switch` | 43,362 | 13,045 | 11,460 | 5,803 | 1,501 | 1,225 |
-| `table` | 94,127 | 30,024 | 24,559 | 14,947 | 3,690 | 3,074 |
-| `tabs` | 45,127 | 13,247 | 11,644 | 10,154 | 2,176 | 1,768 |
-| `tag` | 81,595 | 26,435 | 21,708 | 4,083 | 994 | 845 |
-| `text` | 33,751 | 10,334 | 9,095 | 3,987 | 795 | 647 |
-| `textarea` | 44,972 | 13,407 | 11,757 | 7,277 | 1,892 | 1,367 |
-| `time-input` | 169,114 | 49,770 | 41,924 | 50,189 | 10,655 | 9,039 |
-| `time-picker` | 118,515 | 36,123 | 29,785 | 30,598 | 7,283 | 6,022 |
-| `timeline` | 82,154 | 26,301 | 21,669 | 5,110 | 1,121 | 973 |
-| `toast` | 89,731 | 28,350 | 23,307 | 11,599 | 2,596 | 2,206 |
-| `toggle` | 48,787 | 14,289 | 12,592 | 8,427 | 2,032 | 1,640 |
-| `toolbar` | 34,173 | 10,872 | 9,559 | 3,899 | 1,040 | 750 |
-| `tooltip` | 65,707 | 21,725 | 19,226 | 9,429 | 2,463 | 1,958 |
-| `tour` | 77,897 | 23,941 | 21,172 | 20,478 | 4,382 | 3,561 |
-| `tree` | 94,876 | 30,281 | 24,788 | 13,069 | 3,343 | 2,742 |
-| `trend` | 80,938 | 26,078 | 21,524 | 4,271 | 962 | 829 |
-| `video` | 164,727 | 49,399 | 41,889 | 51,911 | 11,215 | 9,703 |
-| `video-playlist` | 138,717 | 43,197 | 36,277 | 29,031 | 6,051 | 5,043 |
-| `virtual-list` | 37,480 | 12,021 | 10,585 | 3,187 | 904 | 729 |
-
-## What lands in `node_modules`
-
-A different question from what reaches a browser, and the one an install
-budget is written against. Unpacked bytes of exactly what each package
-publishes, which is its `files` field. **Source maps are not in these
-numbers**: they are stripped from the tarball at pack time, so the last
-column is what was removed rather than part of what remains.
+| `accordion` | 86,243 | 27,975 | 22,881 | 6,204 | 1,522 | 1,370 |
+| `announcement` | 84,879 | 27,390 | 22,450 | 5,932 | 1,398 | 1,231 |
+| `app-header` | 35,636 | 10,930 | 9,626 | 5,121 | 1,186 | 968 |
+| `area-chart` | 85,054 | 27,582 | 24,425 | 18,366 | 4,989 | 4,120 |
+| `aura` | 98,773 | 33,422 | 28,965 | 65,483 | 22,875 | 19,664 |
+| `avatar` | 37,381 | 11,380 | 10,043 | 6,833 | 1,625 | 1,385 |
+| `badge` | 34,386 | 10,667 | 9,371 | 4,250 | 969 | 771 |
+| `bar-chart` | 92,123 | 28,884 | 25,506 | 25,425 | 6,308 | 5,287 |
+| `blockquote` | 32,452 | 10,273 | 9,053 | 1,914 | 447 | 347 |
+| `breadcrumbs` | 82,923 | 26,471 | 21,873 | 5,518 | 1,215 | 1,004 |
+| `button` | 41,947 | 12,322 | 10,856 | 9,170 | 1,896 | 1,563 |
+| `button-group` | 32,828 | 10,248 | 9,030 | 2,320 | 501 | 400 |
+| `callout` | 80,478 | 26,064 | 21,528 | 2,899 | 744 | 725 |
+| `canvas` | 102,743 | 28,891 | 25,198 | 65,878 | 17,483 | 14,799 |
+| `card` | 34,419 | 10,712 | 9,427 | 3,915 | 947 | 714 |
+| `carousel` | 99,548 | 30,332 | 25,169 | 21,719 | 4,514 | 3,835 |
+| `chat` | 116,225 | 35,929 | 29,677 | 31,590 | 7,633 | 6,375 |
+| `checkbox` | 46,351 | 13,506 | 11,862 | 8,828 | 2,064 | 1,753 |
+| `checkbox-group` | 45,150 | 13,354 | 11,757 | 7,108 | 1,817 | 1,429 |
+| `code` | 30,848 | 9,746 | 8,571 | 1,511 | 348 | 324 |
+| `code-block` | 140,551 | 43,624 | 36,810 | 33,630 | 7,225 | 6,052 |
+| `color-input` | 175,183 | 49,952 | 42,280 | 58,836 | 11,170 | 9,615 |
+| `color-picker` | 135,971 | 38,505 | 32,062 | 47,089 | 9,156 | 7,851 |
+| `combobox` | 151,739 | 46,130 | 38,874 | 35,962 | 7,871 | 6,514 |
+| `command` | 117,437 | 35,400 | 29,194 | 28,637 | 6,693 | 5,567 |
+| `copy-button` | 128,703 | 40,894 | 34,435 | 21,784 | 4,647 | 3,838 |
+| `data-table` | 212,351 | 59,994 | 50,477 | 92,625 | 20,552 | 16,824 |
+| `date-input` | 151,056 | 46,026 | 38,825 | 35,034 | 7,835 | 6,560 |
+| `date-picker` | 96,153 | 30,498 | 25,054 | 15,499 | 3,884 | 3,213 |
+| `description-list` | 33,633 | 10,391 | 9,137 | 3,502 | 762 | 677 |
+| `dialog` | 39,181 | 11,931 | 10,532 | 7,079 | 1,783 | 1,435 |
+| `divider` | 33,658 | 10,583 | 9,299 | 3,120 | 729 | 567 |
+| `donut-chart` | 84,558 | 26,826 | 23,735 | 19,297 | 4,922 | 4,114 |
+| `drawer` | 37,820 | 11,562 | 10,177 | 6,007 | 1,468 | 1,197 |
+| `drilldown` | 92,069 | 29,589 | 24,176 | 10,393 | 2,512 | 2,051 |
+| `empty` | 33,189 | 10,558 | 9,258 | 2,380 | 655 | 541 |
+| `file-input` | 101,924 | 31,552 | 25,919 | 17,451 | 3,979 | 3,317 |
+| `filter-input` | 175,598 | 50,781 | 42,812 | 56,180 | 11,354 | 9,494 |
+| `flex` | 32,209 | 10,095 | 8,884 | 2,078 | 429 | 354 |
+| `format-date` | 35,413 | 11,181 | 9,904 | 3,497 | 850 | 639 |
+| `grid` | 32,663 | 10,250 | 9,017 | 2,528 | 571 | 510 |
+| `heatmap` | 83,471 | 26,569 | 23,519 | 17,648 | 4,426 | 3,717 |
+| `icon` | 78,750 | 25,535 | 20,998 | 1,707 | 395 | 278 |
+| `icon-button` | 42,268 | 12,254 | 10,774 | 9,495 | 1,824 | 1,461 |
+| `image` | 35,027 | 10,897 | 9,588 | 4,840 | 1,280 | 1,005 |
+| `input` | 96,001 | 30,194 | 24,737 | 10,963 | 2,646 | 2,136 |
+| `kbd` | 34,518 | 11,102 | 9,772 | 4,373 | 1,397 | 1,125 |
+| `legend` | 39,974 | 12,265 | 10,769 | 5,790 | 1,373 | 1,053 |
+| `lightbox` | 42,535 | 12,934 | 11,397 | 7,805 | 2,001 | 1,641 |
+| `line-chart` | 87,020 | 27,684 | 24,496 | 20,419 | 5,138 | 4,277 |
+| `list` | 36,274 | 11,001 | 9,667 | 5,782 | 1,289 | 1,052 |
+| `listbox` | 102,914 | 32,484 | 26,576 | 15,602 | 4,043 | 3,239 |
+| `loader` | 34,558 | 10,756 | 9,465 | 4,051 | 972 | 882 |
+| `map` | 78,398 | 19,792 | 17,409 | 39,970 | 7,880 | 6,635 |
+| `megamenu` | 66,514 | 21,751 | 19,257 | 9,805 | 2,400 | 2,031 |
+| `menu` | 125,002 | 40,682 | 34,240 | 16,355 | 3,816 | 3,081 |
+| `meter` | 39,980 | 11,977 | 10,567 | 9,479 | 2,196 | 1,967 |
+| `navigation` | 34,467 | 10,912 | 9,604 | 2,726 | 726 | 537 |
+| `notifications` | 107,662 | 32,470 | 26,790 | 24,486 | 5,061 | 4,234 |
+| `number-input` | 97,442 | 30,741 | 25,172 | 12,396 | 3,121 | 2,483 |
+| `object-inspector` | 145,386 | 45,727 | 38,558 | 33,080 | 7,507 | 6,384 |
+| `option` | 36,676 | 11,333 | 9,993 | 6,176 | 1,538 | 1,215 |
+| `orb` | 41,405 | 13,728 | 12,132 | 8,623 | 3,194 | 2,772 |
+| `outline` | 40,250 | 12,490 | 11,050 | 8,351 | 2,157 | 1,718 |
+| `pagination` | 158,625 | 47,196 | 39,768 | 45,401 | 9,510 | 7,909 |
+| `pin-input` | 45,825 | 13,797 | 12,162 | 8,244 | 2,321 | 1,836 |
+| `popover` | 61,475 | 20,565 | 18,186 | 4,517 | 1,139 | 908 |
+| `progress` | 37,462 | 11,435 | 10,114 | 6,962 | 1,631 | 1,440 |
+| `qr-code` | 44,745 | 14,729 | 12,988 | 14,629 | 5,141 | 4,411 |
+| `quote` | 31,330 | 9,901 | 8,697 | 1,191 | 258 | 173 |
+| `radio` | 50,217 | 14,033 | 12,351 | 11,010 | 2,231 | 1,866 |
+| `rating` | 48,707 | 14,803 | 13,052 | 10,802 | 3,067 | 2,455 |
+| `sandbox` | 66,692 | 17,792 | 15,758 | 35,718 | 7,890 | 6,662 |
+| `scatter-chart` | 85,545 | 27,403 | 24,187 | 19,718 | 5,218 | 4,345 |
+| `scroll-area` | 36,066 | 11,084 | 9,734 | 5,874 | 1,400 | 1,103 |
+| `select` | 141,605 | 43,930 | 36,894 | 28,601 | 6,420 | 5,278 |
+| `skeleton` | 32,382 | 10,236 | 9,004 | 2,242 | 571 | 435 |
+| `skip-link` | 32,917 | 10,453 | 9,185 | 2,624 | 728 | 562 |
+| `slider` | 54,234 | 14,993 | 13,257 | 16,500 | 3,483 | 2,950 |
+| `sparkline` | 41,495 | 13,116 | 11,576 | 6,293 | 1,736 | 1,483 |
+| `speed-dial` | 116,653 | 38,164 | 32,130 | 11,356 | 2,375 | 1,911 |
+| `splitter` | 47,029 | 13,495 | 11,985 | 16,336 | 3,624 | 3,080 |
+| `stat` | 34,456 | 10,547 | 9,311 | 3,954 | 814 | 717 |
+| `steps` | 101,103 | 30,547 | 25,231 | 19,784 | 3,900 | 3,290 |
+| `switch` | 43,727 | 13,096 | 11,526 | 5,803 | 1,510 | 1,260 |
+| `table` | 94,492 | 30,072 | 24,671 | 14,947 | 3,695 | 3,121 |
+| `tabs` | 45,492 | 13,287 | 11,706 | 10,154 | 2,185 | 1,781 |
+| `tag` | 81,960 | 26,491 | 21,687 | 4,083 | 992 | 805 |
+| `text` | 34,116 | 10,386 | 9,128 | 3,987 | 800 | 674 |
+| `textarea` | 45,337 | 13,450 | 11,805 | 7,277 | 1,904 | 1,528 |
+| `time-input` | 169,479 | 49,807 | 42,031 | 50,189 | 10,656 | 8,990 |
+| `time-picker` | 118,880 | 36,173 | 29,854 | 30,598 | 7,288 | 6,001 |
+| `timeline` | 82,519 | 26,351 | 21,755 | 5,110 | 1,115 | 952 |
+| `toast` | 90,096 | 28,398 | 23,346 | 11,599 | 2,602 | 2,126 |
+| `toggle` | 49,152 | 14,337 | 12,673 | 8,427 | 2,043 | 1,670 |
+| `toolbar` | 34,538 | 10,914 | 9,578 | 3,899 | 1,061 | 803 |
+| `tooltip` | 66,072 | 21,770 | 19,269 | 9,429 | 2,459 | 1,945 |
+| `tour` | 78,262 | 23,991 | 21,278 | 20,478 | 4,382 | 3,594 |
+| `tree` | 95,241 | 30,320 | 24,831 | 13,069 | 3,349 | 2,711 |
+| `trend` | 81,303 | 26,123 | 21,520 | 4,271 | 953 | 805 |
+| `video` | 165,092 | 49,434 | 41,913 | 51,911 | 11,204 | 9,633 |
+| `video-playlist` | 139,082 | 43,237 | 36,399 | 29,031 | 6,050 | 5,047 |
+| `virtual-list` | 37,845 | 12,063 | 10,639 | 3,187 | 914 | 780 |
+
+## What an install adds to `node_modules`
+
+These sizes are what an install adds to your disk, which is what an install
+budget limits. Each row is the unpacked size of exactly what a package
+publishes, as listed in its `files` field. The sizes do not include source
+maps. We strip them from the tarball when we pack it, and the Source maps
+stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| `@fusion.dev/helix-core` | 1,110,957 | 165 | 246,940 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
-| `@fusion.dev/helix-headless` | 12,593,195 | 484 | 981,196 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
+| `@fusion.dev/helix-core` | 1,118,596 | 165 | 248,014 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
+| `@fusion.dev/helix-headless` | 12,876,176 | 494 | 1,008,417 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
 | `@fusion.dev/helix-icons` | 131,512 | 21 | 44,809 | `svgo` |
-| `@fusion.dev/helix-styles` | 101,465 | 6 | 0 | none |
+| `@fusion.dev/helix-styles` | 101,805 | 6 | 0 | none |
 | `@fusion.dev/helix-theme` | 465,413 | 8 | 4,703 | none |
-| `@fusion.dev/helix` | 13,599,452 | 828 | 346,417 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
+| `@fusion.dev/helix` | 13,914,310 | 848 | 355,824 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
 
 ## Not measured yet
 
-Named rather than left out, because a metrics page is read for what it does
-not say as much as for what it does.
+We list these gaps so you know what the numbers above leave out.
 
-- **No whole-library comparison, and no fifth component.** The comparison above is five components against four systems. Widening it means naming the equivalent element in each system by hand, which is where a comparison table starts arguing, so each addition is a deliberate one rather than a sweep.
-- **The peer numbers are pinned, so they age.** They are dated in the section above and refreshed by running `turbo run peers`. Nothing fails when they are old, because nothing in this repository changes when somebody else releases, and a check that fired on the calendar would be noise.
-- **No first paint.** The timings above are facts about a component: time to upgrade, first render, hydration. First paint is a fact about a whole page, so it belongs to whatever renders one rather than to the library it renders.
-- **No per-component stylesheet bytes.** There are none to report: a family's CSS is compiled into its JavaScript, so it is already inside every number above. `elements.css` is the light-DOM layer and is in the stylesheet table.
+- **No whole-library comparison, and no more than five components.** The comparison above covers five components in four systems. Adding a component means choosing the matching element in each system by hand, so we add components one at a time.
+- **The peer numbers are pinned, so they age.** The comparison shows the date they were measured. Run `turbo run peers` to refresh them. No check fails when they are old. Another library's release changes nothing in this repository, so a check based on the date would fail for no useful reason.
+- **No first paint.** The timings above measure single components. First paint depends on the whole page, so the app that renders the page should measure it.
+- **No per-component stylesheet bytes.** Each family's CSS is compiled into its JavaScript, so every number above already includes it. `elements.css` is the light-DOM layer, and it is in the stylesheet table.