@fusion.dev/helix-docs 0.215.3 → 0.216.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.
@@ -425,7 +425,7 @@ names the tag to define.
425
425
 
426
426
  [//]: # (renders)
427
427
 
428
- **43 of the 108 headless families interpolate another family's tag**, across 26 distinct children.
428
+ **45 of the 112 headless families interpolate another family's tag**, across 27 distinct children.
429
429
 
430
430
  | Family | Renders |
431
431
  |---|---|
@@ -435,10 +435,11 @@ names the tag to define.
435
435
  | \`chat\` | \`chat-message\` |
436
436
  | \`checkbox-group\`, \`table\` | \`checkbox\` |
437
437
  | \`code-block\`, \`object-inspector\` | \`copy-button\` |
438
+ | \`code-editor\`, \`terminal\` | \`button\`, \`icon-button\`, \`toolbar\` |
438
439
  | \`color-input\` | \`color-picker\` |
439
440
  | \`color-picker\` | \`button\`, \`button-group\`, \`slider\` |
440
441
  | \`combobox\` | \`listbox\`, \`tag\` |
441
- | \`command\` | \`dialog\`, \`listbox\` |
442
+ | \`command\` | \`dialog\`, \`listbox\`, \`option\`, \`option-group\` |
442
443
  | \`data-table\` | \`checkbox\`, \`pagination\` |
443
444
  | \`date-input\` | \`date-picker\`, \`tag\` |
444
445
  | \`file-input\` | \`tag\` |
@@ -448,8 +449,8 @@ names the tag to define.
448
449
  | \`notifications\` | \`format-date\` |
449
450
  | \`pagination\` | \`option\`, \`select\` |
450
451
  | \`select\` | \`listbox\` |
452
+ | \`shortcut-overlay\` | \`dialog\` |
451
453
  | \`steps\`, \`tour\` | \`button\` |
452
- | \`terminal\` | \`button\`, \`icon-button\`, \`toolbar\` |
453
454
  | \`time-input\` | \`tag\`, \`time-picker\` |
454
455
  | \`time-picker\` | \`listbox\`, \`option\` |
455
456
  | \`video\`, \`video-playlist\` | \`menu\`, \`menu-item\` |
@@ -2041,11 +2042,13 @@ run \`helix scan --out\` after it to add your code's run.
2041
2042
  | \`primitive-token\` | error | scan | A rule reads a \`--_helix-\` primitive, which is internal to \`@fusion.dev/helix-styles\` |
2042
2043
  | \`unforwarded-part\` | warn | both | The headless tag publishes a part the styled tag does not forward, which is a gap in Helix |
2043
2044
  | \`unimported-tag\` | warn | scan | An element is written, and nothing in the project imports the entry that registers it |
2045
+ | \`served-column-width\` | warn | scan | A column in a table that serves its rows sets \`width\`, and the table sets no \`columns\`, so the columns move when it upgrades |
2044
2046
  | \`unknown-attribute\` | error | both | A Helix element carries an attribute it does not take |
2045
2047
  | \`unknown-event\` | error | scan | A React \`on\` prop names an event the element does not dispatch |
2046
2048
  | \`unknown-slot\` | error | scan | A child names a slot its Helix element does not have, so it is not drawn |
2047
2049
  | \`unknown-tag\` | error | both | A rule or an element names a tag no installed package lists |
2048
2050
  | \`unknown-token\` | error | scan | A rule reads or sets a \`--helix-\` name the token set does not have |
2051
+ | \`unlinked-trigger\` | warn | scan | A tooltip's \`for\` names a plain element that does not name the tooltip in \`aria-describedby\`, so the page at rest meets the trigger undescribed |
2049
2052
  | \`unreflected-attribute\` | warn | both | A rule selects a Helix element by an attribute it never writes back, so it matches only markup a server wrote |
2050
2053
 
2051
2054
  **A button inside a button is judged where the markup settles it.** Button,
@@ -5094,7 +5097,7 @@ comparison, because a timing depends on the page, the machine, and the day.
5094
5097
 
5095
5098
  We publish the method so you can repeat each measurement.
5096
5099
 
5097
- - **The published files.** Each row bundles \`dist\`, the files npm ships, with Bun 1.1.43. The bundle is minified ESM for the browser, with no source maps.
5100
+ - **The published files.** Each row bundles \`dist\`, the files npm ships, with Bun 1.4.3. The bundle is minified ESM for the browser, with no source maps.
5098
5101
  - **Everything is bundled, including Lit.** A page with no other Lit library downloads Lit, so we count it. Lit has its own row in the package table below, so you can subtract it.
5099
5102
  - **A package row re-exports the package, and a component row imports the component for effect.** You import an element to register it, so a component row measures that import. A package row measures the whole public API. Importing a \`sideEffects: false\` package for effect measures nothing, because the bundler removes it.
5100
5103
  - **Gzip runs at level 9 and brotli at quality 11**, the settings a CDN uses for static assets.
@@ -5123,7 +5126,7 @@ on its own.
5123
5126
 
5124
5127
  | | Raw | Gzip | Brotli |
5125
5128
  |---|---|---|---|
5126
- | Lit and \`@fusion.dev/helix-core\` | 277,212 | 88,766 | 75,480 |
5129
+ | Lit and \`@fusion.dev/helix-core\` | 294,892 | 93,438 | 80,023 |
5127
5130
 
5128
5131
  ## Whole packages
5129
5132
 
@@ -5134,13 +5137,13 @@ either barrel. The per-component tables show what your page pays.
5134
5137
 
5135
5138
  | Package | Raw | Gzip | Brotli | |
5136
5139
  |---|---|---|---|---|
5137
- | \`@fusion.dev/helix-core\` | 276,421 | 88,612 | 75,118 | The element base class, mixins, decorators, and floating positioning. |
5138
- | \`@fusion.dev/helix-headless\` | 1,516,542 | 423,469 | 317,241 | Every headless family. The barrel entry includes all of them. |
5139
- | \`@fusion.dev/helix-icons\` | 59,688 | 18,986 | 16,177 | The whole glyph set. |
5140
- | \`@fusion.dev/helix-theme\` | 4,030 | 1,791 | 1,560 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
5141
- | \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,920 | 123,363 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
5142
- | \`@fusion.dev/helix\` | 2,255,389 | 582,800 | 414,976 | Every styled family. |
5143
- | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
5140
+ | \`@fusion.dev/helix-core\` | 294,101 | 93,244 | 79,770 | The element base class, mixins, decorators, and floating positioning. |
5141
+ | \`@fusion.dev/helix-headless\` | 1,591,024 | 441,109 | 333,414 | Every headless family. The barrel entry includes all of them. |
5142
+ | \`@fusion.dev/helix-icons\` | 60,057 | 19,316 | 16,101 | The whole glyph set. |
5143
+ | \`@fusion.dev/helix-theme\` | 4,022 | 1,720 | 1,541 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
5144
+ | \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,285 | 123,363 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
5145
+ | \`@fusion.dev/helix\` | 2,343,888 | 601,626 | 432,247 | Every styled family. |
5146
+ | \`lit\` | 15,396 | 5,990 | 5,419 | Lit itself, listed so you can subtract it from every row above. |
5144
5147
 
5145
5148
  ## Stylesheets
5146
5149
 
@@ -5152,21 +5155,21 @@ shows the whole cost of using the base layer on its own.
5152
5155
 
5153
5156
  | File | Raw | Gzip | Brotli | |
5154
5157
  |---|---|---|---|---|
5155
- | \`base.css\` | 33,986 | 4,785 | 4,158 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
5156
- | \`elements.css\` | 22,019 | 3,198 | 2,844 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
5157
- | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
5158
- | \`primitives.css\` | 7,511 | 1,401 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
5159
- | \`tokens.css\` | 23,114 | 2,829 | 2,383 | The 200 semantic tokens. Every styled component needs them. |
5158
+ | \`base.css\` | 35,841 | 5,082 | 4,386 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
5159
+ | \`elements.css\` | 24,723 | 3,433 | 3,008 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
5160
+ | \`helix.css\` | 207 | 149 | 118 | The other four stylesheets in one import, in the order they must load. |
5161
+ | \`primitives.css\` | 7,511 | 1,411 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
5162
+ | \`tokens.css\` | 23,114 | 2,849 | 2,383 | The 200 semantic tokens. Every styled component needs them. |
5160
5163
 
5161
5164
  ## What the numbers say
5162
5165
 
5163
- **Most of your first component is the shared runtime.** The median styled family is 20,254 bytes gzipped alone, and it adds 4,759 to a page that already has Helix. The shared runtime is 77 percent of the first component, and the component itself is 23 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
5166
+ **Most of your first component is the shared runtime.** The median styled family is 21,574 bytes gzipped alone, and it adds 4,757 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
5164
5167
 
5165
- Across the 115 styled components, the smallest is \`code\` at 8,561 bytes gzipped alone, and the largest is \`data-table\` at 68,042. Every family together is 582,800.
5168
+ Across the 119 styled components, the smallest is \`code\` at 9,703 bytes gzipped alone, and the largest is \`data-table\` at 70,438. Every family together is 601,626.
5166
5169
 
5167
- No family imports a barrel. The \`barrels\` rule in \`fusion x workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 423,469 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 115 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
5170
+ No family imports a barrel. The \`barrels\` rule in \`fusion x workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 441,109 bytes gzipped, whatever else the page imports. That is 20 times the median family above. All 119 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
5168
5171
 
5169
- The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 18,454 bytes gzipped alone.
5172
+ The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 20,305 bytes gzipped alone.
5170
5173
 
5171
5174
  ## Compared with other systems
5172
5175
 
@@ -5178,43 +5181,43 @@ The table has no whole-library row. That row would compare how many components e
5178
5181
 
5179
5182
  | Component | System | Raw | Gzip | Brotli |
5180
5183
  |---|---|---|---|---|
5181
- | \`button\` | **Helix** | 42,754 | 14,406 | 12,865 |
5184
+ | \`button\` | **Helix** | 46,708 | 15,645 | 14,052 |
5182
5185
  | | Carbon | 133,058 | 20,959 | 17,685 |
5183
5186
  | | Material Web | 47,060 | 14,173 | 12,591 |
5184
5187
  | | Spectrum | 98,792 | 22,045 | 18,674 |
5185
5188
  | | Web Awesome | 136,044 | 33,730 | 28,760 |
5186
- | \`checkbox\` | **Helix** | 47,753 | 15,522 | 13,820 |
5189
+ | \`checkbox\` | **Helix** | 51,715 | 16,778 | 15,050 |
5187
5190
  | | Carbon | 60,255 | 15,609 | 13,550 |
5188
5191
  | | Material Web | 43,785 | 13,556 | 12,015 |
5189
5192
  | | Spectrum | 62,492 | 15,437 | 13,481 |
5190
5193
  | | Web Awesome | 115,251 | 28,728 | 24,420 |
5191
- | \`dialog\` | **Helix** | 44,336 | 15,228 | 13,591 |
5194
+ | \`dialog\` | **Helix** | 47,456 | 16,184 | 14,570 |
5192
5195
  | | Carbon | 510,866 | 67,390 | 39,189 |
5193
5196
  | | Material Web | 34,238 | 11,510 | 10,229 |
5194
5197
  | | Spectrum | 155,708 | 31,899 | 26,262 |
5195
5198
  | | Web Awesome | 148,657 | 36,692 | 31,388 |
5196
- | \`radio\` | **Helix** | 51,120 | 16,284 | 14,482 |
5199
+ | \`radio\` | **Helix** | 54,548 | 17,326 | 15,521 |
5197
5200
  | | Carbon | 63,055 | 16,887 | 14,605 |
5198
5201
  | | Material Web | 41,044 | 13,234 | 11,757 |
5199
5202
  | | Spectrum | 38,685 | 10,660 | 9,370 |
5200
5203
  | | Web Awesome | 112,026 | 27,416 | 23,128 |
5201
- | \`switch\` | **Helix** | 44,474 | 14,984 | 13,342 |
5204
+ | \`switch\` | **Helix** | 48,441 | 16,261 | 14,570 |
5202
5205
  | | Carbon | 69,423 | 17,127 | 14,764 |
5203
5206
  | | Material Web | 50,155 | 14,577 | 12,935 |
5204
5207
  | | Spectrum | 62,322 | 15,059 | 13,321 |
5205
5208
  | | Web Awesome | 45,876 | 15,003 | 13,475 |
5206
- | \`tabs\` | **Helix** | 56,056 | 18,049 | 16,043 |
5209
+ | \`tabs\` | **Helix** | 59,668 | 19,133 | 17,174 |
5207
5210
  | | Carbon | 578,766 | 73,537 | 43,235 |
5208
5211
  | | Material Web | 38,883 | 12,820 | 11,368 |
5209
5212
  | | Spectrum | 64,875 | 18,298 | 16,283 |
5210
5213
  | | Web Awesome | 153,439 | 37,030 | 31,737 |
5211
- | \`tooltip\` | **Helix** | 62,502 | 22,263 | 19,779 |
5214
+ | \`tooltip\` | **Helix** | 65,585 | 23,017 | 20,684 |
5212
5215
  | | Carbon | 189,382 | 30,354 | 22,273 |
5213
5216
  | | Material Web | | not shipped | |
5214
5217
  | | Spectrum | 136,599 | 40,552 | 35,286 |
5215
5218
  | | Web Awesome | 70,568 | 24,005 | 21,107 |
5216
5219
 
5217
- At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,624 bytes gzipped. 8 of 27 peer measurements are smaller than the Helix row.
5220
+ At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 6,666 bytes gzipped. 13 of 27 peer measurements are smaller than the Helix row.
5218
5221
 
5219
5222
  Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
5220
5223
 
@@ -5288,114 +5291,118 @@ Structure, accessibility, state, and form participation. It has no presentation
5288
5291
 
5289
5292
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
5290
5293
  |---|---|---|---|---|---|---|
5291
- | \`accordion\` | 32,671 | 12,091 | 10,729 | 5,378 | 1,562 | 1,195 |
5292
- | \`announcement\` | 37,661 | 13,710 | 12,240 | 4,701 | 1,370 | 1,024 |
5293
- | \`app-header\` | 33,168 | 12,240 | 10,875 | 5,901 | 1,785 | 1,313 |
5294
- | \`area-chart\` | 99,355 | 34,968 | 30,834 | 14,417 | 4,443 | 3,632 |
5295
- | \`avatar\` | 31,887 | 12,153 | 10,895 | 4,000 | 1,242 | 943 |
5296
- | \`badge\` | 28,118 | 10,944 | 9,780 | 2,961 | 893 | 720 |
5297
- | \`bar-chart\` | 107,369 | 37,632 | 33,294 | 21,900 | 6,868 | 5,856 |
5298
- | \`blockquote\` | 24,679 | 9,638 | 8,538 | 2,401 | 886 | 758 |
5299
- | \`breadcrumbs\` | 37,419 | 14,328 | 12,857 | 7,380 | 2,407 | 1,954 |
5300
- | \`button\` | 36,246 | 12,977 | 11,569 | 5,128 | 1,499 | 1,086 |
5301
- | \`button-group\` | 28,214 | 10,617 | 9,418 | 4,921 | 1,484 | 1,097 |
5302
- | \`callout\` | 36,284 | 13,989 | 12,434 | 2,884 | 956 | 621 |
5303
- | \`canvas\` | 132,515 | 41,864 | 36,414 | 74,272 | 22,545 | 18,690 |
5304
- | \`card\` | 24,397 | 9,312 | 8,254 | 2,090 | 644 | 468 |
5305
- | \`carousel\` | 45,167 | 16,074 | 14,349 | 15,328 | 4,258 | 3,440 |
5306
- | \`chat\` | 83,313 | 27,723 | 24,437 | 28,394 | 8,256 | 6,629 |
5307
- | \`checkbox\` | 41,267 | 14,019 | 12,516 | 3,107 | 956 | 686 |
5308
- | \`checkbox-group\` | 48,490 | 15,947 | 14,219 | 8,322 | 2,335 | 1,610 |
5309
- | \`code\` | 20,869 | 8,248 | 7,313 | 138 | 84 | 49 |
5310
- | \`code-block\` | 104,805 | 35,636 | 31,420 | 37,315 | 10,654 | 8,788 |
5311
- | \`color-input\` | 143,769 | 45,822 | 40,052 | 55,776 | 14,298 | 11,802 |
5312
- | \`color-picker\` | 105,388 | 33,621 | 29,510 | 47,896 | 12,667 | 10,497 |
5313
- | \`combobox\` | 135,322 | 43,127 | 37,889 | 35,962 | 9,090 | 7,214 |
5314
- | \`command\` | 102,726 | 32,609 | 28,680 | 30,345 | 8,148 | 6,615 |
5315
- | \`copy-button\` | 82,250 | 28,297 | 25,044 | 18,753 | 5,092 | 3,999 |
5316
- | \`data-table\` | 203,581 | 62,637 | 53,530 | 89,962 | 24,138 | 19,218 |
5317
- | \`date-input\` | 143,074 | 45,180 | 39,679 | 38,660 | 9,413 | 7,667 |
5318
- | \`date-picker\` | 63,093 | 21,511 | 19,251 | 20,720 | 5,635 | 4,472 |
5319
- | \`description-list\` | 23,472 | 8,993 | 7,992 | 1,565 | 505 | 338 |
5320
- | \`device-screen\` | 73,940 | 24,006 | 21,105 | 31,473 | 8,751 | 6,999 |
5321
- | \`dialog\` | 39,200 | 13,972 | 12,448 | 5,948 | 1,759 | 1,250 |
5322
- | \`divider\` | 23,564 | 9,144 | 8,085 | 1,415 | 494 | 372 |
5323
- | \`donut-chart\` | 92,673 | 32,263 | 28,568 | 14,717 | 4,501 | 3,632 |
5324
- | \`drawer\` | 43,837 | 15,484 | 13,807 | 7,799 | 2,296 | 1,867 |
5325
- | \`drilldown\` | 43,552 | 15,254 | 13,585 | 9,705 | 2,707 | 1,994 |
5326
- | \`empty\` | 25,007 | 9,578 | 8,498 | 1,976 | 642 | 474 |
5327
- | \`file-input\` | 59,143 | 20,557 | 18,271 | 13,148 | 4,128 | 3,358 |
5328
- | \`filter-input\` | 99,603 | 33,493 | 29,698 | 21,571 | 6,183 | 4,975 |
5329
- | \`format-date\` | 31,209 | 11,675 | 10,448 | 4,475 | 1,251 | 937 |
5330
- | \`graph\` | 98,190 | 31,204 | 27,387 | 28,438 | 8,118 | 6,632 |
5331
- | \`heatmap\` | 101,760 | 34,695 | 30,636 | 19,070 | 5,629 | 4,504 |
5332
- | \`icon\` | 86,977 | 29,610 | 25,408 | 62,080 | 21,256 | 16,944 |
5333
- | \`icon-button\` | 36,357 | 13,003 | 11,598 | 5,237 | 1,532 | 1,186 |
5334
- | \`image\` | 26,373 | 9,844 | 8,745 | 3,846 | 1,159 | 885 |
5335
- | \`input\` | 47,074 | 16,181 | 14,349 | 7,006 | 2,268 | 1,524 |
5336
- | \`kbd\` | 28,084 | 10,790 | 9,566 | 3,514 | 1,089 | 808 |
5337
- | \`legend\` | 39,951 | 14,500 | 12,936 | 2,765 | 913 | 644 |
5338
- | \`lightbox\` | 57,138 | 19,382 | 17,249 | 16,760 | 4,662 | 3,573 |
5339
- | \`line-chart\` | 102,350 | 35,821 | 31,657 | 16,812 | 5,055 | 4,281 |
5340
- | \`list\` | 62,949 | 21,724 | 19,373 | 15,256 | 4,418 | 3,462 |
5341
- | \`listbox\` | 79,626 | 26,413 | 23,317 | 15,603 | 4,588 | 3,575 |
5342
- | \`loader\` | 27,341 | 10,452 | 9,310 | 2,786 | 928 | 711 |
5343
- | \`log\` | 84,672 | 28,871 | 25,512 | 39,568 | 12,156 | 10,332 |
5344
- | \`map\` | 106,241 | 32,298 | 27,836 | 45,830 | 12,023 | 9,558 |
5345
- | \`megamenu\` | 61,165 | 22,175 | 19,641 | 8,724 | 2,425 | 1,788 |
5346
- | \`menu\` | 98,535 | 32,954 | 29,067 | 30,262 | 7,961 | 6,465 |
5347
- | \`meter\` | 32,921 | 12,483 | 11,192 | 4,982 | 1,460 | 1,183 |
5348
- | \`motion-toggle\` | 26,353 | 10,249 | 9,104 | 1,426 | 510 | 384 |
5349
- | \`navigation\` | 33,886 | 12,736 | 11,324 | 3,365 | 1,164 | 941 |
5350
- | \`notifications\` | 59,565 | 20,340 | 18,153 | 18,276 | 5,073 | 4,079 |
5351
- | \`number-input\` | 57,654 | 19,365 | 17,241 | 13,581 | 3,625 | 2,744 |
5352
- | \`object-inspector\` | 117,453 | 39,468 | 34,727 | 36,012 | 10,215 | 8,435 |
5353
- | \`option\` | 27,049 | 9,971 | 8,855 | 4,523 | 1,214 | 968 |
5354
- | \`outline\` | 34,611 | 12,986 | 11,546 | 7,888 | 2,542 | 1,850 |
5355
- | \`pagination\` | 139,586 | 44,769 | 38,872 | 45,676 | 11,760 | 9,551 |
5356
- | \`pin-input\` | 48,873 | 17,049 | 15,226 | 7,208 | 2,376 | 1,765 |
5357
- | \`popover\` | 64,907 | 23,347 | 20,632 | 6,461 | 1,851 | 1,308 |
5358
- | \`progress\` | 29,235 | 11,152 | 9,978 | 3,007 | 925 | 629 |
5359
- | \`qr-code\` | 43,669 | 17,004 | 15,111 | 17,003 | 6,197 | 5,226 |
5360
- | \`quote\` | 23,088 | 9,113 | 8,055 | 1,210 | 502 | 370 |
5361
- | \`radio\` | 43,333 | 14,777 | 13,156 | 3,815 | 1,189 | 858 |
5362
- | \`rating\` | 51,618 | 17,783 | 15,862 | 8,058 | 2,438 | 1,801 |
5363
- | \`scatter-chart\` | 98,654 | 34,307 | 30,271 | 20,340 | 6,410 | 5,214 |
5364
- | \`scroll-area\` | 31,294 | 11,434 | 10,152 | 8,518 | 2,614 | 2,003 |
5365
- | \`select\` | 118,275 | 39,198 | 34,324 | 26,153 | 7,196 | 5,564 |
5366
- | \`skeleton\` | 22,900 | 8,872 | 7,874 | 991 | 385 | 229 |
5367
- | \`skip-link\` | 24,547 | 9,608 | 8,525 | 1,224 | 474 | 343 |
5368
- | \`slider\` | 54,667 | 18,415 | 16,538 | 13,625 | 3,879 | 3,087 |
5369
- | \`sparkline\` | 49,258 | 17,983 | 16,056 | 5,982 | 2,106 | 1,688 |
5370
- | \`spatial-bar-chart\` | 105,190 | 37,126 | 32,690 | 19,854 | 6,526 | 5,270 |
5371
- | \`spatial-heatmap\` | 117,114 | 39,971 | 35,160 | 31,741 | 9,455 | 7,896 |
5372
- | \`spatial-ribbon-chart\` | 104,313 | 36,731 | 32,404 | 20,793 | 6,880 | 5,608 |
5373
- | \`spatial-scatter-chart\` | 102,546 | 35,987 | 31,729 | 19,087 | 6,276 | 5,145 |
5374
- | \`spatial-surface-chart\` | 105,468 | 37,270 | 32,881 | 21,949 | 7,389 | 6,211 |
5375
- | \`spatial-treemap\` | 106,586 | 37,909 | 33,355 | 21,370 | 7,272 | 6,000 |
5376
- | \`speed-dial\` | 69,618 | 25,072 | 22,163 | 10,935 | 2,978 | 2,414 |
5377
- | \`splitter\` | 45,096 | 15,644 | 13,997 | 14,504 | 3,864 | 3,045 |
5378
- | \`stat\` | 26,285 | 10,057 | 8,960 | 2,323 | 768 | 541 |
5379
- | \`steps\` | 54,951 | 19,120 | 17,043 | 13,805 | 3,914 | 3,157 |
5380
- | \`switch\` | 40,121 | 13,837 | 12,335 | 1,679 | 615 | 336 |
5381
- | \`table\` | 120,990 | 37,868 | 32,905 | 45,143 | 12,243 | 9,923 |
5382
- | \`tabs\` | 47,105 | 16,205 | 14,404 | 10,491 | 2,863 | 2,129 |
5383
- | \`tag\` | 43,623 | 15,997 | 14,299 | 8,451 | 2,532 | 1,957 |
5384
- | \`terminal\` | 77,803 | 25,510 | 22,489 | 30,191 | 8,188 | 6,604 |
5385
- | \`textarea\` | 44,998 | 15,367 | 13,748 | 5,490 | 1,596 | 1,197 |
5386
- | \`time-input\` | 172,438 | 53,799 | 46,666 | 48,568 | 12,180 | 9,926 |
5387
- | \`time-picker\` | 102,682 | 32,564 | 28,655 | 33,981 | 9,093 | 7,356 |
5388
- | \`timeline\` | 32,429 | 12,282 | 11,014 | 4,087 | 1,192 | 919 |
5389
- | \`toast\` | 52,298 | 18,492 | 16,508 | 12,165 | 3,515 | 2,810 |
5390
- | \`toggle\` | 46,246 | 15,540 | 13,827 | 6,005 | 1,790 | 1,267 |
5391
- | \`toolbar\` | 34,370 | 12,800 | 11,424 | 1,366 | 482 | 264 |
5392
- | \`tooltip\` | 59,698 | 21,529 | 19,111 | 8,505 | 2,384 | 1,810 |
5393
- | \`tour\` | 85,289 | 29,313 | 25,898 | 20,084 | 5,533 | 4,343 |
5394
- | \`tree\` | 68,666 | 23,155 | 20,607 | 17,196 | 4,929 | 3,908 |
5395
- | \`trend\` | 30,937 | 12,025 | 10,750 | 3,592 | 1,134 | 951 |
5396
- | \`video\` | 143,892 | 45,089 | 39,344 | 66,785 | 16,896 | 13,954 |
5397
- | \`video-playlist\` | 129,019 | 41,832 | 36,723 | 42,856 | 11,030 | 9,198 |
5398
- | \`virtual-list\` | 65,938 | 22,353 | 19,877 | 23,394 | 7,155 | 5,825 |
5294
+ | \`accordion\` | 36,132 | 13,151 | 11,820 | 5,373 | 1,507 | 1,239 |
5295
+ | \`announcement\` | 40,745 | 14,657 | 13,205 | 4,690 | 1,360 | 1,083 |
5296
+ | \`app-header\` | 36,280 | 13,216 | 11,870 | 5,890 | 1,723 | 1,477 |
5297
+ | \`area-chart\` | 108,659 | 37,729 | 33,631 | 14,420 | 4,356 | 3,651 |
5298
+ | \`avatar\` | 35,327 | 13,237 | 11,964 | 3,994 | 1,219 | 1,000 |
5299
+ | \`badge\` | 31,566 | 12,013 | 10,852 | 2,955 | 879 | 711 |
5300
+ | \`bar-chart\` | 116,678 | 40,325 | 35,974 | 21,915 | 6,772 | 5,860 |
5301
+ | \`blockquote\` | 28,141 | 10,771 | 9,679 | 2,400 | 866 | 810 |
5302
+ | \`breadcrumbs\` | 40,839 | 15,367 | 13,867 | 7,372 | 2,326 | 2,037 |
5303
+ | \`button\` | 40,202 | 14,237 | 12,802 | 5,193 | 1,508 | 1,218 |
5304
+ | \`button-group\` | 31,674 | 11,677 | 10,515 | 4,922 | 1,484 | 1,156 |
5305
+ | \`callout\` | 39,396 | 14,898 | 13,420 | 2,882 | 938 | 754 |
5306
+ | \`canvas\` | 136,373 | 42,587 | 37,326 | 74,293 | 22,122 | 18,589 |
5307
+ | \`card\` | 27,859 | 10,440 | 9,403 | 2,088 | 602 | 499 |
5308
+ | \`carousel\` | 48,559 | 17,095 | 15,488 | 15,308 | 4,188 | 3,380 |
5309
+ | \`chat\` | 92,535 | 30,464 | 27,066 | 28,474 | 8,175 | 6,638 |
5310
+ | \`checkbox\` | 45,231 | 15,305 | 13,758 | 3,175 | 968 | 832 |
5311
+ | \`checkbox-group\` | 52,429 | 17,170 | 15,408 | 8,390 | 2,352 | 1,790 |
5312
+ | \`code\` | 24,331 | 9,396 | 8,459 | 136 | 63 | 145 |
5313
+ | \`code-block\` | 110,444 | 37,237 | 33,088 | 39,447 | 11,525 | 9,500 |
5314
+ | \`code-editor\` | 83,475 | 26,834 | 23,883 | 27,830 | 7,256 | 5,933 |
5315
+ | \`code-input\` | 61,976 | 21,196 | 18,968 | 10,584 | 3,409 | 2,804 |
5316
+ | \`color-input\` | 147,496 | 46,692 | 40,928 | 55,909 | 14,304 | 11,761 |
5317
+ | \`color-picker\` | 109,152 | 34,558 | 30,541 | 48,027 | 12,689 | 10,576 |
5318
+ | \`combobox\` | 145,106 | 45,800 | 40,447 | 36,215 | 9,094 | 7,352 |
5319
+ | \`command\` | 122,325 | 38,362 | 33,827 | 36,979 | 9,602 | 7,981 |
5320
+ | \`copy-button\` | 85,823 | 29,138 | 26,027 | 18,804 | 4,974 | 4,199 |
5321
+ | \`data-table\` | 213,692 | 64,932 | 56,270 | 90,399 | 23,756 | 19,215 |
5322
+ | \`date-input\` | 146,130 | 45,675 | 40,445 | 38,642 | 9,366 | 7,681 |
5323
+ | \`date-picker\` | 66,533 | 22,585 | 20,309 | 20,711 | 5,579 | 4,546 |
5324
+ | \`description-list\` | 26,932 | 10,137 | 9,121 | 1,561 | 483 | 442 |
5325
+ | \`device-screen\` | 77,862 | 25,017 | 22,194 | 30,991 | 8,412 | 6,893 |
5326
+ | \`dialog\` | 42,323 | 14,954 | 13,441 | 5,946 | 1,718 | 1,398 |
5327
+ | \`divider\` | 27,025 | 10,264 | 9,224 | 1,414 | 461 | 483 |
5328
+ | \`donut-chart\` | 102,018 | 35,104 | 31,378 | 14,732 | 4,419 | 3,769 |
5329
+ | \`drawer\` | 46,942 | 16,435 | 14,751 | 7,778 | 2,254 | 1,883 |
5330
+ | \`drilldown\` | 46,673 | 16,186 | 14,585 | 9,696 | 2,666 | 2,199 |
5331
+ | \`empty\` | 28,469 | 10,701 | 9,639 | 1,974 | 609 | 559 |
5332
+ | \`file-input\` | 62,243 | 21,377 | 19,256 | 13,123 | 4,029 | 3,320 |
5333
+ | \`filter-input\` | 108,683 | 36,217 | 32,263 | 21,648 | 6,114 | 5,006 |
5334
+ | \`format-date\` | 34,657 | 12,781 | 11,518 | 4,466 | 1,246 | 1,179 |
5335
+ | \`graph\` | 102,213 | 32,249 | 28,455 | 28,489 | 8,044 | 6,702 |
5336
+ | \`heatmap\` | 111,091 | 37,484 | 33,406 | 19,074 | 5,518 | 4,561 |
5337
+ | \`icon\` | 90,787 | 31,026 | 26,695 | 61,578 | 20,788 | 16,949 |
5338
+ | \`icon-button\` | 40,308 | 14,262 | 12,845 | 5,300 | 1,537 | 1,236 |
5339
+ | \`image\` | 29,835 | 10,966 | 9,899 | 3,842 | 1,120 | 1,066 |
5340
+ | \`input\` | 58,371 | 19,921 | 17,733 | 7,198 | 2,242 | 1,892 |
5341
+ | \`kbd\` | 32,638 | 12,196 | 10,946 | 3,624 | 1,124 | 912 |
5342
+ | \`legend\` | 43,388 | 15,428 | 13,922 | 2,764 | 902 | 686 |
5343
+ | \`lightbox\` | 60,247 | 20,274 | 18,177 | 16,752 | 4,536 | 3,651 |
5344
+ | \`line-chart\` | 111,662 | 38,582 | 34,427 | 16,821 | 4,953 | 4,279 |
5345
+ | \`list\` | 66,024 | 22,722 | 20,273 | 15,228 | 4,296 | 3,496 |
5346
+ | \`listbox\` | 89,342 | 29,382 | 26,133 | 15,690 | 4,508 | 3,610 |
5347
+ | \`loader\` | 30,796 | 11,543 | 10,407 | 2,785 | 927 | 821 |
5348
+ | \`log\` | 88,207 | 29,604 | 26,575 | 39,537 | 12,130 | 10,398 |
5349
+ | \`map\` | 110,087 | 33,343 | 28,867 | 45,864 | 11,950 | 9,581 |
5350
+ | \`markdown\` | 137,493 | 46,414 | 41,110 | 61,599 | 19,331 | 16,100 |
5351
+ | \`megamenu\` | 64,260 | 22,949 | 20,479 | 8,723 | 2,412 | 1,854 |
5352
+ | \`menu\` | 103,902 | 33,919 | 30,314 | 31,986 | 8,148 | 6,785 |
5353
+ | \`meter\` | 36,363 | 13,554 | 12,249 | 4,973 | 1,432 | 1,188 |
5354
+ | \`motion-toggle\` | 29,764 | 11,398 | 10,271 | 1,424 | 517 | 431 |
5355
+ | \`navigation\` | 37,120 | 13,750 | 12,322 | 3,364 | 1,124 | 933 |
5356
+ | \`notifications\` | 62,634 | 21,110 | 19,039 | 18,257 | 4,958 | 4,125 |
5357
+ | \`number-input\` | 61,072 | 20,383 | 18,286 | 13,546 | 3,557 | 2,796 |
5358
+ | \`object-inspector\` | 121,125 | 40,259 | 35,702 | 36,074 | 10,265 | 8,398 |
5359
+ | \`option\` | 30,507 | 11,108 | 10,012 | 4,515 | 1,157 | 993 |
5360
+ | \`outline\` | 38,066 | 14,005 | 12,609 | 7,886 | 2,526 | 2,069 |
5361
+ | \`pagination\` | 149,679 | 47,505 | 41,646 | 46,078 | 11,909 | 9,590 |
5362
+ | \`pin-input\` | 52,312 | 18,091 | 16,249 | 7,205 | 2,358 | 1,852 |
5363
+ | \`popover\` | 67,992 | 24,055 | 21,517 | 6,459 | 1,829 | 1,547 |
5364
+ | \`progress\` | 32,675 | 12,249 | 11,061 | 3,000 | 902 | 766 |
5365
+ | \`qr-code\` | 47,027 | 17,953 | 16,197 | 16,931 | 6,185 | 5,347 |
5366
+ | \`quote\` | 26,550 | 10,239 | 9,185 | 1,209 | 513 | 517 |
5367
+ | \`radio\` | 46,767 | 15,843 | 14,200 | 3,813 | 1,201 | 892 |
5368
+ | \`rating\` | 55,059 | 18,844 | 16,910 | 8,056 | 2,404 | 1,898 |
5369
+ | \`scatter-chart\` | 108,079 | 37,149 | 33,106 | 20,356 | 6,288 | 5,416 |
5370
+ | \`scroll-area\` | 34,756 | 12,524 | 11,266 | 8,516 | 2,572 | 2,064 |
5371
+ | \`select\` | 128,227 | 41,990 | 37,033 | 26,406 | 7,125 | 5,645 |
5372
+ | \`shortcut-overlay\` | 52,836 | 18,674 | 16,759 | 11,288 | 3,370 | 2,728 |
5373
+ | \`skeleton\` | 26,362 | 10,008 | 9,024 | 989 | 347 | 305 |
5374
+ | \`skip-link\` | 27,998 | 10,695 | 9,627 | 1,223 | 445 | 415 |
5375
+ | \`slider\` | 58,611 | 19,614 | 17,672 | 13,682 | 3,863 | 3,223 |
5376
+ | \`sparkline\` | 52,675 | 18,920 | 17,079 | 5,966 | 2,034 | 1,706 |
5377
+ | \`spatial-bar-chart\` | 114,534 | 39,844 | 35,465 | 19,872 | 6,420 | 5,511 |
5378
+ | \`spatial-heatmap\` | 126,459 | 42,632 | 37,843 | 31,748 | 9,478 | 7,902 |
5379
+ | \`spatial-ribbon-chart\` | 113,658 | 39,434 | 35,174 | 20,806 | 6,798 | 5,799 |
5380
+ | \`spatial-scatter-chart\` | 111,885 | 38,740 | 34,524 | 19,095 | 6,156 | 5,216 |
5381
+ | \`spatial-surface-chart\` | 114,817 | 39,986 | 35,645 | 21,968 | 7,323 | 6,242 |
5382
+ | \`spatial-treemap\` | 115,920 | 40,590 | 36,113 | 21,382 | 7,209 | 6,032 |
5383
+ | \`speed-dial\` | 72,686 | 25,783 | 23,061 | 10,930 | 2,930 | 2,308 |
5384
+ | \`splitter\` | 48,515 | 16,675 | 15,012 | 14,475 | 3,809 | 3,156 |
5385
+ | \`stat\` | 29,732 | 11,171 | 10,105 | 2,316 | 741 | 625 |
5386
+ | \`steps\` | 58,887 | 20,335 | 18,233 | 13,863 | 3,851 | 3,138 |
5387
+ | \`switch\` | 44,082 | 15,125 | 13,571 | 1,747 | 616 | 408 |
5388
+ | \`table\` | 124,643 | 38,498 | 33,912 | 45,142 | 12,272 | 10,079 |
5389
+ | \`tabs\` | 50,721 | 17,301 | 15,560 | 10,539 | 2,821 | 2,327 |
5390
+ | \`tag\` | 46,712 | 16,889 | 15,259 | 8,447 | 2,493 | 1,935 |
5391
+ | \`terminal\` | 81,486 | 26,603 | 23,530 | 30,249 | 8,067 | 6,698 |
5392
+ | \`textarea\` | 56,277 | 19,161 | 17,183 | 5,667 | 1,664 | 1,329 |
5393
+ | \`time-input\` | 182,086 | 56,421 | 49,177 | 49,126 | 12,384 | 10,006 |
5394
+ | \`time-picker\` | 112,598 | 35,569 | 31,457 | 34,263 | 9,126 | 7,385 |
5395
+ | \`timeline\` | 35,867 | 13,458 | 12,192 | 4,078 | 1,165 | 983 |
5396
+ | \`toast\` | 73,100 | 24,571 | 22,024 | 19,460 | 5,416 | 4,530 |
5397
+ | \`toggle\` | 50,194 | 16,657 | 15,041 | 6,073 | 1,792 | 1,460 |
5398
+ | \`toolbar\` | 37,825 | 13,801 | 12,439 | 1,364 | 487 | 438 |
5399
+ | \`tooltip\` | 62,783 | 22,285 | 20,037 | 8,501 | 2,335 | 1,924 |
5400
+ | \`tour\` | 88,830 | 30,162 | 26,879 | 20,107 | 5,474 | 4,436 |
5401
+ | \`tree\` | 71,743 | 24,045 | 21,478 | 17,176 | 4,800 | 3,977 |
5402
+ | \`trend\` | 34,378 | 13,149 | 11,916 | 3,583 | 1,103 | 1,023 |
5403
+ | \`video\` | 149,165 | 45,855 | 40,470 | 67,977 | 16,880 | 13,909 |
5404
+ | \`video-playlist\` | 134,354 | 42,895 | 38,002 | 44,566 | 11,394 | 9,483 |
5405
+ | \`virtual-list\` | 71,019 | 23,589 | 21,227 | 25,057 | 7,434 | 6,355 |
5399
5406
 
5400
5407
  ### Styled tier
5401
5408
 
@@ -5403,121 +5410,125 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
5403
5410
 
5404
5411
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
5405
5412
  |---|---|---|---|---|---|---|
5406
- | \`accordion\` | 36,104 | 12,946 | 11,483 | 8,795 | 2,456 | 1,962 |
5407
- | \`announcement\` | 42,276 | 14,776 | 13,190 | 9,297 | 2,456 | 1,925 |
5408
- | \`app-header\` | 38,326 | 13,450 | 11,979 | 11,046 | 2,981 | 2,362 |
5409
- | \`area-chart\` | 107,559 | 36,863 | 32,494 | 22,604 | 6,389 | 5,248 |
5410
- | \`aura\` | 59,567 | 20,254 | 17,927 | 31,766 | 9,465 | 8,226 |
5411
- | \`avatar\` | 34,890 | 12,911 | 11,565 | 6,988 | 1,968 | 1,606 |
5412
- | \`badge\` | 33,626 | 12,190 | 10,865 | 8,459 | 2,170 | 1,748 |
5413
- | \`bar-chart\` | 122,404 | 40,666 | 35,930 | 36,917 | 9,760 | 8,382 |
5414
- | \`blockquote\` | 26,905 | 10,186 | 9,029 | 4,611 | 1,415 | 1,162 |
5415
- | \`breadcrumbs\` | 44,358 | 15,535 | 13,915 | 14,305 | 3,661 | 3,011 |
5416
- | \`button\` | 42,754 | 14,406 | 12,865 | 11,618 | 2,947 | 2,380 |
5417
- | \`button-group\` | 31,709 | 11,295 | 10,041 | 8,406 | 2,187 | 1,679 |
5418
- | \`callout\` | 40,077 | 14,936 | 13,280 | 6,659 | 1,903 | 1,541 |
5419
- | \`canvas\` | 162,739 | 46,991 | 40,900 | 104,142 | 27,552 | 22,926 |
5420
- | \`card\` | 28,297 | 10,317 | 9,158 | 5,976 | 1,633 | 1,348 |
5421
- | \`carousel\` | 55,653 | 17,867 | 16,010 | 25,799 | 6,078 | 4,956 |
5422
- | \`chat\` | 98,606 | 30,451 | 26,888 | 43,673 | 10,894 | 9,162 |
5423
- | \`checkbox\` | 47,753 | 15,522 | 13,820 | 9,579 | 2,458 | 2,061 |
5424
- | \`checkbox-group\` | 55,713 | 17,591 | 15,650 | 15,536 | 3,989 | 3,066 |
5425
- | \`code\` | 21,726 | 8,561 | 7,606 | 976 | 379 | 237 |
5426
- | \`code-block\` | 131,305 | 39,639 | 34,951 | 63,796 | 14,801 | 12,413 |
5427
- | \`color-input\` | 186,240 | 52,091 | 45,504 | 98,237 | 20,688 | 17,276 |
5428
- | \`color-picker\` | 142,414 | 39,181 | 34,368 | 84,912 | 18,348 | 15,316 |
5429
- | \`combobox\` | 150,676 | 46,073 | 40,446 | 51,299 | 11,878 | 9,847 |
5430
- | \`command\` | 114,025 | 34,958 | 30,710 | 41,638 | 10,419 | 8,535 |
5431
- | \`copy-button\` | 96,308 | 30,629 | 27,095 | 32,793 | 7,492 | 6,185 |
5432
- | \`data-table\` | 234,246 | 68,042 | 58,306 | 120,610 | 29,568 | 23,950 |
5433
- | \`date-input\` | 164,378 | 48,944 | 43,079 | 59,944 | 13,149 | 11,011 |
5434
- | \`date-picker\` | 71,139 | 22,979 | 20,576 | 28,748 | 7,093 | 5,770 |
5435
- | \`description-list\` | 26,427 | 9,731 | 8,676 | 4,508 | 1,245 | 1,019 |
5436
- | \`device-screen\` | 90,636 | 26,928 | 23,745 | 48,154 | 11,741 | 9,537 |
5437
- | \`dialog\` | 44,336 | 15,228 | 13,591 | 11,066 | 3,038 | 2,504 |
5438
- | \`divider\` | 25,863 | 9,772 | 8,639 | 3,698 | 1,124 | 901 |
5439
- | \`donut-chart\` | 102,652 | 34,411 | 30,414 | 24,675 | 6,707 | 5,614 |
5440
- | \`drawer\` | 49,667 | 16,868 | 15,047 | 13,613 | 3,715 | 3,011 |
5441
- | \`drilldown\` | 49,229 | 16,549 | 14,754 | 15,373 | 4,004 | 3,259 |
5442
- | \`empty\` | 26,316 | 10,056 | 8,905 | 3,267 | 1,082 | 940 |
5443
- | \`file-input\` | 70,673 | 22,945 | 20,374 | 24,666 | 6,583 | 5,328 |
5444
- | \`filter-input\` | 110,437 | 35,688 | 31,632 | 32,398 | 8,308 | 6,828 |
5445
- | \`flex\` | 26,312 | 9,425 | 8,374 | 4,762 | 1,048 | 835 |
5446
- | \`format-date\` | 31,463 | 11,790 | 10,526 | 4,713 | 1,375 | 1,080 |
5447
- | \`graph\` | 123,229 | 35,163 | 30,791 | 53,465 | 12,048 | 9,902 |
5448
- | \`grid\` | 27,762 | 10,138 | 8,999 | 5,654 | 1,449 | 1,299 |
5449
- | \`heatmap\` | 110,082 | 36,553 | 32,230 | 27,372 | 7,457 | 6,138 |
5450
- | \`icon\` | 89,012 | 30,216 | 25,970 | 63,933 | 21,796 | 17,408 |
5451
- | \`icon-button\` | 46,117 | 14,590 | 13,017 | 14,983 | 3,157 | 2,541 |
5452
- | \`image\` | 27,760 | 10,306 | 9,130 | 5,215 | 1,612 | 1,165 |
5453
- | \`input\` | 51,329 | 17,271 | 15,279 | 11,244 | 3,386 | 2,667 |
5454
- | \`kbd\` | 30,078 | 11,326 | 10,044 | 5,492 | 1,645 | 1,336 |
5455
- | \`legend\` | 45,189 | 15,800 | 14,049 | 7,875 | 2,174 | 1,723 |
5456
- | \`lightbox\` | 63,432 | 20,711 | 18,451 | 23,035 | 5,995 | 4,779 |
5457
- | \`line-chart\` | 113,713 | 38,274 | 33,796 | 28,161 | 7,518 | 6,325 |
5458
- | \`list\` | 69,295 | 23,266 | 20,728 | 21,583 | 5,925 | 4,780 |
5459
- | \`listbox\` | 84,067 | 27,533 | 24,302 | 20,032 | 5,723 | 4,377 |
5460
- | \`loader\` | 30,222 | 11,214 | 10,001 | 5,653 | 1,692 | 1,446 |
5461
- | \`log\` | 97,190 | 31,211 | 27,676 | 52,078 | 14,639 | 12,605 |
5462
- | \`map\` | 148,663 | 38,807 | 33,478 | 88,244 | 18,675 | 15,253 |
5463
- | \`megamenu\` | 66,134 | 23,304 | 20,659 | 13,674 | 3,609 | 2,761 |
5464
- | \`menu\` | 109,460 | 35,102 | 30,963 | 41,175 | 10,013 | 8,490 |
5465
- | \`meter\` | 39,093 | 13,828 | 12,396 | 11,138 | 2,811 | 2,371 |
5466
- | \`motion-toggle\` | 27,988 | 10,728 | 9,570 | 3,044 | 986 | 691 |
5467
- | \`navigation\` | 37,610 | 13,572 | 12,052 | 7,076 | 1,994 | 1,639 |
5468
- | \`notifications\` | 73,053 | 22,901 | 20,428 | 31,758 | 7,638 | 6,500 |
5469
- | \`number-input\` | 62,635 | 20,555 | 18,315 | 18,546 | 4,836 | 3,875 |
5470
- | \`object-inspector\` | 135,889 | 42,495 | 37,372 | 54,433 | 13,314 | 11,141 |
5471
- | \`option\` | 30,122 | 10,932 | 9,733 | 7,587 | 2,161 | 1,667 |
5472
- | \`orb\` | 36,885 | 14,019 | 12,534 | 10,017 | 3,710 | 3,124 |
5473
- | \`outline\` | 38,845 | 13,848 | 12,318 | 12,105 | 3,441 | 2,757 |
5474
- | \`pagination\` | 156,463 | 48,039 | 41,781 | 62,533 | 15,144 | 12,481 |
5475
- | \`pin-input\` | 52,253 | 17,961 | 16,014 | 10,569 | 3,270 | 2,478 |
5476
- | \`popover\` | 68,059 | 24,109 | 21,375 | 9,595 | 2,659 | 2,056 |
5477
- | \`progress\` | 36,415 | 12,815 | 11,448 | 10,170 | 2,595 | 2,198 |
5478
- | \`qr-code\` | 45,270 | 17,490 | 15,609 | 18,587 | 6,645 | 5,711 |
5479
- | \`quote\` | 23,646 | 9,304 | 8,219 | 1,751 | 695 | 566 |
5480
- | \`radio\` | 51,120 | 16,284 | 14,482 | 11,591 | 2,729 | 2,135 |
5481
- | \`rating\` | 55,552 | 19,008 | 16,939 | 11,974 | 3,676 | 2,838 |
5482
- | \`sandbox\` | 195,792 | 57,341 | 49,175 | 138,931 | 37,550 | 30,797 |
5483
- | \`scatter-chart\` | 108,028 | 36,469 | 32,146 | 29,695 | 8,474 | 7,032 |
5484
- | \`scroll-area\` | 36,301 | 12,384 | 11,037 | 13,508 | 3,556 | 2,789 |
5485
- | \`select\` | 127,402 | 41,111 | 35,956 | 35,265 | 9,013 | 7,179 |
5486
- | \`skeleton\` | 26,848 | 9,947 | 8,858 | 4,755 | 1,388 | 1,055 |
5487
- | \`skip-link\` | 26,118 | 10,115 | 8,950 | 2,779 | 962 | 782 |
5488
- | \`slider\` | 69,630 | 20,733 | 18,542 | 28,574 | 6,244 | 5,064 |
5489
- | \`sparkline\` | 54,716 | 19,331 | 17,252 | 11,422 | 3,448 | 2,862 |
5490
- | \`spatial-bar-chart\` | 114,257 | 39,176 | 34,494 | 28,901 | 8,472 | 7,040 |
5491
- | \`spatial-heatmap\` | 126,853 | 42,152 | 37,041 | 41,460 | 11,657 | 9,747 |
5492
- | \`spatial-ribbon-chart\` | 113,229 | 38,746 | 34,107 | 29,691 | 8,828 | 7,379 |
5493
- | \`spatial-scatter-chart\` | 111,526 | 37,970 | 33,442 | 28,039 | 8,144 | 6,763 |
5494
- | \`spatial-surface-chart\` | 113,903 | 39,173 | 34,522 | 30,366 | 9,229 | 7,710 |
5495
- | \`spatial-treemap\` | 115,605 | 39,966 | 35,166 | 30,369 | 9,258 | 7,865 |
5496
- | \`speed-dial\` | 76,667 | 26,447 | 23,501 | 17,968 | 4,395 | 3,640 |
5497
- | \`splitter\` | 51,146 | 16,693 | 14,936 | 20,540 | 4,914 | 4,051 |
5498
- | \`stat\` | 29,171 | 10,751 | 9,585 | 5,194 | 1,469 | 1,215 |
5499
- | \`steps\` | 69,031 | 21,902 | 19,484 | 27,874 | 6,792 | 5,583 |
5500
- | \`strands\` | 63,680 | 23,697 | 20,906 | 38,176 | 13,662 | 11,974 |
5501
- | \`switch\` | 44,474 | 14,984 | 13,342 | 6,021 | 1,732 | 1,309 |
5502
- | \`table\` | 138,775 | 40,983 | 35,669 | 62,931 | 15,440 | 12,792 |
5503
- | \`tabs\` | 56,056 | 18,049 | 16,043 | 19,435 | 4,759 | 3,787 |
5504
- | \`tag\` | 48,197 | 17,126 | 15,318 | 13,012 | 3,654 | 3,000 |
5505
- | \`terminal\` | 104,821 | 29,348 | 25,855 | 57,202 | 12,094 | 9,923 |
5506
- | \`text\` | 29,286 | 10,211 | 9,003 | 7,183 | 1,498 | 1,245 |
5507
- | \`textarea\` | 48,930 | 16,380 | 14,613 | 9,404 | 2,641 | 2,101 |
5508
- | \`time-input\` | 196,693 | 57,968 | 50,426 | 72,808 | 16,487 | 13,633 |
5509
- | \`time-picker\` | 114,881 | 34,974 | 30,729 | 46,174 | 11,378 | 9,437 |
5510
- | \`timeline\` | 39,321 | 13,742 | 12,313 | 10,975 | 2,724 | 2,243 |
5511
- | \`toast\` | 60,192 | 20,340 | 18,204 | 20,047 | 5,409 | 4,369 |
5512
- | \`toggle\` | 51,106 | 16,789 | 14,915 | 10,853 | 3,073 | 2,333 |
5513
- | \`toolbar\` | 37,051 | 13,296 | 11,863 | 4,030 | 978 | 719 |
5514
- | \`tooltip\` | 62,502 | 22,263 | 19,779 | 11,291 | 3,116 | 2,549 |
5515
- | \`tour\` | 95,381 | 31,305 | 27,731 | 30,157 | 7,571 | 6,130 |
5516
- | \`tree\` | 77,354 | 25,063 | 22,318 | 25,869 | 6,886 | 5,698 |
5517
- | \`trend\` | 32,854 | 12,577 | 11,235 | 5,489 | 1,665 | 1,394 |
5518
- | \`video\` | 164,395 | 48,823 | 42,599 | 87,276 | 20,630 | 17,227 |
5519
- | \`video-playlist\` | 144,967 | 44,810 | 39,338 | 58,785 | 14,032 | 11,724 |
5520
- | \`virtual-list\` | 67,932 | 22,858 | 20,346 | 25,371 | 7,619 | 6,267 |
5413
+ | \`accordion\` | 39,561 | 13,995 | 12,583 | 8,786 | 2,377 | 2,029 |
5414
+ | \`announcement\` | 45,358 | 15,710 | 14,167 | 9,284 | 2,422 | 2,036 |
5415
+ | \`app-header\` | 41,438 | 14,394 | 12,972 | 11,033 | 2,928 | 2,503 |
5416
+ | \`area-chart\` | 118,158 | 39,810 | 35,479 | 23,910 | 6,476 | 5,638 |
5417
+ | \`aura\` | 62,986 | 21,313 | 19,073 | 31,766 | 9,554 | 8,210 |
5418
+ | \`avatar\` | 38,326 | 13,991 | 12,646 | 6,976 | 1,989 | 1,654 |
5419
+ | \`badge\` | 37,068 | 13,248 | 11,963 | 8,449 | 2,129 | 1,846 |
5420
+ | \`bar-chart\` | 133,015 | 43,527 | 38,769 | 38,228 | 10,046 | 8,579 |
5421
+ | \`blockquote\` | 30,364 | 11,301 | 10,161 | 4,608 | 1,399 | 1,380 |
5422
+ | \`breadcrumbs\` | 47,777 | 16,576 | 14,947 | 14,293 | 3,579 | 3,127 |
5423
+ | \`button\` | 46,708 | 15,645 | 14,052 | 11,683 | 2,944 | 2,417 |
5424
+ | \`button-group\` | 35,170 | 12,356 | 11,119 | 8,403 | 2,151 | 1,912 |
5425
+ | \`callout\` | 43,187 | 15,845 | 14,262 | 6,655 | 1,867 | 1,538 |
5426
+ | \`canvas\` | 166,591 | 47,621 | 41,766 | 104,158 | 27,112 | 23,008 |
5427
+ | \`card\` | 31,757 | 11,438 | 10,285 | 5,972 | 1,598 | 1,459 |
5428
+ | \`carousel\` | 59,047 | 18,869 | 17,121 | 25,777 | 6,008 | 4,914 |
5429
+ | \`chat\` | 108,482 | 33,272 | 29,583 | 44,418 | 11,091 | 9,195 |
5430
+ | \`checkbox\` | 51,715 | 16,778 | 15,050 | 9,645 | 2,459 | 1,972 |
5431
+ | \`checkbox-group\` | 59,648 | 18,772 | 16,818 | 15,598 | 3,933 | 3,202 |
5432
+ | \`code\` | 25,186 | 9,703 | 8,739 | 972 | 385 | 364 |
5433
+ | \`code-block\` | 136,938 | 41,152 | 36,607 | 65,928 | 15,629 | 13,123 |
5434
+ | \`code-editor\` | 110,408 | 30,655 | 27,273 | 54,765 | 11,336 | 9,275 |
5435
+ | \`code-input\` | 66,722 | 22,397 | 20,005 | 15,318 | 4,644 | 3,886 |
5436
+ | \`color-input\` | 189,959 | 52,983 | 46,513 | 98,361 | 20,729 | 17,300 |
5437
+ | \`color-picker\` | 146,165 | 40,033 | 35,502 | 85,045 | 18,376 | 15,361 |
5438
+ | \`combobox\` | 161,622 | 48,901 | 43,142 | 52,717 | 12,206 | 10,065 |
5439
+ | \`command\` | 137,832 | 41,494 | 36,596 | 52,482 | 12,779 | 10,747 |
5440
+ | \`copy-button\` | 99,875 | 31,454 | 28,091 | 32,842 | 7,369 | 6,174 |
5441
+ | \`data-table\` | 245,504 | 70,438 | 61,000 | 122,199 | 29,296 | 24,130 |
5442
+ | \`date-input\` | 167,431 | 49,378 | 43,813 | 59,928 | 13,115 | 11,090 |
5443
+ | \`date-picker\` | 74,577 | 23,991 | 21,599 | 28,737 | 6,999 | 5,792 |
5444
+ | \`description-list\` | 29,883 | 10,874 | 9,794 | 4,500 | 1,238 | 1,141 |
5445
+ | \`device-screen\` | 94,553 | 28,011 | 24,847 | 47,676 | 11,441 | 9,516 |
5446
+ | \`dialog\` | 47,456 | 16,184 | 14,570 | 11,062 | 2,985 | 2,574 |
5447
+ | \`divider\` | 29,323 | 10,891 | 9,786 | 3,695 | 1,110 | 963 |
5448
+ | \`donut-chart\` | 113,293 | 37,423 | 33,375 | 25,992 | 6,804 | 5,948 |
5449
+ | \`drawer\` | 52,770 | 17,818 | 16,033 | 13,588 | 3,637 | 3,195 |
5450
+ | \`drilldown\` | 52,347 | 17,463 | 15,721 | 15,358 | 3,914 | 3,238 |
5451
+ | \`empty\` | 29,776 | 11,164 | 10,031 | 3,263 | 1,085 | 916 |
5452
+ | \`file-input\` | 73,768 | 23,732 | 21,341 | 24,633 | 6,384 | 5,428 |
5453
+ | \`filter-input\` | 120,112 | 38,444 | 34,261 | 33,069 | 8,398 | 6,931 |
5454
+ | \`flex\` | 29,774 | 10,573 | 9,507 | 4,761 | 1,018 | 916 |
5455
+ | \`format-date\` | 34,909 | 12,903 | 11,647 | 4,702 | 1,371 | 1,199 |
5456
+ | \`graph\` | 127,248 | 36,127 | 31,791 | 53,514 | 12,039 | 9,998 |
5457
+ | \`grid\` | 31,224 | 11,249 | 10,146 | 5,655 | 1,431 | 1,480 |
5458
+ | \`heatmap\` | 120,717 | 39,580 | 35,286 | 28,674 | 7,605 | 6,391 |
5459
+ | \`icon\` | 92,820 | 31,651 | 27,289 | 63,429 | 21,312 | 17,229 |
5460
+ | \`icon-button\` | 50,068 | 15,839 | 14,231 | 15,046 | 3,141 | 2,697 |
5461
+ | \`image\` | 31,220 | 11,429 | 10,279 | 5,209 | 1,569 | 1,311 |
5462
+ | \`input\` | 63,219 | 21,167 | 18,814 | 12,036 | 3,503 | 2,826 |
5463
+ | \`kbd\` | 34,629 | 12,734 | 11,432 | 5,600 | 1,667 | 1,367 |
5464
+ | \`legend\` | 48,629 | 16,724 | 15,028 | 7,870 | 2,164 | 1,819 |
5465
+ | \`lightbox\` | 66,532 | 21,585 | 19,376 | 23,025 | 5,846 | 4,743 |
5466
+ | \`line-chart\` | 124,330 | 41,210 | 36,725 | 29,472 | 7,662 | 6,609 |
5467
+ | \`list\` | 72,365 | 24,211 | 21,608 | 21,551 | 5,803 | 4,830 |
5468
+ | \`listbox\` | 94,951 | 30,728 | 27,296 | 21,287 | 5,879 | 4,924 |
5469
+ | \`loader\` | 33,676 | 12,301 | 11,134 | 5,650 | 1,670 | 1,461 |
5470
+ | \`log\` | 100,719 | 31,933 | 28,675 | 52,040 | 14,588 | 12,589 |
5471
+ | \`map\` | 152,486 | 39,820 | 34,611 | 88,254 | 18,594 | 15,310 |
5472
+ | \`markdown\` | 168,011 | 51,056 | 45,198 | 92,099 | 23,837 | 20,188 |
5473
+ | \`megamenu\` | 69,227 | 24,083 | 21,538 | 13,670 | 3,557 | 2,815 |
5474
+ | \`menu\` | 114,819 | 36,037 | 32,142 | 42,892 | 10,303 | 8,618 |
5475
+ | \`meter\` | 42,533 | 14,880 | 13,462 | 11,127 | 2,766 | 2,412 |
5476
+ | \`motion-toggle\` | 31,396 | 11,873 | 10,652 | 3,040 | 968 | 849 |
5477
+ | \`navigation\` | 40,846 | 14,589 | 13,062 | 7,073 | 1,979 | 1,594 |
5478
+ | \`notifications\` | 76,115 | 23,641 | 21,340 | 31,727 | 7,476 | 6,337 |
5479
+ | \`number-input\` | 66,054 | 21,574 | 19,367 | 18,509 | 4,757 | 3,849 |
5480
+ | \`object-inspector\` | 139,550 | 43,233 | 38,293 | 54,479 | 13,353 | 11,058 |
5481
+ | \`option\` | 33,574 | 12,053 | 10,869 | 7,573 | 2,118 | 1,800 |
5482
+ | \`orb\` | 40,300 | 15,056 | 13,609 | 10,010 | 3,645 | 3,084 |
5483
+ | \`outline\` | 42,296 | 14,868 | 13,422 | 12,101 | 3,424 | 2,821 |
5484
+ | \`pagination\` | 167,710 | 50,907 | 44,604 | 64,096 | 15,386 | 12,602 |
5485
+ | \`pin-input\` | 55,690 | 18,983 | 17,059 | 10,564 | 3,238 | 2,569 |
5486
+ | \`popover\` | 71,142 | 24,821 | 22,224 | 9,589 | 2,620 | 2,174 |
5487
+ | \`progress\` | 39,850 | 13,883 | 12,578 | 10,161 | 2,578 | 2,302 |
5488
+ | \`qr-code\` | 48,627 | 18,434 | 16,622 | 18,513 | 6,658 | 5,746 |
5489
+ | \`quote\` | 27,106 | 10,425 | 9,359 | 1,748 | 685 | 747 |
5490
+ | \`radio\` | 54,548 | 17,326 | 15,521 | 11,585 | 2,704 | 2,212 |
5491
+ | \`rating\` | 58,987 | 20,050 | 18,000 | 11,968 | 3,603 | 2,913 |
5492
+ | \`sandbox\` | 200,093 | 58,244 | 50,383 | 139,236 | 37,509 | 30,923 |
5493
+ | \`scatter-chart\` | 118,750 | 39,495 | 35,267 | 31,014 | 8,661 | 7,248 |
5494
+ | \`scroll-area\` | 39,761 | 13,460 | 12,129 | 13,504 | 3,494 | 2,979 |
5495
+ | \`select\` | 138,520 | 44,038 | 38,946 | 36,681 | 9,198 | 7,452 |
5496
+ | \`shortcut-overlay\` | 60,000 | 20,255 | 18,217 | 18,437 | 4,954 | 4,205 |
5497
+ | \`skeleton\` | 30,308 | 11,091 | 9,987 | 4,751 | 1,389 | 1,192 |
5498
+ | \`skip-link\` | 29,568 | 11,205 | 10,035 | 2,776 | 960 | 781 |
5499
+ | \`slider\` | 73,575 | 21,928 | 19,737 | 28,629 | 6,191 | 5,236 |
5500
+ | \`sparkline\` | 58,132 | 20,243 | 18,274 | 11,404 | 3,377 | 2,961 |
5501
+ | \`spatial-bar-chart\` | 124,903 | 42,074 | 37,432 | 30,216 | 8,692 | 7,314 |
5502
+ | \`spatial-heatmap\` | 137,502 | 44,988 | 39,974 | 42,763 | 11,861 | 10,060 |
5503
+ | \`spatial-ribbon-chart\` | 123,875 | 41,651 | 37,047 | 31,002 | 9,061 | 7,662 |
5504
+ | \`spatial-scatter-chart\` | 122,160 | 40,896 | 36,437 | 29,349 | 8,321 | 7,098 |
5505
+ | \`spatial-surface-chart\` | 124,554 | 42,075 | 37,484 | 31,683 | 9,454 | 8,135 |
5506
+ | \`spatial-treemap\` | 126,241 | 42,835 | 38,054 | 31,684 | 9,478 | 8,087 |
5507
+ | \`speed-dial\` | 79,729 | 27,186 | 24,345 | 17,950 | 4,301 | 3,567 |
5508
+ | \`splitter\` | 54,565 | 17,709 | 15,981 | 20,507 | 4,830 | 4,123 |
5509
+ | \`stat\` | 32,609 | 11,879 | 10,738 | 5,185 | 1,457 | 1,330 |
5510
+ | \`steps\` | 72,959 | 23,093 | 20,684 | 27,923 | 6,649 | 5,649 |
5511
+ | \`strands\` | 67,094 | 24,617 | 21,929 | 38,157 | 13,548 | 11,950 |
5512
+ | \`switch\` | 48,441 | 16,261 | 14,570 | 6,087 | 1,760 | 1,518 |
5513
+ | \`table\` | 142,418 | 41,606 | 36,654 | 62,923 | 15,429 | 12,676 |
5514
+ | \`tabs\` | 59,668 | 19,133 | 17,174 | 19,476 | 4,640 | 3,916 |
5515
+ | \`tag\` | 51,281 | 18,005 | 16,226 | 13,004 | 3,602 | 2,929 |
5516
+ | \`terminal\` | 108,490 | 30,438 | 26,980 | 57,252 | 12,106 | 10,033 |
5517
+ | \`text\` | 32,748 | 11,326 | 10,147 | 7,181 | 1,481 | 1,251 |
5518
+ | \`textarea\` | 60,804 | 20,320 | 18,237 | 10,180 | 2,820 | 2,385 |
5519
+ | \`time-input\` | 207,496 | 60,680 | 52,899 | 74,534 | 16,750 | 13,791 |
5520
+ | \`time-picker\` | 125,958 | 38,141 | 33,719 | 47,612 | 11,736 | 9,674 |
5521
+ | \`timeline\` | 42,754 | 14,904 | 13,485 | 10,954 | 2,684 | 2,284 |
5522
+ | \`toast\` | 87,339 | 27,402 | 24,550 | 33,684 | 8,269 | 6,928 |
5523
+ | \`toggle\` | 55,048 | 17,897 | 16,115 | 10,915 | 3,017 | 2,628 |
5524
+ | \`toolbar\` | 40,504 | 14,297 | 12,872 | 4,026 | 960 | 922 |
5525
+ | \`tooltip\` | 65,585 | 23,017 | 20,684 | 11,285 | 3,065 | 2,514 |
5526
+ | \`tour\` | 98,917 | 32,169 | 28,723 | 30,178 | 7,526 | 6,174 |
5527
+ | \`tree\` | 80,430 | 25,957 | 23,217 | 25,844 | 6,724 | 5,792 |
5528
+ | \`trend\` | 36,294 | 13,695 | 12,391 | 5,478 | 1,638 | 1,398 |
5529
+ | \`video\` | 169,658 | 49,549 | 43,708 | 88,458 | 20,605 | 17,205 |
5530
+ | \`video-playlist\` | 150,283 | 45,803 | 40,584 | 60,485 | 14,342 | 12,003 |
5531
+ | \`virtual-list\` | 73,011 | 24,093 | 21,732 | 27,032 | 7,943 | 6,652 |
5521
5532
 
5522
5533
  ## What an install adds to \`node_modules\`
5523
5534
 
@@ -5530,12 +5541,12 @@ without its whitespace, and the sizes count each one that way.
5530
5541
 
5531
5542
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
5532
5543
  |---|---|---|---|---|
5533
- | \`@fusion.dev/helix-core\` | 2,285,769 | 619 | 827,801 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
5534
- | \`@fusion.dev/helix-headless\` | 24,575,092 | 786 | 2,604,298 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
5535
- | \`@fusion.dev/helix-icons\` | 160,828 | 21 | 52,435 | \`svgo\` |
5536
- | \`@fusion.dev/helix-styles\` | 124,808 | 6 | 0 | none |
5544
+ | \`@fusion.dev/helix-core\` | 2,379,236 | 635 | 874,551 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
5545
+ | \`@fusion.dev/helix-headless\` | 25,732,149 | 816 | 2,740,221 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
5546
+ | \`@fusion.dev/helix-icons\` | 161,693 | 21 | 52,740 | \`svgo\` |
5547
+ | \`@fusion.dev/helix-styles\` | 129,367 | 6 | 0 | none |
5537
5548
  | \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
5538
- | \`@fusion.dev/helix\` | 25,207,674 | 1,033 | 572,629 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
5549
+ | \`@fusion.dev/helix\` | 26,233,705 | 1,065 | 585,129 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
5539
5550
 
5540
5551
  ## Not measured yet
5541
5552
 
@@ -6955,6 +6966,26 @@ over a package of the same name. The preview loads its document again when one
6955
6966
  of them changes, because a browser reads an import map only as a document
6956
6967
  starts. A \`src\` document declares its own import map.
6957
6968
 
6969
+ A module pane in TypeScript or JSX is compiled before the frame loads it. The
6970
+ compiler runs in a worker, which the preview starts from a \`blob:\` address, and
6971
+ loads from the \`cdn\`. A page whose Content Security Policy refuses \`blob:\`
6972
+ workers, as \`worker-src 'self'\` does, serves the worker as a file instead. Copy
6973
+ \`@fusion.dev/helix/sandbox/compile-worker.js\` to the page's own origin, and
6974
+ give its address to \`registerCompilerWorker\` before the first preview compiles:
6975
+
6976
+ \`\`\`js
6977
+ import { registerCompilerWorker } from '@fusion.dev/helix/sandbox'
6978
+
6979
+ registerCompilerWorker('/sandbox/compile-worker.js')
6980
+ \`\`\`
6981
+
6982
+ A copied file does not update with the package. Where a release changes the
6983
+ messages the worker and the page exchange, the console warns that the file is
6984
+ from another release and names the address to copy it to again.
6985
+
6986
+ In both cases the policy's \`script-src\` names the \`cdn\`'s host, which the
6987
+ compiler and the packages load from.
6988
+
6958
6989
  ## Editing keys
6959
6990
 
6960
6991
  In a source pane, Tab inserts two spaces. Shift+Tab moves focus back, and
@@ -9549,6 +9580,79 @@ For one-off text outside prose, use \`[data-text]\` to set the ramp:
9549
9580
  heading looks loose at every size. The fix is not proportional, because larger
9550
9581
  type needs less leading. \`--helix-leading-heading\` expresses that once, so no
9551
9582
  heading level needs its own multiplier.
9583
+ `,
9584
+ undo: `---
9585
+ description: Do an action at once and offer to undo it from a toast, in place of asking first.
9586
+ section: Essentials
9587
+ title: Undo an action from a toast
9588
+ ---
9589
+
9590
+ # Undo an action from a toast
9591
+
9592
+ An action a reader can take back does not need a confirmation dialog. Do the
9593
+ action at once, then show a toast that offers to undo it. The reader who meant
9594
+ it loses no time, and the reader who did not has a few seconds to take it back.
9595
+
9596
+ ## Show the toast after the action
9597
+
9598
+ Call \`undoable()\` on a \`Toast\` region after the action, with what to do if the
9599
+ reader undoes it:
9600
+
9601
+ \`\`\`js
9602
+ const stack = document.querySelector('helix-toast')
9603
+
9604
+ archive(file)
9605
+ stack.undoable(\`Archived \${file.name}\`, {
9606
+ undo: () => restore(file),
9607
+ })
9608
+ \`\`\`
9609
+
9610
+ The message holds an Undo button and shows for 8 seconds. While it shows:
9611
+
9612
+ - Command+Z, or Control+Z on Windows and Linux, undoes the newest one, unless
9613
+ focus is in a text field, which keeps the key for its own undo, or the app
9614
+ handled the key first and called \`preventDefault()\`.
9615
+ - A pointer or focus in the stack pauses its timer.
9616
+ - A screen reader hears the message and then which keys undo it.
9617
+ - The shortcut overlay and its sheet list the key.
9618
+
9619
+ An app with an undo of its own on those keys, such as a canvas or an editor,
9620
+ sets \`undo-keys=""\` on the region. The Undo button stays, and the keys stay
9621
+ the app's.
9622
+
9623
+ ## Hold back what cannot be taken back
9624
+
9625
+ Where the action cannot be reversed once it has happened, such as deleting a
9626
+ record on a server, do it when the message closes. Remove the item from the
9627
+ page at once, and pass \`commit\`:
9628
+
9629
+ \`\`\`js
9630
+ row.hidden = true
9631
+ const result = await stack.undoable('Deleted 3 files', {
9632
+ commit: () => deleteOnServer(ids),
9633
+ undo: () => (row.hidden = false),
9634
+ })
9635
+ \`\`\`
9636
+
9637
+ \`undoable()\` returns a promise that settles to \`undone\` or \`kept\`.
9638
+
9639
+ A message that never closes is kept as well: \`commit\` runs when the region
9640
+ leaves the page, such as on a route change, and when the page is hidden to be
9641
+ closed or reloaded. A browser can end a page without telling it, so a server
9642
+ that holds a deletion back should also finish it on a timeout of its own.
9643
+
9644
+ ## Keep a confirmation where an undo cannot help
9645
+
9646
+ | Action | Use |
9647
+ |---|---|
9648
+ | Archive, move, rename, reorder, or change a setting | Undo toast |
9649
+ | Delete to a trash, or delete held back until the message closes | Undo toast |
9650
+ | Delete with no way back, such as emptying the trash | Confirmation dialog |
9651
+ | Send, publish, invite, or pay | Confirmation dialog |
9652
+
9653
+ An action that reaches another person or leaves the app cannot be taken back
9654
+ from a toast, because it has already happened somewhere you do not control.
9655
+ Ask first with a \`Dialog\` with \`alert\`.
9552
9656
  `,
9553
9657
  'using-helix-with-an-agent': `---
9554
9658
  description: The rules an agent follows to write Helix code, and the five mistakes that look like Helix bugs.