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