@fusion.dev/helix-docs 0.54.0 → 0.55.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/metrics.mdx +30 -30
- package/content/size-and-density.mdx +6 -2
- package/content/visual-axes.mdx +32 -4
- package/dist/sources.generated.js +68 -36
- package/package.json +3 -3
package/content/metrics.mdx
CHANGED
|
@@ -59,10 +59,10 @@ repository does that. The per-component tables are what a page pays.
|
|
|
59
59
|
| Package | Raw | Gzip | Brotli | |
|
|
60
60
|
|---|---|---|---|---|
|
|
61
61
|
| `@fusion.dev/helix-core` | 147,226 | 48,349 | 40,887 | Element base class, mixins, decorators, floating positioning. |
|
|
62
|
-
| `@fusion.dev/helix-headless` | 603,
|
|
62
|
+
| `@fusion.dev/helix-headless` | 603,522 | 156,553 | 121,886 | 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,081,980 | 253,807 | 186,053 | 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
|
|
@@ -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,826 bytes gzipped alone and adds 2,
|
|
86
|
+
**Most of a first component is the runtime under it.** The median styled family is 18,826 bytes gzipped alone and adds 2,218 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,451 gzipped alone, the dearest `data-table` at 59,
|
|
88
|
+
Across the tier: the cheapest is `code` at 9,451 gzipped alone, the dearest `data-table` at 59,198, over 100 components. Every family at once is 253,807.
|
|
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 156,
|
|
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 156,553 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 20,
|
|
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,530 bytes gzipped alone.
|
|
93
93
|
|
|
94
94
|
## Against other systems
|
|
95
95
|
|
|
@@ -106,17 +106,17 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by `t
|
|
|
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** | 42,
|
|
109
|
+
| `checkbox` | **Helix** | 42,841 | 13,039 | 11,450 |
|
|
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,349 | 11,636 | 10,265 |
|
|
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** |
|
|
119
|
+
| `radio` | **Helix** | 46,423 | 13,448 | 11,882 |
|
|
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 |
|
|
@@ -137,7 +137,7 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by `t
|
|
|
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: `dialog`, `radio`, `switch`, `tabs`, `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`, `tabs`, `tooltip`. The largest gap is radio against Spectrum, by 2,788 bytes gzipped. 7 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.
|
|
@@ -188,7 +188,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
188
188
|
| `area-chart` | 74,755 | 25,601 | 22,598 | 11,066 | 3,413 | 2,823 |
|
|
189
189
|
| `avatar` | 30,963 | 10,323 | 9,111 | 3,257 | 919 | 732 |
|
|
190
190
|
| `badge` | 28,449 | 9,658 | 8,493 | 1,162 | 297 | 241 |
|
|
191
|
-
| `bar-chart` | 76,
|
|
191
|
+
| `bar-chart` | 76,406 | 25,966 | 22,962 | 12,708 | 3,774 | 3,131 |
|
|
192
192
|
| `blockquote` | 28,464 | 9,687 | 8,534 | 774 | 177 | 118 |
|
|
193
193
|
| `breadcrumbs` | 76,525 | 25,352 | 20,888 | 1,965 | 441 | 363 |
|
|
194
194
|
| `button` | 32,931 | 10,866 | 9,561 | 3,137 | 810 | 711 |
|
|
@@ -206,7 +206,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
206
206
|
| `combobox` | 132,319 | 42,745 | 35,897 | 20,388 | 5,072 | 4,193 |
|
|
207
207
|
| `command` | 102,707 | 32,668 | 26,883 | 17,705 | 4,516 | 3,718 |
|
|
208
208
|
| `copy-button` | 115,835 | 38,799 | 32,590 | 11,901 | 2,968 | 2,456 |
|
|
209
|
-
| `data-table` | 170,
|
|
209
|
+
| `data-table` | 170,408 | 52,757 | 44,535 | 54,871 | 13,943 | 11,715 |
|
|
210
210
|
| `date-input` | 130,322 | 42,258 | 35,456 | 18,550 | 4,750 | 3,954 |
|
|
211
211
|
| `date-picker` | 87,537 | 28,957 | 23,814 | 9,997 | 2,810 | 2,281 |
|
|
212
212
|
| `description-list` | 28,423 | 9,527 | 8,396 | 1,132 | 178 | 172 |
|
|
@@ -230,7 +230,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
230
230
|
| `list` | 29,375 | 9,761 | 8,590 | 1,725 | 343 | 256 |
|
|
231
231
|
| `listbox` | 94,458 | 30,818 | 25,165 | 10,942 | 2,996 | 2,362 |
|
|
232
232
|
| `loader` | 28,560 | 9,693 | 8,526 | 900 | 224 | 162 |
|
|
233
|
-
| `megamenu` | 58,768 | 20,
|
|
233
|
+
| `megamenu` | 58,768 | 20,365 | 18,023 | 4,941 | 1,355 | 989 |
|
|
234
234
|
| `menu` | 114,091 | 38,572 | 32,324 | 8,816 | 2,239 | 1,745 |
|
|
235
235
|
| `meter` | 31,750 | 10,542 | 9,277 | 4,099 | 1,047 | 882 |
|
|
236
236
|
| `navigation` | 30,198 | 10,203 | 9,003 | 1,361 | 358 | 280 |
|
|
@@ -259,7 +259,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
259
259
|
| `stat` | 28,808 | 9,624 | 8,464 | 1,148 | 189 | 159 |
|
|
260
260
|
| `steps` | 84,562 | 27,788 | 22,780 | 6,219 | 1,510 | 1,168 |
|
|
261
261
|
| `switch` | 35,949 | 11,576 | 10,243 | 1,524 | 481 | 350 |
|
|
262
|
-
| `table` | 85,
|
|
262
|
+
| `table` | 85,463 | 28,383 | 23,227 | 9,256 | 2,581 | 2,075 |
|
|
263
263
|
| `tabs` | 36,077 | 11,569 | 10,198 | 3,925 | 911 | 720 |
|
|
264
264
|
| `tag` | 75,927 | 25,307 | 20,715 | 897 | 191 | 194 |
|
|
265
265
|
| `textarea` | 38,454 | 12,148 | 10,669 | 4,026 | 1,101 | 867 |
|
|
@@ -288,31 +288,31 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
|
|
|
288
288
|
| `app-header` | 32,804 | 10,624 | 9,379 | 5,121 | 1,226 | 1,076 |
|
|
289
289
|
| `area-chart` | 82,141 | 27,208 | 24,027 | 18,433 | 5,026 | 4,214 |
|
|
290
290
|
| `aura` | 94,970 | 32,811 | 28,423 | 66,522 | 23,026 | 19,836 |
|
|
291
|
-
| `avatar` | 34,
|
|
291
|
+
| `avatar` | 34,549 | 11,085 | 9,765 | 6,833 | 1,689 | 1,356 |
|
|
292
292
|
| `badge` | 31,553 | 10,365 | 9,136 | 4,249 | 1,008 | 847 |
|
|
293
|
-
| `bar-chart` | 89,
|
|
293
|
+
| `bar-chart` | 89,210 | 28,519 | 25,248 | 25,492 | 6,339 | 5,292 |
|
|
294
294
|
| `blockquote` | 29,620 | 9,970 | 8,765 | 1,914 | 477 | 368 |
|
|
295
295
|
| `breadcrumbs` | 80,091 | 26,152 | 21,562 | 5,518 | 1,240 | 1,051 |
|
|
296
296
|
| `button` | 39,024 | 11,978 | 10,565 | 9,212 | 1,934 | 1,662 |
|
|
297
297
|
| `button-group` | 29,996 | 9,950 | 8,756 | 2,320 | 528 | 499 |
|
|
298
298
|
| `callout` | 77,642 | 25,753 | 21,314 | 2,895 | 767 | 634 |
|
|
299
299
|
| `card` | 31,587 | 10,410 | 9,158 | 3,915 | 980 | 943 |
|
|
300
|
-
| `carousel` | 94,
|
|
300
|
+
| `carousel` | 94,840 | 29,701 | 24,624 | 19,980 | 4,320 | 3,700 |
|
|
301
301
|
| `chat` | 113,049 | 35,489 | 29,342 | 31,432 | 7,585 | 6,423 |
|
|
302
|
-
| `checkbox` | 42,
|
|
302
|
+
| `checkbox` | 42,841 | 13,039 | 11,450 | 8,802 | 2,100 | 1,785 |
|
|
303
303
|
| `checkbox-group` | 41,537 | 12,854 | 11,324 | 6,981 | 1,839 | 1,407 |
|
|
304
304
|
| `code` | 28,016 | 9,451 | 8,318 | 1,511 | 366 | 327 |
|
|
305
305
|
| `code-block` | 137,688 | 43,293 | 36,473 | 33,731 | 7,278 | 6,200 |
|
|
306
306
|
| `color-input` | 168,628 | 48,951 | 41,328 | 59,311 | 11,851 | 10,104 |
|
|
307
307
|
| `color-picker` | 130,441 | 37,570 | 31,204 | 47,984 | 9,957 | 8,550 |
|
|
308
308
|
| `combobox` | 147,122 | 45,410 | 38,194 | 35,172 | 7,737 | 6,383 |
|
|
309
|
-
| `command` | 113,
|
|
309
|
+
| `command` | 113,212 | 34,712 | 28,636 | 28,199 | 6,600 | 5,573 |
|
|
310
310
|
| `copy-button` | 125,839 | 40,569 | 34,091 | 21,887 | 4,687 | 3,940 |
|
|
311
|
-
| `data-table` | 207,
|
|
311
|
+
| `data-table` | 207,626 | 59,198 | 49,817 | 92,070 | 20,470 | 16,883 |
|
|
312
312
|
| `date-input` | 146,243 | 45,292 | 38,229 | 34,448 | 7,741 | 6,583 |
|
|
313
313
|
| `date-picker` | 93,154 | 30,121 | 24,814 | 15,596 | 3,955 | 3,318 |
|
|
314
314
|
| `description-list` | 30,801 | 10,095 | 8,892 | 3,502 | 774 | 676 |
|
|
315
|
-
| `dialog` | 36,
|
|
315
|
+
| `dialog` | 36,349 | 11,636 | 10,265 | 7,079 | 1,832 | 1,548 |
|
|
316
316
|
| `divider` | 30,826 | 10,284 | 9,053 | 3,120 | 760 | 643 |
|
|
317
317
|
| `donut-chart` | 81,645 | 26,464 | 23,449 | 19,364 | 4,953 | 4,204 |
|
|
318
318
|
| `drawer` | 34,988 | 11,255 | 9,908 | 6,007 | 1,495 | 1,323 |
|
|
@@ -320,13 +320,13 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
|
|
|
320
320
|
| `empty` | 29,763 | 9,992 | 8,809 | 2,087 | 540 | 515 |
|
|
321
321
|
| `file-input` | 98,248 | 30,977 | 25,470 | 17,344 | 3,927 | 3,363 |
|
|
322
322
|
| `filter-input` | 171,269 | 50,094 | 42,162 | 55,844 | 11,287 | 9,406 |
|
|
323
|
-
| `flex` | 29,
|
|
323
|
+
| `flex` | 29,377 | 9,803 | 8,625 | 2,078 | 459 | 452 |
|
|
324
324
|
| `format-date` | 32,581 | 10,883 | 9,622 | 3,497 | 860 | 647 |
|
|
325
|
-
| `grid` | 29,
|
|
325
|
+
| `grid` | 29,831 | 9,956 | 8,764 | 2,528 | 615 | 529 |
|
|
326
326
|
| `heatmap` | 80,558 | 26,185 | 23,262 | 17,832 | 4,543 | 3,743 |
|
|
327
327
|
| `icon` | 75,854 | 25,190 | 20,767 | 1,641 | 381 | 371 |
|
|
328
328
|
| `icon-button` | 39,345 | 11,910 | 10,494 | 9,537 | 1,869 | 1,643 |
|
|
329
|
-
| `image` | 32,
|
|
329
|
+
| `image` | 32,195 | 10,599 | 9,341 | 4,840 | 1,306 | 997 |
|
|
330
330
|
| `input` | 92,448 | 29,682 | 24,353 | 10,938 | 2,630 | 2,130 |
|
|
331
331
|
| `kbd` | 31,686 | 10,798 | 9,494 | 4,373 | 1,498 | 1,191 |
|
|
332
332
|
| `legend` | 37,016 | 11,919 | 10,475 | 5,790 | 1,397 | 1,133 |
|
|
@@ -334,7 +334,7 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
|
|
|
334
334
|
| `list` | 33,439 | 10,707 | 9,426 | 5,779 | 1,299 | 1,126 |
|
|
335
335
|
| `listbox` | 98,727 | 31,815 | 26,007 | 15,204 | 3,981 | 3,286 |
|
|
336
336
|
| `loader` | 31,726 | 10,457 | 9,209 | 4,051 | 989 | 858 |
|
|
337
|
-
| `megamenu` | 63,649 | 21,
|
|
337
|
+
| `megamenu` | 63,649 | 21,440 | 19,005 | 9,805 | 2,426 | 2,038 |
|
|
338
338
|
| `menu` | 121,468 | 40,143 | 33,700 | 16,174 | 3,760 | 3,098 |
|
|
339
339
|
| `meter` | 37,148 | 11,685 | 10,324 | 9,479 | 2,209 | 1,942 |
|
|
340
340
|
| `navigation` | 31,579 | 10,593 | 9,325 | 2,726 | 765 | 611 |
|
|
@@ -350,8 +350,8 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
|
|
|
350
350
|
| `progress` | 34,630 | 11,137 | 9,846 | 6,962 | 1,661 | 1,476 |
|
|
351
351
|
| `qr-code` | 41,913 | 14,435 | 12,705 | 14,628 | 5,111 | 4,374 |
|
|
352
352
|
| `quote` | 28,498 | 9,609 | 8,455 | 1,191 | 295 | 222 |
|
|
353
|
-
| `radio` |
|
|
354
|
-
| `rating` | 44,
|
|
353
|
+
| `radio` | 46,423 | 13,448 | 11,882 | 11,010 | 2,247 | 1,859 |
|
|
354
|
+
| `rating` | 44,835 | 14,196 | 12,497 | 10,724 | 3,091 | 2,486 |
|
|
355
355
|
| `sandbox` | 63,540 | 17,409 | 15,411 | 35,445 | 7,795 | 6,587 |
|
|
356
356
|
| `scatter-chart` | 82,664 | 27,049 | 23,880 | 19,815 | 5,259 | 4,377 |
|
|
357
357
|
| `scroll-area` | 33,234 | 10,788 | 9,496 | 5,874 | 1,451 | 1,189 |
|
|
@@ -365,7 +365,7 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
|
|
|
365
365
|
| `stat` | 31,624 | 10,248 | 9,065 | 3,954 | 831 | 751 |
|
|
366
366
|
| `steps` | 98,180 | 30,216 | 24,841 | 19,825 | 3,900 | 3,290 |
|
|
367
367
|
| `switch` | 40,217 | 12,632 | 11,126 | 5,777 | 1,541 | 1,291 |
|
|
368
|
-
| `table` | 90,
|
|
368
|
+
| `table` | 90,841 | 29,483 | 24,181 | 14,623 | 3,653 | 3,119 |
|
|
369
369
|
| `tabs` | 42,314 | 12,842 | 11,287 | 10,153 | 2,201 | 1,744 |
|
|
370
370
|
| `tag` | 79,131 | 26,169 | 21,453 | 4,086 | 1,022 | 831 |
|
|
371
371
|
| `text` | 31,284 | 10,086 | 8,873 | 3,987 | 798 | 641 |
|
|
@@ -395,11 +395,11 @@ column is what was removed rather than part of what remains.
|
|
|
395
395
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
396
396
|
|---|---|---|---|---|
|
|
397
397
|
| `@fusion.dev/helix-core` | 878,078 | 129 | 190,771 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
|
|
398
|
-
| `@fusion.dev/helix-headless` | 11,
|
|
398
|
+
| `@fusion.dev/helix-headless` | 11,393,601 | 472 | 859,522 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
|
|
399
399
|
| `@fusion.dev/helix-icons` | 65,943 | 11 | 20,928 | none |
|
|
400
400
|
| `@fusion.dev/helix-styles` | 101,139 | 6 | 0 | none |
|
|
401
401
|
| `@fusion.dev/helix-theme` | 465,413 | 8 | 4,703 | none |
|
|
402
|
-
| `@fusion.dev/helix` | 12,
|
|
402
|
+
| `@fusion.dev/helix` | 12,469,777 | 798 | 339,233 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
|
|
403
403
|
|
|
404
404
|
## Not measured yet
|
|
405
405
|
|
|
@@ -31,8 +31,8 @@ does not know which it is in; the region does.
|
|
|
31
31
|
|
|
32
32
|
**Optical role.** Real, and only for things that are not controls. An avatar at
|
|
33
33
|
24 in a list and 96 on a profile is a different graphic, not a taller control.
|
|
34
|
-
That is why `size` survives on `Avatar
|
|
35
|
-
|
|
34
|
+
That is why `size` survives on `Avatar`, `Loader` and `Orb`: those are
|
|
35
|
+
pictures.
|
|
36
36
|
|
|
37
37
|
## The test that settles it
|
|
38
38
|
|
|
@@ -46,6 +46,10 @@ one element at a time, which is exactly how a row ends up with one member the
|
|
|
46
46
|
wrong height. Said once on the region, a ragged row is not discouraged. It is
|
|
47
47
|
unwritable.
|
|
48
48
|
|
|
49
|
+
`Dialog` keeps a `size` by the same test read from the other end. Two dialogs
|
|
50
|
+
never sit together: one is on screen at a time, in the top layer, so it *is* the
|
|
51
|
+
region rather than a control in one.
|
|
52
|
+
|
|
49
53
|
That is also what makes this safe for anything generating code, whether that is
|
|
50
54
|
a person or a model: there is no size to get wrong, and one question to ask per
|
|
51
55
|
region instead of one per element.
|
package/content/visual-axes.mdx
CHANGED
|
@@ -14,8 +14,10 @@ vocabularies. You cannot invent a value, and a component may take a subset.
|
|
|
14
14
|
| `emphasis` | `ghost`, `muted`, `outlined`, `solid`, `subtle` |
|
|
15
15
|
| `material` | `frosted`, `glass`, `transparent` |
|
|
16
16
|
| `nesting` | `heading`, `peer`, `subordinate` |
|
|
17
|
+
| `orientation` | `auto`, `horizontal`, `vertical` |
|
|
17
18
|
| `separation` | `elevated`, `filled`, `outlined`, `plain` |
|
|
18
19
|
| `shape` | `arc`, `circle`, `dots`, `ring`, `rounded`, `square`, `text` |
|
|
20
|
+
| `size` | `sm`, `md`, `lg`, `full` |
|
|
19
21
|
| `tone` | The status and intent words: `primary`, `accent`, `neutral`, `danger`, and so on |
|
|
20
22
|
| `width` | `auto`, `full` |
|
|
21
23
|
|
|
@@ -47,8 +49,8 @@ and a component reintroducing it fails the build.
|
|
|
47
49
|
## Two axes, not one
|
|
48
50
|
|
|
49
51
|
This is the test. `Megamenu` is the worked example: a consumer can make the panel
|
|
50
|
-
glass, which is not an appearance, because `
|
|
51
|
-
a layout. A panel can be glass *and* outlined. Two axes.
|
|
52
|
+
glass, which is not an appearance, because `band` already occupies that axis
|
|
53
|
+
with a layout. A panel can be glass *and* outlined. Two axes.
|
|
52
54
|
|
|
53
55
|
If you are adding a property and cannot decide which axis it belongs to, that is
|
|
54
56
|
usually the answer: it is two properties.
|
|
@@ -61,7 +63,7 @@ usually the answer: it is two properties.
|
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
`variant` takes no registry, being component-specific by definition: `segmented`
|
|
64
|
-
against `underlined`, `list` against `wheels`, `
|
|
66
|
+
against `underlined`, `list` against `wheels`, `grip` against `line`. It is a
|
|
65
67
|
choice between two widgets, which is structural wherever it is made, so it lives
|
|
66
68
|
on either tier.
|
|
67
69
|
|
|
@@ -77,7 +79,33 @@ what gets *rendered*: a meter at `ring` emits an arc rather than a bar, so the
|
|
|
77
79
|
markup differs before any rule is written. `nesting` says what depth *is*: a
|
|
78
80
|
tree at `subordinate` ranks its rows, a tree at `heading` makes each branch the
|
|
79
81
|
name of the list under it, a file explorer does neither, and that is true of a
|
|
80
|
-
tree nobody has styled.
|
|
82
|
+
tree nobody has styled. `orientation` is `shape`'s reason again: `aria-orientation`
|
|
83
|
+
is markup, and the toolbar, the splitter, the divider and the table column all
|
|
84
|
+
write it with nothing painted.
|
|
85
|
+
|
|
86
|
+
`size` is the axis that goes the other way. It is asked of pictures and regions
|
|
87
|
+
and never of controls, which take their height from the region they sit in
|
|
88
|
+
through `data-density`, so it lives only where something is painted.
|
|
89
|
+
|
|
90
|
+
## What each shape is
|
|
91
|
+
|
|
92
|
+
`shape` is the axis whose values are geometries that look alike in a table and
|
|
93
|
+
not on a page, so it is worth saying what each one draws.
|
|
94
|
+
|
|
95
|
+
| Value | What it draws |
|
|
96
|
+
|---|---|
|
|
97
|
+
| `arc` | An open curve, a gauge that stops short of a full turn |
|
|
98
|
+
| `circle` | A full round, the whole edge at `radii-full` |
|
|
99
|
+
| `dots` | Separate marks rather than one joined figure |
|
|
100
|
+
| `ring` | A closed curve, the whole turn drawn as a band |
|
|
101
|
+
| `rounded` | Corners cut to `radii-md`, still a rectangle |
|
|
102
|
+
| `square` | Sharp corners, the pole `rounded` departs from |
|
|
103
|
+
| `text` | A line of type's shape, as wide as a line and as tall |
|
|
104
|
+
|
|
105
|
+
**`square` is not `rounded`.** They were one word for a while: an avatar drawing
|
|
106
|
+
`radii-md` called it `square` while a QR code drawing sharp modules called it
|
|
107
|
+
`square` too, in the same registered axis. Membership is what a check can see,
|
|
108
|
+
so nothing could have caught that, and a table is what stops it happening again.
|
|
81
109
|
|
|
82
110
|
## What a step inward means
|
|
83
111
|
|
|
@@ -2023,10 +2023,10 @@ repository does that. The per-component tables are what a page pays.
|
|
|
2023
2023
|
| Package | Raw | Gzip | Brotli | |
|
|
2024
2024
|
|---|---|---|---|---|
|
|
2025
2025
|
| \`@fusion.dev/helix-core\` | 147,226 | 48,349 | 40,887 | Element base class, mixins, decorators, floating positioning. |
|
|
2026
|
-
| \`@fusion.dev/helix-headless\` | 603,
|
|
2026
|
+
| \`@fusion.dev/helix-headless\` | 603,522 | 156,553 | 121,886 | Every headless family, which is what the barrel means. |
|
|
2027
2027
|
| \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
|
|
2028
2028
|
| \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
|
|
2029
|
-
| \`@fusion.dev/helix\` | 1,
|
|
2029
|
+
| \`@fusion.dev/helix\` | 1,081,980 | 253,807 | 186,053 | Every styled family. |
|
|
2030
2030
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
|
|
2031
2031
|
|
|
2032
2032
|
## The stylesheets
|
|
@@ -2047,13 +2047,13 @@ is the whole cost of adopting the base layer on its own.
|
|
|
2047
2047
|
|
|
2048
2048
|
## What the numbers say
|
|
2049
2049
|
|
|
2050
|
-
**Most of a first component is the runtime under it.** The median styled family is 18,826 bytes gzipped alone and adds 2,
|
|
2050
|
+
**Most of a first component is the runtime under it.** The median styled family is 18,826 bytes gzipped alone and adds 2,218 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.
|
|
2051
2051
|
|
|
2052
|
-
Across the tier: the cheapest is \`code\` at 9,451 gzipped alone, the dearest \`data-table\` at 59,
|
|
2052
|
+
Across the tier: the cheapest is \`code\` at 9,451 gzipped alone, the dearest \`data-table\` at 59,198, over 100 components. Every family at once is 253,807.
|
|
2053
2053
|
|
|
2054
|
-
**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 156,
|
|
2054
|
+
**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 156,553 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.
|
|
2055
2055
|
|
|
2056
|
-
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,
|
|
2056
|
+
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,530 bytes gzipped alone.
|
|
2057
2057
|
|
|
2058
2058
|
## Against other systems
|
|
2059
2059
|
|
|
@@ -2070,17 +2070,17 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
|
|
|
2070
2070
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
2071
2071
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
2072
2072
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
2073
|
-
| \`checkbox\` | **Helix** | 42,
|
|
2073
|
+
| \`checkbox\` | **Helix** | 42,841 | 13,039 | 11,450 |
|
|
2074
2074
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
2075
2075
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
2076
2076
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
2077
2077
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
2078
|
-
| \`dialog\` | **Helix** | 36,
|
|
2078
|
+
| \`dialog\` | **Helix** | 36,349 | 11,636 | 10,265 |
|
|
2079
2079
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
2080
2080
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
2081
2081
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
2082
2082
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
2083
|
-
| \`radio\` | **Helix** |
|
|
2083
|
+
| \`radio\` | **Helix** | 46,423 | 13,448 | 11,882 |
|
|
2084
2084
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
2085
2085
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
2086
2086
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
@@ -2101,7 +2101,7 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
|
|
|
2101
2101
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
2102
2102
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
2103
2103
|
|
|
2104
|
-
**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,
|
|
2104
|
+
**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,788 bytes gzipped. 7 of 28 peer measurements come in under ours.
|
|
2105
2105
|
|
|
2106
2106
|
- **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
|
|
2107
2107
|
- **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
|
|
@@ -2152,7 +2152,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2152
2152
|
| \`area-chart\` | 74,755 | 25,601 | 22,598 | 11,066 | 3,413 | 2,823 |
|
|
2153
2153
|
| \`avatar\` | 30,963 | 10,323 | 9,111 | 3,257 | 919 | 732 |
|
|
2154
2154
|
| \`badge\` | 28,449 | 9,658 | 8,493 | 1,162 | 297 | 241 |
|
|
2155
|
-
| \`bar-chart\` | 76,
|
|
2155
|
+
| \`bar-chart\` | 76,406 | 25,966 | 22,962 | 12,708 | 3,774 | 3,131 |
|
|
2156
2156
|
| \`blockquote\` | 28,464 | 9,687 | 8,534 | 774 | 177 | 118 |
|
|
2157
2157
|
| \`breadcrumbs\` | 76,525 | 25,352 | 20,888 | 1,965 | 441 | 363 |
|
|
2158
2158
|
| \`button\` | 32,931 | 10,866 | 9,561 | 3,137 | 810 | 711 |
|
|
@@ -2170,7 +2170,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2170
2170
|
| \`combobox\` | 132,319 | 42,745 | 35,897 | 20,388 | 5,072 | 4,193 |
|
|
2171
2171
|
| \`command\` | 102,707 | 32,668 | 26,883 | 17,705 | 4,516 | 3,718 |
|
|
2172
2172
|
| \`copy-button\` | 115,835 | 38,799 | 32,590 | 11,901 | 2,968 | 2,456 |
|
|
2173
|
-
| \`data-table\` | 170,
|
|
2173
|
+
| \`data-table\` | 170,408 | 52,757 | 44,535 | 54,871 | 13,943 | 11,715 |
|
|
2174
2174
|
| \`date-input\` | 130,322 | 42,258 | 35,456 | 18,550 | 4,750 | 3,954 |
|
|
2175
2175
|
| \`date-picker\` | 87,537 | 28,957 | 23,814 | 9,997 | 2,810 | 2,281 |
|
|
2176
2176
|
| \`description-list\` | 28,423 | 9,527 | 8,396 | 1,132 | 178 | 172 |
|
|
@@ -2194,7 +2194,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2194
2194
|
| \`list\` | 29,375 | 9,761 | 8,590 | 1,725 | 343 | 256 |
|
|
2195
2195
|
| \`listbox\` | 94,458 | 30,818 | 25,165 | 10,942 | 2,996 | 2,362 |
|
|
2196
2196
|
| \`loader\` | 28,560 | 9,693 | 8,526 | 900 | 224 | 162 |
|
|
2197
|
-
| \`megamenu\` | 58,768 | 20,
|
|
2197
|
+
| \`megamenu\` | 58,768 | 20,365 | 18,023 | 4,941 | 1,355 | 989 |
|
|
2198
2198
|
| \`menu\` | 114,091 | 38,572 | 32,324 | 8,816 | 2,239 | 1,745 |
|
|
2199
2199
|
| \`meter\` | 31,750 | 10,542 | 9,277 | 4,099 | 1,047 | 882 |
|
|
2200
2200
|
| \`navigation\` | 30,198 | 10,203 | 9,003 | 1,361 | 358 | 280 |
|
|
@@ -2223,7 +2223,7 @@ Structure, accessibility, state and form participation. No presentation, and no
|
|
|
2223
2223
|
| \`stat\` | 28,808 | 9,624 | 8,464 | 1,148 | 189 | 159 |
|
|
2224
2224
|
| \`steps\` | 84,562 | 27,788 | 22,780 | 6,219 | 1,510 | 1,168 |
|
|
2225
2225
|
| \`switch\` | 35,949 | 11,576 | 10,243 | 1,524 | 481 | 350 |
|
|
2226
|
-
| \`table\` | 85,
|
|
2226
|
+
| \`table\` | 85,463 | 28,383 | 23,227 | 9,256 | 2,581 | 2,075 |
|
|
2227
2227
|
| \`tabs\` | 36,077 | 11,569 | 10,198 | 3,925 | 911 | 720 |
|
|
2228
2228
|
| \`tag\` | 75,927 | 25,307 | 20,715 | 897 | 191 | 194 |
|
|
2229
2229
|
| \`textarea\` | 38,454 | 12,148 | 10,669 | 4,026 | 1,101 | 867 |
|
|
@@ -2252,31 +2252,31 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2252
2252
|
| \`app-header\` | 32,804 | 10,624 | 9,379 | 5,121 | 1,226 | 1,076 |
|
|
2253
2253
|
| \`area-chart\` | 82,141 | 27,208 | 24,027 | 18,433 | 5,026 | 4,214 |
|
|
2254
2254
|
| \`aura\` | 94,970 | 32,811 | 28,423 | 66,522 | 23,026 | 19,836 |
|
|
2255
|
-
| \`avatar\` | 34,
|
|
2255
|
+
| \`avatar\` | 34,549 | 11,085 | 9,765 | 6,833 | 1,689 | 1,356 |
|
|
2256
2256
|
| \`badge\` | 31,553 | 10,365 | 9,136 | 4,249 | 1,008 | 847 |
|
|
2257
|
-
| \`bar-chart\` | 89,
|
|
2257
|
+
| \`bar-chart\` | 89,210 | 28,519 | 25,248 | 25,492 | 6,339 | 5,292 |
|
|
2258
2258
|
| \`blockquote\` | 29,620 | 9,970 | 8,765 | 1,914 | 477 | 368 |
|
|
2259
2259
|
| \`breadcrumbs\` | 80,091 | 26,152 | 21,562 | 5,518 | 1,240 | 1,051 |
|
|
2260
2260
|
| \`button\` | 39,024 | 11,978 | 10,565 | 9,212 | 1,934 | 1,662 |
|
|
2261
2261
|
| \`button-group\` | 29,996 | 9,950 | 8,756 | 2,320 | 528 | 499 |
|
|
2262
2262
|
| \`callout\` | 77,642 | 25,753 | 21,314 | 2,895 | 767 | 634 |
|
|
2263
2263
|
| \`card\` | 31,587 | 10,410 | 9,158 | 3,915 | 980 | 943 |
|
|
2264
|
-
| \`carousel\` | 94,
|
|
2264
|
+
| \`carousel\` | 94,840 | 29,701 | 24,624 | 19,980 | 4,320 | 3,700 |
|
|
2265
2265
|
| \`chat\` | 113,049 | 35,489 | 29,342 | 31,432 | 7,585 | 6,423 |
|
|
2266
|
-
| \`checkbox\` | 42,
|
|
2266
|
+
| \`checkbox\` | 42,841 | 13,039 | 11,450 | 8,802 | 2,100 | 1,785 |
|
|
2267
2267
|
| \`checkbox-group\` | 41,537 | 12,854 | 11,324 | 6,981 | 1,839 | 1,407 |
|
|
2268
2268
|
| \`code\` | 28,016 | 9,451 | 8,318 | 1,511 | 366 | 327 |
|
|
2269
2269
|
| \`code-block\` | 137,688 | 43,293 | 36,473 | 33,731 | 7,278 | 6,200 |
|
|
2270
2270
|
| \`color-input\` | 168,628 | 48,951 | 41,328 | 59,311 | 11,851 | 10,104 |
|
|
2271
2271
|
| \`color-picker\` | 130,441 | 37,570 | 31,204 | 47,984 | 9,957 | 8,550 |
|
|
2272
2272
|
| \`combobox\` | 147,122 | 45,410 | 38,194 | 35,172 | 7,737 | 6,383 |
|
|
2273
|
-
| \`command\` | 113,
|
|
2273
|
+
| \`command\` | 113,212 | 34,712 | 28,636 | 28,199 | 6,600 | 5,573 |
|
|
2274
2274
|
| \`copy-button\` | 125,839 | 40,569 | 34,091 | 21,887 | 4,687 | 3,940 |
|
|
2275
|
-
| \`data-table\` | 207,
|
|
2275
|
+
| \`data-table\` | 207,626 | 59,198 | 49,817 | 92,070 | 20,470 | 16,883 |
|
|
2276
2276
|
| \`date-input\` | 146,243 | 45,292 | 38,229 | 34,448 | 7,741 | 6,583 |
|
|
2277
2277
|
| \`date-picker\` | 93,154 | 30,121 | 24,814 | 15,596 | 3,955 | 3,318 |
|
|
2278
2278
|
| \`description-list\` | 30,801 | 10,095 | 8,892 | 3,502 | 774 | 676 |
|
|
2279
|
-
| \`dialog\` | 36,
|
|
2279
|
+
| \`dialog\` | 36,349 | 11,636 | 10,265 | 7,079 | 1,832 | 1,548 |
|
|
2280
2280
|
| \`divider\` | 30,826 | 10,284 | 9,053 | 3,120 | 760 | 643 |
|
|
2281
2281
|
| \`donut-chart\` | 81,645 | 26,464 | 23,449 | 19,364 | 4,953 | 4,204 |
|
|
2282
2282
|
| \`drawer\` | 34,988 | 11,255 | 9,908 | 6,007 | 1,495 | 1,323 |
|
|
@@ -2284,13 +2284,13 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2284
2284
|
| \`empty\` | 29,763 | 9,992 | 8,809 | 2,087 | 540 | 515 |
|
|
2285
2285
|
| \`file-input\` | 98,248 | 30,977 | 25,470 | 17,344 | 3,927 | 3,363 |
|
|
2286
2286
|
| \`filter-input\` | 171,269 | 50,094 | 42,162 | 55,844 | 11,287 | 9,406 |
|
|
2287
|
-
| \`flex\` | 29,
|
|
2287
|
+
| \`flex\` | 29,377 | 9,803 | 8,625 | 2,078 | 459 | 452 |
|
|
2288
2288
|
| \`format-date\` | 32,581 | 10,883 | 9,622 | 3,497 | 860 | 647 |
|
|
2289
|
-
| \`grid\` | 29,
|
|
2289
|
+
| \`grid\` | 29,831 | 9,956 | 8,764 | 2,528 | 615 | 529 |
|
|
2290
2290
|
| \`heatmap\` | 80,558 | 26,185 | 23,262 | 17,832 | 4,543 | 3,743 |
|
|
2291
2291
|
| \`icon\` | 75,854 | 25,190 | 20,767 | 1,641 | 381 | 371 |
|
|
2292
2292
|
| \`icon-button\` | 39,345 | 11,910 | 10,494 | 9,537 | 1,869 | 1,643 |
|
|
2293
|
-
| \`image\` | 32,
|
|
2293
|
+
| \`image\` | 32,195 | 10,599 | 9,341 | 4,840 | 1,306 | 997 |
|
|
2294
2294
|
| \`input\` | 92,448 | 29,682 | 24,353 | 10,938 | 2,630 | 2,130 |
|
|
2295
2295
|
| \`kbd\` | 31,686 | 10,798 | 9,494 | 4,373 | 1,498 | 1,191 |
|
|
2296
2296
|
| \`legend\` | 37,016 | 11,919 | 10,475 | 5,790 | 1,397 | 1,133 |
|
|
@@ -2298,7 +2298,7 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2298
2298
|
| \`list\` | 33,439 | 10,707 | 9,426 | 5,779 | 1,299 | 1,126 |
|
|
2299
2299
|
| \`listbox\` | 98,727 | 31,815 | 26,007 | 15,204 | 3,981 | 3,286 |
|
|
2300
2300
|
| \`loader\` | 31,726 | 10,457 | 9,209 | 4,051 | 989 | 858 |
|
|
2301
|
-
| \`megamenu\` | 63,649 | 21,
|
|
2301
|
+
| \`megamenu\` | 63,649 | 21,440 | 19,005 | 9,805 | 2,426 | 2,038 |
|
|
2302
2302
|
| \`menu\` | 121,468 | 40,143 | 33,700 | 16,174 | 3,760 | 3,098 |
|
|
2303
2303
|
| \`meter\` | 37,148 | 11,685 | 10,324 | 9,479 | 2,209 | 1,942 |
|
|
2304
2304
|
| \`navigation\` | 31,579 | 10,593 | 9,325 | 2,726 | 765 | 611 |
|
|
@@ -2314,8 +2314,8 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2314
2314
|
| \`progress\` | 34,630 | 11,137 | 9,846 | 6,962 | 1,661 | 1,476 |
|
|
2315
2315
|
| \`qr-code\` | 41,913 | 14,435 | 12,705 | 14,628 | 5,111 | 4,374 |
|
|
2316
2316
|
| \`quote\` | 28,498 | 9,609 | 8,455 | 1,191 | 295 | 222 |
|
|
2317
|
-
| \`radio\` |
|
|
2318
|
-
| \`rating\` | 44,
|
|
2317
|
+
| \`radio\` | 46,423 | 13,448 | 11,882 | 11,010 | 2,247 | 1,859 |
|
|
2318
|
+
| \`rating\` | 44,835 | 14,196 | 12,497 | 10,724 | 3,091 | 2,486 |
|
|
2319
2319
|
| \`sandbox\` | 63,540 | 17,409 | 15,411 | 35,445 | 7,795 | 6,587 |
|
|
2320
2320
|
| \`scatter-chart\` | 82,664 | 27,049 | 23,880 | 19,815 | 5,259 | 4,377 |
|
|
2321
2321
|
| \`scroll-area\` | 33,234 | 10,788 | 9,496 | 5,874 | 1,451 | 1,189 |
|
|
@@ -2329,7 +2329,7 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
|
|
|
2329
2329
|
| \`stat\` | 31,624 | 10,248 | 9,065 | 3,954 | 831 | 751 |
|
|
2330
2330
|
| \`steps\` | 98,180 | 30,216 | 24,841 | 19,825 | 3,900 | 3,290 |
|
|
2331
2331
|
| \`switch\` | 40,217 | 12,632 | 11,126 | 5,777 | 1,541 | 1,291 |
|
|
2332
|
-
| \`table\` | 90,
|
|
2332
|
+
| \`table\` | 90,841 | 29,483 | 24,181 | 14,623 | 3,653 | 3,119 |
|
|
2333
2333
|
| \`tabs\` | 42,314 | 12,842 | 11,287 | 10,153 | 2,201 | 1,744 |
|
|
2334
2334
|
| \`tag\` | 79,131 | 26,169 | 21,453 | 4,086 | 1,022 | 831 |
|
|
2335
2335
|
| \`text\` | 31,284 | 10,086 | 8,873 | 3,987 | 798 | 641 |
|
|
@@ -2359,11 +2359,11 @@ column is what was removed rather than part of what remains.
|
|
|
2359
2359
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
2360
2360
|
|---|---|---|---|---|
|
|
2361
2361
|
| \`@fusion.dev/helix-core\` | 878,078 | 129 | 190,771 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
2362
|
-
| \`@fusion.dev/helix-headless\` | 11,
|
|
2362
|
+
| \`@fusion.dev/helix-headless\` | 11,393,601 | 472 | 859,522 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
2363
2363
|
| \`@fusion.dev/helix-icons\` | 65,943 | 11 | 20,928 | none |
|
|
2364
2364
|
| \`@fusion.dev/helix-styles\` | 101,139 | 6 | 0 | none |
|
|
2365
2365
|
| \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
|
|
2366
|
-
| \`@fusion.dev/helix\` | 12,
|
|
2366
|
+
| \`@fusion.dev/helix\` | 12,469,777 | 798 | 339,233 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
2367
2367
|
|
|
2368
2368
|
## Not measured yet
|
|
2369
2369
|
|
|
@@ -3662,8 +3662,8 @@ does not know which it is in; the region does.
|
|
|
3662
3662
|
|
|
3663
3663
|
**Optical role.** Real, and only for things that are not controls. An avatar at
|
|
3664
3664
|
24 in a list and 96 on a profile is a different graphic, not a taller control.
|
|
3665
|
-
That is why \`size\` survives on \`Avatar
|
|
3666
|
-
|
|
3665
|
+
That is why \`size\` survives on \`Avatar\`, \`Loader\` and \`Orb\`: those are
|
|
3666
|
+
pictures.
|
|
3667
3667
|
|
|
3668
3668
|
## The test that settles it
|
|
3669
3669
|
|
|
@@ -3677,6 +3677,10 @@ one element at a time, which is exactly how a row ends up with one member the
|
|
|
3677
3677
|
wrong height. Said once on the region, a ragged row is not discouraged. It is
|
|
3678
3678
|
unwritable.
|
|
3679
3679
|
|
|
3680
|
+
\`Dialog\` keeps a \`size\` by the same test read from the other end. Two dialogs
|
|
3681
|
+
never sit together: one is on screen at a time, in the top layer, so it *is* the
|
|
3682
|
+
region rather than a control in one.
|
|
3683
|
+
|
|
3680
3684
|
That is also what makes this safe for anything generating code, whether that is
|
|
3681
3685
|
a person or a model: there is no size to get wrong, and one question to ask per
|
|
3682
3686
|
region instead of one per element.
|
|
@@ -5079,8 +5083,10 @@ vocabularies. You cannot invent a value, and a component may take a subset.
|
|
|
5079
5083
|
| \`emphasis\` | \`ghost\`, \`muted\`, \`outlined\`, \`solid\`, \`subtle\` |
|
|
5080
5084
|
| \`material\` | \`frosted\`, \`glass\`, \`transparent\` |
|
|
5081
5085
|
| \`nesting\` | \`heading\`, \`peer\`, \`subordinate\` |
|
|
5086
|
+
| \`orientation\` | \`auto\`, \`horizontal\`, \`vertical\` |
|
|
5082
5087
|
| \`separation\` | \`elevated\`, \`filled\`, \`outlined\`, \`plain\` |
|
|
5083
5088
|
| \`shape\` | \`arc\`, \`circle\`, \`dots\`, \`ring\`, \`rounded\`, \`square\`, \`text\` |
|
|
5089
|
+
| \`size\` | \`sm\`, \`md\`, \`lg\`, \`full\` |
|
|
5084
5090
|
| \`tone\` | The status and intent words: \`primary\`, \`accent\`, \`neutral\`, \`danger\`, and so on |
|
|
5085
5091
|
| \`width\` | \`auto\`, \`full\` |
|
|
5086
5092
|
|
|
@@ -5112,8 +5118,8 @@ and a component reintroducing it fails the build.
|
|
|
5112
5118
|
## Two axes, not one
|
|
5113
5119
|
|
|
5114
5120
|
This is the test. \`Megamenu\` is the worked example: a consumer can make the panel
|
|
5115
|
-
glass, which is not an appearance, because \`
|
|
5116
|
-
a layout. A panel can be glass *and* outlined. Two axes.
|
|
5121
|
+
glass, which is not an appearance, because \`band\` already occupies that axis
|
|
5122
|
+
with a layout. A panel can be glass *and* outlined. Two axes.
|
|
5117
5123
|
|
|
5118
5124
|
If you are adding a property and cannot decide which axis it belongs to, that is
|
|
5119
5125
|
usually the answer: it is two properties.
|
|
@@ -5126,7 +5132,7 @@ usually the answer: it is two properties.
|
|
|
5126
5132
|
\`\`\`
|
|
5127
5133
|
|
|
5128
5134
|
\`variant\` takes no registry, being component-specific by definition: \`segmented\`
|
|
5129
|
-
against \`underlined\`, \`list\` against \`wheels\`, \`
|
|
5135
|
+
against \`underlined\`, \`list\` against \`wheels\`, \`grip\` against \`line\`. It is a
|
|
5130
5136
|
choice between two widgets, which is structural wherever it is made, so it lives
|
|
5131
5137
|
on either tier.
|
|
5132
5138
|
|
|
@@ -5142,7 +5148,33 @@ what gets *rendered*: a meter at \`ring\` emits an arc rather than a bar, so the
|
|
|
5142
5148
|
markup differs before any rule is written. \`nesting\` says what depth *is*: a
|
|
5143
5149
|
tree at \`subordinate\` ranks its rows, a tree at \`heading\` makes each branch the
|
|
5144
5150
|
name of the list under it, a file explorer does neither, and that is true of a
|
|
5145
|
-
tree nobody has styled.
|
|
5151
|
+
tree nobody has styled. \`orientation\` is \`shape\`'s reason again: \`aria-orientation\`
|
|
5152
|
+
is markup, and the toolbar, the splitter, the divider and the table column all
|
|
5153
|
+
write it with nothing painted.
|
|
5154
|
+
|
|
5155
|
+
\`size\` is the axis that goes the other way. It is asked of pictures and regions
|
|
5156
|
+
and never of controls, which take their height from the region they sit in
|
|
5157
|
+
through \`data-density\`, so it lives only where something is painted.
|
|
5158
|
+
|
|
5159
|
+
## What each shape is
|
|
5160
|
+
|
|
5161
|
+
\`shape\` is the axis whose values are geometries that look alike in a table and
|
|
5162
|
+
not on a page, so it is worth saying what each one draws.
|
|
5163
|
+
|
|
5164
|
+
| Value | What it draws |
|
|
5165
|
+
|---|---|
|
|
5166
|
+
| \`arc\` | An open curve, a gauge that stops short of a full turn |
|
|
5167
|
+
| \`circle\` | A full round, the whole edge at \`radii-full\` |
|
|
5168
|
+
| \`dots\` | Separate marks rather than one joined figure |
|
|
5169
|
+
| \`ring\` | A closed curve, the whole turn drawn as a band |
|
|
5170
|
+
| \`rounded\` | Corners cut to \`radii-md\`, still a rectangle |
|
|
5171
|
+
| \`square\` | Sharp corners, the pole \`rounded\` departs from |
|
|
5172
|
+
| \`text\` | A line of type's shape, as wide as a line and as tall |
|
|
5173
|
+
|
|
5174
|
+
**\`square\` is not \`rounded\`.** They were one word for a while: an avatar drawing
|
|
5175
|
+
\`radii-md\` called it \`square\` while a QR code drawing sharp modules called it
|
|
5176
|
+
\`square\` too, in the same registered axis. Membership is what a check can see,
|
|
5177
|
+
so nothing could have caught that, and a table is what stops it happening again.
|
|
5146
5178
|
|
|
5147
5179
|
## What a step inward means
|
|
5148
5180
|
|
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.55.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Ross Sheppard <ross.sheppard@fusion.dev>",
|
|
7
7
|
"repository": {
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
},
|
|
37
37
|
"bugs": "https://github.com/project-fusion/fusion/issues",
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@fusion.dev/helix-cem": "0.
|
|
40
|
-
"@fusion.dev/helix-testing": "0.
|
|
39
|
+
"@fusion.dev/helix-cem": "0.55.0",
|
|
40
|
+
"@fusion.dev/helix-testing": "0.55.0",
|
|
41
41
|
"@fusion.dev/scripts": "0.0.0-dev",
|
|
42
42
|
"lit": "^3.2.1",
|
|
43
43
|
"playwright": "^1.62.1"
|