@fusion.dev/helix-docs 0.98.0 → 0.100.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/content/iconography.mdx +82 -6
  2. package/content/metrics.mdx +20 -20
  3. package/dist/sources.generated.js +102 -26
  4. package/package.json +3 -3
package/content/iconography.mdx CHANGED
@@ -10,7 +10,7 @@ title: Iconography
10
10
  <helix-icon name="trash"></helix-icon>
11
11
  ```
12
12
 
13
- 105 glyphs, from Phosphor, drawn on a 256 box at Phosphor's bold weight. That is
13
+ 108 glyphs, from Phosphor, drawn on a 256 box at Phosphor's bold weight. That is
14
14
  Phosphor's own geometry and it is kept rather than rescaled: normalizing to a 24
15
15
  box would change the optical weight of every glyph and stop the set matching
16
16
  anything upstream. Bold rather than regular, because Phosphor's regular is a
@@ -72,12 +72,88 @@ page, which every caret the library draws already does.
72
72
  import { trash } from '@fusion.dev/helix-icons'
73
73
  ```
74
74
 
75
- Each glyph is an exported string, so you can put one in your own markup, in a
76
- canvas, or anywhere an element is not what you want. Every `name` the library
77
- uses is held to the set of glyphs that actually exist, so a typo is a build
78
- failure rather than an empty box.
75
+ Each glyph is data, `{ content, name, viewBox }`, so you can put one in your own
76
+ markup, in a canvas, or anywhere an element is not what you want. Every `name`
77
+ the library uses is held to the set of glyphs that actually exist, so a typo is a
78
+ build failure rather than an empty box.
79
79
 
80
- ## Adding one
80
+ **Hand one to the element and it draws it**, whatever set it came from:
81
+
82
+ ```tsx
83
+ import { trash } from '@fusion.dev/helix-icons'
84
+
85
+ <helix-icon icon={trash} />
86
+ ```
87
+
88
+ A property rather than an attribute, because an object is not a string: the
89
+ frameworks set properties and plain HTML cannot, which is what `name` is for.
90
+ Both set, the value wins.
91
+
92
+ **This is the door that scales.** `name` resolves through an index of the whole
93
+ set, which no bundler can shake, so a consumer who renders one named icon ships
94
+ all of it: 15 kB gzipped for 108 glyphs. A value ships the one glyph you
95
+ imported. It is also the door out of this set entirely, since anything exporting
96
+ that shape works, whether it is Phosphor at another weight, another library, or
97
+ your own drawings:
98
+
99
+ ```ts
100
+ const dot = { content: '<circle cx="12" cy="12" r="10" fill="currentColor" />', name: 'dot', viewBox: '0 0 24 24' }
101
+ ```
102
+
103
+ ## Weight is a subpath
104
+
105
+ ```ts
106
+ import { caretDown } from '@fusion.dev/helix-icons/regular'
107
+ import { trash } from '@fusion.dev/helix-icons/bold'
108
+ ```
109
+
110
+ The default is bold, and `/bold` is the same set under a name that says so.
111
+
112
+ **A subpath rather than an attribute, because a weight is data rather than a
113
+ dial.** Phosphor's weights are outlined filled paths: `caret-down` is `a12,12`
114
+ at bold and `a8,8` at regular, so there is nothing for CSS to turn and every
115
+ weight offered is bytes shipped. A subpath is shaken per import site; a `weight`
116
+ attribute would put every weight into the index that `name` reads, taking one
117
+ consumer's 15 kB to about 90.
118
+
119
+ Only the default weight carries that index, so `name` draws bold. A consumer who
120
+ wants the set in another weight imports the values and hands them over.
121
+
122
+ ## A set of your own
123
+
124
+ The generator that builds this set is the package's own command, so you are not
125
+ waiting on us to carry a glyph:
126
+
127
+ ```sh
128
+ npx helix-icons build --source ./brand-icons --out src/icons.ts
129
+ ```
130
+
131
+ ```tsx
132
+ import { peak } from './icons'
133
+
134
+ <helix-icon icon={peak} />
135
+ ```
136
+
137
+ It reads a directory of SVG files and writes the module the element draws from,
138
+ which is the same job whether the drawings are yours, another library's, or the
139
+ 1,404 Phosphor glyphs this set does not carry:
140
+
141
+ ```sh
142
+ npx helix-icons build \
143
+ --source node_modules/@phosphor-icons/core/assets/regular \
144
+ --list mine.txt --out src/icons.ts
145
+ ```
146
+
147
+ `--suffix` is for a set that spells the weight into the file name, Phosphor's
148
+ bold being `caret-down-bold.svg`. `--index` also writes the record `name` reads,
149
+ which you want if your own elements take a name in markup and do not want
150
+ otherwise, since it is the part nothing can drop.
151
+
152
+ **A name in two sources is refused rather than decided.** A precedence decides
153
+ silently, and the glyph on the page would be whichever directory sat higher with
154
+ nothing looking wrong afterwards.
155
+
156
+ ## Adding one to this set
81
157
 
82
158
  Add the name to `helix/icons/icons.txt` and run `turbo run icons`. Phosphor names
83
159
  resolve from `@phosphor-icons/core` at build time, so adding a glyph is adding a
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` | 156,003 | 51,384 | 43,598 | Element base class, mixins, decorators, floating positioning. |
62
- | `@fusion.dev/helix-headless` | 604,479 | 156,914 | 122,396 | Every headless family, which is what the barrel means. |
62
+ | `@fusion.dev/helix-headless` | 604,545 | 156,940 | 122,421 | 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,081,557 | 253,237 | 186,164 | Every styled family. |
65
+ | `@fusion.dev/helix` | 1,081,623 | 253,263 | 186,323 | 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
@@ -85,9 +85,9 @@ is the whole cost of adopting the base layer on its own.
85
85
 
86
86
  **Most of a first component is the runtime under it.** The median styled family is 18,837 bytes gzipped alone and adds 2,220 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,280, over 100 components. Every family at once is 253,237.
88
+ Across the tier: the cheapest is `code` at 9,451 gzipped alone, the dearest `data-table` at 59,280, over 100 components. Every family at once is 253,263.
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,914 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.
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,940 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
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,531 bytes gzipped alone.
93
93
 
@@ -220,7 +220,7 @@ Structure, accessibility, state and form participation. No presentation, and no
220
220
  | `filter-input` | 143,432 | 45,722 | 38,394 | 27,857 | 6,742 | 5,700 |
221
221
  | `format-date` | 31,933 | 10,735 | 9,501 | 2,867 | 720 | 611 |
222
222
  | `heatmap` | 73,764 | 24,818 | 21,960 | 10,796 | 3,045 | 2,463 |
223
- | `icon` | 75,148 | 25,011 | 20,634 | 952 | 231 | 179 |
223
+ | `icon` | 75,212 | 25,034 | 20,674 | 1,018 | 246 | 244 |
224
224
  | `icon-button` | 33,400 | 10,918 | 9,616 | 3,494 | 849 | 682 |
225
225
  | `image` | 30,493 | 10,124 | 8,925 | 3,156 | 839 | 708 |
226
226
  | `input` | 86,357 | 28,367 | 23,214 | 4,742 | 1,328 | 1,072 |
@@ -263,7 +263,7 @@ Structure, accessibility, state and form participation. No presentation, and no
263
263
  | `tabs` | 36,095 | 11,583 | 10,224 | 3,925 | 934 | 734 |
264
264
  | `tag` | 75,925 | 25,304 | 20,730 | 895 | 197 | 187 |
265
265
  | `textarea` | 38,623 | 12,198 | 10,752 | 3,996 | 1,108 | 812 |
266
- | `time-input` | 142,822 | 45,480 | 38,130 | 27,718 | 6,829 | 5,639 |
266
+ | `time-input` | 142,888 | 45,492 | 38,287 | 27,784 | 6,855 | 5,700 |
267
267
  | `time-picker` | 103,171 | 33,347 | 27,433 | 18,573 | 5,003 | 4,158 |
268
268
  | `timeline` | 76,374 | 25,276 | 20,869 | 1,809 | 400 | 322 |
269
269
  | `toast` | 79,658 | 26,392 | 21,616 | 4,005 | 969 | 800 |
@@ -303,8 +303,8 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
303
303
  | `checkbox-group` | 41,649 | 12,888 | 11,365 | 6,981 | 1,845 | 1,444 |
304
304
  | `code` | 28,016 | 9,451 | 8,318 | 1,511 | 377 | 343 |
305
305
  | `code-block` | 137,621 | 43,305 | 36,555 | 33,551 | 7,204 | 6,228 |
306
- | `color-input` | 168,820 | 48,992 | 41,481 | 56,582 | 10,741 | 9,275 |
307
- | `color-picker` | 130,635 | 37,628 | 31,347 | 45,256 | 8,827 | 7,546 |
306
+ | `color-input` | 168,886 | 49,016 | 41,449 | 56,648 | 10,765 | 9,164 |
307
+ | `color-picker` | 130,700 | 37,642 | 31,334 | 45,322 | 8,845 | 7,620 |
308
308
  | `combobox` | 147,229 | 45,439 | 38,172 | 35,167 | 7,748 | 6,491 |
309
309
  | `command` | 113,324 | 34,745 | 28,635 | 28,199 | 6,596 | 5,569 |
310
310
  | `copy-button` | 125,773 | 40,563 | 34,144 | 21,706 | 4,680 | 3,919 |
@@ -318,16 +318,16 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
318
318
  | `drawer` | 34,988 | 11,255 | 9,908 | 6,007 | 1,504 | 1,295 |
319
319
  | `drilldown` | 88,562 | 29,007 | 23,738 | 10,153 | 2,506 | 2,090 |
320
320
  | `empty` | 29,763 | 9,992 | 8,809 | 2,087 | 544 | 546 |
321
- | `file-input` | 98,353 | 31,005 | 25,482 | 17,337 | 3,944 | 3,315 |
322
- | `filter-input` | 171,429 | 50,149 | 42,195 | 55,844 | 11,352 | 9,537 |
321
+ | `file-input` | 98,415 | 31,017 | 25,505 | 17,403 | 3,961 | 3,359 |
322
+ | `filter-input` | 171,495 | 50,168 | 42,196 | 55,910 | 11,374 | 9,511 |
323
323
  | `flex` | 29,377 | 9,803 | 8,625 | 2,078 | 473 | 421 |
324
324
  | `format-date` | 32,581 | 10,883 | 9,622 | 3,497 | 875 | 714 |
325
325
  | `grid` | 29,831 | 9,956 | 8,764 | 2,528 | 610 | 595 |
326
326
  | `heatmap` | 80,562 | 26,229 | 23,247 | 17,575 | 4,485 | 3,784 |
327
- | `icon` | 75,854 | 25,190 | 20,767 | 1,641 | 395 | 391 |
327
+ | `icon` | 75,918 | 25,214 | 20,750 | 1,707 | 408 | 326 |
328
328
  | `icon-button` | 39,415 | 11,931 | 10,493 | 9,495 | 1,879 | 1,572 |
329
329
  | `image` | 32,195 | 10,599 | 9,341 | 4,840 | 1,327 | 1,060 |
330
- | `input` | 92,560 | 29,708 | 24,352 | 10,938 | 2,676 | 2,170 |
330
+ | `input` | 92,624 | 29,730 | 24,373 | 11,004 | 2,686 | 2,186 |
331
331
  | `kbd` | 31,686 | 10,798 | 9,494 | 4,373 | 1,491 | 1,217 |
332
332
  | `legend` | 37,142 | 11,968 | 10,511 | 5,790 | 1,395 | 1,125 |
333
333
  | `line-chart` | 84,111 | 27,333 | 24,253 | 20,340 | 5,147 | 4,337 |
@@ -360,7 +360,7 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
360
360
  | `skip-link` | 30,085 | 10,152 | 8,925 | 2,624 | 763 | 648 |
361
361
  | `slider` | 50,467 | 14,467 | 12,810 | 16,150 | 3,419 | 2,967 |
362
362
  | `sparkline` | 38,663 | 12,813 | 11,353 | 6,293 | 1,767 | 1,587 |
363
- | `speed-dial` | 113,393 | 37,713 | 31,732 | 11,289 | 2,402 | 1,980 |
363
+ | `speed-dial` | 113,459 | 37,745 | 31,702 | 11,355 | 2,421 | 1,980 |
364
364
  | `splitter` | 43,992 | 13,149 | 11,685 | 16,134 | 3,619 | 3,134 |
365
365
  | `stat` | 31,624 | 10,248 | 9,065 | 3,954 | 845 | 670 |
366
366
  | `steps` | 98,250 | 30,218 | 24,980 | 19,783 | 3,931 | 3,389 |
@@ -370,7 +370,7 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
370
370
  | `tag` | 79,128 | 26,167 | 21,488 | 4,083 | 1,031 | 920 |
371
371
  | `text` | 31,284 | 10,086 | 8,873 | 3,987 | 817 | 714 |
372
372
  | `textarea` | 41,960 | 13,007 | 11,474 | 7,319 | 1,976 | 1,576 |
373
- | `time-input` | 164,064 | 48,994 | 41,268 | 48,940 | 10,439 | 8,733 |
373
+ | `time-input` | 164,130 | 49,012 | 41,331 | 49,006 | 10,465 | 8,790 |
374
374
  | `time-picker` | 114,652 | 35,487 | 29,260 | 30,044 | 7,192 | 6,020 |
375
375
  | `timeline` | 79,687 | 26,034 | 21,488 | 5,110 | 1,147 | 1,058 |
376
376
  | `toast` | 87,191 | 28,068 | 23,160 | 11,526 | 2,626 | 2,266 |
@@ -379,9 +379,9 @@ The headless tier plus presentation. This is what `bun add @fusion.dev/helix` gi
379
379
  | `tooltip` | 63,163 | 21,452 | 18,976 | 9,352 | 2,508 | 2,093 |
380
380
  | `tour` | 75,388 | 23,666 | 20,981 | 20,453 | 4,395 | 3,668 |
381
381
  | `tree` | 92,117 | 29,903 | 24,578 | 12,881 | 3,327 | 2,769 |
382
- | `trend` | 78,409 | 25,784 | 21,316 | 4,205 | 969 | 888 |
383
- | `video` | 159,049 | 48,469 | 41,085 | 49,625 | 10,810 | 9,332 |
384
- | `video-playlist` | 135,523 | 42,690 | 35,871 | 28,774 | 5,971 | 4,981 |
382
+ | `trend` | 78,471 | 25,809 | 21,286 | 4,271 | 981 | 940 |
383
+ | `video` | 159,115 | 48,484 | 41,085 | 49,691 | 10,823 | 9,313 |
384
+ | `video-playlist` | 135,589 | 42,718 | 35,901 | 28,840 | 5,991 | 5,063 |
385
385
  | `virtual-list` | 35,013 | 11,768 | 10,403 | 3,187 | 955 | 789 |
386
386
 
387
387
  ## What lands in `node_modules`
@@ -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` | 984,477 | 153 | 222,482 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
398
- | `@fusion.dev/helix-headless` | 11,357,433 | 464 | 836,734 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
399
- | `@fusion.dev/helix-icons` | 65,943 | 11 | 20,928 | none |
398
+ | `@fusion.dev/helix-headless` | 11,366,181 | 464 | 836,952 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
399
+ | `@fusion.dev/helix-icons` | 131,512 | 21 | 44,809 | `svgo` |
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,491,633 | 796 | 333,986 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
402
+ | `@fusion.dev/helix` | 12,499,093 | 796 | 333,986 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
403
403
 
404
404
  ## Not measured yet
405
405
 
package/dist/sources.generated.js CHANGED
@@ -1461,7 +1461,7 @@ title: Iconography
1461
1461
  <helix-icon name="trash"></helix-icon>
1462
1462
  \`\`\`
1463
1463
 
1464
- 105 glyphs, from Phosphor, drawn on a 256 box at Phosphor's bold weight. That is
1464
+ 108 glyphs, from Phosphor, drawn on a 256 box at Phosphor's bold weight. That is
1465
1465
  Phosphor's own geometry and it is kept rather than rescaled: normalizing to a 24
1466
1466
  box would change the optical weight of every glyph and stop the set matching
1467
1467
  anything upstream. Bold rather than regular, because Phosphor's regular is a
@@ -1523,12 +1523,88 @@ page, which every caret the library draws already does.
1523
1523
  import { trash } from '@fusion.dev/helix-icons'
1524
1524
  \`\`\`
1525
1525
 
1526
- Each glyph is an exported string, so you can put one in your own markup, in a
1527
- canvas, or anywhere an element is not what you want. Every \`name\` the library
1528
- uses is held to the set of glyphs that actually exist, so a typo is a build
1529
- failure rather than an empty box.
1526
+ Each glyph is data, \`{ content, name, viewBox }\`, so you can put one in your own
1527
+ markup, in a canvas, or anywhere an element is not what you want. Every \`name\`
1528
+ the library uses is held to the set of glyphs that actually exist, so a typo is a
1529
+ build failure rather than an empty box.
1530
1530
 
1531
- ## Adding one
1531
+ **Hand one to the element and it draws it**, whatever set it came from:
1532
+
1533
+ \`\`\`tsx
1534
+ import { trash } from '@fusion.dev/helix-icons'
1535
+
1536
+ <helix-icon icon={trash} />
1537
+ \`\`\`
1538
+
1539
+ A property rather than an attribute, because an object is not a string: the
1540
+ frameworks set properties and plain HTML cannot, which is what \`name\` is for.
1541
+ Both set, the value wins.
1542
+
1543
+ **This is the door that scales.** \`name\` resolves through an index of the whole
1544
+ set, which no bundler can shake, so a consumer who renders one named icon ships
1545
+ all of it: 15 kB gzipped for 108 glyphs. A value ships the one glyph you
1546
+ imported. It is also the door out of this set entirely, since anything exporting
1547
+ that shape works, whether it is Phosphor at another weight, another library, or
1548
+ your own drawings:
1549
+
1550
+ \`\`\`ts
1551
+ const dot = { content: '<circle cx="12" cy="12" r="10" fill="currentColor" />', name: 'dot', viewBox: '0 0 24 24' }
1552
+ \`\`\`
1553
+
1554
+ ## Weight is a subpath
1555
+
1556
+ \`\`\`ts
1557
+ import { caretDown } from '@fusion.dev/helix-icons/regular'
1558
+ import { trash } from '@fusion.dev/helix-icons/bold'
1559
+ \`\`\`
1560
+
1561
+ The default is bold, and \`/bold\` is the same set under a name that says so.
1562
+
1563
+ **A subpath rather than an attribute, because a weight is data rather than a
1564
+ dial.** Phosphor's weights are outlined filled paths: \`caret-down\` is \`a12,12\`
1565
+ at bold and \`a8,8\` at regular, so there is nothing for CSS to turn and every
1566
+ weight offered is bytes shipped. A subpath is shaken per import site; a \`weight\`
1567
+ attribute would put every weight into the index that \`name\` reads, taking one
1568
+ consumer's 15 kB to about 90.
1569
+
1570
+ Only the default weight carries that index, so \`name\` draws bold. A consumer who
1571
+ wants the set in another weight imports the values and hands them over.
1572
+
1573
+ ## A set of your own
1574
+
1575
+ The generator that builds this set is the package's own command, so you are not
1576
+ waiting on us to carry a glyph:
1577
+
1578
+ \`\`\`sh
1579
+ npx helix-icons build --source ./brand-icons --out src/icons.ts
1580
+ \`\`\`
1581
+
1582
+ \`\`\`tsx
1583
+ import { peak } from './icons'
1584
+
1585
+ <helix-icon icon={peak} />
1586
+ \`\`\`
1587
+
1588
+ It reads a directory of SVG files and writes the module the element draws from,
1589
+ which is the same job whether the drawings are yours, another library's, or the
1590
+ 1,404 Phosphor glyphs this set does not carry:
1591
+
1592
+ \`\`\`sh
1593
+ npx helix-icons build \\
1594
+ --source node_modules/@phosphor-icons/core/assets/regular \\
1595
+ --list mine.txt --out src/icons.ts
1596
+ \`\`\`
1597
+
1598
+ \`--suffix\` is for a set that spells the weight into the file name, Phosphor's
1599
+ bold being \`caret-down-bold.svg\`. \`--index\` also writes the record \`name\` reads,
1600
+ which you want if your own elements take a name in markup and do not want
1601
+ otherwise, since it is the part nothing can drop.
1602
+
1603
+ **A name in two sources is refused rather than decided.** A precedence decides
1604
+ silently, and the glyph on the page would be whichever directory sat higher with
1605
+ nothing looking wrong afterwards.
1606
+
1607
+ ## Adding one to this set
1532
1608
 
1533
1609
  Add the name to \`helix/icons/icons.txt\` and run \`turbo run icons\`. Phosphor names
1534
1610
  resolve from \`@phosphor-icons/core\` at build time, so adding a glyph is adding a
@@ -2049,10 +2125,10 @@ repository does that. The per-component tables are what a page pays.
2049
2125
  | Package | Raw | Gzip | Brotli | |
2050
2126
  |---|---|---|---|---|
2051
2127
  | \`@fusion.dev/helix-core\` | 156,003 | 51,384 | 43,598 | Element base class, mixins, decorators, floating positioning. |
2052
- | \`@fusion.dev/helix-headless\` | 604,479 | 156,914 | 122,396 | Every headless family, which is what the barrel means. |
2128
+ | \`@fusion.dev/helix-headless\` | 604,545 | 156,940 | 122,421 | Every headless family, which is what the barrel means. |
2053
2129
  | \`@fusion.dev/helix-icons\` | 47,484 | 14,907 | 12,553 | The whole glyph set. |
2054
2130
  | \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Build time for most consumers, runtime for a theme switcher. |
2055
- | \`@fusion.dev/helix\` | 1,081,557 | 253,237 | 186,164 | Every styled family. |
2131
+ | \`@fusion.dev/helix\` | 1,081,623 | 253,263 | 186,323 | Every styled family. |
2056
2132
  | \`lit\` | 15,394 | 6,118 | 5,460 | Not ours. Here so it can be subtracted from every row above it. |
2057
2133
 
2058
2134
  ## The stylesheets
@@ -2075,9 +2151,9 @@ is the whole cost of adopting the base layer on its own.
2075
2151
 
2076
2152
  **Most of a first component is the runtime under it.** The median styled family is 18,837 bytes gzipped alone and adds 2,220 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.
2077
2153
 
2078
- Across the tier: the cheapest is \`code\` at 9,451 gzipped alone, the dearest \`data-table\` at 59,280, over 100 components. Every family at once is 253,237.
2154
+ Across the tier: the cheapest is \`code\` at 9,451 gzipped alone, the dearest \`data-table\` at 59,280, over 100 components. Every family at once is 253,263.
2079
2155
 
2080
- **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,914 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.
2156
+ **No family imports a barrel, and the \`barrels\` rule in \`fusion workspace\` is what keeps it that way.** \`@fusion.dev/helix-headless\` is \`sideEffects\` over every module in \`dist\`, which is true of a file that calls \`customElements.define\` and which means a bundler may drop none of it: one \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 156,940 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.
2081
2157
 
2082
2158
  The headless tier never had the problem, and it is the control: \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and a headless family is a median of 20,531 bytes gzipped alone.
2083
2159
 
@@ -2210,7 +2286,7 @@ Structure, accessibility, state and form participation. No presentation, and no
2210
2286
  | \`filter-input\` | 143,432 | 45,722 | 38,394 | 27,857 | 6,742 | 5,700 |
2211
2287
  | \`format-date\` | 31,933 | 10,735 | 9,501 | 2,867 | 720 | 611 |
2212
2288
  | \`heatmap\` | 73,764 | 24,818 | 21,960 | 10,796 | 3,045 | 2,463 |
2213
- | \`icon\` | 75,148 | 25,011 | 20,634 | 952 | 231 | 179 |
2289
+ | \`icon\` | 75,212 | 25,034 | 20,674 | 1,018 | 246 | 244 |
2214
2290
  | \`icon-button\` | 33,400 | 10,918 | 9,616 | 3,494 | 849 | 682 |
2215
2291
  | \`image\` | 30,493 | 10,124 | 8,925 | 3,156 | 839 | 708 |
2216
2292
  | \`input\` | 86,357 | 28,367 | 23,214 | 4,742 | 1,328 | 1,072 |
@@ -2253,7 +2329,7 @@ Structure, accessibility, state and form participation. No presentation, and no
2253
2329
  | \`tabs\` | 36,095 | 11,583 | 10,224 | 3,925 | 934 | 734 |
2254
2330
  | \`tag\` | 75,925 | 25,304 | 20,730 | 895 | 197 | 187 |
2255
2331
  | \`textarea\` | 38,623 | 12,198 | 10,752 | 3,996 | 1,108 | 812 |
2256
- | \`time-input\` | 142,822 | 45,480 | 38,130 | 27,718 | 6,829 | 5,639 |
2332
+ | \`time-input\` | 142,888 | 45,492 | 38,287 | 27,784 | 6,855 | 5,700 |
2257
2333
  | \`time-picker\` | 103,171 | 33,347 | 27,433 | 18,573 | 5,003 | 4,158 |
2258
2334
  | \`timeline\` | 76,374 | 25,276 | 20,869 | 1,809 | 400 | 322 |
2259
2335
  | \`toast\` | 79,658 | 26,392 | 21,616 | 4,005 | 969 | 800 |
@@ -2293,8 +2369,8 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
2293
2369
  | \`checkbox-group\` | 41,649 | 12,888 | 11,365 | 6,981 | 1,845 | 1,444 |
2294
2370
  | \`code\` | 28,016 | 9,451 | 8,318 | 1,511 | 377 | 343 |
2295
2371
  | \`code-block\` | 137,621 | 43,305 | 36,555 | 33,551 | 7,204 | 6,228 |
2296
- | \`color-input\` | 168,820 | 48,992 | 41,481 | 56,582 | 10,741 | 9,275 |
2297
- | \`color-picker\` | 130,635 | 37,628 | 31,347 | 45,256 | 8,827 | 7,546 |
2372
+ | \`color-input\` | 168,886 | 49,016 | 41,449 | 56,648 | 10,765 | 9,164 |
2373
+ | \`color-picker\` | 130,700 | 37,642 | 31,334 | 45,322 | 8,845 | 7,620 |
2298
2374
  | \`combobox\` | 147,229 | 45,439 | 38,172 | 35,167 | 7,748 | 6,491 |
2299
2375
  | \`command\` | 113,324 | 34,745 | 28,635 | 28,199 | 6,596 | 5,569 |
2300
2376
  | \`copy-button\` | 125,773 | 40,563 | 34,144 | 21,706 | 4,680 | 3,919 |
@@ -2308,16 +2384,16 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
2308
2384
  | \`drawer\` | 34,988 | 11,255 | 9,908 | 6,007 | 1,504 | 1,295 |
2309
2385
  | \`drilldown\` | 88,562 | 29,007 | 23,738 | 10,153 | 2,506 | 2,090 |
2310
2386
  | \`empty\` | 29,763 | 9,992 | 8,809 | 2,087 | 544 | 546 |
2311
- | \`file-input\` | 98,353 | 31,005 | 25,482 | 17,337 | 3,944 | 3,315 |
2312
- | \`filter-input\` | 171,429 | 50,149 | 42,195 | 55,844 | 11,352 | 9,537 |
2387
+ | \`file-input\` | 98,415 | 31,017 | 25,505 | 17,403 | 3,961 | 3,359 |
2388
+ | \`filter-input\` | 171,495 | 50,168 | 42,196 | 55,910 | 11,374 | 9,511 |
2313
2389
  | \`flex\` | 29,377 | 9,803 | 8,625 | 2,078 | 473 | 421 |
2314
2390
  | \`format-date\` | 32,581 | 10,883 | 9,622 | 3,497 | 875 | 714 |
2315
2391
  | \`grid\` | 29,831 | 9,956 | 8,764 | 2,528 | 610 | 595 |
2316
2392
  | \`heatmap\` | 80,562 | 26,229 | 23,247 | 17,575 | 4,485 | 3,784 |
2317
- | \`icon\` | 75,854 | 25,190 | 20,767 | 1,641 | 395 | 391 |
2393
+ | \`icon\` | 75,918 | 25,214 | 20,750 | 1,707 | 408 | 326 |
2318
2394
  | \`icon-button\` | 39,415 | 11,931 | 10,493 | 9,495 | 1,879 | 1,572 |
2319
2395
  | \`image\` | 32,195 | 10,599 | 9,341 | 4,840 | 1,327 | 1,060 |
2320
- | \`input\` | 92,560 | 29,708 | 24,352 | 10,938 | 2,676 | 2,170 |
2396
+ | \`input\` | 92,624 | 29,730 | 24,373 | 11,004 | 2,686 | 2,186 |
2321
2397
  | \`kbd\` | 31,686 | 10,798 | 9,494 | 4,373 | 1,491 | 1,217 |
2322
2398
  | \`legend\` | 37,142 | 11,968 | 10,511 | 5,790 | 1,395 | 1,125 |
2323
2399
  | \`line-chart\` | 84,111 | 27,333 | 24,253 | 20,340 | 5,147 | 4,337 |
@@ -2350,7 +2426,7 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
2350
2426
  | \`skip-link\` | 30,085 | 10,152 | 8,925 | 2,624 | 763 | 648 |
2351
2427
  | \`slider\` | 50,467 | 14,467 | 12,810 | 16,150 | 3,419 | 2,967 |
2352
2428
  | \`sparkline\` | 38,663 | 12,813 | 11,353 | 6,293 | 1,767 | 1,587 |
2353
- | \`speed-dial\` | 113,393 | 37,713 | 31,732 | 11,289 | 2,402 | 1,980 |
2429
+ | \`speed-dial\` | 113,459 | 37,745 | 31,702 | 11,355 | 2,421 | 1,980 |
2354
2430
  | \`splitter\` | 43,992 | 13,149 | 11,685 | 16,134 | 3,619 | 3,134 |
2355
2431
  | \`stat\` | 31,624 | 10,248 | 9,065 | 3,954 | 845 | 670 |
2356
2432
  | \`steps\` | 98,250 | 30,218 | 24,980 | 19,783 | 3,931 | 3,389 |
@@ -2360,7 +2436,7 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
2360
2436
  | \`tag\` | 79,128 | 26,167 | 21,488 | 4,083 | 1,031 | 920 |
2361
2437
  | \`text\` | 31,284 | 10,086 | 8,873 | 3,987 | 817 | 714 |
2362
2438
  | \`textarea\` | 41,960 | 13,007 | 11,474 | 7,319 | 1,976 | 1,576 |
2363
- | \`time-input\` | 164,064 | 48,994 | 41,268 | 48,940 | 10,439 | 8,733 |
2439
+ | \`time-input\` | 164,130 | 49,012 | 41,331 | 49,006 | 10,465 | 8,790 |
2364
2440
  | \`time-picker\` | 114,652 | 35,487 | 29,260 | 30,044 | 7,192 | 6,020 |
2365
2441
  | \`timeline\` | 79,687 | 26,034 | 21,488 | 5,110 | 1,147 | 1,058 |
2366
2442
  | \`toast\` | 87,191 | 28,068 | 23,160 | 11,526 | 2,626 | 2,266 |
@@ -2369,9 +2445,9 @@ The headless tier plus presentation. This is what \`bun add @fusion.dev/helix\`
2369
2445
  | \`tooltip\` | 63,163 | 21,452 | 18,976 | 9,352 | 2,508 | 2,093 |
2370
2446
  | \`tour\` | 75,388 | 23,666 | 20,981 | 20,453 | 4,395 | 3,668 |
2371
2447
  | \`tree\` | 92,117 | 29,903 | 24,578 | 12,881 | 3,327 | 2,769 |
2372
- | \`trend\` | 78,409 | 25,784 | 21,316 | 4,205 | 969 | 888 |
2373
- | \`video\` | 159,049 | 48,469 | 41,085 | 49,625 | 10,810 | 9,332 |
2374
- | \`video-playlist\` | 135,523 | 42,690 | 35,871 | 28,774 | 5,971 | 4,981 |
2448
+ | \`trend\` | 78,471 | 25,809 | 21,286 | 4,271 | 981 | 940 |
2449
+ | \`video\` | 159,115 | 48,484 | 41,085 | 49,691 | 10,823 | 9,313 |
2450
+ | \`video-playlist\` | 135,589 | 42,718 | 35,901 | 28,840 | 5,991 | 5,063 |
2375
2451
  | \`virtual-list\` | 35,013 | 11,768 | 10,403 | 3,187 | 955 | 789 |
2376
2452
 
2377
2453
  ## What lands in \`node_modules\`
@@ -2385,11 +2461,11 @@ column is what was removed rather than part of what remains.
2385
2461
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
2386
2462
  |---|---|---|---|---|
2387
2463
  | \`@fusion.dev/helix-core\` | 984,477 | 153 | 222,482 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
2388
- | \`@fusion.dev/helix-headless\` | 11,357,433 | 464 | 836,734 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
2389
- | \`@fusion.dev/helix-icons\` | 65,943 | 11 | 20,928 | none |
2464
+ | \`@fusion.dev/helix-headless\` | 11,366,181 | 464 | 836,952 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
2465
+ | \`@fusion.dev/helix-icons\` | 131,512 | 21 | 44,809 | \`svgo\` |
2390
2466
  | \`@fusion.dev/helix-styles\` | 101,139 | 6 | 0 | none |
2391
2467
  | \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
2392
- | \`@fusion.dev/helix\` | 12,491,633 | 796 | 333,986 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
2468
+ | \`@fusion.dev/helix\` | 12,499,093 | 796 | 333,986 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
2393
2469
 
2394
2470
  ## Not measured yet
2395
2471
 
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.98.0",
4
+ "version": "0.100.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.98.0",
40
- "@fusion.dev/helix-testing": "0.98.0",
39
+ "@fusion.dev/helix-cem": "0.100.0",
40
+ "@fusion.dev/helix-testing": "0.100.0",
41
41
  "@fusion.dev/scripts": "0.0.0-dev",
42
42
  "lit": "^3.2.1",
43
43
  "playwright": "^1.62.1"