@fusion.dev/helix-docs 0.100.0 → 0.102.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.
- package/content/building-on-the-headless-tier.mdx +1 -1
- package/content/metrics.mdx +219 -215
- package/dist/sources.generated.js +220 -216
- package/package.json +3 -3
|
@@ -316,7 +316,7 @@ a combobox that appears not to open.
|
|
|
316
316
|
|
|
317
317
|
[//]: # (renders)
|
|
318
318
|
|
|
319
|
-
**27 of the
|
|
319
|
+
**27 of the 96 headless families interpolate another family's tag**, across 20 distinct children.
|
|
320
320
|
|
|
321
321
|
| Family | Renders |
|
|
322
322
|
|---|---|
|
|
@@ -2113,7 +2113,7 @@ nobody ever downloads this floor on its own.
|
|
|
2113
2113
|
|
|
2114
2114
|
| | Raw | Gzip | Brotli |
|
|
2115
2115
|
|---|---|---|---|
|
|
2116
|
-
| Lit and \`@fusion.dev/helix-core\` | 156,
|
|
2116
|
+
| Lit and \`@fusion.dev/helix-core\` | 156,840 | 51,826 | 43,851 |
|
|
2117
2117
|
|
|
2118
2118
|
## Whole packages
|
|
2119
2119
|
|
|
@@ -2124,11 +2124,11 @@ repository does that. The per-component tables are what a page pays.
|
|
|
2124
2124
|
|
|
2125
2125
|
| Package | Raw | Gzip | Brotli | |
|
|
2126
2126
|
|---|---|---|---|---|
|
|
2127
|
-
| \`@fusion.dev/helix-core\` | 156,
|
|
2128
|
-
| \`@fusion.dev/helix-headless\` |
|
|
2127
|
+
| \`@fusion.dev/helix-core\` | 156,394 | 51,458 | 43,682 | Element base class, mixins, decorators, floating positioning. |
|
|
2128
|
+
| \`@fusion.dev/helix-headless\` | 613,992 | 158,866 | 123,649 | Every headless family, which is what the barrel means. |
|
|
2129
2129
|
| \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
|
|
2130
2130
|
| \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
|
|
2131
|
-
| \`@fusion.dev/helix\` | 1,
|
|
2131
|
+
| \`@fusion.dev/helix\` | 1,096,859 | 256,253 | 188,151 | Every styled family. |
|
|
2132
2132
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
|
|
2133
2133
|
|
|
2134
2134
|
## The stylesheets
|
|
@@ -2142,20 +2142,20 @@ is the whole cost of adopting the base layer on its own.
|
|
|
2142
2142
|
| File | Raw | Gzip | Brotli | |
|
|
2143
2143
|
|---|---|---|---|---|
|
|
2144
2144
|
| \`base.css\` | 30,672 | 4,430 | 3,844 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
|
|
2145
|
-
| \`elements.css\` |
|
|
2145
|
+
| \`elements.css\` | 8,007 | 1,361 | 1,218 | Hides each element until its definition loads, generated from the tags in \`@fusion.dev/helix\`. |
|
|
2146
2146
|
| \`helix.css\` | 207 | 148 | 118 | The four above in one import, in the order they have to be in. |
|
|
2147
2147
|
| \`primitives.css\` | 6,390 | 1,260 | 1,084 | The primitive layer. Private, shipped because \`tokens.css\` resolves into it. |
|
|
2148
2148
|
| \`tokens.css\` | 20,987 | 2,567 | 2,138 | The 191 semantic tokens. Nothing paints without this. |
|
|
2149
2149
|
|
|
2150
2150
|
## What the numbers say
|
|
2151
2151
|
|
|
2152
|
-
**Most of a first component is the runtime under it.** The median styled family is
|
|
2152
|
+
**Most of a first component is the runtime under it.** The median styled family is 15,993 bytes gzipped alone and adds 2,200 to a page that already has Helix on it, so 86 percent of the first one is shared and 14 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.
|
|
2153
2153
|
|
|
2154
|
-
Across the tier: the cheapest is \`code\` at 9,
|
|
2154
|
+
Across the tier: the cheapest is \`code\` at 9,497 gzipped alone, the dearest \`data-table\` at 59,317, over 102 components. Every family at once is 256,253.
|
|
2155
2155
|
|
|
2156
|
-
**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
|
|
2156
|
+
**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 158,866 bytes gzipped whatever else the page does, which is 10 times the median family measured above. The styled tier imports the family it extends instead, all 102 of them, and the check refuses the shape rather than the package name, so the rule follows \`sideEffects\` wherever it goes.
|
|
2157
2157
|
|
|
2158
|
-
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,
|
|
2158
|
+
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,026 bytes gzipped alone.
|
|
2159
2159
|
|
|
2160
2160
|
## Against other systems
|
|
2161
2161
|
|
|
@@ -2167,43 +2167,43 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
|
|
|
2167
2167
|
|
|
2168
2168
|
| Component | System | Raw | Gzip | Brotli |
|
|
2169
2169
|
|---|---|---|---|---|
|
|
2170
|
-
| \`button\` | **Helix** | 39,
|
|
2170
|
+
| \`button\` | **Helix** | 39,438 | 12,051 | 10,634 |
|
|
2171
2171
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
2172
2172
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
2173
2173
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
2174
2174
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
2175
|
-
| \`checkbox\` | **Helix** |
|
|
2175
|
+
| \`checkbox\` | **Helix** | 43,297 | 13,113 | 11,529 |
|
|
2176
2176
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
2177
2177
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
2178
2178
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
2179
2179
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
2180
|
-
| \`dialog\` | **Helix** | 36,
|
|
2180
|
+
| \`dialog\` | **Helix** | 36,693 | 11,680 | 10,323 |
|
|
2181
2181
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
2182
2182
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
2183
2183
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
2184
2184
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
2185
|
-
| \`radio\` | **Helix** | 46,
|
|
2185
|
+
| \`radio\` | **Helix** | 46,815 | 13,506 | 11,906 |
|
|
2186
2186
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
2187
2187
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
2188
2188
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
2189
2189
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
2190
|
-
| \`switch\` | **Helix** | 40,
|
|
2190
|
+
| \`switch\` | **Helix** | 40,673 | 12,699 | 11,200 |
|
|
2191
2191
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
2192
2192
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
2193
2193
|
| | Shoelace | 37,833 | 11,814 | 10,568 |
|
|
2194
2194
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
2195
|
-
| \`tabs\` | **Helix** | 42,
|
|
2195
|
+
| \`tabs\` | **Helix** | 42,675 | 12,898 | 11,372 |
|
|
2196
2196
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
2197
2197
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
2198
2198
|
| | Shoelace | 54,573 | 17,140 | 15,068 |
|
|
2199
2199
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
2200
|
-
| \`tooltip\` | **Helix** | 63,
|
|
2200
|
+
| \`tooltip\` | **Helix** | 63,507 | 21,496 | 19,065 |
|
|
2201
2201
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
2202
2202
|
| | Material Web | | not shipped | |
|
|
2203
2203
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
2204
2204
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
2205
2205
|
|
|
2206
|
-
**Where Helix loses**, which is the half of a comparison table worth reading: \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, by 2,
|
|
2206
|
+
**Where Helix loses**, which is the half of a comparison table worth reading: \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, by 2,846 bytes gzipped. 7 of 28 peer measurements come in under ours.
|
|
2207
2207
|
|
|
2208
2208
|
- **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
|
|
2209
2209
|
- **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
|
|
@@ -2248,100 +2248,102 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2248
2248
|
|
|
2249
2249
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
2250
2250
|
|---|---|---|---|---|---|---|
|
|
2251
|
-
| \`accordion\` |
|
|
2252
|
-
| \`announcement\` | 77,
|
|
2253
|
-
| \`app-header\` |
|
|
2254
|
-
| \`area-chart\` |
|
|
2255
|
-
| \`avatar\` |
|
|
2256
|
-
| \`badge\` | 28,
|
|
2257
|
-
| \`bar-chart\` | 76,
|
|
2258
|
-
| \`blockquote\` | 28,
|
|
2259
|
-
| \`breadcrumbs\` | 76,
|
|
2260
|
-
| \`button\` | 33,
|
|
2261
|
-
| \`button-group\` | 28,
|
|
2262
|
-
| \`callout\` | 75,
|
|
2263
|
-
| \`card\` | 28,
|
|
2264
|
-
| \`carousel\` |
|
|
2265
|
-
| \`chat\` |
|
|
2266
|
-
| \`checkbox\` | 36,
|
|
2267
|
-
| \`checkbox-group\` | 39,
|
|
2268
|
-
| \`code\` |
|
|
2269
|
-
| \`code-block\` | 121,
|
|
2270
|
-
| \`color-input\` | 135,
|
|
2271
|
-
| \`color-picker\` |
|
|
2272
|
-
| \`combobox\` | 132,
|
|
2273
|
-
| \`command\` |
|
|
2274
|
-
| \`copy-button\` |
|
|
2275
|
-
| \`data-table\` | 170,
|
|
2276
|
-
| \`date-input\` | 130,
|
|
2277
|
-
| \`date-picker\` | 87,
|
|
2278
|
-
| \`description-list\` | 28,
|
|
2279
|
-
| \`dialog\` |
|
|
2280
|
-
| \`divider\` |
|
|
2281
|
-
| \`donut-chart\` | 72,
|
|
2282
|
-
| \`drawer\` |
|
|
2283
|
-
| \`drilldown\` | 84,
|
|
2284
|
-
| \`empty\` | 28,
|
|
2285
|
-
| \`file-input\` | 87,
|
|
2286
|
-
| \`filter-input\` | 143,
|
|
2287
|
-
| \`format-date\` |
|
|
2288
|
-
| \`heatmap\` |
|
|
2289
|
-
| \`icon\` | 75,
|
|
2290
|
-
| \`icon-button\` | 33,
|
|
2291
|
-
| \`image\` | 30,
|
|
2292
|
-
| \`input\` | 86,
|
|
2293
|
-
| \`kbd\` | 30,
|
|
2294
|
-
| \`legend\` | 32,
|
|
2295
|
-
| \`
|
|
2296
|
-
| \`
|
|
2297
|
-
| \`
|
|
2298
|
-
| \`
|
|
2299
|
-
| \`
|
|
2300
|
-
| \`
|
|
2301
|
-
| \`
|
|
2302
|
-
| \`
|
|
2303
|
-
| \`
|
|
2304
|
-
| \`
|
|
2305
|
-
| \`
|
|
2306
|
-
| \`
|
|
2307
|
-
| \`
|
|
2308
|
-
| \`
|
|
2309
|
-
| \`
|
|
2310
|
-
| \`
|
|
2311
|
-
| \`
|
|
2312
|
-
| \`
|
|
2313
|
-
| \`
|
|
2314
|
-
| \`
|
|
2315
|
-
| \`
|
|
2316
|
-
| \`
|
|
2317
|
-
| \`
|
|
2318
|
-
| \`
|
|
2319
|
-
| \`
|
|
2320
|
-
| \`
|
|
2321
|
-
| \`
|
|
2322
|
-
| \`
|
|
2323
|
-
| \`
|
|
2324
|
-
| \`
|
|
2325
|
-
| \`
|
|
2326
|
-
| \`
|
|
2327
|
-
| \`
|
|
2328
|
-
| \`
|
|
2329
|
-
| \`
|
|
2330
|
-
| \`
|
|
2331
|
-
| \`
|
|
2332
|
-
| \`
|
|
2333
|
-
| \`
|
|
2334
|
-
| \`
|
|
2335
|
-
| \`
|
|
2336
|
-
| \`
|
|
2337
|
-
| \`
|
|
2338
|
-
| \`
|
|
2339
|
-
| \`
|
|
2340
|
-
| \`
|
|
2341
|
-
| \`
|
|
2342
|
-
| \`
|
|
2343
|
-
| \`
|
|
2344
|
-
| \`
|
|
2251
|
+
| \`accordion\` | 80,084 | 26,757 | 21,876 | 2,875 | 749 | 650 |
|
|
2252
|
+
| \`announcement\` | 77,373 | 25,841 | 21,168 | 1,231 | 324 | 373 |
|
|
2253
|
+
| \`app-header\` | 29,258 | 9,774 | 8,612 | 1,248 | 314 | 256 |
|
|
2254
|
+
| \`area-chart\` | 75,103 | 25,679 | 22,714 | 10,926 | 3,378 | 2,880 |
|
|
2255
|
+
| \`avatar\` | 31,307 | 10,370 | 9,172 | 3,257 | 893 | 721 |
|
|
2256
|
+
| \`badge\` | 28,793 | 9,703 | 8,548 | 1,162 | 302 | 308 |
|
|
2257
|
+
| \`bar-chart\` | 76,754 | 26,042 | 23,054 | 12,568 | 3,744 | 3,121 |
|
|
2258
|
+
| \`blockquote\` | 28,808 | 9,733 | 8,556 | 774 | 161 | 210 |
|
|
2259
|
+
| \`breadcrumbs\` | 76,869 | 25,406 | 20,937 | 1,965 | 448 | 454 |
|
|
2260
|
+
| \`button\` | 33,345 | 10,931 | 9,645 | 3,095 | 795 | 700 |
|
|
2261
|
+
| \`button-group\` | 28,664 | 9,618 | 8,465 | 661 | 141 | 196 |
|
|
2262
|
+
| \`callout\` | 75,989 | 25,266 | 20,871 | 914 | 249 | 317 |
|
|
2263
|
+
| \`card\` | 28,698 | 9,632 | 8,480 | 694 | 150 | 145 |
|
|
2264
|
+
| \`carousel\` | 85,236 | 28,104 | 23,168 | 9,997 | 2,640 | 2,253 |
|
|
2265
|
+
| \`chat\` | 99,276 | 33,049 | 27,207 | 17,331 | 5,070 | 4,257 |
|
|
2266
|
+
| \`checkbox\` | 36,788 | 11,693 | 10,320 | 2,309 | 676 | 520 |
|
|
2267
|
+
| \`checkbox-group\` | 39,810 | 12,368 | 10,872 | 4,812 | 1,284 | 1,040 |
|
|
2268
|
+
| \`code\` | 27,283 | 9,203 | 8,103 | 451 | 60 | 146 |
|
|
2269
|
+
| \`code-block\` | 121,515 | 40,468 | 34,129 | 17,122 | 4,505 | 3,883 |
|
|
2270
|
+
| \`color-input\` | 135,648 | 43,876 | 37,013 | 23,083 | 5,519 | 4,702 |
|
|
2271
|
+
| \`color-picker\` | 103,165 | 33,201 | 27,386 | 17,448 | 4,290 | 3,694 |
|
|
2272
|
+
| \`combobox\` | 132,771 | 42,823 | 35,920 | 20,384 | 5,094 | 4,197 |
|
|
2273
|
+
| \`command\` | 103,163 | 32,749 | 26,839 | 17,705 | 4,535 | 3,775 |
|
|
2274
|
+
| \`copy-button\` | 116,113 | 38,844 | 32,660 | 11,718 | 2,945 | 2,489 |
|
|
2275
|
+
| \`data-table\` | 170,848 | 52,840 | 44,617 | 54,811 | 13,945 | 11,594 |
|
|
2276
|
+
| \`date-input\` | 130,586 | 42,300 | 35,570 | 18,287 | 4,694 | 3,967 |
|
|
2277
|
+
| \`date-picker\` | 87,715 | 28,988 | 23,820 | 9,780 | 2,751 | 2,310 |
|
|
2278
|
+
| \`description-list\` | 28,767 | 9,570 | 8,423 | 1,132 | 185 | 189 |
|
|
2279
|
+
| \`dialog\` | 32,316 | 10,661 | 9,390 | 2,717 | 798 | 672 |
|
|
2280
|
+
| \`divider\` | 29,014 | 9,808 | 8,621 | 981 | 234 | 274 |
|
|
2281
|
+
| \`donut-chart\` | 72,886 | 24,651 | 21,814 | 10,137 | 2,984 | 2,518 |
|
|
2282
|
+
| \`drawer\` | 31,069 | 10,294 | 9,080 | 1,761 | 473 | 462 |
|
|
2283
|
+
| \`drilldown\` | 84,359 | 28,055 | 22,916 | 5,620 | 1,512 | 1,252 |
|
|
2284
|
+
| \`empty\` | 28,820 | 9,673 | 8,552 | 816 | 186 | 249 |
|
|
2285
|
+
| \`file-input\` | 87,479 | 28,848 | 23,598 | 6,125 | 1,771 | 1,505 |
|
|
2286
|
+
| \`filter-input\` | 143,776 | 45,769 | 38,476 | 27,857 | 6,738 | 5,704 |
|
|
2287
|
+
| \`format-date\` | 32,277 | 10,786 | 9,534 | 2,867 | 702 | 671 |
|
|
2288
|
+
| \`heatmap\` | 74,108 | 24,877 | 22,004 | 10,796 | 3,044 | 2,473 |
|
|
2289
|
+
| \`icon\` | 75,556 | 25,091 | 20,691 | 1,018 | 248 | 271 |
|
|
2290
|
+
| \`icon-button\` | 33,744 | 10,965 | 9,643 | 3,494 | 837 | 720 |
|
|
2291
|
+
| \`image\` | 30,837 | 10,169 | 8,951 | 3,156 | 830 | 692 |
|
|
2292
|
+
| \`input\` | 86,701 | 28,411 | 23,289 | 4,742 | 1,321 | 1,041 |
|
|
2293
|
+
| \`kbd\` | 30,618 | 10,393 | 9,153 | 2,976 | 1,032 | 887 |
|
|
2294
|
+
| \`legend\` | 32,670 | 10,897 | 9,618 | 1,080 | 296 | 308 |
|
|
2295
|
+
| \`lightbox\` | 36,565 | 11,686 | 10,289 | 4,740 | 1,300 | 1,121 |
|
|
2296
|
+
| \`line-chart\` | 74,684 | 25,371 | 22,483 | 10,591 | 3,111 | 2,607 |
|
|
2297
|
+
| \`list\` | 29,720 | 9,805 | 8,638 | 1,726 | 337 | 288 |
|
|
2298
|
+
| \`listbox\` | 94,914 | 30,905 | 25,235 | 10,942 | 3,006 | 2,479 |
|
|
2299
|
+
| \`loader\` | 28,904 | 9,738 | 8,589 | 900 | 225 | 246 |
|
|
2300
|
+
| \`map\` | 33,204 | 10,938 | 9,628 | 4,052 | 1,039 | 909 |
|
|
2301
|
+
| \`megamenu\` | 59,112 | 20,409 | 18,083 | 4,941 | 1,357 | 1,172 |
|
|
2302
|
+
| \`menu\` | 114,483 | 38,633 | 32,346 | 8,816 | 2,260 | 1,852 |
|
|
2303
|
+
| \`meter\` | 32,094 | 10,588 | 9,348 | 4,099 | 1,050 | 969 |
|
|
2304
|
+
| \`navigation\` | 30,598 | 10,270 | 9,070 | 1,361 | 361 | 281 |
|
|
2305
|
+
| \`notifications\` | 91,907 | 29,750 | 24,439 | 11,341 | 2,680 | 2,284 |
|
|
2306
|
+
| \`number-input\` | 89,062 | 29,050 | 23,768 | 7,190 | 1,934 | 1,525 |
|
|
2307
|
+
| \`object-inspector\` | 128,849 | 42,977 | 36,178 | 19,158 | 5,160 | 4,393 |
|
|
2308
|
+
| \`option\` | 30,934 | 10,164 | 8,995 | 2,933 | 649 | 551 |
|
|
2309
|
+
| \`outline\` | 34,033 | 11,442 | 10,102 | 4,590 | 1,409 | 1,131 |
|
|
2310
|
+
| \`pagination\` | 136,988 | 43,549 | 36,535 | 27,201 | 6,354 | 5,334 |
|
|
2311
|
+
| \`pin-input\` | 39,438 | 12,529 | 11,056 | 5,038 | 1,509 | 1,188 |
|
|
2312
|
+
| \`popover\` | 56,318 | 19,643 | 17,360 | 1,899 | 520 | 473 |
|
|
2313
|
+
| \`progress\` | 29,945 | 10,009 | 8,812 | 1,951 | 496 | 525 |
|
|
2314
|
+
| \`qr-code\` | 40,594 | 14,052 | 12,388 | 12,983 | 4,632 | 4,143 |
|
|
2315
|
+
| \`quote\` | 28,187 | 9,490 | 8,353 | 552 | 118 | 188 |
|
|
2316
|
+
| \`radio\` | 38,618 | 12,022 | 10,602 | 2,822 | 754 | 514 |
|
|
2317
|
+
| \`rating\` | 41,013 | 13,049 | 11,520 | 6,527 | 1,886 | 1,589 |
|
|
2318
|
+
| \`scatter-chart\` | 74,588 | 25,297 | 22,320 | 11,272 | 3,398 | 2,809 |
|
|
2319
|
+
| \`scroll-area\` | 30,430 | 10,175 | 8,932 | 2,743 | 792 | 654 |
|
|
2320
|
+
| \`select\` | 125,156 | 41,008 | 34,352 | 15,495 | 3,955 | 3,219 |
|
|
2321
|
+
| \`skeleton\` | 27,376 | 9,237 | 8,150 | 544 | 94 | 161 |
|
|
2322
|
+
| \`skip-link\` | 28,966 | 9,789 | 8,634 | 1,178 | 358 | 353 |
|
|
2323
|
+
| \`slider\` | 39,829 | 12,539 | 11,068 | 5,185 | 1,418 | 1,194 |
|
|
2324
|
+
| \`sparkline\` | 35,089 | 11,914 | 10,498 | 2,387 | 793 | 669 |
|
|
2325
|
+
| \`speed-dial\` | 106,171 | 36,290 | 30,494 | 3,745 | 978 | 687 |
|
|
2326
|
+
| \`splitter\` | 38,264 | 12,193 | 10,812 | 10,080 | 2,577 | 2,257 |
|
|
2327
|
+
| \`stat\` | 29,152 | 9,668 | 8,517 | 1,148 | 195 | 189 |
|
|
2328
|
+
| \`steps\` | 84,976 | 27,832 | 22,908 | 6,177 | 1,499 | 1,234 |
|
|
2329
|
+
| \`switch\` | 36,405 | 11,657 | 10,283 | 1,524 | 478 | 380 |
|
|
2330
|
+
| \`table\` | 85,918 | 28,471 | 23,352 | 9,071 | 2,489 | 2,099 |
|
|
2331
|
+
| \`tabs\` | 36,439 | 11,626 | 10,250 | 3,925 | 912 | 716 |
|
|
2332
|
+
| \`tag\` | 76,269 | 25,360 | 20,789 | 895 | 195 | 241 |
|
|
2333
|
+
| \`textarea\` | 38,967 | 12,241 | 10,758 | 3,996 | 1,116 | 869 |
|
|
2334
|
+
| \`time-input\` | 143,232 | 45,560 | 38,306 | 27,784 | 6,857 | 5,711 |
|
|
2335
|
+
| \`time-picker\` | 103,515 | 33,391 | 27,452 | 18,573 | 4,983 | 4,192 |
|
|
2336
|
+
| \`timeline\` | 76,718 | 25,323 | 20,894 | 1,809 | 384 | 394 |
|
|
2337
|
+
| \`toast\` | 80,002 | 26,449 | 21,713 | 4,005 | 963 | 753 |
|
|
2338
|
+
| \`toggle\` | 40,653 | 12,622 | 11,151 | 3,342 | 884 | 810 |
|
|
2339
|
+
| \`toolbar\` | 30,754 | 10,341 | 9,126 | 2,933 | 930 | 738 |
|
|
2340
|
+
| \`tooltip\` | 60,429 | 20,743 | 18,406 | 6,292 | 1,757 | 1,443 |
|
|
2341
|
+
| \`tour\` | 66,181 | 22,102 | 19,591 | 10,924 | 2,737 | 2,302 |
|
|
2342
|
+
| \`tree\` | 86,761 | 28,609 | 23,385 | 7,191 | 1,985 | 1,550 |
|
|
2343
|
+
| \`trend\` | 75,596 | 25,121 | 20,725 | 1,056 | 278 | 334 |
|
|
2344
|
+
| \`video\` | 140,194 | 45,095 | 38,039 | 30,446 | 7,331 | 6,371 |
|
|
2345
|
+
| \`video-playlist\` | 121,966 | 40,223 | 33,766 | 14,893 | 3,493 | 2,918 |
|
|
2346
|
+
| \`virtual-list\` | 34,565 | 11,605 | 10,245 | 2,413 | 745 | 657 |
|
|
2345
2347
|
|
|
2346
2348
|
### Styled tier
|
|
2347
2349
|
|
|
@@ -2349,106 +2351,108 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2349
2351
|
|
|
2350
2352
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
2351
2353
|
|---|---|---|---|---|---|---|
|
|
2352
|
-
| \`accordion\` | 83,
|
|
2353
|
-
| \`announcement\` | 81,
|
|
2354
|
-
| \`app-header\` |
|
|
2355
|
-
| \`area-chart\` | 82,
|
|
2356
|
-
| \`aura\` |
|
|
2357
|
-
| \`avatar\` | 34,
|
|
2358
|
-
| \`badge\` | 31,
|
|
2359
|
-
| \`bar-chart\` | 89,
|
|
2360
|
-
| \`blockquote\` | 29,
|
|
2361
|
-
| \`breadcrumbs\` | 80,
|
|
2362
|
-
| \`button\` | 39,
|
|
2363
|
-
| \`button-group\` |
|
|
2364
|
-
| \`callout\` | 77,
|
|
2365
|
-
| \`card\` | 31,
|
|
2366
|
-
| \`carousel\` |
|
|
2367
|
-
| \`chat\` | 113,
|
|
2368
|
-
| \`checkbox\` |
|
|
2369
|
-
| \`checkbox-group\` | 41,
|
|
2370
|
-
| \`code\` | 28,
|
|
2371
|
-
| \`code-block\` | 137,
|
|
2372
|
-
| \`color-input\` |
|
|
2373
|
-
| \`color-picker\` |
|
|
2374
|
-
| \`combobox\` | 147,
|
|
2375
|
-
| \`command\` | 113,
|
|
2376
|
-
| \`copy-button\` |
|
|
2377
|
-
| \`data-table\` |
|
|
2378
|
-
| \`date-input\` | 146,
|
|
2379
|
-
| \`date-picker\` |
|
|
2380
|
-
| \`description-list\` |
|
|
2381
|
-
| \`dialog\` | 36,
|
|
2382
|
-
| \`divider\` |
|
|
2383
|
-
| \`donut-chart\` | 81,
|
|
2384
|
-
| \`drawer\` |
|
|
2385
|
-
| \`drilldown\` | 88,
|
|
2386
|
-
| \`empty\` |
|
|
2387
|
-
| \`file-input\` | 98,
|
|
2388
|
-
| \`filter-input\` | 171,
|
|
2389
|
-
| \`flex\` | 29,
|
|
2390
|
-
| \`format-date\` | 32,
|
|
2391
|
-
| \`grid\` |
|
|
2392
|
-
| \`heatmap\` | 80,
|
|
2393
|
-
| \`icon\` |
|
|
2394
|
-
| \`icon-button\` | 39,
|
|
2395
|
-
| \`image\` | 32,
|
|
2396
|
-
| \`input\` | 92,
|
|
2397
|
-
| \`kbd\` |
|
|
2398
|
-
| \`legend\` | 37,
|
|
2399
|
-
| \`
|
|
2400
|
-
| \`
|
|
2401
|
-
| \`
|
|
2402
|
-
| \`
|
|
2403
|
-
| \`
|
|
2404
|
-
| \`
|
|
2405
|
-
| \`
|
|
2406
|
-
| \`
|
|
2407
|
-
| \`
|
|
2408
|
-
| \`
|
|
2409
|
-
| \`
|
|
2410
|
-
| \`
|
|
2411
|
-
| \`
|
|
2412
|
-
| \`
|
|
2413
|
-
| \`
|
|
2414
|
-
| \`
|
|
2415
|
-
| \`
|
|
2416
|
-
| \`
|
|
2417
|
-
| \`
|
|
2418
|
-
| \`
|
|
2419
|
-
| \`
|
|
2420
|
-
| \`
|
|
2421
|
-
| \`
|
|
2422
|
-
| \`
|
|
2423
|
-
| \`
|
|
2424
|
-
| \`
|
|
2425
|
-
| \`
|
|
2426
|
-
| \`
|
|
2427
|
-
| \`
|
|
2428
|
-
| \`
|
|
2429
|
-
| \`
|
|
2430
|
-
| \`
|
|
2431
|
-
| \`
|
|
2432
|
-
| \`
|
|
2433
|
-
| \`
|
|
2434
|
-
| \`
|
|
2435
|
-
| \`
|
|
2436
|
-
| \`
|
|
2437
|
-
| \`
|
|
2438
|
-
| \`
|
|
2439
|
-
| \`
|
|
2440
|
-
| \`
|
|
2441
|
-
| \`
|
|
2442
|
-
| \`
|
|
2443
|
-
| \`
|
|
2444
|
-
| \`
|
|
2445
|
-
| \`
|
|
2446
|
-
| \`
|
|
2447
|
-
| \`
|
|
2448
|
-
| \`
|
|
2449
|
-
| \`
|
|
2450
|
-
| \`
|
|
2451
|
-
| \`
|
|
2354
|
+
| \`accordion\` | 83,426 | 27,578 | 22,594 | 6,204 | 1,548 | 1,413 |
|
|
2355
|
+
| \`announcement\` | 81,782 | 26,848 | 22,035 | 5,624 | 1,320 | 1,166 |
|
|
2356
|
+
| \`app-header\` | 33,148 | 10,671 | 9,412 | 5,121 | 1,231 | 1,030 |
|
|
2357
|
+
| \`area-chart\` | 82,489 | 27,276 | 24,119 | 18,293 | 4,993 | 4,181 |
|
|
2358
|
+
| \`aura\` | 96,285 | 33,171 | 28,804 | 65,483 | 22,841 | 19,775 |
|
|
2359
|
+
| \`avatar\` | 34,893 | 11,129 | 9,814 | 6,833 | 1,657 | 1,408 |
|
|
2360
|
+
| \`badge\` | 31,897 | 10,407 | 9,171 | 4,249 | 1,015 | 912 |
|
|
2361
|
+
| \`bar-chart\` | 89,558 | 28,592 | 25,233 | 25,352 | 6,311 | 5,358 |
|
|
2362
|
+
| \`blockquote\` | 29,964 | 10,016 | 8,816 | 1,914 | 468 | 491 |
|
|
2363
|
+
| \`breadcrumbs\` | 80,435 | 26,206 | 21,649 | 5,518 | 1,230 | 1,084 |
|
|
2364
|
+
| \`button\` | 39,438 | 12,051 | 10,634 | 9,170 | 1,937 | 1,636 |
|
|
2365
|
+
| \`button-group\` | 30,340 | 9,994 | 8,798 | 2,320 | 538 | 486 |
|
|
2366
|
+
| \`callout\` | 77,990 | 25,808 | 21,319 | 2,899 | 765 | 664 |
|
|
2367
|
+
| \`card\` | 31,931 | 10,454 | 9,206 | 3,915 | 977 | 864 |
|
|
2368
|
+
| \`carousel\` | 96,024 | 29,841 | 24,765 | 20,774 | 4,391 | 3,902 |
|
|
2369
|
+
| \`chat\` | 113,393 | 35,545 | 29,330 | 31,432 | 7,588 | 6,434 |
|
|
2370
|
+
| \`checkbox\` | 43,297 | 13,113 | 11,529 | 8,802 | 2,122 | 1,823 |
|
|
2371
|
+
| \`checkbox-group\` | 41,993 | 12,935 | 11,379 | 6,981 | 1,842 | 1,516 |
|
|
2372
|
+
| \`code\` | 28,360 | 9,497 | 8,363 | 1,511 | 370 | 371 |
|
|
2373
|
+
| \`code-block\` | 137,965 | 43,349 | 36,513 | 33,551 | 7,194 | 6,192 |
|
|
2374
|
+
| \`color-input\` | 169,230 | 49,050 | 41,622 | 56,648 | 10,756 | 9,254 |
|
|
2375
|
+
| \`color-picker\` | 131,044 | 37,689 | 31,385 | 45,322 | 8,829 | 7,615 |
|
|
2376
|
+
| \`combobox\` | 147,573 | 45,494 | 38,215 | 35,167 | 7,744 | 6,419 |
|
|
2377
|
+
| \`command\` | 113,668 | 34,791 | 28,715 | 28,199 | 6,579 | 5,612 |
|
|
2378
|
+
| \`copy-button\` | 126,117 | 40,615 | 34,181 | 21,706 | 4,662 | 3,908 |
|
|
2379
|
+
| \`data-table\` | 208,161 | 59,317 | 49,932 | 91,858 | 20,362 | 16,860 |
|
|
2380
|
+
| \`date-input\` | 146,503 | 45,330 | 38,228 | 34,186 | 7,678 | 6,543 |
|
|
2381
|
+
| \`date-picker\` | 93,332 | 30,145 | 24,806 | 15,379 | 3,895 | 3,402 |
|
|
2382
|
+
| \`description-list\` | 31,145 | 10,140 | 8,950 | 3,502 | 766 | 707 |
|
|
2383
|
+
| \`dialog\` | 36,693 | 11,680 | 10,323 | 7,079 | 1,838 | 1,605 |
|
|
2384
|
+
| \`divider\` | 31,170 | 10,325 | 9,071 | 3,120 | 765 | 739 |
|
|
2385
|
+
| \`donut-chart\` | 81,993 | 26,537 | 23,505 | 19,224 | 4,929 | 4,175 |
|
|
2386
|
+
| \`drawer\` | 35,332 | 11,307 | 9,962 | 6,007 | 1,493 | 1,352 |
|
|
2387
|
+
| \`drilldown\` | 88,906 | 29,059 | 23,793 | 10,153 | 2,496 | 2,099 |
|
|
2388
|
+
| \`empty\` | 30,107 | 10,038 | 8,837 | 2,087 | 536 | 509 |
|
|
2389
|
+
| \`file-input\` | 98,759 | 31,070 | 25,526 | 17,403 | 3,952 | 3,314 |
|
|
2390
|
+
| \`filter-input\` | 171,839 | 50,208 | 42,211 | 55,910 | 11,363 | 9,621 |
|
|
2391
|
+
| \`flex\` | 29,721 | 9,846 | 8,664 | 2,078 | 456 | 447 |
|
|
2392
|
+
| \`format-date\` | 32,925 | 10,925 | 9,704 | 3,497 | 878 | 661 |
|
|
2393
|
+
| \`grid\` | 30,175 | 9,999 | 8,829 | 2,528 | 602 | 578 |
|
|
2394
|
+
| \`heatmap\` | 80,906 | 26,283 | 23,234 | 17,575 | 4,478 | 3,739 |
|
|
2395
|
+
| \`icon\` | 76,262 | 25,261 | 20,828 | 1,707 | 410 | 315 |
|
|
2396
|
+
| \`icon-button\` | 39,759 | 11,971 | 10,544 | 9,495 | 1,853 | 1,653 |
|
|
2397
|
+
| \`image\` | 32,539 | 10,643 | 9,379 | 4,840 | 1,315 | 1,205 |
|
|
2398
|
+
| \`input\` | 92,968 | 29,781 | 24,395 | 11,004 | 2,685 | 2,232 |
|
|
2399
|
+
| \`kbd\` | 32,030 | 10,846 | 9,554 | 4,373 | 1,488 | 1,257 |
|
|
2400
|
+
| \`legend\` | 37,486 | 12,013 | 10,544 | 5,790 | 1,391 | 1,103 |
|
|
2401
|
+
| \`lightbox\` | 39,512 | 12,405 | 10,915 | 7,670 | 2,009 | 1,746 |
|
|
2402
|
+
| \`line-chart\` | 84,455 | 27,380 | 24,241 | 20,340 | 5,146 | 4,356 |
|
|
2403
|
+
| \`list\` | 33,786 | 10,751 | 9,455 | 5,782 | 1,293 | 1,149 |
|
|
2404
|
+
| \`listbox\` | 99,183 | 31,900 | 26,099 | 15,204 | 3,977 | 3,305 |
|
|
2405
|
+
| \`loader\` | 32,070 | 10,501 | 9,266 | 4,051 | 995 | 894 |
|
|
2406
|
+
| \`map\` | 36,129 | 11,711 | 10,296 | 6,959 | 1,826 | 1,576 |
|
|
2407
|
+
| \`megamenu\` | 63,993 | 21,478 | 19,055 | 9,805 | 2,434 | 2,052 |
|
|
2408
|
+
| \`menu\` | 121,860 | 40,208 | 33,685 | 16,174 | 3,786 | 3,208 |
|
|
2409
|
+
| \`meter\` | 37,492 | 11,733 | 10,369 | 9,479 | 2,213 | 2,010 |
|
|
2410
|
+
| \`navigation\` | 31,979 | 10,656 | 9,388 | 2,726 | 767 | 691 |
|
|
2411
|
+
| \`notifications\` | 104,868 | 32,102 | 26,524 | 24,289 | 5,018 | 4,304 |
|
|
2412
|
+
| \`number-input\` | 93,844 | 30,178 | 24,728 | 11,960 | 3,056 | 2,546 |
|
|
2413
|
+
| \`object-inspector\` | 142,486 | 45,323 | 38,224 | 32,775 | 7,477 | 6,401 |
|
|
2414
|
+
| \`option\` | 34,188 | 11,072 | 9,771 | 6,175 | 1,554 | 1,296 |
|
|
2415
|
+
| \`orb\` | 38,917 | 13,474 | 11,922 | 8,623 | 3,191 | 2,886 |
|
|
2416
|
+
| \`outline\` | 37,773 | 12,227 | 10,812 | 8,313 | 2,207 | 1,830 |
|
|
2417
|
+
| \`pagination\` | 154,854 | 46,635 | 39,213 | 45,049 | 9,419 | 7,856 |
|
|
2418
|
+
| \`pin-input\` | 42,505 | 13,319 | 11,748 | 8,088 | 2,311 | 1,855 |
|
|
2419
|
+
| \`popover\` | 58,954 | 20,289 | 17,966 | 4,517 | 1,188 | 1,097 |
|
|
2420
|
+
| \`progress\` | 34,974 | 11,178 | 9,889 | 6,962 | 1,657 | 1,527 |
|
|
2421
|
+
| \`qr-code\` | 42,257 | 14,479 | 12,770 | 14,628 | 5,086 | 4,393 |
|
|
2422
|
+
| \`quote\` | 28,842 | 9,652 | 8,492 | 1,191 | 282 | 321 |
|
|
2423
|
+
| \`radio\` | 46,815 | 13,506 | 11,906 | 11,010 | 2,245 | 1,966 |
|
|
2424
|
+
| \`rating\` | 45,227 | 14,251 | 12,590 | 10,724 | 3,067 | 2,562 |
|
|
2425
|
+
| \`sandbox\` | 63,869 | 17,473 | 15,498 | 35,384 | 7,812 | 6,682 |
|
|
2426
|
+
| \`scatter-chart\` | 82,980 | 27,096 | 23,943 | 19,646 | 5,233 | 4,422 |
|
|
2427
|
+
| \`scroll-area\` | 33,578 | 10,831 | 9,507 | 5,874 | 1,455 | 1,197 |
|
|
2428
|
+
| \`select\` | 137,761 | 43,384 | 36,434 | 28,086 | 6,319 | 5,220 |
|
|
2429
|
+
| \`skeleton\` | 29,894 | 9,984 | 8,796 | 2,242 | 608 | 563 |
|
|
2430
|
+
| \`skip-link\` | 30,429 | 10,196 | 8,943 | 2,624 | 757 | 615 |
|
|
2431
|
+
| \`slider\` | 50,811 | 14,512 | 12,873 | 16,150 | 3,405 | 2,944 |
|
|
2432
|
+
| \`sparkline\` | 39,007 | 12,855 | 11,365 | 6,293 | 1,766 | 1,530 |
|
|
2433
|
+
| \`speed-dial\` | 113,803 | 37,795 | 31,754 | 11,355 | 2,421 | 2,043 |
|
|
2434
|
+
| \`splitter\` | 44,336 | 13,196 | 11,744 | 16,134 | 3,608 | 3,136 |
|
|
2435
|
+
| \`stat\` | 31,968 | 10,297 | 9,087 | 3,954 | 833 | 844 |
|
|
2436
|
+
| \`steps\` | 98,594 | 30,263 | 24,961 | 19,783 | 3,919 | 3,391 |
|
|
2437
|
+
| \`switch\` | 40,673 | 12,699 | 11,200 | 5,777 | 1,550 | 1,327 |
|
|
2438
|
+
| \`table\` | 91,296 | 29,576 | 24,358 | 14,441 | 3,571 | 3,109 |
|
|
2439
|
+
| \`tabs\` | 42,675 | 12,898 | 11,372 | 10,153 | 2,192 | 1,869 |
|
|
2440
|
+
| \`tag\` | 79,472 | 26,221 | 21,498 | 4,083 | 1,021 | 996 |
|
|
2441
|
+
| \`text\` | 31,628 | 10,126 | 8,903 | 3,987 | 819 | 684 |
|
|
2442
|
+
| \`textarea\` | 42,304 | 13,055 | 11,492 | 7,319 | 1,948 | 1,517 |
|
|
2443
|
+
| \`time-input\` | 164,474 | 49,051 | 41,332 | 49,006 | 10,453 | 8,866 |
|
|
2444
|
+
| \`time-picker\` | 114,996 | 35,520 | 29,315 | 30,044 | 7,177 | 6,003 |
|
|
2445
|
+
| \`timeline\` | 80,031 | 26,090 | 21,560 | 5,110 | 1,135 | 1,039 |
|
|
2446
|
+
| \`toast\` | 87,535 | 28,118 | 23,141 | 11,526 | 2,621 | 2,368 |
|
|
2447
|
+
| \`toggle\` | 45,750 | 13,805 | 12,215 | 8,427 | 2,072 | 1,772 |
|
|
2448
|
+
| \`toolbar\` | 32,046 | 10,642 | 9,361 | 4,208 | 1,245 | 998 |
|
|
2449
|
+
| \`tooltip\` | 63,507 | 21,496 | 19,065 | 9,352 | 2,505 | 2,064 |
|
|
2450
|
+
| \`tour\` | 75,732 | 23,712 | 20,993 | 20,453 | 4,384 | 3,717 |
|
|
2451
|
+
| \`tree\` | 92,461 | 29,960 | 24,570 | 12,881 | 3,332 | 2,790 |
|
|
2452
|
+
| \`trend\` | 78,815 | 25,856 | 21,290 | 4,271 | 972 | 939 |
|
|
2453
|
+
| \`video\` | 159,459 | 48,531 | 41,081 | 49,691 | 10,820 | 9,327 |
|
|
2454
|
+
| \`video-playlist\` | 135,933 | 42,755 | 35,927 | 28,840 | 6,004 | 5,022 |
|
|
2455
|
+
| \`virtual-list\` | 35,357 | 11,812 | 10,436 | 3,187 | 952 | 808 |
|
|
2452
2456
|
|
|
2453
2457
|
## What lands in \`node_modules\`
|
|
2454
2458
|
|
|
@@ -2460,12 +2464,12 @@ column is what was removed rather than part of what remains.
|
|
|
2460
2464
|
|
|
2461
2465
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
2462
2466
|
|---|---|---|---|---|
|
|
2463
|
-
| \`@fusion.dev/helix-core\` |
|
|
2464
|
-
| \`@fusion.dev/helix-headless\` | 11,
|
|
2467
|
+
| \`@fusion.dev/helix-core\` | 990,453 | 153 | 223,524 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
2468
|
+
| \`@fusion.dev/helix-headless\` | 11,586,301 | 474 | 853,184 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
2465
2469
|
| \`@fusion.dev/helix-icons\` | 131,512 | 21 | 44,809 | \`svgo\` |
|
|
2466
|
-
| \`@fusion.dev/helix-styles\` | 101,
|
|
2470
|
+
| \`@fusion.dev/helix-styles\` | 101,298 | 6 | 0 | none |
|
|
2467
2471
|
| \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
|
|
2468
|
-
| \`@fusion.dev/helix\` | 12,
|
|
2472
|
+
| \`@fusion.dev/helix\` | 12,711,947 | 812 | 338,838 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
2469
2473
|
|
|
2470
2474
|
## Not measured yet
|
|
2471
2475
|
|