@fusion.dev/helix-docs 0.26.0 → 0.30.1
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.
- package/content/metrics.mdx +215 -215
- package/dist/sources.generated.js +215 -215
- package/package.json +6 -3
package/content/metrics.mdx
CHANGED
|
@@ -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` |
|
|
50
|
+
| Lit and `@fusion.dev/helix-core` | 144,264 | 47,733 | 40,268 |
|
|
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` |
|
|
62
|
-
| `@fusion.dev/helix-headless` |
|
|
61
|
+
| `@fusion.dev/helix-core` | 143,818 | 47,358 | 40,062 | Element base class, mixins, decorators, floating positioning. |
|
|
62
|
+
| `@fusion.dev/helix-headless` | 587,310 | 151,502 | 118,033 | Every headless family, which is what the barrel means. |
|
|
63
63
|
| `@fusion.dev/helix-icons` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
|
|
64
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` | 1,
|
|
65
|
+
| `@fusion.dev/helix` | 1,051,851 | 245,276 | 179,736 | 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,7 +75,7 @@ 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` | 30,
|
|
78
|
+
| `base.css` | 30,724 | 4,427 | 3,843 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
|
|
79
79
|
| `elements.css` | 7,848 | 1,341 | 1,202 | Hides each element until its definition loads, generated from the tags in `@fusion.dev/helix`. |
|
|
80
80
|
| `helix.css` | 207 | 148 | 118 | The four above in one import, in the order they have to be in. |
|
|
81
81
|
| `primitives.css` | 6,390 | 1,260 | 1,084 | The primitive layer. Private, shipped because `tokens.css` resolves into it. |
|
|
@@ -83,13 +83,13 @@ is the whole cost of adopting the base layer on its own.
|
|
|
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 18,
|
|
86
|
+
**Most of a first component is the runtime under it.** The median styled family is 18,514 bytes gzipped alone and adds 2,213 to a page that already has Helix on it, so 88 percent of the first one is shared and 12 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
|
|
87
87
|
|
|
88
|
-
Across the tier: the cheapest is `code` at 9,
|
|
88
|
+
Across the tier: the cheapest is `code` at 9,374 gzipped alone, the dearest `data-table` at 56,913, over 100 components. Every family at once is 245,276.
|
|
89
89
|
|
|
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 151,
|
|
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 151,502 bytes gzipped whatever else the page does, which is 8 times the median family measured above. The styled tier imports the family it extends instead, all 100 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
|
|
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 20,097 bytes gzipped alone.
|
|
93
93
|
|
|
94
94
|
## Against other systems
|
|
95
95
|
|
|
@@ -101,43 +101,43 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by `t
|
|
|
101
101
|
|
|
102
102
|
| Component | System | Raw | Gzip | Brotli |
|
|
103
103
|
|---|---|---|---|---|
|
|
104
|
-
| `button` | **Helix** | 38,
|
|
104
|
+
| `button` | **Helix** | 38,885 | 11,901 | 10,473 |
|
|
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** |
|
|
109
|
+
| `checkbox` | **Helix** | 42,088 | 12,884 | 11,358 |
|
|
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** | 36,
|
|
114
|
+
| `dialog` | **Helix** | 36,168 | 11,545 | 10,164 |
|
|
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** | 44,
|
|
119
|
+
| `radio` | **Helix** | 44,926 | 13,173 | 11,636 |
|
|
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** | 39,
|
|
124
|
+
| `switch` | **Helix** | 39,896 | 12,465 | 10,991 |
|
|
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** | 41,
|
|
129
|
+
| `tabs` | **Helix** | 41,251 | 12,597 | 11,107 |
|
|
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,
|
|
134
|
+
| `tooltip` | **Helix** | 61,965 | 20,991 | 18,605 |
|
|
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,
|
|
140
|
+
**Where Helix loses**, which is the half of a comparison table worth reading: `dialog`, `radio`, `switch`, `tooltip`. The largest gap is radio against Spectrum, by 2,513 bytes gzipped. 5 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.
|
|
@@ -182,100 +182,100 @@ 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` |
|
|
186
|
-
| `announcement` | 76,
|
|
187
|
-
| `app-header` | 28,
|
|
188
|
-
| `area-chart` |
|
|
189
|
-
| `avatar` | 30,
|
|
190
|
-
| `badge` | 28,
|
|
191
|
-
| `bar-chart` | 73,
|
|
192
|
-
| `blockquote` | 28,
|
|
193
|
-
| `breadcrumbs` | 76,
|
|
194
|
-
| `button` | 32,
|
|
195
|
-
| `button-group` | 28,
|
|
196
|
-
| `callout` | 75,
|
|
197
|
-
| `card` | 28,
|
|
198
|
-
| `carousel` | 82,
|
|
199
|
-
| `chat` | 98,
|
|
200
|
-
| `checkbox` |
|
|
201
|
-
| `checkbox-group` |
|
|
202
|
-
| `code` | 26,
|
|
203
|
-
| `code-block` | 118,
|
|
204
|
-
| `color-input` |
|
|
205
|
-
| `color-picker` | 101,
|
|
206
|
-
| `combobox` | 130,
|
|
207
|
-
| `command` | 102,
|
|
208
|
-
| `copy-button` | 113,
|
|
209
|
-
| `data-table` | 166,
|
|
210
|
-
| `date-input` |
|
|
211
|
-
| `date-picker` |
|
|
212
|
-
| `description-list` | 28,
|
|
213
|
-
| `dialog` | 31,
|
|
214
|
-
| `divider` | 28,
|
|
215
|
-
| `donut-chart` | 69,
|
|
216
|
-
| `drawer` | 30,
|
|
217
|
-
| `drilldown` |
|
|
218
|
-
| `empty` | 28,
|
|
219
|
-
| `file-input` | 86,
|
|
220
|
-
| `filter-input` | 140,
|
|
221
|
-
| `format-date` | 31,
|
|
222
|
-
| `heatmap` |
|
|
223
|
-
| `icon` | 74,
|
|
224
|
-
| `icon-button` |
|
|
225
|
-
| `image` | 30,
|
|
226
|
-
| `input` |
|
|
227
|
-
| `kbd` | 30,
|
|
228
|
-
| `legend` |
|
|
229
|
-
| `line-chart` | 71,
|
|
230
|
-
| `list` | 29,
|
|
231
|
-
| `listbox` | 94,
|
|
232
|
-
| `loader` | 28,
|
|
233
|
-
| `megamenu` | 57,
|
|
234
|
-
| `menu` | 112,
|
|
235
|
-
| `meter` | 31,
|
|
236
|
-
| `navigation` | 30,
|
|
237
|
-
| `notifications` | 90,
|
|
238
|
-
| `number-input` | 88,
|
|
239
|
-
| `object-inspector` |
|
|
240
|
-
| `option` | 30,
|
|
241
|
-
| `outline` | 33,
|
|
242
|
-
| `pagination` |
|
|
243
|
-
| `pin-input` | 38,
|
|
244
|
-
| `popover` | 54,
|
|
245
|
-
| `progress` | 29,
|
|
246
|
-
| `qr-code` |
|
|
247
|
-
| `quote` | 27,
|
|
248
|
-
| `radio` | 37,
|
|
249
|
-
| `rating` | 39,
|
|
250
|
-
| `scatter-chart` |
|
|
251
|
-
| `scroll-area` | 29,
|
|
252
|
-
| `select` | 123,
|
|
253
|
-
| `skeleton` | 26,
|
|
254
|
-
| `skip-link` | 28,
|
|
255
|
-
| `slider` | 39,
|
|
256
|
-
| `sparkline` |
|
|
257
|
-
| `speed-dial` | 104,
|
|
258
|
-
| `splitter` | 37,
|
|
259
|
-
| `stat` | 28,
|
|
260
|
-
| `steps` | 84,
|
|
261
|
-
| `switch` | 35,
|
|
262
|
-
| `table` |
|
|
263
|
-
| `tabs` | 35,
|
|
264
|
-
| `tag` | 75,
|
|
265
|
-
| `textarea` | 38,
|
|
266
|
-
| `time-input` |
|
|
267
|
-
| `time-picker` | 102,
|
|
268
|
-
| `timeline` | 76,
|
|
269
|
-
| `toast` | 79,
|
|
270
|
-
| `toggle` | 39,
|
|
271
|
-
| `toolbar` |
|
|
272
|
-
| `tooltip` | 58,
|
|
273
|
-
| `tour` |
|
|
274
|
-
| `tree` | 85,
|
|
275
|
-
| `trend` |
|
|
276
|
-
| `video` |
|
|
277
|
-
| `video-playlist` |
|
|
278
|
-
| `virtual-list` | 33,
|
|
185
|
+
| `accordion` | 79,420 | 26,539 | 21,736 | 2,875 | 762 | 622 |
|
|
186
|
+
| `announcement` | 76,728 | 25,648 | 21,025 | 1,349 | 390 | 342 |
|
|
187
|
+
| `app-header` | 28,775 | 9,650 | 8,524 | 1,248 | 320 | 207 |
|
|
188
|
+
| `area-chart` | 72,449 | 24,850 | 21,956 | 10,642 | 3,270 | 2,744 |
|
|
189
|
+
| `avatar` | 30,824 | 10,253 | 9,043 | 3,257 | 925 | 678 |
|
|
190
|
+
| `badge` | 28,310 | 9,582 | 8,435 | 1,162 | 305 | 295 |
|
|
191
|
+
| `bar-chart` | 73,908 | 25,141 | 22,226 | 12,184 | 3,597 | 2,981 |
|
|
192
|
+
| `blockquote` | 28,163 | 9,540 | 8,418 | 892 | 236 | 248 |
|
|
193
|
+
| `breadcrumbs` | 76,374 | 25,277 | 20,818 | 1,953 | 440 | 389 |
|
|
194
|
+
| `button` | 32,792 | 10,790 | 9,521 | 3,137 | 834 | 716 |
|
|
195
|
+
| `button-group` | 28,181 | 9,497 | 8,353 | 661 | 150 | 116 |
|
|
196
|
+
| `callout` | 75,504 | 25,142 | 20,744 | 912 | 251 | 148 |
|
|
197
|
+
| `card` | 28,215 | 9,509 | 8,389 | 694 | 160 | 82 |
|
|
198
|
+
| `carousel` | 82,601 | 27,276 | 22,478 | 8,031 | 2,104 | 1,663 |
|
|
199
|
+
| `chat` | 98,134 | 32,635 | 26,782 | 16,935 | 4,933 | 4,039 |
|
|
200
|
+
| `checkbox` | 36,048 | 11,494 | 10,116 | 2,197 | 645 | 421 |
|
|
201
|
+
| `checkbox-group` | 39,062 | 12,141 | 10,714 | 4,692 | 1,241 | 833 |
|
|
202
|
+
| `code` | 26,800 | 9,079 | 7,998 | 451 | 83 | 122 |
|
|
203
|
+
| `code-block` | 118,974 | 39,828 | 33,545 | 16,137 | 4,315 | 3,649 |
|
|
204
|
+
| `color-input` | 133,131 | 43,258 | 36,390 | 25,004 | 6,476 | 5,501 |
|
|
205
|
+
| `color-picker` | 101,657 | 32,831 | 27,037 | 19,378 | 5,215 | 4,467 |
|
|
206
|
+
| `combobox` | 130,978 | 42,347 | 35,530 | 20,160 | 5,002 | 4,090 |
|
|
207
|
+
| `command` | 102,325 | 32,526 | 26,673 | 17,475 | 4,482 | 3,670 |
|
|
208
|
+
| `copy-button` | 113,969 | 38,272 | 32,202 | 11,135 | 2,833 | 2,275 |
|
|
209
|
+
| `data-table` | 166,402 | 51,659 | 43,500 | 52,453 | 13,331 | 11,101 |
|
|
210
|
+
| `date-input` | 128,031 | 41,552 | 34,921 | 17,571 | 4,479 | 3,777 |
|
|
211
|
+
| `date-picker` | 87,002 | 28,684 | 23,601 | 9,753 | 2,711 | 2,160 |
|
|
212
|
+
| `description-list` | 28,284 | 9,449 | 8,315 | 1,132 | 188 | 149 |
|
|
213
|
+
| `dialog` | 31,833 | 10,540 | 9,277 | 2,717 | 827 | 635 |
|
|
214
|
+
| `divider` | 28,360 | 9,612 | 8,452 | 1,090 | 291 | 208 |
|
|
215
|
+
| `donut-chart` | 69,816 | 23,710 | 20,976 | 9,445 | 2,793 | 2,288 |
|
|
216
|
+
| `drawer` | 30,586 | 10,173 | 8,952 | 1,761 | 483 | 460 |
|
|
217
|
+
| `drilldown` | 82,085 | 27,228 | 22,296 | 5,033 | 1,349 | 1,014 |
|
|
218
|
+
| `empty` | 28,337 | 9,552 | 8,424 | 816 | 196 | 178 |
|
|
219
|
+
| `file-input` | 86,639 | 28,573 | 23,402 | 6,008 | 1,704 | 1,415 |
|
|
220
|
+
| `filter-input` | 140,944 | 45,001 | 37,741 | 27,055 | 6,605 | 5,511 |
|
|
221
|
+
| `format-date` | 31,794 | 10,662 | 9,423 | 2,867 | 709 | 509 |
|
|
222
|
+
| `heatmap` | 71,256 | 23,979 | 21,198 | 10,710 | 3,035 | 2,402 |
|
|
223
|
+
| `icon` | 74,910 | 24,899 | 20,562 | 850 | 199 | 146 |
|
|
224
|
+
| `icon-button` | 33,191 | 10,818 | 9,545 | 3,536 | 864 | 646 |
|
|
225
|
+
| `image` | 30,354 | 10,046 | 8,850 | 3,156 | 823 | 561 |
|
|
226
|
+
| `input` | 86,028 | 28,233 | 23,115 | 4,697 | 1,280 | 970 |
|
|
227
|
+
| `kbd` | 30,135 | 10,271 | 9,033 | 2,976 | 1,046 | 797 |
|
|
228
|
+
| `legend` | 32,053 | 10,718 | 9,429 | 1,097 | 304 | 156 |
|
|
229
|
+
| `line-chart` | 71,935 | 24,541 | 21,806 | 10,212 | 3,016 | 2,471 |
|
|
230
|
+
| `list` | 29,236 | 9,683 | 8,543 | 1,725 | 346 | 289 |
|
|
231
|
+
| `listbox` | 94,076 | 30,670 | 25,021 | 10,712 | 2,950 | 2,339 |
|
|
232
|
+
| `loader` | 28,421 | 9,614 | 8,463 | 900 | 234 | 185 |
|
|
233
|
+
| `megamenu` | 57,678 | 20,012 | 17,746 | 4,950 | 1,370 | 1,041 |
|
|
234
|
+
| `menu` | 112,846 | 38,163 | 31,959 | 8,784 | 2,216 | 1,723 |
|
|
235
|
+
| `meter` | 31,313 | 10,393 | 9,156 | 3,801 | 981 | 859 |
|
|
236
|
+
| `navigation` | 30,059 | 10,131 | 8,946 | 1,361 | 382 | 235 |
|
|
237
|
+
| `notifications` | 90,884 | 29,499 | 24,213 | 11,898 | 2,829 | 2,241 |
|
|
238
|
+
| `number-input` | 88,418 | 28,880 | 23,647 | 7,174 | 1,927 | 1,495 |
|
|
239
|
+
| `object-inspector` | 126,009 | 42,221 | 35,513 | 18,120 | 4,921 | 4,146 |
|
|
240
|
+
| `option` | 30,229 | 9,975 | 8,820 | 2,711 | 591 | 419 |
|
|
241
|
+
| `outline` | 33,383 | 11,260 | 9,934 | 4,633 | 1,434 | 1,101 |
|
|
242
|
+
| `pagination` | 134,144 | 42,835 | 35,903 | 25,926 | 6,051 | 5,059 |
|
|
243
|
+
| `pin-input` | 38,833 | 12,329 | 10,865 | 5,061 | 1,494 | 1,108 |
|
|
244
|
+
| `popover` | 54,875 | 19,242 | 16,988 | 1,901 | 532 | 441 |
|
|
245
|
+
| `progress` | 29,462 | 9,887 | 8,712 | 1,951 | 495 | 389 |
|
|
246
|
+
| `qr-code` | 40,109 | 13,918 | 12,307 | 12,981 | 4,649 | 4,077 |
|
|
247
|
+
| `quote` | 27,704 | 9,363 | 8,256 | 552 | 141 | 14 |
|
|
248
|
+
| `radio` | 37,347 | 11,758 | 10,374 | 3,114 | 828 | 574 |
|
|
249
|
+
| `rating` | 39,595 | 12,610 | 11,120 | 5,806 | 1,651 | 1,353 |
|
|
250
|
+
| `scatter-chart` | 71,678 | 24,395 | 21,561 | 10,741 | 3,250 | 2,727 |
|
|
251
|
+
| `scroll-area` | 29,783 | 10,039 | 8,827 | 2,579 | 779 | 559 |
|
|
252
|
+
| `select` | 123,308 | 40,507 | 33,861 | 15,216 | 3,869 | 3,122 |
|
|
253
|
+
| `skeleton` | 26,893 | 9,111 | 8,035 | 544 | 115 | 12 |
|
|
254
|
+
| `skip-link` | 28,376 | 9,630 | 8,461 | 1,226 | 388 | 210 |
|
|
255
|
+
| `slider` | 39,193 | 12,370 | 10,903 | 5,177 | 1,421 | 1,146 |
|
|
256
|
+
| `sparkline` | 34,519 | 11,740 | 10,370 | 2,539 | 832 | 644 |
|
|
257
|
+
| `speed-dial` | 104,547 | 35,833 | 30,052 | 3,743 | 985 | 666 |
|
|
258
|
+
| `splitter` | 37,679 | 11,979 | 10,629 | 10,163 | 2,560 | 2,091 |
|
|
259
|
+
| `stat` | 28,669 | 9,549 | 8,403 | 1,148 | 193 | 167 |
|
|
260
|
+
| `steps` | 84,497 | 27,716 | 22,737 | 6,293 | 1,519 | 1,188 |
|
|
261
|
+
| `switch` | 35,672 | 11,420 | 10,098 | 1,699 | 537 | 310 |
|
|
262
|
+
| `table` | 83,015 | 27,412 | 22,436 | 7,067 | 1,840 | 1,435 |
|
|
263
|
+
| `tabs` | 35,012 | 11,322 | 9,969 | 4,097 | 910 | 614 |
|
|
264
|
+
| `tag` | 75,788 | 25,240 | 20,713 | 897 | 201 | 148 |
|
|
265
|
+
| `textarea` | 38,274 | 12,046 | 10,634 | 4,018 | 1,096 | 785 |
|
|
266
|
+
| `time-input` | 140,537 | 44,898 | 37,594 | 27,149 | 6,797 | 5,699 |
|
|
267
|
+
| `time-picker` | 102,169 | 33,069 | 27,193 | 18,261 | 4,991 | 4,089 |
|
|
268
|
+
| `timeline` | 76,320 | 25,224 | 20,811 | 1,894 | 402 | 367 |
|
|
269
|
+
| `toast` | 79,519 | 26,323 | 21,620 | 4,005 | 946 | 753 |
|
|
270
|
+
| `toggle` | 39,309 | 12,361 | 10,951 | 3,535 | 923 | 594 |
|
|
271
|
+
| `toolbar` | 30,083 | 10,143 | 8,927 | 2,932 | 940 | 685 |
|
|
272
|
+
| `tooltip` | 58,399 | 20,181 | 17,876 | 5,914 | 1,662 | 1,315 |
|
|
273
|
+
| `tour` | 64,232 | 21,507 | 19,016 | 10,529 | 2,609 | 2,187 |
|
|
274
|
+
| `tree` | 85,955 | 28,304 | 23,087 | 7,132 | 1,927 | 1,485 |
|
|
275
|
+
| `trend` | 75,113 | 25,003 | 20,670 | 1,056 | 289 | 241 |
|
|
276
|
+
| `video` | 137,640 | 44,216 | 37,251 | 33,326 | 7,949 | 6,925 |
|
|
277
|
+
| `video-playlist` | 120,349 | 39,763 | 33,360 | 14,883 | 3,458 | 2,927 |
|
|
278
|
+
| `virtual-list` | 33,939 | 11,415 | 10,047 | 2,485 | 765 | 616 |
|
|
279
279
|
|
|
280
280
|
### Styled tier
|
|
281
281
|
|
|
@@ -283,106 +283,106 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
|
|
|
283
283
|
|
|
284
284
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
285
285
|
|---|---|---|---|---|---|---|
|
|
286
|
-
| `accordion` |
|
|
287
|
-
| `announcement` | 80,
|
|
288
|
-
| `app-header` | 32,
|
|
289
|
-
| `area-chart` |
|
|
290
|
-
| `aura` | 89,
|
|
291
|
-
| `avatar` |
|
|
292
|
-
| `badge` | 31,
|
|
293
|
-
| `bar-chart` |
|
|
294
|
-
| `blockquote` | 29,
|
|
295
|
-
| `breadcrumbs` | 79,
|
|
296
|
-
| `button` | 38,
|
|
297
|
-
| `button-group` | 29,
|
|
298
|
-
| `callout` | 77,
|
|
299
|
-
| `card` | 31,
|
|
300
|
-
| `carousel` | 92,
|
|
301
|
-
| `chat` |
|
|
302
|
-
| `checkbox` |
|
|
303
|
-
| `checkbox-group` | 41,
|
|
304
|
-
| `code` | 27,
|
|
305
|
-
| `code-block` | 134,
|
|
306
|
-
| `color-input` |
|
|
307
|
-
| `color-picker` | 127,
|
|
308
|
-
| `combobox` |
|
|
309
|
-
| `command` | 112,
|
|
310
|
-
| `copy-button` | 124,
|
|
311
|
-
| `data-table` | 199,
|
|
312
|
-
| `date-input` |
|
|
313
|
-
| `date-picker` | 92,
|
|
314
|
-
| `description-list` | 30,
|
|
315
|
-
| `dialog` | 36,
|
|
316
|
-
| `divider` | 30,
|
|
317
|
-
| `donut-chart` |
|
|
318
|
-
| `drawer` | 34,
|
|
319
|
-
| `drilldown` | 86,
|
|
320
|
-
| `empty` | 29,
|
|
321
|
-
| `file-input` | 97,
|
|
322
|
-
| `filter-input` |
|
|
323
|
-
| `flex` | 29,
|
|
324
|
-
| `format-date` | 32,
|
|
325
|
-
| `grid` | 29,
|
|
326
|
-
| `heatmap` |
|
|
327
|
-
| `icon` | 75,
|
|
328
|
-
| `icon-button` |
|
|
329
|
-
| `image` |
|
|
330
|
-
| `input` | 92,
|
|
331
|
-
| `kbd` | 31,
|
|
332
|
-
| `legend` |
|
|
333
|
-
| `line-chart` |
|
|
334
|
-
| `list` | 33,
|
|
335
|
-
| `listbox` | 98,
|
|
336
|
-
| `loader` | 31,
|
|
337
|
-
| `megamenu` |
|
|
338
|
-
| `menu` |
|
|
339
|
-
| `meter` | 36,
|
|
340
|
-
| `navigation` | 31,
|
|
341
|
-
| `notifications` | 103,
|
|
342
|
-
| `number-input` | 93,
|
|
343
|
-
| `object-inspector` |
|
|
344
|
-
| `option` | 33,
|
|
345
|
-
| `orb` |
|
|
346
|
-
| `outline` | 37,
|
|
347
|
-
| `pagination` |
|
|
348
|
-
| `pin-input` | 41,
|
|
349
|
-
| `popover` | 57,
|
|
350
|
-
| `progress` | 34,
|
|
351
|
-
| `qr-code` | 41,
|
|
352
|
-
| `quote` | 28,
|
|
353
|
-
| `radio` | 44,
|
|
354
|
-
| `rating` | 42,
|
|
355
|
-
| `sandbox` | 62,
|
|
356
|
-
| `scatter-chart` |
|
|
357
|
-
| `scroll-area` | 32,
|
|
358
|
-
| `select` | 135,
|
|
359
|
-
| `skeleton` | 29,
|
|
360
|
-
| `skip-link` | 29,
|
|
361
|
-
| `slider` | 49,
|
|
362
|
-
| `sparkline` |
|
|
363
|
-
| `speed-dial` |
|
|
364
|
-
| `splitter` | 43,
|
|
365
|
-
| `stat` | 31,
|
|
366
|
-
| `steps` |
|
|
367
|
-
| `switch` | 39,
|
|
368
|
-
| `table` | 87,
|
|
369
|
-
| `tabs` | 41,
|
|
370
|
-
| `tag` | 78,
|
|
371
|
-
| `text` | 31,
|
|
372
|
-
| `textarea` | 41,
|
|
373
|
-
| `time-input` |
|
|
374
|
-
| `time-picker` | 113,
|
|
375
|
-
| `timeline` | 79,
|
|
376
|
-
| `toast` |
|
|
377
|
-
| `toggle` | 44,
|
|
378
|
-
| `toolbar` | 31,
|
|
379
|
-
| `tooltip` | 61,
|
|
380
|
-
| `tour` |
|
|
381
|
-
| `tree` |
|
|
382
|
-
| `trend` | 78,
|
|
383
|
-
| `video` |
|
|
384
|
-
| `video-playlist` |
|
|
385
|
-
| `virtual-list` | 34,
|
|
286
|
+
| `accordion` | 82,762 | 27,356 | 22,401 | 6,204 | 1,568 | 1,338 |
|
|
287
|
+
| `announcement` | 80,995 | 26,628 | 21,836 | 5,600 | 1,340 | 1,142 |
|
|
288
|
+
| `app-header` | 32,427 | 10,476 | 9,212 | 4,883 | 1,163 | 968 |
|
|
289
|
+
| `area-chart` | 80,323 | 26,487 | 23,399 | 18,496 | 4,929 | 4,147 |
|
|
290
|
+
| `aura` | 89,189 | 31,163 | 26,949 | 60,878 | 21,424 | 18,457 |
|
|
291
|
+
| `avatar` | 34,409 | 11,011 | 9,727 | 6,832 | 1,697 | 1,351 |
|
|
292
|
+
| `badge` | 31,414 | 10,288 | 9,043 | 4,249 | 996 | 828 |
|
|
293
|
+
| `bar-chart` | 87,181 | 27,717 | 24,531 | 25,437 | 6,198 | 5,331 |
|
|
294
|
+
| `blockquote` | 29,319 | 9,829 | 8,657 | 2,032 | 528 | 505 |
|
|
295
|
+
| `breadcrumbs` | 79,776 | 26,051 | 21,500 | 5,342 | 1,203 | 1,016 |
|
|
296
|
+
| `button` | 38,885 | 11,901 | 10,473 | 9,212 | 1,947 | 1,551 |
|
|
297
|
+
| `button-group` | 29,857 | 9,875 | 8,690 | 2,320 | 534 | 411 |
|
|
298
|
+
| `callout` | 77,503 | 25,674 | 21,207 | 2,895 | 769 | 640 |
|
|
299
|
+
| `card` | 31,448 | 10,334 | 9,098 | 3,915 | 979 | 860 |
|
|
300
|
+
| `carousel` | 92,433 | 28,864 | 23,987 | 17,852 | 3,658 | 3,162 |
|
|
301
|
+
| `chat` | 112,199 | 35,116 | 29,034 | 30,985 | 7,430 | 6,278 |
|
|
302
|
+
| `checkbox` | 42,088 | 12,884 | 11,358 | 8,221 | 2,024 | 1,620 |
|
|
303
|
+
| `checkbox-group` | 41,245 | 12,708 | 11,199 | 6,861 | 1,790 | 1,440 |
|
|
304
|
+
| `code` | 27,877 | 9,374 | 8,245 | 1,511 | 377 | 325 |
|
|
305
|
+
| `code-block` | 134,813 | 42,523 | 35,859 | 31,956 | 6,848 | 5,855 |
|
|
306
|
+
| `color-input` | 165,160 | 48,159 | 40,650 | 57,016 | 11,387 | 9,796 |
|
|
307
|
+
| `color-picker` | 127,914 | 37,014 | 30,782 | 45,628 | 9,459 | 8,175 |
|
|
308
|
+
| `combobox` | 145,781 | 44,992 | 37,732 | 34,944 | 7,642 | 6,411 |
|
|
309
|
+
| `command` | 112,788 | 34,558 | 28,464 | 27,922 | 6,499 | 5,518 |
|
|
310
|
+
| `copy-button` | 124,512 | 40,110 | 33,766 | 21,660 | 4,581 | 3,934 |
|
|
311
|
+
| `data-table` | 199,920 | 56,913 | 47,898 | 85,952 | 18,661 | 15,426 |
|
|
312
|
+
| `date-input` | 143,950 | 44,598 | 37,534 | 33,467 | 7,430 | 6,409 |
|
|
313
|
+
| `date-picker` | 92,617 | 29,855 | 24,619 | 15,350 | 3,862 | 3,237 |
|
|
314
|
+
| `description-list` | 30,662 | 10,015 | 8,820 | 3,502 | 755 | 663 |
|
|
315
|
+
| `dialog` | 36,168 | 11,545 | 10,164 | 7,037 | 1,827 | 1,529 |
|
|
316
|
+
| `divider` | 30,516 | 10,132 | 8,904 | 3,229 | 796 | 600 |
|
|
317
|
+
| `donut-chart` | 79,264 | 25,618 | 22,708 | 18,873 | 4,729 | 4,043 |
|
|
318
|
+
| `drawer` | 34,458 | 11,066 | 9,766 | 5,616 | 1,373 | 1,263 |
|
|
319
|
+
| `drilldown` | 86,524 | 28,240 | 23,139 | 9,460 | 2,320 | 1,926 |
|
|
320
|
+
| `empty` | 29,624 | 9,916 | 8,736 | 2,087 | 555 | 438 |
|
|
321
|
+
| `file-input` | 97,757 | 30,752 | 25,301 | 17,119 | 3,820 | 3,273 |
|
|
322
|
+
| `filter-input` | 168,728 | 49,403 | 41,504 | 54,826 | 11,071 | 9,260 |
|
|
323
|
+
| `flex` | 29,159 | 9,720 | 8,556 | 1,999 | 457 | 374 |
|
|
324
|
+
| `format-date` | 32,442 | 10,807 | 9,583 | 3,497 | 859 | 661 |
|
|
325
|
+
| `grid` | 29,686 | 9,885 | 8,688 | 2,522 | 626 | 513 |
|
|
326
|
+
| `heatmap` | 78,600 | 25,420 | 22,523 | 18,035 | 4,500 | 3,732 |
|
|
327
|
+
| `icon` | 75,616 | 25,081 | 20,653 | 1,539 | 356 | 237 |
|
|
328
|
+
| `icon-button` | 39,206 | 11,829 | 10,391 | 9,537 | 1,869 | 1,525 |
|
|
329
|
+
| `image` | 32,113 | 10,538 | 9,282 | 4,897 | 1,308 | 1,052 |
|
|
330
|
+
| `input` | 92,126 | 29,547 | 24,219 | 10,787 | 2,575 | 2,070 |
|
|
331
|
+
| `kbd` | 31,547 | 10,718 | 9,427 | 4,373 | 1,491 | 1,190 |
|
|
332
|
+
| `legend` | 36,893 | 11,816 | 10,390 | 5,931 | 1,435 | 1,065 |
|
|
333
|
+
| `line-chart` | 82,024 | 26,543 | 23,498 | 20,286 | 5,044 | 4,260 |
|
|
334
|
+
| `list` | 33,300 | 10,627 | 9,364 | 5,779 | 1,300 | 1,069 |
|
|
335
|
+
| `listbox` | 98,345 | 31,661 | 25,897 | 14,974 | 3,931 | 3,244 |
|
|
336
|
+
| `loader` | 31,587 | 10,380 | 9,138 | 4,051 | 987 | 825 |
|
|
337
|
+
| `megamenu` | 62,555 | 21,080 | 18,678 | 9,810 | 2,418 | 1,994 |
|
|
338
|
+
| `menu` | 120,339 | 39,766 | 33,330 | 16,258 | 3,778 | 3,103 |
|
|
339
|
+
| `meter` | 36,691 | 11,542 | 10,206 | 9,161 | 2,122 | 1,816 |
|
|
340
|
+
| `navigation` | 31,440 | 10,521 | 9,269 | 2,726 | 771 | 542 |
|
|
341
|
+
| `notifications` | 103,840 | 31,846 | 26,318 | 24,840 | 5,159 | 4,327 |
|
|
342
|
+
| `number-input` | 93,200 | 30,010 | 24,592 | 11,944 | 3,026 | 2,502 |
|
|
343
|
+
| `object-inspector` | 140,283 | 44,629 | 37,627 | 32,373 | 7,303 | 6,207 |
|
|
344
|
+
| `option` | 33,478 | 10,880 | 9,583 | 5,948 | 1,484 | 1,183 |
|
|
345
|
+
| `orb` | 37,014 | 12,927 | 11,419 | 9,443 | 3,479 | 2,965 |
|
|
346
|
+
| `outline` | 37,123 | 12,040 | 10,634 | 8,356 | 2,222 | 1,778 |
|
|
347
|
+
| `pagination` | 152,149 | 45,951 | 38,557 | 43,913 | 9,117 | 7,676 |
|
|
348
|
+
| `pin-input` | 41,881 | 13,108 | 11,536 | 8,092 | 2,270 | 1,804 |
|
|
349
|
+
| `popover` | 57,511 | 19,891 | 17,564 | 4,519 | 1,188 | 1,007 |
|
|
350
|
+
| `progress` | 34,491 | 11,067 | 9,800 | 6,962 | 1,644 | 1,514 |
|
|
351
|
+
| `qr-code` | 41,772 | 14,351 | 12,660 | 14,626 | 5,096 | 4,417 |
|
|
352
|
+
| `quote` | 28,359 | 9,524 | 8,394 | 1,191 | 297 | 253 |
|
|
353
|
+
| `radio` | 44,926 | 13,173 | 11,636 | 10,686 | 2,251 | 1,880 |
|
|
354
|
+
| `rating` | 42,552 | 13,534 | 11,957 | 8,745 | 2,543 | 2,094 |
|
|
355
|
+
| `sandbox` | 62,700 | 17,137 | 15,196 | 34,886 | 7,632 | 6,492 |
|
|
356
|
+
| `scatter-chart` | 80,468 | 26,234 | 23,196 | 19,512 | 5,101 | 4,232 |
|
|
357
|
+
| `scroll-area` | 32,709 | 10,661 | 9,356 | 5,488 | 1,392 | 1,109 |
|
|
358
|
+
| `select` | 135,908 | 42,870 | 35,975 | 27,798 | 6,213 | 5,124 |
|
|
359
|
+
| `skeleton` | 29,411 | 9,862 | 8,669 | 2,242 | 605 | 512 |
|
|
360
|
+
| `skip-link` | 29,839 | 10,034 | 8,799 | 2,672 | 773 | 545 |
|
|
361
|
+
| `slider` | 49,029 | 14,154 | 12,545 | 14,996 | 3,195 | 2,757 |
|
|
362
|
+
| `sparkline` | 38,266 | 12,667 | 11,175 | 6,275 | 1,740 | 1,420 |
|
|
363
|
+
| `speed-dial` | 112,011 | 37,281 | 31,281 | 11,187 | 2,350 | 1,919 |
|
|
364
|
+
| `splitter` | 43,751 | 12,980 | 11,485 | 16,217 | 3,572 | 3,104 |
|
|
365
|
+
| `stat` | 31,314 | 10,122 | 8,921 | 3,783 | 789 | 665 |
|
|
366
|
+
| `steps` | 98,120 | 30,140 | 24,834 | 19,904 | 3,899 | 3,271 |
|
|
367
|
+
| `switch` | 39,896 | 12,465 | 10,991 | 5,908 | 1,580 | 1,294 |
|
|
368
|
+
| `table` | 87,680 | 28,346 | 23,220 | 11,721 | 2,769 | 2,273 |
|
|
369
|
+
| `tabs` | 41,251 | 12,597 | 11,107 | 10,325 | 2,204 | 1,803 |
|
|
370
|
+
| `tag` | 78,992 | 26,103 | 21,419 | 4,086 | 1,024 | 936 |
|
|
371
|
+
| `text` | 31,145 | 10,009 | 8,780 | 3,987 | 805 | 621 |
|
|
372
|
+
| `textarea` | 41,611 | 12,862 | 11,324 | 7,341 | 1,933 | 1,666 |
|
|
373
|
+
| `time-input` | 161,718 | 48,407 | 40,701 | 48,315 | 10,344 | 8,717 |
|
|
374
|
+
| `time-picker` | 113,587 | 35,202 | 29,075 | 29,674 | 7,169 | 6,027 |
|
|
375
|
+
| `timeline` | 79,598 | 25,983 | 21,480 | 5,160 | 1,145 | 920 |
|
|
376
|
+
| `toast` | 87,052 | 27,992 | 23,036 | 11,526 | 2,573 | 2,181 |
|
|
377
|
+
| `toggle` | 44,296 | 13,506 | 11,931 | 8,514 | 2,089 | 1,715 |
|
|
378
|
+
| `toolbar` | 31,375 | 10,433 | 9,180 | 4,207 | 1,234 | 864 |
|
|
379
|
+
| `tooltip` | 61,965 | 20,991 | 18,605 | 9,462 | 2,434 | 1,918 |
|
|
380
|
+
| `tour` | 74,099 | 23,197 | 20,557 | 20,376 | 4,255 | 3,610 |
|
|
381
|
+
| `tree` | 91,070 | 29,520 | 24,267 | 12,236 | 3,154 | 2,671 |
|
|
382
|
+
| `trend` | 78,169 | 25,672 | 21,165 | 4,103 | 914 | 790 |
|
|
383
|
+
| `video` | 156,519 | 47,663 | 40,287 | 52,185 | 11,391 | 9,971 |
|
|
384
|
+
| `video-playlist` | 134,257 | 42,259 | 35,474 | 28,770 | 5,911 | 4,972 |
|
|
385
|
+
| `virtual-list` | 34,731 | 11,622 | 10,269 | 3,259 | 962 | 758 |
|
|
386
386
|
|
|
387
387
|
## What lands in `node_modules`
|
|
388
388
|
|
|
@@ -394,12 +394,12 @@ column is what was removed rather than part of what remains.
|
|
|
394
394
|
|
|
395
395
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
396
396
|
|---|---|---|---|---|
|
|
397
|
-
| `@fusion.dev/helix-core` |
|
|
398
|
-
| `@fusion.dev/helix-headless` | 10,
|
|
397
|
+
| `@fusion.dev/helix-core` | 818,607 | 121 | 180,874 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
|
|
398
|
+
| `@fusion.dev/helix-headless` | 10,597,865 | 472 | 837,872 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
|
|
399
399
|
| `@fusion.dev/helix-icons` | 65,943 | 11 | 20,928 | none |
|
|
400
|
-
| `@fusion.dev/helix-styles` |
|
|
400
|
+
| `@fusion.dev/helix-styles` | 101,191 | 6 | 0 | none |
|
|
401
401
|
| `@fusion.dev/helix-theme` | 465,413 | 8 | 4,703 | none |
|
|
402
|
-
| `@fusion.dev/helix` | 11,
|
|
402
|
+
| `@fusion.dev/helix` | 11,559,253 | 798 | 332,506 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
|
|
403
403
|
|
|
404
404
|
## Not measured yet
|
|
405
405
|
|
|
@@ -1922,7 +1922,7 @@ nobody ever downloads this floor on its own.
|
|
|
1922
1922
|
|
|
1923
1923
|
| | Raw | Gzip | Brotli |
|
|
1924
1924
|
|---|---|---|---|
|
|
1925
|
-
| Lit and \`@fusion.dev/helix-core\` |
|
|
1925
|
+
| Lit and \`@fusion.dev/helix-core\` | 144,264 | 47,733 | 40,268 |
|
|
1926
1926
|
|
|
1927
1927
|
## Whole packages
|
|
1928
1928
|
|
|
@@ -1933,11 +1933,11 @@ repository does that. The per-component tables are what a page pays.
|
|
|
1933
1933
|
|
|
1934
1934
|
| Package | Raw | Gzip | Brotli | |
|
|
1935
1935
|
|---|---|---|---|---|
|
|
1936
|
-
| \`@fusion.dev/helix-core\` |
|
|
1937
|
-
| \`@fusion.dev/helix-headless\` |
|
|
1936
|
+
| \`@fusion.dev/helix-core\` | 143,818 | 47,358 | 40,062 | Element base class, mixins, decorators, floating positioning. |
|
|
1937
|
+
| \`@fusion.dev/helix-headless\` | 587,310 | 151,502 | 118,033 | Every headless family, which is what the barrel means. |
|
|
1938
1938
|
| \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
|
|
1939
1939
|
| \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
|
|
1940
|
-
| \`@fusion.dev/helix\` | 1,
|
|
1940
|
+
| \`@fusion.dev/helix\` | 1,051,851 | 245,276 | 179,736 | Every styled family. |
|
|
1941
1941
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
|
|
1942
1942
|
|
|
1943
1943
|
## The stylesheets
|
|
@@ -1950,7 +1950,7 @@ is the whole cost of adopting the base layer on its own.
|
|
|
1950
1950
|
|
|
1951
1951
|
| File | Raw | Gzip | Brotli | |
|
|
1952
1952
|
|---|---|---|---|---|
|
|
1953
|
-
| \`base.css\` | 30,
|
|
1953
|
+
| \`base.css\` | 30,724 | 4,427 | 3,843 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
|
|
1954
1954
|
| \`elements.css\` | 7,848 | 1,341 | 1,202 | Hides each element until its definition loads, generated from the tags in \`@fusion.dev/helix\`. |
|
|
1955
1955
|
| \`helix.css\` | 207 | 148 | 118 | The four above in one import, in the order they have to be in. |
|
|
1956
1956
|
| \`primitives.css\` | 6,390 | 1,260 | 1,084 | The primitive layer. Private, shipped because \`tokens.css\` resolves into it. |
|
|
@@ -1958,13 +1958,13 @@ is the whole cost of adopting the base layer on its own.
|
|
|
1958
1958
|
|
|
1959
1959
|
## What the numbers say
|
|
1960
1960
|
|
|
1961
|
-
**Most of a first component is the runtime under it.** The median styled family is 18,
|
|
1961
|
+
**Most of a first component is the runtime under it.** The median styled family is 18,514 bytes gzipped alone and adds 2,213 to a page that already has Helix on it, so 88 percent of the first one is shared and 12 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
|
|
1962
1962
|
|
|
1963
|
-
Across the tier: the cheapest is \`code\` at 9,
|
|
1963
|
+
Across the tier: the cheapest is \`code\` at 9,374 gzipped alone, the dearest \`data-table\` at 56,913, over 100 components. Every family at once is 245,276.
|
|
1964
1964
|
|
|
1965
|
-
**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 151,
|
|
1965
|
+
**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 151,502 bytes gzipped whatever else the page does, which is 8 times the median family measured above. The styled tier imports the family it extends instead, all 100 of them, and the check refuses the shape rather than the package name, so the rule follows \`sideEffects\` wherever it goes.
|
|
1966
1966
|
|
|
1967
|
-
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
|
|
1967
|
+
The headless tier never had the problem, and it is the control: \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and a headless family is a median of 20,097 bytes gzipped alone.
|
|
1968
1968
|
|
|
1969
1969
|
## Against other systems
|
|
1970
1970
|
|
|
@@ -1976,43 +1976,43 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
|
|
|
1976
1976
|
|
|
1977
1977
|
| Component | System | Raw | Gzip | Brotli |
|
|
1978
1978
|
|---|---|---|---|---|
|
|
1979
|
-
| \`button\` | **Helix** | 38,
|
|
1979
|
+
| \`button\` | **Helix** | 38,885 | 11,901 | 10,473 |
|
|
1980
1980
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
1981
1981
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
1982
1982
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
1983
1983
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
1984
|
-
| \`checkbox\` | **Helix** |
|
|
1984
|
+
| \`checkbox\` | **Helix** | 42,088 | 12,884 | 11,358 |
|
|
1985
1985
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
1986
1986
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
1987
1987
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
1988
1988
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
1989
|
-
| \`dialog\` | **Helix** | 36,
|
|
1989
|
+
| \`dialog\` | **Helix** | 36,168 | 11,545 | 10,164 |
|
|
1990
1990
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
1991
1991
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
1992
1992
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
1993
1993
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
1994
|
-
| \`radio\` | **Helix** | 44,
|
|
1994
|
+
| \`radio\` | **Helix** | 44,926 | 13,173 | 11,636 |
|
|
1995
1995
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
1996
1996
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
1997
1997
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
1998
1998
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
1999
|
-
| \`switch\` | **Helix** | 39,
|
|
1999
|
+
| \`switch\` | **Helix** | 39,896 | 12,465 | 10,991 |
|
|
2000
2000
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
2001
2001
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
2002
2002
|
| | Shoelace | 37,833 | 11,814 | 10,568 |
|
|
2003
2003
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
2004
|
-
| \`tabs\` | **Helix** | 41,
|
|
2004
|
+
| \`tabs\` | **Helix** | 41,251 | 12,597 | 11,107 |
|
|
2005
2005
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
2006
2006
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
2007
2007
|
| | Shoelace | 54,573 | 17,140 | 15,068 |
|
|
2008
2008
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
2009
|
-
| \`tooltip\` | **Helix** | 61,
|
|
2009
|
+
| \`tooltip\` | **Helix** | 61,965 | 20,991 | 18,605 |
|
|
2010
2010
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
2011
2011
|
| | Material Web | | not shipped | |
|
|
2012
2012
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
2013
2013
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
2014
2014
|
|
|
2015
|
-
**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,
|
|
2015
|
+
**Where Helix loses**, which is the half of a comparison table worth reading: \`dialog\`, \`radio\`, \`switch\`, \`tooltip\`. The largest gap is radio against Spectrum, by 2,513 bytes gzipped. 5 of 28 peer measurements come in under ours.
|
|
2016
2016
|
|
|
2017
2017
|
- **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
|
|
2018
2018
|
- **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
|
|
@@ -2057,100 +2057,100 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2057
2057
|
|
|
2058
2058
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
2059
2059
|
|---|---|---|---|---|---|---|
|
|
2060
|
-
| \`accordion\` |
|
|
2061
|
-
| \`announcement\` | 76,
|
|
2062
|
-
| \`app-header\` | 28,
|
|
2063
|
-
| \`area-chart\` |
|
|
2064
|
-
| \`avatar\` | 30,
|
|
2065
|
-
| \`badge\` | 28,
|
|
2066
|
-
| \`bar-chart\` | 73,
|
|
2067
|
-
| \`blockquote\` | 28,
|
|
2068
|
-
| \`breadcrumbs\` | 76,
|
|
2069
|
-
| \`button\` | 32,
|
|
2070
|
-
| \`button-group\` | 28,
|
|
2071
|
-
| \`callout\` | 75,
|
|
2072
|
-
| \`card\` | 28,
|
|
2073
|
-
| \`carousel\` | 82,
|
|
2074
|
-
| \`chat\` | 98,
|
|
2075
|
-
| \`checkbox\` |
|
|
2076
|
-
| \`checkbox-group\` |
|
|
2077
|
-
| \`code\` | 26,
|
|
2078
|
-
| \`code-block\` | 118,
|
|
2079
|
-
| \`color-input\` |
|
|
2080
|
-
| \`color-picker\` | 101,
|
|
2081
|
-
| \`combobox\` | 130,
|
|
2082
|
-
| \`command\` | 102,
|
|
2083
|
-
| \`copy-button\` | 113,
|
|
2084
|
-
| \`data-table\` | 166,
|
|
2085
|
-
| \`date-input\` |
|
|
2086
|
-
| \`date-picker\` |
|
|
2087
|
-
| \`description-list\` | 28,
|
|
2088
|
-
| \`dialog\` | 31,
|
|
2089
|
-
| \`divider\` | 28,
|
|
2090
|
-
| \`donut-chart\` | 69,
|
|
2091
|
-
| \`drawer\` | 30,
|
|
2092
|
-
| \`drilldown\` |
|
|
2093
|
-
| \`empty\` | 28,
|
|
2094
|
-
| \`file-input\` | 86,
|
|
2095
|
-
| \`filter-input\` | 140,
|
|
2096
|
-
| \`format-date\` | 31,
|
|
2097
|
-
| \`heatmap\` |
|
|
2098
|
-
| \`icon\` | 74,
|
|
2099
|
-
| \`icon-button\` |
|
|
2100
|
-
| \`image\` | 30,
|
|
2101
|
-
| \`input\` |
|
|
2102
|
-
| \`kbd\` | 30,
|
|
2103
|
-
| \`legend\` |
|
|
2104
|
-
| \`line-chart\` | 71,
|
|
2105
|
-
| \`list\` | 29,
|
|
2106
|
-
| \`listbox\` | 94,
|
|
2107
|
-
| \`loader\` | 28,
|
|
2108
|
-
| \`megamenu\` | 57,
|
|
2109
|
-
| \`menu\` | 112,
|
|
2110
|
-
| \`meter\` | 31,
|
|
2111
|
-
| \`navigation\` | 30,
|
|
2112
|
-
| \`notifications\` | 90,
|
|
2113
|
-
| \`number-input\` | 88,
|
|
2114
|
-
| \`object-inspector\` |
|
|
2115
|
-
| \`option\` | 30,
|
|
2116
|
-
| \`outline\` | 33,
|
|
2117
|
-
| \`pagination\` |
|
|
2118
|
-
| \`pin-input\` | 38,
|
|
2119
|
-
| \`popover\` | 54,
|
|
2120
|
-
| \`progress\` | 29,
|
|
2121
|
-
| \`qr-code\` |
|
|
2122
|
-
| \`quote\` | 27,
|
|
2123
|
-
| \`radio\` | 37,
|
|
2124
|
-
| \`rating\` | 39,
|
|
2125
|
-
| \`scatter-chart\` |
|
|
2126
|
-
| \`scroll-area\` | 29,
|
|
2127
|
-
| \`select\` | 123,
|
|
2128
|
-
| \`skeleton\` | 26,
|
|
2129
|
-
| \`skip-link\` | 28,
|
|
2130
|
-
| \`slider\` | 39,
|
|
2131
|
-
| \`sparkline\` |
|
|
2132
|
-
| \`speed-dial\` | 104,
|
|
2133
|
-
| \`splitter\` | 37,
|
|
2134
|
-
| \`stat\` | 28,
|
|
2135
|
-
| \`steps\` | 84,
|
|
2136
|
-
| \`switch\` | 35,
|
|
2137
|
-
| \`table\` |
|
|
2138
|
-
| \`tabs\` | 35,
|
|
2139
|
-
| \`tag\` | 75,
|
|
2140
|
-
| \`textarea\` | 38,
|
|
2141
|
-
| \`time-input\` |
|
|
2142
|
-
| \`time-picker\` | 102,
|
|
2143
|
-
| \`timeline\` | 76,
|
|
2144
|
-
| \`toast\` | 79,
|
|
2145
|
-
| \`toggle\` | 39,
|
|
2146
|
-
| \`toolbar\` |
|
|
2147
|
-
| \`tooltip\` | 58,
|
|
2148
|
-
| \`tour\` |
|
|
2149
|
-
| \`tree\` | 85,
|
|
2150
|
-
| \`trend\` |
|
|
2151
|
-
| \`video\` |
|
|
2152
|
-
| \`video-playlist\` |
|
|
2153
|
-
| \`virtual-list\` | 33,
|
|
2060
|
+
| \`accordion\` | 79,420 | 26,539 | 21,736 | 2,875 | 762 | 622 |
|
|
2061
|
+
| \`announcement\` | 76,728 | 25,648 | 21,025 | 1,349 | 390 | 342 |
|
|
2062
|
+
| \`app-header\` | 28,775 | 9,650 | 8,524 | 1,248 | 320 | 207 |
|
|
2063
|
+
| \`area-chart\` | 72,449 | 24,850 | 21,956 | 10,642 | 3,270 | 2,744 |
|
|
2064
|
+
| \`avatar\` | 30,824 | 10,253 | 9,043 | 3,257 | 925 | 678 |
|
|
2065
|
+
| \`badge\` | 28,310 | 9,582 | 8,435 | 1,162 | 305 | 295 |
|
|
2066
|
+
| \`bar-chart\` | 73,908 | 25,141 | 22,226 | 12,184 | 3,597 | 2,981 |
|
|
2067
|
+
| \`blockquote\` | 28,163 | 9,540 | 8,418 | 892 | 236 | 248 |
|
|
2068
|
+
| \`breadcrumbs\` | 76,374 | 25,277 | 20,818 | 1,953 | 440 | 389 |
|
|
2069
|
+
| \`button\` | 32,792 | 10,790 | 9,521 | 3,137 | 834 | 716 |
|
|
2070
|
+
| \`button-group\` | 28,181 | 9,497 | 8,353 | 661 | 150 | 116 |
|
|
2071
|
+
| \`callout\` | 75,504 | 25,142 | 20,744 | 912 | 251 | 148 |
|
|
2072
|
+
| \`card\` | 28,215 | 9,509 | 8,389 | 694 | 160 | 82 |
|
|
2073
|
+
| \`carousel\` | 82,601 | 27,276 | 22,478 | 8,031 | 2,104 | 1,663 |
|
|
2074
|
+
| \`chat\` | 98,134 | 32,635 | 26,782 | 16,935 | 4,933 | 4,039 |
|
|
2075
|
+
| \`checkbox\` | 36,048 | 11,494 | 10,116 | 2,197 | 645 | 421 |
|
|
2076
|
+
| \`checkbox-group\` | 39,062 | 12,141 | 10,714 | 4,692 | 1,241 | 833 |
|
|
2077
|
+
| \`code\` | 26,800 | 9,079 | 7,998 | 451 | 83 | 122 |
|
|
2078
|
+
| \`code-block\` | 118,974 | 39,828 | 33,545 | 16,137 | 4,315 | 3,649 |
|
|
2079
|
+
| \`color-input\` | 133,131 | 43,258 | 36,390 | 25,004 | 6,476 | 5,501 |
|
|
2080
|
+
| \`color-picker\` | 101,657 | 32,831 | 27,037 | 19,378 | 5,215 | 4,467 |
|
|
2081
|
+
| \`combobox\` | 130,978 | 42,347 | 35,530 | 20,160 | 5,002 | 4,090 |
|
|
2082
|
+
| \`command\` | 102,325 | 32,526 | 26,673 | 17,475 | 4,482 | 3,670 |
|
|
2083
|
+
| \`copy-button\` | 113,969 | 38,272 | 32,202 | 11,135 | 2,833 | 2,275 |
|
|
2084
|
+
| \`data-table\` | 166,402 | 51,659 | 43,500 | 52,453 | 13,331 | 11,101 |
|
|
2085
|
+
| \`date-input\` | 128,031 | 41,552 | 34,921 | 17,571 | 4,479 | 3,777 |
|
|
2086
|
+
| \`date-picker\` | 87,002 | 28,684 | 23,601 | 9,753 | 2,711 | 2,160 |
|
|
2087
|
+
| \`description-list\` | 28,284 | 9,449 | 8,315 | 1,132 | 188 | 149 |
|
|
2088
|
+
| \`dialog\` | 31,833 | 10,540 | 9,277 | 2,717 | 827 | 635 |
|
|
2089
|
+
| \`divider\` | 28,360 | 9,612 | 8,452 | 1,090 | 291 | 208 |
|
|
2090
|
+
| \`donut-chart\` | 69,816 | 23,710 | 20,976 | 9,445 | 2,793 | 2,288 |
|
|
2091
|
+
| \`drawer\` | 30,586 | 10,173 | 8,952 | 1,761 | 483 | 460 |
|
|
2092
|
+
| \`drilldown\` | 82,085 | 27,228 | 22,296 | 5,033 | 1,349 | 1,014 |
|
|
2093
|
+
| \`empty\` | 28,337 | 9,552 | 8,424 | 816 | 196 | 178 |
|
|
2094
|
+
| \`file-input\` | 86,639 | 28,573 | 23,402 | 6,008 | 1,704 | 1,415 |
|
|
2095
|
+
| \`filter-input\` | 140,944 | 45,001 | 37,741 | 27,055 | 6,605 | 5,511 |
|
|
2096
|
+
| \`format-date\` | 31,794 | 10,662 | 9,423 | 2,867 | 709 | 509 |
|
|
2097
|
+
| \`heatmap\` | 71,256 | 23,979 | 21,198 | 10,710 | 3,035 | 2,402 |
|
|
2098
|
+
| \`icon\` | 74,910 | 24,899 | 20,562 | 850 | 199 | 146 |
|
|
2099
|
+
| \`icon-button\` | 33,191 | 10,818 | 9,545 | 3,536 | 864 | 646 |
|
|
2100
|
+
| \`image\` | 30,354 | 10,046 | 8,850 | 3,156 | 823 | 561 |
|
|
2101
|
+
| \`input\` | 86,028 | 28,233 | 23,115 | 4,697 | 1,280 | 970 |
|
|
2102
|
+
| \`kbd\` | 30,135 | 10,271 | 9,033 | 2,976 | 1,046 | 797 |
|
|
2103
|
+
| \`legend\` | 32,053 | 10,718 | 9,429 | 1,097 | 304 | 156 |
|
|
2104
|
+
| \`line-chart\` | 71,935 | 24,541 | 21,806 | 10,212 | 3,016 | 2,471 |
|
|
2105
|
+
| \`list\` | 29,236 | 9,683 | 8,543 | 1,725 | 346 | 289 |
|
|
2106
|
+
| \`listbox\` | 94,076 | 30,670 | 25,021 | 10,712 | 2,950 | 2,339 |
|
|
2107
|
+
| \`loader\` | 28,421 | 9,614 | 8,463 | 900 | 234 | 185 |
|
|
2108
|
+
| \`megamenu\` | 57,678 | 20,012 | 17,746 | 4,950 | 1,370 | 1,041 |
|
|
2109
|
+
| \`menu\` | 112,846 | 38,163 | 31,959 | 8,784 | 2,216 | 1,723 |
|
|
2110
|
+
| \`meter\` | 31,313 | 10,393 | 9,156 | 3,801 | 981 | 859 |
|
|
2111
|
+
| \`navigation\` | 30,059 | 10,131 | 8,946 | 1,361 | 382 | 235 |
|
|
2112
|
+
| \`notifications\` | 90,884 | 29,499 | 24,213 | 11,898 | 2,829 | 2,241 |
|
|
2113
|
+
| \`number-input\` | 88,418 | 28,880 | 23,647 | 7,174 | 1,927 | 1,495 |
|
|
2114
|
+
| \`object-inspector\` | 126,009 | 42,221 | 35,513 | 18,120 | 4,921 | 4,146 |
|
|
2115
|
+
| \`option\` | 30,229 | 9,975 | 8,820 | 2,711 | 591 | 419 |
|
|
2116
|
+
| \`outline\` | 33,383 | 11,260 | 9,934 | 4,633 | 1,434 | 1,101 |
|
|
2117
|
+
| \`pagination\` | 134,144 | 42,835 | 35,903 | 25,926 | 6,051 | 5,059 |
|
|
2118
|
+
| \`pin-input\` | 38,833 | 12,329 | 10,865 | 5,061 | 1,494 | 1,108 |
|
|
2119
|
+
| \`popover\` | 54,875 | 19,242 | 16,988 | 1,901 | 532 | 441 |
|
|
2120
|
+
| \`progress\` | 29,462 | 9,887 | 8,712 | 1,951 | 495 | 389 |
|
|
2121
|
+
| \`qr-code\` | 40,109 | 13,918 | 12,307 | 12,981 | 4,649 | 4,077 |
|
|
2122
|
+
| \`quote\` | 27,704 | 9,363 | 8,256 | 552 | 141 | 14 |
|
|
2123
|
+
| \`radio\` | 37,347 | 11,758 | 10,374 | 3,114 | 828 | 574 |
|
|
2124
|
+
| \`rating\` | 39,595 | 12,610 | 11,120 | 5,806 | 1,651 | 1,353 |
|
|
2125
|
+
| \`scatter-chart\` | 71,678 | 24,395 | 21,561 | 10,741 | 3,250 | 2,727 |
|
|
2126
|
+
| \`scroll-area\` | 29,783 | 10,039 | 8,827 | 2,579 | 779 | 559 |
|
|
2127
|
+
| \`select\` | 123,308 | 40,507 | 33,861 | 15,216 | 3,869 | 3,122 |
|
|
2128
|
+
| \`skeleton\` | 26,893 | 9,111 | 8,035 | 544 | 115 | 12 |
|
|
2129
|
+
| \`skip-link\` | 28,376 | 9,630 | 8,461 | 1,226 | 388 | 210 |
|
|
2130
|
+
| \`slider\` | 39,193 | 12,370 | 10,903 | 5,177 | 1,421 | 1,146 |
|
|
2131
|
+
| \`sparkline\` | 34,519 | 11,740 | 10,370 | 2,539 | 832 | 644 |
|
|
2132
|
+
| \`speed-dial\` | 104,547 | 35,833 | 30,052 | 3,743 | 985 | 666 |
|
|
2133
|
+
| \`splitter\` | 37,679 | 11,979 | 10,629 | 10,163 | 2,560 | 2,091 |
|
|
2134
|
+
| \`stat\` | 28,669 | 9,549 | 8,403 | 1,148 | 193 | 167 |
|
|
2135
|
+
| \`steps\` | 84,497 | 27,716 | 22,737 | 6,293 | 1,519 | 1,188 |
|
|
2136
|
+
| \`switch\` | 35,672 | 11,420 | 10,098 | 1,699 | 537 | 310 |
|
|
2137
|
+
| \`table\` | 83,015 | 27,412 | 22,436 | 7,067 | 1,840 | 1,435 |
|
|
2138
|
+
| \`tabs\` | 35,012 | 11,322 | 9,969 | 4,097 | 910 | 614 |
|
|
2139
|
+
| \`tag\` | 75,788 | 25,240 | 20,713 | 897 | 201 | 148 |
|
|
2140
|
+
| \`textarea\` | 38,274 | 12,046 | 10,634 | 4,018 | 1,096 | 785 |
|
|
2141
|
+
| \`time-input\` | 140,537 | 44,898 | 37,594 | 27,149 | 6,797 | 5,699 |
|
|
2142
|
+
| \`time-picker\` | 102,169 | 33,069 | 27,193 | 18,261 | 4,991 | 4,089 |
|
|
2143
|
+
| \`timeline\` | 76,320 | 25,224 | 20,811 | 1,894 | 402 | 367 |
|
|
2144
|
+
| \`toast\` | 79,519 | 26,323 | 21,620 | 4,005 | 946 | 753 |
|
|
2145
|
+
| \`toggle\` | 39,309 | 12,361 | 10,951 | 3,535 | 923 | 594 |
|
|
2146
|
+
| \`toolbar\` | 30,083 | 10,143 | 8,927 | 2,932 | 940 | 685 |
|
|
2147
|
+
| \`tooltip\` | 58,399 | 20,181 | 17,876 | 5,914 | 1,662 | 1,315 |
|
|
2148
|
+
| \`tour\` | 64,232 | 21,507 | 19,016 | 10,529 | 2,609 | 2,187 |
|
|
2149
|
+
| \`tree\` | 85,955 | 28,304 | 23,087 | 7,132 | 1,927 | 1,485 |
|
|
2150
|
+
| \`trend\` | 75,113 | 25,003 | 20,670 | 1,056 | 289 | 241 |
|
|
2151
|
+
| \`video\` | 137,640 | 44,216 | 37,251 | 33,326 | 7,949 | 6,925 |
|
|
2152
|
+
| \`video-playlist\` | 120,349 | 39,763 | 33,360 | 14,883 | 3,458 | 2,927 |
|
|
2153
|
+
| \`virtual-list\` | 33,939 | 11,415 | 10,047 | 2,485 | 765 | 616 |
|
|
2154
2154
|
|
|
2155
2155
|
### Styled tier
|
|
2156
2156
|
|
|
@@ -2158,106 +2158,106 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2158
2158
|
|
|
2159
2159
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
2160
2160
|
|---|---|---|---|---|---|---|
|
|
2161
|
-
| \`accordion\` |
|
|
2162
|
-
| \`announcement\` | 80,
|
|
2163
|
-
| \`app-header\` | 32,
|
|
2164
|
-
| \`area-chart\` |
|
|
2165
|
-
| \`aura\` | 89,
|
|
2166
|
-
| \`avatar\` |
|
|
2167
|
-
| \`badge\` | 31,
|
|
2168
|
-
| \`bar-chart\` |
|
|
2169
|
-
| \`blockquote\` | 29,
|
|
2170
|
-
| \`breadcrumbs\` | 79,
|
|
2171
|
-
| \`button\` | 38,
|
|
2172
|
-
| \`button-group\` | 29,
|
|
2173
|
-
| \`callout\` | 77,
|
|
2174
|
-
| \`card\` | 31,
|
|
2175
|
-
| \`carousel\` | 92,
|
|
2176
|
-
| \`chat\` |
|
|
2177
|
-
| \`checkbox\` |
|
|
2178
|
-
| \`checkbox-group\` | 41,
|
|
2179
|
-
| \`code\` | 27,
|
|
2180
|
-
| \`code-block\` | 134,
|
|
2181
|
-
| \`color-input\` |
|
|
2182
|
-
| \`color-picker\` | 127,
|
|
2183
|
-
| \`combobox\` |
|
|
2184
|
-
| \`command\` | 112,
|
|
2185
|
-
| \`copy-button\` | 124,
|
|
2186
|
-
| \`data-table\` | 199,
|
|
2187
|
-
| \`date-input\` |
|
|
2188
|
-
| \`date-picker\` | 92,
|
|
2189
|
-
| \`description-list\` | 30,
|
|
2190
|
-
| \`dialog\` | 36,
|
|
2191
|
-
| \`divider\` | 30,
|
|
2192
|
-
| \`donut-chart\` |
|
|
2193
|
-
| \`drawer\` | 34,
|
|
2194
|
-
| \`drilldown\` | 86,
|
|
2195
|
-
| \`empty\` | 29,
|
|
2196
|
-
| \`file-input\` | 97,
|
|
2197
|
-
| \`filter-input\` |
|
|
2198
|
-
| \`flex\` | 29,
|
|
2199
|
-
| \`format-date\` | 32,
|
|
2200
|
-
| \`grid\` | 29,
|
|
2201
|
-
| \`heatmap\` |
|
|
2202
|
-
| \`icon\` | 75,
|
|
2203
|
-
| \`icon-button\` |
|
|
2204
|
-
| \`image\` |
|
|
2205
|
-
| \`input\` | 92,
|
|
2206
|
-
| \`kbd\` | 31,
|
|
2207
|
-
| \`legend\` |
|
|
2208
|
-
| \`line-chart\` |
|
|
2209
|
-
| \`list\` | 33,
|
|
2210
|
-
| \`listbox\` | 98,
|
|
2211
|
-
| \`loader\` | 31,
|
|
2212
|
-
| \`megamenu\` |
|
|
2213
|
-
| \`menu\` |
|
|
2214
|
-
| \`meter\` | 36,
|
|
2215
|
-
| \`navigation\` | 31,
|
|
2216
|
-
| \`notifications\` | 103,
|
|
2217
|
-
| \`number-input\` | 93,
|
|
2218
|
-
| \`object-inspector\` |
|
|
2219
|
-
| \`option\` | 33,
|
|
2220
|
-
| \`orb\` |
|
|
2221
|
-
| \`outline\` | 37,
|
|
2222
|
-
| \`pagination\` |
|
|
2223
|
-
| \`pin-input\` | 41,
|
|
2224
|
-
| \`popover\` | 57,
|
|
2225
|
-
| \`progress\` | 34,
|
|
2226
|
-
| \`qr-code\` | 41,
|
|
2227
|
-
| \`quote\` | 28,
|
|
2228
|
-
| \`radio\` | 44,
|
|
2229
|
-
| \`rating\` | 42,
|
|
2230
|
-
| \`sandbox\` | 62,
|
|
2231
|
-
| \`scatter-chart\` |
|
|
2232
|
-
| \`scroll-area\` | 32,
|
|
2233
|
-
| \`select\` | 135,
|
|
2234
|
-
| \`skeleton\` | 29,
|
|
2235
|
-
| \`skip-link\` | 29,
|
|
2236
|
-
| \`slider\` | 49,
|
|
2237
|
-
| \`sparkline\` |
|
|
2238
|
-
| \`speed-dial\` |
|
|
2239
|
-
| \`splitter\` | 43,
|
|
2240
|
-
| \`stat\` | 31,
|
|
2241
|
-
| \`steps\` |
|
|
2242
|
-
| \`switch\` | 39,
|
|
2243
|
-
| \`table\` | 87,
|
|
2244
|
-
| \`tabs\` | 41,
|
|
2245
|
-
| \`tag\` | 78,
|
|
2246
|
-
| \`text\` | 31,
|
|
2247
|
-
| \`textarea\` | 41,
|
|
2248
|
-
| \`time-input\` |
|
|
2249
|
-
| \`time-picker\` | 113,
|
|
2250
|
-
| \`timeline\` | 79,
|
|
2251
|
-
| \`toast\` |
|
|
2252
|
-
| \`toggle\` | 44,
|
|
2253
|
-
| \`toolbar\` | 31,
|
|
2254
|
-
| \`tooltip\` | 61,
|
|
2255
|
-
| \`tour\` |
|
|
2256
|
-
| \`tree\` |
|
|
2257
|
-
| \`trend\` | 78,
|
|
2258
|
-
| \`video\` |
|
|
2259
|
-
| \`video-playlist\` |
|
|
2260
|
-
| \`virtual-list\` | 34,
|
|
2161
|
+
| \`accordion\` | 82,762 | 27,356 | 22,401 | 6,204 | 1,568 | 1,338 |
|
|
2162
|
+
| \`announcement\` | 80,995 | 26,628 | 21,836 | 5,600 | 1,340 | 1,142 |
|
|
2163
|
+
| \`app-header\` | 32,427 | 10,476 | 9,212 | 4,883 | 1,163 | 968 |
|
|
2164
|
+
| \`area-chart\` | 80,323 | 26,487 | 23,399 | 18,496 | 4,929 | 4,147 |
|
|
2165
|
+
| \`aura\` | 89,189 | 31,163 | 26,949 | 60,878 | 21,424 | 18,457 |
|
|
2166
|
+
| \`avatar\` | 34,409 | 11,011 | 9,727 | 6,832 | 1,697 | 1,351 |
|
|
2167
|
+
| \`badge\` | 31,414 | 10,288 | 9,043 | 4,249 | 996 | 828 |
|
|
2168
|
+
| \`bar-chart\` | 87,181 | 27,717 | 24,531 | 25,437 | 6,198 | 5,331 |
|
|
2169
|
+
| \`blockquote\` | 29,319 | 9,829 | 8,657 | 2,032 | 528 | 505 |
|
|
2170
|
+
| \`breadcrumbs\` | 79,776 | 26,051 | 21,500 | 5,342 | 1,203 | 1,016 |
|
|
2171
|
+
| \`button\` | 38,885 | 11,901 | 10,473 | 9,212 | 1,947 | 1,551 |
|
|
2172
|
+
| \`button-group\` | 29,857 | 9,875 | 8,690 | 2,320 | 534 | 411 |
|
|
2173
|
+
| \`callout\` | 77,503 | 25,674 | 21,207 | 2,895 | 769 | 640 |
|
|
2174
|
+
| \`card\` | 31,448 | 10,334 | 9,098 | 3,915 | 979 | 860 |
|
|
2175
|
+
| \`carousel\` | 92,433 | 28,864 | 23,987 | 17,852 | 3,658 | 3,162 |
|
|
2176
|
+
| \`chat\` | 112,199 | 35,116 | 29,034 | 30,985 | 7,430 | 6,278 |
|
|
2177
|
+
| \`checkbox\` | 42,088 | 12,884 | 11,358 | 8,221 | 2,024 | 1,620 |
|
|
2178
|
+
| \`checkbox-group\` | 41,245 | 12,708 | 11,199 | 6,861 | 1,790 | 1,440 |
|
|
2179
|
+
| \`code\` | 27,877 | 9,374 | 8,245 | 1,511 | 377 | 325 |
|
|
2180
|
+
| \`code-block\` | 134,813 | 42,523 | 35,859 | 31,956 | 6,848 | 5,855 |
|
|
2181
|
+
| \`color-input\` | 165,160 | 48,159 | 40,650 | 57,016 | 11,387 | 9,796 |
|
|
2182
|
+
| \`color-picker\` | 127,914 | 37,014 | 30,782 | 45,628 | 9,459 | 8,175 |
|
|
2183
|
+
| \`combobox\` | 145,781 | 44,992 | 37,732 | 34,944 | 7,642 | 6,411 |
|
|
2184
|
+
| \`command\` | 112,788 | 34,558 | 28,464 | 27,922 | 6,499 | 5,518 |
|
|
2185
|
+
| \`copy-button\` | 124,512 | 40,110 | 33,766 | 21,660 | 4,581 | 3,934 |
|
|
2186
|
+
| \`data-table\` | 199,920 | 56,913 | 47,898 | 85,952 | 18,661 | 15,426 |
|
|
2187
|
+
| \`date-input\` | 143,950 | 44,598 | 37,534 | 33,467 | 7,430 | 6,409 |
|
|
2188
|
+
| \`date-picker\` | 92,617 | 29,855 | 24,619 | 15,350 | 3,862 | 3,237 |
|
|
2189
|
+
| \`description-list\` | 30,662 | 10,015 | 8,820 | 3,502 | 755 | 663 |
|
|
2190
|
+
| \`dialog\` | 36,168 | 11,545 | 10,164 | 7,037 | 1,827 | 1,529 |
|
|
2191
|
+
| \`divider\` | 30,516 | 10,132 | 8,904 | 3,229 | 796 | 600 |
|
|
2192
|
+
| \`donut-chart\` | 79,264 | 25,618 | 22,708 | 18,873 | 4,729 | 4,043 |
|
|
2193
|
+
| \`drawer\` | 34,458 | 11,066 | 9,766 | 5,616 | 1,373 | 1,263 |
|
|
2194
|
+
| \`drilldown\` | 86,524 | 28,240 | 23,139 | 9,460 | 2,320 | 1,926 |
|
|
2195
|
+
| \`empty\` | 29,624 | 9,916 | 8,736 | 2,087 | 555 | 438 |
|
|
2196
|
+
| \`file-input\` | 97,757 | 30,752 | 25,301 | 17,119 | 3,820 | 3,273 |
|
|
2197
|
+
| \`filter-input\` | 168,728 | 49,403 | 41,504 | 54,826 | 11,071 | 9,260 |
|
|
2198
|
+
| \`flex\` | 29,159 | 9,720 | 8,556 | 1,999 | 457 | 374 |
|
|
2199
|
+
| \`format-date\` | 32,442 | 10,807 | 9,583 | 3,497 | 859 | 661 |
|
|
2200
|
+
| \`grid\` | 29,686 | 9,885 | 8,688 | 2,522 | 626 | 513 |
|
|
2201
|
+
| \`heatmap\` | 78,600 | 25,420 | 22,523 | 18,035 | 4,500 | 3,732 |
|
|
2202
|
+
| \`icon\` | 75,616 | 25,081 | 20,653 | 1,539 | 356 | 237 |
|
|
2203
|
+
| \`icon-button\` | 39,206 | 11,829 | 10,391 | 9,537 | 1,869 | 1,525 |
|
|
2204
|
+
| \`image\` | 32,113 | 10,538 | 9,282 | 4,897 | 1,308 | 1,052 |
|
|
2205
|
+
| \`input\` | 92,126 | 29,547 | 24,219 | 10,787 | 2,575 | 2,070 |
|
|
2206
|
+
| \`kbd\` | 31,547 | 10,718 | 9,427 | 4,373 | 1,491 | 1,190 |
|
|
2207
|
+
| \`legend\` | 36,893 | 11,816 | 10,390 | 5,931 | 1,435 | 1,065 |
|
|
2208
|
+
| \`line-chart\` | 82,024 | 26,543 | 23,498 | 20,286 | 5,044 | 4,260 |
|
|
2209
|
+
| \`list\` | 33,300 | 10,627 | 9,364 | 5,779 | 1,300 | 1,069 |
|
|
2210
|
+
| \`listbox\` | 98,345 | 31,661 | 25,897 | 14,974 | 3,931 | 3,244 |
|
|
2211
|
+
| \`loader\` | 31,587 | 10,380 | 9,138 | 4,051 | 987 | 825 |
|
|
2212
|
+
| \`megamenu\` | 62,555 | 21,080 | 18,678 | 9,810 | 2,418 | 1,994 |
|
|
2213
|
+
| \`menu\` | 120,339 | 39,766 | 33,330 | 16,258 | 3,778 | 3,103 |
|
|
2214
|
+
| \`meter\` | 36,691 | 11,542 | 10,206 | 9,161 | 2,122 | 1,816 |
|
|
2215
|
+
| \`navigation\` | 31,440 | 10,521 | 9,269 | 2,726 | 771 | 542 |
|
|
2216
|
+
| \`notifications\` | 103,840 | 31,846 | 26,318 | 24,840 | 5,159 | 4,327 |
|
|
2217
|
+
| \`number-input\` | 93,200 | 30,010 | 24,592 | 11,944 | 3,026 | 2,502 |
|
|
2218
|
+
| \`object-inspector\` | 140,283 | 44,629 | 37,627 | 32,373 | 7,303 | 6,207 |
|
|
2219
|
+
| \`option\` | 33,478 | 10,880 | 9,583 | 5,948 | 1,484 | 1,183 |
|
|
2220
|
+
| \`orb\` | 37,014 | 12,927 | 11,419 | 9,443 | 3,479 | 2,965 |
|
|
2221
|
+
| \`outline\` | 37,123 | 12,040 | 10,634 | 8,356 | 2,222 | 1,778 |
|
|
2222
|
+
| \`pagination\` | 152,149 | 45,951 | 38,557 | 43,913 | 9,117 | 7,676 |
|
|
2223
|
+
| \`pin-input\` | 41,881 | 13,108 | 11,536 | 8,092 | 2,270 | 1,804 |
|
|
2224
|
+
| \`popover\` | 57,511 | 19,891 | 17,564 | 4,519 | 1,188 | 1,007 |
|
|
2225
|
+
| \`progress\` | 34,491 | 11,067 | 9,800 | 6,962 | 1,644 | 1,514 |
|
|
2226
|
+
| \`qr-code\` | 41,772 | 14,351 | 12,660 | 14,626 | 5,096 | 4,417 |
|
|
2227
|
+
| \`quote\` | 28,359 | 9,524 | 8,394 | 1,191 | 297 | 253 |
|
|
2228
|
+
| \`radio\` | 44,926 | 13,173 | 11,636 | 10,686 | 2,251 | 1,880 |
|
|
2229
|
+
| \`rating\` | 42,552 | 13,534 | 11,957 | 8,745 | 2,543 | 2,094 |
|
|
2230
|
+
| \`sandbox\` | 62,700 | 17,137 | 15,196 | 34,886 | 7,632 | 6,492 |
|
|
2231
|
+
| \`scatter-chart\` | 80,468 | 26,234 | 23,196 | 19,512 | 5,101 | 4,232 |
|
|
2232
|
+
| \`scroll-area\` | 32,709 | 10,661 | 9,356 | 5,488 | 1,392 | 1,109 |
|
|
2233
|
+
| \`select\` | 135,908 | 42,870 | 35,975 | 27,798 | 6,213 | 5,124 |
|
|
2234
|
+
| \`skeleton\` | 29,411 | 9,862 | 8,669 | 2,242 | 605 | 512 |
|
|
2235
|
+
| \`skip-link\` | 29,839 | 10,034 | 8,799 | 2,672 | 773 | 545 |
|
|
2236
|
+
| \`slider\` | 49,029 | 14,154 | 12,545 | 14,996 | 3,195 | 2,757 |
|
|
2237
|
+
| \`sparkline\` | 38,266 | 12,667 | 11,175 | 6,275 | 1,740 | 1,420 |
|
|
2238
|
+
| \`speed-dial\` | 112,011 | 37,281 | 31,281 | 11,187 | 2,350 | 1,919 |
|
|
2239
|
+
| \`splitter\` | 43,751 | 12,980 | 11,485 | 16,217 | 3,572 | 3,104 |
|
|
2240
|
+
| \`stat\` | 31,314 | 10,122 | 8,921 | 3,783 | 789 | 665 |
|
|
2241
|
+
| \`steps\` | 98,120 | 30,140 | 24,834 | 19,904 | 3,899 | 3,271 |
|
|
2242
|
+
| \`switch\` | 39,896 | 12,465 | 10,991 | 5,908 | 1,580 | 1,294 |
|
|
2243
|
+
| \`table\` | 87,680 | 28,346 | 23,220 | 11,721 | 2,769 | 2,273 |
|
|
2244
|
+
| \`tabs\` | 41,251 | 12,597 | 11,107 | 10,325 | 2,204 | 1,803 |
|
|
2245
|
+
| \`tag\` | 78,992 | 26,103 | 21,419 | 4,086 | 1,024 | 936 |
|
|
2246
|
+
| \`text\` | 31,145 | 10,009 | 8,780 | 3,987 | 805 | 621 |
|
|
2247
|
+
| \`textarea\` | 41,611 | 12,862 | 11,324 | 7,341 | 1,933 | 1,666 |
|
|
2248
|
+
| \`time-input\` | 161,718 | 48,407 | 40,701 | 48,315 | 10,344 | 8,717 |
|
|
2249
|
+
| \`time-picker\` | 113,587 | 35,202 | 29,075 | 29,674 | 7,169 | 6,027 |
|
|
2250
|
+
| \`timeline\` | 79,598 | 25,983 | 21,480 | 5,160 | 1,145 | 920 |
|
|
2251
|
+
| \`toast\` | 87,052 | 27,992 | 23,036 | 11,526 | 2,573 | 2,181 |
|
|
2252
|
+
| \`toggle\` | 44,296 | 13,506 | 11,931 | 8,514 | 2,089 | 1,715 |
|
|
2253
|
+
| \`toolbar\` | 31,375 | 10,433 | 9,180 | 4,207 | 1,234 | 864 |
|
|
2254
|
+
| \`tooltip\` | 61,965 | 20,991 | 18,605 | 9,462 | 2,434 | 1,918 |
|
|
2255
|
+
| \`tour\` | 74,099 | 23,197 | 20,557 | 20,376 | 4,255 | 3,610 |
|
|
2256
|
+
| \`tree\` | 91,070 | 29,520 | 24,267 | 12,236 | 3,154 | 2,671 |
|
|
2257
|
+
| \`trend\` | 78,169 | 25,672 | 21,165 | 4,103 | 914 | 790 |
|
|
2258
|
+
| \`video\` | 156,519 | 47,663 | 40,287 | 52,185 | 11,391 | 9,971 |
|
|
2259
|
+
| \`video-playlist\` | 134,257 | 42,259 | 35,474 | 28,770 | 5,911 | 4,972 |
|
|
2260
|
+
| \`virtual-list\` | 34,731 | 11,622 | 10,269 | 3,259 | 962 | 758 |
|
|
2261
2261
|
|
|
2262
2262
|
## What lands in \`node_modules\`
|
|
2263
2263
|
|
|
@@ -2269,12 +2269,12 @@ column is what was removed rather than part of what remains.
|
|
|
2269
2269
|
|
|
2270
2270
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
2271
2271
|
|---|---|---|---|---|
|
|
2272
|
-
| \`@fusion.dev/helix-core\` |
|
|
2273
|
-
| \`@fusion.dev/helix-headless\` | 10,
|
|
2272
|
+
| \`@fusion.dev/helix-core\` | 818,607 | 121 | 180,874 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
2273
|
+
| \`@fusion.dev/helix-headless\` | 10,597,865 | 472 | 837,872 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
2274
2274
|
| \`@fusion.dev/helix-icons\` | 65,943 | 11 | 20,928 | none |
|
|
2275
|
-
| \`@fusion.dev/helix-styles\` |
|
|
2275
|
+
| \`@fusion.dev/helix-styles\` | 101,191 | 6 | 0 | none |
|
|
2276
2276
|
| \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
|
|
2277
|
-
| \`@fusion.dev/helix\` | 11,
|
|
2277
|
+
| \`@fusion.dev/helix\` | 11,559,253 | 798 | 332,506 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
2278
2278
|
|
|
2279
2279
|
## Not measured yet
|
|
2280
2280
|
|
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.
|
|
4
|
+
"version": "0.30.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Ross Sheppard <ross.sheppard@fusion.dev>",
|
|
7
7
|
"repository": {
|
|
@@ -35,8 +35,11 @@
|
|
|
35
35
|
},
|
|
36
36
|
"bugs": "https://github.com/project-fusion/fusion/issues",
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@fusion.dev/helix-cem": "0.
|
|
39
|
-
"@fusion.dev/
|
|
38
|
+
"@fusion.dev/helix-cem": "0.30.1",
|
|
39
|
+
"@fusion.dev/helix-testing": "0.30.1",
|
|
40
|
+
"@fusion.dev/scripts": "0.0.0-dev",
|
|
41
|
+
"lit": "^3.2.1",
|
|
42
|
+
"playwright": "^1.62.1"
|
|
40
43
|
},
|
|
41
44
|
"homepage": "https://fusion.dev",
|
|
42
45
|
"keywords": [
|