@fusion.dev/helix-docs 0.217.0 → 0.219.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.
|
@@ -431,17 +431,18 @@ names the tag to define.
|
|
|
431
431
|
|---|---|
|
|
432
432
|
| \`area-chart\`, \`bar-chart\`, \`copy-button\`, \`donut-chart\`, \`heatmap\`, \`line-chart\`, \`scatter-chart\`, \`spatial-bar-chart\`, \`spatial-heatmap\`, \`spatial-ribbon-chart\`, \`spatial-scatter-chart\`, \`spatial-surface-chart\`, \`spatial-treemap\` | \`tooltip\` |
|
|
433
433
|
| \`breadcrumbs\` | \`breadcrumb\` |
|
|
434
|
-
| \`canvas
|
|
435
|
-
| \`chat\` | \`chat-message\` |
|
|
434
|
+
| \`canvas\` | \`icon-button\` |
|
|
435
|
+
| \`chat\` | \`chat-message\`, \`tooltip\` |
|
|
436
436
|
| \`checkbox-group\`, \`table\` | \`checkbox\` |
|
|
437
437
|
| \`code-block\`, \`object-inspector\` | \`copy-button\` |
|
|
438
|
-
| \`code-editor
|
|
438
|
+
| \`code-editor\` | \`button\`, \`icon-button\`, \`toolbar\` |
|
|
439
439
|
| \`color-input\` | \`color-picker\` |
|
|
440
440
|
| \`color-picker\` | \`button\`, \`button-group\`, \`slider\` |
|
|
441
441
|
| \`combobox\` | \`listbox\`, \`tag\` |
|
|
442
442
|
| \`command\` | \`dialog\`, \`listbox\`, \`option\`, \`option-group\` |
|
|
443
443
|
| \`data-table\` | \`checkbox\`, \`pagination\` |
|
|
444
444
|
| \`date-input\` | \`date-picker\`, \`tag\` |
|
|
445
|
+
| \`device-screen\`, \`graph\`, \`map\` | \`icon-button\`, \`tooltip\` |
|
|
445
446
|
| \`file-input\` | \`tag\` |
|
|
446
447
|
| \`filter-input\` | \`divider\`, \`menu\`, \`menu-item\` |
|
|
447
448
|
| \`log\` | \`log-group\`, \`log-line\` |
|
|
@@ -451,6 +452,7 @@ names the tag to define.
|
|
|
451
452
|
| \`select\` | \`listbox\` |
|
|
452
453
|
| \`shortcut-overlay\` | \`dialog\` |
|
|
453
454
|
| \`steps\`, \`tour\` | \`button\` |
|
|
455
|
+
| \`terminal\` | \`button\`, \`icon-button\`, \`toolbar\`, \`tooltip\` |
|
|
454
456
|
| \`time-input\` | \`tag\`, \`time-picker\` |
|
|
455
457
|
| \`time-picker\` | \`listbox\`, \`option\` |
|
|
456
458
|
| \`video\`, \`video-playlist\` | \`menu\`, \`menu-item\` |
|
|
@@ -1416,7 +1418,7 @@ The surfaces above it form an ordered ladder:
|
|
|
1416
1418
|
| \`--helix-color-background\` | <span data-token-swatch style={{ background: 'var(--helix-color-background)' }} /> | The page background. Every other surface sits on it. |
|
|
1417
1419
|
| \`--helix-color-surface\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface)' }} /> | A surface on the page, such as a card or a panel. The separation policy sets it apart with a fill, a border, or a shadow. |
|
|
1418
1420
|
| \`--helix-color-surface-raised\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A raised surface on the page, such as a selected tab or a hovered row. Its fill is one step down the ramp. |
|
|
1419
|
-
| \`--helix-color-surface-overlay\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its shadow
|
|
1421
|
+
| \`--helix-color-surface-overlay\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its edge and its shadow set it apart. |
|
|
1420
1422
|
| \`--helix-color-surface-sunken\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface that holds a value, such as an input, a track, or a groove. Its fill sets it apart. |
|
|
1421
1423
|
|
|
1422
1424
|
[//]: # (/tokens)
|
|
@@ -5130,7 +5132,7 @@ on its own.
|
|
|
5130
5132
|
|
|
5131
5133
|
| | Raw | Gzip | Brotli |
|
|
5132
5134
|
|---|---|---|---|
|
|
5133
|
-
| Lit and \`@fusion.dev/helix-core\` |
|
|
5135
|
+
| Lit and \`@fusion.dev/helix-core\` | 299,527 | 94,142 | 80,720 |
|
|
5134
5136
|
|
|
5135
5137
|
## Whole packages
|
|
5136
5138
|
|
|
@@ -5141,12 +5143,12 @@ either barrel. The per-component tables show what your page pays.
|
|
|
5141
5143
|
|
|
5142
5144
|
| Package | Raw | Gzip | Brotli | |
|
|
5143
5145
|
|---|---|---|---|---|
|
|
5144
|
-
| \`@fusion.dev/helix-core\` |
|
|
5145
|
-
| \`@fusion.dev/helix-headless\` | 1,
|
|
5146
|
-
| \`@fusion.dev/helix-icons\` |
|
|
5146
|
+
| \`@fusion.dev/helix-core\` | 298,736 | 93,945 | 80,301 | The element base class, mixins, decorators, and floating positioning. |
|
|
5147
|
+
| \`@fusion.dev/helix-headless\` | 1,633,375 | 450,036 | 340,264 | Every headless family. The barrel entry includes all of them. |
|
|
5148
|
+
| \`@fusion.dev/helix-icons\` | 64,839 | 20,748 | 17,254 | The whole glyph set. |
|
|
5147
5149
|
| \`@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
5150
|
| \`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,
|
|
5151
|
+
| \`@fusion.dev/helix\` | 2,419,757 | 619,377 | 444,175 | Every styled family. |
|
|
5150
5152
|
| \`lit\` | 15,396 | 5,990 | 5,419 | Lit itself, listed so you can subtract it from every row above. |
|
|
5151
5153
|
|
|
5152
5154
|
## Stylesheets
|
|
@@ -5159,21 +5161,21 @@ shows the whole cost of using the base layer on its own.
|
|
|
5159
5161
|
|
|
5160
5162
|
| File | Raw | Gzip | Brotli | |
|
|
5161
5163
|
|---|---|---|---|---|
|
|
5162
|
-
| \`base.css\` | 35,
|
|
5163
|
-
| \`elements.css\` | 24,
|
|
5164
|
+
| \`base.css\` | 35,867 | 5,083 | 4,377 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
|
|
5165
|
+
| \`elements.css\` | 24,845 | 3,457 | 3,019 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
|
|
5164
5166
|
| \`helix.css\` | 207 | 149 | 118 | The other four stylesheets in one import, in the order they must load. |
|
|
5165
5167
|
| \`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,
|
|
5168
|
+
| \`tokens.css\` | 23,137 | 2,849 | 2,385 | The 200 semantic tokens. Every styled component needs them. |
|
|
5167
5169
|
|
|
5168
5170
|
## What the numbers say
|
|
5169
5171
|
|
|
5170
|
-
**Most of your first component is the shared runtime.** The median styled family is 21,
|
|
5172
|
+
**Most of your first component is the shared runtime.** The median styled family is 21,474 bytes gzipped alone, and it adds 4,815 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.
|
|
5171
5173
|
|
|
5172
|
-
Across the
|
|
5174
|
+
Across the 120 styled components, the smallest is \`code\` at 9,733 bytes gzipped alone, and the largest is \`data-table\` at 70,785. Every family together is 619,377.
|
|
5173
5175
|
|
|
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
|
|
5176
|
+
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 450,036 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 120 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.
|
|
5175
5177
|
|
|
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,
|
|
5178
|
+
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,366 bytes gzipped alone.
|
|
5177
5179
|
|
|
5178
5180
|
## Compared with other systems
|
|
5179
5181
|
|
|
@@ -5185,43 +5187,43 @@ The table has no whole-library row. That row would compare how many components e
|
|
|
5185
5187
|
|
|
5186
5188
|
| Component | System | Raw | Gzip | Brotli |
|
|
5187
5189
|
|---|---|---|---|---|
|
|
5188
|
-
| \`button\` | **Helix** |
|
|
5190
|
+
| \`button\` | **Helix** | 47,115 | 15,725 | 14,143 |
|
|
5189
5191
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
5190
5192
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
5191
5193
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
5192
5194
|
| | Web Awesome | 136,044 | 33,730 | 28,760 |
|
|
5193
|
-
| \`checkbox\` | **Helix** | 51,
|
|
5195
|
+
| \`checkbox\` | **Helix** | 51,825 | 16,812 | 15,084 |
|
|
5194
5196
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
5195
5197
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
5196
5198
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
5197
5199
|
| | Web Awesome | 115,251 | 28,728 | 24,420 |
|
|
5198
|
-
| \`dialog\` | **Helix** |
|
|
5200
|
+
| \`dialog\` | **Helix** | 48,335 | 16,369 | 14,731 |
|
|
5199
5201
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
5200
5202
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
5201
5203
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
5202
5204
|
| | Web Awesome | 148,657 | 36,692 | 31,388 |
|
|
5203
|
-
| \`radio\` | **Helix** | 54,
|
|
5205
|
+
| \`radio\` | **Helix** | 54,658 | 17,359 | 15,577 |
|
|
5204
5206
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
5205
5207
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
5206
5208
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
5207
5209
|
| | Web Awesome | 112,026 | 27,416 | 23,128 |
|
|
5208
|
-
| \`switch\` | **Helix** | 48,
|
|
5210
|
+
| \`switch\` | **Helix** | 48,654 | 16,302 | 14,648 |
|
|
5209
5211
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
5210
5212
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
5211
5213
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
5212
5214
|
| | Web Awesome | 45,876 | 15,003 | 13,475 |
|
|
5213
|
-
| \`tabs\` | **Helix** |
|
|
5215
|
+
| \`tabs\` | **Helix** | 61,069 | 19,402 | 17,453 |
|
|
5214
5216
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
5215
5217
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
5216
5218
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
5217
5219
|
| | Web Awesome | 153,439 | 37,030 | 31,737 |
|
|
5218
|
-
| \`tooltip\` | **Helix** |
|
|
5220
|
+
| \`tooltip\` | **Helix** | 67,354 | 23,591 | 21,175 |
|
|
5219
5221
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
5220
5222
|
| | Material Web | | not shipped | |
|
|
5221
5223
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
5222
5224
|
| | Web Awesome | 70,568 | 24,005 | 21,107 |
|
|
5223
5225
|
|
|
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,
|
|
5226
|
+
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 6,699 bytes gzipped. 13 of 27 peer measurements are smaller than the Helix row.
|
|
5225
5227
|
|
|
5226
5228
|
Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
|
|
5227
5229
|
|
|
@@ -5295,118 +5297,118 @@ Structure, accessibility, state, and form participation. It has no presentation
|
|
|
5295
5297
|
|
|
5296
5298
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
5297
5299
|
|---|---|---|---|---|---|---|
|
|
5298
|
-
| \`accordion\` | 36,
|
|
5299
|
-
| \`announcement\` | 40,
|
|
5300
|
-
| \`app-header\` | 36,
|
|
5301
|
-
| \`area-chart\` |
|
|
5302
|
-
| \`avatar\` | 35,
|
|
5303
|
-
| \`badge\` | 31,
|
|
5304
|
-
| \`bar-chart\` |
|
|
5305
|
-
| \`blockquote\` | 28,
|
|
5306
|
-
| \`breadcrumbs\` |
|
|
5307
|
-
| \`button\` | 40,
|
|
5308
|
-
| \`button-group\` |
|
|
5309
|
-
| \`callout\` | 39,
|
|
5310
|
-
| \`canvas\` |
|
|
5311
|
-
| \`card\` | 27,
|
|
5312
|
-
| \`carousel\` | 48,
|
|
5313
|
-
| \`chat\` |
|
|
5314
|
-
| \`checkbox\` | 45,
|
|
5315
|
-
| \`checkbox-group\` | 52,
|
|
5316
|
-
| \`code\` | 24,
|
|
5317
|
-
| \`code-block\` |
|
|
5318
|
-
| \`code-editor\` |
|
|
5319
|
-
| \`code-input\` |
|
|
5320
|
-
| \`color-input\` |
|
|
5321
|
-
| \`color-picker\` | 109,
|
|
5322
|
-
| \`combobox\` |
|
|
5323
|
-
| \`command\` |
|
|
5324
|
-
| \`copy-button\` |
|
|
5325
|
-
| \`data-table\` |
|
|
5326
|
-
| \`date-input\` | 146,
|
|
5327
|
-
| \`date-picker\` | 66,
|
|
5328
|
-
| \`description-list\` |
|
|
5329
|
-
| \`device-screen\` |
|
|
5330
|
-
| \`dialog\` | 42,
|
|
5331
|
-
| \`divider\` | 27,
|
|
5332
|
-
| \`donut-chart\` |
|
|
5333
|
-
| \`drawer\` |
|
|
5334
|
-
| \`drilldown\` | 46,
|
|
5335
|
-
| \`empty\` | 28,
|
|
5336
|
-
| \`file-input\` | 62,
|
|
5337
|
-
| \`filter-input\` | 108,
|
|
5338
|
-
| \`format-date\` | 34,
|
|
5339
|
-
| \`graph\` |
|
|
5340
|
-
| \`heatmap\` |
|
|
5341
|
-
| \`icon\` |
|
|
5342
|
-
| \`icon-button\` | 40,
|
|
5343
|
-
| \`image\` | 29,
|
|
5344
|
-
| \`input\` | 58,
|
|
5345
|
-
| \`kbd\` | 32,
|
|
5346
|
-
| \`legend\` | 43,
|
|
5347
|
-
| \`lightbox\` | 60,
|
|
5348
|
-
| \`line-chart\` |
|
|
5349
|
-
| \`list\` | 66,
|
|
5350
|
-
| \`listbox\` |
|
|
5351
|
-
| \`loader\` | 30,
|
|
5352
|
-
| \`log\` | 88,
|
|
5353
|
-
| \`map\` |
|
|
5354
|
-
| \`markdown\` |
|
|
5355
|
-
| \`megamenu\` | 64,
|
|
5356
|
-
| \`menu\` |
|
|
5357
|
-
| \`meter\` |
|
|
5358
|
-
| \`motion-toggle\` | 29,
|
|
5359
|
-
| \`navigation\` | 37,
|
|
5360
|
-
| \`notifications\` | 62,
|
|
5361
|
-
| \`number-input\` | 61,
|
|
5362
|
-
| \`object-inspector\` |
|
|
5363
|
-
| \`option\` | 30,
|
|
5364
|
-
| \`outline\` | 38,
|
|
5365
|
-
| \`pagination\` |
|
|
5366
|
-
| \`pin-input\` | 52,
|
|
5367
|
-
| \`popover\` |
|
|
5368
|
-
| \`progress\` | 32,
|
|
5369
|
-
| \`qr-code\` | 47,
|
|
5370
|
-
| \`quote\` | 26,
|
|
5371
|
-
| \`radio\` | 46,
|
|
5372
|
-
| \`rating\` | 55,
|
|
5373
|
-
| \`scatter-chart\` |
|
|
5374
|
-
| \`scroll-area\` |
|
|
5375
|
-
| \`select\` |
|
|
5376
|
-
| \`shortcut-overlay\` |
|
|
5377
|
-
| \`skeleton\` | 26,
|
|
5378
|
-
| \`skip-link\` |
|
|
5379
|
-
| \`slider\` | 58,
|
|
5380
|
-
| \`sparkline\` | 52,
|
|
5381
|
-
| \`spatial-bar-chart\` |
|
|
5382
|
-
| \`spatial-heatmap\` |
|
|
5383
|
-
| \`spatial-ribbon-chart\` |
|
|
5384
|
-
| \`spatial-scatter-chart\` |
|
|
5385
|
-
| \`spatial-surface-chart\` |
|
|
5386
|
-
| \`spatial-treemap\` |
|
|
5387
|
-
| \`speed-dial\` |
|
|
5388
|
-
| \`splitter\` | 48,
|
|
5389
|
-
| \`stat\` | 29,
|
|
5390
|
-
| \`steps\` |
|
|
5391
|
-
| \`switch\` | 44,
|
|
5392
|
-
| \`table\` | 124,
|
|
5393
|
-
| \`tabs\` | 50,
|
|
5394
|
-
| \`tag\` | 46,
|
|
5395
|
-
| \`terminal\` |
|
|
5396
|
-
| \`textarea\` | 56,
|
|
5397
|
-
| \`time-input\` |
|
|
5398
|
-
| \`time-picker\` |
|
|
5399
|
-
| \`timeline\` | 35,
|
|
5400
|
-
| \`toast\` | 73,
|
|
5401
|
-
| \`toggle\` | 50,
|
|
5402
|
-
| \`toolbar\` |
|
|
5403
|
-
| \`tooltip\` |
|
|
5404
|
-
| \`tour\` |
|
|
5405
|
-
| \`tree\` | 71,
|
|
5406
|
-
| \`trend\` | 34,
|
|
5407
|
-
| \`video\` | 149,
|
|
5408
|
-
| \`video-playlist\` |
|
|
5409
|
-
| \`virtual-list\` | 71,
|
|
5300
|
+
| \`accordion\` | 36,249 | 13,175 | 11,850 | 5,373 | 1,501 | 1,124 |
|
|
5301
|
+
| \`announcement\` | 40,862 | 14,703 | 13,291 | 4,690 | 1,365 | 977 |
|
|
5302
|
+
| \`app-header\` | 36,395 | 13,244 | 11,896 | 5,892 | 1,732 | 1,327 |
|
|
5303
|
+
| \`area-chart\` | 110,349 | 38,289 | 34,128 | 14,797 | 4,512 | 3,707 |
|
|
5304
|
+
| \`avatar\` | 35,444 | 13,264 | 11,991 | 3,996 | 1,227 | 863 |
|
|
5305
|
+
| \`badge\` | 31,681 | 12,042 | 10,884 | 2,955 | 892 | 648 |
|
|
5306
|
+
| \`bar-chart\` | 118,368 | 40,883 | 36,437 | 22,292 | 6,920 | 5,729 |
|
|
5307
|
+
| \`blockquote\` | 28,258 | 10,800 | 9,727 | 2,402 | 867 | 579 |
|
|
5308
|
+
| \`breadcrumbs\` | 41,360 | 15,512 | 14,004 | 7,779 | 2,454 | 2,021 |
|
|
5309
|
+
| \`button\` | 40,609 | 14,320 | 12,908 | 5,485 | 1,588 | 1,093 |
|
|
5310
|
+
| \`button-group\` | 32,150 | 11,807 | 10,625 | 4,924 | 1,483 | 1,151 |
|
|
5311
|
+
| \`callout\` | 39,513 | 14,941 | 13,428 | 2,882 | 938 | 657 |
|
|
5312
|
+
| \`canvas\` | 178,196 | 55,660 | 48,605 | 83,467 | 24,572 | 20,491 |
|
|
5313
|
+
| \`card\` | 27,975 | 10,467 | 9,423 | 2,090 | 609 | 396 |
|
|
5314
|
+
| \`carousel\` | 48,676 | 17,121 | 15,465 | 15,308 | 4,209 | 3,131 |
|
|
5315
|
+
| \`chat\` | 137,806 | 44,693 | 39,578 | 43,278 | 11,962 | 9,551 |
|
|
5316
|
+
| \`checkbox\` | 45,348 | 15,332 | 13,763 | 3,175 | 964 | 517 |
|
|
5317
|
+
| \`checkbox-group\` | 52,546 | 17,192 | 15,428 | 8,390 | 2,345 | 1,617 |
|
|
5318
|
+
| \`code\` | 24,448 | 9,431 | 8,484 | 138 | 65 | -51 |
|
|
5319
|
+
| \`code-block\` | 112,454 | 37,829 | 33,673 | 40,146 | 11,742 | 9,539 |
|
|
5320
|
+
| \`code-editor\` | 84,292 | 27,048 | 24,080 | 28,130 | 7,372 | 5,803 |
|
|
5321
|
+
| \`code-input\` | 62,093 | 21,217 | 18,986 | 10,586 | 3,422 | 2,598 |
|
|
5322
|
+
| \`color-input\` | 148,596 | 46,981 | 41,191 | 56,199 | 14,370 | 11,678 |
|
|
5323
|
+
| \`color-picker\` | 109,920 | 34,759 | 30,731 | 48,317 | 12,782 | 10,441 |
|
|
5324
|
+
| \`combobox\` | 146,242 | 46,081 | 40,733 | 36,904 | 9,235 | 7,370 |
|
|
5325
|
+
| \`command\` | 123,265 | 38,605 | 33,903 | 37,804 | 9,809 | 7,970 |
|
|
5326
|
+
| \`copy-button\` | 87,833 | 29,777 | 26,589 | 19,503 | 5,184 | 4,087 |
|
|
5327
|
+
| \`data-table\` | 214,828 | 65,258 | 56,499 | 91,082 | 23,900 | 19,344 |
|
|
5328
|
+
| \`date-input\` | 146,579 | 45,807 | 40,511 | 38,644 | 9,367 | 7,553 |
|
|
5329
|
+
| \`date-picker\` | 66,650 | 22,602 | 20,371 | 20,713 | 5,620 | 4,421 |
|
|
5330
|
+
| \`description-list\` | 27,049 | 10,165 | 9,144 | 1,563 | 490 | 361 |
|
|
5331
|
+
| \`device-screen\` | 121,255 | 38,176 | 33,754 | 44,478 | 11,099 | 8,760 |
|
|
5332
|
+
| \`dialog\` | 42,577 | 15,022 | 13,497 | 6,084 | 1,756 | 1,301 |
|
|
5333
|
+
| \`divider\` | 27,503 | 10,399 | 9,345 | 1,414 | 478 | 302 |
|
|
5334
|
+
| \`donut-chart\` | 103,708 | 35,683 | 31,861 | 15,111 | 4,581 | 3,685 |
|
|
5335
|
+
| \`drawer\` | 47,059 | 16,459 | 14,777 | 7,778 | 2,252 | 1,838 |
|
|
5336
|
+
| \`drilldown\` | 46,798 | 16,230 | 14,584 | 9,710 | 2,673 | 2,039 |
|
|
5337
|
+
| \`empty\` | 28,586 | 10,724 | 9,660 | 1,974 | 621 | 327 |
|
|
5338
|
+
| \`file-input\` | 62,360 | 21,393 | 19,214 | 13,125 | 4,053 | 3,285 |
|
|
5339
|
+
| \`filter-input\` | 108,750 | 36,253 | 32,312 | 21,269 | 6,029 | 4,857 |
|
|
5340
|
+
| \`format-date\` | 34,772 | 12,811 | 11,552 | 4,468 | 1,246 | 984 |
|
|
5341
|
+
| \`graph\` | 144,810 | 45,608 | 39,812 | 38,113 | 10,609 | 8,511 |
|
|
5342
|
+
| \`heatmap\` | 112,781 | 38,041 | 33,936 | 19,453 | 5,665 | 4,467 |
|
|
5343
|
+
| \`icon\` | 95,512 | 32,405 | 27,900 | 66,188 | 22,100 | 18,001 |
|
|
5344
|
+
| \`icon-button\` | 40,715 | 14,344 | 12,912 | 5,592 | 1,602 | 1,142 |
|
|
5345
|
+
| \`image\` | 29,952 | 10,991 | 9,919 | 3,844 | 1,130 | 861 |
|
|
5346
|
+
| \`input\` | 58,655 | 19,983 | 17,822 | 7,367 | 2,252 | 1,602 |
|
|
5347
|
+
| \`kbd\` | 32,753 | 12,221 | 10,974 | 3,624 | 1,116 | 751 |
|
|
5348
|
+
| \`legend\` | 43,554 | 15,483 | 14,012 | 2,766 | 889 | 631 |
|
|
5349
|
+
| \`lightbox\` | 60,461 | 20,319 | 18,229 | 16,853 | 4,583 | 3,446 |
|
|
5350
|
+
| \`line-chart\` | 113,352 | 39,140 | 34,930 | 17,198 | 5,128 | 4,226 |
|
|
5351
|
+
| \`list\` | 66,141 | 22,766 | 20,321 | 15,230 | 4,326 | 3,370 |
|
|
5352
|
+
| \`listbox\` | 90,146 | 29,584 | 26,323 | 16,377 | 4,723 | 3,636 |
|
|
5353
|
+
| \`loader\` | 30,911 | 11,577 | 10,451 | 2,785 | 916 | 637 |
|
|
5354
|
+
| \`log\` | 88,717 | 29,726 | 26,606 | 39,930 | 12,278 | 10,324 |
|
|
5355
|
+
| \`map\` | 157,108 | 46,679 | 40,319 | 60,223 | 14,816 | 11,479 |
|
|
5356
|
+
| \`markdown\` | 139,161 | 46,879 | 41,526 | 62,290 | 19,490 | 16,131 |
|
|
5357
|
+
| \`megamenu\` | 64,709 | 23,080 | 20,612 | 8,723 | 2,412 | 1,643 |
|
|
5358
|
+
| \`menu\` | 104,714 | 34,169 | 30,490 | 32,349 | 8,259 | 6,604 |
|
|
5359
|
+
| \`meter\` | 37,733 | 13,875 | 12,586 | 6,083 | 1,716 | 1,394 |
|
|
5360
|
+
| \`motion-toggle\` | 29,880 | 11,436 | 10,318 | 1,426 | 509 | 302 |
|
|
5361
|
+
| \`navigation\` | 37,237 | 13,780 | 12,351 | 3,364 | 1,131 | 796 |
|
|
5362
|
+
| \`notifications\` | 62,751 | 21,149 | 19,071 | 18,259 | 4,956 | 3,826 |
|
|
5363
|
+
| \`number-input\` | 61,189 | 20,412 | 18,347 | 13,546 | 3,576 | 2,620 |
|
|
5364
|
+
| \`object-inspector\` | 123,135 | 40,897 | 36,261 | 36,773 | 10,468 | 8,352 |
|
|
5365
|
+
| \`option\` | 30,624 | 11,141 | 10,038 | 4,517 | 1,169 | 892 |
|
|
5366
|
+
| \`outline\` | 38,181 | 14,036 | 12,637 | 7,886 | 2,519 | 1,869 |
|
|
5367
|
+
| \`pagination\` | 150,815 | 47,799 | 41,837 | 46,767 | 12,094 | 9,506 |
|
|
5368
|
+
| \`pin-input\` | 52,429 | 18,113 | 16,284 | 7,207 | 2,372 | 1,695 |
|
|
5369
|
+
| \`popover\` | 68,441 | 24,181 | 21,624 | 6,461 | 1,823 | 1,293 |
|
|
5370
|
+
| \`progress\` | 32,788 | 12,280 | 11,081 | 3,002 | 925 | 637 |
|
|
5371
|
+
| \`qr-code\` | 47,144 | 17,973 | 16,248 | 16,933 | 6,182 | 5,233 |
|
|
5372
|
+
| \`quote\` | 26,667 | 10,270 | 9,223 | 1,211 | 496 | 299 |
|
|
5373
|
+
| \`radio\` | 46,884 | 15,862 | 14,232 | 3,813 | 1,192 | 734 |
|
|
5374
|
+
| \`rating\` | 55,176 | 18,862 | 16,969 | 8,056 | 2,399 | 1,773 |
|
|
5375
|
+
| \`scatter-chart\` | 109,769 | 37,707 | 33,711 | 20,733 | 6,430 | 5,209 |
|
|
5376
|
+
| \`scroll-area\` | 35,384 | 12,685 | 11,400 | 9,029 | 2,696 | 2,106 |
|
|
5377
|
+
| \`select\` | 129,363 | 42,282 | 37,256 | 27,095 | 7,303 | 5,696 |
|
|
5378
|
+
| \`shortcut-overlay\` | 53,089 | 18,745 | 16,844 | 11,426 | 3,409 | 2,644 |
|
|
5379
|
+
| \`skeleton\` | 26,479 | 10,045 | 9,055 | 989 | 360 | 238 |
|
|
5380
|
+
| \`skip-link\` | 28,115 | 10,723 | 9,687 | 1,225 | 472 | 228 |
|
|
5381
|
+
| \`slider\` | 58,728 | 19,638 | 17,686 | 13,686 | 3,860 | 2,941 |
|
|
5382
|
+
| \`sparkline\` | 52,792 | 18,953 | 17,148 | 5,968 | 2,037 | 1,719 |
|
|
5383
|
+
| \`spatial-bar-chart\` | 125,100 | 43,681 | 38,857 | 28,924 | 9,711 | 8,039 |
|
|
5384
|
+
| \`spatial-heatmap\` | 128,149 | 43,194 | 38,406 | 32,123 | 9,619 | 7,916 |
|
|
5385
|
+
| \`spatial-ribbon-chart\` | 115,504 | 40,139 | 35,789 | 21,339 | 7,086 | 5,856 |
|
|
5386
|
+
| \`spatial-scatter-chart\` | 113,575 | 39,316 | 35,070 | 19,474 | 6,330 | 5,140 |
|
|
5387
|
+
| \`spatial-surface-chart\` | 116,507 | 40,556 | 36,112 | 22,345 | 7,484 | 6,106 |
|
|
5388
|
+
| \`spatial-treemap\` | 117,610 | 41,154 | 36,681 | 21,761 | 7,359 | 6,003 |
|
|
5389
|
+
| \`speed-dial\` | 73,135 | 25,919 | 23,193 | 10,932 | 2,926 | 2,154 |
|
|
5390
|
+
| \`splitter\` | 48,652 | 16,694 | 15,027 | 14,495 | 3,819 | 3,036 |
|
|
5391
|
+
| \`stat\` | 29,848 | 11,204 | 10,126 | 2,318 | 760 | 589 |
|
|
5392
|
+
| \`steps\` | 59,294 | 20,417 | 18,322 | 14,155 | 3,929 | 3,120 |
|
|
5393
|
+
| \`switch\` | 44,200 | 15,151 | 13,596 | 1,747 | 619 | 221 |
|
|
5394
|
+
| \`table\` | 124,760 | 38,524 | 33,934 | 45,144 | 12,309 | 9,913 |
|
|
5395
|
+
| \`tabs\` | 50,864 | 17,335 | 15,572 | 10,567 | 2,840 | 2,208 |
|
|
5396
|
+
| \`tag\` | 46,829 | 16,914 | 15,287 | 8,449 | 2,512 | 1,675 |
|
|
5397
|
+
| \`terminal\` | 125,634 | 39,882 | 35,257 | 43,752 | 10,782 | 8,656 |
|
|
5398
|
+
| \`textarea\` | 56,394 | 19,187 | 17,181 | 5,671 | 1,639 | 1,230 |
|
|
5399
|
+
| \`time-input\` | 183,222 | 56,723 | 49,445 | 49,815 | 12,539 | 10,024 |
|
|
5400
|
+
| \`time-picker\` | 113,402 | 35,775 | 31,606 | 34,952 | 9,310 | 7,342 |
|
|
5401
|
+
| \`timeline\` | 35,983 | 13,485 | 12,205 | 4,080 | 1,166 | 944 |
|
|
5402
|
+
| \`toast\` | 73,507 | 24,690 | 22,105 | 19,750 | 5,499 | 4,313 |
|
|
5403
|
+
| \`toggle\` | 50,672 | 16,771 | 15,121 | 6,073 | 1,806 | 1,424 |
|
|
5404
|
+
| \`toolbar\` | 38,352 | 13,948 | 12,583 | 1,366 | 462 | 273 |
|
|
5405
|
+
| \`tooltip\` | 64,471 | 22,829 | 20,545 | 8,880 | 2,471 | 1,871 |
|
|
5406
|
+
| \`tour\` | 89,668 | 30,389 | 27,108 | 20,496 | 5,583 | 4,493 |
|
|
5407
|
+
| \`tree\` | 71,860 | 24,087 | 21,567 | 17,178 | 4,801 | 3,832 |
|
|
5408
|
+
| \`trend\` | 34,495 | 13,178 | 11,898 | 3,587 | 1,101 | 820 |
|
|
5409
|
+
| \`video\` | 149,977 | 46,135 | 40,658 | 68,342 | 17,027 | 13,935 |
|
|
5410
|
+
| \`video-playlist\` | 135,166 | 43,156 | 38,198 | 44,929 | 11,537 | 9,449 |
|
|
5411
|
+
| \`virtual-list\` | 71,136 | 23,619 | 21,262 | 25,065 | 7,472 | 6,099 |
|
|
5410
5412
|
|
|
5411
5413
|
### Styled tier
|
|
5412
5414
|
|
|
@@ -5414,125 +5416,126 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
|
|
|
5414
5416
|
|
|
5415
5417
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
5416
5418
|
|---|---|---|---|---|---|---|
|
|
5417
|
-
| \`accordion\` | 39,
|
|
5418
|
-
| \`announcement\` | 45,
|
|
5419
|
-
| \`app-header\` | 41,
|
|
5420
|
-
| \`area-chart\` |
|
|
5421
|
-
| \`aura\` |
|
|
5422
|
-
| \`avatar\` | 38,
|
|
5423
|
-
| \`badge\` | 37,
|
|
5424
|
-
| \`bar-chart\` |
|
|
5425
|
-
| \`blockquote\` | 30,
|
|
5426
|
-
| \`breadcrumbs\` |
|
|
5427
|
-
| \`button\` |
|
|
5428
|
-
| \`button-group\` | 35,
|
|
5429
|
-
| \`callout\` | 43,
|
|
5430
|
-
| \`canvas\` |
|
|
5431
|
-
| \`card\` | 31,
|
|
5432
|
-
| \`carousel\` | 59,
|
|
5433
|
-
| \`chat\` |
|
|
5434
|
-
| \`checkbox\` | 51,
|
|
5435
|
-
| \`checkbox-group\` | 59,
|
|
5436
|
-
| \`code\` | 25,
|
|
5437
|
-
| \`code-block\` |
|
|
5438
|
-
| \`code-editor\` |
|
|
5439
|
-
| \`code-input\` | 66,
|
|
5440
|
-
| \`color-input\` |
|
|
5441
|
-
| \`color-picker\` | 146,
|
|
5442
|
-
| \`combobox\` |
|
|
5443
|
-
| \`command\` |
|
|
5444
|
-
| \`copy-button\` |
|
|
5445
|
-
| \`data-table\` |
|
|
5446
|
-
| \`date-input\` | 167,
|
|
5447
|
-
| \`date-picker\` | 74,
|
|
5448
|
-
| \`description-list\` |
|
|
5449
|
-
| \`device-screen\` |
|
|
5450
|
-
| \`dialog\` |
|
|
5451
|
-
| \`divider\` | 29,
|
|
5452
|
-
| \`donut-chart\` |
|
|
5453
|
-
| \`drawer\` | 52,
|
|
5454
|
-
| \`drilldown\` | 52,
|
|
5455
|
-
| \`empty\` | 29,
|
|
5456
|
-
| \`file-input\` | 73,
|
|
5457
|
-
| \`filter-input\` | 120,
|
|
5458
|
-
| \`flex\` | 29,
|
|
5459
|
-
| \`format-date\` |
|
|
5460
|
-
| \`graph\` |
|
|
5461
|
-
| \`grid\` | 31,
|
|
5462
|
-
| \`heatmap\` |
|
|
5463
|
-
| \`icon\` |
|
|
5464
|
-
| \`icon-button\` | 50,
|
|
5465
|
-
| \`image\` | 31,
|
|
5466
|
-
| \`input\` | 63,
|
|
5467
|
-
| \`kbd\` | 34,
|
|
5468
|
-
| \`legend\` | 48,
|
|
5469
|
-
| \`lightbox\` | 66,
|
|
5470
|
-
| \`line-chart\` |
|
|
5471
|
-
| \`list\` | 72,
|
|
5472
|
-
| \`listbox\` |
|
|
5473
|
-
| \`loader\` | 33,
|
|
5474
|
-
| \`log\` |
|
|
5475
|
-
| \`map\` |
|
|
5476
|
-
| \`markdown\` |
|
|
5477
|
-
| \`megamenu\` | 69,
|
|
5478
|
-
| \`menu\` |
|
|
5479
|
-
| \`meter\` |
|
|
5480
|
-
| \`motion-toggle\` | 31,
|
|
5481
|
-
| \`navigation\` | 40,
|
|
5482
|
-
| \`notifications\` | 76,
|
|
5483
|
-
| \`number-input\` | 66,
|
|
5484
|
-
| \`object-inspector\` |
|
|
5485
|
-
| \`option\` | 33,
|
|
5486
|
-
| \`orb\` | 40,
|
|
5487
|
-
| \`outline\` | 42,
|
|
5488
|
-
| \`pagination\` |
|
|
5489
|
-
| \`pin-input\` | 55,
|
|
5490
|
-
| \`popover\` |
|
|
5491
|
-
| \`progress\` | 39,
|
|
5492
|
-
| \`qr-code\` | 48,
|
|
5493
|
-
| \`quote\` | 27,
|
|
5494
|
-
| \`radio\` | 54,
|
|
5495
|
-
| \`rating\` |
|
|
5496
|
-
| \`sandbox\` |
|
|
5497
|
-
| \`scatter-chart\` |
|
|
5498
|
-
| \`scroll-area\` |
|
|
5499
|
-
| \`select\` |
|
|
5500
|
-
| \`shortcut-overlay\` | 60,
|
|
5501
|
-
| \`skeleton\` | 30,
|
|
5502
|
-
| \`skip-link\` | 29,
|
|
5503
|
-
| \`slider\` | 73,
|
|
5504
|
-
| \`sparkline\` | 58,
|
|
5505
|
-
| \`spatial-bar-chart\` |
|
|
5506
|
-
| \`spatial-heatmap\` |
|
|
5507
|
-
| \`spatial-ribbon-chart\` |
|
|
5508
|
-
| \`spatial-scatter-chart\` |
|
|
5509
|
-
| \`spatial-surface-chart\` |
|
|
5510
|
-
| \`spatial-treemap\` |
|
|
5511
|
-
| \`speed-dial\` |
|
|
5512
|
-
| \`splitter\` | 54,
|
|
5513
|
-
| \`stat\` | 32,
|
|
5514
|
-
| \`steps\` |
|
|
5515
|
-
| \`strands\` | 67,
|
|
5516
|
-
| \`switch\` | 48,
|
|
5517
|
-
| \`table\` | 142,
|
|
5518
|
-
| \`tabs\` |
|
|
5519
|
-
| \`tag\` | 51,
|
|
5520
|
-
| \`terminal\` |
|
|
5521
|
-
| \`text\` | 32,
|
|
5522
|
-
| \`textarea\` | 60,
|
|
5523
|
-
| \`time-input\` |
|
|
5524
|
-
| \`time-picker\` |
|
|
5525
|
-
| \`timeline\` | 42,
|
|
5526
|
-
| \`toast\` | 87,
|
|
5527
|
-
| \`toggle\` | 55,
|
|
5528
|
-
| \`toolbar\` |
|
|
5529
|
-
| \`tooltip\` |
|
|
5530
|
-
| \`tour\` |
|
|
5531
|
-
| \`tree\` | 80,
|
|
5532
|
-
| \`trend\` | 36,
|
|
5533
|
-
| \`video\` |
|
|
5534
|
-
| \`video-playlist\` |
|
|
5535
|
-
| \`virtual-list\` | 73,
|
|
5419
|
+
| \`accordion\` | 39,678 | 14,027 | 12,646 | 8,788 | 2,385 | 1,800 |
|
|
5420
|
+
| \`announcement\` | 45,475 | 15,733 | 14,221 | 9,286 | 2,448 | 2,020 |
|
|
5421
|
+
| \`app-header\` | 41,555 | 14,422 | 12,995 | 11,035 | 2,949 | 2,510 |
|
|
5422
|
+
| \`area-chart\` | 119,927 | 40,399 | 35,969 | 24,368 | 6,660 | 5,532 |
|
|
5423
|
+
| \`aura\` | 63,103 | 21,349 | 19,094 | 31,768 | 9,581 | 8,041 |
|
|
5424
|
+
| \`avatar\` | 38,443 | 14,012 | 12,699 | 6,978 | 1,995 | 1,487 |
|
|
5425
|
+
| \`badge\` | 37,184 | 13,274 | 11,984 | 8,451 | 2,152 | 1,737 |
|
|
5426
|
+
| \`bar-chart\` | 134,784 | 44,115 | 39,313 | 38,684 | 10,229 | 8,588 |
|
|
5427
|
+
| \`blockquote\` | 30,479 | 11,329 | 10,194 | 4,610 | 1,416 | 1,182 |
|
|
5428
|
+
| \`breadcrumbs\` | 48,377 | 16,722 | 15,119 | 14,779 | 3,697 | 3,037 |
|
|
5429
|
+
| \`button\` | 47,115 | 15,725 | 14,143 | 11,973 | 3,005 | 2,313 |
|
|
5430
|
+
| \`button-group\` | 35,644 | 12,486 | 11,253 | 8,405 | 2,149 | 1,719 |
|
|
5431
|
+
| \`callout\` | 43,304 | 15,880 | 14,294 | 6,657 | 1,897 | 1,454 |
|
|
5432
|
+
| \`canvas\` | 210,936 | 60,969 | 53,273 | 116,192 | 30,018 | 25,113 |
|
|
5433
|
+
| \`card\` | 31,874 | 11,466 | 10,336 | 5,974 | 1,610 | 1,307 |
|
|
5434
|
+
| \`carousel\` | 59,164 | 18,895 | 17,116 | 25,779 | 6,016 | 4,876 |
|
|
5435
|
+
| \`chat\` | 165,756 | 49,873 | 44,156 | 71,203 | 17,225 | 14,170 |
|
|
5436
|
+
| \`checkbox\` | 51,825 | 16,812 | 15,084 | 9,640 | 2,473 | 1,953 |
|
|
5437
|
+
| \`checkbox-group\` | 59,758 | 18,813 | 16,846 | 15,593 | 3,978 | 3,107 |
|
|
5438
|
+
| \`code\` | 25,303 | 9,733 | 8,761 | 974 | 369 | 322 |
|
|
5439
|
+
| \`code-block\` | 139,027 | 41,785 | 37,203 | 66,704 | 15,876 | 13,025 |
|
|
5440
|
+
| \`code-editor\` | 111,225 | 30,868 | 27,465 | 55,059 | 11,446 | 9,364 |
|
|
5441
|
+
| \`code-input\` | 66,839 | 22,436 | 20,045 | 15,320 | 4,646 | 3,715 |
|
|
5442
|
+
| \`color-input\` | 191,137 | 53,285 | 46,864 | 98,731 | 20,794 | 17,310 |
|
|
5443
|
+
| \`color-picker\` | 146,933 | 40,248 | 35,665 | 85,337 | 18,456 | 15,283 |
|
|
5444
|
+
| \`combobox\` | 162,836 | 49,216 | 43,452 | 53,482 | 12,449 | 10,156 |
|
|
5445
|
+
| \`command\` | 139,720 | 41,932 | 36,915 | 54,253 | 13,244 | 10,798 |
|
|
5446
|
+
| \`copy-button\` | 101,964 | 32,108 | 28,680 | 33,618 | 7,619 | 6,247 |
|
|
5447
|
+
| \`data-table\` | 246,711 | 70,785 | 61,354 | 122,953 | 29,534 | 24,229 |
|
|
5448
|
+
| \`date-input\` | 167,958 | 49,546 | 43,956 | 60,008 | 13,174 | 10,849 |
|
|
5449
|
+
| \`date-picker\` | 74,694 | 24,027 | 21,604 | 28,739 | 7,023 | 5,824 |
|
|
5450
|
+
| \`description-list\` | 30,000 | 10,907 | 9,808 | 4,502 | 1,238 | 863 |
|
|
5451
|
+
| \`device-screen\` | 140,815 | 41,618 | 36,780 | 64,023 | 14,619 | 11,959 |
|
|
5452
|
+
| \`dialog\` | 48,335 | 16,369 | 14,731 | 11,824 | 3,145 | 2,566 |
|
|
5453
|
+
| \`divider\` | 29,801 | 11,012 | 9,903 | 3,697 | 1,106 | 826 |
|
|
5454
|
+
| \`donut-chart\` | 115,059 | 38,005 | 34,011 | 26,450 | 6,995 | 5,815 |
|
|
5455
|
+
| \`drawer\` | 52,989 | 17,876 | 16,077 | 13,692 | 3,702 | 2,960 |
|
|
5456
|
+
| \`drilldown\` | 52,472 | 17,502 | 15,753 | 15,372 | 3,949 | 3,073 |
|
|
5457
|
+
| \`empty\` | 29,893 | 11,195 | 10,057 | 3,265 | 1,082 | 702 |
|
|
5458
|
+
| \`file-input\` | 73,885 | 23,776 | 21,376 | 24,633 | 6,417 | 5,306 |
|
|
5459
|
+
| \`filter-input\` | 120,257 | 38,515 | 34,304 | 32,768 | 8,358 | 6,805 |
|
|
5460
|
+
| \`flex\` | 29,891 | 10,601 | 9,560 | 4,763 | 1,013 | 805 |
|
|
5461
|
+
| \`format-date\` | 35,026 | 12,935 | 11,669 | 4,704 | 1,357 | 1,103 |
|
|
5462
|
+
| \`graph\` | 172,720 | 49,907 | 43,565 | 65,998 | 15,100 | 12,198 |
|
|
5463
|
+
| \`grid\` | 31,341 | 11,281 | 10,197 | 5,657 | 1,440 | 1,190 |
|
|
5464
|
+
| \`heatmap\` | 122,486 | 40,164 | 35,825 | 29,132 | 7,766 | 6,346 |
|
|
5465
|
+
| \`icon\` | 97,543 | 33,009 | 28,406 | 68,039 | 22,698 | 18,359 |
|
|
5466
|
+
| \`icon-button\` | 50,475 | 15,919 | 14,317 | 15,336 | 3,219 | 2,516 |
|
|
5467
|
+
| \`image\` | 31,337 | 11,457 | 10,309 | 5,211 | 1,579 | 1,204 |
|
|
5468
|
+
| \`input\` | 63,503 | 21,230 | 18,880 | 12,205 | 3,549 | 2,836 |
|
|
5469
|
+
| \`kbd\` | 34,961 | 12,826 | 11,490 | 5,816 | 1,731 | 1,311 |
|
|
5470
|
+
| \`legend\` | 48,795 | 16,773 | 15,080 | 7,872 | 2,172 | 1,619 |
|
|
5471
|
+
| \`lightbox\` | 66,746 | 21,649 | 19,435 | 23,124 | 5,899 | 4,632 |
|
|
5472
|
+
| \`line-chart\` | 126,099 | 41,803 | 37,306 | 29,928 | 7,824 | 6,517 |
|
|
5473
|
+
| \`list\` | 72,482 | 24,230 | 21,662 | 21,553 | 5,838 | 4,666 |
|
|
5474
|
+
| \`listbox\` | 95,755 | 30,932 | 27,475 | 21,976 | 6,075 | 4,749 |
|
|
5475
|
+
| \`loader\` | 33,789 | 12,336 | 11,161 | 5,652 | 1,682 | 1,378 |
|
|
5476
|
+
| \`log\` | 105,289 | 32,727 | 29,397 | 56,495 | 15,396 | 13,040 |
|
|
5477
|
+
| \`map\` | 202,379 | 53,635 | 46,474 | 105,490 | 21,824 | 17,554 |
|
|
5478
|
+
| \`markdown\` | 169,758 | 51,519 | 45,656 | 92,869 | 24,042 | 20,248 |
|
|
5479
|
+
| \`megamenu\` | 69,758 | 24,236 | 21,678 | 13,752 | 3,565 | 2,625 |
|
|
5480
|
+
| \`menu\` | 116,934 | 36,591 | 32,673 | 44,560 | 10,747 | 8,745 |
|
|
5481
|
+
| \`meter\` | 46,277 | 15,617 | 14,137 | 14,611 | 3,477 | 2,876 |
|
|
5482
|
+
| \`motion-toggle\` | 31,514 | 11,917 | 10,737 | 3,042 | 976 | 656 |
|
|
5483
|
+
| \`navigation\` | 40,961 | 14,622 | 13,097 | 7,075 | 1,999 | 1,551 |
|
|
5484
|
+
| \`notifications\` | 76,232 | 23,671 | 21,409 | 31,727 | 7,553 | 6,162 |
|
|
5485
|
+
| \`number-input\` | 66,171 | 21,599 | 19,407 | 18,509 | 4,785 | 3,623 |
|
|
5486
|
+
| \`object-inspector\` | 141,639 | 43,908 | 38,866 | 55,255 | 13,576 | 11,061 |
|
|
5487
|
+
| \`option\` | 33,689 | 12,080 | 10,888 | 7,575 | 2,131 | 1,671 |
|
|
5488
|
+
| \`orb\` | 40,417 | 15,079 | 13,625 | 10,010 | 3,630 | 2,967 |
|
|
5489
|
+
| \`outline\` | 42,409 | 14,904 | 13,455 | 12,101 | 3,412 | 2,707 |
|
|
5490
|
+
| \`pagination\` | 168,924 | 51,229 | 44,896 | 64,861 | 15,596 | 12,535 |
|
|
5491
|
+
| \`pin-input\` | 55,807 | 19,003 | 17,070 | 10,566 | 3,262 | 2,444 |
|
|
5492
|
+
| \`popover\` | 72,347 | 25,105 | 22,471 | 10,349 | 2,790 | 2,119 |
|
|
5493
|
+
| \`progress\` | 39,966 | 13,908 | 12,604 | 10,163 | 2,584 | 2,080 |
|
|
5494
|
+
| \`qr-code\` | 48,744 | 18,461 | 16,674 | 18,515 | 6,662 | 5,578 |
|
|
5495
|
+
| \`quote\` | 27,223 | 10,456 | 9,412 | 1,750 | 691 | 483 |
|
|
5496
|
+
| \`radio\` | 54,658 | 17,359 | 15,577 | 11,580 | 2,725 | 2,185 |
|
|
5497
|
+
| \`rating\` | 59,104 | 20,073 | 18,025 | 11,970 | 3,616 | 2,847 |
|
|
5498
|
+
| \`sandbox\` | 204,973 | 59,142 | 51,063 | 143,999 | 38,443 | 31,343 |
|
|
5499
|
+
| \`scatter-chart\` | 120,519 | 40,081 | 35,807 | 31,472 | 8,828 | 7,380 |
|
|
5500
|
+
| \`scroll-area\` | 43,327 | 14,069 | 12,669 | 16,955 | 4,112 | 3,270 |
|
|
5501
|
+
| \`select\` | 139,734 | 44,352 | 39,150 | 37,448 | 9,414 | 7,540 |
|
|
5502
|
+
| \`shortcut-overlay\` | 60,880 | 20,449 | 18,395 | 19,201 | 5,106 | 4,205 |
|
|
5503
|
+
| \`skeleton\` | 30,425 | 11,121 | 10,018 | 4,751 | 1,384 | 1,048 |
|
|
5504
|
+
| \`skip-link\` | 29,685 | 11,238 | 10,068 | 2,778 | 960 | 662 |
|
|
5505
|
+
| \`slider\` | 73,692 | 21,950 | 19,751 | 28,629 | 6,244 | 5,085 |
|
|
5506
|
+
| \`sparkline\` | 58,249 | 20,283 | 18,301 | 11,408 | 3,373 | 2,717 |
|
|
5507
|
+
| \`spatial-bar-chart\` | 137,375 | 46,203 | 41,006 | 41,176 | 12,303 | 10,375 |
|
|
5508
|
+
| \`spatial-heatmap\` | 139,271 | 45,587 | 40,562 | 43,227 | 12,014 | 9,894 |
|
|
5509
|
+
| \`spatial-ribbon-chart\` | 125,800 | 42,357 | 37,662 | 31,620 | 9,344 | 7,731 |
|
|
5510
|
+
| \`spatial-scatter-chart\` | 123,929 | 41,482 | 36,972 | 29,805 | 8,494 | 7,000 |
|
|
5511
|
+
| \`spatial-surface-chart\` | 126,323 | 42,647 | 37,998 | 32,141 | 9,626 | 8,132 |
|
|
5512
|
+
| \`spatial-treemap\` | 128,010 | 43,405 | 38,596 | 32,140 | 9,661 | 7,987 |
|
|
5513
|
+
| \`speed-dial\` | 80,178 | 27,328 | 24,502 | 17,952 | 4,326 | 3,435 |
|
|
5514
|
+
| \`splitter\` | 54,702 | 17,728 | 16,005 | 20,527 | 4,845 | 3,875 |
|
|
5515
|
+
| \`stat\` | 32,726 | 11,914 | 10,764 | 5,187 | 1,464 | 1,169 |
|
|
5516
|
+
| \`steps\` | 73,366 | 23,195 | 20,795 | 28,213 | 6,744 | 5,601 |
|
|
5517
|
+
| \`strands\` | 67,865 | 24,813 | 22,130 | 38,819 | 13,749 | 11,993 |
|
|
5518
|
+
| \`switch\` | 48,654 | 16,302 | 14,648 | 6,185 | 1,788 | 1,314 |
|
|
5519
|
+
| \`table\` | 142,528 | 41,640 | 36,662 | 62,916 | 15,447 | 12,695 |
|
|
5520
|
+
| \`tabs\` | 61,069 | 19,402 | 17,453 | 20,762 | 4,925 | 4,077 |
|
|
5521
|
+
| \`tag\` | 51,398 | 18,033 | 16,280 | 13,006 | 3,621 | 2,813 |
|
|
5522
|
+
| \`terminal\` | 155,511 | 44,204 | 39,063 | 73,620 | 15,244 | 12,402 |
|
|
5523
|
+
| \`text\` | 32,865 | 11,350 | 10,174 | 7,183 | 1,465 | 1,091 |
|
|
5524
|
+
| \`textarea\` | 60,921 | 20,345 | 18,249 | 10,184 | 2,850 | 2,273 |
|
|
5525
|
+
| \`time-input\` | 208,710 | 61,002 | 53,175 | 75,299 | 16,971 | 13,776 |
|
|
5526
|
+
| \`time-picker\` | 126,762 | 38,344 | 33,852 | 48,299 | 11,957 | 9,727 |
|
|
5527
|
+
| \`timeline\` | 42,871 | 14,941 | 13,518 | 10,956 | 2,674 | 2,146 |
|
|
5528
|
+
| \`toast\` | 87,746 | 27,507 | 24,611 | 33,976 | 8,368 | 6,889 |
|
|
5529
|
+
| \`toggle\` | 55,526 | 18,003 | 16,233 | 10,917 | 3,058 | 2,492 |
|
|
5530
|
+
| \`toolbar\` | 41,030 | 14,432 | 13,023 | 4,028 | 979 | 681 |
|
|
5531
|
+
| \`tooltip\` | 67,354 | 23,591 | 21,175 | 11,743 | 3,243 | 2,591 |
|
|
5532
|
+
| \`tour\` | 99,755 | 32,397 | 28,881 | 30,567 | 7,619 | 6,172 |
|
|
5533
|
+
| \`tree\` | 80,873 | 26,080 | 23,318 | 26,172 | 6,827 | 5,779 |
|
|
5534
|
+
| \`trend\` | 36,411 | 13,732 | 12,398 | 5,482 | 1,654 | 1,303 |
|
|
5535
|
+
| \`video\` | 171,773 | 50,072 | 44,187 | 90,124 | 20,938 | 17,506 |
|
|
5536
|
+
| \`video-playlist\` | 152,398 | 46,358 | 41,013 | 62,153 | 14,749 | 12,211 |
|
|
5537
|
+
| \`virtual-list\` | 73,128 | 24,127 | 21,717 | 27,034 | 7,946 | 6,535 |
|
|
5538
|
+
| \`voice-level\` | 37,864 | 13,917 | 12,546 | 7,533 | 2,509 | 2,120 |
|
|
5536
5539
|
|
|
5537
5540
|
## What an install adds to \`node_modules\`
|
|
5538
5541
|
|
|
@@ -5545,12 +5548,12 @@ without its whitespace, and the sizes count each one that way.
|
|
|
5545
5548
|
|
|
5546
5549
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
5547
5550
|
|---|---|---|---|---|
|
|
5548
|
-
| \`@fusion.dev/helix-core\` | 2,
|
|
5549
|
-
| \`@fusion.dev/helix-headless\` |
|
|
5550
|
-
| \`@fusion.dev/helix-icons\` |
|
|
5551
|
-
| \`@fusion.dev/helix-styles\` | 129,
|
|
5551
|
+
| \`@fusion.dev/helix-core\` | 2,395,454 | 637 | 880,329 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
|
|
5552
|
+
| \`@fusion.dev/helix-headless\` | 26,119,473 | 818 | 2,789,168 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
|
|
5553
|
+
| \`@fusion.dev/helix-icons\` | 172,435 | 21 | 55,809 | \`svgo\` |
|
|
5554
|
+
| \`@fusion.dev/helix-styles\` | 129,641 | 6 | 0 | none |
|
|
5552
5555
|
| \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
|
|
5553
|
-
| \`@fusion.dev/helix\` | 26,
|
|
5556
|
+
| \`@fusion.dev/helix\` | 26,770,936 | 1,077 | 615,958 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
|
|
5554
5557
|
|
|
5555
5558
|
## Not measured yet
|
|
5556
5559
|
|
|
@@ -7487,7 +7490,7 @@ does not change them.
|
|
|
7487
7490
|
| \`--helix-border-thin\` | \`1px\` |
|
|
7488
7491
|
| \`--helix-border-thick\` | \`2px\` |
|
|
7489
7492
|
| \`--helix-border-surface\` | \`var(--helix-border-thin)\` |
|
|
7490
|
-
| \`--helix-border-floating\` | \`
|
|
7493
|
+
| \`--helix-border-floating\` | \`var(--helix-border-thin)\` |
|
|
7491
7494
|
|
|
7492
7495
|
[//]: # (/tokens)
|
|
7493
7496
|
|
|
@@ -8214,11 +8217,15 @@ Helix sets the choice with two pairs of policy tokens:
|
|
|
8214
8217
|
| --- | --- | --- |
|
|
8215
8218
|
| \`--helix-border-surface\` | \`var(--helix-border-thin)\` | The border of a surface in the page flow. Set it to zero to separate surfaces with shadows. |
|
|
8216
8219
|
| \`--helix-shadow-surface\` | \`var(--helix-shadow-none)\` | The shadow of a surface in the page flow. Set it to none to separate surfaces with borders. |
|
|
8217
|
-
| \`--helix-border-floating\` | \`
|
|
8220
|
+
| \`--helix-border-floating\` | \`var(--helix-border-thin)\` | The border of a surface that floats over content. Set it to zero to separate floating surfaces by their shadow alone. |
|
|
8218
8221
|
| \`--helix-shadow-floating\` | \`var(--helix-shadow-lg)\` | The shadow of a surface that floats over content. |
|
|
8219
8222
|
|
|
8220
8223
|
[//]: # (/tokens)
|
|
8221
8224
|
|
|
8225
|
+
A floating surface draws a hairline edge and a shadow by default. A shadow is
|
|
8226
|
+
ink darker than the ground it falls on, so over a dark page it does not show,
|
|
8227
|
+
and the edge keeps a menu or a popover apart from what it opened over.
|
|
8228
|
+
|
|
8222
8229
|
To make every component shadow-first, set the border pair to zero and give the
|
|
8223
8230
|
shadow pair a value. Reverse them to go border-first. Every Helix surface reads
|
|
8224
8231
|
both pairs, and this is checked. A surface that reads only one pair is easy to
|
|
@@ -8236,7 +8243,7 @@ A surface's ground color token names where the surface sits:
|
|
|
8236
8243
|
| \`--helix-color-background\` | <span data-token-swatch style={{ background: 'var(--helix-color-background)' }} /> | The page background. Every other surface sits on it. |
|
|
8237
8244
|
| \`--helix-color-surface\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface)' }} /> | A surface on the page, such as a card or a panel. The separation policy sets it apart with a fill, a border, or a shadow. |
|
|
8238
8245
|
| \`--helix-color-surface-raised\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-raised)' }} /> | A raised surface on the page, such as a selected tab or a hovered row. Its fill is one step down the ramp. |
|
|
8239
|
-
| \`--helix-color-surface-overlay\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its shadow
|
|
8246
|
+
| \`--helix-color-surface-overlay\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-overlay)' }} /> | A surface over the page, such as a menu, a popover, or a dialog. Its edge and its shadow set it apart. |
|
|
8240
8247
|
| \`--helix-color-surface-sunken\` | <span data-token-swatch style={{ background: 'var(--helix-color-surface-sunken)' }} /> | A recessed surface that holds a value, such as an input, a track, or a groove. Its fill sets it apart. |
|
|
8241
8248
|
|
|
8242
8249
|
[//]: # (/tokens)
|
|
@@ -8244,8 +8251,8 @@ A surface's ground color token names where the surface sits:
|
|
|
8244
8251
|
**\`raised\` goes one step down the ramp.** A selected tab's pill, a hovered row,
|
|
8245
8252
|
and an option under the pointer all have the page on every side. Only their
|
|
8246
8253
|
fill separates them, and on a white page a fill has to be a step darker to be
|
|
8247
|
-
seen. \`overlay\` works the other way. Its
|
|
8248
|
-
|
|
8254
|
+
seen. \`overlay\` works the other way. Its edge and its shadow separate it, so on
|
|
8255
|
+
a white page it is white.
|
|
8249
8256
|
|
|
8250
8257
|
## Using the page color inside a component
|
|
8251
8258
|
|