@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.
- package/content/building-on-the-headless-tier.mdx +4 -3
- package/content/diagnostics.mdx +2 -0
- package/content/metrics.mdx +262 -254
- package/content/sandbox.mdx +20 -0
- package/content/undo.mdx +72 -0
- package/dist/pages.generated.js +6 -0
- package/dist/sources.generated.js +361 -257
- package/package.json +12 -12
|
@@ -425,7 +425,7 @@ names the tag to define.
|
|
|
425
425
|
|
|
426
426
|
[//]: # (renders)
|
|
427
427
|
|
|
428
|
-
**
|
|
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.
|
|
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\` |
|
|
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\` |
|
|
5138
|
-
| \`@fusion.dev/helix-headless\` | 1,
|
|
5139
|
-
| \`@fusion.dev/helix-icons\` |
|
|
5140
|
-
| \`@fusion.dev/helix-theme\` | 4,
|
|
5141
|
-
| \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,
|
|
5142
|
-
| \`@fusion.dev/helix\` | 2,
|
|
5143
|
-
| \`lit\` | 15,
|
|
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\` |
|
|
5156
|
-
| \`elements.css\` |
|
|
5157
|
-
| \`helix.css\` | 207 |
|
|
5158
|
-
| \`primitives.css\` | 7,511 | 1,
|
|
5159
|
-
| \`tokens.css\` | 23,114 | 2,
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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** |
|
|
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** |
|
|
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** |
|
|
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** |
|
|
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** |
|
|
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** |
|
|
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** |
|
|
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
|
|
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\` |
|
|
5292
|
-
| \`announcement\` |
|
|
5293
|
-
| \`app-header\` |
|
|
5294
|
-
| \`area-chart\` |
|
|
5295
|
-
| \`avatar\` |
|
|
5296
|
-
| \`badge\` |
|
|
5297
|
-
| \`bar-chart\` |
|
|
5298
|
-
| \`blockquote\` |
|
|
5299
|
-
| \`breadcrumbs\` |
|
|
5300
|
-
| \`button\` |
|
|
5301
|
-
| \`button-group\` |
|
|
5302
|
-
| \`callout\` |
|
|
5303
|
-
| \`canvas\` |
|
|
5304
|
-
| \`card\` |
|
|
5305
|
-
| \`carousel\` |
|
|
5306
|
-
| \`chat\` |
|
|
5307
|
-
| \`checkbox\` |
|
|
5308
|
-
| \`checkbox-group\` |
|
|
5309
|
-
| \`code\` |
|
|
5310
|
-
| \`code-block\` |
|
|
5311
|
-
| \`
|
|
5312
|
-
| \`
|
|
5313
|
-
| \`
|
|
5314
|
-
| \`
|
|
5315
|
-
| \`
|
|
5316
|
-
| \`
|
|
5317
|
-
| \`
|
|
5318
|
-
| \`
|
|
5319
|
-
| \`
|
|
5320
|
-
| \`
|
|
5321
|
-
| \`
|
|
5322
|
-
| \`
|
|
5323
|
-
| \`
|
|
5324
|
-
| \`
|
|
5325
|
-
| \`
|
|
5326
|
-
| \`
|
|
5327
|
-
| \`
|
|
5328
|
-
| \`
|
|
5329
|
-
| \`
|
|
5330
|
-
| \`
|
|
5331
|
-
| \`
|
|
5332
|
-
| \`
|
|
5333
|
-
| \`
|
|
5334
|
-
| \`
|
|
5335
|
-
| \`
|
|
5336
|
-
| \`
|
|
5337
|
-
| \`
|
|
5338
|
-
| \`
|
|
5339
|
-
| \`
|
|
5340
|
-
| \`
|
|
5341
|
-
| \`
|
|
5342
|
-
| \`
|
|
5343
|
-
| \`
|
|
5344
|
-
| \`
|
|
5345
|
-
| \`
|
|
5346
|
-
| \`
|
|
5347
|
-
| \`
|
|
5348
|
-
| \`
|
|
5349
|
-
| \`
|
|
5350
|
-
| \`
|
|
5351
|
-
| \`
|
|
5352
|
-
| \`
|
|
5353
|
-
| \`
|
|
5354
|
-
| \`
|
|
5355
|
-
| \`
|
|
5356
|
-
| \`
|
|
5357
|
-
| \`
|
|
5358
|
-
| \`
|
|
5359
|
-
| \`
|
|
5360
|
-
| \`
|
|
5361
|
-
| \`
|
|
5362
|
-
| \`
|
|
5363
|
-
| \`
|
|
5364
|
-
| \`
|
|
5365
|
-
| \`
|
|
5366
|
-
| \`
|
|
5367
|
-
| \`
|
|
5368
|
-
| \`
|
|
5369
|
-
| \`
|
|
5370
|
-
| \`
|
|
5371
|
-
| \`
|
|
5372
|
-
| \`
|
|
5373
|
-
| \`
|
|
5374
|
-
| \`spatial-
|
|
5375
|
-
| \`spatial-
|
|
5376
|
-
| \`
|
|
5377
|
-
| \`
|
|
5378
|
-
| \`
|
|
5379
|
-
| \`
|
|
5380
|
-
| \`
|
|
5381
|
-
| \`
|
|
5382
|
-
| \`
|
|
5383
|
-
| \`
|
|
5384
|
-
| \`
|
|
5385
|
-
| \`
|
|
5386
|
-
| \`
|
|
5387
|
-
| \`
|
|
5388
|
-
| \`
|
|
5389
|
-
| \`
|
|
5390
|
-
| \`
|
|
5391
|
-
| \`
|
|
5392
|
-
| \`
|
|
5393
|
-
| \`
|
|
5394
|
-
| \`
|
|
5395
|
-
| \`
|
|
5396
|
-
| \`
|
|
5397
|
-
| \`
|
|
5398
|
-
| \`
|
|
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\` |
|
|
5407
|
-
| \`announcement\` |
|
|
5408
|
-
| \`app-header\` |
|
|
5409
|
-
| \`area-chart\` |
|
|
5410
|
-
| \`aura\` |
|
|
5411
|
-
| \`avatar\` |
|
|
5412
|
-
| \`badge\` |
|
|
5413
|
-
| \`bar-chart\` |
|
|
5414
|
-
| \`blockquote\` |
|
|
5415
|
-
| \`breadcrumbs\` |
|
|
5416
|
-
| \`button\` |
|
|
5417
|
-
| \`button-group\` |
|
|
5418
|
-
| \`callout\` |
|
|
5419
|
-
| \`canvas\` |
|
|
5420
|
-
| \`card\` |
|
|
5421
|
-
| \`carousel\` |
|
|
5422
|
-
| \`chat\` |
|
|
5423
|
-
| \`checkbox\` |
|
|
5424
|
-
| \`checkbox-group\` |
|
|
5425
|
-
| \`code\` |
|
|
5426
|
-
| \`code-block\` |
|
|
5427
|
-
| \`
|
|
5428
|
-
| \`
|
|
5429
|
-
| \`
|
|
5430
|
-
| \`
|
|
5431
|
-
| \`
|
|
5432
|
-
| \`
|
|
5433
|
-
| \`
|
|
5434
|
-
| \`
|
|
5435
|
-
| \`
|
|
5436
|
-
| \`
|
|
5437
|
-
| \`
|
|
5438
|
-
| \`
|
|
5439
|
-
| \`
|
|
5440
|
-
| \`
|
|
5441
|
-
| \`
|
|
5442
|
-
| \`
|
|
5443
|
-
| \`
|
|
5444
|
-
| \`
|
|
5445
|
-
| \`
|
|
5446
|
-
| \`
|
|
5447
|
-
| \`
|
|
5448
|
-
| \`
|
|
5449
|
-
| \`
|
|
5450
|
-
| \`
|
|
5451
|
-
| \`
|
|
5452
|
-
| \`
|
|
5453
|
-
| \`
|
|
5454
|
-
| \`
|
|
5455
|
-
| \`
|
|
5456
|
-
| \`
|
|
5457
|
-
| \`
|
|
5458
|
-
| \`
|
|
5459
|
-
| \`
|
|
5460
|
-
| \`
|
|
5461
|
-
| \`
|
|
5462
|
-
| \`
|
|
5463
|
-
| \`
|
|
5464
|
-
| \`
|
|
5465
|
-
| \`
|
|
5466
|
-
| \`
|
|
5467
|
-
| \`
|
|
5468
|
-
| \`
|
|
5469
|
-
| \`
|
|
5470
|
-
| \`
|
|
5471
|
-
| \`
|
|
5472
|
-
| \`
|
|
5473
|
-
| \`
|
|
5474
|
-
| \`
|
|
5475
|
-
| \`
|
|
5476
|
-
| \`
|
|
5477
|
-
| \`
|
|
5478
|
-
| \`
|
|
5479
|
-
| \`
|
|
5480
|
-
| \`
|
|
5481
|
-
| \`
|
|
5482
|
-
| \`
|
|
5483
|
-
| \`
|
|
5484
|
-
| \`
|
|
5485
|
-
| \`
|
|
5486
|
-
| \`
|
|
5487
|
-
| \`
|
|
5488
|
-
| \`
|
|
5489
|
-
| \`
|
|
5490
|
-
| \`
|
|
5491
|
-
| \`
|
|
5492
|
-
| \`
|
|
5493
|
-
| \`
|
|
5494
|
-
| \`spatial-
|
|
5495
|
-
| \`spatial-
|
|
5496
|
-
| \`
|
|
5497
|
-
| \`
|
|
5498
|
-
| \`
|
|
5499
|
-
| \`
|
|
5500
|
-
| \`
|
|
5501
|
-
| \`
|
|
5502
|
-
| \`
|
|
5503
|
-
| \`
|
|
5504
|
-
| \`
|
|
5505
|
-
| \`
|
|
5506
|
-
| \`
|
|
5507
|
-
| \`
|
|
5508
|
-
| \`
|
|
5509
|
-
| \`
|
|
5510
|
-
| \`
|
|
5511
|
-
| \`
|
|
5512
|
-
| \`
|
|
5513
|
-
| \`
|
|
5514
|
-
| \`
|
|
5515
|
-
| \`
|
|
5516
|
-
| \`
|
|
5517
|
-
| \`
|
|
5518
|
-
| \`
|
|
5519
|
-
| \`
|
|
5520
|
-
| \`
|
|
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,
|
|
5534
|
-
| \`@fusion.dev/helix-headless\` |
|
|
5535
|
-
| \`@fusion.dev/helix-icons\` |
|
|
5536
|
-
| \`@fusion.dev/helix-styles\` |
|
|
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\` |
|
|
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.
|