@fusion.dev/helix-docs 0.207.1 → 0.208.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/color.mdx +11 -1
- package/content/intent-reference.mdx +1 -1
- package/content/metrics.mdx +239 -239
- package/content/surfaces-and-separation.mdx +2 -1
- package/dist/reference.d.ts +5 -1
- package/dist/reference.js +7 -2
- package/dist/sources.generated.js +253 -242
- package/package.json +11 -11
|
@@ -1408,7 +1408,9 @@ choice people most often get wrong. See [Surfaces and
|
|
|
1408
1408
|
separation](./surfaces-and-separation).
|
|
1409
1409
|
|
|
1410
1410
|
A field is filled with \`well\`: 5% of \`foreground\` laid over whatever the field
|
|
1411
|
-
sits on, so its color depends on the surface under the field.
|
|
1411
|
+
sits on, so its color depends on the surface under the field. A row under the
|
|
1412
|
+
pointer or the keyboard, such as an option, is lit with \`hover\` the same way:
|
|
1413
|
+
8% of \`foreground\` in light and 12% in dark.
|
|
1412
1414
|
|
|
1413
1415
|
### Inks
|
|
1414
1416
|
|
|
@@ -1497,6 +1499,14 @@ solves them against the well over the page, a card, a raised surface, a dialog,
|
|
|
1497
1499
|
and a sunken surface. The report names each of these grounds as the well over
|
|
1498
1500
|
its surface, such as \`color-well over color-surface\`.
|
|
1499
1501
|
|
|
1502
|
+
Both inks are also written on a lit row and on a selected row. The engine solves
|
|
1503
|
+
them against these grounds as well:
|
|
1504
|
+
|
|
1505
|
+
- \`hover\` over each of the same five surfaces, such as \`color-hover over
|
|
1506
|
+
color-surface\`
|
|
1507
|
+
- \`primary-subtle\` and \`accent-subtle\`, the tints a selected row takes
|
|
1508
|
+
- the well over each tint, for a field on a selected row
|
|
1509
|
+
|
|
1500
1510
|
\`foreground-subtle\` is the one ink the engine does not solve. The range of
|
|
1501
1511
|
readable grays has room for one quiet ink, and \`foreground-muted\` is that ink, so
|
|
1502
1512
|
\`foreground-subtle\` stays a fixed step of the stylesheet's gray ramp and its
|
|
@@ -3587,7 +3597,7 @@ left out.
|
|
|
3587
3597
|
| Field | What it controls |
|
|
3588
3598
|
|---|---|
|
|
3589
3599
|
| \`contrastTarget\` | Target contrast for body text. 4.5 is WCAG AA, and 7 is AAA |
|
|
3590
|
-
| \`pairings\` | The foreground and background pairs to measure, by token name. A background of \`color-well over color-surface\` is a field's well over that surface. The list replaces the pairs from the engine's surface model. The engine measures each pair and solves none of them, and a pair that names a token the engine does not emit is reported as \`unverifiable\` |
|
|
3600
|
+
| \`pairings\` | The foreground and background pairs to measure, by token name. A background of \`color-well over color-surface\` is a field's well over that surface, and \`color-hover over color-surface\` is a lit row over it. The list replaces the pairs from the engine's surface model. The engine measures each pair and solves none of them, and a pair that names a token the engine does not emit is reported as \`unverifiable\` |
|
|
3591
3601
|
|
|
3592
3602
|
The default is 4.5, the WCAG 2.1 AA figure. The European Accessibility Act
|
|
3593
3603
|
refers to WCAG 2.1 AA, so 4.5 is the figure with legal weight.
|
|
@@ -5091,7 +5101,7 @@ on its own.
|
|
|
5091
5101
|
|
|
5092
5102
|
| | Raw | Gzip | Brotli |
|
|
5093
5103
|
|---|---|---|---|
|
|
5094
|
-
| Lit and \`@fusion.dev/helix-core\` | 264,965 | 85,796 | 73,
|
|
5104
|
+
| Lit and \`@fusion.dev/helix-core\` | 264,965 | 85,796 | 73,204 |
|
|
5095
5105
|
|
|
5096
5106
|
## Whole packages
|
|
5097
5107
|
|
|
@@ -5102,12 +5112,12 @@ either barrel. The per-component tables show what your page pays.
|
|
|
5102
5112
|
|
|
5103
5113
|
| Package | Raw | Gzip | Brotli | |
|
|
5104
5114
|
|---|---|---|---|---|
|
|
5105
|
-
| \`@fusion.dev/helix-core\` | 264,174 | 85,
|
|
5106
|
-
| \`@fusion.dev/helix-headless\` | 1,457,984 | 408,952 | 306,
|
|
5115
|
+
| \`@fusion.dev/helix-core\` | 264,174 | 85,658 | 72,792 | The element base class, mixins, decorators, and floating positioning. |
|
|
5116
|
+
| \`@fusion.dev/helix-headless\` | 1,457,984 | 408,952 | 306,853 | Every headless family. The barrel entry includes all of them. |
|
|
5107
5117
|
| \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
|
|
5108
5118
|
| \`@fusion.dev/helix-theme\` | 4,030 | 1,791 | 1,560 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
|
|
5109
|
-
| \`fusion_helix_theme_bg.wasm\` |
|
|
5110
|
-
| \`@fusion.dev/helix\` | 2,
|
|
5119
|
+
| \`fusion_helix_theme_bg.wasm\` | 412,026 | 152,920 | 123,363 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
|
|
5120
|
+
| \`@fusion.dev/helix\` | 2,178,920 | 564,548 | 402,727 | Every styled family. |
|
|
5111
5121
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
|
|
5112
5122
|
|
|
5113
5123
|
## Stylesheets
|
|
@@ -5120,17 +5130,17 @@ shows the whole cost of using the base layer on its own.
|
|
|
5120
5130
|
|
|
5121
5131
|
| File | Raw | Gzip | Brotli | |
|
|
5122
5132
|
|---|---|---|---|---|
|
|
5123
|
-
| \`base.css\` | 33,
|
|
5133
|
+
| \`base.css\` | 33,986 | 4,785 | 4,158 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
|
|
5124
5134
|
| \`elements.css\` | 19,633 | 2,937 | 2,632 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
|
|
5125
5135
|
| \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
|
|
5126
5136
|
| \`primitives.css\` | 7,511 | 1,401 | 1,221 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
|
|
5127
|
-
| \`tokens.css\` |
|
|
5137
|
+
| \`tokens.css\` | 23,030 | 2,795 | 2,319 | The 200 semantic tokens. Every styled component needs them. |
|
|
5128
5138
|
|
|
5129
5139
|
## What the numbers say
|
|
5130
5140
|
|
|
5131
5141
|
**Most of your first component is the shared runtime.** The median styled family is 19,331 bytes gzipped alone, and it adds 4,376 to a page that already has Helix. The shared runtime is 77 percent of the first component, and the component itself is 23 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
|
|
5132
5142
|
|
|
5133
|
-
Across the 113 styled components, the smallest is \`code\` at 8,
|
|
5143
|
+
Across the 113 styled components, the smallest is \`code\` at 8,560 bytes gzipped alone, and the largest is \`data-table\` at 67,564. Every family together is 564,548.
|
|
5134
5144
|
|
|
5135
5145
|
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 408,952 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 113 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.
|
|
5136
5146
|
|
|
@@ -5146,43 +5156,43 @@ The table has no whole-library row. That row would compare how many components e
|
|
|
5146
5156
|
|
|
5147
5157
|
| Component | System | Raw | Gzip | Brotli |
|
|
5148
5158
|
|---|---|---|---|---|
|
|
5149
|
-
| \`button\` | **Helix** | 42,
|
|
5159
|
+
| \`button\` | **Helix** | 42,729 | 14,402 | 12,812 |
|
|
5150
5160
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
5151
5161
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
5152
5162
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
5153
5163
|
| | Web Awesome | 136,044 | 33,730 | 28,760 |
|
|
5154
|
-
| \`checkbox\` | **Helix** | 47,728 | 15,518 | 13,
|
|
5164
|
+
| \`checkbox\` | **Helix** | 47,728 | 15,518 | 13,835 |
|
|
5155
5165
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
5156
5166
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
5157
5167
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
5158
5168
|
| | Web Awesome | 115,251 | 28,728 | 24,420 |
|
|
5159
|
-
| \`dialog\` | **Helix** | 44,311 | 15,
|
|
5169
|
+
| \`dialog\` | **Helix** | 44,311 | 15,225 | 13,593 |
|
|
5160
5170
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
5161
5171
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
5162
5172
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
5163
5173
|
| | Web Awesome | 148,657 | 36,692 | 31,388 |
|
|
5164
|
-
| \`radio\` | **Helix** | 51,120 | 16,
|
|
5174
|
+
| \`radio\` | **Helix** | 51,120 | 16,281 | 14,511 |
|
|
5165
5175
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
5166
5176
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
5167
5177
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
5168
5178
|
| | Web Awesome | 112,026 | 27,416 | 23,128 |
|
|
5169
|
-
| \`switch\` | **Helix** | 44,449 | 14,978 | 13,
|
|
5179
|
+
| \`switch\` | **Helix** | 44,449 | 14,978 | 13,360 |
|
|
5170
5180
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
5171
5181
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
5172
5182
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
5173
5183
|
| | Web Awesome | 45,876 | 15,003 | 13,475 |
|
|
5174
|
-
| \`tabs\` | **Helix** | 56,031 | 18,
|
|
5184
|
+
| \`tabs\` | **Helix** | 56,031 | 18,048 | 16,065 |
|
|
5175
5185
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
5176
5186
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
5177
5187
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
5178
5188
|
| | Web Awesome | 153,439 | 37,030 | 31,737 |
|
|
5179
|
-
| \`tooltip\` | **Helix** | 62,502 | 22,262 | 19,
|
|
5189
|
+
| \`tooltip\` | **Helix** | 62,502 | 22,262 | 19,733 |
|
|
5180
5190
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
5181
5191
|
| | Material Web | | not shipped | |
|
|
5182
5192
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
5183
5193
|
| | Web Awesome | 70,568 | 24,005 | 21,107 |
|
|
5184
5194
|
|
|
5185
|
-
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,
|
|
5195
|
+
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`. The largest gap is radio against Spectrum, at 5,621 bytes gzipped. 8 of 27 peer measurements are smaller than the Helix row.
|
|
5186
5196
|
|
|
5187
5197
|
Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
|
|
5188
5198
|
|
|
@@ -5256,112 +5266,112 @@ Structure, accessibility, state, and form participation. It has no presentation
|
|
|
5256
5266
|
|
|
5257
5267
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
5258
5268
|
|---|---|---|---|---|---|---|
|
|
5259
|
-
| \`accordion\` | 32,671 | 12,095 | 10,
|
|
5260
|
-
| \`announcement\` | 37,661 | 13,
|
|
5261
|
-
| \`app-header\` | 33,168 | 12,242 | 10,
|
|
5262
|
-
| \`area-chart\` | 99,355 | 34,
|
|
5263
|
-
| \`avatar\` | 31,887 | 12,
|
|
5264
|
-
| \`badge\` | 28,118 | 10,
|
|
5265
|
-
| \`bar-chart\` | 107,369 | 37,644 | 33,
|
|
5266
|
-
| \`blockquote\` | 24,679 | 9,638 | 8,
|
|
5267
|
-
| \`breadcrumbs\` | 37,419 | 14,329 | 12,
|
|
5268
|
-
| \`button\` | 36,221 | 12,969 | 11,566 | 5,127 | 1,
|
|
5269
|
-
| \`button-group\` | 28,214 | 10,
|
|
5270
|
-
| \`callout\` | 36,284 | 13,
|
|
5271
|
-
| \`canvas\` | 109,962 | 35,313 | 30,
|
|
5272
|
-
| \`card\` | 24,397 | 9,311 | 8,
|
|
5273
|
-
| \`carousel\` | 45,040 | 16,
|
|
5274
|
-
| \`chat\` | 80,951 | 26,
|
|
5275
|
-
| \`checkbox\` | 41,242 | 14,016 | 12,
|
|
5276
|
-
| \`checkbox-group\` | 48,465 | 15,944 | 14,
|
|
5277
|
-
| \`code\` | 20,869 | 8,248 | 7,311 | 138 | 67 |
|
|
5278
|
-
| \`code-block\` | 104,774 | 35,631 | 31,
|
|
5279
|
-
| \`color-input\` | 143,744 | 45,826 | 39,
|
|
5280
|
-
| \`color-picker\` | 105,363 | 33,633 | 29,
|
|
5281
|
-
| \`combobox\` | 133,766 | 42,655 | 37,
|
|
5282
|
-
| \`command\` | 101,170 | 32,
|
|
5283
|
-
| \`copy-button\` | 82,225 | 28,295 | 25,
|
|
5284
|
-
| \`data-table\` | 201,919 | 62,
|
|
5285
|
-
| \`date-input\` | 143,049 | 45,174 | 39,
|
|
5286
|
-
| \`date-picker\` | 63,093 | 21,512 | 19,
|
|
5287
|
-
| \`description-list\` | 23,472 | 8,993 | 7,
|
|
5288
|
-
| \`dialog\` | 39,175 | 13,
|
|
5289
|
-
| \`divider\` | 23,564 | 9,144 | 8,
|
|
5290
|
-
| \`donut-chart\` | 92,673 | 32,268 | 28,
|
|
5291
|
-
| \`drawer\` | 43,812 | 15,
|
|
5292
|
-
| \`drilldown\` | 43,527 | 15,249 | 13,
|
|
5293
|
-
| \`empty\` | 25,007 | 9,
|
|
5294
|
-
| \`file-input\` | 59,118 | 20,550 | 18,
|
|
5295
|
-
| \`filter-input\` | 99,578 | 33,
|
|
5296
|
-
| \`format-date\` | 31,209 | 11,674 | 10,
|
|
5297
|
-
| \`graph\` | 76,986 | 25,237 | 22,
|
|
5298
|
-
| \`heatmap\` | 101,735 | 34,
|
|
5299
|
-
| \`icon\` | 83,516 | 28,
|
|
5300
|
-
| \`icon-button\` | 36,332 | 13,001 | 11,
|
|
5301
|
-
| \`image\` | 26,373 | 9,
|
|
5302
|
-
| \`input\` | 47,049 | 16,178 | 14,
|
|
5303
|
-
| \`kbd\` | 28,084 | 10,789 | 9,553 | 3,518 | 1,104 |
|
|
5304
|
-
| \`legend\` | 36,396 | 13,369 | 11,949 | 2,955 |
|
|
5305
|
-
| \`lightbox\` | 57,138 | 19,382 | 17,
|
|
5306
|
-
| \`line-chart\` | 102,350 | 35,823 | 31,
|
|
5307
|
-
| \`list\` | 62,949 | 21,
|
|
5308
|
-
| \`listbox\` | 78,070 | 25,
|
|
5309
|
-
| \`loader\` | 27,341 | 10,451 | 9,311 | 2,785 |
|
|
5310
|
-
| \`log\` | 80,937 | 27,
|
|
5311
|
-
| \`map\` | 81,046 | 25,212 | 22,
|
|
5312
|
-
| \`megamenu\` | 61,165 | 22,169 | 19,
|
|
5313
|
-
| \`menu\` | 98,510 | 32,960 | 29,
|
|
5314
|
-
| \`meter\` | 32,921 | 12,484 | 11,
|
|
5315
|
-
| \`motion-toggle\` | 26,353 | 10,
|
|
5316
|
-
| \`navigation\` | 33,861 | 12,731 | 11,
|
|
5317
|
-
| \`notifications\` | 59,539 | 20,
|
|
5318
|
-
| \`number-input\` | 57,629 | 19,358 | 17,
|
|
5319
|
-
| \`object-inspector\` | 115,897 | 39,008 | 34,
|
|
5320
|
-
| \`option\` | 27,049 | 9,970 | 8,
|
|
5321
|
-
| \`outline\` | 34,490 | 12,
|
|
5322
|
-
| \`pagination\` | 138,030 | 44,
|
|
5323
|
-
| \`pin-input\` | 48,848 | 17,
|
|
5324
|
-
| \`popover\` | 64,882 | 23,350 | 20,
|
|
5325
|
-
| \`progress\` | 29,235 | 11,153 | 9,
|
|
5326
|
-
| \`qr-code\` | 43,669 | 17,003 | 15,
|
|
5327
|
-
| \`quote\` | 23,088 | 9,112 | 8,040 | 1,209 |
|
|
5328
|
-
| \`radio\` | 43,333 | 14,777 | 13,
|
|
5329
|
-
| \`rating\` | 51,593 | 17,779 | 15,
|
|
5330
|
-
| \`scatter-chart\` | 98,654 | 34,303 | 30,
|
|
5331
|
-
| \`scroll-area\` | 31,294 | 11,
|
|
5332
|
-
| \`select\` | 116,719 | 38,717 | 33,
|
|
5333
|
-
| \`skeleton\` | 22,900 | 8,871 | 7,
|
|
5334
|
-
| \`skip-link\` | 24,547 | 9,
|
|
5335
|
-
| \`slider\` | 54,642 | 18,411 | 16,
|
|
5336
|
-
| \`sparkline\` | 49,258 | 17,982 | 16,
|
|
5337
|
-
| \`spatial-bar-chart\` | 105,167 | 37,
|
|
5338
|
-
| \`spatial-heatmap\` | 117,089 | 39,972 | 35,
|
|
5339
|
-
| \`spatial-ribbon-chart\` | 104,288 | 36,
|
|
5340
|
-
| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,
|
|
5341
|
-
| \`spatial-surface-chart\` | 105,443 | 37,265 | 32,
|
|
5342
|
-
| \`spatial-treemap\` | 106,561 | 37,910 | 33,
|
|
5343
|
-
| \`speed-dial\` | 69,618 | 25,068 | 22,
|
|
5344
|
-
| \`splitter\` | 45,071 | 15,639 | 13,
|
|
5345
|
-
| \`stat\` | 26,285 | 10,056 | 8,
|
|
5346
|
-
| \`steps\` | 54,926 | 19,
|
|
5347
|
-
| \`switch\` | 40,096 | 13,832 | 12,
|
|
5348
|
-
| \`table\` | 119,408 | 37,410 | 32,
|
|
5349
|
-
| \`tabs\` | 47,080 | 16,201 | 14,
|
|
5350
|
-
| \`tag\` | 43,623 | 15,
|
|
5351
|
-
| \`textarea\` | 44,973 | 15,
|
|
5352
|
-
| \`time-input\` | 170,882 | 53,314 | 46,
|
|
5353
|
-
| \`time-picker\` | 101,126 | 32,099 | 28,
|
|
5354
|
-
| \`timeline\` | 32,429 | 12,281 | 11,
|
|
5355
|
-
| \`toast\` | 52,298 | 18,497 | 16,
|
|
5356
|
-
| \`toggle\` | 46,246 | 15,
|
|
5357
|
-
| \`toolbar\` | 31,817 | 11,859 | 10,
|
|
5358
|
-
| \`tooltip\` | 59,698 | 21,530 | 19,
|
|
5359
|
-
| \`tour\` | 85,264 | 29,314 | 25,
|
|
5360
|
-
| \`tree\` | 68,641 | 23,150 | 20,
|
|
5361
|
-
| \`trend\` | 30,937 | 12,
|
|
5362
|
-
| \`video\` | 143,863 | 45,087 | 39,
|
|
5363
|
-
| \`video-playlist\` | 128,994 | 41,833 | 36,
|
|
5364
|
-
| \`virtual-list\` | 64,382 | 21,913 | 19,
|
|
5269
|
+
| \`accordion\` | 32,671 | 12,095 | 10,732 | 5,377 | 1,559 | 1,194 |
|
|
5270
|
+
| \`announcement\` | 37,661 | 13,706 | 12,236 | 4,700 | 1,380 | 1,049 |
|
|
5271
|
+
| \`app-header\` | 33,168 | 12,242 | 10,882 | 5,900 | 1,761 | 1,246 |
|
|
5272
|
+
| \`area-chart\` | 99,355 | 34,967 | 30,847 | 14,417 | 4,437 | 3,594 |
|
|
5273
|
+
| \`avatar\` | 31,887 | 12,152 | 10,893 | 3,999 | 1,247 | 878 |
|
|
5274
|
+
| \`badge\` | 28,118 | 10,943 | 9,778 | 2,960 | 888 | 610 |
|
|
5275
|
+
| \`bar-chart\` | 107,369 | 37,644 | 33,272 | 21,901 | 6,878 | 5,672 |
|
|
5276
|
+
| \`blockquote\` | 24,679 | 9,638 | 8,549 | 2,400 | 883 | 697 |
|
|
5277
|
+
| \`breadcrumbs\` | 37,419 | 14,329 | 12,824 | 7,381 | 2,415 | 1,791 |
|
|
5278
|
+
| \`button\` | 36,221 | 12,969 | 11,566 | 5,127 | 1,523 | 1,079 |
|
|
5279
|
+
| \`button-group\` | 28,214 | 10,616 | 9,418 | 4,923 | 1,508 | 1,108 |
|
|
5280
|
+
| \`callout\` | 36,284 | 13,987 | 12,431 | 2,884 | 961 | 621 |
|
|
5281
|
+
| \`canvas\` | 109,962 | 35,313 | 30,864 | 68,989 | 21,024 | 17,559 |
|
|
5282
|
+
| \`card\` | 24,397 | 9,311 | 8,253 | 2,090 | 634 | 510 |
|
|
5283
|
+
| \`carousel\` | 45,040 | 16,011 | 14,306 | 15,317 | 4,235 | 3,211 |
|
|
5284
|
+
| \`chat\` | 80,951 | 26,985 | 23,864 | 27,678 | 8,076 | 6,463 |
|
|
5285
|
+
| \`checkbox\` | 41,242 | 14,016 | 12,507 | 3,107 | 960 | 626 |
|
|
5286
|
+
| \`checkbox-group\` | 48,465 | 15,944 | 14,216 | 8,321 | 2,373 | 1,670 |
|
|
5287
|
+
| \`code\` | 20,869 | 8,248 | 7,311 | 138 | 67 | -24 |
|
|
5288
|
+
| \`code-block\` | 104,774 | 35,631 | 31,450 | 37,349 | 10,789 | 8,793 |
|
|
5289
|
+
| \`color-input\` | 143,744 | 45,826 | 39,997 | 55,780 | 14,227 | 11,687 |
|
|
5290
|
+
| \`color-picker\` | 105,363 | 33,633 | 29,447 | 47,900 | 12,700 | 10,347 |
|
|
5291
|
+
| \`combobox\` | 133,766 | 42,655 | 37,560 | 35,968 | 9,135 | 7,200 |
|
|
5292
|
+
| \`command\` | 101,170 | 32,142 | 28,266 | 30,351 | 8,182 | 6,420 |
|
|
5293
|
+
| \`copy-button\` | 82,225 | 28,295 | 25,059 | 18,756 | 5,071 | 3,954 |
|
|
5294
|
+
| \`data-table\` | 201,919 | 62,147 | 53,113 | 89,974 | 24,051 | 19,103 |
|
|
5295
|
+
| \`date-input\` | 143,049 | 45,174 | 39,736 | 38,666 | 9,516 | 7,499 |
|
|
5296
|
+
| \`date-picker\` | 63,093 | 21,512 | 19,333 | 20,720 | 5,657 | 4,438 |
|
|
5297
|
+
| \`description-list\` | 23,472 | 8,993 | 7,999 | 1,565 | 499 | 281 |
|
|
5298
|
+
| \`dialog\` | 39,175 | 13,970 | 12,448 | 5,948 | 1,764 | 1,187 |
|
|
5299
|
+
| \`divider\` | 23,564 | 9,144 | 8,084 | 1,414 | 496 | 402 |
|
|
5300
|
+
| \`donut-chart\` | 92,673 | 32,268 | 28,551 | 14,717 | 4,499 | 3,630 |
|
|
5301
|
+
| \`drawer\` | 43,812 | 15,481 | 13,807 | 7,798 | 2,316 | 1,754 |
|
|
5302
|
+
| \`drilldown\` | 43,527 | 15,249 | 13,621 | 9,709 | 2,685 | 2,002 |
|
|
5303
|
+
| \`empty\` | 25,007 | 9,578 | 8,497 | 1,976 | 647 | 432 |
|
|
5304
|
+
| \`file-input\` | 59,118 | 20,550 | 18,267 | 13,152 | 4,120 | 3,216 |
|
|
5305
|
+
| \`filter-input\` | 99,578 | 33,494 | 29,711 | 21,569 | 6,178 | 4,967 |
|
|
5306
|
+
| \`format-date\` | 31,209 | 11,674 | 10,418 | 4,474 | 1,291 | 983 |
|
|
5307
|
+
| \`graph\` | 76,986 | 25,237 | 22,389 | 23,180 | 6,769 | 5,435 |
|
|
5308
|
+
| \`heatmap\` | 101,735 | 34,695 | 30,622 | 19,071 | 5,601 | 4,482 |
|
|
5309
|
+
| \`icon\` | 83,516 | 28,587 | 24,478 | 58,618 | 20,086 | 16,021 |
|
|
5310
|
+
| \`icon-button\` | 36,332 | 13,001 | 11,592 | 5,236 | 1,561 | 1,053 |
|
|
5311
|
+
| \`image\` | 26,373 | 9,843 | 8,744 | 3,845 | 1,149 | 788 |
|
|
5312
|
+
| \`input\` | 47,049 | 16,178 | 14,346 | 7,005 | 2,243 | 1,490 |
|
|
5313
|
+
| \`kbd\` | 28,084 | 10,789 | 9,553 | 3,518 | 1,104 | 719 |
|
|
5314
|
+
| \`legend\` | 36,396 | 13,369 | 11,949 | 2,955 | 985 | 683 |
|
|
5315
|
+
| \`lightbox\` | 57,138 | 19,382 | 17,237 | 16,760 | 4,615 | 3,540 |
|
|
5316
|
+
| \`line-chart\` | 102,350 | 35,823 | 31,629 | 16,812 | 5,063 | 4,189 |
|
|
5317
|
+
| \`list\` | 62,949 | 21,721 | 19,378 | 15,258 | 4,395 | 3,423 |
|
|
5318
|
+
| \`listbox\` | 78,070 | 25,947 | 22,965 | 15,605 | 4,580 | 3,414 |
|
|
5319
|
+
| \`loader\` | 27,341 | 10,451 | 9,311 | 2,785 | 941 | 602 |
|
|
5320
|
+
| \`log\` | 80,937 | 27,697 | 24,555 | 37,582 | 11,597 | 9,883 |
|
|
5321
|
+
| \`map\` | 81,046 | 25,212 | 22,051 | 37,496 | 10,232 | 8,063 |
|
|
5322
|
+
| \`megamenu\` | 61,165 | 22,169 | 19,586 | 8,723 | 2,443 | 1,696 |
|
|
5323
|
+
| \`menu\` | 98,510 | 32,960 | 29,043 | 30,262 | 7,971 | 6,326 |
|
|
5324
|
+
| \`meter\` | 32,921 | 12,484 | 11,131 | 4,980 | 1,464 | 1,070 |
|
|
5325
|
+
| \`motion-toggle\` | 26,353 | 10,248 | 9,108 | 1,426 | 515 | 353 |
|
|
5326
|
+
| \`navigation\` | 33,861 | 12,731 | 11,315 | 3,364 | 1,162 | 816 |
|
|
5327
|
+
| \`notifications\` | 59,539 | 20,330 | 18,124 | 18,280 | 5,038 | 3,887 |
|
|
5328
|
+
| \`number-input\` | 57,629 | 19,358 | 17,238 | 13,579 | 3,610 | 2,722 |
|
|
5329
|
+
| \`object-inspector\` | 115,897 | 39,008 | 34,362 | 36,018 | 10,397 | 8,308 |
|
|
5330
|
+
| \`option\` | 27,049 | 9,970 | 8,881 | 4,522 | 1,202 | 845 |
|
|
5331
|
+
| \`outline\` | 34,490 | 12,936 | 11,488 | 7,878 | 2,548 | 1,867 |
|
|
5332
|
+
| \`pagination\` | 138,030 | 44,303 | 38,484 | 45,681 | 11,904 | 9,402 |
|
|
5333
|
+
| \`pin-input\` | 48,848 | 17,044 | 15,222 | 7,207 | 2,365 | 1,631 |
|
|
5334
|
+
| \`popover\` | 64,882 | 23,350 | 20,646 | 6,460 | 1,853 | 1,338 |
|
|
5335
|
+
| \`progress\` | 29,235 | 11,153 | 9,958 | 3,006 | 944 | 719 |
|
|
5336
|
+
| \`qr-code\` | 43,669 | 17,003 | 15,114 | 17,002 | 6,288 | 5,419 |
|
|
5337
|
+
| \`quote\` | 23,088 | 9,112 | 8,040 | 1,209 | 498 | 378 |
|
|
5338
|
+
| \`radio\` | 43,333 | 14,777 | 13,152 | 3,815 | 1,205 | 744 |
|
|
5339
|
+
| \`rating\` | 51,593 | 17,779 | 15,862 | 8,057 | 2,441 | 1,711 |
|
|
5340
|
+
| \`scatter-chart\` | 98,654 | 34,303 | 30,299 | 20,338 | 6,375 | 5,214 |
|
|
5341
|
+
| \`scroll-area\` | 31,294 | 11,433 | 10,150 | 8,518 | 2,583 | 1,991 |
|
|
5342
|
+
| \`select\` | 116,719 | 38,717 | 33,953 | 26,155 | 7,165 | 5,404 |
|
|
5343
|
+
| \`skeleton\` | 22,900 | 8,871 | 7,874 | 991 | 378 | 202 |
|
|
5344
|
+
| \`skip-link\` | 24,547 | 9,607 | 8,536 | 1,223 | 457 | 341 |
|
|
5345
|
+
| \`slider\` | 54,642 | 18,411 | 16,519 | 13,623 | 3,852 | 2,979 |
|
|
5346
|
+
| \`sparkline\` | 49,258 | 17,982 | 16,072 | 5,982 | 2,087 | 1,500 |
|
|
5347
|
+
| \`spatial-bar-chart\` | 105,167 | 37,123 | 32,692 | 19,854 | 6,519 | 5,259 |
|
|
5348
|
+
| \`spatial-heatmap\` | 117,089 | 39,972 | 35,133 | 31,736 | 9,642 | 7,709 |
|
|
5349
|
+
| \`spatial-ribbon-chart\` | 104,288 | 36,729 | 32,399 | 20,791 | 6,922 | 5,684 |
|
|
5350
|
+
| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,712 | 19,085 | 6,281 | 4,973 |
|
|
5351
|
+
| \`spatial-surface-chart\` | 105,443 | 37,265 | 32,821 | 21,949 | 7,465 | 6,084 |
|
|
5352
|
+
| \`spatial-treemap\` | 106,561 | 37,910 | 33,351 | 21,370 | 7,346 | 5,825 |
|
|
5353
|
+
| \`speed-dial\` | 69,618 | 25,068 | 22,169 | 10,934 | 2,966 | 2,326 |
|
|
5354
|
+
| \`splitter\` | 45,071 | 15,639 | 13,995 | 14,506 | 3,885 | 3,027 |
|
|
5355
|
+
| \`stat\` | 26,285 | 10,056 | 8,959 | 2,322 | 766 | 442 |
|
|
5356
|
+
| \`steps\` | 54,926 | 19,122 | 17,014 | 13,804 | 3,888 | 2,989 |
|
|
5357
|
+
| \`switch\` | 40,096 | 13,832 | 12,335 | 1,679 | 619 | 349 |
|
|
5358
|
+
| \`table\` | 119,408 | 37,410 | 32,504 | 45,149 | 12,317 | 9,872 |
|
|
5359
|
+
| \`tabs\` | 47,080 | 16,201 | 14,408 | 10,491 | 2,847 | 2,214 |
|
|
5360
|
+
| \`tag\` | 43,623 | 15,992 | 14,289 | 8,450 | 2,508 | 1,791 |
|
|
5361
|
+
| \`textarea\` | 44,973 | 15,361 | 13,719 | 5,489 | 1,614 | 1,138 |
|
|
5362
|
+
| \`time-input\` | 170,882 | 53,314 | 46,284 | 48,574 | 12,340 | 9,861 |
|
|
5363
|
+
| \`time-picker\` | 101,126 | 32,099 | 28,238 | 33,987 | 9,197 | 7,160 |
|
|
5364
|
+
| \`timeline\` | 32,429 | 12,281 | 11,016 | 4,086 | 1,200 | 772 |
|
|
5365
|
+
| \`toast\` | 52,298 | 18,497 | 16,518 | 12,164 | 3,516 | 2,610 |
|
|
5366
|
+
| \`toggle\` | 46,246 | 15,540 | 13,826 | 6,005 | 1,801 | 1,245 |
|
|
5367
|
+
| \`toolbar\` | 31,817 | 11,859 | 10,565 | 5,156 | 1,628 | 1,149 |
|
|
5368
|
+
| \`tooltip\` | 59,698 | 21,530 | 19,098 | 8,504 | 2,352 | 1,784 |
|
|
5369
|
+
| \`tour\` | 85,264 | 29,314 | 25,885 | 20,091 | 5,520 | 4,335 |
|
|
5370
|
+
| \`tree\` | 68,641 | 23,150 | 20,590 | 17,198 | 4,916 | 3,796 |
|
|
5371
|
+
| \`trend\` | 30,937 | 12,023 | 10,732 | 3,590 | 1,099 | 845 |
|
|
5372
|
+
| \`video\` | 143,863 | 45,087 | 39,252 | 66,787 | 16,894 | 13,859 |
|
|
5373
|
+
| \`video-playlist\` | 128,994 | 41,833 | 36,773 | 42,860 | 11,206 | 9,139 |
|
|
5374
|
+
| \`virtual-list\` | 64,382 | 21,913 | 19,494 | 23,393 | 7,169 | 5,849 |
|
|
5365
5375
|
|
|
5366
5376
|
### Styled tier
|
|
5367
5377
|
|
|
@@ -5369,119 +5379,119 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
|
|
|
5369
5379
|
|
|
5370
5380
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
5371
5381
|
|---|---|---|---|---|---|---|
|
|
5372
|
-
| \`accordion\` | 36,104 | 12,942 | 11,
|
|
5373
|
-
| \`announcement\` | 42,276 | 14,
|
|
5374
|
-
| \`app-header\` | 38,326 | 13,450 | 11,973 | 11,045 | 2,971 | 2,
|
|
5375
|
-
| \`area-chart\` | 107,559 | 36,
|
|
5376
|
-
| \`aura\` | 59,567 | 20,
|
|
5377
|
-
| \`avatar\` | 34,890 | 12,
|
|
5378
|
-
| \`badge\` | 33,626 | 12,
|
|
5379
|
-
| \`bar-chart\` | 122,404 | 40,
|
|
5380
|
-
| \`blockquote\` | 26,905 | 10,186 | 9,
|
|
5381
|
-
| \`breadcrumbs\` | 44,356 | 15,535 | 13,
|
|
5382
|
-
| \`button\` | 42,
|
|
5383
|
-
| \`button-group\` | 31,709 | 11,
|
|
5384
|
-
| \`callout\` | 40,077 | 14,932 | 13,
|
|
5385
|
-
| \`canvas\` | 131,001 | 39,287 | 34,
|
|
5386
|
-
| \`card\` | 28,297 | 10,317 | 9,175 | 5,976 | 1,
|
|
5387
|
-
| \`carousel\` | 55,526 | 17,
|
|
5388
|
-
| \`chat\` | 96,
|
|
5389
|
-
| \`checkbox\` | 47,728 | 15,518 | 13,
|
|
5390
|
-
| \`checkbox-group\` | 55,688 | 17,587 | 15,
|
|
5391
|
-
| \`code\` | 21,726 | 8,
|
|
5392
|
-
| \`code-block\` | 129,247 | 39,457 | 34,
|
|
5393
|
-
| \`color-input\` | 186,
|
|
5394
|
-
| \`color-picker\` | 142,
|
|
5395
|
-
| \`combobox\` | 149,
|
|
5396
|
-
| \`command\` | 112,469 | 34,490 | 30,
|
|
5397
|
-
| \`copy-button\` | 94,256 | 30,
|
|
5398
|
-
| \`data-table\` | 232,
|
|
5399
|
-
| \`date-input\` | 164,353 | 48,
|
|
5400
|
-
| \`date-picker\` | 71,139 | 22,979 | 20,
|
|
5401
|
-
| \`description-list\` | 26,427 | 9,731 | 8,
|
|
5402
|
-
| \`dialog\` | 44,311 | 15,
|
|
5403
|
-
| \`divider\` | 25,863 | 9,
|
|
5404
|
-
| \`donut-chart\` | 102,652 | 34,
|
|
5405
|
-
| \`drawer\` | 49,642 | 16,
|
|
5406
|
-
| \`drilldown\` | 49,204 | 16,541 | 14,
|
|
5407
|
-
| \`empty\` | 26,316 | 10,056 | 8,
|
|
5408
|
-
| \`file-input\` | 70,648 | 22,941 | 20,
|
|
5409
|
-
| \`filter-input\` | 110,412 | 35,679 | 31,
|
|
5410
|
-
| \`flex\` | 26,312 | 9,424 | 8,
|
|
5411
|
-
| \`format-date\` | 31,463 | 11,
|
|
5412
|
-
| \`graph\` | 92,
|
|
5413
|
-
| \`grid\` | 27,762 | 10,137 |
|
|
5414
|
-
| \`heatmap\` | 110,057 | 36,548 | 32,
|
|
5415
|
-
| \`icon\` | 85,551 | 29,
|
|
5416
|
-
| \`icon-button\` | 44,066 | 14,
|
|
5417
|
-
| \`image\` | 27,760 | 10,306 | 9,130 | 5,216 | 1,623 | 1,
|
|
5418
|
-
| \`input\` | 51,304 | 17,264 | 15,
|
|
5419
|
-
| \`kbd\` | 30,078 | 11,329 | 10,047 | 5,494 | 1,
|
|
5420
|
-
| \`legend\` | 41,634 | 14,661 | 13,
|
|
5421
|
-
| \`lightbox\` | 63,432 | 20,
|
|
5422
|
-
| \`line-chart\` | 113,713 | 38,
|
|
5423
|
-
| \`list\` | 69,295 | 23,266 | 20,
|
|
5424
|
-
| \`listbox\` | 82,511 | 27,
|
|
5425
|
-
| \`loader\` | 30,222 | 11,214 | 10,
|
|
5426
|
-
| \`log\` | 92,
|
|
5427
|
-
| \`map\` | 114,692 | 30,616 | 26,
|
|
5428
|
-
| \`megamenu\` | 66,134 | 23,308 | 20,
|
|
5429
|
-
| \`menu\` | 109,435 | 35,
|
|
5430
|
-
| \`meter\` | 39,093 | 13,830 | 12,
|
|
5431
|
-
| \`motion-toggle\` | 27,988 | 10,
|
|
5432
|
-
| \`navigation\` | 37,585 | 13,566 | 12,
|
|
5433
|
-
| \`notifications\` | 73,027 | 22,
|
|
5434
|
-
| \`number-input\` | 62,610 | 20,544 | 18,
|
|
5435
|
-
| \`object-inspector\` | 132,306 | 41,847 | 36,
|
|
5436
|
-
| \`option\` | 30,
|
|
5437
|
-
| \`orb\` | 36,885 | 14,019 | 12,487 | 10,014 | 3,
|
|
5438
|
-
| \`outline\` | 38,722 | 13,793 | 12,
|
|
5439
|
-
| \`pagination\` |
|
|
5440
|
-
| \`pin-input\` | 52,228 | 17,955 | 16,
|
|
5441
|
-
| \`popover\` | 68,034 | 24,
|
|
5442
|
-
| \`progress\` | 36,415 | 12,
|
|
5443
|
-
| \`qr-code\` | 45,270 | 17,490 | 15,562 | 18,586 | 6,787 | 5,
|
|
5444
|
-
| \`quote\` | 23,646 | 9,303 | 8,
|
|
5445
|
-
| \`radio\` | 51,120 | 16,
|
|
5446
|
-
| \`rating\` | 55,527 | 19,005 | 16,
|
|
5447
|
-
| \`sandbox\` | 108,218 | 32,974 | 28,
|
|
5448
|
-
| \`scatter-chart\` | 108,028 | 36,473 | 32,
|
|
5449
|
-
| \`scroll-area\` | 36,301 | 12,
|
|
5450
|
-
| \`select\` | 125,846 | 40,
|
|
5451
|
-
| \`skeleton\` | 26,848 | 9,947 | 8,
|
|
5452
|
-
| \`skip-link\` | 26,118 | 10,
|
|
5453
|
-
| \`slider\` | 69,605 | 20,728 | 18,
|
|
5454
|
-
| \`sparkline\` | 54,716 | 19,331 | 17,
|
|
5455
|
-
| \`spatial-bar-chart\` | 114,232 | 39,173 | 34,
|
|
5456
|
-
| \`spatial-heatmap\` | 126,828 | 42,153 |
|
|
5457
|
-
| \`spatial-ribbon-chart\` | 113,204 | 38,749 | 34,
|
|
5458
|
-
| \`spatial-scatter-chart\` | 111,501 | 37,
|
|
5459
|
-
| \`spatial-surface-chart\` | 113,878 | 39,172 | 34,
|
|
5460
|
-
| \`spatial-treemap\` | 115,578 | 39,956 | 35,
|
|
5461
|
-
| \`speed-dial\` | 76,667 | 26,
|
|
5462
|
-
| \`splitter\` | 51,121 | 16,689 | 14,
|
|
5463
|
-
| \`stat\` | 29,171 | 10,751 | 9,
|
|
5464
|
-
| \`steps\` |
|
|
5465
|
-
| \`strands\` | 63,680 | 23,697 | 20,
|
|
5466
|
-
| \`switch\` | 44,449 | 14,978 | 13,
|
|
5467
|
-
| \`table\` | 136,948 | 40,477 | 35,
|
|
5468
|
-
| \`tabs\` | 56,031 | 18,
|
|
5469
|
-
| \`tag\` | 48,197 | 17,
|
|
5470
|
-
| \`text\` | 29,286 | 10,
|
|
5471
|
-
| \`textarea\` | 48,905 | 16,
|
|
5472
|
-
| \`time-input\` | 195,
|
|
5473
|
-
| \`time-picker\` | 113,
|
|
5474
|
-
| \`timeline\` | 39,321 | 13,742 | 12,
|
|
5475
|
-
| \`toast\` | 60,192 | 20,339 | 18,
|
|
5476
|
-
| \`toggle\` | 51,106 | 16,791 | 14,924 | 10,851 | 3,065 | 2,
|
|
5477
|
-
| \`toolbar\` | 34,496 | 12,352 | 10,
|
|
5478
|
-
| \`tooltip\` | 62,502 | 22,262 | 19,
|
|
5479
|
-
| \`tour\` | 95,
|
|
5480
|
-
| \`tree\` | 77,329 | 25,058 | 22,
|
|
5481
|
-
| \`trend\` | 32,854 | 12,
|
|
5482
|
-
| \`video\` | 164,366 | 48,811 | 42,
|
|
5483
|
-
| \`video-playlist\` | 144,942 | 44,812 | 39,
|
|
5484
|
-
| \`virtual-list\` | 66,376 | 22,417 | 19,
|
|
5382
|
+
| \`accordion\` | 36,104 | 12,942 | 11,549 | 8,794 | 2,434 | 1,844 |
|
|
5383
|
+
| \`announcement\` | 42,276 | 14,774 | 13,216 | 9,296 | 2,462 | 1,854 |
|
|
5384
|
+
| \`app-header\` | 38,326 | 13,450 | 11,973 | 11,045 | 2,971 | 2,290 |
|
|
5385
|
+
| \`area-chart\` | 107,559 | 36,866 | 32,511 | 22,602 | 6,334 | 5,280 |
|
|
5386
|
+
| \`aura\` | 59,567 | 20,253 | 17,946 | 31,767 | 9,666 | 8,116 |
|
|
5387
|
+
| \`avatar\` | 34,890 | 12,910 | 11,548 | 6,987 | 1,979 | 1,591 |
|
|
5388
|
+
| \`badge\` | 33,626 | 12,190 | 10,866 | 8,458 | 2,159 | 1,676 |
|
|
5389
|
+
| \`bar-chart\` | 122,404 | 40,670 | 35,871 | 36,918 | 9,892 | 8,222 |
|
|
5390
|
+
| \`blockquote\` | 26,905 | 10,186 | 9,009 | 4,610 | 1,426 | 1,092 |
|
|
5391
|
+
| \`breadcrumbs\` | 44,356 | 15,535 | 13,878 | 14,306 | 3,647 | 3,017 |
|
|
5392
|
+
| \`button\` | 42,729 | 14,402 | 12,812 | 11,617 | 2,937 | 2,362 |
|
|
5393
|
+
| \`button-group\` | 31,709 | 11,295 | 10,029 | 8,408 | 2,202 | 1,666 |
|
|
5394
|
+
| \`callout\` | 40,077 | 14,932 | 13,285 | 6,659 | 1,927 | 1,417 |
|
|
5395
|
+
| \`canvas\` | 131,001 | 39,287 | 34,374 | 89,671 | 24,923 | 20,876 |
|
|
5396
|
+
| \`card\` | 28,297 | 10,317 | 9,175 | 5,976 | 1,634 | 1,228 |
|
|
5397
|
+
| \`carousel\` | 55,526 | 17,812 | 15,969 | 25,788 | 6,087 | 4,831 |
|
|
5398
|
+
| \`chat\` | 96,244 | 29,708 | 26,317 | 42,964 | 10,846 | 8,823 |
|
|
5399
|
+
| \`checkbox\` | 47,728 | 15,518 | 13,835 | 9,579 | 2,487 | 1,846 |
|
|
5400
|
+
| \`checkbox-group\` | 55,688 | 17,587 | 15,651 | 15,535 | 4,010 | 3,001 |
|
|
5401
|
+
| \`code\` | 21,726 | 8,560 | 7,605 | 976 | 378 | 353 |
|
|
5402
|
+
| \`code-block\` | 129,247 | 39,457 | 34,820 | 61,803 | 14,529 | 12,126 |
|
|
5403
|
+
| \`color-input\` | 186,215 | 52,107 | 45,578 | 98,238 | 20,737 | 17,207 |
|
|
5404
|
+
| \`color-picker\` | 142,389 | 39,199 | 34,366 | 84,910 | 18,384 | 15,229 |
|
|
5405
|
+
| \`combobox\` | 149,120 | 45,610 | 40,115 | 51,305 | 12,018 | 9,770 |
|
|
5406
|
+
| \`command\` | 112,469 | 34,490 | 30,368 | 41,644 | 10,582 | 8,569 |
|
|
5407
|
+
| \`copy-button\` | 94,256 | 30,467 | 26,949 | 30,769 | 7,292 | 5,845 |
|
|
5408
|
+
| \`data-table\` | 232,584 | 67,564 | 57,782 | 120,622 | 29,563 | 23,967 |
|
|
5409
|
+
| \`date-input\` | 164,353 | 48,934 | 42,951 | 59,950 | 13,125 | 10,803 |
|
|
5410
|
+
| \`date-picker\` | 71,139 | 22,979 | 20,573 | 28,748 | 7,140 | 5,751 |
|
|
5411
|
+
| \`description-list\` | 26,427 | 9,731 | 8,674 | 4,508 | 1,276 | 947 |
|
|
5412
|
+
| \`dialog\` | 44,311 | 15,225 | 13,593 | 11,064 | 3,040 | 2,365 |
|
|
5413
|
+
| \`divider\` | 25,863 | 9,771 | 8,637 | 3,697 | 1,133 | 839 |
|
|
5414
|
+
| \`donut-chart\` | 102,652 | 34,419 | 30,376 | 24,673 | 6,688 | 5,492 |
|
|
5415
|
+
| \`drawer\` | 49,642 | 16,870 | 15,043 | 13,612 | 3,748 | 3,013 |
|
|
5416
|
+
| \`drilldown\` | 49,204 | 16,541 | 14,765 | 15,375 | 4,005 | 3,300 |
|
|
5417
|
+
| \`empty\` | 26,316 | 10,056 | 8,907 | 3,267 | 1,091 | 967 |
|
|
5418
|
+
| \`file-input\` | 70,648 | 22,941 | 20,421 | 24,668 | 6,541 | 5,376 |
|
|
5419
|
+
| \`filter-input\` | 110,412 | 35,679 | 31,581 | 32,396 | 8,373 | 6,767 |
|
|
5420
|
+
| \`flex\` | 26,312 | 9,424 | 8,375 | 4,761 | 1,042 | 854 |
|
|
5421
|
+
| \`format-date\` | 31,463 | 11,789 | 10,568 | 4,712 | 1,390 | 1,001 |
|
|
5422
|
+
| \`graph\` | 92,818 | 27,924 | 24,609 | 38,992 | 9,576 | 7,765 |
|
|
5423
|
+
| \`grid\` | 27,762 | 10,137 | 8,994 | 5,655 | 1,457 | 1,189 |
|
|
5424
|
+
| \`heatmap\` | 110,057 | 36,548 | 32,267 | 27,373 | 7,431 | 6,030 |
|
|
5425
|
+
| \`icon\` | 85,551 | 29,192 | 25,040 | 60,473 | 20,644 | 16,559 |
|
|
5426
|
+
| \`icon-button\` | 44,066 | 14,349 | 12,787 | 12,955 | 2,918 | 2,065 |
|
|
5427
|
+
| \`image\` | 27,760 | 10,306 | 9,130 | 5,216 | 1,623 | 1,184 |
|
|
5428
|
+
| \`input\` | 51,304 | 17,264 | 15,273 | 11,243 | 3,350 | 2,448 |
|
|
5429
|
+
| \`kbd\` | 30,078 | 11,329 | 10,047 | 5,494 | 1,657 | 1,277 |
|
|
5430
|
+
| \`legend\` | 41,634 | 14,661 | 13,051 | 8,065 | 2,234 | 1,745 |
|
|
5431
|
+
| \`lightbox\` | 63,432 | 20,711 | 18,452 | 23,035 | 5,935 | 4,646 |
|
|
5432
|
+
| \`line-chart\` | 113,713 | 38,278 | 33,815 | 28,159 | 7,541 | 6,209 |
|
|
5433
|
+
| \`list\` | 69,295 | 23,266 | 20,712 | 21,585 | 5,917 | 4,766 |
|
|
5434
|
+
| \`listbox\` | 82,511 | 27,061 | 23,895 | 20,034 | 5,683 | 4,380 |
|
|
5435
|
+
| \`loader\` | 30,222 | 11,214 | 10,030 | 5,652 | 1,708 | 1,439 |
|
|
5436
|
+
| \`log\` | 92,717 | 29,992 | 26,641 | 49,350 | 13,841 | 11,831 |
|
|
5437
|
+
| \`map\` | 114,692 | 30,616 | 26,855 | 71,126 | 15,703 | 12,812 |
|
|
5438
|
+
| \`megamenu\` | 66,134 | 23,308 | 20,628 | 13,673 | 3,615 | 2,731 |
|
|
5439
|
+
| \`menu\` | 109,435 | 35,106 | 30,898 | 41,177 | 10,171 | 8,269 |
|
|
5440
|
+
| \`meter\` | 39,093 | 13,830 | 12,385 | 11,136 | 2,822 | 2,255 |
|
|
5441
|
+
| \`motion-toggle\` | 27,988 | 10,725 | 9,553 | 3,044 | 997 | 780 |
|
|
5442
|
+
| \`navigation\` | 37,585 | 13,566 | 12,044 | 7,077 | 2,002 | 1,525 |
|
|
5443
|
+
| \`notifications\` | 73,027 | 22,892 | 20,443 | 31,757 | 7,639 | 6,186 |
|
|
5444
|
+
| \`number-input\` | 62,610 | 20,544 | 18,289 | 18,544 | 4,834 | 3,826 |
|
|
5445
|
+
| \`object-inspector\` | 132,306 | 41,847 | 36,864 | 52,407 | 13,126 | 10,884 |
|
|
5446
|
+
| \`option\` | 30,122 | 10,930 | 9,731 | 7,585 | 2,139 | 1,628 |
|
|
5447
|
+
| \`orb\` | 36,885 | 14,019 | 12,487 | 10,014 | 3,696 | 3,082 |
|
|
5448
|
+
| \`outline\` | 38,722 | 13,793 | 12,272 | 12,095 | 3,424 | 2,547 |
|
|
5449
|
+
| \`pagination\` | 154,907 | 47,576 | 41,403 | 62,541 | 15,095 | 12,285 |
|
|
5450
|
+
| \`pin-input\` | 52,228 | 17,955 | 16,033 | 10,570 | 3,314 | 2,561 |
|
|
5451
|
+
| \`popover\` | 68,034 | 24,117 | 21,327 | 9,594 | 2,639 | 1,929 |
|
|
5452
|
+
| \`progress\` | 36,415 | 12,814 | 11,465 | 10,169 | 2,605 | 2,148 |
|
|
5453
|
+
| \`qr-code\` | 45,270 | 17,490 | 15,562 | 18,586 | 6,787 | 5,653 |
|
|
5454
|
+
| \`quote\` | 23,646 | 9,303 | 8,221 | 1,750 | 694 | 452 |
|
|
5455
|
+
| \`radio\` | 51,120 | 16,281 | 14,511 | 11,591 | 2,750 | 2,079 |
|
|
5456
|
+
| \`rating\` | 55,527 | 19,005 | 16,948 | 11,973 | 3,668 | 2,787 |
|
|
5457
|
+
| \`sandbox\` | 108,218 | 32,974 | 28,888 | 74,725 | 20,351 | 17,024 |
|
|
5458
|
+
| \`scatter-chart\` | 108,028 | 36,473 | 32,160 | 29,693 | 8,586 | 6,988 |
|
|
5459
|
+
| \`scroll-area\` | 36,301 | 12,383 | 11,006 | 13,508 | 3,564 | 2,864 |
|
|
5460
|
+
| \`select\` | 125,846 | 40,630 | 35,567 | 35,267 | 9,129 | 7,138 |
|
|
5461
|
+
| \`skeleton\` | 26,848 | 9,947 | 8,858 | 4,755 | 1,399 | 1,129 |
|
|
5462
|
+
| \`skip-link\` | 26,118 | 10,114 | 8,973 | 2,778 | 966 | 644 |
|
|
5463
|
+
| \`slider\` | 69,605 | 20,728 | 18,555 | 28,572 | 6,254 | 5,046 |
|
|
5464
|
+
| \`sparkline\` | 54,716 | 19,331 | 17,265 | 11,422 | 3,446 | 2,743 |
|
|
5465
|
+
| \`spatial-bar-chart\` | 114,232 | 39,173 | 34,460 | 28,899 | 8,556 | 7,091 |
|
|
5466
|
+
| \`spatial-heatmap\` | 126,828 | 42,153 | 37,042 | 41,457 | 11,703 | 9,678 |
|
|
5467
|
+
| \`spatial-ribbon-chart\` | 113,204 | 38,749 | 34,137 | 29,690 | 8,957 | 7,394 |
|
|
5468
|
+
| \`spatial-scatter-chart\` | 111,501 | 37,967 | 33,427 | 28,039 | 8,232 | 6,725 |
|
|
5469
|
+
| \`spatial-surface-chart\` | 113,878 | 39,172 | 34,535 | 30,366 | 9,349 | 7,757 |
|
|
5470
|
+
| \`spatial-treemap\` | 115,578 | 39,956 | 35,170 | 30,367 | 9,373 | 7,713 |
|
|
5471
|
+
| \`speed-dial\` | 76,667 | 26,452 | 23,500 | 17,966 | 4,376 | 3,473 |
|
|
5472
|
+
| \`splitter\` | 51,121 | 16,689 | 14,971 | 20,542 | 4,917 | 3,959 |
|
|
5473
|
+
| \`stat\` | 29,171 | 10,751 | 9,607 | 5,193 | 1,468 | 1,184 |
|
|
5474
|
+
| \`steps\` | 69,006 | 21,901 | 19,490 | 27,872 | 6,755 | 5,472 |
|
|
5475
|
+
| \`strands\` | 63,680 | 23,697 | 20,851 | 38,177 | 13,704 | 11,824 |
|
|
5476
|
+
| \`switch\` | 44,449 | 14,978 | 13,360 | 6,021 | 1,774 | 1,214 |
|
|
5477
|
+
| \`table\` | 136,948 | 40,477 | 35,255 | 62,692 | 15,338 | 12,765 |
|
|
5478
|
+
| \`tabs\` | 56,031 | 18,048 | 16,065 | 19,434 | 4,734 | 3,769 |
|
|
5479
|
+
| \`tag\` | 48,197 | 17,125 | 15,305 | 13,011 | 3,622 | 2,828 |
|
|
5480
|
+
| \`text\` | 29,286 | 10,212 | 9,014 | 7,182 | 1,494 | 1,080 |
|
|
5481
|
+
| \`textarea\` | 48,905 | 16,375 | 14,606 | 9,403 | 2,654 | 1,987 |
|
|
5482
|
+
| \`time-input\` | 195,137 | 57,471 | 50,039 | 72,814 | 16,501 | 13,617 |
|
|
5483
|
+
| \`time-picker\` | 113,325 | 34,508 | 30,385 | 46,180 | 11,554 | 9,263 |
|
|
5484
|
+
| \`timeline\` | 39,321 | 13,742 | 12,310 | 10,973 | 2,701 | 2,092 |
|
|
5485
|
+
| \`toast\` | 60,192 | 20,339 | 18,181 | 20,046 | 5,403 | 4,285 |
|
|
5486
|
+
| \`toggle\` | 51,106 | 16,791 | 14,924 | 10,851 | 3,065 | 2,347 |
|
|
5487
|
+
| \`toolbar\` | 34,496 | 12,352 | 10,991 | 7,820 | 2,144 | 1,608 |
|
|
5488
|
+
| \`tooltip\` | 62,502 | 22,262 | 19,733 | 11,290 | 3,110 | 2,459 |
|
|
5489
|
+
| \`tour\` | 95,356 | 31,307 | 27,699 | 30,161 | 7,578 | 6,116 |
|
|
5490
|
+
| \`tree\` | 77,329 | 25,058 | 22,310 | 25,871 | 6,864 | 5,687 |
|
|
5491
|
+
| \`trend\` | 32,854 | 12,575 | 11,243 | 5,487 | 1,643 | 1,319 |
|
|
5492
|
+
| \`video\` | 164,366 | 48,811 | 42,545 | 87,272 | 20,643 | 17,126 |
|
|
5493
|
+
| \`video-playlist\` | 144,942 | 44,812 | 39,350 | 58,789 | 14,041 | 11,779 |
|
|
5494
|
+
| \`virtual-list\` | 66,376 | 22,417 | 19,968 | 25,370 | 7,676 | 6,206 |
|
|
5485
5495
|
|
|
5486
5496
|
## What an install adds to \`node_modules\`
|
|
5487
5497
|
|
|
@@ -5495,11 +5505,11 @@ without its whitespace, and the sizes count each one that way.
|
|
|
5495
5505
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
5496
5506
|
|---|---|---|---|---|
|
|
5497
5507
|
| \`@fusion.dev/helix-core\` | 2,191,244 | 587 | 791,148 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
|
|
5498
|
-
| \`@fusion.dev/helix-headless\` | 23,
|
|
5508
|
+
| \`@fusion.dev/helix-headless\` | 23,981,783 | 772 | 2,534,725 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
|
|
5499
5509
|
| \`@fusion.dev/helix-icons\` | 152,695 | 21 | 49,995 | \`svgo\` |
|
|
5500
|
-
| \`@fusion.dev/helix-styles\` |
|
|
5501
|
-
| \`@fusion.dev/helix-theme\` |
|
|
5502
|
-
| \`@fusion.dev/helix\` | 24,
|
|
5510
|
+
| \`@fusion.dev/helix-styles\` | 122,338 | 6 | 0 | none |
|
|
5511
|
+
| \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
|
|
5512
|
+
| \`@fusion.dev/helix\` | 24,619,675 | 1,023 | 566,915 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
|
|
5503
5513
|
|
|
5504
5514
|
## Not measured yet
|
|
5505
5515
|
|
|
@@ -8204,7 +8214,8 @@ The theme engine measures each ink against the ground it is actually painted
|
|
|
8204
8214
|
on. The ladder records which pairs occur. For example, \`foreground\` on
|
|
8205
8215
|
\`surface-overlay\` is a real pair, and \`foreground-on-primary\` on \`surface\` is
|
|
8206
8216
|
not. A field's fill, \`well\`, is translucent, so the text in a field is measured
|
|
8207
|
-
against the well over each surface.
|
|
8217
|
+
against the well over each surface. A lit row's fill, \`hover\`, is measured the
|
|
8218
|
+
same way. See [Color](./color).
|
|
8208
8219
|
`,
|
|
8209
8220
|
svelte: `---
|
|
8210
8221
|
description: The Svelte typings, and how Svelte passes props and binds events.
|