@fusion.dev/helix-docs 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/content/building-on-the-headless-tier.mdx +1 -1
  2. package/content/coding-agents.mdx +3 -3
  3. package/content/installation.mdx +1 -1
  4. package/content/introduction.mdx +1 -1
  5. package/content/metrics.mdx +56 -56
  6. package/content/using-helix-with-an-agent.mdx +4 -4
  7. package/content/using-the-elements.mdx +1 -1
  8. package/content/without-a-bundler.mdx +15 -92
  9. package/dist/sources.generated.js +82 -159
  10. package/package.json +4 -4
package/content/building-on-the-headless-tier.mdx CHANGED
@@ -137,7 +137,7 @@ which is a different and more expensive mechanism: rewriting the tag literals at
137
137
  build time, a second distribution to publish, and an artifact per customer.
138
138
  Nothing on this page needs any of that.
139
139
 
140
- The sovereignty question answers itself in this direction. You hold the
140
+ The ownership question answers itself in this direction. You hold the
141
141
  presentation layer, the tags and the build. If Fusion stopped tomorrow you would
142
142
  keep a working design system and lose upstream fixes to the behavior underneath
143
143
  it.
package/content/coding-agents.mdx CHANGED
@@ -112,9 +112,9 @@ really painted on and reports each pair with its ratio and target, and
112
112
  `helix theme build` does. Pasting one into a stylesheet is worse than reading a
113
113
  warning above it, and an agent does not read warnings.
114
114
 
115
- **You run it and nobody hosts it.** A server we operated would be a dependency
116
- you cannot exit, which the Sovereignty Constraint refuses; this is a subcommand
117
- of a binary you installed, talking to a client you chose, with no network in it.
115
+ **You run it and nobody hosts it.** A server we operated would be one more
116
+ service standing between you and your own tokens; this is a subcommand of a
117
+ binary you installed, talking to a client you chose, with no network in it.
118
118
 
119
119
  ## What is not here
120
120
 
package/content/installation.mdx CHANGED
@@ -19,7 +19,7 @@ rather than an unthemed version of itself.
19
19
  ## The stylesheets go in this order
20
20
 
21
21
  ```ts
22
- import '@fusion.dev/helix/helix.css'
22
+ import '@fusion.dev/helix-styles/helix.css'
23
23
  ```
24
24
 
25
25
  One import, and it is four files in the order they have to be in:
package/content/introduction.mdx CHANGED
@@ -34,7 +34,7 @@ Two imports at your app root, in this order, then the elements are usable
34
34
  anywhere:
35
35
 
36
36
  ```ts
37
- import '@fusion.dev/helix/helix.css'
37
+ import '@fusion.dev/helix-styles/helix.css'
38
38
  import '@fusion.dev/helix'
39
39
  ```
40
40
 
package/content/metrics.mdx CHANGED
@@ -62,7 +62,7 @@ repository does that. The per-component tables are what a page pays.
62
62
  | `@fusion.dev/helix-headless` | 519,154 | 131,672 | 103,150 | 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` | 956,713 | 216,820 | 158,985 | Every styled family. |
65
+ | `@fusion.dev/helix` | 956,682 | 216,821 | 158,914 | 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
@@ -76,16 +76,16 @@ is the whole cost of adopting the base layer on its own.
76
76
  | File | Raw | Gzip | Brotli | |
77
77
  |---|---|---|---|---|
78
78
  | `base.css` | 23,145 | 3,556 | 3,065 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
79
- | `elements.css` | 8,290 | 1,875 | 1,600 | The components' own layer, generated from every family's stylesheet. |
80
- | `all.css` | 179 | 142 | 110 | The three above in one import, in the order they have to be in. |
79
+ | `elements.css` | 7,033 | 1,209 | 1,082 | Hides each element until its definition loads, generated from the tags in `@fusion.dev/helix`. |
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,275 | 1,234 | 1,062 | The primitive layer. Private, shipped because `tokens.css` resolves into it. |
82
- | `tokens.css` | 19,989 | 2,467 | 2,073 | The 185 semantic tokens. Nothing paints without this. |
82
+ | `tokens.css` | 19,989 | 2,460 | 2,044 | The 185 semantic tokens. Nothing paints without this. |
83
83
 
84
84
  ## What the numbers say
85
85
 
86
- **Most of a first component is the runtime under it.** The median styled family is 13,974 bytes gzipped alone and adds 2,409 to a page that already has Helix on it, so 83 percent of the first one is shared and 17 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
86
+ **Most of a first component is the runtime under it.** The median styled family is 13,974 bytes gzipped alone and adds 2,413 to a page that already has Helix on it, so 83 percent of the first one is shared and 17 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
87
87
 
88
- Across the tier: the cheapest is `code` at 9,065 gzipped alone, the dearest `data-table` at 49,868, over 93 components. Every family at once is 216,820.
88
+ Across the tier: the cheapest is `code` at 9,065 gzipped alone, the dearest `data-table` at 49,860, over 93 components. Every family at once is 216,821.
89
89
 
90
90
  **No family imports a barrel, and the `barrels` rule in `fusion workspace` is what keeps it that way.** `@fusion.dev/helix-headless` is `sideEffects` over every module in `dist`, which is true of a file that calls `customElements.define` and which means a bundler may drop none of it: one `import { HelixHeadlessButton } from '@fusion.dev/helix-headless'` costs 131,672 bytes gzipped whatever else the page does, which is 9 times the median family measured above. The styled tier imports the family it extends instead, all 93 of them, and the check refuses the shape rather than the package name, so the rule follows `sideEffects` wherever it goes.
91
91
 
@@ -106,7 +106,7 @@ 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** | 40,821 | 12,584 | 11,091 |
109
+ | `checkbox` | **Helix** | 40,820 | 12,584 | 11,096 |
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 |
@@ -116,12 +116,12 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by `t
116
116
  | | Material Web | 34,238 | 11,510 | 10,229 |
117
117
  | | Shoelace | 52,754 | 17,698 | 15,554 |
118
118
  | | Spectrum | 155,708 | 31,899 | 26,262 |
119
- | `radio` | **Helix** | 43,516 | 12,844 | 11,308 |
119
+ | `radio` | **Helix** | 43,515 | 12,846 | 11,330 |
120
120
  | | Carbon | 63,055 | 16,887 | 14,605 |
121
121
  | | Material Web | 41,044 | 13,234 | 11,757 |
122
122
  | | Shoelace | 34,865 | 12,027 | 10,559 |
123
123
  | | Spectrum | 38,685 | 10,660 | 9,370 |
124
- | `switch` | **Helix** | 38,603 | 12,160 | 10,668 |
124
+ | `switch` | **Helix** | 38,602 | 12,159 | 10,741 |
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 |
@@ -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: `radio`, `switch`, `tooltip`. The largest gap is radio against Spectrum, by 2,184 bytes gzipped. 4 of 28 peer measurements come in under ours.
140
+ **Where Helix loses**, which is the half of a comparison table worth reading: `radio`, `switch`, `tooltip`. The largest gap is radio against Spectrum, by 2,186 bytes gzipped. 4 of 28 peer measurements come in under ours.
141
141
 
142
142
  - **Carbon** `@carbon/web-components@2.61.0`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
143
143
  - **Material Web** `@material/web@2.5.0`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
@@ -282,93 +282,93 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
282
282
  | `app-header` | 30,683 | 10,087 | 8,885 | 4,489 | 1,321 | 939 |
283
283
  | `aura` | 87,842 | 30,863 | 26,680 | 60,879 | 21,464 | 18,478 |
284
284
  | `avatar` | 32,433 | 10,538 | 9,281 | 6,205 | 1,786 | 1,228 |
285
- | `badge` | 29,366 | 9,907 | 8,704 | 3,550 | 1,138 | 799 |
286
- | `bar-chart` | 87,353 | 27,299 | 24,047 | 28,058 | 7,011 | 5,482 |
285
+ | `badge` | 29,366 | 9,905 | 8,715 | 3,550 | 1,137 | 890 |
286
+ | `bar-chart` | 87,351 | 27,296 | 24,053 | 28,056 | 7,008 | 5,399 |
287
287
  | `blockquote` | 28,015 | 9,529 | 8,383 | 2,077 | 760 | 501 |
288
288
  | `breadcrumbs` | 78,416 | 25,590 | 21,198 | 5,334 | 1,458 | 1,082 |
289
289
  | `button` | 37,399 | 11,545 | 10,187 | 9,236 | 2,233 | 1,691 |
290
- | `button-group` | 28,508 | 9,543 | 8,424 | 2,320 | 747 | 427 |
291
- | `callout` | 76,173 | 25,235 | 20,977 | 2,914 | 1,007 | 714 |
292
- | `card` | 30,101 | 10,012 | 8,842 | 3,917 | 1,166 | 887 |
293
- | `carousel` | 89,716 | 28,257 | 23,609 | 16,487 | 3,947 | 3,085 |
290
+ | `button-group` | 28,508 | 9,547 | 8,419 | 2,320 | 751 | 482 |
291
+ | `callout` | 76,172 | 25,232 | 20,980 | 2,913 | 1,001 | 732 |
292
+ | `card` | 30,099 | 10,015 | 8,818 | 3,915 | 1,168 | 883 |
293
+ | `carousel` | 89,716 | 28,261 | 23,587 | 16,487 | 3,951 | 3,073 |
294
294
  | `chat` | 96,458 | 30,119 | 24,932 | 21,033 | 4,917 | 3,844 |
295
- | `checkbox` | 40,821 | 12,584 | 11,091 | 8,411 | 2,392 | 1,715 |
295
+ | `checkbox` | 40,820 | 12,584 | 11,096 | 8,410 | 2,391 | 1,710 |
296
296
  | `checkbox-group` | 39,793 | 12,366 | 10,895 | 6,888 | 2,193 | 1,428 |
297
297
  | `code` | 26,546 | 9,065 | 7,981 | 1,529 | 581 | 379 |
298
- | `code-block` | 126,793 | 40,099 | 33,817 | 25,870 | 5,745 | 4,515 |
299
- | `color-input` | 162,845 | 47,380 | 40,111 | 57,622 | 11,938 | 10,011 |
300
- | `color-picker` | 126,684 | 36,608 | 30,439 | 45,772 | 9,883 | 8,304 |
301
- | `combobox` | 140,948 | 43,524 | 36,682 | 33,925 | 7,926 | 6,268 |
298
+ | `code-block` | 126,792 | 40,099 | 33,850 | 25,869 | 5,746 | 4,543 |
299
+ | `color-input` | 162,845 | 47,382 | 40,160 | 57,622 | 11,940 | 10,003 |
300
+ | `color-picker` | 126,684 | 36,610 | 30,418 | 45,772 | 9,885 | 8,303 |
301
+ | `combobox` | 140,947 | 43,524 | 36,724 | 33,924 | 7,926 | 6,453 |
302
302
  | `command` | 110,979 | 34,028 | 28,065 | 27,611 | 6,899 | 5,511 |
303
- | `copy-button` | 122,915 | 39,507 | 33,361 | 21,994 | 5,157 | 3,937 |
304
- | `data-table` | 171,800 | 49,868 | 42,094 | 65,280 | 14,169 | 11,590 |
305
- | `date-input` | 138,993 | 43,266 | 36,617 | 34,215 | 8,155 | 6,680 |
306
- | `date-picker` | 91,241 | 29,416 | 24,327 | 15,402 | 4,302 | 3,313 |
303
+ | `copy-button` | 122,914 | 39,510 | 33,293 | 21,993 | 5,159 | 3,983 |
304
+ | `data-table` | 171,797 | 49,860 | 42,064 | 65,277 | 14,162 | 11,607 |
305
+ | `date-input` | 138,992 | 43,265 | 36,574 | 34,214 | 8,152 | 6,687 |
306
+ | `date-picker` | 91,241 | 29,414 | 24,351 | 15,402 | 4,300 | 3,321 |
307
307
  | `dialog` | 34,819 | 11,243 | 9,909 | 7,037 | 2,144 | 1,590 |
308
- | `divider` | 29,181 | 9,820 | 8,610 | 3,243 | 1,041 | 725 |
308
+ | `divider` | 29,181 | 9,820 | 8,635 | 3,243 | 1,041 | 695 |
309
309
  | `donut-chart` | 79,399 | 25,131 | 22,173 | 21,457 | 5,445 | 4,066 |
310
- | `drawer` | 33,085 | 10,746 | 9,460 | 5,591 | 1,648 | 1,158 |
310
+ | `drawer` | 33,084 | 10,746 | 9,467 | 5,590 | 1,648 | 1,184 |
311
311
  | `drilldown` | 85,015 | 27,777 | 22,820 | 9,404 | 2,706 | 1,975 |
312
312
  | `empty` | 28,295 | 9,601 | 8,463 | 2,107 | 792 | 560 |
313
- | `file-input` | 96,132 | 30,394 | 25,004 | 16,954 | 4,315 | 3,311 |
313
+ | `file-input` | 96,131 | 30,389 | 24,987 | 16,953 | 4,313 | 3,377 |
314
314
  | `flex` | 27,799 | 9,392 | 8,240 | 1,986 | 667 | 465 |
315
315
  | `format-date` | 31,029 | 10,471 | 9,280 | 3,435 | 1,092 | 676 |
316
316
  | `grid` | 28,326 | 9,564 | 8,449 | 2,511 | 837 | 611 |
317
- | `heatmap` | 72,928 | 24,255 | 21,435 | 14,814 | 4,503 | 3,306 |
317
+ | `heatmap` | 72,928 | 24,253 | 21,460 | 14,814 | 4,500 | 3,282 |
318
318
  | `icon` | 74,256 | 24,607 | 20,394 | 1,528 | 605 | 260 |
319
- | `icon-button` | 37,727 | 11,481 | 10,120 | 9,568 | 2,161 | 1,653 |
319
+ | `icon-button` | 37,726 | 11,481 | 10,096 | 9,567 | 2,164 | 1,609 |
320
320
  | `image` | 30,564 | 10,174 | 8,943 | 4,699 | 1,514 | 1,017 |
321
- | `input` | 90,860 | 29,217 | 23,927 | 10,895 | 2,993 | 2,264 |
322
- | `kbd` | 30,118 | 10,382 | 9,139 | 4,294 | 1,758 | 1,204 |
323
- | `legend` | 34,022 | 11,148 | 9,812 | 5,924 | 1,716 | 1,201 |
321
+ | `input` | 90,859 | 29,219 | 23,962 | 10,894 | 2,996 | 2,166 |
322
+ | `kbd` | 30,118 | 10,380 | 9,130 | 4,294 | 1,758 | 1,234 |
323
+ | `legend` | 34,021 | 11,147 | 9,781 | 5,923 | 1,713 | 1,162 |
324
324
  | `line-chart` | 82,192 | 26,074 | 23,014 | 22,899 | 5,821 | 4,352 |
325
325
  | `list` | 31,940 | 10,292 | 9,050 | 5,770 | 1,514 | 1,193 |
326
326
  | `listbox` | 96,658 | 31,152 | 25,519 | 14,779 | 4,353 | 3,162 |
327
- | `loader` | 30,078 | 10,033 | 8,830 | 3,891 | 1,154 | 903 |
327
+ | `loader` | 30,078 | 10,034 | 8,834 | 3,891 | 1,154 | 851 |
328
328
  | `megamenu` | 60,316 | 20,594 | 18,232 | 9,342 | 2,769 | 2,010 |
329
- | `menu` | 116,491 | 38,410 | 32,480 | 14,285 | 3,707 | 2,816 |
330
- | `meter` | 35,367 | 11,232 | 9,921 | 9,185 | 2,409 | 1,892 |
329
+ | `menu` | 116,491 | 38,409 | 32,510 | 14,285 | 3,707 | 2,833 |
330
+ | `meter` | 35,360 | 11,235 | 9,926 | 9,178 | 2,413 | 1,956 |
331
331
  | `navigation` | 30,214 | 10,212 | 8,987 | 2,949 | 1,059 | 653 |
332
332
  | `notifications` | 92,539 | 29,630 | 24,493 | 16,186 | 4,088 | 3,113 |
333
333
  | `number-input` | 91,816 | 29,585 | 24,291 | 11,928 | 3,384 | 2,533 |
334
334
  | `option` | 32,116 | 10,548 | 9,315 | 5,935 | 1,758 | 1,282 |
335
- | `outline` | 35,566 | 11,583 | 10,246 | 8,251 | 2,549 | 1,842 |
336
- | `pagination` | 149,985 | 45,089 | 38,045 | 43,666 | 9,532 | 7,763 |
335
+ | `outline` | 35,566 | 11,582 | 10,202 | 8,251 | 2,548 | 1,862 |
336
+ | `pagination` | 149,982 | 45,085 | 38,125 | 43,663 | 9,528 | 7,773 |
337
337
  | `pin-input` | 40,676 | 12,803 | 11,279 | 8,259 | 2,653 | 1,870 |
338
- | `popover` | 55,826 | 19,462 | 17,235 | 4,603 | 1,486 | 1,015 |
338
+ | `popover` | 55,826 | 19,462 | 17,177 | 4,603 | 1,485 | 1,034 |
339
339
  | `progress` | 33,160 | 10,749 | 9,508 | 6,978 | 1,941 | 1,447 |
340
340
  | `qr-code` | 40,238 | 13,974 | 12,313 | 14,441 | 5,377 | 4,488 |
341
341
  | `quote` | 27,030 | 9,207 | 8,088 | 1,211 | 543 | 279 |
342
- | `radio` | 43,516 | 12,844 | 11,308 | 10,669 | 2,567 | 1,892 |
342
+ | `radio` | 43,515 | 12,846 | 11,330 | 10,668 | 2,569 | 1,911 |
343
343
  | `rating` | 41,008 | 13,169 | 11,612 | 8,574 | 2,933 | 2,137 |
344
344
  | `sandbox` | 60,999 | 16,779 | 14,889 | 34,537 | 8,003 | 6,518 |
345
345
  | `scroll-area` | 31,431 | 10,376 | 9,102 | 5,561 | 1,739 | 1,152 |
346
- | `select` | 133,744 | 42,058 | 35,488 | 27,551 | 6,627 | 5,190 |
346
+ | `select` | 133,741 | 42,054 | 35,483 | 27,548 | 6,622 | 5,236 |
347
347
  | `skeleton` | 28,062 | 9,544 | 8,416 | 2,242 | 826 | 495 |
348
- | `slider` | 47,778 | 13,857 | 12,277 | 15,115 | 3,567 | 2,855 |
349
- | `sparkline` | 35,412 | 12,015 | 10,603 | 6,285 | 2,001 | 1,540 |
350
- | `speed-dial` | 110,306 | 36,504 | 30,886 | 11,251 | 2,712 | 1,998 |
348
+ | `slider` | 47,778 | 13,853 | 12,267 | 15,115 | 3,565 | 2,777 |
349
+ | `sparkline` | 35,411 | 12,016 | 10,618 | 6,284 | 2,004 | 1,556 |
350
+ | `speed-dial` | 110,306 | 36,505 | 30,879 | 11,251 | 2,715 | 1,998 |
351
351
  | `splitter` | 42,441 | 12,678 | 11,269 | 16,259 | 3,937 | 3,152 |
352
352
  | `stat` | 29,954 | 9,789 | 8,646 | 3,774 | 1,008 | 646 |
353
- | `steps` | 96,252 | 29,575 | 24,410 | 19,643 | 4,202 | 3,353 |
354
- | `switch` | 38,603 | 12,160 | 10,668 | 6,072 | 1,891 | 1,318 |
353
+ | `steps` | 96,250 | 29,577 | 24,391 | 19,641 | 4,203 | 3,318 |
354
+ | `switch` | 38,602 | 12,159 | 10,741 | 6,071 | 1,892 | 1,319 |
355
355
  | `table` | 35,190 | 10,865 | 9,580 | 7,692 | 1,916 | 1,378 |
356
356
  | `tabs` | 40,196 | 12,348 | 10,882 | 10,719 | 2,597 | 1,971 |
357
- | `tag` | 77,633 | 25,634 | 21,148 | 4,076 | 1,245 | 995 |
357
+ | `tag` | 77,632 | 25,630 | 21,117 | 4,075 | 1,238 | 981 |
358
358
  | `text` | 29,734 | 9,670 | 8,508 | 3,922 | 958 | 605 |
359
359
  | `textarea` | 40,350 | 12,544 | 11,034 | 7,447 | 2,227 | 1,615 |
360
- | `time-input` | 156,103 | 46,933 | 39,629 | 48,526 | 11,002 | 8,943 |
360
+ | `time-input` | 156,102 | 46,926 | 39,555 | 48,525 | 10,996 | 9,070 |
361
361
  | `time-picker` | 111,867 | 34,716 | 28,718 | 29,452 | 7,606 | 6,047 |
362
362
  | `timeline` | 78,237 | 25,530 | 21,180 | 5,151 | 1,368 | 987 |
363
- | `toast` | 85,449 | 27,484 | 22,691 | 11,274 | 2,862 | 2,168 |
364
- | `toggle` | 43,243 | 13,254 | 11,675 | 8,954 | 2,500 | 1,868 |
363
+ | `toast` | 85,446 | 27,485 | 22,753 | 11,271 | 2,866 | 2,249 |
364
+ | `toggle` | 43,242 | 13,258 | 11,703 | 8,953 | 2,508 | 1,907 |
365
365
  | `toolbar` | 29,632 | 10,054 | 8,841 | 3,813 | 1,472 | 927 |
366
366
  | `tooltip` | 60,498 | 20,576 | 18,184 | 9,763 | 2,943 | 2,067 |
367
367
  | `tour` | 71,822 | 22,543 | 19,985 | 20,127 | 4,596 | 3,533 |
368
368
  | `tree` | 89,446 | 29,019 | 23,862 | 12,065 | 3,540 | 2,672 |
369
- | `trend` | 76,798 | 25,221 | 20,884 | 4,083 | 1,164 | 829 |
370
- | `video` | 150,914 | 45,855 | 38,950 | 48,454 | 10,826 | 9,182 |
371
- | `video-playlist` | 130,351 | 40,960 | 34,695 | 26,741 | 5,894 | 4,699 |
369
+ | `trend` | 76,798 | 25,221 | 20,897 | 4,083 | 1,164 | 832 |
370
+ | `video` | 150,914 | 45,853 | 38,970 | 48,454 | 10,825 | 9,158 |
371
+ | `video-playlist` | 130,350 | 40,959 | 34,676 | 26,740 | 5,892 | 4,744 |
372
372
  | `virtual-list` | 30,546 | 10,470 | 9,192 | 2,904 | 1,155 | 760 |
373
373
 
374
374
  ## What lands in `node_modules`
@@ -382,11 +382,11 @@ column is what was removed rather than part of what remains.
382
382
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
383
383
  |---|---|---|---|---|
384
384
  | `@fusion.dev/helix-core` | 655,135 | 113 | 154,658 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
385
- | `@fusion.dev/helix-headless` | 8,636,163 | 422 | 699,239 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
385
+ | `@fusion.dev/helix-headless` | 8,354,890 | 422 | 698,334 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
386
386
  | `@fusion.dev/helix-icons` | 65,943 | 11 | 20,928 | none |
387
- | `@fusion.dev/helix-styles` | 83,277 | 5 | 0 | none |
387
+ | `@fusion.dev/helix-styles` | 90,338 | 6 | 0 | none |
388
388
  | `@fusion.dev/helix-theme` | 461,551 | 8 | 4,699 | none |
389
- | `@fusion.dev/helix` | 9,306,931 | 718 | 278,170 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
389
+ | `@fusion.dev/helix` | 9,277,277 | 716 | 278,077 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
390
390
 
391
391
  ## Not measured yet
392
392
 
package/content/using-helix-with-an-agent.mdx CHANGED
@@ -105,7 +105,7 @@ attribute, so the attribute selector paints it as live while it refuses input.
105
105
  ### 4. Two stylesheets, then the elements
106
106
 
107
107
  ```ts
108
- import '@fusion.dev/helix/helix.css'
108
+ import '@fusion.dev/helix-styles/helix.css'
109
109
  import '@fusion.dev/helix'
110
110
  ```
111
111
 
@@ -124,7 +124,7 @@ declares `--helix-color-*` at all, while without `primitives.css` all 185
124
124
  semantic tokens are declared and every color resolves to `rgba(0, 0, 0, 0)`,
125
125
  since `tokens.css` refers to a primitive 297 times and to nothing else. The
126
126
  second is the one that looks like a working install, and it is the reason
127
- `all.css` exists.
127
+ `helix.css` exists.
128
128
 
129
129
  ## Choosing a family
130
130
 
@@ -197,8 +197,8 @@ for the API.
197
197
  | GitHub Copilot | `.github/copilot-instructions.md` |
198
198
  | Anything else | Whatever it reads. The line is the same |
199
199
 
200
- **We do not write those files for you**, and that is the Sovereignty Constraint
201
- rather than laziness: a file we generate into your repository is one you then
200
+ **We do not write those files for you**, and that is deliberate rather than
201
+ lazy: a file we generate into your repository is one you then
202
202
  maintain against our changes, and a tool that rewrites it on install is a
203
203
  dependency you did not ask for in a directory you own. The line above is yours to
204
204
  paste and yours to delete.
package/content/using-the-elements.mdx CHANGED
@@ -90,7 +90,7 @@ would not be a design system.
90
90
 
91
91
  ```ts
92
92
  import '@fusion.dev/helix-styles/base.css'
93
- import '@fusion.dev/helix/elements.css'
93
+ import '@fusion.dev/helix-styles/helix.css'
94
94
  ```
95
95
 
96
96
  It hides each tag with `:not(:defined)` until it upgrades, using `visibility` so
package/content/without-a-bundler.mdx CHANGED
@@ -15,104 +15,27 @@ no build step at all. Two ways, and they suit different things.
15
15
 
16
16
  ```html
17
17
  <link
18
- href="/vendor/helix/all.css"
18
+ href="/vendor/helix-styles/helix.css"
19
19
  rel="stylesheet"
20
20
  />
21
-
22
- <button
23
- data-button="solid"
24
- data-button-tone="primary"
25
- >Save</button>
26
- <div data-card>
27
- <h2>A card</h2>
28
- <p data-prose>Written in your own markup.</p>
29
- </div>
30
- ```
31
-
32
- `@fusion.dev/helix-styles` has no dependencies and no JavaScript. It carries the token
33
- layer, the element reset, the type scale on bare headings, and recipes for
34
- markup this library does not render, so a page can look like Helix without a
35
- single custom element on it.
36
-
37
- This is a real way to adopt Helix rather than a fallback, and it is the whole of
38
- what some pages need. See [Recipes](./recipes) for what the base layer provides.
39
-
40
- ## The elements, through an import map
41
-
42
- ```html
43
- <script type="importmap">
44
- {
45
- "imports": {
46
- "@fusion.dev/helix": "/vendor/helix/styled/dist/index.js",
47
- "@fusion.dev/helix-core": "/vendor/helix/core/dist/index.js",
48
- "@fusion.dev/helix-icons": "/vendor/helix/icons/dist/index.js",
49
- "lit": "/vendor/lit/index.js"
50
- }
51
- }
52
- </script>
53
- <script type="module">
54
- import '@fusion.dev/helix'
55
- </script>
56
- ```
57
-
58
- The components are built on Lit, so `lit` has to resolve too. That is the part
59
- that makes an import map necessary rather than optional: the package's own
60
- imports are bare specifiers, and a browser needs to be told where each one is.
61
-
62
- **Copy the files, do not point at a CDN.** An import map pointing at someone
63
- else's server makes your page stop working when theirs does, which is the
64
- dependency the Sovereignty Constraint exists to refuse. `bun add` and then copy
65
- `node_modules/@fusion.dev/helix-*/dist` into whatever you serve.
66
-
67
- ## What this costs
68
-
69
- **Every element ships, whether the page uses one or not.** A bundler is what
70
- drops the components you never wrote, and without one the browser fetches the
71
- whole library. Fine for an internal tool or a prototype; not what you want on a
72
- landing page.
73
-
74
- You can narrow it by importing subpaths instead:
75
-
76
- ```js
77
- import '@fusion.dev/helix/button'
78
- import '@fusion.dev/helix/dialog'
79
21
  ```
80
22
 
81
- Each still pulls its own dependencies, so this is a reduction rather than a
82
- minimum, but for a page using five components it is a large one.
83
-
84
- **No TypeScript, so no typings.** A misspelled property is silent here where it
85
- is a compile error in React, Vue and Svelte, which is worth a note in review.
86
- Nothing else about writing Helix changes: a declared property is a seed and the
87
- element applies its own changes. See [State and
88
- control](./state-and-control).
89
-
90
- ## The stylesheets are the same
91
-
92
- ```html
93
- <link
94
- href="/vendor/helix/all.css"
95
- rel="stylesheet"
96
- />
97
- <link
98
- href="/vendor/helix/styled/elements.css"
99
- rel="stylesheet"
100
- />
101
- ```
102
-
103
- `all.css` carries `primitives.css`, `tokens.css` and `base.css` in the order they
104
- have to be in, and its `@import`s are relative, so a browser resolves them
105
- against the stylesheet's own URL with no bundler involved. Copy the whole
106
- `dist` folder and link the one file. Verified in Chromium: one `<link>` produces
107
- four requests and both layers resolve.
23
+ `helix.css` carries `primitives.css`, `tokens.css`, `base.css` and
24
+ `elements.css` in the order they have to be in, and its `@import`s are relative,
25
+ so a browser resolves them against the stylesheet's own URL with no bundler
26
+ involved. Copy the whole `dist` folder and link the one file. Verified in
27
+ Chromium: one `<link>` produces five requests and every layer resolves.
108
28
 
109
29
  *This page listed `tokens.css` and `base.css` and no `primitives.css` until 24
110
30
  Aug 2026. `tokens.css` refers to a primitive 297 times and imports nothing, so a
111
31
  reader who followed that got all 185 semantic tokens declared and every color
112
32
  resolving to `rgba(0, 0, 0, 0)`. If your page looks unstyled in exactly that
113
- way, link `all.css` instead.*
114
-
115
- `elements.css` stays its own link, being `@fusion.dev/helix`'s rather than this
116
- package's, and it matters more here than anywhere: with no bundler the module
117
- graph arrives over the network, so the interval where the markup exists and the
118
- definitions do not is longer than it is in a built app.
33
+ way, link `helix.css` instead.*
34
+
35
+ **`elements.css` matters more here than anywhere**, and it is the fourth layer
36
+ `helix.css` pulls in: with no bundler the module graph arrives over the network,
37
+ so the interval where the markup exists and the definitions do not is longer
38
+ than it is in a built app. It was a second link until it moved into this package,
39
+ which is what let the import become relative. A bare specifier in an `@import`
40
+ is resolved by a bundler and never by a browser, so on this page of all pages it
41
+ could not have been one.
package/dist/sources.generated.js CHANGED
@@ -401,7 +401,7 @@ which is a different and more expensive mechanism: rewriting the tag literals at
401
401
  build time, a second distribution to publish, and an artifact per customer.
402
402
  Nothing on this page needs any of that.
403
403
 
404
- The sovereignty question answers itself in this direction. You hold the
404
+ The ownership question answers itself in this direction. You hold the
405
405
  presentation layer, the tags and the build. If Fusion stopped tomorrow you would
406
406
  keep a working design system and lose upstream fixes to the behavior underneath
407
407
  it.
@@ -610,9 +610,9 @@ really painted on and reports each pair with its ratio and target, and
610
610
  \`helix theme build\` does. Pasting one into a stylesheet is worse than reading a
611
611
  warning above it, and an agent does not read warnings.
612
612
 
613
- **You run it and nobody hosts it.** A server we operated would be a dependency
614
- you cannot exit, which the Sovereignty Constraint refuses; this is a subcommand
615
- of a binary you installed, talking to a client you chose, with no network in it.
613
+ **You run it and nobody hosts it.** A server we operated would be one more
614
+ service standing between you and your own tokens; this is a subcommand of a
615
+ binary you installed, talking to a client you chose, with no network in it.
616
616
 
617
617
  ## What is not here
618
618
 
@@ -1475,7 +1475,7 @@ rather than an unthemed version of itself.
1475
1475
  ## The stylesheets go in this order
1476
1476
 
1477
1477
  \`\`\`ts
1478
- import '@fusion.dev/helix/helix.css'
1478
+ import '@fusion.dev/helix-styles/helix.css'
1479
1479
  \`\`\`
1480
1480
 
1481
1481
  One import, and it is four files in the order they have to be in:
@@ -1722,7 +1722,7 @@ Two imports at your app root, in this order, then the elements are usable
1722
1722
  anywhere:
1723
1723
 
1724
1724
  \`\`\`ts
1725
- import '@fusion.dev/helix/helix.css'
1725
+ import '@fusion.dev/helix-styles/helix.css'
1726
1726
  import '@fusion.dev/helix'
1727
1727
  \`\`\`
1728
1728
 
@@ -1916,7 +1916,7 @@ repository does that. The per-component tables are what a page pays.
1916
1916
  | \`@fusion.dev/helix-headless\` | 519,154 | 131,672 | 103,150 | Every headless family, which is what the barrel means. |
1917
1917
  | \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
1918
1918
  | \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
1919
- | \`@fusion.dev/helix\` | 956,713 | 216,820 | 158,985 | Every styled family. |
1919
+ | \`@fusion.dev/helix\` | 956,682 | 216,821 | 158,914 | Every styled family. |
1920
1920
  | \`lit\` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
1921
1921
 
1922
1922
  ## The stylesheets
@@ -1930,16 +1930,16 @@ is the whole cost of adopting the base layer on its own.
1930
1930
  | File | Raw | Gzip | Brotli | |
1931
1931
  |---|---|---|---|---|
1932
1932
  | \`base.css\` | 23,145 | 3,556 | 3,065 | The base layer. Recipes for markup Helix does not render, usable with no JavaScript at all. |
1933
- | \`elements.css\` | 8,290 | 1,875 | 1,600 | The components' own layer, generated from every family's stylesheet. |
1934
- | \`all.css\` | 179 | 142 | 110 | The three above in one import, in the order they have to be in. |
1933
+ | \`elements.css\` | 7,033 | 1,209 | 1,082 | Hides each element until its definition loads, generated from the tags in \`@fusion.dev/helix\`. |
1934
+ | \`helix.css\` | 207 | 148 | 118 | The four above in one import, in the order they have to be in. |
1935
1935
  | \`primitives.css\` | 6,275 | 1,234 | 1,062 | The primitive layer. Private, shipped because \`tokens.css\` resolves into it. |
1936
- | \`tokens.css\` | 19,989 | 2,467 | 2,073 | The 185 semantic tokens. Nothing paints without this. |
1936
+ | \`tokens.css\` | 19,989 | 2,460 | 2,044 | The 185 semantic tokens. Nothing paints without this. |
1937
1937
 
1938
1938
  ## What the numbers say
1939
1939
 
1940
- **Most of a first component is the runtime under it.** The median styled family is 13,974 bytes gzipped alone and adds 2,409 to a page that already has Helix on it, so 83 percent of the first one is shared and 17 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
1940
+ **Most of a first component is the runtime under it.** The median styled family is 13,974 bytes gzipped alone and adds 2,413 to a page that already has Helix on it, so 83 percent of the first one is shared and 17 percent is the component. Ten typical components are one plus nine additions rather than ten of the first number, and the pair of columns below is what lets that be worked out rather than guessed.
1941
1941
 
1942
- Across the tier: the cheapest is \`code\` at 9,065 gzipped alone, the dearest \`data-table\` at 49,868, over 93 components. Every family at once is 216,820.
1942
+ Across the tier: the cheapest is \`code\` at 9,065 gzipped alone, the dearest \`data-table\` at 49,860, over 93 components. Every family at once is 216,821.
1943
1943
 
1944
1944
  **No family imports a barrel, and the \`barrels\` rule in \`fusion workspace\` is what keeps it that way.** \`@fusion.dev/helix-headless\` is \`sideEffects\` over every module in \`dist\`, which is true of a file that calls \`customElements.define\` and which means a bundler may drop none of it: one \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 131,672 bytes gzipped whatever else the page does, which is 9 times the median family measured above. The styled tier imports the family it extends instead, all 93 of them, and the check refuses the shape rather than the package name, so the rule follows \`sideEffects\` wherever it goes.
1945
1945
 
@@ -1960,7 +1960,7 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
1960
1960
  | | Material Web | 47,060 | 14,173 | 12,591 |
1961
1961
  | | Shoelace | 62,628 | 18,287 | 15,805 |
1962
1962
  | | Spectrum | 98,792 | 22,045 | 18,674 |
1963
- | \`checkbox\` | **Helix** | 40,821 | 12,584 | 11,091 |
1963
+ | \`checkbox\` | **Helix** | 40,820 | 12,584 | 11,096 |
1964
1964
  | | Carbon | 60,255 | 15,609 | 13,550 |
1965
1965
  | | Material Web | 43,785 | 13,556 | 12,015 |
1966
1966
  | | Shoelace | 47,614 | 15,177 | 13,301 |
@@ -1970,12 +1970,12 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
1970
1970
  | | Material Web | 34,238 | 11,510 | 10,229 |
1971
1971
  | | Shoelace | 52,754 | 17,698 | 15,554 |
1972
1972
  | | Spectrum | 155,708 | 31,899 | 26,262 |
1973
- | \`radio\` | **Helix** | 43,516 | 12,844 | 11,308 |
1973
+ | \`radio\` | **Helix** | 43,515 | 12,846 | 11,330 |
1974
1974
  | | Carbon | 63,055 | 16,887 | 14,605 |
1975
1975
  | | Material Web | 41,044 | 13,234 | 11,757 |
1976
1976
  | | Shoelace | 34,865 | 12,027 | 10,559 |
1977
1977
  | | Spectrum | 38,685 | 10,660 | 9,370 |
1978
- | \`switch\` | **Helix** | 38,603 | 12,160 | 10,668 |
1978
+ | \`switch\` | **Helix** | 38,602 | 12,159 | 10,741 |
1979
1979
  | | Carbon | 69,423 | 17,127 | 14,764 |
1980
1980
  | | Material Web | 50,155 | 14,577 | 12,935 |
1981
1981
  | | Shoelace | 37,833 | 11,814 | 10,568 |
@@ -1991,7 +1991,7 @@ Four other libraries of custom elements, pinned and measured on 2026-08-24 by \`
1991
1991
  | | Shoelace | 57,412 | 20,220 | 17,933 |
1992
1992
  | | Spectrum | 136,599 | 40,552 | 35,286 |
1993
1993
 
1994
- **Where Helix loses**, which is the half of a comparison table worth reading: \`radio\`, \`switch\`, \`tooltip\`. The largest gap is radio against Spectrum, by 2,184 bytes gzipped. 4 of 28 peer measurements come in under ours.
1994
+ **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,186 bytes gzipped. 4 of 28 peer measurements come in under ours.
1995
1995
 
1996
1996
  - **Carbon** \`@carbon/web-components@2.61.0\`. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle.
1997
1997
  - **Material Web** \`@material/web@2.5.0\`. Ships no tooltip. Its button is measured as the filled one, there being no single button element.
@@ -2136,93 +2136,93 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
2136
2136
  | \`app-header\` | 30,683 | 10,087 | 8,885 | 4,489 | 1,321 | 939 |
2137
2137
  | \`aura\` | 87,842 | 30,863 | 26,680 | 60,879 | 21,464 | 18,478 |
2138
2138
  | \`avatar\` | 32,433 | 10,538 | 9,281 | 6,205 | 1,786 | 1,228 |
2139
- | \`badge\` | 29,366 | 9,907 | 8,704 | 3,550 | 1,138 | 799 |
2140
- | \`bar-chart\` | 87,353 | 27,299 | 24,047 | 28,058 | 7,011 | 5,482 |
2139
+ | \`badge\` | 29,366 | 9,905 | 8,715 | 3,550 | 1,137 | 890 |
2140
+ | \`bar-chart\` | 87,351 | 27,296 | 24,053 | 28,056 | 7,008 | 5,399 |
2141
2141
  | \`blockquote\` | 28,015 | 9,529 | 8,383 | 2,077 | 760 | 501 |
2142
2142
  | \`breadcrumbs\` | 78,416 | 25,590 | 21,198 | 5,334 | 1,458 | 1,082 |
2143
2143
  | \`button\` | 37,399 | 11,545 | 10,187 | 9,236 | 2,233 | 1,691 |
2144
- | \`button-group\` | 28,508 | 9,543 | 8,424 | 2,320 | 747 | 427 |
2145
- | \`callout\` | 76,173 | 25,235 | 20,977 | 2,914 | 1,007 | 714 |
2146
- | \`card\` | 30,101 | 10,012 | 8,842 | 3,917 | 1,166 | 887 |
2147
- | \`carousel\` | 89,716 | 28,257 | 23,609 | 16,487 | 3,947 | 3,085 |
2144
+ | \`button-group\` | 28,508 | 9,547 | 8,419 | 2,320 | 751 | 482 |
2145
+ | \`callout\` | 76,172 | 25,232 | 20,980 | 2,913 | 1,001 | 732 |
2146
+ | \`card\` | 30,099 | 10,015 | 8,818 | 3,915 | 1,168 | 883 |
2147
+ | \`carousel\` | 89,716 | 28,261 | 23,587 | 16,487 | 3,951 | 3,073 |
2148
2148
  | \`chat\` | 96,458 | 30,119 | 24,932 | 21,033 | 4,917 | 3,844 |
2149
- | \`checkbox\` | 40,821 | 12,584 | 11,091 | 8,411 | 2,392 | 1,715 |
2149
+ | \`checkbox\` | 40,820 | 12,584 | 11,096 | 8,410 | 2,391 | 1,710 |
2150
2150
  | \`checkbox-group\` | 39,793 | 12,366 | 10,895 | 6,888 | 2,193 | 1,428 |
2151
2151
  | \`code\` | 26,546 | 9,065 | 7,981 | 1,529 | 581 | 379 |
2152
- | \`code-block\` | 126,793 | 40,099 | 33,817 | 25,870 | 5,745 | 4,515 |
2153
- | \`color-input\` | 162,845 | 47,380 | 40,111 | 57,622 | 11,938 | 10,011 |
2154
- | \`color-picker\` | 126,684 | 36,608 | 30,439 | 45,772 | 9,883 | 8,304 |
2155
- | \`combobox\` | 140,948 | 43,524 | 36,682 | 33,925 | 7,926 | 6,268 |
2152
+ | \`code-block\` | 126,792 | 40,099 | 33,850 | 25,869 | 5,746 | 4,543 |
2153
+ | \`color-input\` | 162,845 | 47,382 | 40,160 | 57,622 | 11,940 | 10,003 |
2154
+ | \`color-picker\` | 126,684 | 36,610 | 30,418 | 45,772 | 9,885 | 8,303 |
2155
+ | \`combobox\` | 140,947 | 43,524 | 36,724 | 33,924 | 7,926 | 6,453 |
2156
2156
  | \`command\` | 110,979 | 34,028 | 28,065 | 27,611 | 6,899 | 5,511 |
2157
- | \`copy-button\` | 122,915 | 39,507 | 33,361 | 21,994 | 5,157 | 3,937 |
2158
- | \`data-table\` | 171,800 | 49,868 | 42,094 | 65,280 | 14,169 | 11,590 |
2159
- | \`date-input\` | 138,993 | 43,266 | 36,617 | 34,215 | 8,155 | 6,680 |
2160
- | \`date-picker\` | 91,241 | 29,416 | 24,327 | 15,402 | 4,302 | 3,313 |
2157
+ | \`copy-button\` | 122,914 | 39,510 | 33,293 | 21,993 | 5,159 | 3,983 |
2158
+ | \`data-table\` | 171,797 | 49,860 | 42,064 | 65,277 | 14,162 | 11,607 |
2159
+ | \`date-input\` | 138,992 | 43,265 | 36,574 | 34,214 | 8,152 | 6,687 |
2160
+ | \`date-picker\` | 91,241 | 29,414 | 24,351 | 15,402 | 4,300 | 3,321 |
2161
2161
  | \`dialog\` | 34,819 | 11,243 | 9,909 | 7,037 | 2,144 | 1,590 |
2162
- | \`divider\` | 29,181 | 9,820 | 8,610 | 3,243 | 1,041 | 725 |
2162
+ | \`divider\` | 29,181 | 9,820 | 8,635 | 3,243 | 1,041 | 695 |
2163
2163
  | \`donut-chart\` | 79,399 | 25,131 | 22,173 | 21,457 | 5,445 | 4,066 |
2164
- | \`drawer\` | 33,085 | 10,746 | 9,460 | 5,591 | 1,648 | 1,158 |
2164
+ | \`drawer\` | 33,084 | 10,746 | 9,467 | 5,590 | 1,648 | 1,184 |
2165
2165
  | \`drilldown\` | 85,015 | 27,777 | 22,820 | 9,404 | 2,706 | 1,975 |
2166
2166
  | \`empty\` | 28,295 | 9,601 | 8,463 | 2,107 | 792 | 560 |
2167
- | \`file-input\` | 96,132 | 30,394 | 25,004 | 16,954 | 4,315 | 3,311 |
2167
+ | \`file-input\` | 96,131 | 30,389 | 24,987 | 16,953 | 4,313 | 3,377 |
2168
2168
  | \`flex\` | 27,799 | 9,392 | 8,240 | 1,986 | 667 | 465 |
2169
2169
  | \`format-date\` | 31,029 | 10,471 | 9,280 | 3,435 | 1,092 | 676 |
2170
2170
  | \`grid\` | 28,326 | 9,564 | 8,449 | 2,511 | 837 | 611 |
2171
- | \`heatmap\` | 72,928 | 24,255 | 21,435 | 14,814 | 4,503 | 3,306 |
2171
+ | \`heatmap\` | 72,928 | 24,253 | 21,460 | 14,814 | 4,500 | 3,282 |
2172
2172
  | \`icon\` | 74,256 | 24,607 | 20,394 | 1,528 | 605 | 260 |
2173
- | \`icon-button\` | 37,727 | 11,481 | 10,120 | 9,568 | 2,161 | 1,653 |
2173
+ | \`icon-button\` | 37,726 | 11,481 | 10,096 | 9,567 | 2,164 | 1,609 |
2174
2174
  | \`image\` | 30,564 | 10,174 | 8,943 | 4,699 | 1,514 | 1,017 |
2175
- | \`input\` | 90,860 | 29,217 | 23,927 | 10,895 | 2,993 | 2,264 |
2176
- | \`kbd\` | 30,118 | 10,382 | 9,139 | 4,294 | 1,758 | 1,204 |
2177
- | \`legend\` | 34,022 | 11,148 | 9,812 | 5,924 | 1,716 | 1,201 |
2175
+ | \`input\` | 90,859 | 29,219 | 23,962 | 10,894 | 2,996 | 2,166 |
2176
+ | \`kbd\` | 30,118 | 10,380 | 9,130 | 4,294 | 1,758 | 1,234 |
2177
+ | \`legend\` | 34,021 | 11,147 | 9,781 | 5,923 | 1,713 | 1,162 |
2178
2178
  | \`line-chart\` | 82,192 | 26,074 | 23,014 | 22,899 | 5,821 | 4,352 |
2179
2179
  | \`list\` | 31,940 | 10,292 | 9,050 | 5,770 | 1,514 | 1,193 |
2180
2180
  | \`listbox\` | 96,658 | 31,152 | 25,519 | 14,779 | 4,353 | 3,162 |
2181
- | \`loader\` | 30,078 | 10,033 | 8,830 | 3,891 | 1,154 | 903 |
2181
+ | \`loader\` | 30,078 | 10,034 | 8,834 | 3,891 | 1,154 | 851 |
2182
2182
  | \`megamenu\` | 60,316 | 20,594 | 18,232 | 9,342 | 2,769 | 2,010 |
2183
- | \`menu\` | 116,491 | 38,410 | 32,480 | 14,285 | 3,707 | 2,816 |
2184
- | \`meter\` | 35,367 | 11,232 | 9,921 | 9,185 | 2,409 | 1,892 |
2183
+ | \`menu\` | 116,491 | 38,409 | 32,510 | 14,285 | 3,707 | 2,833 |
2184
+ | \`meter\` | 35,360 | 11,235 | 9,926 | 9,178 | 2,413 | 1,956 |
2185
2185
  | \`navigation\` | 30,214 | 10,212 | 8,987 | 2,949 | 1,059 | 653 |
2186
2186
  | \`notifications\` | 92,539 | 29,630 | 24,493 | 16,186 | 4,088 | 3,113 |
2187
2187
  | \`number-input\` | 91,816 | 29,585 | 24,291 | 11,928 | 3,384 | 2,533 |
2188
2188
  | \`option\` | 32,116 | 10,548 | 9,315 | 5,935 | 1,758 | 1,282 |
2189
- | \`outline\` | 35,566 | 11,583 | 10,246 | 8,251 | 2,549 | 1,842 |
2190
- | \`pagination\` | 149,985 | 45,089 | 38,045 | 43,666 | 9,532 | 7,763 |
2189
+ | \`outline\` | 35,566 | 11,582 | 10,202 | 8,251 | 2,548 | 1,862 |
2190
+ | \`pagination\` | 149,982 | 45,085 | 38,125 | 43,663 | 9,528 | 7,773 |
2191
2191
  | \`pin-input\` | 40,676 | 12,803 | 11,279 | 8,259 | 2,653 | 1,870 |
2192
- | \`popover\` | 55,826 | 19,462 | 17,235 | 4,603 | 1,486 | 1,015 |
2192
+ | \`popover\` | 55,826 | 19,462 | 17,177 | 4,603 | 1,485 | 1,034 |
2193
2193
  | \`progress\` | 33,160 | 10,749 | 9,508 | 6,978 | 1,941 | 1,447 |
2194
2194
  | \`qr-code\` | 40,238 | 13,974 | 12,313 | 14,441 | 5,377 | 4,488 |
2195
2195
  | \`quote\` | 27,030 | 9,207 | 8,088 | 1,211 | 543 | 279 |
2196
- | \`radio\` | 43,516 | 12,844 | 11,308 | 10,669 | 2,567 | 1,892 |
2196
+ | \`radio\` | 43,515 | 12,846 | 11,330 | 10,668 | 2,569 | 1,911 |
2197
2197
  | \`rating\` | 41,008 | 13,169 | 11,612 | 8,574 | 2,933 | 2,137 |
2198
2198
  | \`sandbox\` | 60,999 | 16,779 | 14,889 | 34,537 | 8,003 | 6,518 |
2199
2199
  | \`scroll-area\` | 31,431 | 10,376 | 9,102 | 5,561 | 1,739 | 1,152 |
2200
- | \`select\` | 133,744 | 42,058 | 35,488 | 27,551 | 6,627 | 5,190 |
2200
+ | \`select\` | 133,741 | 42,054 | 35,483 | 27,548 | 6,622 | 5,236 |
2201
2201
  | \`skeleton\` | 28,062 | 9,544 | 8,416 | 2,242 | 826 | 495 |
2202
- | \`slider\` | 47,778 | 13,857 | 12,277 | 15,115 | 3,567 | 2,855 |
2203
- | \`sparkline\` | 35,412 | 12,015 | 10,603 | 6,285 | 2,001 | 1,540 |
2204
- | \`speed-dial\` | 110,306 | 36,504 | 30,886 | 11,251 | 2,712 | 1,998 |
2202
+ | \`slider\` | 47,778 | 13,853 | 12,267 | 15,115 | 3,565 | 2,777 |
2203
+ | \`sparkline\` | 35,411 | 12,016 | 10,618 | 6,284 | 2,004 | 1,556 |
2204
+ | \`speed-dial\` | 110,306 | 36,505 | 30,879 | 11,251 | 2,715 | 1,998 |
2205
2205
  | \`splitter\` | 42,441 | 12,678 | 11,269 | 16,259 | 3,937 | 3,152 |
2206
2206
  | \`stat\` | 29,954 | 9,789 | 8,646 | 3,774 | 1,008 | 646 |
2207
- | \`steps\` | 96,252 | 29,575 | 24,410 | 19,643 | 4,202 | 3,353 |
2208
- | \`switch\` | 38,603 | 12,160 | 10,668 | 6,072 | 1,891 | 1,318 |
2207
+ | \`steps\` | 96,250 | 29,577 | 24,391 | 19,641 | 4,203 | 3,318 |
2208
+ | \`switch\` | 38,602 | 12,159 | 10,741 | 6,071 | 1,892 | 1,319 |
2209
2209
  | \`table\` | 35,190 | 10,865 | 9,580 | 7,692 | 1,916 | 1,378 |
2210
2210
  | \`tabs\` | 40,196 | 12,348 | 10,882 | 10,719 | 2,597 | 1,971 |
2211
- | \`tag\` | 77,633 | 25,634 | 21,148 | 4,076 | 1,245 | 995 |
2211
+ | \`tag\` | 77,632 | 25,630 | 21,117 | 4,075 | 1,238 | 981 |
2212
2212
  | \`text\` | 29,734 | 9,670 | 8,508 | 3,922 | 958 | 605 |
2213
2213
  | \`textarea\` | 40,350 | 12,544 | 11,034 | 7,447 | 2,227 | 1,615 |
2214
- | \`time-input\` | 156,103 | 46,933 | 39,629 | 48,526 | 11,002 | 8,943 |
2214
+ | \`time-input\` | 156,102 | 46,926 | 39,555 | 48,525 | 10,996 | 9,070 |
2215
2215
  | \`time-picker\` | 111,867 | 34,716 | 28,718 | 29,452 | 7,606 | 6,047 |
2216
2216
  | \`timeline\` | 78,237 | 25,530 | 21,180 | 5,151 | 1,368 | 987 |
2217
- | \`toast\` | 85,449 | 27,484 | 22,691 | 11,274 | 2,862 | 2,168 |
2218
- | \`toggle\` | 43,243 | 13,254 | 11,675 | 8,954 | 2,500 | 1,868 |
2217
+ | \`toast\` | 85,446 | 27,485 | 22,753 | 11,271 | 2,866 | 2,249 |
2218
+ | \`toggle\` | 43,242 | 13,258 | 11,703 | 8,953 | 2,508 | 1,907 |
2219
2219
  | \`toolbar\` | 29,632 | 10,054 | 8,841 | 3,813 | 1,472 | 927 |
2220
2220
  | \`tooltip\` | 60,498 | 20,576 | 18,184 | 9,763 | 2,943 | 2,067 |
2221
2221
  | \`tour\` | 71,822 | 22,543 | 19,985 | 20,127 | 4,596 | 3,533 |
2222
2222
  | \`tree\` | 89,446 | 29,019 | 23,862 | 12,065 | 3,540 | 2,672 |
2223
- | \`trend\` | 76,798 | 25,221 | 20,884 | 4,083 | 1,164 | 829 |
2224
- | \`video\` | 150,914 | 45,855 | 38,950 | 48,454 | 10,826 | 9,182 |
2225
- | \`video-playlist\` | 130,351 | 40,960 | 34,695 | 26,741 | 5,894 | 4,699 |
2223
+ | \`trend\` | 76,798 | 25,221 | 20,897 | 4,083 | 1,164 | 832 |
2224
+ | \`video\` | 150,914 | 45,853 | 38,970 | 48,454 | 10,825 | 9,158 |
2225
+ | \`video-playlist\` | 130,350 | 40,959 | 34,676 | 26,740 | 5,892 | 4,744 |
2226
2226
  | \`virtual-list\` | 30,546 | 10,470 | 9,192 | 2,904 | 1,155 | 760 |
2227
2227
 
2228
2228
  ## What lands in \`node_modules\`
@@ -2236,11 +2236,11 @@ column is what was removed rather than part of what remains.
2236
2236
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
2237
2237
  |---|---|---|---|---|
2238
2238
  | \`@fusion.dev/helix-core\` | 655,135 | 113 | 154,658 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
2239
- | \`@fusion.dev/helix-headless\` | 8,636,163 | 422 | 699,239 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
2239
+ | \`@fusion.dev/helix-headless\` | 8,354,890 | 422 | 698,334 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
2240
2240
  | \`@fusion.dev/helix-icons\` | 65,943 | 11 | 20,928 | none |
2241
- | \`@fusion.dev/helix-styles\` | 83,277 | 5 | 0 | none |
2241
+ | \`@fusion.dev/helix-styles\` | 90,338 | 6 | 0 | none |
2242
2242
  | \`@fusion.dev/helix-theme\` | 461,551 | 8 | 4,699 | none |
2243
- | \`@fusion.dev/helix\` | 9,306,931 | 718 | 278,170 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
2243
+ | \`@fusion.dev/helix\` | 9,277,277 | 716 | 278,077 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
2244
2244
 
2245
2245
  ## Not measured yet
2246
2246
 
@@ -4544,7 +4544,7 @@ attribute, so the attribute selector paints it as live while it refuses input.
4544
4544
  ### 4. Two stylesheets, then the elements
4545
4545
 
4546
4546
  \`\`\`ts
4547
- import '@fusion.dev/helix/helix.css'
4547
+ import '@fusion.dev/helix-styles/helix.css'
4548
4548
  import '@fusion.dev/helix'
4549
4549
  \`\`\`
4550
4550
 
@@ -4563,7 +4563,7 @@ declares \`--helix-color-*\` at all, while without \`primitives.css\` all 185
4563
4563
  semantic tokens are declared and every color resolves to \`rgba(0, 0, 0, 0)\`,
4564
4564
  since \`tokens.css\` refers to a primitive 297 times and to nothing else. The
4565
4565
  second is the one that looks like a working install, and it is the reason
4566
- \`all.css\` exists.
4566
+ \`helix.css\` exists.
4567
4567
 
4568
4568
  ## Choosing a family
4569
4569
 
@@ -4636,8 +4636,8 @@ for the API.
4636
4636
  | GitHub Copilot | \`.github/copilot-instructions.md\` |
4637
4637
  | Anything else | Whatever it reads. The line is the same |
4638
4638
 
4639
- **We do not write those files for you**, and that is the Sovereignty Constraint
4640
- rather than laziness: a file we generate into your repository is one you then
4639
+ **We do not write those files for you**, and that is deliberate rather than
4640
+ lazy: a file we generate into your repository is one you then
4641
4641
  maintain against our changes, and a tool that rewrites it on install is a
4642
4642
  dependency you did not ask for in a directory you own. The line above is yours to
4643
4643
  paste and yours to delete.
@@ -4764,7 +4764,7 @@ would not be a design system.
4764
4764
 
4765
4765
  \`\`\`ts
4766
4766
  import '@fusion.dev/helix-styles/base.css'
4767
- import '@fusion.dev/helix/elements.css'
4767
+ import '@fusion.dev/helix-styles/helix.css'
4768
4768
  \`\`\`
4769
4769
 
4770
4770
  It hides each tag with \`:not(:defined)\` until it upgrades, using \`visibility\` so
@@ -5041,106 +5041,29 @@ no build step at all. Two ways, and they suit different things.
5041
5041
 
5042
5042
  \`\`\`html
5043
5043
  <link
5044
- href="/vendor/helix/all.css"
5044
+ href="/vendor/helix-styles/helix.css"
5045
5045
  rel="stylesheet"
5046
5046
  />
5047
-
5048
- <button
5049
- data-button="solid"
5050
- data-button-tone="primary"
5051
- >Save</button>
5052
- <div data-card>
5053
- <h2>A card</h2>
5054
- <p data-prose>Written in your own markup.</p>
5055
- </div>
5056
5047
  \`\`\`
5057
5048
 
5058
- \`@fusion.dev/helix-styles\` has no dependencies and no JavaScript. It carries the token
5059
- layer, the element reset, the type scale on bare headings, and recipes for
5060
- markup this library does not render, so a page can look like Helix without a
5061
- single custom element on it.
5062
-
5063
- This is a real way to adopt Helix rather than a fallback, and it is the whole of
5064
- what some pages need. See [Recipes](./recipes) for what the base layer provides.
5065
-
5066
- ## The elements, through an import map
5067
-
5068
- \`\`\`html
5069
- <script type="importmap">
5070
- {
5071
- "imports": {
5072
- "@fusion.dev/helix": "/vendor/helix/styled/dist/index.js",
5073
- "@fusion.dev/helix-core": "/vendor/helix/core/dist/index.js",
5074
- "@fusion.dev/helix-icons": "/vendor/helix/icons/dist/index.js",
5075
- "lit": "/vendor/lit/index.js"
5076
- }
5077
- }
5078
- </script>
5079
- <script type="module">
5080
- import '@fusion.dev/helix'
5081
- </script>
5082
- \`\`\`
5083
-
5084
- The components are built on Lit, so \`lit\` has to resolve too. That is the part
5085
- that makes an import map necessary rather than optional: the package's own
5086
- imports are bare specifiers, and a browser needs to be told where each one is.
5087
-
5088
- **Copy the files, do not point at a CDN.** An import map pointing at someone
5089
- else's server makes your page stop working when theirs does, which is the
5090
- dependency the Sovereignty Constraint exists to refuse. \`bun add\` and then copy
5091
- \`node_modules/@fusion.dev/helix-*/dist\` into whatever you serve.
5092
-
5093
- ## What this costs
5094
-
5095
- **Every element ships, whether the page uses one or not.** A bundler is what
5096
- drops the components you never wrote, and without one the browser fetches the
5097
- whole library. Fine for an internal tool or a prototype; not what you want on a
5098
- landing page.
5099
-
5100
- You can narrow it by importing subpaths instead:
5101
-
5102
- \`\`\`js
5103
- import '@fusion.dev/helix/button'
5104
- import '@fusion.dev/helix/dialog'
5105
- \`\`\`
5106
-
5107
- Each still pulls its own dependencies, so this is a reduction rather than a
5108
- minimum, but for a page using five components it is a large one.
5109
-
5110
- **No TypeScript, so no typings.** A misspelled property is silent here where it
5111
- is a compile error in React, Vue and Svelte, which is worth a note in review.
5112
- Nothing else about writing Helix changes: a declared property is a seed and the
5113
- element applies its own changes. See [State and
5114
- control](./state-and-control).
5115
-
5116
- ## The stylesheets are the same
5117
-
5118
- \`\`\`html
5119
- <link
5120
- href="/vendor/helix/all.css"
5121
- rel="stylesheet"
5122
- />
5123
- <link
5124
- href="/vendor/helix/styled/elements.css"
5125
- rel="stylesheet"
5126
- />
5127
- \`\`\`
5128
-
5129
- \`all.css\` carries \`primitives.css\`, \`tokens.css\` and \`base.css\` in the order they
5130
- have to be in, and its \`@import\`s are relative, so a browser resolves them
5131
- against the stylesheet's own URL with no bundler involved. Copy the whole
5132
- \`dist\` folder and link the one file. Verified in Chromium: one \`<link>\` produces
5133
- four requests and both layers resolve.
5049
+ \`helix.css\` carries \`primitives.css\`, \`tokens.css\`, \`base.css\` and
5050
+ \`elements.css\` in the order they have to be in, and its \`@import\`s are relative,
5051
+ so a browser resolves them against the stylesheet's own URL with no bundler
5052
+ involved. Copy the whole \`dist\` folder and link the one file. Verified in
5053
+ Chromium: one \`<link>\` produces five requests and every layer resolves.
5134
5054
 
5135
5055
  *This page listed \`tokens.css\` and \`base.css\` and no \`primitives.css\` until 24
5136
5056
  Aug 2026. \`tokens.css\` refers to a primitive 297 times and imports nothing, so a
5137
5057
  reader who followed that got all 185 semantic tokens declared and every color
5138
5058
  resolving to \`rgba(0, 0, 0, 0)\`. If your page looks unstyled in exactly that
5139
- way, link \`all.css\` instead.*
5140
-
5141
- \`elements.css\` stays its own link, being \`@fusion.dev/helix\`'s rather than this
5142
- package's, and it matters more here than anywhere: with no bundler the module
5143
- graph arrives over the network, so the interval where the markup exists and the
5144
- definitions do not is longer than it is in a built app.
5059
+ way, link \`helix.css\` instead.*
5060
+
5061
+ **\`elements.css\` matters more here than anywhere**, and it is the fourth layer
5062
+ \`helix.css\` pulls in: with no bundler the module graph arrives over the network,
5063
+ so the interval where the markup exists and the definitions do not is longer
5064
+ than it is in a built app. It was a second link until it moved into this package,
5065
+ which is what let the import become relative. A bare specifier in an \`@import\`
5066
+ is resolved by a bundler and never by a browser, so on this page of all pages it
5067
+ could not have been one.
5145
5068
  `,
5146
5069
  };
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.2",
4
+ "version": "0.4.4",
5
5
  "license": "MIT",
6
6
  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
7
7
  "repository": {
@@ -25,8 +25,8 @@
25
25
  ],
26
26
  "sideEffects": false,
27
27
  "scripts": {
28
- "build": "tsc -p tsconfig.json && tsc -p tsconfig.types.json",
29
- "docs": "node scripts/build-docs.mjs",
28
+ "build": "tsc -p tsconfig.build.json && tsc -p tsconfig.types.json",
29
+ "docs": "bun scripts/build-docs.mjs",
30
30
  "peers": "bun scripts/build-peers.mjs",
31
31
  "test": "bun test src",
32
32
  "timings": "bun scripts/build-timings.mjs",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "bugs": "https://github.com/project-fusion/fusion/issues",
36
36
  "devDependencies": {
37
- "@fusion.dev/helix-cem": "0.4.2",
37
+ "@fusion.dev/helix-cem": "0.4.4",
38
38
  "@fusion.dev/scripts": "0.0.0-dev"
39
39
  },
40
40
  "homepage": "https://fusion.dev",