@fusion.dev/helix-docs 0.155.0 → 0.156.0

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 (4) hide show
  1. package/content/metrics.mdx +218 -218
  2. package/content/sandbox.mdx +20 -6
  3. package/dist/sources.generated.js +238 -224
  4. package/package.json +9 -9
package/content/metrics.mdx CHANGED
@@ -46,7 +46,7 @@ on its own.
46
46
 
47
47
  | | Raw | Gzip | Brotli |
48
48
  |---|---|---|---|
49
- | Lit and `@fusion.dev/helix-core` | 234,981 | 72,947 | 62,597 |
49
+ | Lit and `@fusion.dev/helix-core` | 234,981 | 72,947 | 62,570 |
50
50
 
51
51
  ## Whole packages
52
52
 
@@ -57,12 +57,12 @@ either barrel. The per-component tables show what your page pays.
57
57
 
58
58
  | Package | Raw | Gzip | Brotli | |
59
59
  |---|---|---|---|---|
60
- | `@fusion.dev/helix-core` | 234,190 | 72,745 | 62,250 | The element base class, mixins, decorators, and floating positioning. |
61
- | `@fusion.dev/helix-headless` | 1,219,911 | 328,784 | 247,877 | Every headless family. The barrel entry includes all of them. |
60
+ | `@fusion.dev/helix-core` | 234,190 | 72,745 | 62,259 | The element base class, mixins, decorators, and floating positioning. |
61
+ | `@fusion.dev/helix-headless` | 1,236,821 | 333,138 | 250,600 | Every headless family. The barrel entry includes all of them. |
62
62
  | `@fusion.dev/helix-icons` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
63
63
  | `@fusion.dev/helix-theme` | 3,626 | 1,597 | 1,384 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
64
64
  | `fusion_helix_theme_bg.wasm` | 490,270 | 155,600 | 125,779 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
65
- | `@fusion.dev/helix` | 1,859,442 | 452,585 | 322,747 | Every styled family. |
65
+ | `@fusion.dev/helix` | 1,880,933 | 458,174 | 326,119 | Every styled family. |
66
66
  | `lit` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
67
67
 
68
68
  ## Stylesheets
@@ -83,11 +83,11 @@ shows the whole cost of using the base layer on its own.
83
83
 
84
84
  ## What the numbers say
85
85
 
86
- **Most of your first component is the shared runtime.** The median styled family is 17,492 bytes gzipped alone, and it adds 3,666 to a page that already has Helix. The shared runtime is 79 percent of the first component, and the component itself is 21 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.
86
+ **Most of your first component is the shared runtime.** The median styled family is 17,492 bytes gzipped alone, and it adds 3,667 to a page that already has Helix. The shared runtime is 79 percent of the first component, and the component itself is 21 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.
87
87
 
88
- Across the 104 styled components, the smallest is `code` at 8,471 bytes gzipped alone, and the largest is `data-table` at 75,387. Every family together is 452,585.
88
+ Across the 104 styled components, the smallest is `code` at 8,471 bytes gzipped alone, and the largest is `data-table` at 76,006. Every family together is 458,174.
89
89
 
90
- 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 328,784 bytes gzipped, whatever else the page imports. That is 19 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets `sideEffects`, whatever its name.
90
+ 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 333,138 bytes gzipped, whatever else the page imports. That is 19 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets `sideEffects`, whatever its name.
91
91
 
92
92
  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 16,812 bytes gzipped alone.
93
93
 
@@ -101,22 +101,22 @@ The table has no whole-library row. That row would compare how many components e
101
101
 
102
102
  | Component | System | Raw | Gzip | Brotli |
103
103
  |---|---|---|---|---|
104
- | `button` | **Helix** | 44,830 | 14,942 | 13,352 |
104
+ | `button` | **Helix** | 44,830 | 14,942 | 13,350 |
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** | 48,432 | 15,532 | 13,890 |
109
+ | `checkbox` | **Helix** | 48,432 | 15,532 | 13,865 |
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** | 45,798 | 15,662 | 13,936 |
114
+ | `dialog` | **Helix** | 45,798 | 15,662 | 13,933 |
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** | 52,044 | 16,153 | 14,417 |
119
+ | `radio` | **Helix** | 52,044 | 16,153 | 14,418 |
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 |
@@ -126,12 +126,12 @@ The table has no whole-library row. That row would compare how many components e
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** | 58,882 | 18,542 | 16,493 |
129
+ | `tabs` | **Helix** | 58,882 | 18,542 | 16,481 |
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** | 61,569 | 21,793 | 19,364 |
134
+ | `tooltip` | **Helix** | 61,569 | 21,793 | 19,357 |
135
135
  | | Carbon | 189,382 | 30,354 | 22,273 |
136
136
  | | Material Web | | not shipped | |
137
137
  | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -183,104 +183,104 @@ Structure, accessibility, state, and form participation. It has no presentation
183
183
 
184
184
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
185
185
  |---|---|---|---|---|---|---|
186
- | `accordion` | 32,745 | 11,983 | 10,624 | 6,017 | 1,646 | 1,272 |
187
- | `announcement` | 38,619 | 13,972 | 12,442 | 5,012 | 1,450 | 1,030 |
188
- | `app-header` | 31,167 | 11,720 | 10,420 | 5,353 | 1,515 | 1,133 |
189
- | `area-chart` | 90,314 | 31,514 | 27,824 | 14,461 | 4,416 | 3,579 |
190
- | `avatar` | 31,388 | 11,881 | 10,596 | 4,559 | 1,294 | 973 |
191
- | `badge` | 26,985 | 10,576 | 9,395 | 3,276 | 995 | 682 |
192
- | `bar-chart` | 93,279 | 32,361 | 28,583 | 17,280 | 5,203 | 4,216 |
193
- | `blockquote` | 24,289 | 9,538 | 8,436 | 2,729 | 970 | 709 |
194
- | `breadcrumbs` | 36,254 | 13,895 | 12,346 | 7,945 | 2,440 | 1,979 |
195
- | `button` | 37,708 | 13,495 | 12,036 | 5,106 | 1,496 | 1,107 |
196
- | `button-group` | 26,475 | 10,143 | 8,967 | 4,060 | 1,284 | 984 |
197
- | `callout` | 34,206 | 13,174 | 11,698 | 1,971 | 691 | 433 |
198
- | `canvas` | 97,426 | 30,955 | 27,175 | 57,597 | 17,358 | 14,281 |
199
- | `card` | 23,959 | 9,173 | 8,113 | 2,422 | 740 | 430 |
200
- | `carousel` | 43,284 | 15,479 | 13,782 | 15,309 | 4,235 | 3,270 |
201
- | `chat` | 71,361 | 23,872 | 21,218 | 22,622 | 6,642 | 5,212 |
202
- | `checkbox` | 41,603 | 14,029 | 12,535 | 3,389 | 1,038 | 631 |
203
- | `checkbox-group` | 48,227 | 15,745 | 14,033 | 8,887 | 2,348 | 1,667 |
204
- | `code` | 20,483 | 8,147 | 7,222 | 466 | 209 | 94 |
205
- | `code-block` | 93,819 | 31,677 | 28,094 | 27,511 | 7,435 | 5,893 |
206
- | `color-input` | 138,124 | 43,671 | 38,131 | 51,375 | 13,111 | 10,523 |
207
- | `color-picker` | 99,433 | 31,670 | 27,757 | 43,159 | 11,507 | 9,345 |
208
- | `combobox` | 142,260 | 43,814 | 38,517 | 43,690 | 10,666 | 8,335 |
209
- | `command` | 97,336 | 30,247 | 26,580 | 30,126 | 7,829 | 6,068 |
210
- | `copy-button` | 82,686 | 28,226 | 25,028 | 18,268 | 4,811 | 3,746 |
211
- | `data-table` | 202,068 | 60,451 | 51,761 | 94,100 | 24,374 | 19,295 |
212
- | `date-input` | 139,286 | 42,904 | 37,643 | 38,882 | 9,627 | 7,618 |
213
- | `date-picker` | 56,976 | 19,245 | 17,230 | 17,964 | 4,811 | 3,677 |
214
- | `description-list` | 23,412 | 8,907 | 7,880 | 2,225 | 643 | 402 |
215
- | `dialog` | 40,318 | 14,394 | 12,830 | 6,164 | 1,774 | 1,371 |
216
- | `divider` | 23,173 | 9,044 | 8,008 | 1,743 | 605 | 319 |
217
- | `donut-chart` | 87,568 | 30,595 | 27,055 | 14,636 | 4,396 | 3,528 |
218
- | `drawer` | 44,592 | 15,794 | 14,052 | 7,652 | 2,174 | 1,662 |
219
- | `drilldown` | 41,993 | 14,879 | 13,234 | 7,871 | 2,065 | 1,644 |
220
- | `empty` | 24,376 | 9,367 | 8,289 | 2,282 | 747 | 603 |
221
- | `file-input` | 68,038 | 22,893 | 20,284 | 19,416 | 5,734 | 4,528 |
222
- | `filter-input` | 129,301 | 40,270 | 35,249 | 42,492 | 10,494 | 8,289 |
223
- | `format-date` | 29,097 | 10,967 | 9,762 | 4,309 | 1,219 | 922 |
224
- | `graph` | 67,541 | 22,349 | 19,830 | 17,070 | 5,242 | 4,152 |
225
- | `heatmap` | 94,729 | 32,469 | 28,653 | 17,146 | 4,921 | 3,897 |
226
- | `icon` | 82,676 | 28,314 | 24,176 | 59,022 | 20,202 | 16,189 |
227
- | `icon-button` | 38,145 | 13,534 | 12,066 | 5,543 | 1,532 | 1,137 |
228
- | `image` | 25,686 | 9,596 | 8,494 | 4,155 | 1,225 | 885 |
229
- | `input` | 47,906 | 16,469 | 14,567 | 7,538 | 2,431 | 1,702 |
230
- | `kbd` | 27,537 | 10,603 | 9,356 | 3,823 | 1,172 | 875 |
231
- | `legend` | 34,902 | 12,917 | 11,489 | 3,287 | 1,078 | 835 |
232
- | `lightbox` | 53,824 | 18,098 | 16,078 | 15,447 | 4,217 | 3,179 |
233
- | `line-chart` | 91,349 | 31,683 | 28,078 | 15,163 | 4,468 | 3,662 |
234
- | `list` | 58,188 | 20,365 | 18,130 | 12,455 | 3,560 | 2,790 |
235
- | `listbox` | 78,087 | 25,290 | 22,367 | 18,065 | 4,970 | 3,774 |
236
- | `loader` | 27,624 | 10,570 | 9,381 | 2,683 | 899 | 596 |
237
- | `map` | 82,290 | 24,837 | 21,614 | 40,130 | 10,391 | 8,016 |
238
- | `megamenu` | 59,198 | 21,458 | 19,033 | 8,030 | 2,230 | 1,614 |
239
- | `menu` | 84,483 | 28,891 | 25,547 | 18,748 | 4,766 | 3,608 |
240
- | `meter` | 32,441 | 12,315 | 11,048 | 5,288 | 1,498 | 1,258 |
241
- | `navigation` | 34,415 | 12,963 | 11,566 | 3,642 | 1,214 | 925 |
242
- | `notifications` | 54,785 | 18,127 | 16,150 | 17,570 | 4,608 | 3,582 |
243
- | `number-input` | 53,556 | 18,177 | 16,184 | 10,663 | 2,868 | 2,174 |
244
- | `object-inspector` | 113,048 | 37,785 | 33,296 | 34,701 | 9,901 | 7,733 |
245
- | `option` | 26,162 | 9,608 | 8,501 | 4,356 | 1,006 | 704 |
246
- | `outline` | 33,572 | 12,642 | 11,253 | 6,722 | 2,086 | 1,544 |
247
- | `pagination` | 134,427 | 42,169 | 36,728 | 45,792 | 11,538 | 9,053 |
248
- | `pin-input` | 47,727 | 16,544 | 14,800 | 7,044 | 2,232 | 1,675 |
249
- | `popover` | 63,077 | 22,775 | 20,185 | 5,851 | 1,667 | 1,283 |
250
- | `progress` | 28,718 | 11,006 | 9,799 | 3,278 | 1,012 | 764 |
251
- | `qr-code` | 43,379 | 16,926 | 15,096 | 17,334 | 6,455 | 5,368 |
252
- | `quote` | 22,698 | 9,004 | 7,944 | 1,537 | 619 | 361 |
253
- | `radio` | 43,543 | 14,616 | 13,009 | 4,379 | 1,265 | 846 |
254
- | `rating` | 50,712 | 17,380 | 15,479 | 8,135 | 2,416 | 1,906 |
255
- | `scatter-chart` | 90,984 | 31,421 | 27,759 | 16,224 | 4,815 | 3,845 |
256
- | `scroll-area` | 30,549 | 11,169 | 9,898 | 8,810 | 2,595 | 2,010 |
257
- | `select` | 116,717 | 37,891 | 33,201 | 28,697 | 7,540 | 5,775 |
258
- | `skeleton` | 22,490 | 8,756 | 7,760 | 1,301 | 491 | 251 |
259
- | `skip-link` | 25,535 | 10,013 | 8,877 | 1,551 | 594 | 375 |
260
- | `slider` | 50,673 | 17,100 | 15,320 | 10,700 | 2,979 | 2,438 |
261
- | `sparkline` | 47,807 | 17,538 | 15,679 | 6,099 | 2,060 | 1,674 |
262
- | `speed-dial` | 70,101 | 25,092 | 22,276 | 11,054 | 2,837 | 2,267 |
263
- | `splitter` | 42,028 | 14,435 | 12,890 | 14,080 | 3,725 | 3,011 |
264
- | `stat` | 25,480 | 9,707 | 8,632 | 2,960 | 876 | 547 |
265
- | `steps` | 53,281 | 18,462 | 16,414 | 12,709 | 3,488 | 2,712 |
266
- | `switch` | 40,457 | 13,843 | 12,355 | 1,961 | 706 | 437 |
267
- | `table` | 97,923 | 30,529 | 26,865 | 35,329 | 9,548 | 7,493 |
268
- | `tabs` | 49,168 | 16,697 | 14,829 | 10,196 | 2,659 | 1,980 |
269
- | `tag` | 43,396 | 15,823 | 14,112 | 8,617 | 2,395 | 1,870 |
270
- | `textarea` | 45,364 | 15,415 | 13,797 | 5,556 | 1,604 | 1,239 |
271
- | `time-input` | 167,032 | 50,781 | 44,007 | 49,698 | 12,426 | 9,802 |
272
- | `time-picker` | 94,460 | 29,621 | 26,115 | 30,821 | 8,074 | 6,309 |
273
- | `timeline` | 25,353 | 9,530 | 8,492 | 3,147 | 754 | 508 |
274
- | `toast` | 48,567 | 17,393 | 15,444 | 9,399 | 2,772 | 2,137 |
275
- | `toggle` | 44,477 | 14,658 | 12,999 | 6,256 | 1,720 | 1,247 |
276
- | `toolbar` | 32,696 | 12,205 | 10,870 | 5,485 | 1,671 | 1,336 |
277
- | `tooltip` | 58,421 | 21,042 | 18,676 | 8,512 | 2,345 | 1,780 |
278
- | `tour` | 83,346 | 28,538 | 25,265 | 18,989 | 5,146 | 3,995 |
279
- | `tree` | 68,464 | 22,776 | 20,292 | 17,724 | 5,066 | 3,989 |
280
- | `trend` | 30,375 | 11,863 | 10,555 | 3,818 | 1,145 | 993 |
281
- | `video` | 125,439 | 39,576 | 34,561 | 52,942 | 13,117 | 10,483 |
282
- | `video-playlist` | 94,665 | 31,200 | 27,597 | 27,065 | 6,689 | 5,320 |
283
- | `virtual-list` | 50,914 | 17,761 | 15,804 | 12,456 | 3,816 | 2,995 |
186
+ | `accordion` | 32,745 | 11,983 | 10,623 | 6,017 | 1,647 | 1,335 |
187
+ | `announcement` | 38,619 | 13,972 | 12,442 | 5,012 | 1,450 | 1,168 |
188
+ | `app-header` | 31,167 | 11,719 | 10,420 | 5,353 | 1,516 | 1,153 |
189
+ | `area-chart` | 90,314 | 31,514 | 27,821 | 14,461 | 4,416 | 3,604 |
190
+ | `avatar` | 31,388 | 11,881 | 10,598 | 4,559 | 1,294 | 1,079 |
191
+ | `badge` | 26,985 | 10,575 | 9,395 | 3,276 | 995 | 714 |
192
+ | `bar-chart` | 93,279 | 32,362 | 28,587 | 17,280 | 5,203 | 4,274 |
193
+ | `blockquote` | 24,289 | 9,538 | 8,445 | 2,729 | 970 | 795 |
194
+ | `breadcrumbs` | 36,254 | 13,895 | 12,352 | 7,945 | 2,440 | 2,047 |
195
+ | `button` | 37,708 | 13,495 | 12,036 | 5,106 | 1,496 | 1,198 |
196
+ | `button-group` | 26,475 | 10,143 | 8,967 | 4,060 | 1,285 | 964 |
197
+ | `callout` | 34,206 | 13,174 | 11,698 | 1,971 | 692 | 471 |
198
+ | `canvas` | 98,010 | 31,129 | 27,330 | 58,167 | 17,525 | 14,450 |
199
+ | `card` | 23,959 | 9,173 | 8,113 | 2,422 | 741 | 502 |
200
+ | `carousel` | 43,284 | 15,479 | 13,779 | 15,309 | 4,235 | 3,396 |
201
+ | `chat` | 71,637 | 23,938 | 21,186 | 22,897 | 6,701 | 5,368 |
202
+ | `checkbox` | 41,603 | 14,029 | 12,535 | 3,389 | 1,038 | 652 |
203
+ | `checkbox-group` | 48,227 | 15,745 | 14,033 | 8,887 | 2,348 | 1,764 |
204
+ | `code` | 20,483 | 8,146 | 7,222 | 466 | 209 | 75 |
205
+ | `code-block` | 93,819 | 31,678 | 28,090 | 27,511 | 7,435 | 5,975 |
206
+ | `color-input` | 138,124 | 43,671 | 38,154 | 51,375 | 13,111 | 10,621 |
207
+ | `color-picker` | 99,433 | 31,670 | 27,755 | 43,159 | 11,507 | 9,282 |
208
+ | `combobox` | 143,762 | 44,230 | 38,828 | 45,190 | 11,090 | 8,780 |
209
+ | `command` | 101,159 | 31,194 | 27,475 | 33,952 | 8,774 | 6,966 |
210
+ | `copy-button` | 82,686 | 28,226 | 24,998 | 18,268 | 4,812 | 3,822 |
211
+ | `data-table` | 203,690 | 60,900 | 52,052 | 95,715 | 24,809 | 19,689 |
212
+ | `date-input` | 139,407 | 42,943 | 37,664 | 39,003 | 9,664 | 7,607 |
213
+ | `date-picker` | 56,976 | 19,245 | 17,230 | 17,964 | 4,811 | 3,838 |
214
+ | `description-list` | 23,412 | 8,907 | 7,880 | 2,225 | 643 | 331 |
215
+ | `dialog` | 40,318 | 14,394 | 12,829 | 6,164 | 1,774 | 1,346 |
216
+ | `divider` | 23,173 | 9,044 | 8,008 | 1,743 | 606 | 476 |
217
+ | `donut-chart` | 87,568 | 30,596 | 27,015 | 14,636 | 4,396 | 3,601 |
218
+ | `drawer` | 44,592 | 15,794 | 14,035 | 7,652 | 2,175 | 1,746 |
219
+ | `drilldown` | 41,993 | 14,879 | 13,232 | 7,871 | 2,066 | 1,606 |
220
+ | `empty` | 24,376 | 9,367 | 8,289 | 2,282 | 748 | 558 |
221
+ | `file-input` | 68,038 | 22,893 | 20,320 | 19,416 | 5,734 | 4,536 |
222
+ | `filter-input` | 129,301 | 40,271 | 35,274 | 42,492 | 10,495 | 8,311 |
223
+ | `format-date` | 29,097 | 10,967 | 9,763 | 4,309 | 1,219 | 944 |
224
+ | `graph` | 68,110 | 22,496 | 20,001 | 17,639 | 5,379 | 4,346 |
225
+ | `heatmap` | 94,729 | 32,469 | 28,642 | 17,146 | 4,921 | 4,002 |
226
+ | `icon` | 82,676 | 28,313 | 24,183 | 59,022 | 20,203 | 16,149 |
227
+ | `icon-button` | 38,145 | 13,534 | 12,064 | 5,543 | 1,533 | 1,152 |
228
+ | `image` | 25,686 | 9,595 | 8,494 | 4,155 | 1,226 | 924 |
229
+ | `input` | 47,906 | 16,469 | 14,567 | 7,538 | 2,432 | 1,775 |
230
+ | `kbd` | 27,537 | 10,603 | 9,356 | 3,823 | 1,172 | 912 |
231
+ | `legend` | 34,902 | 12,917 | 11,476 | 3,287 | 1,078 | 807 |
232
+ | `lightbox` | 53,824 | 18,098 | 16,066 | 15,447 | 4,218 | 3,241 |
233
+ | `line-chart` | 91,349 | 31,683 | 28,066 | 15,163 | 4,468 | 3,731 |
234
+ | `list` | 60,646 | 21,011 | 18,763 | 14,761 | 4,195 | 3,224 |
235
+ | `listbox` | 79,245 | 25,590 | 22,627 | 19,224 | 5,304 | 4,088 |
236
+ | `loader` | 27,624 | 10,570 | 9,381 | 2,683 | 900 | 616 |
237
+ | `map` | 82,619 | 24,991 | 21,689 | 40,445 | 10,504 | 8,123 |
238
+ | `megamenu` | 59,198 | 21,458 | 19,046 | 8,030 | 2,231 | 1,665 |
239
+ | `menu` | 84,483 | 28,892 | 25,583 | 18,748 | 4,766 | 3,634 |
240
+ | `meter` | 32,441 | 12,315 | 10,980 | 5,288 | 1,498 | 1,288 |
241
+ | `navigation` | 34,415 | 12,963 | 11,566 | 3,642 | 1,214 | 944 |
242
+ | `notifications` | 54,785 | 18,127 | 16,150 | 17,570 | 4,608 | 3,705 |
243
+ | `number-input` | 55,298 | 18,519 | 16,519 | 12,405 | 3,259 | 2,475 |
244
+ | `object-inspector` | 113,385 | 37,899 | 33,381 | 35,038 | 10,005 | 7,846 |
245
+ | `option` | 27,320 | 9,919 | 8,775 | 5,517 | 1,296 | 987 |
246
+ | `outline` | 33,744 | 12,675 | 11,287 | 6,894 | 2,126 | 1,666 |
247
+ | `pagination` | 135,585 | 42,458 | 36,992 | 46,950 | 11,815 | 9,218 |
248
+ | `pin-input` | 47,727 | 16,544 | 14,800 | 7,044 | 2,232 | 1,760 |
249
+ | `popover` | 63,077 | 22,775 | 20,213 | 5,851 | 1,667 | 1,254 |
250
+ | `progress` | 28,718 | 11,006 | 9,768 | 3,278 | 1,012 | 827 |
251
+ | `qr-code` | 43,379 | 16,926 | 15,091 | 17,334 | 6,455 | 5,488 |
252
+ | `quote` | 22,698 | 9,004 | 7,945 | 1,537 | 619 | 442 |
253
+ | `radio` | 43,543 | 14,616 | 13,009 | 4,379 | 1,266 | 899 |
254
+ | `rating` | 50,712 | 17,382 | 15,477 | 8,135 | 2,416 | 1,803 |
255
+ | `scatter-chart` | 90,984 | 31,422 | 27,698 | 16,224 | 4,815 | 3,825 |
256
+ | `scroll-area` | 30,549 | 11,169 | 9,879 | 8,810 | 2,595 | 2,049 |
257
+ | `select` | 117,876 | 38,165 | 33,479 | 29,856 | 7,879 | 6,055 |
258
+ | `skeleton` | 22,490 | 8,756 | 7,763 | 1,301 | 491 | 252 |
259
+ | `skip-link` | 25,535 | 10,013 | 8,877 | 1,551 | 595 | 521 |
260
+ | `slider` | 50,673 | 17,100 | 15,319 | 10,700 | 2,980 | 2,478 |
261
+ | `sparkline` | 47,807 | 17,538 | 15,679 | 6,099 | 2,060 | 1,714 |
262
+ | `speed-dial` | 70,101 | 25,092 | 22,274 | 11,054 | 2,837 | 2,185 |
263
+ | `splitter` | 42,028 | 14,435 | 12,890 | 14,080 | 3,725 | 3,064 |
264
+ | `stat` | 25,480 | 9,706 | 8,632 | 2,960 | 876 | 617 |
265
+ | `steps` | 53,281 | 18,462 | 16,400 | 12,709 | 3,489 | 2,704 |
266
+ | `switch` | 40,457 | 13,843 | 12,355 | 1,961 | 706 | 406 |
267
+ | `table` | 98,333 | 30,641 | 26,986 | 35,739 | 9,663 | 7,633 |
268
+ | `tabs` | 49,168 | 16,697 | 14,829 | 10,196 | 2,659 | 2,016 |
269
+ | `tag` | 43,396 | 15,823 | 14,113 | 8,617 | 2,395 | 1,859 |
270
+ | `textarea` | 45,364 | 15,415 | 13,778 | 5,556 | 1,604 | 1,202 |
271
+ | `time-input` | 169,771 | 51,487 | 44,639 | 52,437 | 13,114 | 10,321 |
272
+ | `time-picker` | 97,223 | 30,316 | 26,669 | 33,382 | 8,770 | 6,807 |
273
+ | `timeline` | 28,548 | 10,772 | 9,592 | 3,675 | 936 | 691 |
274
+ | `toast` | 48,567 | 17,393 | 15,443 | 9,399 | 2,772 | 2,123 |
275
+ | `toggle` | 44,477 | 14,658 | 12,995 | 6,256 | 1,721 | 1,300 |
276
+ | `toolbar` | 32,696 | 12,205 | 10,872 | 5,485 | 1,671 | 1,336 |
277
+ | `tooltip` | 58,421 | 21,042 | 18,671 | 8,512 | 2,345 | 1,807 |
278
+ | `tour` | 83,346 | 28,538 | 25,243 | 18,989 | 5,147 | 4,095 |
279
+ | `tree` | 68,464 | 22,776 | 20,225 | 17,724 | 5,067 | 3,953 |
280
+ | `trend` | 30,375 | 11,863 | 10,555 | 3,818 | 1,145 | 945 |
281
+ | `video` | 127,266 | 39,999 | 35,031 | 54,765 | 13,555 | 10,966 |
282
+ | `video-playlist` | 98,428 | 32,585 | 28,814 | 28,474 | 7,048 | 5,586 |
283
+ | `virtual-list` | 51,103 | 17,825 | 15,928 | 12,645 | 3,889 | 3,067 |
284
284
 
285
285
  ### Styled tier
286
286
 
@@ -288,110 +288,110 @@ The headless tier plus presentation. `bun add @fusion.dev/helix` installs this t
288
288
 
289
289
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
290
290
  |---|---|---|---|---|---|---|
291
- | `accordion` | 36,857 | 12,853 | 11,432 | 10,114 | 2,581 | 2,040 |
292
- | `announcement` | 43,555 | 15,040 | 13,445 | 9,929 | 2,557 | 2,082 |
293
- | `app-header` | 36,560 | 12,921 | 11,539 | 10,729 | 2,728 | 2,281 |
294
- | `area-chart` | 98,956 | 33,402 | 29,494 | 23,084 | 6,358 | 5,218 |
295
- | `aura` | 51,474 | 17,767 | 15,695 | 28,066 | 8,780 | 7,548 |
296
- | `avatar` | 35,062 | 12,677 | 11,330 | 8,216 | 2,031 | 1,808 |
297
- | `badge` | 32,752 | 11,796 | 10,481 | 9,034 | 2,172 | 1,809 |
298
- | `bar-chart` | 107,347 | 35,189 | 31,105 | 31,330 | 8,077 | 6,615 |
299
- | `blockquote` | 26,860 | 10,107 | 8,936 | 5,285 | 1,464 | 1,200 |
300
- | `breadcrumbs` | 43,908 | 15,129 | 13,510 | 15,581 | 3,733 | 3,098 |
301
- | `button` | 44,830 | 14,942 | 13,352 | 12,212 | 2,973 | 2,281 |
302
- | `button-group` | 30,331 | 10,837 | 9,628 | 7,904 | 1,918 | 1,506 |
303
- | `callout` | 38,026 | 14,059 | 12,522 | 5,773 | 1,518 | 1,149 |
304
- | `canvas` | 118,544 | 35,017 | 30,691 | 78,363 | 21,338 | 17,624 |
305
- | `card` | 28,213 | 10,189 | 9,050 | 6,662 | 1,692 | 1,372 |
306
- | `carousel` | 54,175 | 17,280 | 15,467 | 26,184 | 6,100 | 4,961 |
307
- | `chat` | 85,875 | 26,405 | 23,421 | 37,128 | 9,262 | 7,452 |
308
- | `checkbox` | 48,432 | 15,532 | 13,890 | 10,201 | 2,514 | 1,985 |
309
- | `checkbox-group` | 56,127 | 17,391 | 15,485 | 16,779 | 4,089 | 3,146 |
310
- | `code` | 21,671 | 8,471 | 7,490 | 1,639 | 527 | 436 |
311
- | `code-block` | 115,146 | 35,038 | 31,101 | 48,823 | 10,866 | 8,799 |
312
- | `color-input` | 182,662 | 50,146 | 43,832 | 95,902 | 19,637 | 16,321 |
313
- | `color-picker` | 138,192 | 37,367 | 32,725 | 81,912 | 17,310 | 14,296 |
314
- | `combobox` | 159,456 | 46,884 | 41,102 | 60,872 | 13,769 | 11,027 |
315
- | `command` | 109,363 | 32,612 | 28,644 | 42,141 | 10,228 | 8,217 |
316
- | `copy-button` | 95,770 | 30,369 | 26,928 | 31,336 | 7,080 | 5,695 |
317
- | `data-table` | 271,823 | 75,387 | 62,194 | 162,785 | 38,795 | 29,360 |
318
- | `date-input` | 161,098 | 46,677 | 40,985 | 60,680 | 13,461 | 11,001 |
319
- | `date-picker` | 64,983 | 20,675 | 18,525 | 25,951 | 6,250 | 4,994 |
320
- | `description-list` | 27,039 | 9,669 | 8,581 | 5,841 | 1,361 | 1,127 |
321
- | `dialog` | 45,798 | 15,662 | 13,936 | 11,623 | 3,106 | 2,538 |
322
- | `divider` | 25,821 | 9,692 | 8,547 | 4,374 | 1,199 | 956 |
323
- | `donut-chart` | 97,699 | 32,669 | 28,863 | 24,746 | 6,558 | 5,346 |
324
- | `drawer` | 50,788 | 17,193 | 15,349 | 13,833 | 3,691 | 2,990 |
325
- | `drilldown` | 48,367 | 16,190 | 14,426 | 14,232 | 3,447 | 2,772 |
326
- | `empty` | 26,021 | 9,826 | 8,678 | 3,909 | 1,176 | 936 |
327
- | `file-input` | 80,966 | 25,343 | 22,504 | 32,333 | 8,245 | 6,698 |
328
- | `filter-input` | 162,612 | 45,682 | 39,992 | 75,432 | 15,848 | 12,916 |
329
- | `flex` | 25,978 | 9,321 | 8,257 | 5,151 | 1,112 | 868 |
330
- | `format-date` | 29,681 | 11,095 | 9,901 | 4,877 | 1,331 | 1,085 |
331
- | `graph` | 82,257 | 24,907 | 22,118 | 31,767 | 7,870 | 6,330 |
332
- | `grid` | 27,233 | 9,977 | 8,825 | 6,019 | 1,476 | 1,221 |
333
- | `heatmap` | 102,310 | 34,079 | 30,100 | 24,708 | 6,536 | 5,307 |
334
- | `icon` | 84,859 | 28,842 | 24,762 | 61,198 | 20,773 | 16,546 |
335
- | `icon-button` | 46,612 | 14,930 | 13,333 | 13,995 | 2,965 | 2,385 |
336
- | `image` | 27,417 | 10,071 | 8,934 | 5,868 | 1,672 | 1,363 |
337
- | `input` | 52,486 | 17,526 | 15,467 | 12,104 | 3,552 | 2,685 |
338
- | `kbd` | 29,864 | 11,148 | 9,873 | 6,135 | 1,683 | 1,371 |
339
- | `legend` | 40,308 | 14,177 | 12,546 | 8,568 | 2,262 | 1,728 |
340
- | `lightbox` | 60,817 | 19,445 | 17,286 | 22,419 | 5,623 | 4,415 |
341
- | `line-chart` | 102,895 | 34,063 | 30,183 | 26,693 | 6,903 | 5,649 |
342
- | `list` | 64,808 | 21,831 | 19,521 | 19,054 | 5,103 | 4,154 |
343
- | `listbox` | 82,857 | 26,425 | 23,348 | 22,818 | 6,102 | 4,779 |
344
- | `loader` | 30,830 | 11,357 | 10,102 | 5,871 | 1,600 | 1,322 |
345
- | `map` | 118,905 | 30,371 | 26,471 | 76,736 | 16,091 | 12,871 |
346
- | `megamenu` | 64,520 | 22,644 | 20,058 | 13,336 | 3,435 | 2,737 |
347
- | `menu` | 95,623 | 31,029 | 27,419 | 29,883 | 6,957 | 5,557 |
348
- | `meter` | 38,671 | 13,584 | 12,157 | 11,499 | 2,787 | 2,375 |
349
- | `navigation` | 36,492 | 13,493 | 11,986 | 5,704 | 1,707 | 1,424 |
350
- | `notifications` | 69,651 | 20,791 | 18,548 | 32,421 | 7,287 | 6,070 |
351
- | `number-input` | 58,782 | 19,328 | 17,255 | 15,873 | 4,100 | 3,133 |
352
- | `object-inspector` | 130,663 | 40,664 | 35,713 | 52,304 | 12,801 | 10,191 |
353
- | `option` | 30,364 | 10,629 | 9,430 | 8,550 | 1,937 | 1,582 |
354
- | `orb` | 36,192 | 13,879 | 12,409 | 9,445 | 3,550 | 3,020 |
355
- | `outline` | 38,164 | 13,524 | 12,064 | 11,299 | 3,025 | 2,343 |
356
- | `pagination` | 154,121 | 45,579 | 39,674 | 65,469 | 14,963 | 11,989 |
357
- | `pin-input` | 51,419 | 17,458 | 15,658 | 10,717 | 3,207 | 2,574 |
358
- | `popover` | 66,578 | 23,542 | 20,889 | 9,334 | 2,486 | 1,972 |
359
- | `progress` | 36,267 | 12,634 | 11,273 | 10,810 | 2,634 | 2,252 |
360
- | `qr-code` | 45,317 | 17,412 | 15,532 | 19,255 | 6,962 | 5,794 |
361
- | `quote` | 23,589 | 9,213 | 8,124 | 2,411 | 823 | 650 |
362
- | `radio` | 52,044 | 16,153 | 14,417 | 12,870 | 2,827 | 2,226 |
363
- | `rating` | 54,853 | 18,568 | 16,577 | 12,259 | 3,641 | 2,776 |
364
- | `sandbox` | 79,202 | 22,870 | 20,314 | 46,816 | 10,971 | 9,060 |
365
- | `scatter-chart` | 100,359 | 33,490 | 29,500 | 25,580 | 6,967 | 5,639 |
366
- | `scroll-area` | 35,927 | 12,124 | 10,775 | 14,171 | 3,614 | 2,943 |
367
- | `select` | 132,090 | 40,692 | 35,645 | 44,051 | 10,360 | 8,259 |
368
- | `skeleton` | 26,249 | 9,673 | 8,622 | 5,046 | 1,371 | 1,082 |
369
- | `skip-link` | 27,440 | 10,499 | 9,298 | 3,439 | 1,063 | 816 |
370
- | `slider` | 66,083 | 19,461 | 17,420 | 26,091 | 5,394 | 4,510 |
371
- | `sparkline` | 53,434 | 18,855 | 16,820 | 11,709 | 3,428 | 2,839 |
372
- | `speed-dial` | 78,181 | 26,527 | 23,577 | 19,115 | 4,333 | 3,455 |
373
- | `splitter` | 48,468 | 15,508 | 13,849 | 20,501 | 4,844 | 3,872 |
374
- | `stat` | 29,023 | 10,425 | 9,301 | 6,493 | 1,556 | 1,264 |
375
- | `steps` | 68,554 | 21,280 | 18,917 | 27,966 | 6,371 | 5,241 |
376
- | `switch` | 45,145 | 14,988 | 13,352 | 6,633 | 1,787 | 1,378 |
377
- | `table` | 114,637 | 33,371 | 29,404 | 52,040 | 12,408 | 10,012 |
378
- | `tabs` | 58,882 | 18,542 | 16,493 | 19,895 | 4,571 | 3,658 |
379
- | `tag` | 48,664 | 16,977 | 15,128 | 13,867 | 3,573 | 2,783 |
380
- | `text` | 28,979 | 10,064 | 8,883 | 7,767 | 1,544 | 1,256 |
381
- | `textarea` | 49,617 | 16,410 | 14,658 | 9,791 | 2,636 | 2,105 |
382
- | `time-input` | 193,210 | 55,099 | 47,929 | 75,860 | 16,828 | 13,646 |
383
- | `time-picker` | 108,036 | 32,124 | 28,324 | 44,390 | 10,615 | 8,636 |
384
- | `timeline` | 32,549 | 10,923 | 9,689 | 10,336 | 2,109 | 1,849 |
385
- | `toast` | 57,099 | 19,256 | 17,140 | 17,917 | 4,747 | 3,810 |
386
- | `toggle` | 50,029 | 15,923 | 14,181 | 11,796 | 3,071 | 2,550 |
387
- | `toolbar` | 35,714 | 12,714 | 11,337 | 8,486 | 2,168 | 1,748 |
388
- | `tooltip` | 61,569 | 21,793 | 19,364 | 11,642 | 3,138 | 2,534 |
389
- | `tour` | 94,721 | 30,635 | 27,113 | 30,345 | 7,309 | 5,845 |
390
- | `tree` | 77,877 | 24,737 | 22,041 | 27,121 | 7,085 | 5,731 |
391
- | `trend` | 32,227 | 12,323 | 10,977 | 5,651 | 1,607 | 1,311 |
392
- | `video` | 146,575 | 43,365 | 37,973 | 74,059 | 16,926 | 13,879 |
393
- | `video-playlist` | 111,169 | 34,047 | 30,044 | 43,555 | 9,595 | 7,792 |
394
- | `virtual-list` | 52,828 | 18,225 | 16,248 | 14,352 | 4,284 | 3,417 |
291
+ | `accordion` | 36,857 | 12,853 | 11,432 | 10,114 | 2,582 | 2,034 |
292
+ | `announcement` | 43,555 | 15,040 | 13,444 | 9,929 | 2,557 | 2,089 |
293
+ | `app-header` | 36,560 | 12,921 | 11,538 | 10,729 | 2,728 | 2,256 |
294
+ | `area-chart` | 98,956 | 33,403 | 29,598 | 23,084 | 6,359 | 5,252 |
295
+ | `aura` | 51,474 | 17,766 | 15,741 | 28,066 | 8,781 | 7,494 |
296
+ | `avatar` | 35,062 | 12,677 | 11,328 | 8,216 | 2,032 | 1,715 |
297
+ | `badge` | 32,752 | 11,796 | 10,500 | 9,034 | 2,172 | 1,872 |
298
+ | `bar-chart` | 107,347 | 35,190 | 31,118 | 31,330 | 8,078 | 6,753 |
299
+ | `blockquote` | 26,860 | 10,107 | 8,939 | 5,285 | 1,464 | 1,215 |
300
+ | `breadcrumbs` | 43,908 | 15,129 | 13,510 | 15,581 | 3,733 | 3,141 |
301
+ | `button` | 44,830 | 14,942 | 13,350 | 12,212 | 2,973 | 2,333 |
302
+ | `button-group` | 30,331 | 10,838 | 9,629 | 7,904 | 1,919 | 1,618 |
303
+ | `callout` | 38,026 | 14,059 | 12,523 | 5,773 | 1,518 | 1,240 |
304
+ | `canvas` | 119,127 | 35,188 | 30,706 | 78,932 | 21,505 | 17,712 |
305
+ | `card` | 28,213 | 10,189 | 9,050 | 6,662 | 1,692 | 1,422 |
306
+ | `carousel` | 54,175 | 17,280 | 15,481 | 26,184 | 6,101 | 4,937 |
307
+ | `chat` | 86,151 | 26,480 | 23,425 | 37,403 | 9,337 | 7,606 |
308
+ | `checkbox` | 48,432 | 15,532 | 13,865 | 10,201 | 2,515 | 2,037 |
309
+ | `checkbox-group` | 56,127 | 17,391 | 15,487 | 16,779 | 4,090 | 3,208 |
310
+ | `code` | 21,671 | 8,471 | 7,490 | 1,639 | 527 | 431 |
311
+ | `code-block` | 115,146 | 35,038 | 31,092 | 48,823 | 10,867 | 8,802 |
312
+ | `color-input` | 182,662 | 50,147 | 43,774 | 95,902 | 19,637 | 16,317 |
313
+ | `color-picker` | 138,192 | 37,367 | 32,800 | 81,912 | 17,310 | 14,192 |
314
+ | `combobox` | 160,958 | 47,305 | 41,463 | 62,374 | 14,194 | 11,474 |
315
+ | `command` | 113,433 | 33,602 | 29,527 | 46,217 | 11,188 | 8,996 |
316
+ | `copy-button` | 95,770 | 30,369 | 26,885 | 31,336 | 7,080 | 5,688 |
317
+ | `data-table` | 274,422 | 76,006 | 62,625 | 165,391 | 39,397 | 29,739 |
318
+ | `date-input` | 161,337 | 46,731 | 41,004 | 60,919 | 13,514 | 10,940 |
319
+ | `date-picker` | 64,983 | 20,675 | 18,525 | 25,951 | 6,251 | 5,012 |
320
+ | `description-list` | 27,039 | 9,669 | 8,577 | 5,841 | 1,361 | 1,072 |
321
+ | `dialog` | 45,798 | 15,662 | 13,933 | 11,623 | 3,106 | 2,598 |
322
+ | `divider` | 25,821 | 9,692 | 8,547 | 4,374 | 1,199 | 993 |
323
+ | `donut-chart` | 97,699 | 32,670 | 28,889 | 24,746 | 6,558 | 5,406 |
324
+ | `drawer` | 50,788 | 17,193 | 15,321 | 13,833 | 3,692 | 2,982 |
325
+ | `drilldown` | 48,367 | 16,190 | 14,425 | 14,232 | 3,447 | 2,723 |
326
+ | `empty` | 26,021 | 9,826 | 8,678 | 3,909 | 1,176 | 854 |
327
+ | `file-input` | 80,966 | 25,343 | 22,456 | 32,333 | 8,246 | 6,872 |
328
+ | `filter-input` | 163,771 | 45,997 | 40,173 | 76,595 | 16,162 | 13,069 |
329
+ | `flex` | 25,978 | 9,320 | 8,258 | 5,151 | 1,112 | 871 |
330
+ | `format-date` | 29,681 | 11,095 | 9,900 | 4,877 | 1,332 | 1,056 |
331
+ | `graph` | 82,966 | 25,102 | 22,235 | 32,476 | 8,040 | 6,513 |
332
+ | `grid` | 27,233 | 9,977 | 8,825 | 6,019 | 1,476 | 1,274 |
333
+ | `heatmap` | 102,310 | 34,079 | 30,107 | 24,708 | 6,536 | 5,340 |
334
+ | `icon` | 84,859 | 28,840 | 24,735 | 61,198 | 20,773 | 16,689 |
335
+ | `icon-button` | 46,612 | 14,930 | 13,319 | 13,995 | 2,966 | 2,372 |
336
+ | `image` | 27,417 | 10,070 | 8,941 | 5,868 | 1,673 | 1,285 |
337
+ | `input` | 52,486 | 17,526 | 15,470 | 12,104 | 3,553 | 2,627 |
338
+ | `kbd` | 29,864 | 11,148 | 9,869 | 6,135 | 1,683 | 1,400 |
339
+ | `legend` | 40,308 | 14,177 | 12,544 | 8,568 | 2,262 | 1,802 |
340
+ | `lightbox` | 60,817 | 19,445 | 17,284 | 22,419 | 5,624 | 4,469 |
341
+ | `line-chart` | 102,895 | 34,063 | 30,223 | 26,693 | 6,904 | 5,726 |
342
+ | `list` | 67,701 | 22,552 | 20,154 | 21,793 | 5,791 | 4,695 |
343
+ | `listbox` | 84,017 | 26,715 | 23,561 | 23,977 | 6,436 | 5,009 |
344
+ | `loader` | 30,830 | 11,357 | 10,102 | 5,871 | 1,600 | 1,292 |
345
+ | `map` | 119,234 | 30,517 | 26,585 | 77,051 | 16,195 | 13,014 |
346
+ | `megamenu` | 64,520 | 22,644 | 20,051 | 13,336 | 3,435 | 2,715 |
347
+ | `menu` | 95,623 | 31,029 | 27,537 | 29,883 | 6,957 | 5,590 |
348
+ | `meter` | 38,671 | 13,584 | 12,157 | 11,499 | 2,787 | 2,459 |
349
+ | `navigation` | 36,492 | 13,493 | 11,986 | 5,704 | 1,707 | 1,481 |
350
+ | `notifications` | 69,651 | 20,791 | 18,512 | 32,421 | 7,288 | 5,968 |
351
+ | `number-input` | 60,606 | 19,686 | 17,579 | 17,697 | 4,485 | 3,498 |
352
+ | `object-inspector` | 131,000 | 40,779 | 35,823 | 52,641 | 12,903 | 10,405 |
353
+ | `option` | 31,522 | 10,947 | 9,717 | 9,711 | 2,284 | 1,906 |
354
+ | `orb` | 36,192 | 13,879 | 12,411 | 9,445 | 3,550 | 3,012 |
355
+ | `outline` | 38,336 | 13,557 | 12,074 | 11,471 | 3,056 | 2,430 |
356
+ | `pagination` | 155,279 | 45,864 | 39,924 | 66,627 | 15,238 | 12,267 |
357
+ | `pin-input` | 51,419 | 17,458 | 15,599 | 10,717 | 3,207 | 2,585 |
358
+ | `popover` | 66,578 | 23,542 | 20,916 | 9,334 | 2,487 | 1,968 |
359
+ | `progress` | 36,267 | 12,635 | 11,273 | 10,810 | 2,634 | 2,357 |
360
+ | `qr-code` | 45,317 | 17,412 | 15,531 | 19,255 | 6,962 | 5,809 |
361
+ | `quote` | 23,589 | 9,213 | 8,124 | 2,411 | 823 | 658 |
362
+ | `radio` | 52,044 | 16,153 | 14,418 | 12,870 | 2,827 | 2,264 |
363
+ | `rating` | 54,853 | 18,568 | 16,526 | 12,259 | 3,642 | 2,874 |
364
+ | `sandbox` | 84,084 | 24,718 | 21,754 | 51,659 | 12,602 | 10,509 |
365
+ | `scatter-chart` | 100,359 | 33,490 | 29,578 | 25,580 | 6,967 | 5,602 |
366
+ | `scroll-area` | 35,927 | 12,124 | 10,775 | 14,171 | 3,614 | 3,020 |
367
+ | `select` | 133,248 | 40,963 | 35,941 | 45,209 | 10,684 | 8,423 |
368
+ | `skeleton` | 26,249 | 9,673 | 8,622 | 5,046 | 1,372 | 1,047 |
369
+ | `skip-link` | 27,440 | 10,499 | 9,298 | 3,439 | 1,064 | 894 |
370
+ | `slider` | 66,083 | 19,461 | 17,394 | 26,091 | 5,395 | 4,454 |
371
+ | `sparkline` | 53,434 | 18,855 | 16,820 | 11,709 | 3,429 | 2,947 |
372
+ | `speed-dial` | 78,181 | 26,527 | 23,586 | 19,115 | 4,334 | 3,512 |
373
+ | `splitter` | 48,468 | 15,508 | 13,849 | 20,501 | 4,845 | 4,060 |
374
+ | `stat` | 29,023 | 10,425 | 9,301 | 6,493 | 1,556 | 1,224 |
375
+ | `steps` | 68,554 | 21,280 | 18,917 | 27,966 | 6,371 | 5,160 |
376
+ | `switch` | 45,145 | 14,988 | 13,352 | 6,633 | 1,787 | 1,404 |
377
+ | `table` | 115,321 | 33,512 | 29,556 | 52,724 | 12,553 | 10,145 |
378
+ | `tabs` | 58,882 | 18,542 | 16,481 | 19,895 | 4,571 | 3,668 |
379
+ | `tag` | 48,664 | 16,977 | 15,128 | 13,867 | 3,574 | 2,962 |
380
+ | `text` | 28,979 | 10,064 | 8,883 | 7,767 | 1,545 | 1,213 |
381
+ | `textarea` | 49,617 | 16,410 | 14,657 | 9,791 | 2,637 | 2,134 |
382
+ | `time-input` | 196,532 | 55,850 | 48,459 | 79,182 | 17,551 | 14,187 |
383
+ | `time-picker` | 111,265 | 32,865 | 28,907 | 47,416 | 11,345 | 9,051 |
384
+ | `timeline` | 35,889 | 12,186 | 10,862 | 11,006 | 2,319 | 1,992 |
385
+ | `toast` | 57,099 | 19,256 | 17,108 | 17,917 | 4,747 | 3,808 |
386
+ | `toggle` | 50,029 | 15,925 | 14,145 | 11,796 | 3,072 | 2,480 |
387
+ | `toolbar` | 35,714 | 12,714 | 11,337 | 8,486 | 2,168 | 1,768 |
388
+ | `tooltip` | 61,569 | 21,793 | 19,357 | 11,642 | 3,139 | 2,498 |
389
+ | `tour` | 94,721 | 30,635 | 27,093 | 30,345 | 7,310 | 5,920 |
390
+ | `tree` | 77,877 | 24,737 | 22,003 | 27,121 | 7,085 | 5,767 |
391
+ | `trend` | 32,227 | 12,323 | 10,976 | 5,651 | 1,608 | 1,306 |
392
+ | `video` | 148,402 | 43,803 | 38,346 | 75,884 | 17,381 | 14,284 |
393
+ | `video-playlist` | 114,937 | 35,433 | 31,374 | 44,968 | 9,961 | 8,170 |
394
+ | `virtual-list` | 53,068 | 18,304 | 16,310 | 14,592 | 4,371 | 3,435 |
395
395
 
396
396
  ## What an install adds to `node_modules`
397
397
 
@@ -403,12 +403,12 @@ stripped column shows the bytes we removed.
403
403
 
404
404
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
405
405
  |---|---|---|---|---|
406
- | `@fusion.dev/helix-core` | 2,315,450 | 525 | 656,164 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
407
- | `@fusion.dev/helix-headless` | 19,746,804 | 676 | 1,898,412 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
406
+ | `@fusion.dev/helix-core` | 2,317,555 | 525 | 656,164 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
407
+ | `@fusion.dev/helix-headless` | 20,166,480 | 676 | 1,928,342 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
408
408
  | `@fusion.dev/helix-icons` | 150,509 | 21 | 48,154 | `svgo` |
409
409
  | `@fusion.dev/helix-styles` | 110,707 | 6 | 0 | none |
410
410
  | `@fusion.dev/helix-theme` | 528,598 | 8 | 5,393 | none |
411
- | `@fusion.dev/helix` | 19,897,276 | 922 | 406,237 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
411
+ | `@fusion.dev/helix` | 20,249,887 | 922 | 408,772 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
412
412
 
413
413
  ## Not measured yet
414
414
 
package/content/sandbox.mdx CHANGED
@@ -37,9 +37,14 @@ the value to the preview slotted into it. The source pane and the preview do not
37
37
  reference each other, so you can replace either one or use it alone.
38
38
 
39
39
  The event includes the pane's `name`, so one sandbox can hold several panes
40
- without tracking which element sent each event. A pane named `html` sets the
41
- preview's markup, and a pane named `css` sets its stylesheet. The sandbox
42
- ignores a pane with any other name, so that pane only displays its contents.
40
+ without tracking which element sent each event. The names the sandbox reads:
41
+
42
+ - A pane named `html` sets the preview's markup.
43
+ - A pane named `css` sets its stylesheet.
44
+ - A pane named `js` sets a script, which runs as a module after the markup.
45
+
46
+ The sandbox ignores a pane with any other name, so that pane only displays its
47
+ contents.
43
48
 
44
49
  A pane's text goes in its `value`. The pane renders no children. The sandbox
45
50
  also hands each pane's `value` to the preview when it starts, so you write the
@@ -85,7 +90,16 @@ hides the quieter lines.
85
90
 
86
91
  `helix-sandbox-preview` loads `src` into a sandboxed frame. You provide that
87
92
  document. It loads the styles and the elements your examples use, and it talks
88
- to the preview through `postMessage`:
93
+ to the preview through `postMessage`.
94
+
95
+ Without `src`, the preview loads a built-in document. It runs the example's
96
+ HTML, CSS, and scripts, and reports the console, uncaught errors, the height,
97
+ and presses, so a sandbox renders with nothing to host. It defines no element,
98
+ so set `src` to a document of your own when your examples use Helix
99
+ components. Its script is inline, so a page whose Content Security Policy
100
+ refuses inline scripts needs a `src` too.
101
+
102
+ The messages:
89
103
 
90
104
  | Message | Sent by | What it carries |
91
105
  |---|---|---|
@@ -106,8 +120,8 @@ it was given. The types are exported from `@fusion.dev/helix/sandbox` as
106
120
  `servePreview` from `@fusion.dev/helix/sandbox` is that protocol, written for
107
121
  you. Call it once in the frame document, after your elements are defined. It
108
122
  writes each render into `#preview-root`, runs the example's scripts, relays
109
- its console, reports its height and its presses, and adds the rules for the
110
- four layouts. A frame follows. `/helix.css` is the stylesheet from
123
+ its console, its uncaught errors, and its unhandled promise rejections,
124
+ reports its height and its presses, and adds the rules for the four layouts. A frame follows. `/helix.css` is the stylesheet from
111
125
  `@fusion.dev/helix-styles`, and `/frame.js` is a classic script you bundle,
112
126
  for the reason under "How the preview is isolated":
113
127
 
package/dist/sources.generated.js CHANGED
@@ -3829,7 +3829,7 @@ on its own.
3829
3829
 
3830
3830
  | | Raw | Gzip | Brotli |
3831
3831
  |---|---|---|---|
3832
- | Lit and \`@fusion.dev/helix-core\` | 234,981 | 72,947 | 62,597 |
3832
+ | Lit and \`@fusion.dev/helix-core\` | 234,981 | 72,947 | 62,570 |
3833
3833
 
3834
3834
  ## Whole packages
3835
3835
 
@@ -3840,12 +3840,12 @@ either barrel. The per-component tables show what your page pays.
3840
3840
 
3841
3841
  | Package | Raw | Gzip | Brotli | |
3842
3842
  |---|---|---|---|---|
3843
- | \`@fusion.dev/helix-core\` | 234,190 | 72,745 | 62,250 | The element base class, mixins, decorators, and floating positioning. |
3844
- | \`@fusion.dev/helix-headless\` | 1,219,911 | 328,784 | 247,877 | Every headless family. The barrel entry includes all of them. |
3843
+ | \`@fusion.dev/helix-core\` | 234,190 | 72,745 | 62,259 | The element base class, mixins, decorators, and floating positioning. |
3844
+ | \`@fusion.dev/helix-headless\` | 1,236,821 | 333,138 | 250,600 | Every headless family. The barrel entry includes all of them. |
3845
3845
  | \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
3846
3846
  | \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
3847
3847
  | \`fusion_helix_theme_bg.wasm\` | 490,270 | 155,600 | 125,779 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
3848
- | \`@fusion.dev/helix\` | 1,859,442 | 452,585 | 322,747 | Every styled family. |
3848
+ | \`@fusion.dev/helix\` | 1,880,933 | 458,174 | 326,119 | Every styled family. |
3849
3849
  | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
3850
3850
 
3851
3851
  ## Stylesheets
@@ -3866,11 +3866,11 @@ shows the whole cost of using the base layer on its own.
3866
3866
 
3867
3867
  ## What the numbers say
3868
3868
 
3869
- **Most of your first component is the shared runtime.** The median styled family is 17,492 bytes gzipped alone, and it adds 3,666 to a page that already has Helix. The shared runtime is 79 percent of the first component, and the component itself is 21 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.
3869
+ **Most of your first component is the shared runtime.** The median styled family is 17,492 bytes gzipped alone, and it adds 3,667 to a page that already has Helix. The shared runtime is 79 percent of the first component, and the component itself is 21 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.
3870
3870
 
3871
- Across the 104 styled components, the smallest is \`code\` at 8,471 bytes gzipped alone, and the largest is \`data-table\` at 75,387. Every family together is 452,585.
3871
+ Across the 104 styled components, the smallest is \`code\` at 8,471 bytes gzipped alone, and the largest is \`data-table\` at 76,006. Every family together is 458,174.
3872
3872
 
3873
- 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 328,784 bytes gzipped, whatever else the page imports. That is 19 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
3873
+ 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 333,138 bytes gzipped, whatever else the page imports. That is 19 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
3874
3874
 
3875
3875
  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 16,812 bytes gzipped alone.
3876
3876
 
@@ -3884,22 +3884,22 @@ The table has no whole-library row. That row would compare how many components e
3884
3884
 
3885
3885
  | Component | System | Raw | Gzip | Brotli |
3886
3886
  |---|---|---|---|---|
3887
- | \`button\` | **Helix** | 44,830 | 14,942 | 13,352 |
3887
+ | \`button\` | **Helix** | 44,830 | 14,942 | 13,350 |
3888
3888
  | | Carbon | 133,058 | 20,959 | 17,685 |
3889
3889
  | | Material Web | 47,060 | 14,173 | 12,591 |
3890
3890
  | | Shoelace | 62,628 | 18,287 | 15,805 |
3891
3891
  | | Spectrum | 98,792 | 22,045 | 18,674 |
3892
- | \`checkbox\` | **Helix** | 48,432 | 15,532 | 13,890 |
3892
+ | \`checkbox\` | **Helix** | 48,432 | 15,532 | 13,865 |
3893
3893
  | | Carbon | 60,255 | 15,609 | 13,550 |
3894
3894
  | | Material Web | 43,785 | 13,556 | 12,015 |
3895
3895
  | | Shoelace | 47,614 | 15,177 | 13,301 |
3896
3896
  | | Spectrum | 62,492 | 15,437 | 13,481 |
3897
- | \`dialog\` | **Helix** | 45,798 | 15,662 | 13,936 |
3897
+ | \`dialog\` | **Helix** | 45,798 | 15,662 | 13,933 |
3898
3898
  | | Carbon | 510,866 | 67,390 | 39,189 |
3899
3899
  | | Material Web | 34,238 | 11,510 | 10,229 |
3900
3900
  | | Shoelace | 52,754 | 17,698 | 15,554 |
3901
3901
  | | Spectrum | 155,708 | 31,899 | 26,262 |
3902
- | \`radio\` | **Helix** | 52,044 | 16,153 | 14,417 |
3902
+ | \`radio\` | **Helix** | 52,044 | 16,153 | 14,418 |
3903
3903
  | | Carbon | 63,055 | 16,887 | 14,605 |
3904
3904
  | | Material Web | 41,044 | 13,234 | 11,757 |
3905
3905
  | | Shoelace | 34,865 | 12,027 | 10,559 |
@@ -3909,12 +3909,12 @@ The table has no whole-library row. That row would compare how many components e
3909
3909
  | | Material Web | 50,155 | 14,577 | 12,935 |
3910
3910
  | | Shoelace | 37,833 | 11,814 | 10,568 |
3911
3911
  | | Spectrum | 62,322 | 15,059 | 13,321 |
3912
- | \`tabs\` | **Helix** | 58,882 | 18,542 | 16,493 |
3912
+ | \`tabs\` | **Helix** | 58,882 | 18,542 | 16,481 |
3913
3913
  | | Carbon | 578,766 | 73,537 | 43,235 |
3914
3914
  | | Material Web | 38,883 | 12,820 | 11,368 |
3915
3915
  | | Shoelace | 54,573 | 17,140 | 15,068 |
3916
3916
  | | Spectrum | 64,875 | 18,298 | 16,283 |
3917
- | \`tooltip\` | **Helix** | 61,569 | 21,793 | 19,364 |
3917
+ | \`tooltip\` | **Helix** | 61,569 | 21,793 | 19,357 |
3918
3918
  | | Carbon | 189,382 | 30,354 | 22,273 |
3919
3919
  | | Material Web | | not shipped | |
3920
3920
  | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -3966,104 +3966,104 @@ Structure, accessibility, state, and form participation. It has no presentation
3966
3966
 
3967
3967
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
3968
3968
  |---|---|---|---|---|---|---|
3969
- | \`accordion\` | 32,745 | 11,983 | 10,624 | 6,017 | 1,646 | 1,272 |
3970
- | \`announcement\` | 38,619 | 13,972 | 12,442 | 5,012 | 1,450 | 1,030 |
3971
- | \`app-header\` | 31,167 | 11,720 | 10,420 | 5,353 | 1,515 | 1,133 |
3972
- | \`area-chart\` | 90,314 | 31,514 | 27,824 | 14,461 | 4,416 | 3,579 |
3973
- | \`avatar\` | 31,388 | 11,881 | 10,596 | 4,559 | 1,294 | 973 |
3974
- | \`badge\` | 26,985 | 10,576 | 9,395 | 3,276 | 995 | 682 |
3975
- | \`bar-chart\` | 93,279 | 32,361 | 28,583 | 17,280 | 5,203 | 4,216 |
3976
- | \`blockquote\` | 24,289 | 9,538 | 8,436 | 2,729 | 970 | 709 |
3977
- | \`breadcrumbs\` | 36,254 | 13,895 | 12,346 | 7,945 | 2,440 | 1,979 |
3978
- | \`button\` | 37,708 | 13,495 | 12,036 | 5,106 | 1,496 | 1,107 |
3979
- | \`button-group\` | 26,475 | 10,143 | 8,967 | 4,060 | 1,284 | 984 |
3980
- | \`callout\` | 34,206 | 13,174 | 11,698 | 1,971 | 691 | 433 |
3981
- | \`canvas\` | 97,426 | 30,955 | 27,175 | 57,597 | 17,358 | 14,281 |
3982
- | \`card\` | 23,959 | 9,173 | 8,113 | 2,422 | 740 | 430 |
3983
- | \`carousel\` | 43,284 | 15,479 | 13,782 | 15,309 | 4,235 | 3,270 |
3984
- | \`chat\` | 71,361 | 23,872 | 21,218 | 22,622 | 6,642 | 5,212 |
3985
- | \`checkbox\` | 41,603 | 14,029 | 12,535 | 3,389 | 1,038 | 631 |
3986
- | \`checkbox-group\` | 48,227 | 15,745 | 14,033 | 8,887 | 2,348 | 1,667 |
3987
- | \`code\` | 20,483 | 8,147 | 7,222 | 466 | 209 | 94 |
3988
- | \`code-block\` | 93,819 | 31,677 | 28,094 | 27,511 | 7,435 | 5,893 |
3989
- | \`color-input\` | 138,124 | 43,671 | 38,131 | 51,375 | 13,111 | 10,523 |
3990
- | \`color-picker\` | 99,433 | 31,670 | 27,757 | 43,159 | 11,507 | 9,345 |
3991
- | \`combobox\` | 142,260 | 43,814 | 38,517 | 43,690 | 10,666 | 8,335 |
3992
- | \`command\` | 97,336 | 30,247 | 26,580 | 30,126 | 7,829 | 6,068 |
3993
- | \`copy-button\` | 82,686 | 28,226 | 25,028 | 18,268 | 4,811 | 3,746 |
3994
- | \`data-table\` | 202,068 | 60,451 | 51,761 | 94,100 | 24,374 | 19,295 |
3995
- | \`date-input\` | 139,286 | 42,904 | 37,643 | 38,882 | 9,627 | 7,618 |
3996
- | \`date-picker\` | 56,976 | 19,245 | 17,230 | 17,964 | 4,811 | 3,677 |
3997
- | \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 643 | 402 |
3998
- | \`dialog\` | 40,318 | 14,394 | 12,830 | 6,164 | 1,774 | 1,371 |
3999
- | \`divider\` | 23,173 | 9,044 | 8,008 | 1,743 | 605 | 319 |
4000
- | \`donut-chart\` | 87,568 | 30,595 | 27,055 | 14,636 | 4,396 | 3,528 |
4001
- | \`drawer\` | 44,592 | 15,794 | 14,052 | 7,652 | 2,174 | 1,662 |
4002
- | \`drilldown\` | 41,993 | 14,879 | 13,234 | 7,871 | 2,065 | 1,644 |
4003
- | \`empty\` | 24,376 | 9,367 | 8,289 | 2,282 | 747 | 603 |
4004
- | \`file-input\` | 68,038 | 22,893 | 20,284 | 19,416 | 5,734 | 4,528 |
4005
- | \`filter-input\` | 129,301 | 40,270 | 35,249 | 42,492 | 10,494 | 8,289 |
4006
- | \`format-date\` | 29,097 | 10,967 | 9,762 | 4,309 | 1,219 | 922 |
4007
- | \`graph\` | 67,541 | 22,349 | 19,830 | 17,070 | 5,242 | 4,152 |
4008
- | \`heatmap\` | 94,729 | 32,469 | 28,653 | 17,146 | 4,921 | 3,897 |
4009
- | \`icon\` | 82,676 | 28,314 | 24,176 | 59,022 | 20,202 | 16,189 |
4010
- | \`icon-button\` | 38,145 | 13,534 | 12,066 | 5,543 | 1,532 | 1,137 |
4011
- | \`image\` | 25,686 | 9,596 | 8,494 | 4,155 | 1,225 | 885 |
4012
- | \`input\` | 47,906 | 16,469 | 14,567 | 7,538 | 2,431 | 1,702 |
4013
- | \`kbd\` | 27,537 | 10,603 | 9,356 | 3,823 | 1,172 | 875 |
4014
- | \`legend\` | 34,902 | 12,917 | 11,489 | 3,287 | 1,078 | 835 |
4015
- | \`lightbox\` | 53,824 | 18,098 | 16,078 | 15,447 | 4,217 | 3,179 |
4016
- | \`line-chart\` | 91,349 | 31,683 | 28,078 | 15,163 | 4,468 | 3,662 |
4017
- | \`list\` | 58,188 | 20,365 | 18,130 | 12,455 | 3,560 | 2,790 |
4018
- | \`listbox\` | 78,087 | 25,290 | 22,367 | 18,065 | 4,970 | 3,774 |
4019
- | \`loader\` | 27,624 | 10,570 | 9,381 | 2,683 | 899 | 596 |
4020
- | \`map\` | 82,290 | 24,837 | 21,614 | 40,130 | 10,391 | 8,016 |
4021
- | \`megamenu\` | 59,198 | 21,458 | 19,033 | 8,030 | 2,230 | 1,614 |
4022
- | \`menu\` | 84,483 | 28,891 | 25,547 | 18,748 | 4,766 | 3,608 |
4023
- | \`meter\` | 32,441 | 12,315 | 11,048 | 5,288 | 1,498 | 1,258 |
4024
- | \`navigation\` | 34,415 | 12,963 | 11,566 | 3,642 | 1,214 | 925 |
4025
- | \`notifications\` | 54,785 | 18,127 | 16,150 | 17,570 | 4,608 | 3,582 |
4026
- | \`number-input\` | 53,556 | 18,177 | 16,184 | 10,663 | 2,868 | 2,174 |
4027
- | \`object-inspector\` | 113,048 | 37,785 | 33,296 | 34,701 | 9,901 | 7,733 |
4028
- | \`option\` | 26,162 | 9,608 | 8,501 | 4,356 | 1,006 | 704 |
4029
- | \`outline\` | 33,572 | 12,642 | 11,253 | 6,722 | 2,086 | 1,544 |
4030
- | \`pagination\` | 134,427 | 42,169 | 36,728 | 45,792 | 11,538 | 9,053 |
4031
- | \`pin-input\` | 47,727 | 16,544 | 14,800 | 7,044 | 2,232 | 1,675 |
4032
- | \`popover\` | 63,077 | 22,775 | 20,185 | 5,851 | 1,667 | 1,283 |
4033
- | \`progress\` | 28,718 | 11,006 | 9,799 | 3,278 | 1,012 | 764 |
4034
- | \`qr-code\` | 43,379 | 16,926 | 15,096 | 17,334 | 6,455 | 5,368 |
4035
- | \`quote\` | 22,698 | 9,004 | 7,944 | 1,537 | 619 | 361 |
4036
- | \`radio\` | 43,543 | 14,616 | 13,009 | 4,379 | 1,265 | 846 |
4037
- | \`rating\` | 50,712 | 17,380 | 15,479 | 8,135 | 2,416 | 1,906 |
4038
- | \`scatter-chart\` | 90,984 | 31,421 | 27,759 | 16,224 | 4,815 | 3,845 |
4039
- | \`scroll-area\` | 30,549 | 11,169 | 9,898 | 8,810 | 2,595 | 2,010 |
4040
- | \`select\` | 116,717 | 37,891 | 33,201 | 28,697 | 7,540 | 5,775 |
4041
- | \`skeleton\` | 22,490 | 8,756 | 7,760 | 1,301 | 491 | 251 |
4042
- | \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,551 | 594 | 375 |
4043
- | \`slider\` | 50,673 | 17,100 | 15,320 | 10,700 | 2,979 | 2,438 |
4044
- | \`sparkline\` | 47,807 | 17,538 | 15,679 | 6,099 | 2,060 | 1,674 |
4045
- | \`speed-dial\` | 70,101 | 25,092 | 22,276 | 11,054 | 2,837 | 2,267 |
4046
- | \`splitter\` | 42,028 | 14,435 | 12,890 | 14,080 | 3,725 | 3,011 |
4047
- | \`stat\` | 25,480 | 9,707 | 8,632 | 2,960 | 876 | 547 |
4048
- | \`steps\` | 53,281 | 18,462 | 16,414 | 12,709 | 3,488 | 2,712 |
4049
- | \`switch\` | 40,457 | 13,843 | 12,355 | 1,961 | 706 | 437 |
4050
- | \`table\` | 97,923 | 30,529 | 26,865 | 35,329 | 9,548 | 7,493 |
4051
- | \`tabs\` | 49,168 | 16,697 | 14,829 | 10,196 | 2,659 | 1,980 |
4052
- | \`tag\` | 43,396 | 15,823 | 14,112 | 8,617 | 2,395 | 1,870 |
4053
- | \`textarea\` | 45,364 | 15,415 | 13,797 | 5,556 | 1,604 | 1,239 |
4054
- | \`time-input\` | 167,032 | 50,781 | 44,007 | 49,698 | 12,426 | 9,802 |
4055
- | \`time-picker\` | 94,460 | 29,621 | 26,115 | 30,821 | 8,074 | 6,309 |
4056
- | \`timeline\` | 25,353 | 9,530 | 8,492 | 3,147 | 754 | 508 |
4057
- | \`toast\` | 48,567 | 17,393 | 15,444 | 9,399 | 2,772 | 2,137 |
4058
- | \`toggle\` | 44,477 | 14,658 | 12,999 | 6,256 | 1,720 | 1,247 |
4059
- | \`toolbar\` | 32,696 | 12,205 | 10,870 | 5,485 | 1,671 | 1,336 |
4060
- | \`tooltip\` | 58,421 | 21,042 | 18,676 | 8,512 | 2,345 | 1,780 |
4061
- | \`tour\` | 83,346 | 28,538 | 25,265 | 18,989 | 5,146 | 3,995 |
4062
- | \`tree\` | 68,464 | 22,776 | 20,292 | 17,724 | 5,066 | 3,989 |
4063
- | \`trend\` | 30,375 | 11,863 | 10,555 | 3,818 | 1,145 | 993 |
4064
- | \`video\` | 125,439 | 39,576 | 34,561 | 52,942 | 13,117 | 10,483 |
4065
- | \`video-playlist\` | 94,665 | 31,200 | 27,597 | 27,065 | 6,689 | 5,320 |
4066
- | \`virtual-list\` | 50,914 | 17,761 | 15,804 | 12,456 | 3,816 | 2,995 |
3969
+ | \`accordion\` | 32,745 | 11,983 | 10,623 | 6,017 | 1,647 | 1,335 |
3970
+ | \`announcement\` | 38,619 | 13,972 | 12,442 | 5,012 | 1,450 | 1,168 |
3971
+ | \`app-header\` | 31,167 | 11,719 | 10,420 | 5,353 | 1,516 | 1,153 |
3972
+ | \`area-chart\` | 90,314 | 31,514 | 27,821 | 14,461 | 4,416 | 3,604 |
3973
+ | \`avatar\` | 31,388 | 11,881 | 10,598 | 4,559 | 1,294 | 1,079 |
3974
+ | \`badge\` | 26,985 | 10,575 | 9,395 | 3,276 | 995 | 714 |
3975
+ | \`bar-chart\` | 93,279 | 32,362 | 28,587 | 17,280 | 5,203 | 4,274 |
3976
+ | \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,729 | 970 | 795 |
3977
+ | \`breadcrumbs\` | 36,254 | 13,895 | 12,352 | 7,945 | 2,440 | 2,047 |
3978
+ | \`button\` | 37,708 | 13,495 | 12,036 | 5,106 | 1,496 | 1,198 |
3979
+ | \`button-group\` | 26,475 | 10,143 | 8,967 | 4,060 | 1,285 | 964 |
3980
+ | \`callout\` | 34,206 | 13,174 | 11,698 | 1,971 | 692 | 471 |
3981
+ | \`canvas\` | 98,010 | 31,129 | 27,330 | 58,167 | 17,525 | 14,450 |
3982
+ | \`card\` | 23,959 | 9,173 | 8,113 | 2,422 | 741 | 502 |
3983
+ | \`carousel\` | 43,284 | 15,479 | 13,779 | 15,309 | 4,235 | 3,396 |
3984
+ | \`chat\` | 71,637 | 23,938 | 21,186 | 22,897 | 6,701 | 5,368 |
3985
+ | \`checkbox\` | 41,603 | 14,029 | 12,535 | 3,389 | 1,038 | 652 |
3986
+ | \`checkbox-group\` | 48,227 | 15,745 | 14,033 | 8,887 | 2,348 | 1,764 |
3987
+ | \`code\` | 20,483 | 8,146 | 7,222 | 466 | 209 | 75 |
3988
+ | \`code-block\` | 93,819 | 31,678 | 28,090 | 27,511 | 7,435 | 5,975 |
3989
+ | \`color-input\` | 138,124 | 43,671 | 38,154 | 51,375 | 13,111 | 10,621 |
3990
+ | \`color-picker\` | 99,433 | 31,670 | 27,755 | 43,159 | 11,507 | 9,282 |
3991
+ | \`combobox\` | 143,762 | 44,230 | 38,828 | 45,190 | 11,090 | 8,780 |
3992
+ | \`command\` | 101,159 | 31,194 | 27,475 | 33,952 | 8,774 | 6,966 |
3993
+ | \`copy-button\` | 82,686 | 28,226 | 24,998 | 18,268 | 4,812 | 3,822 |
3994
+ | \`data-table\` | 203,690 | 60,900 | 52,052 | 95,715 | 24,809 | 19,689 |
3995
+ | \`date-input\` | 139,407 | 42,943 | 37,664 | 39,003 | 9,664 | 7,607 |
3996
+ | \`date-picker\` | 56,976 | 19,245 | 17,230 | 17,964 | 4,811 | 3,838 |
3997
+ | \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 643 | 331 |
3998
+ | \`dialog\` | 40,318 | 14,394 | 12,829 | 6,164 | 1,774 | 1,346 |
3999
+ | \`divider\` | 23,173 | 9,044 | 8,008 | 1,743 | 606 | 476 |
4000
+ | \`donut-chart\` | 87,568 | 30,596 | 27,015 | 14,636 | 4,396 | 3,601 |
4001
+ | \`drawer\` | 44,592 | 15,794 | 14,035 | 7,652 | 2,175 | 1,746 |
4002
+ | \`drilldown\` | 41,993 | 14,879 | 13,232 | 7,871 | 2,066 | 1,606 |
4003
+ | \`empty\` | 24,376 | 9,367 | 8,289 | 2,282 | 748 | 558 |
4004
+ | \`file-input\` | 68,038 | 22,893 | 20,320 | 19,416 | 5,734 | 4,536 |
4005
+ | \`filter-input\` | 129,301 | 40,271 | 35,274 | 42,492 | 10,495 | 8,311 |
4006
+ | \`format-date\` | 29,097 | 10,967 | 9,763 | 4,309 | 1,219 | 944 |
4007
+ | \`graph\` | 68,110 | 22,496 | 20,001 | 17,639 | 5,379 | 4,346 |
4008
+ | \`heatmap\` | 94,729 | 32,469 | 28,642 | 17,146 | 4,921 | 4,002 |
4009
+ | \`icon\` | 82,676 | 28,313 | 24,183 | 59,022 | 20,203 | 16,149 |
4010
+ | \`icon-button\` | 38,145 | 13,534 | 12,064 | 5,543 | 1,533 | 1,152 |
4011
+ | \`image\` | 25,686 | 9,595 | 8,494 | 4,155 | 1,226 | 924 |
4012
+ | \`input\` | 47,906 | 16,469 | 14,567 | 7,538 | 2,432 | 1,775 |
4013
+ | \`kbd\` | 27,537 | 10,603 | 9,356 | 3,823 | 1,172 | 912 |
4014
+ | \`legend\` | 34,902 | 12,917 | 11,476 | 3,287 | 1,078 | 807 |
4015
+ | \`lightbox\` | 53,824 | 18,098 | 16,066 | 15,447 | 4,218 | 3,241 |
4016
+ | \`line-chart\` | 91,349 | 31,683 | 28,066 | 15,163 | 4,468 | 3,731 |
4017
+ | \`list\` | 60,646 | 21,011 | 18,763 | 14,761 | 4,195 | 3,224 |
4018
+ | \`listbox\` | 79,245 | 25,590 | 22,627 | 19,224 | 5,304 | 4,088 |
4019
+ | \`loader\` | 27,624 | 10,570 | 9,381 | 2,683 | 900 | 616 |
4020
+ | \`map\` | 82,619 | 24,991 | 21,689 | 40,445 | 10,504 | 8,123 |
4021
+ | \`megamenu\` | 59,198 | 21,458 | 19,046 | 8,030 | 2,231 | 1,665 |
4022
+ | \`menu\` | 84,483 | 28,892 | 25,583 | 18,748 | 4,766 | 3,634 |
4023
+ | \`meter\` | 32,441 | 12,315 | 10,980 | 5,288 | 1,498 | 1,288 |
4024
+ | \`navigation\` | 34,415 | 12,963 | 11,566 | 3,642 | 1,214 | 944 |
4025
+ | \`notifications\` | 54,785 | 18,127 | 16,150 | 17,570 | 4,608 | 3,705 |
4026
+ | \`number-input\` | 55,298 | 18,519 | 16,519 | 12,405 | 3,259 | 2,475 |
4027
+ | \`object-inspector\` | 113,385 | 37,899 | 33,381 | 35,038 | 10,005 | 7,846 |
4028
+ | \`option\` | 27,320 | 9,919 | 8,775 | 5,517 | 1,296 | 987 |
4029
+ | \`outline\` | 33,744 | 12,675 | 11,287 | 6,894 | 2,126 | 1,666 |
4030
+ | \`pagination\` | 135,585 | 42,458 | 36,992 | 46,950 | 11,815 | 9,218 |
4031
+ | \`pin-input\` | 47,727 | 16,544 | 14,800 | 7,044 | 2,232 | 1,760 |
4032
+ | \`popover\` | 63,077 | 22,775 | 20,213 | 5,851 | 1,667 | 1,254 |
4033
+ | \`progress\` | 28,718 | 11,006 | 9,768 | 3,278 | 1,012 | 827 |
4034
+ | \`qr-code\` | 43,379 | 16,926 | 15,091 | 17,334 | 6,455 | 5,488 |
4035
+ | \`quote\` | 22,698 | 9,004 | 7,945 | 1,537 | 619 | 442 |
4036
+ | \`radio\` | 43,543 | 14,616 | 13,009 | 4,379 | 1,266 | 899 |
4037
+ | \`rating\` | 50,712 | 17,382 | 15,477 | 8,135 | 2,416 | 1,803 |
4038
+ | \`scatter-chart\` | 90,984 | 31,422 | 27,698 | 16,224 | 4,815 | 3,825 |
4039
+ | \`scroll-area\` | 30,549 | 11,169 | 9,879 | 8,810 | 2,595 | 2,049 |
4040
+ | \`select\` | 117,876 | 38,165 | 33,479 | 29,856 | 7,879 | 6,055 |
4041
+ | \`skeleton\` | 22,490 | 8,756 | 7,763 | 1,301 | 491 | 252 |
4042
+ | \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,551 | 595 | 521 |
4043
+ | \`slider\` | 50,673 | 17,100 | 15,319 | 10,700 | 2,980 | 2,478 |
4044
+ | \`sparkline\` | 47,807 | 17,538 | 15,679 | 6,099 | 2,060 | 1,714 |
4045
+ | \`speed-dial\` | 70,101 | 25,092 | 22,274 | 11,054 | 2,837 | 2,185 |
4046
+ | \`splitter\` | 42,028 | 14,435 | 12,890 | 14,080 | 3,725 | 3,064 |
4047
+ | \`stat\` | 25,480 | 9,706 | 8,632 | 2,960 | 876 | 617 |
4048
+ | \`steps\` | 53,281 | 18,462 | 16,400 | 12,709 | 3,489 | 2,704 |
4049
+ | \`switch\` | 40,457 | 13,843 | 12,355 | 1,961 | 706 | 406 |
4050
+ | \`table\` | 98,333 | 30,641 | 26,986 | 35,739 | 9,663 | 7,633 |
4051
+ | \`tabs\` | 49,168 | 16,697 | 14,829 | 10,196 | 2,659 | 2,016 |
4052
+ | \`tag\` | 43,396 | 15,823 | 14,113 | 8,617 | 2,395 | 1,859 |
4053
+ | \`textarea\` | 45,364 | 15,415 | 13,778 | 5,556 | 1,604 | 1,202 |
4054
+ | \`time-input\` | 169,771 | 51,487 | 44,639 | 52,437 | 13,114 | 10,321 |
4055
+ | \`time-picker\` | 97,223 | 30,316 | 26,669 | 33,382 | 8,770 | 6,807 |
4056
+ | \`timeline\` | 28,548 | 10,772 | 9,592 | 3,675 | 936 | 691 |
4057
+ | \`toast\` | 48,567 | 17,393 | 15,443 | 9,399 | 2,772 | 2,123 |
4058
+ | \`toggle\` | 44,477 | 14,658 | 12,995 | 6,256 | 1,721 | 1,300 |
4059
+ | \`toolbar\` | 32,696 | 12,205 | 10,872 | 5,485 | 1,671 | 1,336 |
4060
+ | \`tooltip\` | 58,421 | 21,042 | 18,671 | 8,512 | 2,345 | 1,807 |
4061
+ | \`tour\` | 83,346 | 28,538 | 25,243 | 18,989 | 5,147 | 4,095 |
4062
+ | \`tree\` | 68,464 | 22,776 | 20,225 | 17,724 | 5,067 | 3,953 |
4063
+ | \`trend\` | 30,375 | 11,863 | 10,555 | 3,818 | 1,145 | 945 |
4064
+ | \`video\` | 127,266 | 39,999 | 35,031 | 54,765 | 13,555 | 10,966 |
4065
+ | \`video-playlist\` | 98,428 | 32,585 | 28,814 | 28,474 | 7,048 | 5,586 |
4066
+ | \`virtual-list\` | 51,103 | 17,825 | 15,928 | 12,645 | 3,889 | 3,067 |
4067
4067
 
4068
4068
  ### Styled tier
4069
4069
 
@@ -4071,110 +4071,110 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
4071
4071
 
4072
4072
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
4073
4073
  |---|---|---|---|---|---|---|
4074
- | \`accordion\` | 36,857 | 12,853 | 11,432 | 10,114 | 2,581 | 2,040 |
4075
- | \`announcement\` | 43,555 | 15,040 | 13,445 | 9,929 | 2,557 | 2,082 |
4076
- | \`app-header\` | 36,560 | 12,921 | 11,539 | 10,729 | 2,728 | 2,281 |
4077
- | \`area-chart\` | 98,956 | 33,402 | 29,494 | 23,084 | 6,358 | 5,218 |
4078
- | \`aura\` | 51,474 | 17,767 | 15,695 | 28,066 | 8,780 | 7,548 |
4079
- | \`avatar\` | 35,062 | 12,677 | 11,330 | 8,216 | 2,031 | 1,808 |
4080
- | \`badge\` | 32,752 | 11,796 | 10,481 | 9,034 | 2,172 | 1,809 |
4081
- | \`bar-chart\` | 107,347 | 35,189 | 31,105 | 31,330 | 8,077 | 6,615 |
4082
- | \`blockquote\` | 26,860 | 10,107 | 8,936 | 5,285 | 1,464 | 1,200 |
4083
- | \`breadcrumbs\` | 43,908 | 15,129 | 13,510 | 15,581 | 3,733 | 3,098 |
4084
- | \`button\` | 44,830 | 14,942 | 13,352 | 12,212 | 2,973 | 2,281 |
4085
- | \`button-group\` | 30,331 | 10,837 | 9,628 | 7,904 | 1,918 | 1,506 |
4086
- | \`callout\` | 38,026 | 14,059 | 12,522 | 5,773 | 1,518 | 1,149 |
4087
- | \`canvas\` | 118,544 | 35,017 | 30,691 | 78,363 | 21,338 | 17,624 |
4088
- | \`card\` | 28,213 | 10,189 | 9,050 | 6,662 | 1,692 | 1,372 |
4089
- | \`carousel\` | 54,175 | 17,280 | 15,467 | 26,184 | 6,100 | 4,961 |
4090
- | \`chat\` | 85,875 | 26,405 | 23,421 | 37,128 | 9,262 | 7,452 |
4091
- | \`checkbox\` | 48,432 | 15,532 | 13,890 | 10,201 | 2,514 | 1,985 |
4092
- | \`checkbox-group\` | 56,127 | 17,391 | 15,485 | 16,779 | 4,089 | 3,146 |
4093
- | \`code\` | 21,671 | 8,471 | 7,490 | 1,639 | 527 | 436 |
4094
- | \`code-block\` | 115,146 | 35,038 | 31,101 | 48,823 | 10,866 | 8,799 |
4095
- | \`color-input\` | 182,662 | 50,146 | 43,832 | 95,902 | 19,637 | 16,321 |
4096
- | \`color-picker\` | 138,192 | 37,367 | 32,725 | 81,912 | 17,310 | 14,296 |
4097
- | \`combobox\` | 159,456 | 46,884 | 41,102 | 60,872 | 13,769 | 11,027 |
4098
- | \`command\` | 109,363 | 32,612 | 28,644 | 42,141 | 10,228 | 8,217 |
4099
- | \`copy-button\` | 95,770 | 30,369 | 26,928 | 31,336 | 7,080 | 5,695 |
4100
- | \`data-table\` | 271,823 | 75,387 | 62,194 | 162,785 | 38,795 | 29,360 |
4101
- | \`date-input\` | 161,098 | 46,677 | 40,985 | 60,680 | 13,461 | 11,001 |
4102
- | \`date-picker\` | 64,983 | 20,675 | 18,525 | 25,951 | 6,250 | 4,994 |
4103
- | \`description-list\` | 27,039 | 9,669 | 8,581 | 5,841 | 1,361 | 1,127 |
4104
- | \`dialog\` | 45,798 | 15,662 | 13,936 | 11,623 | 3,106 | 2,538 |
4105
- | \`divider\` | 25,821 | 9,692 | 8,547 | 4,374 | 1,199 | 956 |
4106
- | \`donut-chart\` | 97,699 | 32,669 | 28,863 | 24,746 | 6,558 | 5,346 |
4107
- | \`drawer\` | 50,788 | 17,193 | 15,349 | 13,833 | 3,691 | 2,990 |
4108
- | \`drilldown\` | 48,367 | 16,190 | 14,426 | 14,232 | 3,447 | 2,772 |
4109
- | \`empty\` | 26,021 | 9,826 | 8,678 | 3,909 | 1,176 | 936 |
4110
- | \`file-input\` | 80,966 | 25,343 | 22,504 | 32,333 | 8,245 | 6,698 |
4111
- | \`filter-input\` | 162,612 | 45,682 | 39,992 | 75,432 | 15,848 | 12,916 |
4112
- | \`flex\` | 25,978 | 9,321 | 8,257 | 5,151 | 1,112 | 868 |
4113
- | \`format-date\` | 29,681 | 11,095 | 9,901 | 4,877 | 1,331 | 1,085 |
4114
- | \`graph\` | 82,257 | 24,907 | 22,118 | 31,767 | 7,870 | 6,330 |
4115
- | \`grid\` | 27,233 | 9,977 | 8,825 | 6,019 | 1,476 | 1,221 |
4116
- | \`heatmap\` | 102,310 | 34,079 | 30,100 | 24,708 | 6,536 | 5,307 |
4117
- | \`icon\` | 84,859 | 28,842 | 24,762 | 61,198 | 20,773 | 16,546 |
4118
- | \`icon-button\` | 46,612 | 14,930 | 13,333 | 13,995 | 2,965 | 2,385 |
4119
- | \`image\` | 27,417 | 10,071 | 8,934 | 5,868 | 1,672 | 1,363 |
4120
- | \`input\` | 52,486 | 17,526 | 15,467 | 12,104 | 3,552 | 2,685 |
4121
- | \`kbd\` | 29,864 | 11,148 | 9,873 | 6,135 | 1,683 | 1,371 |
4122
- | \`legend\` | 40,308 | 14,177 | 12,546 | 8,568 | 2,262 | 1,728 |
4123
- | \`lightbox\` | 60,817 | 19,445 | 17,286 | 22,419 | 5,623 | 4,415 |
4124
- | \`line-chart\` | 102,895 | 34,063 | 30,183 | 26,693 | 6,903 | 5,649 |
4125
- | \`list\` | 64,808 | 21,831 | 19,521 | 19,054 | 5,103 | 4,154 |
4126
- | \`listbox\` | 82,857 | 26,425 | 23,348 | 22,818 | 6,102 | 4,779 |
4127
- | \`loader\` | 30,830 | 11,357 | 10,102 | 5,871 | 1,600 | 1,322 |
4128
- | \`map\` | 118,905 | 30,371 | 26,471 | 76,736 | 16,091 | 12,871 |
4129
- | \`megamenu\` | 64,520 | 22,644 | 20,058 | 13,336 | 3,435 | 2,737 |
4130
- | \`menu\` | 95,623 | 31,029 | 27,419 | 29,883 | 6,957 | 5,557 |
4131
- | \`meter\` | 38,671 | 13,584 | 12,157 | 11,499 | 2,787 | 2,375 |
4132
- | \`navigation\` | 36,492 | 13,493 | 11,986 | 5,704 | 1,707 | 1,424 |
4133
- | \`notifications\` | 69,651 | 20,791 | 18,548 | 32,421 | 7,287 | 6,070 |
4134
- | \`number-input\` | 58,782 | 19,328 | 17,255 | 15,873 | 4,100 | 3,133 |
4135
- | \`object-inspector\` | 130,663 | 40,664 | 35,713 | 52,304 | 12,801 | 10,191 |
4136
- | \`option\` | 30,364 | 10,629 | 9,430 | 8,550 | 1,937 | 1,582 |
4137
- | \`orb\` | 36,192 | 13,879 | 12,409 | 9,445 | 3,550 | 3,020 |
4138
- | \`outline\` | 38,164 | 13,524 | 12,064 | 11,299 | 3,025 | 2,343 |
4139
- | \`pagination\` | 154,121 | 45,579 | 39,674 | 65,469 | 14,963 | 11,989 |
4140
- | \`pin-input\` | 51,419 | 17,458 | 15,658 | 10,717 | 3,207 | 2,574 |
4141
- | \`popover\` | 66,578 | 23,542 | 20,889 | 9,334 | 2,486 | 1,972 |
4142
- | \`progress\` | 36,267 | 12,634 | 11,273 | 10,810 | 2,634 | 2,252 |
4143
- | \`qr-code\` | 45,317 | 17,412 | 15,532 | 19,255 | 6,962 | 5,794 |
4144
- | \`quote\` | 23,589 | 9,213 | 8,124 | 2,411 | 823 | 650 |
4145
- | \`radio\` | 52,044 | 16,153 | 14,417 | 12,870 | 2,827 | 2,226 |
4146
- | \`rating\` | 54,853 | 18,568 | 16,577 | 12,259 | 3,641 | 2,776 |
4147
- | \`sandbox\` | 79,202 | 22,870 | 20,314 | 46,816 | 10,971 | 9,060 |
4148
- | \`scatter-chart\` | 100,359 | 33,490 | 29,500 | 25,580 | 6,967 | 5,639 |
4149
- | \`scroll-area\` | 35,927 | 12,124 | 10,775 | 14,171 | 3,614 | 2,943 |
4150
- | \`select\` | 132,090 | 40,692 | 35,645 | 44,051 | 10,360 | 8,259 |
4151
- | \`skeleton\` | 26,249 | 9,673 | 8,622 | 5,046 | 1,371 | 1,082 |
4152
- | \`skip-link\` | 27,440 | 10,499 | 9,298 | 3,439 | 1,063 | 816 |
4153
- | \`slider\` | 66,083 | 19,461 | 17,420 | 26,091 | 5,394 | 4,510 |
4154
- | \`sparkline\` | 53,434 | 18,855 | 16,820 | 11,709 | 3,428 | 2,839 |
4155
- | \`speed-dial\` | 78,181 | 26,527 | 23,577 | 19,115 | 4,333 | 3,455 |
4156
- | \`splitter\` | 48,468 | 15,508 | 13,849 | 20,501 | 4,844 | 3,872 |
4157
- | \`stat\` | 29,023 | 10,425 | 9,301 | 6,493 | 1,556 | 1,264 |
4158
- | \`steps\` | 68,554 | 21,280 | 18,917 | 27,966 | 6,371 | 5,241 |
4159
- | \`switch\` | 45,145 | 14,988 | 13,352 | 6,633 | 1,787 | 1,378 |
4160
- | \`table\` | 114,637 | 33,371 | 29,404 | 52,040 | 12,408 | 10,012 |
4161
- | \`tabs\` | 58,882 | 18,542 | 16,493 | 19,895 | 4,571 | 3,658 |
4162
- | \`tag\` | 48,664 | 16,977 | 15,128 | 13,867 | 3,573 | 2,783 |
4163
- | \`text\` | 28,979 | 10,064 | 8,883 | 7,767 | 1,544 | 1,256 |
4164
- | \`textarea\` | 49,617 | 16,410 | 14,658 | 9,791 | 2,636 | 2,105 |
4165
- | \`time-input\` | 193,210 | 55,099 | 47,929 | 75,860 | 16,828 | 13,646 |
4166
- | \`time-picker\` | 108,036 | 32,124 | 28,324 | 44,390 | 10,615 | 8,636 |
4167
- | \`timeline\` | 32,549 | 10,923 | 9,689 | 10,336 | 2,109 | 1,849 |
4168
- | \`toast\` | 57,099 | 19,256 | 17,140 | 17,917 | 4,747 | 3,810 |
4169
- | \`toggle\` | 50,029 | 15,923 | 14,181 | 11,796 | 3,071 | 2,550 |
4170
- | \`toolbar\` | 35,714 | 12,714 | 11,337 | 8,486 | 2,168 | 1,748 |
4171
- | \`tooltip\` | 61,569 | 21,793 | 19,364 | 11,642 | 3,138 | 2,534 |
4172
- | \`tour\` | 94,721 | 30,635 | 27,113 | 30,345 | 7,309 | 5,845 |
4173
- | \`tree\` | 77,877 | 24,737 | 22,041 | 27,121 | 7,085 | 5,731 |
4174
- | \`trend\` | 32,227 | 12,323 | 10,977 | 5,651 | 1,607 | 1,311 |
4175
- | \`video\` | 146,575 | 43,365 | 37,973 | 74,059 | 16,926 | 13,879 |
4176
- | \`video-playlist\` | 111,169 | 34,047 | 30,044 | 43,555 | 9,595 | 7,792 |
4177
- | \`virtual-list\` | 52,828 | 18,225 | 16,248 | 14,352 | 4,284 | 3,417 |
4074
+ | \`accordion\` | 36,857 | 12,853 | 11,432 | 10,114 | 2,582 | 2,034 |
4075
+ | \`announcement\` | 43,555 | 15,040 | 13,444 | 9,929 | 2,557 | 2,089 |
4076
+ | \`app-header\` | 36,560 | 12,921 | 11,538 | 10,729 | 2,728 | 2,256 |
4077
+ | \`area-chart\` | 98,956 | 33,403 | 29,598 | 23,084 | 6,359 | 5,252 |
4078
+ | \`aura\` | 51,474 | 17,766 | 15,741 | 28,066 | 8,781 | 7,494 |
4079
+ | \`avatar\` | 35,062 | 12,677 | 11,328 | 8,216 | 2,032 | 1,715 |
4080
+ | \`badge\` | 32,752 | 11,796 | 10,500 | 9,034 | 2,172 | 1,872 |
4081
+ | \`bar-chart\` | 107,347 | 35,190 | 31,118 | 31,330 | 8,078 | 6,753 |
4082
+ | \`blockquote\` | 26,860 | 10,107 | 8,939 | 5,285 | 1,464 | 1,215 |
4083
+ | \`breadcrumbs\` | 43,908 | 15,129 | 13,510 | 15,581 | 3,733 | 3,141 |
4084
+ | \`button\` | 44,830 | 14,942 | 13,350 | 12,212 | 2,973 | 2,333 |
4085
+ | \`button-group\` | 30,331 | 10,838 | 9,629 | 7,904 | 1,919 | 1,618 |
4086
+ | \`callout\` | 38,026 | 14,059 | 12,523 | 5,773 | 1,518 | 1,240 |
4087
+ | \`canvas\` | 119,127 | 35,188 | 30,706 | 78,932 | 21,505 | 17,712 |
4088
+ | \`card\` | 28,213 | 10,189 | 9,050 | 6,662 | 1,692 | 1,422 |
4089
+ | \`carousel\` | 54,175 | 17,280 | 15,481 | 26,184 | 6,101 | 4,937 |
4090
+ | \`chat\` | 86,151 | 26,480 | 23,425 | 37,403 | 9,337 | 7,606 |
4091
+ | \`checkbox\` | 48,432 | 15,532 | 13,865 | 10,201 | 2,515 | 2,037 |
4092
+ | \`checkbox-group\` | 56,127 | 17,391 | 15,487 | 16,779 | 4,090 | 3,208 |
4093
+ | \`code\` | 21,671 | 8,471 | 7,490 | 1,639 | 527 | 431 |
4094
+ | \`code-block\` | 115,146 | 35,038 | 31,092 | 48,823 | 10,867 | 8,802 |
4095
+ | \`color-input\` | 182,662 | 50,147 | 43,774 | 95,902 | 19,637 | 16,317 |
4096
+ | \`color-picker\` | 138,192 | 37,367 | 32,800 | 81,912 | 17,310 | 14,192 |
4097
+ | \`combobox\` | 160,958 | 47,305 | 41,463 | 62,374 | 14,194 | 11,474 |
4098
+ | \`command\` | 113,433 | 33,602 | 29,527 | 46,217 | 11,188 | 8,996 |
4099
+ | \`copy-button\` | 95,770 | 30,369 | 26,885 | 31,336 | 7,080 | 5,688 |
4100
+ | \`data-table\` | 274,422 | 76,006 | 62,625 | 165,391 | 39,397 | 29,739 |
4101
+ | \`date-input\` | 161,337 | 46,731 | 41,004 | 60,919 | 13,514 | 10,940 |
4102
+ | \`date-picker\` | 64,983 | 20,675 | 18,525 | 25,951 | 6,251 | 5,012 |
4103
+ | \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,361 | 1,072 |
4104
+ | \`dialog\` | 45,798 | 15,662 | 13,933 | 11,623 | 3,106 | 2,598 |
4105
+ | \`divider\` | 25,821 | 9,692 | 8,547 | 4,374 | 1,199 | 993 |
4106
+ | \`donut-chart\` | 97,699 | 32,670 | 28,889 | 24,746 | 6,558 | 5,406 |
4107
+ | \`drawer\` | 50,788 | 17,193 | 15,321 | 13,833 | 3,692 | 2,982 |
4108
+ | \`drilldown\` | 48,367 | 16,190 | 14,425 | 14,232 | 3,447 | 2,723 |
4109
+ | \`empty\` | 26,021 | 9,826 | 8,678 | 3,909 | 1,176 | 854 |
4110
+ | \`file-input\` | 80,966 | 25,343 | 22,456 | 32,333 | 8,246 | 6,872 |
4111
+ | \`filter-input\` | 163,771 | 45,997 | 40,173 | 76,595 | 16,162 | 13,069 |
4112
+ | \`flex\` | 25,978 | 9,320 | 8,258 | 5,151 | 1,112 | 871 |
4113
+ | \`format-date\` | 29,681 | 11,095 | 9,900 | 4,877 | 1,332 | 1,056 |
4114
+ | \`graph\` | 82,966 | 25,102 | 22,235 | 32,476 | 8,040 | 6,513 |
4115
+ | \`grid\` | 27,233 | 9,977 | 8,825 | 6,019 | 1,476 | 1,274 |
4116
+ | \`heatmap\` | 102,310 | 34,079 | 30,107 | 24,708 | 6,536 | 5,340 |
4117
+ | \`icon\` | 84,859 | 28,840 | 24,735 | 61,198 | 20,773 | 16,689 |
4118
+ | \`icon-button\` | 46,612 | 14,930 | 13,319 | 13,995 | 2,966 | 2,372 |
4119
+ | \`image\` | 27,417 | 10,070 | 8,941 | 5,868 | 1,673 | 1,285 |
4120
+ | \`input\` | 52,486 | 17,526 | 15,470 | 12,104 | 3,553 | 2,627 |
4121
+ | \`kbd\` | 29,864 | 11,148 | 9,869 | 6,135 | 1,683 | 1,400 |
4122
+ | \`legend\` | 40,308 | 14,177 | 12,544 | 8,568 | 2,262 | 1,802 |
4123
+ | \`lightbox\` | 60,817 | 19,445 | 17,284 | 22,419 | 5,624 | 4,469 |
4124
+ | \`line-chart\` | 102,895 | 34,063 | 30,223 | 26,693 | 6,904 | 5,726 |
4125
+ | \`list\` | 67,701 | 22,552 | 20,154 | 21,793 | 5,791 | 4,695 |
4126
+ | \`listbox\` | 84,017 | 26,715 | 23,561 | 23,977 | 6,436 | 5,009 |
4127
+ | \`loader\` | 30,830 | 11,357 | 10,102 | 5,871 | 1,600 | 1,292 |
4128
+ | \`map\` | 119,234 | 30,517 | 26,585 | 77,051 | 16,195 | 13,014 |
4129
+ | \`megamenu\` | 64,520 | 22,644 | 20,051 | 13,336 | 3,435 | 2,715 |
4130
+ | \`menu\` | 95,623 | 31,029 | 27,537 | 29,883 | 6,957 | 5,590 |
4131
+ | \`meter\` | 38,671 | 13,584 | 12,157 | 11,499 | 2,787 | 2,459 |
4132
+ | \`navigation\` | 36,492 | 13,493 | 11,986 | 5,704 | 1,707 | 1,481 |
4133
+ | \`notifications\` | 69,651 | 20,791 | 18,512 | 32,421 | 7,288 | 5,968 |
4134
+ | \`number-input\` | 60,606 | 19,686 | 17,579 | 17,697 | 4,485 | 3,498 |
4135
+ | \`object-inspector\` | 131,000 | 40,779 | 35,823 | 52,641 | 12,903 | 10,405 |
4136
+ | \`option\` | 31,522 | 10,947 | 9,717 | 9,711 | 2,284 | 1,906 |
4137
+ | \`orb\` | 36,192 | 13,879 | 12,411 | 9,445 | 3,550 | 3,012 |
4138
+ | \`outline\` | 38,336 | 13,557 | 12,074 | 11,471 | 3,056 | 2,430 |
4139
+ | \`pagination\` | 155,279 | 45,864 | 39,924 | 66,627 | 15,238 | 12,267 |
4140
+ | \`pin-input\` | 51,419 | 17,458 | 15,599 | 10,717 | 3,207 | 2,585 |
4141
+ | \`popover\` | 66,578 | 23,542 | 20,916 | 9,334 | 2,487 | 1,968 |
4142
+ | \`progress\` | 36,267 | 12,635 | 11,273 | 10,810 | 2,634 | 2,357 |
4143
+ | \`qr-code\` | 45,317 | 17,412 | 15,531 | 19,255 | 6,962 | 5,809 |
4144
+ | \`quote\` | 23,589 | 9,213 | 8,124 | 2,411 | 823 | 658 |
4145
+ | \`radio\` | 52,044 | 16,153 | 14,418 | 12,870 | 2,827 | 2,264 |
4146
+ | \`rating\` | 54,853 | 18,568 | 16,526 | 12,259 | 3,642 | 2,874 |
4147
+ | \`sandbox\` | 84,084 | 24,718 | 21,754 | 51,659 | 12,602 | 10,509 |
4148
+ | \`scatter-chart\` | 100,359 | 33,490 | 29,578 | 25,580 | 6,967 | 5,602 |
4149
+ | \`scroll-area\` | 35,927 | 12,124 | 10,775 | 14,171 | 3,614 | 3,020 |
4150
+ | \`select\` | 133,248 | 40,963 | 35,941 | 45,209 | 10,684 | 8,423 |
4151
+ | \`skeleton\` | 26,249 | 9,673 | 8,622 | 5,046 | 1,372 | 1,047 |
4152
+ | \`skip-link\` | 27,440 | 10,499 | 9,298 | 3,439 | 1,064 | 894 |
4153
+ | \`slider\` | 66,083 | 19,461 | 17,394 | 26,091 | 5,395 | 4,454 |
4154
+ | \`sparkline\` | 53,434 | 18,855 | 16,820 | 11,709 | 3,429 | 2,947 |
4155
+ | \`speed-dial\` | 78,181 | 26,527 | 23,586 | 19,115 | 4,334 | 3,512 |
4156
+ | \`splitter\` | 48,468 | 15,508 | 13,849 | 20,501 | 4,845 | 4,060 |
4157
+ | \`stat\` | 29,023 | 10,425 | 9,301 | 6,493 | 1,556 | 1,224 |
4158
+ | \`steps\` | 68,554 | 21,280 | 18,917 | 27,966 | 6,371 | 5,160 |
4159
+ | \`switch\` | 45,145 | 14,988 | 13,352 | 6,633 | 1,787 | 1,404 |
4160
+ | \`table\` | 115,321 | 33,512 | 29,556 | 52,724 | 12,553 | 10,145 |
4161
+ | \`tabs\` | 58,882 | 18,542 | 16,481 | 19,895 | 4,571 | 3,668 |
4162
+ | \`tag\` | 48,664 | 16,977 | 15,128 | 13,867 | 3,574 | 2,962 |
4163
+ | \`text\` | 28,979 | 10,064 | 8,883 | 7,767 | 1,545 | 1,213 |
4164
+ | \`textarea\` | 49,617 | 16,410 | 14,657 | 9,791 | 2,637 | 2,134 |
4165
+ | \`time-input\` | 196,532 | 55,850 | 48,459 | 79,182 | 17,551 | 14,187 |
4166
+ | \`time-picker\` | 111,265 | 32,865 | 28,907 | 47,416 | 11,345 | 9,051 |
4167
+ | \`timeline\` | 35,889 | 12,186 | 10,862 | 11,006 | 2,319 | 1,992 |
4168
+ | \`toast\` | 57,099 | 19,256 | 17,108 | 17,917 | 4,747 | 3,808 |
4169
+ | \`toggle\` | 50,029 | 15,925 | 14,145 | 11,796 | 3,072 | 2,480 |
4170
+ | \`toolbar\` | 35,714 | 12,714 | 11,337 | 8,486 | 2,168 | 1,768 |
4171
+ | \`tooltip\` | 61,569 | 21,793 | 19,357 | 11,642 | 3,139 | 2,498 |
4172
+ | \`tour\` | 94,721 | 30,635 | 27,093 | 30,345 | 7,310 | 5,920 |
4173
+ | \`tree\` | 77,877 | 24,737 | 22,003 | 27,121 | 7,085 | 5,767 |
4174
+ | \`trend\` | 32,227 | 12,323 | 10,976 | 5,651 | 1,608 | 1,306 |
4175
+ | \`video\` | 148,402 | 43,803 | 38,346 | 75,884 | 17,381 | 14,284 |
4176
+ | \`video-playlist\` | 114,937 | 35,433 | 31,374 | 44,968 | 9,961 | 8,170 |
4177
+ | \`virtual-list\` | 53,068 | 18,304 | 16,310 | 14,592 | 4,371 | 3,435 |
4178
4178
 
4179
4179
  ## What an install adds to \`node_modules\`
4180
4180
 
@@ -4186,12 +4186,12 @@ stripped column shows the bytes we removed.
4186
4186
 
4187
4187
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
4188
4188
  |---|---|---|---|---|
4189
- | \`@fusion.dev/helix-core\` | 2,315,450 | 525 | 656,164 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
4190
- | \`@fusion.dev/helix-headless\` | 19,746,804 | 676 | 1,898,412 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
4189
+ | \`@fusion.dev/helix-core\` | 2,317,555 | 525 | 656,164 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
4190
+ | \`@fusion.dev/helix-headless\` | 20,166,480 | 676 | 1,928,342 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
4191
4191
  | \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
4192
4192
  | \`@fusion.dev/helix-styles\` | 110,707 | 6 | 0 | none |
4193
4193
  | \`@fusion.dev/helix-theme\` | 528,598 | 8 | 5,393 | none |
4194
- | \`@fusion.dev/helix\` | 19,897,276 | 922 | 406,237 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
4194
+ | \`@fusion.dev/helix\` | 20,249,887 | 922 | 408,772 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
4195
4195
 
4196
4196
  ## Not measured yet
4197
4197
 
@@ -5387,9 +5387,14 @@ the value to the preview slotted into it. The source pane and the preview do not
5387
5387
  reference each other, so you can replace either one or use it alone.
5388
5388
 
5389
5389
  The event includes the pane's \`name\`, so one sandbox can hold several panes
5390
- without tracking which element sent each event. A pane named \`html\` sets the
5391
- preview's markup, and a pane named \`css\` sets its stylesheet. The sandbox
5392
- ignores a pane with any other name, so that pane only displays its contents.
5390
+ without tracking which element sent each event. The names the sandbox reads:
5391
+
5392
+ - A pane named \`html\` sets the preview's markup.
5393
+ - A pane named \`css\` sets its stylesheet.
5394
+ - A pane named \`js\` sets a script, which runs as a module after the markup.
5395
+
5396
+ The sandbox ignores a pane with any other name, so that pane only displays its
5397
+ contents.
5393
5398
 
5394
5399
  A pane's text goes in its \`value\`. The pane renders no children. The sandbox
5395
5400
  also hands each pane's \`value\` to the preview when it starts, so you write the
@@ -5435,7 +5440,16 @@ hides the quieter lines.
5435
5440
 
5436
5441
  \`helix-sandbox-preview\` loads \`src\` into a sandboxed frame. You provide that
5437
5442
  document. It loads the styles and the elements your examples use, and it talks
5438
- to the preview through \`postMessage\`:
5443
+ to the preview through \`postMessage\`.
5444
+
5445
+ Without \`src\`, the preview loads a built-in document. It runs the example's
5446
+ HTML, CSS, and scripts, and reports the console, uncaught errors, the height,
5447
+ and presses, so a sandbox renders with nothing to host. It defines no element,
5448
+ so set \`src\` to a document of your own when your examples use Helix
5449
+ components. Its script is inline, so a page whose Content Security Policy
5450
+ refuses inline scripts needs a \`src\` too.
5451
+
5452
+ The messages:
5439
5453
 
5440
5454
  | Message | Sent by | What it carries |
5441
5455
  |---|---|---|
@@ -5456,8 +5470,8 @@ it was given. The types are exported from \`@fusion.dev/helix/sandbox\` as
5456
5470
  \`servePreview\` from \`@fusion.dev/helix/sandbox\` is that protocol, written for
5457
5471
  you. Call it once in the frame document, after your elements are defined. It
5458
5472
  writes each render into \`#preview-root\`, runs the example's scripts, relays
5459
- its console, reports its height and its presses, and adds the rules for the
5460
- four layouts. A frame follows. \`/helix.css\` is the stylesheet from
5473
+ its console, its uncaught errors, and its unhandled promise rejections,
5474
+ reports its height and its presses, and adds the rules for the four layouts. A frame follows. \`/helix.css\` is the stylesheet from
5461
5475
  \`@fusion.dev/helix-styles\`, and \`/frame.js\` is a classic script you bundle,
5462
5476
  for the reason under "How the preview is isolated":
5463
5477
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fusion.dev/helix-docs",
3
3
  "description": "Versioned documentation content and registry for Helix.",
4
- "version": "0.155.0",
4
+ "version": "0.156.0",
5
5
  "license": "MIT",
6
6
  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
7
7
  "repository": {
@@ -36,14 +36,14 @@
36
36
  },
37
37
  "bugs": "https://github.com/project-fusion/fusion/issues",
38
38
  "devDependencies": {
39
- "@fusion.dev/helix": "0.155.0",
40
- "@fusion.dev/helix-cem": "0.155.0",
41
- "@fusion.dev/helix-headless": "0.155.0",
42
- "@fusion.dev/helix-icons": "0.155.0",
43
- "@fusion.dev/helix-map": "0.155.0",
44
- "@fusion.dev/helix-styles": "0.155.0",
45
- "@fusion.dev/helix-testing": "0.155.0",
46
- "@fusion.dev/helix-theme": "0.155.0",
39
+ "@fusion.dev/helix": "0.156.0",
40
+ "@fusion.dev/helix-cem": "0.156.0",
41
+ "@fusion.dev/helix-headless": "0.156.0",
42
+ "@fusion.dev/helix-icons": "0.156.0",
43
+ "@fusion.dev/helix-map": "0.156.0",
44
+ "@fusion.dev/helix-styles": "0.156.0",
45
+ "@fusion.dev/helix-testing": "0.156.0",
46
+ "@fusion.dev/helix-theme": "0.156.0",
47
47
  "@fusion.dev/scripts": "0.0.0-dev",
48
48
  "lit": "^3.2.1",
49
49
  "playwright": "^1.63.0"