@fusion.dev/helix-docs 0.0.0-dev → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/content/browser-support.mdx +2 -2
  2. package/content/charting.mdx +4 -8
  3. package/content/coding-agents.mdx +14 -22
  4. package/content/color-modes.mdx +4 -4
  5. package/content/color.mdx +2 -2
  6. package/content/elevation-and-material.mdx +2 -2
  7. package/content/events.mdx +1 -1
  8. package/content/forms.mdx +5 -7
  9. package/content/iconography.mdx +15 -12
  10. package/content/installation.mdx +4 -6
  11. package/content/introduction.mdx +1 -1
  12. package/content/metrics.mdx +214 -214
  13. package/content/other-frameworks.mdx +6 -5
  14. package/content/overriding-a-component.mdx +11 -15
  15. package/content/routing.mdx +4 -4
  16. package/content/server-rendering.mdx +1 -1
  17. package/content/shape-and-borders.mdx +19 -8
  18. package/content/space-and-size.mdx +1 -1
  19. package/content/state-and-control.mdx +5 -5
  20. package/content/svelte.mdx +3 -3
  21. package/content/theme-builder.mdx +1 -1
  22. package/content/theming.mdx +1 -1
  23. package/content/tiers.mdx +2 -2
  24. package/content/tokens.mdx +4 -4
  25. package/content/using-helix-with-an-agent.mdx +30 -27
  26. package/content/using-the-elements.mdx +0 -2
  27. package/content/visual-axes.mdx +5 -7
  28. package/content/without-a-bundler.mdx +4 -5
  29. package/dist/catalog.d.ts +19 -29
  30. package/dist/catalog.js +27 -49
  31. package/dist/naming.js +1 -1
  32. package/dist/pages.generated.d.ts +1 -1
  33. package/dist/pages.generated.js +1 -1
  34. package/dist/reference.js +1 -1
  35. package/dist/registry.d.ts +3 -3
  36. package/dist/registry.js +3 -3
  37. package/dist/sections.d.ts +3 -7
  38. package/dist/sections.js +3 -7
  39. package/dist/sources.generated.d.ts +2 -2
  40. package/dist/sources.generated.js +367 -374
  41. package/package.json +6 -2
@@ -7,7 +7,7 @@ title: Metrics
7
7
 
8
8
  # Metrics
9
9
 
10
- *Generated by `bun run metrics` from the built packages. Do not edit: every
10
+ *Generated by `bun run gen:metrics` from the built packages. Do not edit: every
11
11
  number here is measured, and an edited one is a number nothing produced.*
12
12
 
13
13
  Bundle size, and what a component costs in time. The two are kept apart on
@@ -47,7 +47,7 @@ nobody ever downloads this floor on its own.
47
47
 
48
48
  | | Raw | Gzip | Brotli |
49
49
  |---|---|---|---|
50
- | Lit and `@fusion.dev/helix-core` | 132,955 | 44,397 | 38,019 |
50
+ | Lit and `@fusion.dev/helix-core` | 134,972 | 44,683 | 38,067 |
51
51
 
52
52
  ## Whole packages
53
53
 
@@ -58,11 +58,11 @@ repository does that. The per-component tables are what a page pays.
58
58
 
59
59
  | Package | Raw | Gzip | Brotli | |
60
60
  |---|---|---|---|---|
61
- | `@fusion.dev/helix-core` | 132,509 | 43,947 | 37,675 | Element base class, mixins, decorators, floating positioning. |
62
- | `@fusion.dev/helix-headless` | 516,161 | 131,048 | 102,771 | Every headless family, which is what the barrel means. |
63
- | `@fusion.dev/helix-icons` | 46,295 | 14,855 | 12,542 | The whole glyph set. |
64
- | `@fusion.dev/helix-theme` | 3,288 | 1,570 | 1,353 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
65
- | `@fusion.dev/helix` | 964,531 | 218,272 | 160,502 | Every styled family. |
61
+ | `@fusion.dev/helix-core` | 134,526 | 44,221 | 37,891 | Element base class, mixins, decorators, floating positioning. |
62
+ | `@fusion.dev/helix-headless` | 519,032 | 131,647 | 103,098 | Every headless family, which is what the barrel means. |
63
+ | `@fusion.dev/helix-icons` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
64
+ | `@fusion.dev/helix-theme` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
65
+ | `@fusion.dev/helix` | 956,589 | 216,783 | 158,845 | Every styled family. |
66
66
  | `lit` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
67
67
 
68
68
  ## The stylesheets
@@ -75,25 +75,25 @@ is the whole cost of adopting the base layer on its own.
75
75
 
76
76
  | File | Raw | Gzip | Brotli | |
77
77
  |---|---|---|---|---|
78
- | `base.css` | 23,052 | 3,527 | 3,024 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
79
- | `elements.css` | 8,336 | 1,905 | 1,614 | The components' own layer, generated from every family's stylesheet. |
78
+ | `base.css` | 23,145 | 3,556 | 3,065 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
79
+ | `elements.css` | 8,290 | 1,875 | 1,600 | The components' own layer, generated from every family's stylesheet. |
80
80
  | `all.css` | 179 | 142 | 110 | The three above in one import, in the order they have to be in. |
81
- | `primitives.css` | 6,274 | 1,233 | 1,055 | The primitive layer. Private, shipped because `tokens.css` resolves into it. |
82
- | `tokens.css` | 19,989 | 2,469 | 2,073 | The 185 semantic tokens. Nothing paints without this. |
81
+ | `primitives.css` | 6,275 | 1,234 | 1,062 | The primitive layer. Private, shipped because `tokens.css` resolves into it. |
82
+ | `tokens.css` | 19,989 | 2,467 | 2,073 | The 185 semantic tokens. Nothing paints without this. |
83
83
 
84
84
  ## What the numbers say
85
85
 
86
- **Most of a first component is the runtime under it.** The median styled family is 13,976 bytes gzipped alone and adds 2,475 to a page that already has Helix on it, so 82 percent of the first one is shared and 18 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.
86
+ **Most of a first component is the runtime under it.** The median styled family is 13,974 bytes gzipped alone and adds 2,414 to a page that already has Helix on it, so 83 percent of the first one is shared and 17 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.
87
87
 
88
- Across the tier: the cheapest is `code` at 9,057 gzipped alone, the dearest `data-table` at 49,471, over 93 components. Every family at once is 218,272.
88
+ Across the tier: the cheapest is `code` at 9,065 gzipped alone, the dearest `data-table` at 49,868, over 93 components. Every family at once is 216,783.
89
89
 
90
- **No family imports a barrel, and `check:barrels` 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 131,048 bytes gzipped whatever else the page does, which is 9 times the median family measured above. The styled tier imports the family it extends instead, all 93 of them, and the check refuses the shape rather than the package name, so the rule follows `sideEffects` wherever it goes.
90
+ **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 131,647 bytes gzipped whatever else the page does, which is 9 times the median family measured above. The styled tier imports the family it extends instead, all 93 of them, and the check refuses the shape rather than the package name, so the rule follows `sideEffects` wherever it goes.
91
91
 
92
- 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 16,084 bytes gzipped alone.
92
+ 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 16,187 bytes gzipped alone.
93
93
 
94
94
  ## Against other systems
95
95
 
96
- Four other libraries of custom elements, pinned and measured on 2026-08-24 by `bun run metrics: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 metrics`**, so the column that could go stale against this repository is the one that cannot.
96
+ 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.
97
97
 
98
98
  **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.
99
99
 
@@ -101,43 +101,43 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by `b
101
101
 
102
102
  | Component | System | Raw | Gzip | Brotli |
103
103
  |---|---|---|---|---|
104
- | `button` | **Helix** | 37,328 | 11,515 | 10,158 |
104
+ | `button` | **Helix** | 37,399 | 11,545 | 10,187 |
105
105
  | | Carbon | 133,058 | 20,959 | 17,685 |
106
106
  | | Material Web | 47,060 | 14,173 | 12,591 |
107
107
  | | Shoelace | 62,628 | 18,287 | 15,805 |
108
108
  | | Spectrum | 98,792 | 22,045 | 18,674 |
109
- | `checkbox` | **Helix** | 40,872 | 12,578 | 11,068 |
109
+ | `checkbox` | **Helix** | 40,821 | 12,584 | 11,091 |
110
110
  | | Carbon | 60,255 | 15,609 | 13,550 |
111
111
  | | Material Web | 43,785 | 13,556 | 12,015 |
112
112
  | | Shoelace | 47,614 | 15,177 | 13,301 |
113
113
  | | Spectrum | 62,492 | 15,437 | 13,481 |
114
- | `dialog` | **Helix** | 34,636 | 11,191 | 9,886 |
114
+ | `dialog` | **Helix** | 34,819 | 11,243 | 9,909 |
115
115
  | | Carbon | 510,866 | 67,390 | 39,189 |
116
116
  | | Material Web | 34,238 | 11,510 | 10,229 |
117
117
  | | Shoelace | 52,754 | 17,698 | 15,554 |
118
118
  | | Spectrum | 155,708 | 31,899 | 26,262 |
119
- | `radio` | **Helix** | 43,716 | 12,868 | 11,346 |
119
+ | `radio` | **Helix** | 43,516 | 12,844 | 11,308 |
120
120
  | | Carbon | 63,055 | 16,887 | 14,605 |
121
121
  | | Material Web | 41,044 | 13,234 | 11,757 |
122
122
  | | Shoelace | 34,865 | 12,027 | 10,559 |
123
123
  | | Spectrum | 38,685 | 10,660 | 9,370 |
124
- | `switch` | **Helix** | 38,547 | 12,144 | 10,699 |
124
+ | `switch` | **Helix** | 38,603 | 12,160 | 10,668 |
125
125
  | | Carbon | 69,423 | 17,127 | 14,764 |
126
126
  | | Material Web | 50,155 | 14,577 | 12,935 |
127
127
  | | Shoelace | 37,833 | 11,814 | 10,568 |
128
128
  | | Spectrum | 62,322 | 15,059 | 13,321 |
129
- | `tabs` | **Helix** | 40,442 | 12,374 | 10,893 |
129
+ | `tabs` | **Helix** | 40,196 | 12,332 | 10,861 |
130
130
  | | Carbon | 578,766 | 73,537 | 43,235 |
131
131
  | | Material Web | 38,883 | 12,820 | 11,368 |
132
132
  | | Shoelace | 54,573 | 17,140 | 15,068 |
133
133
  | | Spectrum | 64,875 | 18,298 | 16,283 |
134
- | `tooltip` | **Helix** | 59,436 | 20,247 | 17,886 |
134
+ | `tooltip` | **Helix** | 60,498 | 20,576 | 18,184 |
135
135
  | | Carbon | 189,382 | 30,354 | 22,273 |
136
136
  | | Material Web | | not shipped | |
137
137
  | | Shoelace | 57,412 | 20,220 | 17,933 |
138
138
  | | Spectrum | 136,599 | 40,552 | 35,286 |
139
139
 
140
- **Where Helix loses**, which is the half of a comparison table worth reading: `radio`, `switch`, `tooltip`. The largest gap is radio against Spectrum, by 2,208 bytes gzipped. 4 of 28 peer measurements come in under ours.
140
+ **Where Helix loses**, which is the half of a comparison table worth reading: `radio`, `switch`, `tooltip`. The largest gap is radio against Spectrum, by 2,184 bytes gzipped. 4 of 28 peer measurements come in under ours.
141
141
 
142
142
  - **Carbon** `@carbon/web-components@2.61.0`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
143
143
  - **Material Web** `@material/web@2.5.0`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
@@ -148,7 +148,7 @@ Every specifier measured is in [`peers.json`](https://github.com/project-fusion/
148
148
 
149
149
  ## What it costs in time
150
150
 
151
- Measured on 2026-08-26 by `bun run metrics:timing`, which drives a real browser against the built packages. The median of 9 runs each, on one machine.
151
+ 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.
152
152
 
153
153
  **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.
154
154
 
@@ -182,94 +182,94 @@ Structure, accessibility, state and form participation. No presentation, and no
182
182
 
183
183
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
184
184
  |---|---|---|---|---|---|---|
185
- | `accordion` | 76,223 | 25,761 | 21,340 | 3,227 | 1,222 | 655 |
186
- | `announcement` | 74,254 | 25,126 | 20,904 | 1,374 | 684 | 205 |
187
- | `app-header` | 27,483 | 9,331 | 8,226 | 1,306 | 611 | 203 |
188
- | `avatar` | 28,859 | 9,794 | 8,643 | 2,644 | 1,070 | 582 |
189
- | `badge` | 26,919 | 9,246 | 8,148 | 1,120 | 570 | 195 |
190
- | `bar-chart` | 70,700 | 24,232 | 21,400 | 12,138 | 4,122 | 2,902 |
191
- | `blockquote` | 26,839 | 9,232 | 8,140 | 917 | 523 | 98 |
192
- | `breadcrumbs` | 73,875 | 24,790 | 20,711 | 1,955 | 727 | 354 |
193
- | `button` | 31,158 | 10,389 | 9,175 | 3,167 | 1,125 | 613 |
194
- | `button-group` | 26,832 | 9,170 | 8,068 | 661 | 406 | 108 |
195
- | `callout` | 73,005 | 24,653 | 20,548 | 912 | 524 | 175 |
196
- | `card` | 26,866 | 9,186 | 8,102 | 694 | 420 | 51 |
197
- | `carousel` | 79,754 | 26,720 | 22,285 | 7,686 | 2,448 | 1,616 |
198
- | `chat` | 83,713 | 27,957 | 23,221 | 9,449 | 2,829 | 1,918 |
199
- | `checkbox` | 34,492 | 11,126 | 9,843 | 2,252 | 1,011 | 371 |
200
- | `checkbox-group` | 37,392 | 11,749 | 10,393 | 4,655 | 1,633 | 878 |
201
- | `code` | 25,451 | 8,754 | 7,715 | 451 | 292 | 9 |
202
- | `code-block` | 111,326 | 37,528 | 31,778 | 12,439 | 3,555 | 2,534 |
203
- | `color-input` | 129,288 | 42,299 | 35,792 | 26,102 | 7,166 | 5,692 |
204
- | `color-picker` | 99,094 | 32,311 | 26,815 | 19,492 | 5,690 | 4,497 |
205
- | `combobox` | 125,346 | 40,786 | 34,413 | 20,361 | 5,532 | 4,171 |
206
- | `command` | 99,183 | 31,859 | 26,261 | 17,134 | 4,872 | 3,598 |
207
- | `copy-button` | 110,006 | 37,256 | 31,540 | 11,120 | 3,302 | 2,246 |
208
- | `data-table` | 141,668 | 45,322 | 38,167 | 37,185 | 9,848 | 7,800 |
209
- | `date-input` | 122,127 | 40,161 | 33,994 | 19,388 | 5,390 | 4,091 |
210
- | `date-picker` | 84,476 | 28,217 | 23,393 | 9,805 | 3,185 | 2,227 |
211
- | `dialog` | 30,301 | 10,183 | 8,978 | 2,534 | 1,081 | 560 |
212
- | `divider` | 27,036 | 9,308 | 8,172 | 1,115 | 596 | 170 |
213
- | `donut-chart` | 66,610 | 22,813 | 20,207 | 9,398 | 3,290 | 2,302 |
214
- | `drawer` | 29,268 | 9,876 | 8,699 | 1,792 | 798 | 355 |
215
- | `drilldown` | 79,507 | 26,788 | 22,064 | 5,059 | 1,765 | 1,078 |
216
- | `empty` | 26,988 | 9,226 | 8,147 | 816 | 473 | 74 |
217
- | `file-input` | 84,086 | 28,154 | 23,166 | 6,219 | 2,205 | 1,428 |
218
- | `format-date` | 30,257 | 10,284 | 9,103 | 2,805 | 972 | 520 |
219
- | `heatmap` | 68,075 | 23,096 | 20,397 | 10,692 | 3,537 | 2,391 |
220
- | `icon` | 72,411 | 24,410 | 20,339 | 850 | 487 | 75 |
221
- | `icon-button` | 31,557 | 10,419 | 9,198 | 3,566 | 1,153 | 661 |
222
- | `image` | 28,816 | 9,694 | 8,539 | 2,969 | 1,059 | 606 |
223
- | `input` | 83,600 | 27,860 | 22,929 | 4,944 | 1,773 | 1,074 |
224
- | `kbd` | 28,236 | 9,743 | 8,582 | 2,427 | 1,131 | 568 |
225
- | `legend` | 29,187 | 10,066 | 8,845 | 1,097 | 600 | 176 |
226
- | `line-chart` | 68,726 | 23,631 | 20,885 | 10,165 | 3,525 | 2,540 |
227
- | `list` | 27,887 | 9,356 | 8,240 | 1,727 | 588 | 278 |
228
- | `listbox` | 91,239 | 30,089 | 24,864 | 10,677 | 3,397 | 2,343 |
229
- | `loader` | 27,072 | 9,293 | 8,182 | 900 | 503 | 64 |
230
- | `megamenu` | 55,180 | 19,332 | 17,079 | 4,934 | 1,741 | 1,043 |
231
- | `menu` | 108,430 | 36,763 | 31,227 | 8,105 | 2,390 | 1,596 |
232
- | `meter` | 29,964 | 10,078 | 8,894 | 3,800 | 1,271 | 786 |
233
- | `navigation` | 28,831 | 9,815 | 8,680 | 1,582 | 720 | 218 |
234
- | `notifications` | 83,706 | 28,017 | 23,156 | 8,640 | 2,592 | 1,723 |
235
- | `number-input` | 85,670 | 28,393 | 23,470 | 7,100 | 2,322 | 1,489 |
236
- | `option` | 28,849 | 9,632 | 8,502 | 2,680 | 896 | 466 |
237
- | `outline` | 31,837 | 10,814 | 9,540 | 4,539 | 1,772 | 1,039 |
238
- | `pagination` | 130,381 | 41,800 | 35,277 | 26,097 | 6,594 | 5,115 |
239
- | `pin-input` | 37,381 | 11,959 | 10,576 | 5,135 | 1,862 | 1,159 |
240
- | `popover` | 52,511 | 18,611 | 16,413 | 2,019 | 873 | 397 |
241
- | `progress` | 28,113 | 9,563 | 8,430 | 1,949 | 788 | 421 |
242
- | `qr-code` | 38,587 | 13,556 | 11,956 | 12,807 | 4,961 | 4,012 |
243
- | `quote` | 26,355 | 9,041 | 7,964 | 552 | 402 | 103 |
244
- | `radio` | 35,977 | 11,448 | 10,083 | 3,138 | 1,162 | 529 |
245
- | `rating` | 38,033 | 12,237 | 10,822 | 5,617 | 2,031 | 1,258 |
246
- | `scroll-area` | 28,463 | 9,741 | 8,560 | 2,610 | 1,108 | 492 |
247
- | `select` | 119,544 | 39,510 | 33,314 | 15,389 | 4,432 | 3,180 |
248
- | `skeleton` | 25,544 | 8,786 | 7,725 | 544 | 354 | 6 |
249
- | `slider` | 37,742 | 12,019 | 10,633 | 5,250 | 1,817 | 1,153 |
250
- | `sparkline` | 31,645 | 11,086 | 9,794 | 2,530 | 1,085 | 618 |
251
- | `speed-dial` | 100,991 | 34,766 | 29,474 | 3,821 | 1,299 | 714 |
252
- | `splitter` | 36,329 | 11,666 | 10,300 | 10,165 | 2,926 | 2,149 |
253
- | `stat` | 27,320 | 9,222 | 8,136 | 1,150 | 459 | 85 |
254
- | `steps` | 81,596 | 27,126 | 22,419 | 6,303 | 1,864 | 1,145 |
255
- | `switch` | 34,160 | 11,058 | 9,766 | 1,798 | 860 | 336 |
256
- | `table` | 31,609 | 10,196 | 9,008 | 4,118 | 1,226 | 758 |
257
- | `tabs` | 33,935 | 11,037 | 9,724 | 4,469 | 1,303 | 719 |
258
- | `tag` | 73,289 | 24,733 | 20,562 | 897 | 492 | 128 |
259
- | `textarea` | 36,847 | 11,696 | 10,315 | 4,115 | 1,416 | 757 |
260
- | `time-input` | 134,184 | 43,285 | 36,521 | 28,643 | 7,663 | 6,078 |
261
- | `time-picker` | 99,260 | 32,521 | 26,869 | 18,154 | 5,510 | 4,100 |
262
- | `timeline` | 73,821 | 24,751 | 20,746 | 1,896 | 686 | 324 |
263
- | `toast` | 77,019 | 25,851 | 21,418 | 4,007 | 1,278 | 790 |
264
- | `toggle` | 38,209 | 12,108 | 10,665 | 3,928 | 1,330 | 703 |
265
- | `toolbar` | 28,734 | 9,827 | 8,655 | 2,932 | 1,258 | 610 |
266
- | `tooltip` | 55,871 | 19,441 | 17,199 | 5,867 | 2,058 | 1,213 |
267
- | `tour` | 61,086 | 20,604 | 18,240 | 10,277 | 2,947 | 2,027 |
268
- | `tree` | 83,288 | 27,803 | 22,913 | 7,069 | 2,379 | 1,471 |
269
- | `trend` | 72,614 | 24,511 | 20,430 | 1,056 | 561 | 140 |
270
- | `video` | 131,880 | 42,504 | 36,213 | 31,304 | 7,765 | 6,491 |
271
- | `video-playlist` | 115,879 | 38,435 | 32,636 | 14,151 | 3,705 | 2,679 |
272
- | `virtual-list` | 29,714 | 10,244 | 9,021 | 2,089 | 964 | 480 |
185
+ | `accordion` | 77,373 | 25,790 | 21,229 | 3,227 | 1,191 | 689 |
186
+ | `announcement` | 75,404 | 25,148 | 20,701 | 1,374 | 658 | 330 |
187
+ | `app-header` | 27,425 | 9,322 | 8,205 | 1,248 | 581 | 264 |
188
+ | `avatar` | 28,859 | 9,794 | 8,642 | 2,644 | 1,039 | 606 |
189
+ | `badge` | 26,919 | 9,246 | 8,163 | 1,120 | 547 | 298 |
190
+ | `bar-chart` | 71,762 | 24,550 | 21,745 | 12,487 | 4,215 | 3,012 |
191
+ | `blockquote` | 26,839 | 9,232 | 8,140 | 917 | 486 | 238 |
192
+ | `breadcrumbs` | 75,025 | 24,814 | 20,607 | 1,955 | 703 | 408 |
193
+ | `button` | 31,312 | 10,445 | 9,216 | 3,167 | 1,103 | 679 |
194
+ | `button-group` | 26,832 | 9,170 | 8,068 | 661 | 386 | 96 |
195
+ | `callout` | 74,155 | 24,675 | 20,454 | 912 | 499 | 245 |
196
+ | `card` | 26,866 | 9,186 | 8,102 | 694 | 393 | 100 |
197
+ | `carousel` | 80,904 | 26,737 | 22,141 | 7,686 | 2,419 | 1,636 |
198
+ | `chat` | 84,863 | 27,980 | 23,052 | 9,449 | 2,818 | 1,981 |
199
+ | `checkbox` | 34,646 | 11,172 | 9,831 | 2,252 | 977 | 459 |
200
+ | `checkbox-group` | 37,546 | 11,793 | 10,407 | 4,655 | 1,615 | 961 |
201
+ | `code` | 25,451 | 8,754 | 7,715 | 451 | 280 | 126 |
202
+ | `code-block` | 113,692 | 37,922 | 32,016 | 12,788 | 3,653 | 2,656 |
203
+ | `color-input` | 131,269 | 42,548 | 35,825 | 26,066 | 7,146 | 5,816 |
204
+ | `color-picker` | 100,398 | 32,385 | 26,772 | 19,492 | 5,706 | 4,527 |
205
+ | `combobox` | 127,329 | 41,037 | 34,567 | 20,327 | 5,495 | 4,250 |
206
+ | `command` | 100,670 | 32,023 | 26,366 | 17,317 | 4,912 | 3,765 |
207
+ | `copy-button` | 112,372 | 37,654 | 31,723 | 11,469 | 3,400 | 2,482 |
208
+ | `data-table` | 143,864 | 45,643 | 38,407 | 37,364 | 9,893 | 7,960 |
209
+ | `date-input` | 124,144 | 40,441 | 34,068 | 19,388 | 5,371 | 4,207 |
210
+ | `date-picker` | 85,626 | 28,231 | 23,302 | 9,805 | 3,138 | 2,316 |
211
+ | `dialog` | 30,484 | 10,235 | 9,019 | 2,717 | 1,112 | 734 |
212
+ | `divider` | 27,036 | 9,307 | 8,174 | 1,115 | 567 | 227 |
213
+ | `donut-chart` | 67,672 | 23,131 | 20,446 | 9,747 | 3,379 | 2,367 |
214
+ | `drawer` | 29,268 | 9,874 | 8,685 | 1,792 | 774 | 440 |
215
+ | `drilldown` | 80,657 | 26,804 | 22,019 | 5,059 | 1,740 | 1,144 |
216
+ | `empty` | 26,988 | 9,226 | 8,147 | 816 | 448 | 183 |
217
+ | `file-input` | 85,388 | 28,229 | 23,148 | 6,217 | 2,172 | 1,468 |
218
+ | `format-date` | 30,257 | 10,284 | 9,103 | 2,805 | 940 | 531 |
219
+ | `heatmap` | 69,136 | 23,403 | 20,696 | 11,040 | 3,623 | 2,602 |
220
+ | `icon` | 73,561 | 24,431 | 20,290 | 850 | 450 | 184 |
221
+ | `icon-button` | 31,711 | 10,475 | 9,230 | 3,566 | 1,129 | 709 |
222
+ | `image` | 28,816 | 9,691 | 8,518 | 2,969 | 1,030 | 655 |
223
+ | `input` | 84,757 | 27,868 | 22,877 | 4,797 | 1,672 | 1,142 |
224
+ | `kbd` | 28,706 | 9,926 | 8,748 | 2,897 | 1,293 | 870 |
225
+ | `legend` | 29,187 | 10,066 | 8,845 | 1,097 | 577 | 235 |
226
+ | `line-chart` | 69,788 | 23,947 | 21,209 | 10,514 | 3,619 | 2,633 |
227
+ | `list` | 27,887 | 9,360 | 8,245 | 1,727 | 579 | 292 |
228
+ | `listbox` | 92,543 | 30,186 | 24,704 | 10,677 | 3,391 | 2,393 |
229
+ | `loader` | 27,072 | 9,293 | 8,182 | 900 | 475 | 143 |
230
+ | `megamenu` | 55,893 | 19,552 | 17,265 | 4,934 | 1,728 | 1,178 |
231
+ | `menu` | 110,293 | 37,007 | 31,290 | 8,105 | 2,374 | 1,645 |
232
+ | `meter` | 29,964 | 10,079 | 8,879 | 3,800 | 1,234 | 880 |
233
+ | `navigation` | 28,831 | 9,815 | 8,680 | 1,582 | 685 | 347 |
234
+ | `notifications` | 84,856 | 28,045 | 23,078 | 8,640 | 2,567 | 1,892 |
235
+ | `number-input` | 86,974 | 28,468 | 23,363 | 7,100 | 2,293 | 1,618 |
236
+ | `option` | 28,849 | 9,639 | 8,506 | 2,680 | 872 | 552 |
237
+ | `outline` | 31,837 | 10,811 | 9,517 | 4,539 | 1,759 | 1,115 |
238
+ | `pagination` | 132,398 | 42,069 | 35,542 | 26,097 | 6,582 | 5,162 |
239
+ | `pin-input` | 37,535 | 12,009 | 10,627 | 5,135 | 1,841 | 1,219 |
240
+ | `popover` | 53,190 | 18,820 | 16,606 | 1,985 | 825 | 427 |
241
+ | `progress` | 28,113 | 9,566 | 8,450 | 1,949 | 759 | 507 |
242
+ | `qr-code` | 38,587 | 13,554 | 11,997 | 12,807 | 4,944 | 4,132 |
243
+ | `quote` | 26,355 | 9,041 | 7,964 | 552 | 371 | 135 |
244
+ | `radio` | 35,977 | 11,448 | 10,088 | 3,138 | 1,130 | 692 |
245
+ | `rating` | 38,033 | 12,238 | 10,784 | 5,617 | 2,008 | 1,288 |
246
+ | `scroll-area` | 28,465 | 9,748 | 8,556 | 2,612 | 1,073 | 632 |
247
+ | `select` | 121,561 | 39,765 | 33,471 | 15,389 | 4,421 | 3,267 |
248
+ | `skeleton` | 25,544 | 8,786 | 7,725 | 544 | 330 | 72 |
249
+ | `slider` | 37,896 | 12,065 | 10,659 | 5,250 | 1,807 | 1,286 |
250
+ | `sparkline` | 31,645 | 11,088 | 9,794 | 2,530 | 1,054 | 773 |
251
+ | `speed-dial` | 102,854 | 35,015 | 29,681 | 3,821 | 1,260 | 786 |
252
+ | `splitter` | 36,329 | 11,667 | 10,338 | 10,165 | 2,907 | 2,207 |
253
+ | `stat` | 27,320 | 9,222 | 8,136 | 1,150 | 437 | 205 |
254
+ | `steps` | 82,900 | 27,205 | 22,347 | 6,303 | 1,836 | 1,248 |
255
+ | `switch` | 34,314 | 11,106 | 9,826 | 1,798 | 839 | 376 |
256
+ | `table` | 31,861 | 10,274 | 9,086 | 4,373 | 1,285 | 854 |
257
+ | `tabs` | 33,935 | 11,035 | 9,722 | 4,469 | 1,273 | 781 |
258
+ | `tag` | 74,439 | 24,760 | 20,435 | 897 | 472 | 253 |
259
+ | `textarea` | 37,001 | 11,743 | 10,362 | 4,115 | 1,412 | 892 |
260
+ | `time-input` | 136,201 | 43,547 | 36,687 | 28,643 | 7,660 | 6,042 |
261
+ | `time-picker` | 100,564 | 32,606 | 26,818 | 18,154 | 5,497 | 4,221 |
262
+ | `timeline` | 74,971 | 24,767 | 20,563 | 1,896 | 666 | 359 |
263
+ | `toast` | 78,169 | 25,872 | 21,292 | 4,007 | 1,246 | 750 |
264
+ | `toggle` | 38,209 | 12,101 | 10,670 | 3,928 | 1,315 | 828 |
265
+ | `toolbar` | 28,734 | 9,827 | 8,655 | 2,932 | 1,238 | 676 |
266
+ | `tooltip` | 56,933 | 19,770 | 17,504 | 6,216 | 2,147 | 1,428 |
267
+ | `tour` | 61,953 | 20,875 | 18,482 | 10,277 | 2,940 | 2,122 |
268
+ | `tree` | 84,423 | 27,823 | 22,815 | 7,054 | 2,342 | 1,593 |
269
+ | `trend` | 73,764 | 24,534 | 20,358 | 1,056 | 535 | 320 |
270
+ | `video` | 133,542 | 42,701 | 36,225 | 31,103 | 7,713 | 6,441 |
271
+ | `video-playlist` | 117,742 | 38,672 | 32,725 | 14,151 | 3,686 | 2,752 |
272
+ | `virtual-list` | 29,714 | 10,244 | 9,021 | 2,089 | 937 | 604 |
273
273
 
274
274
  ### Styled tier
275
275
 
@@ -277,99 +277,99 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
277
277
 
278
278
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
279
279
  |---|---|---|---|---|---|---|
280
- | `accordion` | 79,518 | 26,569 | 21,911 | 6,510 | 2,049 | 1,327 |
281
- | `announcement` | 78,022 | 26,038 | 21,534 | 5,126 | 1,535 | 995 |
282
- | `app-header` | 30,814 | 10,122 | 8,910 | 4,620 | 1,375 | 845 |
283
- | `aura` | 93,124 | 32,615 | 28,199 | 66,161 | 23,230 | 20,023 |
284
- | `avatar` | 32,433 | 10,538 | 9,282 | 6,205 | 1,798 | 1,187 |
285
- | `badge` | 29,550 | 9,942 | 8,737 | 3,734 | 1,211 | 784 |
286
- | `bar-chart` | 86,453 | 26,999 | 23,818 | 27,871 | 6,944 | 5,289 |
287
- | `blockquote` | 28,015 | 9,529 | 8,383 | 2,077 | 793 | 367 |
288
- | `breadcrumbs` | 77,346 | 25,597 | 21,315 | 5,414 | 1,491 | 1,010 |
289
- | `button` | 37,328 | 11,515 | 10,158 | 9,319 | 2,274 | 1,635 |
290
- | `button-group` | 28,508 | 9,543 | 8,424 | 2,320 | 783 | 404 |
291
- | `callout` | 75,023 | 25,222 | 20,989 | 2,914 | 1,037 | 632 |
292
- | `card` | 30,062 | 9,999 | 8,796 | 3,878 | 1,197 | 857 |
293
- | `carousel` | 88,795 | 28,265 | 23,685 | 16,716 | 3,981 | 2,976 |
294
- | `chat` | 95,392 | 30,099 | 25,048 | 21,117 | 4,948 | 3,809 |
295
- | `checkbox` | 40,872 | 12,578 | 11,068 | 8,616 | 2,460 | 1,714 |
296
- | `checkbox-group` | 39,639 | 12,321 | 10,884 | 6,888 | 2,215 | 1,375 |
297
- | `code` | 26,476 | 9,057 | 7,994 | 1,459 | 598 | 175 |
298
- | `code-block` | 124,510 | 39,736 | 33,611 | 25,604 | 5,672 | 4,385 |
299
- | `color-input` | 161,123 | 47,164 | 40,047 | 57,917 | 11,996 | 10,000 |
300
- | `color-picker` | 125,641 | 36,555 | 30,553 | 46,033 | 9,895 | 8,289 |
301
- | `combobox` | 139,026 | 43,268 | 36,586 | 34,020 | 7,937 | 6,234 |
302
- | `command` | 109,436 | 33,866 | 28,080 | 27,372 | 6,828 | 5,298 |
303
- | `copy-button` | 120,632 | 39,134 | 33,084 | 21,728 | 5,089 | 3,840 |
304
- | `data-table` | 169,562 | 49,471 | 41,812 | 65,060 | 14,048 | 11,315 |
305
- | `date-input` | 137,056 | 43,024 | 36,502 | 34,295 | 8,187 | 6,693 |
306
- | `date-picker` | 90,171 | 29,433 | 24,478 | 15,482 | 4,357 | 3,290 |
307
- | `dialog` | 34,636 | 11,191 | 9,886 | 6,854 | 2,117 | 1,412 |
308
- | `divider` | 29,181 | 9,821 | 8,631 | 3,243 | 1,074 | 656 |
309
- | `donut-chart` | 78,627 | 24,829 | 21,927 | 21,398 | 5,370 | 3,962 |
310
- | `drawer` | 33,215 | 10,783 | 9,504 | 5,721 | 1,692 | 1,135 |
311
- | `drilldown` | 83,865 | 27,759 | 22,977 | 9,404 | 2,737 | 1,944 |
312
- | `empty` | 28,295 | 9,601 | 8,463 | 2,107 | 826 | 412 |
313
- | `file-input` | 94,830 | 30,332 | 25,049 | 16,956 | 4,366 | 3,243 |
314
- | `flex` | 27,799 | 9,391 | 8,289 | 1,986 | 698 | 351 |
315
- | `format-date` | 30,905 | 10,420 | 9,233 | 3,435 | 1,135 | 531 |
316
- | `grid` | 28,326 | 9,563 | 8,437 | 2,511 | 871 | 525 |
317
- | `heatmap` | 71,868 | 23,944 | 21,216 | 14,467 | 4,404 | 3,164 |
318
- | `icon` | 73,106 | 24,587 | 20,429 | 1,528 | 627 | 270 |
319
- | `icon-button` | 37,656 | 11,455 | 10,088 | 9,651 | 2,208 | 1,604 |
320
- | `image` | 30,646 | 10,202 | 8,977 | 4,781 | 1,555 | 1,038 |
321
- | `input` | 89,818 | 29,243 | 24,183 | 11,157 | 3,138 | 2,169 |
322
- | `kbd` | 29,648 | 10,205 | 8,982 | 3,824 | 1,584 | 1,038 |
323
- | `legend` | 34,022 | 11,144 | 9,798 | 5,924 | 1,707 | 1,104 |
324
- | `line-chart` | 81,226 | 25,771 | 22,754 | 22,646 | 5,721 | 4,207 |
325
- | `list` | 31,940 | 10,289 | 9,061 | 5,770 | 1,526 | 1,095 |
326
- | `listbox` | 95,298 | 31,052 | 25,548 | 14,723 | 4,350 | 3,093 |
327
- | `loader` | 30,078 | 10,033 | 8,831 | 3,891 | 1,192 | 862 |
328
- | `megamenu` | 59,602 | 20,377 | 18,025 | 9,341 | 2,802 | 2,020 |
329
- | `menu` | 114,709 | 38,183 | 32,425 | 14,366 | 3,748 | 2,813 |
330
- | `meter` | 35,602 | 11,267 | 9,972 | 9,420 | 2,475 | 1,903 |
331
- | `navigation` | 30,359 | 10,243 | 9,007 | 3,094 | 1,127 | 575 |
332
- | `notifications` | 91,354 | 29,582 | 24,616 | 16,275 | 4,146 | 3,062 |
333
- | `number-input` | 90,634 | 29,544 | 24,415 | 12,050 | 3,439 | 2,486 |
334
- | `option` | 32,116 | 10,542 | 9,321 | 5,935 | 1,785 | 1,141 |
335
- | `outline` | 35,824 | 11,618 | 10,255 | 8,509 | 2,589 | 1,722 |
336
- | `pagination` | 148,273 | 44,851 | 37,991 | 43,971 | 9,539 | 7,685 |
337
- | `pin-input` | 40,603 | 12,787 | 11,279 | 8,340 | 2,707 | 1,832 |
338
- | `popover` | 55,129 | 19,245 | 17,022 | 4,619 | 1,500 | 983 |
339
- | `progress` | 33,246 | 10,757 | 9,521 | 7,064 | 1,972 | 1,448 |
340
- | `qr-code` | 40,238 | 13,976 | 12,338 | 14,441 | 5,391 | 4,349 |
341
- | `quote` | 27,030 | 9,207 | 8,088 | 1,211 | 570 | 159 |
342
- | `radio` | 43,716 | 12,868 | 11,346 | 10,869 | 2,616 | 1,892 |
343
- | `rating` | 41,008 | 13,168 | 11,593 | 8,574 | 2,951 | 2,075 |
344
- | `sandbox` | 61,201 | 16,813 | 14,897 | 34,739 | 8,029 | 6,423 |
345
- | `scroll-area` | 31,437 | 10,374 | 9,095 | 5,567 | 1,762 | 1,019 |
346
- | `select` | 131,872 | 41,805 | 35,381 | 27,696 | 6,674 | 5,111 |
347
- | `skeleton` | 28,062 | 9,544 | 8,416 | 2,242 | 860 | 426 |
348
- | `slider` | 47,682 | 13,817 | 12,221 | 15,173 | 3,610 | 2,730 |
349
- | `sparkline` | 35,412 | 12,013 | 10,609 | 6,285 | 2,018 | 1,464 |
350
- | `speed-dial` | 108,524 | 36,260 | 30,765 | 11,332 | 2,750 | 2,014 |
351
- | `splitter` | 42,741 | 12,722 | 11,288 | 16,559 | 3,995 | 3,131 |
352
- | `stat` | 29,954 | 9,789 | 8,646 | 3,774 | 1,039 | 614 |
353
- | `steps` | 95,132 | 29,536 | 24,464 | 19,827 | 4,267 | 3,406 |
354
- | `switch` | 38,547 | 12,144 | 10,699 | 6,170 | 1,934 | 1,308 |
355
- | `table` | 34,938 | 10,790 | 9,513 | 7,436 | 1,842 | 1,199 |
356
- | `tabs` | 40,442 | 12,374 | 10,893 | 10,965 | 2,669 | 1,847 |
357
- | `tag` | 76,483 | 25,615 | 21,389 | 4,076 | 1,285 | 897 |
358
- | `text` | 29,734 | 9,670 | 8,508 | 3,922 | 994 | 512 |
359
- | `textarea` | 40,278 | 12,528 | 11,028 | 7,529 | 2,288 | 1,518 |
360
- | `time-input` | 154,142 | 46,671 | 39,499 | 48,582 | 10,985 | 8,883 |
361
- | `time-picker` | 110,619 | 34,662 | 28,765 | 29,508 | 7,635 | 5,964 |
362
- | `timeline` | 77,087 | 25,507 | 21,266 | 5,151 | 1,394 | 978 |
363
- | `toast` | 84,299 | 27,460 | 22,823 | 11,274 | 2,899 | 2,145 |
364
- | `toggle` | 43,388 | 13,293 | 11,734 | 9,099 | 2,562 | 1,840 |
365
- | `toolbar` | 29,632 | 10,054 | 8,841 | 3,813 | 1,495 | 838 |
366
- | `tooltip` | 59,436 | 20,247 | 17,886 | 9,414 | 2,863 | 1,933 |
367
- | `tour` | 71,124 | 22,307 | 19,738 | 20,296 | 4,649 | 3,493 |
368
- | `tree` | 88,512 | 29,043 | 24,005 | 12,281 | 3,611 | 2,628 |
369
- | `trend` | 75,648 | 25,206 | 21,009 | 4,083 | 1,215 | 769 |
370
- | `video` | 149,490 | 45,696 | 38,857 | 48,893 | 10,889 | 9,107 |
371
- | `video-playlist` | 128,650 | 40,737 | 34,547 | 26,903 | 5,922 | 4,697 |
372
- | `virtual-list` | 30,546 | 10,470 | 9,192 | 2,904 | 1,181 | 649 |
280
+ | `accordion` | 80,416 | 26,550 | 21,816 | 6,258 | 1,975 | 1,399 |
281
+ | `announcement` | 79,088 | 26,034 | 21,464 | 5,042 | 1,489 | 1,099 |
282
+ | `app-header` | 30,683 | 10,087 | 8,885 | 4,489 | 1,317 | 888 |
283
+ | `aura` | 87,842 | 30,863 | 26,680 | 60,879 | 21,466 | 18,593 |
284
+ | `avatar` | 32,433 | 10,538 | 9,281 | 6,205 | 1,781 | 1,278 |
285
+ | `badge` | 29,366 | 9,907 | 8,704 | 3,550 | 1,144 | 814 |
286
+ | `bar-chart` | 87,353 | 27,299 | 24,047 | 28,058 | 7,012 | 5,413 |
287
+ | `blockquote` | 28,015 | 9,529 | 8,383 | 2,077 | 767 | 433 |
288
+ | `breadcrumbs` | 78,416 | 25,590 | 21,198 | 5,334 | 1,454 | 1,153 |
289
+ | `button` | 37,399 | 11,545 | 10,187 | 9,236 | 2,232 | 1,639 |
290
+ | `button-group` | 28,508 | 9,543 | 8,424 | 2,320 | 754 | 446 |
291
+ | `callout` | 76,173 | 25,235 | 20,977 | 2,914 | 1,011 | 742 |
292
+ | `card` | 30,101 | 10,012 | 8,842 | 3,917 | 1,172 | 843 |
293
+ | `carousel` | 89,716 | 28,257 | 23,609 | 16,487 | 3,950 | 3,041 |
294
+ | `chat` | 96,458 | 30,119 | 24,932 | 21,033 | 4,920 | 3,833 |
295
+ | `checkbox` | 40,821 | 12,584 | 11,091 | 8,411 | 2,390 | 1,743 |
296
+ | `checkbox-group` | 39,793 | 12,366 | 10,895 | 6,888 | 2,197 | 1,425 |
297
+ | `code` | 26,546 | 9,065 | 7,981 | 1,529 | 585 | 353 |
298
+ | `code-block` | 126,793 | 40,099 | 33,817 | 25,870 | 5,745 | 4,508 |
299
+ | `color-input` | 162,845 | 47,380 | 40,111 | 57,622 | 11,935 | 10,051 |
300
+ | `color-picker` | 126,684 | 36,608 | 30,439 | 45,772 | 9,885 | 8,284 |
301
+ | `combobox` | 140,948 | 43,524 | 36,682 | 33,925 | 7,923 | 6,293 |
302
+ | `command` | 110,979 | 34,028 | 28,065 | 27,611 | 6,895 | 5,493 |
303
+ | `copy-button` | 122,915 | 39,507 | 33,361 | 21,994 | 5,157 | 3,968 |
304
+ | `data-table` | 171,800 | 49,868 | 42,094 | 65,280 | 14,167 | 11,566 |
305
+ | `date-input` | 138,993 | 43,266 | 36,617 | 34,215 | 8,160 | 6,694 |
306
+ | `date-picker` | 91,241 | 29,416 | 24,327 | 15,402 | 4,304 | 3,406 |
307
+ | `dialog` | 34,819 | 11,243 | 9,909 | 7,037 | 2,150 | 1,594 |
308
+ | `divider` | 29,181 | 9,820 | 8,610 | 3,243 | 1,049 | 722 |
309
+ | `donut-chart` | 79,399 | 25,131 | 22,173 | 21,457 | 5,448 | 4,033 |
310
+ | `drawer` | 33,085 | 10,746 | 9,460 | 5,591 | 1,651 | 1,258 |
311
+ | `drilldown` | 85,015 | 27,777 | 22,820 | 9,404 | 2,708 | 2,034 |
312
+ | `empty` | 28,295 | 9,601 | 8,463 | 2,107 | 798 | 588 |
313
+ | `file-input` | 96,132 | 30,394 | 25,004 | 16,954 | 4,318 | 3,346 |
314
+ | `flex` | 27,799 | 9,392 | 8,240 | 1,986 | 673 | 463 |
315
+ | `format-date` | 30,905 | 10,420 | 9,233 | 3,435 | 1,102 | 726 |
316
+ | `grid` | 28,326 | 9,564 | 8,449 | 2,511 | 843 | 595 |
317
+ | `heatmap` | 72,928 | 24,255 | 21,435 | 14,814 | 4,498 | 3,331 |
318
+ | `icon` | 74,256 | 24,607 | 20,394 | 1,528 | 613 | 284 |
319
+ | `icon-button` | 37,727 | 11,481 | 10,120 | 9,568 | 2,163 | 1,587 |
320
+ | `image` | 30,564 | 10,174 | 8,943 | 4,699 | 1,516 | 1,088 |
321
+ | `input` | 90,860 | 29,217 | 23,927 | 10,895 | 2,997 | 2,248 |
322
+ | `kbd` | 30,118 | 10,382 | 9,139 | 4,294 | 1,762 | 1,231 |
323
+ | `legend` | 34,022 | 11,148 | 9,812 | 5,924 | 1,710 | 1,182 |
324
+ | `line-chart` | 82,192 | 26,074 | 23,014 | 22,899 | 5,824 | 4,292 |
325
+ | `list` | 31,940 | 10,292 | 9,050 | 5,770 | 1,512 | 1,226 |
326
+ | `listbox` | 96,658 | 31,152 | 25,519 | 14,779 | 4,354 | 3,220 |
327
+ | `loader` | 30,078 | 10,033 | 8,830 | 3,891 | 1,161 | 878 |
328
+ | `megamenu` | 60,316 | 20,594 | 18,232 | 9,342 | 2,771 | 2,053 |
329
+ | `menu` | 116,491 | 38,410 | 32,480 | 14,285 | 3,708 | 2,802 |
330
+ | `meter` | 35,367 | 11,232 | 9,921 | 9,185 | 2,414 | 1,935 |
331
+ | `navigation` | 30,214 | 10,212 | 8,987 | 2,949 | 1,064 | 655 |
332
+ | `notifications` | 92,415 | 29,580 | 24,433 | 16,186 | 4,091 | 3,171 |
333
+ | `number-input` | 91,816 | 29,585 | 24,291 | 11,928 | 3,385 | 2,491 |
334
+ | `option` | 32,116 | 10,548 | 9,315 | 5,935 | 1,760 | 1,226 |
335
+ | `outline` | 35,566 | 11,583 | 10,246 | 8,251 | 2,550 | 1,778 |
336
+ | `pagination` | 149,985 | 45,089 | 38,045 | 43,666 | 9,526 | 7,717 |
337
+ | `pin-input` | 40,676 | 12,803 | 11,279 | 8,259 | 2,654 | 2,002 |
338
+ | `popover` | 55,826 | 19,462 | 17,235 | 4,603 | 1,489 | 1,046 |
339
+ | `progress` | 33,160 | 10,749 | 9,508 | 6,978 | 1,946 | 1,517 |
340
+ | `qr-code` | 40,238 | 13,974 | 12,313 | 14,441 | 5,376 | 4,396 |
341
+ | `quote` | 27,030 | 9,207 | 8,088 | 1,211 | 543 | 230 |
342
+ | `radio` | 43,516 | 12,844 | 11,308 | 10,669 | 2,572 | 1,892 |
343
+ | `rating` | 41,008 | 13,169 | 11,612 | 8,574 | 2,932 | 2,109 |
344
+ | `sandbox` | 60,999 | 16,779 | 14,889 | 34,537 | 8,005 | 6,566 |
345
+ | `scroll-area` | 31,431 | 10,376 | 9,102 | 5,561 | 1,744 | 1,128 |
346
+ | `select` | 133,744 | 42,058 | 35,488 | 27,551 | 6,632 | 5,215 |
347
+ | `skeleton` | 28,062 | 9,544 | 8,416 | 2,242 | 832 | 568 |
348
+ | `slider` | 47,778 | 13,857 | 12,277 | 15,115 | 3,569 | 2,799 |
349
+ | `sparkline` | 35,412 | 12,015 | 10,603 | 6,285 | 2,003 | 1,558 |
350
+ | `speed-dial` | 110,306 | 36,504 | 30,886 | 11,251 | 2,716 | 1,971 |
351
+ | `splitter` | 42,441 | 12,678 | 11,269 | 16,259 | 3,939 | 3,134 |
352
+ | `stat` | 29,954 | 9,789 | 8,646 | 3,774 | 1,011 | 725 |
353
+ | `steps` | 96,252 | 29,575 | 24,410 | 19,643 | 4,204 | 3,348 |
354
+ | `switch` | 38,603 | 12,160 | 10,668 | 6,072 | 1,895 | 1,306 |
355
+ | `table` | 35,190 | 10,865 | 9,580 | 7,692 | 1,917 | 1,426 |
356
+ | `tabs` | 40,196 | 12,332 | 10,861 | 10,719 | 2,594 | 1,939 |
357
+ | `tag` | 77,633 | 25,634 | 21,148 | 4,076 | 1,244 | 880 |
358
+ | `text` | 29,734 | 9,670 | 8,508 | 3,922 | 967 | 650 |
359
+ | `textarea` | 40,350 | 12,544 | 11,034 | 7,447 | 2,228 | 1,644 |
360
+ | `time-input` | 156,103 | 46,933 | 39,629 | 48,526 | 11,002 | 8,949 |
361
+ | `time-picker` | 111,867 | 34,716 | 28,718 | 29,452 | 7,605 | 6,027 |
362
+ | `timeline` | 78,237 | 25,530 | 21,180 | 5,151 | 1,366 | 981 |
363
+ | `toast` | 85,449 | 27,484 | 22,691 | 11,274 | 2,870 | 2,137 |
364
+ | `toggle` | 43,243 | 13,254 | 11,675 | 8,954 | 2,503 | 1,844 |
365
+ | `toolbar` | 29,632 | 10,054 | 8,841 | 3,813 | 1,475 | 913 |
366
+ | `tooltip` | 60,498 | 20,576 | 18,184 | 9,763 | 2,945 | 2,103 |
367
+ | `tour` | 71,822 | 22,543 | 19,985 | 20,127 | 4,599 | 3,480 |
368
+ | `tree` | 89,446 | 29,019 | 23,862 | 12,065 | 3,544 | 2,650 |
369
+ | `trend` | 76,798 | 25,221 | 20,884 | 4,083 | 1,172 | 831 |
370
+ | `video` | 150,914 | 45,855 | 38,950 | 48,454 | 10,824 | 9,072 |
371
+ | `video-playlist` | 130,351 | 40,960 | 34,695 | 26,741 | 5,898 | 4,740 |
372
+ | `virtual-list` | 30,546 | 10,470 | 9,192 | 2,904 | 1,153 | 858 |
373
373
 
374
374
  ## What lands in `node_modules`
375
375
 
@@ -381,12 +381,12 @@ column is what was removed rather than part of what remains.
381
381
 
382
382
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
383
383
  |---|---|---|---|---|
384
- | `@fusion.dev/helix-core` | 910,682 | 113 | 160,137 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
385
- | `@fusion.dev/helix-headless` | 10,110,995 | 422 | 737,978 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
386
- | `@fusion.dev/helix-icons` | 65,119 | 11 | 20,405 | none |
387
- | `@fusion.dev/helix-styles` | 83,183 | 5 | 0 | none |
388
- | `@fusion.dev/helix-theme` | 465,772 | 8 | 4,793 | none |
389
- | `@fusion.dev/helix` | 10,029,875 | 717 | 287,558 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
384
+ | `@fusion.dev/helix-core` | 875,831 | 113 | 161,883 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
385
+ | `@fusion.dev/helix-headless` | 9,741,797 | 422 | 738,193 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
386
+ | `@fusion.dev/helix-icons` | 66,379 | 11 | 20,959 | none |
387
+ | `@fusion.dev/helix-styles` | 83,277 | 5 | 0 | none |
388
+ | `@fusion.dev/helix-theme` | 463,476 | 8 | 4,764 | none |
389
+ | `@fusion.dev/helix` | 9,714,436 | 718 | 287,181 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
390
390
 
391
391
  ## Not measured yet
392
392
 
@@ -394,6 +394,6 @@ Named rather than left out, because a metrics page is read for what it does
394
394
  not say as much as for what it does.
395
395
 
396
396
  - **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.
397
- - **The peer numbers are pinned, so they age.** They are dated in the section above and refreshed by running `bun run metrics: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.
398
- - **No load or rendering timings.** First paint, time to upgrade, and the cost of hydrating a server-rendered tree. These need a browser harness rather than a bundler, and they never join a cross-system table.
397
+ - **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.
398
+ - **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.
399
399
  - **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.
@@ -32,17 +32,18 @@ should end up passing that string through.
32
32
  element.addEventListener('helix-before-change', (event) => console.log(event.detail))
33
33
  ```
34
34
 
35
- **A declared `value`, `open`, `checked` or `active` is a claim of ownership.**
36
- The element announces the change and applies none of it, and waits to be told.
37
- Use `default-value`, `default-open` and their siblings for a control that owns
38
- its own state. This is the rule most likely to look like a bug, and
35
+ **A declared `value`, `open`, `checked` or `active` is a seed.** The element
36
+ starts there and goes on managing itself, exactly as `<input value="Ada">` does.
37
+ To take one decision, listen for the matching `helix-before-*` event and call
38
+ `preventDefault()`; to own the state outright, refuse and assign your own.
39
+ `default-value`, `default-open` and their siblings are what a reset returns to.
39
40
  [State and control](./state-and-control) is the page about it.
40
41
 
41
42
  ## What each one needs
42
43
 
43
44
  | Framework | Notes |
44
45
  |---|---|
45
- | Solid | Sets properties on custom elements by default. Use `prop:` to force one and `attr:` to force the other. `on:helix-change` binds the literal name |
46
+ | Solid | Sets properties on custom elements by default. Use `prop:` to force one and `attr:` to force the other. `on:helix-before-change` binds the literal name |
46
47
  | Qwik | Works as JSX. Bind with `document:on…` or a ref, since a plain `on*` prop is normalized |
47
48
  | Lit | `.prop=`, `?bool=` and `@helix-before-change=` are already the right three channels |
48
49
  | Ember | Angle-bracket invocation passes attributes only, so set properties from a modifier |