@fusion.dev/helix-docs 0.207.2 → 0.208.1
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/browser-support.mdx +26 -6
- package/content/color.mdx +11 -1
- package/content/intent-reference.mdx +1 -1
- package/content/metrics.mdx +242 -242
- package/content/surfaces-and-separation.mdx +2 -1
- package/dist/pages.generated.js +1 -1
- package/dist/reference.d.ts +5 -1
- package/dist/reference.js +7 -2
- package/dist/sources.generated.js +282 -251
- package/package.json +11 -11
|
@@ -263,7 +263,7 @@ send keys that fast. \`detectChanges()\` renders the change before your handler
|
|
|
263
263
|
returns.
|
|
264
264
|
`,
|
|
265
265
|
'browser-support': `---
|
|
266
|
-
description: The browser features Helix uses, and the
|
|
266
|
+
description: The browser features Helix uses, and the browsers we test in.
|
|
267
267
|
order: 5
|
|
268
268
|
section: Getting started
|
|
269
269
|
title: Browser support
|
|
@@ -277,12 +277,32 @@ support in older browsers. Your browser needs every feature Helix uses.
|
|
|
277
277
|
|
|
278
278
|
## What we test
|
|
279
279
|
|
|
280
|
-
We test in Chromium, through Playwright
|
|
281
|
-
|
|
280
|
+
We test in Chromium and WebKit, through Playwright, on Linux, with the network
|
|
281
|
+
blocked.
|
|
282
282
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
283
|
+
- The DOM specs run in both.
|
|
284
|
+
- The pixel baselines are captured in Chromium only.
|
|
285
|
+
|
|
286
|
+
WebKit is the engine in Safari, and the system webview a Tauri app draws with on
|
|
287
|
+
macOS and Linux. Playwright builds its own WebKit from the same source as
|
|
288
|
+
Safari, so a difference that only Safari shows can still get past our tests.
|
|
289
|
+
|
|
290
|
+
We do not run the tests in Firefox. The rest of this page lists the browser
|
|
291
|
+
features Helix uses. If you ship Helix to Firefox or Safari and find something
|
|
292
|
+
broken, please report it.
|
|
293
|
+
|
|
294
|
+
### Known differences in WebKit
|
|
295
|
+
|
|
296
|
+
A few specs still fail in WebKit. We keep each one on a list until it is fixed.
|
|
297
|
+
|
|
298
|
+
- Checkbox Group, Radio Group, Option, Toast, and Tooltip name or describe their
|
|
299
|
+
host through \`ElementInternals\`, pointing into their own shadow root. WebKit
|
|
300
|
+
reads those references back as empty. We have not yet checked whether
|
|
301
|
+
VoiceOver still reads the name.
|
|
302
|
+
- In Virtual List, End can leave the last row below the viewport after \`gap\`
|
|
303
|
+
changes on a list that is already drawn.
|
|
304
|
+
- In the sandbox's source pane, in WebKit on macOS, one undo after an indent
|
|
305
|
+
also removes the text typed before it.
|
|
286
306
|
|
|
287
307
|
## Browser features Helix uses
|
|
288
308
|
|
|
@@ -1408,7 +1428,9 @@ choice people most often get wrong. See [Surfaces and
|
|
|
1408
1428
|
separation](./surfaces-and-separation).
|
|
1409
1429
|
|
|
1410
1430
|
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.
|
|
1431
|
+
sits on, so its color depends on the surface under the field. A row under the
|
|
1432
|
+
pointer or the keyboard, such as an option, is lit with \`hover\` the same way:
|
|
1433
|
+
8% of \`foreground\` in light and 12% in dark.
|
|
1412
1434
|
|
|
1413
1435
|
### Inks
|
|
1414
1436
|
|
|
@@ -1497,6 +1519,14 @@ solves them against the well over the page, a card, a raised surface, a dialog,
|
|
|
1497
1519
|
and a sunken surface. The report names each of these grounds as the well over
|
|
1498
1520
|
its surface, such as \`color-well over color-surface\`.
|
|
1499
1521
|
|
|
1522
|
+
Both inks are also written on a lit row and on a selected row. The engine solves
|
|
1523
|
+
them against these grounds as well:
|
|
1524
|
+
|
|
1525
|
+
- \`hover\` over each of the same five surfaces, such as \`color-hover over
|
|
1526
|
+
color-surface\`
|
|
1527
|
+
- \`primary-subtle\` and \`accent-subtle\`, the tints a selected row takes
|
|
1528
|
+
- the well over each tint, for a field on a selected row
|
|
1529
|
+
|
|
1500
1530
|
\`foreground-subtle\` is the one ink the engine does not solve. The range of
|
|
1501
1531
|
readable grays has room for one quiet ink, and \`foreground-muted\` is that ink, so
|
|
1502
1532
|
\`foreground-subtle\` stays a fixed step of the stylesheet's gray ramp and its
|
|
@@ -3587,7 +3617,7 @@ left out.
|
|
|
3587
3617
|
| Field | What it controls |
|
|
3588
3618
|
|---|---|
|
|
3589
3619
|
| \`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\` |
|
|
3620
|
+
| \`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
3621
|
|
|
3592
3622
|
The default is 4.5, the WCAG 2.1 AA figure. The European Accessibility Act
|
|
3593
3623
|
refers to WCAG 2.1 AA, so 4.5 is the figure with legal weight.
|
|
@@ -5091,7 +5121,7 @@ on its own.
|
|
|
5091
5121
|
|
|
5092
5122
|
| | Raw | Gzip | Brotli |
|
|
5093
5123
|
|---|---|---|---|
|
|
5094
|
-
| Lit and \`@fusion.dev/helix-core\` |
|
|
5124
|
+
| Lit and \`@fusion.dev/helix-core\` | 265,008 | 85,811 | 73,175 |
|
|
5095
5125
|
|
|
5096
5126
|
## Whole packages
|
|
5097
5127
|
|
|
@@ -5102,12 +5132,12 @@ either barrel. The per-component tables show what your page pays.
|
|
|
5102
5132
|
|
|
5103
5133
|
| Package | Raw | Gzip | Brotli | |
|
|
5104
5134
|
|---|---|---|---|---|
|
|
5105
|
-
| \`@fusion.dev/helix-core\` | 264,
|
|
5106
|
-
| \`@fusion.dev/helix-headless\` | 1,
|
|
5135
|
+
| \`@fusion.dev/helix-core\` | 264,217 | 85,678 | 72,898 | The element base class, mixins, decorators, and floating positioning. |
|
|
5136
|
+
| \`@fusion.dev/helix-headless\` | 1,458,046 | 408,995 | 306,896 | Every headless family. The barrel entry includes all of them. |
|
|
5107
5137
|
| \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
|
|
5108
5138
|
| \`@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,
|
|
5139
|
+
| \`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. |
|
|
5140
|
+
| \`@fusion.dev/helix\` | 2,178,982 | 564,575 | 402,682 | Every styled family. |
|
|
5111
5141
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
|
|
5112
5142
|
|
|
5113
5143
|
## Stylesheets
|
|
@@ -5120,19 +5150,19 @@ shows the whole cost of using the base layer on its own.
|
|
|
5120
5150
|
|
|
5121
5151
|
| File | Raw | Gzip | Brotli | |
|
|
5122
5152
|
|---|---|---|---|---|
|
|
5123
|
-
| \`base.css\` | 33,
|
|
5153
|
+
| \`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
5154
|
| \`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
5155
|
| \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
|
|
5126
5156
|
| \`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\` |
|
|
5157
|
+
| \`tokens.css\` | 23,030 | 2,795 | 2,319 | The 200 semantic tokens. Every styled component needs them. |
|
|
5128
5158
|
|
|
5129
5159
|
## What the numbers say
|
|
5130
5160
|
|
|
5131
|
-
**Most of your first component is the shared runtime.** The median styled family is 19,331 bytes gzipped alone, and it adds 4,
|
|
5161
|
+
**Most of your first component is the shared runtime.** The median styled family is 19,331 bytes gzipped alone, and it adds 4,366 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
5162
|
|
|
5133
|
-
Across the 113 styled components, the smallest is \`code\` at 8,561 bytes gzipped alone, and the largest is \`data-table\` at 67,
|
|
5163
|
+
Across the 113 styled components, the smallest is \`code\` at 8,561 bytes gzipped alone, and the largest is \`data-table\` at 67,606. Every family together is 564,575.
|
|
5134
5164
|
|
|
5135
|
-
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,
|
|
5165
|
+
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,995 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
5166
|
|
|
5137
5167
|
The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 18,197 bytes gzipped alone.
|
|
5138
5168
|
|
|
@@ -5146,43 +5176,43 @@ The table has no whole-library row. That row would compare how many components e
|
|
|
5146
5176
|
|
|
5147
5177
|
| Component | System | Raw | Gzip | Brotli |
|
|
5148
5178
|
|---|---|---|---|---|
|
|
5149
|
-
| \`button\` | **Helix** | 42,
|
|
5179
|
+
| \`button\` | **Helix** | 42,729 | 14,402 | 12,816 |
|
|
5150
5180
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
5151
5181
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
5152
5182
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
5153
5183
|
| | Web Awesome | 136,044 | 33,730 | 28,760 |
|
|
5154
|
-
| \`checkbox\` | **Helix** | 47,728 | 15,518 | 13,
|
|
5184
|
+
| \`checkbox\` | **Helix** | 47,728 | 15,518 | 13,864 |
|
|
5155
5185
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
5156
5186
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
5157
5187
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
5158
5188
|
| | Web Awesome | 115,251 | 28,728 | 24,420 |
|
|
5159
|
-
| \`dialog\` | **Helix** | 44,311 | 15,
|
|
5189
|
+
| \`dialog\` | **Helix** | 44,311 | 15,225 | 13,594 |
|
|
5160
5190
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
5161
5191
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
5162
5192
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
5163
5193
|
| | Web Awesome | 148,657 | 36,692 | 31,388 |
|
|
5164
|
-
| \`radio\` | **Helix** | 51,120 | 16,
|
|
5194
|
+
| \`radio\` | **Helix** | 51,120 | 16,281 | 14,513 |
|
|
5165
5195
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
5166
5196
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
5167
5197
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
5168
5198
|
| | Web Awesome | 112,026 | 27,416 | 23,128 |
|
|
5169
|
-
| \`switch\` | **Helix** | 44,449 | 14,978 | 13,
|
|
5199
|
+
| \`switch\` | **Helix** | 44,449 | 14,978 | 13,362 |
|
|
5170
5200
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
5171
5201
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
5172
5202
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
5173
5203
|
| | Web Awesome | 45,876 | 15,003 | 13,475 |
|
|
5174
|
-
| \`tabs\` | **Helix** | 56,031 | 18,048 | 16,
|
|
5204
|
+
| \`tabs\` | **Helix** | 56,031 | 18,048 | 16,068 |
|
|
5175
5205
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
5176
5206
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
5177
5207
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
5178
5208
|
| | Web Awesome | 153,439 | 37,030 | 31,737 |
|
|
5179
|
-
| \`tooltip\` | **Helix** | 62,502 | 22,262 | 19,
|
|
5209
|
+
| \`tooltip\` | **Helix** | 62,502 | 22,262 | 19,723 |
|
|
5180
5210
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
5181
5211
|
| | Material Web | | not shipped | |
|
|
5182
5212
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
5183
5213
|
| | Web Awesome | 70,568 | 24,005 | 21,107 |
|
|
5184
5214
|
|
|
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,
|
|
5215
|
+
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
5216
|
|
|
5187
5217
|
Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
|
|
5188
5218
|
|
|
@@ -5256,112 +5286,112 @@ Structure, accessibility, state, and form participation. It has no presentation
|
|
|
5256
5286
|
|
|
5257
5287
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
5258
5288
|
|---|---|---|---|---|---|---|
|
|
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,967 | 30,
|
|
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,
|
|
5269
|
-
| \`button-group\` | 28,214 | 10,617 | 9,
|
|
5270
|
-
| \`callout\` | 36,284 | 13,
|
|
5271
|
-
| \`canvas\` | 109,
|
|
5272
|
-
| \`card\` | 24,397 | 9,
|
|
5273
|
-
| \`carousel\` | 45,
|
|
5274
|
-
| \`chat\` |
|
|
5275
|
-
| \`checkbox\` | 41,242 | 14,
|
|
5276
|
-
| \`checkbox-group\` | 48,465 | 15,944 | 14,
|
|
5277
|
-
| \`code\` | 20,869 | 8,248 | 7,311 | 138 |
|
|
5278
|
-
| \`code-block\` | 104,774 | 35,632 | 31,
|
|
5279
|
-
| \`color-input\` | 143,744 | 45,
|
|
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\` |
|
|
5285
|
-
| \`date-input\` | 143,049 | 45,174 | 39,
|
|
5286
|
-
| \`date-picker\` | 63,093 | 21,512 | 19,
|
|
5287
|
-
| \`description-list\` | 23,472 | 8,993 |
|
|
5288
|
-
| \`dialog\` | 39,175 | 13,
|
|
5289
|
-
| \`divider\` | 23,564 | 9,144 | 8,
|
|
5290
|
-
| \`donut-chart\` | 92,673 | 32,
|
|
5291
|
-
| \`drawer\` | 43,812 | 15,
|
|
5292
|
-
| \`drilldown\` | 43,527 | 15,
|
|
5293
|
-
| \`empty\` | 25,007 | 9,
|
|
5294
|
-
| \`file-input\` | 59,118 | 20,550 | 18,
|
|
5295
|
-
| \`filter-input\` | 99,578 | 33,494 | 29,
|
|
5296
|
-
| \`format-date\` | 31,209 | 11,
|
|
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,591 | 5,236 | 1,
|
|
5301
|
-
| \`image\` | 26,373 | 9,844 | 8,
|
|
5302
|
-
| \`input\` | 47,049 | 16,178 | 14,
|
|
5303
|
-
| \`kbd\` | 28,084 | 10,789 | 9,
|
|
5304
|
-
| \`legend\` | 36,396 | 13,
|
|
5305
|
-
| \`lightbox\` | 57,138 | 19,
|
|
5306
|
-
| \`line-chart\` | 102,350 | 35,823 | 31,
|
|
5307
|
-
| \`list\` | 62,949 | 21,
|
|
5308
|
-
| \`listbox\` | 78,070 | 25,948 | 22,931 | 15,605 | 4,
|
|
5309
|
-
| \`loader\` | 27,341 | 10,
|
|
5310
|
-
| \`log\` | 80,937 | 27,
|
|
5311
|
-
| \`map\` | 81,046 | 25,212 | 22,
|
|
5312
|
-
| \`megamenu\` | 61,165 | 22,
|
|
5313
|
-
| \`menu\` | 98,510 | 32,960 | 29,081 | 30,262 | 7,
|
|
5314
|
-
| \`meter\` | 32,921 | 12,484 | 11,
|
|
5315
|
-
| \`motion-toggle\` | 26,353 | 10,
|
|
5316
|
-
| \`navigation\` | 33,861 | 12,731 | 11,
|
|
5317
|
-
| \`notifications\` | 59,
|
|
5318
|
-
| \`number-input\` | 57,629 | 19,358 | 17,
|
|
5319
|
-
| \`object-inspector\` | 115,897 | 39,008 | 34,
|
|
5320
|
-
| \`option\` | 27,049 | 9,
|
|
5321
|
-
| \`outline\` | 34,
|
|
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,118 | 17,002 | 6,
|
|
5327
|
-
| \`quote\` | 23,088 | 9,
|
|
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,434 | 10,
|
|
5332
|
-
| \`select\` | 116,719 | 38,717 | 33,
|
|
5333
|
-
| \`skeleton\` | 22,900 | 8,871 | 7,
|
|
5334
|
-
| \`skip-link\` | 24,547 | 9,608 | 8,
|
|
5335
|
-
| \`slider\` | 54,642 | 18,411 | 16,
|
|
5336
|
-
| \`sparkline\` | 49,258 | 17,982 | 16,
|
|
5337
|
-
| \`spatial-bar-chart\` | 105,167 | 37,122 | 32,
|
|
5338
|
-
| \`spatial-heatmap\` | 117,089 | 39,
|
|
5339
|
-
| \`spatial-ribbon-chart\` | 104,288 | 36,728 | 32,
|
|
5340
|
-
| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,
|
|
5341
|
-
| \`spatial-surface-chart\` | 105,443 | 37,
|
|
5342
|
-
| \`spatial-treemap\` | 106,561 | 37,910 | 33,
|
|
5343
|
-
| \`speed-dial\` | 69,618 | 25,069 | 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,
|
|
5349
|
-
| \`tabs\` | 47,080 | 16,
|
|
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,
|
|
5355
|
-
| \`toast\` | 52,298 | 18,497 | 16,
|
|
5356
|
-
| \`toggle\` | 46,246 | 15,541 | 13,
|
|
5357
|
-
| \`toolbar\` | 31,817 | 11,859 | 10,566 | 5,156 | 1,
|
|
5358
|
-
| \`tooltip\` | 59,698 | 21,
|
|
5359
|
-
| \`tour\` | 85,264 | 29,314 | 25,
|
|
5360
|
-
| \`tree\` | 68,641 | 23,150 | 20,
|
|
5361
|
-
| \`trend\` | 30,937 | 12,
|
|
5362
|
-
| \`video\` | 143,863 | 45,
|
|
5363
|
-
| \`video-playlist\` | 128,994 | 41,833 | 36,
|
|
5364
|
-
| \`virtual-list\` | 64,382 | 21,913 | 19,
|
|
5289
|
+
| \`accordion\` | 32,671 | 12,095 | 10,732 | 5,377 | 1,563 | 1,217 |
|
|
5290
|
+
| \`announcement\` | 37,661 | 13,706 | 12,236 | 4,700 | 1,377 | 933 |
|
|
5291
|
+
| \`app-header\` | 33,168 | 12,242 | 10,880 | 5,900 | 1,765 | 1,247 |
|
|
5292
|
+
| \`area-chart\` | 99,355 | 34,967 | 30,847 | 14,417 | 4,435 | 3,591 |
|
|
5293
|
+
| \`avatar\` | 31,887 | 12,152 | 10,870 | 3,999 | 1,244 | 863 |
|
|
5294
|
+
| \`badge\` | 28,118 | 10,943 | 9,778 | 2,960 | 892 | 772 |
|
|
5295
|
+
| \`bar-chart\` | 107,369 | 37,644 | 33,296 | 21,901 | 6,897 | 5,707 |
|
|
5296
|
+
| \`blockquote\` | 24,679 | 9,638 | 8,541 | 2,400 | 888 | 754 |
|
|
5297
|
+
| \`breadcrumbs\` | 37,419 | 14,329 | 12,787 | 7,381 | 2,409 | 1,945 |
|
|
5298
|
+
| \`button\` | 36,221 | 12,969 | 11,566 | 5,127 | 1,529 | 1,084 |
|
|
5299
|
+
| \`button-group\` | 28,214 | 10,617 | 9,418 | 4,923 | 1,515 | 1,204 |
|
|
5300
|
+
| \`callout\` | 36,284 | 13,987 | 12,431 | 2,884 | 964 | 662 |
|
|
5301
|
+
| \`canvas\` | 109,988 | 35,327 | 30,867 | 68,989 | 21,044 | 17,591 |
|
|
5302
|
+
| \`card\` | 24,397 | 9,311 | 8,259 | 2,090 | 619 | 454 |
|
|
5303
|
+
| \`carousel\` | 45,167 | 16,067 | 14,393 | 15,330 | 4,234 | 3,238 |
|
|
5304
|
+
| \`chat\` | 81,069 | 27,036 | 23,922 | 27,682 | 8,066 | 6,458 |
|
|
5305
|
+
| \`checkbox\` | 41,242 | 14,016 | 12,511 | 3,107 | 956 | 621 |
|
|
5306
|
+
| \`checkbox-group\` | 48,465 | 15,944 | 14,238 | 8,321 | 2,359 | 1,719 |
|
|
5307
|
+
| \`code\` | 20,869 | 8,248 | 7,311 | 138 | 68 | 106 |
|
|
5308
|
+
| \`code-block\` | 104,774 | 35,632 | 31,448 | 37,349 | 10,781 | 8,882 |
|
|
5309
|
+
| \`color-input\` | 143,744 | 45,826 | 39,930 | 55,780 | 14,210 | 11,791 |
|
|
5310
|
+
| \`color-picker\` | 105,363 | 33,633 | 29,439 | 47,900 | 12,700 | 10,486 |
|
|
5311
|
+
| \`combobox\` | 133,766 | 42,655 | 37,502 | 35,968 | 9,137 | 7,196 |
|
|
5312
|
+
| \`command\` | 101,170 | 32,142 | 28,248 | 30,351 | 8,162 | 6,451 |
|
|
5313
|
+
| \`copy-button\` | 82,225 | 28,295 | 25,025 | 18,756 | 5,080 | 4,094 |
|
|
5314
|
+
| \`data-table\` | 202,025 | 62,201 | 53,125 | 89,966 | 24,057 | 19,128 |
|
|
5315
|
+
| \`date-input\` | 143,049 | 45,174 | 39,742 | 38,666 | 9,518 | 7,653 |
|
|
5316
|
+
| \`date-picker\` | 63,093 | 21,512 | 19,285 | 20,720 | 5,657 | 4,461 |
|
|
5317
|
+
| \`description-list\` | 23,472 | 8,993 | 7,982 | 1,565 | 504 | 351 |
|
|
5318
|
+
| \`dialog\` | 39,175 | 13,971 | 12,446 | 5,948 | 1,761 | 1,202 |
|
|
5319
|
+
| \`divider\` | 23,564 | 9,144 | 8,084 | 1,414 | 503 | 381 |
|
|
5320
|
+
| \`donut-chart\` | 92,673 | 32,268 | 28,536 | 14,717 | 4,503 | 3,685 |
|
|
5321
|
+
| \`drawer\` | 43,812 | 15,481 | 13,858 | 7,798 | 2,315 | 1,785 |
|
|
5322
|
+
| \`drilldown\` | 43,527 | 15,249 | 13,575 | 9,709 | 2,689 | 2,036 |
|
|
5323
|
+
| \`empty\` | 25,007 | 9,578 | 8,499 | 1,976 | 631 | 433 |
|
|
5324
|
+
| \`file-input\` | 59,118 | 20,550 | 18,263 | 13,152 | 4,125 | 3,216 |
|
|
5325
|
+
| \`filter-input\` | 99,578 | 33,494 | 29,683 | 21,569 | 6,163 | 4,922 |
|
|
5326
|
+
| \`format-date\` | 31,209 | 11,674 | 10,418 | 4,474 | 1,269 | 1,013 |
|
|
5327
|
+
| \`graph\` | 76,986 | 25,237 | 22,347 | 23,180 | 6,770 | 5,506 |
|
|
5328
|
+
| \`heatmap\` | 101,735 | 34,695 | 30,630 | 19,071 | 5,589 | 4,451 |
|
|
5329
|
+
| \`icon\` | 83,516 | 28,587 | 24,464 | 58,618 | 20,089 | 16,093 |
|
|
5330
|
+
| \`icon-button\` | 36,332 | 13,001 | 11,591 | 5,236 | 1,571 | 1,099 |
|
|
5331
|
+
| \`image\` | 26,373 | 9,844 | 8,745 | 3,845 | 1,144 | 789 |
|
|
5332
|
+
| \`input\` | 47,049 | 16,178 | 14,339 | 7,005 | 2,238 | 1,612 |
|
|
5333
|
+
| \`kbd\` | 28,084 | 10,789 | 9,553 | 3,518 | 1,108 | 857 |
|
|
5334
|
+
| \`legend\` | 36,396 | 13,369 | 11,949 | 2,955 | 983 | 760 |
|
|
5335
|
+
| \`lightbox\` | 57,138 | 19,382 | 17,257 | 16,760 | 4,615 | 3,552 |
|
|
5336
|
+
| \`line-chart\` | 102,350 | 35,823 | 31,650 | 16,812 | 5,051 | 4,182 |
|
|
5337
|
+
| \`list\` | 62,949 | 21,721 | 19,372 | 15,258 | 4,388 | 3,488 |
|
|
5338
|
+
| \`listbox\` | 78,070 | 25,948 | 22,931 | 15,605 | 4,570 | 3,443 |
|
|
5339
|
+
| \`loader\` | 27,341 | 10,451 | 9,312 | 2,785 | 940 | 657 |
|
|
5340
|
+
| \`log\` | 80,937 | 27,697 | 24,580 | 37,582 | 11,605 | 9,859 |
|
|
5341
|
+
| \`map\` | 81,046 | 25,212 | 22,069 | 37,496 | 10,234 | 8,125 |
|
|
5342
|
+
| \`megamenu\` | 61,165 | 22,169 | 19,590 | 8,723 | 2,440 | 1,739 |
|
|
5343
|
+
| \`menu\` | 98,510 | 32,960 | 29,081 | 30,262 | 7,986 | 6,490 |
|
|
5344
|
+
| \`meter\` | 32,921 | 12,484 | 11,132 | 4,980 | 1,457 | 1,193 |
|
|
5345
|
+
| \`motion-toggle\` | 26,353 | 10,248 | 9,109 | 1,426 | 509 | 385 |
|
|
5346
|
+
| \`navigation\` | 33,861 | 12,731 | 11,315 | 3,364 | 1,168 | 899 |
|
|
5347
|
+
| \`notifications\` | 59,565 | 20,343 | 18,160 | 18,280 | 5,028 | 4,056 |
|
|
5348
|
+
| \`number-input\` | 57,629 | 19,358 | 17,235 | 13,579 | 3,624 | 2,757 |
|
|
5349
|
+
| \`object-inspector\` | 115,897 | 39,008 | 34,355 | 36,018 | 10,393 | 8,285 |
|
|
5350
|
+
| \`option\` | 27,049 | 9,970 | 8,859 | 4,522 | 1,208 | 864 |
|
|
5351
|
+
| \`outline\` | 34,611 | 12,985 | 11,535 | 7,888 | 2,549 | 1,930 |
|
|
5352
|
+
| \`pagination\` | 138,030 | 44,303 | 38,421 | 45,681 | 11,904 | 9,500 |
|
|
5353
|
+
| \`pin-input\` | 48,848 | 17,044 | 15,218 | 7,207 | 2,382 | 1,701 |
|
|
5354
|
+
| \`popover\` | 64,882 | 23,350 | 20,626 | 6,460 | 1,852 | 1,345 |
|
|
5355
|
+
| \`progress\` | 29,235 | 11,153 | 9,999 | 3,006 | 939 | 761 |
|
|
5356
|
+
| \`qr-code\` | 43,669 | 17,003 | 15,118 | 17,002 | 6,284 | 5,346 |
|
|
5357
|
+
| \`quote\` | 23,088 | 9,112 | 8,040 | 1,209 | 488 | 387 |
|
|
5358
|
+
| \`radio\` | 43,333 | 14,777 | 13,184 | 3,815 | 1,212 | 927 |
|
|
5359
|
+
| \`rating\` | 51,593 | 17,779 | 15,868 | 8,057 | 2,439 | 1,810 |
|
|
5360
|
+
| \`scatter-chart\` | 98,654 | 34,303 | 30,255 | 20,338 | 6,384 | 5,082 |
|
|
5361
|
+
| \`scroll-area\` | 31,294 | 11,434 | 10,149 | 8,518 | 2,593 | 1,918 |
|
|
5362
|
+
| \`select\` | 116,719 | 38,717 | 33,936 | 26,155 | 7,162 | 5,538 |
|
|
5363
|
+
| \`skeleton\` | 22,900 | 8,871 | 7,876 | 991 | 380 | 238 |
|
|
5364
|
+
| \`skip-link\` | 24,547 | 9,608 | 8,524 | 1,223 | 462 | 394 |
|
|
5365
|
+
| \`slider\` | 54,642 | 18,411 | 16,524 | 13,623 | 3,852 | 3,036 |
|
|
5366
|
+
| \`sparkline\` | 49,258 | 17,982 | 16,066 | 5,982 | 2,080 | 1,585 |
|
|
5367
|
+
| \`spatial-bar-chart\` | 105,167 | 37,122 | 32,678 | 19,854 | 6,512 | 5,245 |
|
|
5368
|
+
| \`spatial-heatmap\` | 117,089 | 39,972 | 35,099 | 31,736 | 9,634 | 7,832 |
|
|
5369
|
+
| \`spatial-ribbon-chart\` | 104,288 | 36,728 | 32,377 | 20,791 | 6,921 | 5,711 |
|
|
5370
|
+
| \`spatial-scatter-chart\` | 102,521 | 35,980 | 31,686 | 19,085 | 6,282 | 5,029 |
|
|
5371
|
+
| \`spatial-surface-chart\` | 105,443 | 37,265 | 32,856 | 21,949 | 7,457 | 6,132 |
|
|
5372
|
+
| \`spatial-treemap\` | 106,561 | 37,910 | 33,342 | 21,370 | 7,340 | 5,906 |
|
|
5373
|
+
| \`speed-dial\` | 69,618 | 25,069 | 22,188 | 10,934 | 2,960 | 2,303 |
|
|
5374
|
+
| \`splitter\` | 45,071 | 15,639 | 13,983 | 14,506 | 3,861 | 3,097 |
|
|
5375
|
+
| \`stat\` | 26,285 | 10,056 | 8,959 | 2,322 | 758 | 663 |
|
|
5376
|
+
| \`steps\` | 54,926 | 19,122 | 17,008 | 13,804 | 3,877 | 3,151 |
|
|
5377
|
+
| \`switch\` | 40,096 | 13,832 | 12,333 | 1,679 | 617 | 440 |
|
|
5378
|
+
| \`table\` | 119,434 | 37,421 | 32,554 | 45,149 | 12,313 | 9,988 |
|
|
5379
|
+
| \`tabs\` | 47,080 | 16,201 | 14,414 | 10,491 | 2,858 | 2,153 |
|
|
5380
|
+
| \`tag\` | 43,623 | 15,992 | 14,300 | 8,450 | 2,507 | 1,843 |
|
|
5381
|
+
| \`textarea\` | 44,973 | 15,361 | 13,719 | 5,489 | 1,620 | 1,217 |
|
|
5382
|
+
| \`time-input\` | 170,882 | 53,314 | 46,306 | 48,574 | 12,337 | 9,817 |
|
|
5383
|
+
| \`time-picker\` | 101,126 | 32,099 | 28,232 | 33,987 | 9,210 | 7,320 |
|
|
5384
|
+
| \`timeline\` | 32,429 | 12,280 | 11,015 | 4,086 | 1,190 | 870 |
|
|
5385
|
+
| \`toast\` | 52,298 | 18,497 | 16,512 | 12,164 | 3,516 | 2,702 |
|
|
5386
|
+
| \`toggle\` | 46,246 | 15,541 | 13,887 | 6,005 | 1,797 | 1,392 |
|
|
5387
|
+
| \`toolbar\` | 31,817 | 11,859 | 10,566 | 5,156 | 1,635 | 1,183 |
|
|
5388
|
+
| \`tooltip\` | 59,698 | 21,530 | 19,098 | 8,504 | 2,355 | 1,754 |
|
|
5389
|
+
| \`tour\` | 85,264 | 29,314 | 25,877 | 20,091 | 5,516 | 4,361 |
|
|
5390
|
+
| \`tree\` | 68,641 | 23,150 | 20,581 | 17,198 | 4,915 | 3,943 |
|
|
5391
|
+
| \`trend\` | 30,937 | 12,023 | 10,748 | 3,590 | 1,095 | 855 |
|
|
5392
|
+
| \`video\` | 143,863 | 45,087 | 39,331 | 66,787 | 16,899 | 14,022 |
|
|
5393
|
+
| \`video-playlist\` | 128,994 | 41,833 | 36,735 | 42,860 | 11,196 | 9,182 |
|
|
5394
|
+
| \`virtual-list\` | 64,382 | 21,913 | 19,490 | 23,393 | 7,161 | 5,755 |
|
|
5365
5395
|
|
|
5366
5396
|
### Styled tier
|
|
5367
5397
|
|
|
@@ -5369,119 +5399,119 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
|
|
|
5369
5399
|
|
|
5370
5400
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
5371
5401
|
|---|---|---|---|---|---|---|
|
|
5372
|
-
| \`accordion\` | 36,104 | 12,942 | 11,
|
|
5373
|
-
| \`announcement\` | 42,276 | 14,
|
|
5374
|
-
| \`app-header\` | 38,326 | 13,450 | 11,
|
|
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,671 | 35,
|
|
5380
|
-
| \`blockquote\` | 26,905 | 10,186 | 9,
|
|
5381
|
-
| \`breadcrumbs\` | 44,356 | 15,535 | 13,
|
|
5382
|
-
| \`button\` | 42,
|
|
5383
|
-
| \`button-group\` | 31,709 | 11,295 | 10,
|
|
5384
|
-
| \`callout\` | 40,077 | 14,932 | 13,
|
|
5385
|
-
| \`canvas\` | 131,
|
|
5386
|
-
| \`card\` | 28,297 | 10,317 | 9,
|
|
5387
|
-
| \`carousel\` | 55,
|
|
5388
|
-
| \`chat\` | 96,
|
|
5389
|
-
| \`checkbox\` | 47,728 | 15,518 | 13,
|
|
5390
|
-
| \`checkbox-group\` | 55,688 | 17,587 | 15,
|
|
5391
|
-
| \`code\` | 21,726 | 8,561 | 7,
|
|
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,467 | 26,
|
|
5398
|
-
| \`data-table\` | 232,
|
|
5399
|
-
| \`date-input\` | 164,353 | 48,935 |
|
|
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,772 | 8,
|
|
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,
|
|
5411
|
-
| \`format-date\` | 31,463 | 11,
|
|
5412
|
-
| \`graph\` | 92,
|
|
5413
|
-
| \`grid\` | 27,762 | 10,137 | 9,
|
|
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,
|
|
5418
|
-
| \`input\` | 51,304 | 17,264 | 15,
|
|
5419
|
-
| \`kbd\` | 30,078 | 11,329 | 10,
|
|
5420
|
-
| \`legend\` | 41,634 | 14,
|
|
5421
|
-
| \`lightbox\` | 63,432 | 20,
|
|
5422
|
-
| \`line-chart\` | 113,713 | 38,278 | 33,
|
|
5423
|
-
| \`list\` | 69,295 | 23,266 | 20,
|
|
5424
|
-
| \`listbox\` | 82,511 | 27,062 | 23,
|
|
5425
|
-
| \`loader\` | 30,222 | 11,214 | 10,
|
|
5426
|
-
| \`log\` | 92,
|
|
5427
|
-
| \`map\` | 114,692 | 30,616 | 26,
|
|
5428
|
-
| \`megamenu\` | 66,134 | 23,
|
|
5429
|
-
| \`menu\` | 109,435 | 35,106 | 30,
|
|
5430
|
-
| \`meter\` | 39,093 | 13,830 | 12,
|
|
5431
|
-
| \`motion-toggle\` | 27,988 | 10,
|
|
5432
|
-
| \`navigation\` | 37,585 | 13,566 | 12,045 | 7,077 | 2,
|
|
5433
|
-
| \`notifications\` | 73,
|
|
5434
|
-
| \`number-input\` | 62,610 | 20,544 | 18,
|
|
5435
|
-
| \`object-inspector\` | 132,306 | 41,
|
|
5436
|
-
| \`option\` | 30,
|
|
5437
|
-
| \`orb\` | 36,885 | 14,019 | 12,
|
|
5438
|
-
| \`outline\` | 38,
|
|
5439
|
-
| \`pagination\` |
|
|
5440
|
-
| \`pin-input\` | 52,228 | 17,955 | 16,
|
|
5441
|
-
| \`popover\` | 68,034 | 24,118 | 21,309 | 9,594 | 2,
|
|
5442
|
-
| \`progress\` | 36,415 | 12,815 | 11,
|
|
5443
|
-
| \`qr-code\` | 45,270 | 17,490 | 15,
|
|
5444
|
-
| \`quote\` | 23,646 | 9,
|
|
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,384 | 11,
|
|
5450
|
-
| \`select\` | 125,846 | 40,
|
|
5451
|
-
| \`skeleton\` | 26,848 | 9,947 | 8,
|
|
5452
|
-
| \`skip-link\` | 26,118 | 10,115 | 8,
|
|
5453
|
-
| \`slider\` | 69,605 | 20,729 | 18,
|
|
5454
|
-
| \`sparkline\` | 54,716 | 19,331 | 17,
|
|
5455
|
-
| \`spatial-bar-chart\` | 114,232 | 39,173 | 34,
|
|
5456
|
-
| \`spatial-heatmap\` | 126,828 | 42,153 | 37,
|
|
5457
|
-
| \`spatial-ribbon-chart\` | 113,204 | 38,749 | 34,
|
|
5458
|
-
| \`spatial-scatter-chart\` | 111,501 | 37,967 | 33,
|
|
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,
|
|
5468
|
-
| \`tabs\` | 56,031 | 18,048 | 16,
|
|
5469
|
-
| \`tag\` | 48,197 | 17,
|
|
5470
|
-
| \`text\` | 29,286 | 10,213 | 9,
|
|
5471
|
-
| \`textarea\` | 48,905 | 16,
|
|
5472
|
-
| \`time-input\` | 195,
|
|
5473
|
-
| \`time-picker\` | 113,
|
|
5474
|
-
| \`timeline\` | 39,321 | 13,
|
|
5475
|
-
| \`toast\` | 60,192 | 20,339 | 18,
|
|
5476
|
-
| \`toggle\` | 51,106 | 16,
|
|
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,
|
|
5483
|
-
| \`video-playlist\` | 144,942 | 44,812 | 39,
|
|
5484
|
-
| \`virtual-list\` | 66,376 | 22,
|
|
5402
|
+
| \`accordion\` | 36,104 | 12,942 | 11,494 | 8,794 | 2,422 | 1,890 |
|
|
5403
|
+
| \`announcement\` | 42,276 | 14,774 | 13,216 | 9,296 | 2,447 | 1,882 |
|
|
5404
|
+
| \`app-header\` | 38,326 | 13,450 | 11,973 | 11,045 | 2,963 | 2,310 |
|
|
5405
|
+
| \`area-chart\` | 107,559 | 36,866 | 32,511 | 22,602 | 6,323 | 5,276 |
|
|
5406
|
+
| \`aura\` | 59,567 | 20,253 | 17,956 | 31,767 | 9,657 | 8,191 |
|
|
5407
|
+
| \`avatar\` | 34,890 | 12,911 | 11,563 | 6,987 | 1,977 | 1,645 |
|
|
5408
|
+
| \`badge\` | 33,626 | 12,190 | 10,866 | 8,458 | 2,162 | 1,717 |
|
|
5409
|
+
| \`bar-chart\` | 122,404 | 40,671 | 35,922 | 36,918 | 9,901 | 8,245 |
|
|
5410
|
+
| \`blockquote\` | 26,905 | 10,186 | 9,000 | 4,610 | 1,410 | 1,197 |
|
|
5411
|
+
| \`breadcrumbs\` | 44,356 | 15,535 | 13,940 | 14,306 | 3,647 | 3,036 |
|
|
5412
|
+
| \`button\` | 42,729 | 14,402 | 12,816 | 11,617 | 2,943 | 2,248 |
|
|
5413
|
+
| \`button-group\` | 31,709 | 11,295 | 10,031 | 8,408 | 2,217 | 1,623 |
|
|
5414
|
+
| \`callout\` | 40,077 | 14,932 | 13,276 | 6,659 | 1,926 | 1,450 |
|
|
5415
|
+
| \`canvas\` | 131,027 | 39,298 | 34,385 | 89,671 | 24,901 | 20,865 |
|
|
5416
|
+
| \`card\` | 28,297 | 10,317 | 9,175 | 5,976 | 1,646 | 1,192 |
|
|
5417
|
+
| \`carousel\` | 55,653 | 17,867 | 16,011 | 25,801 | 6,071 | 4,882 |
|
|
5418
|
+
| \`chat\` | 96,362 | 29,759 | 26,398 | 42,968 | 10,845 | 8,877 |
|
|
5419
|
+
| \`checkbox\` | 47,728 | 15,518 | 13,864 | 9,579 | 2,487 | 2,023 |
|
|
5420
|
+
| \`checkbox-group\` | 55,688 | 17,587 | 15,650 | 15,535 | 3,998 | 3,141 |
|
|
5421
|
+
| \`code\` | 21,726 | 8,561 | 7,605 | 976 | 387 | 288 |
|
|
5422
|
+
| \`code-block\` | 129,247 | 39,457 | 34,868 | 61,803 | 14,550 | 12,162 |
|
|
5423
|
+
| \`color-input\` | 186,215 | 52,107 | 45,496 | 98,238 | 20,729 | 17,288 |
|
|
5424
|
+
| \`color-picker\` | 142,389 | 39,199 | 34,442 | 84,910 | 18,384 | 15,218 |
|
|
5425
|
+
| \`combobox\` | 149,120 | 45,610 | 40,084 | 51,305 | 12,020 | 9,752 |
|
|
5426
|
+
| \`command\` | 112,469 | 34,490 | 30,347 | 41,644 | 10,571 | 8,606 |
|
|
5427
|
+
| \`copy-button\` | 94,256 | 30,467 | 26,950 | 30,769 | 7,266 | 5,817 |
|
|
5428
|
+
| \`data-table\` | 232,690 | 67,606 | 57,944 | 120,614 | 29,571 | 23,964 |
|
|
5429
|
+
| \`date-input\` | 164,353 | 48,935 | 42,969 | 59,950 | 13,135 | 10,915 |
|
|
5430
|
+
| \`date-picker\` | 71,139 | 22,979 | 20,555 | 28,748 | 7,131 | 5,617 |
|
|
5431
|
+
| \`description-list\` | 26,427 | 9,731 | 8,675 | 4,508 | 1,267 | 971 |
|
|
5432
|
+
| \`dialog\` | 44,311 | 15,225 | 13,594 | 11,064 | 3,043 | 2,451 |
|
|
5433
|
+
| \`divider\` | 25,863 | 9,772 | 8,637 | 3,697 | 1,116 | 942 |
|
|
5434
|
+
| \`donut-chart\` | 102,652 | 34,419 | 30,424 | 24,673 | 6,680 | 5,535 |
|
|
5435
|
+
| \`drawer\` | 49,642 | 16,870 | 15,055 | 13,612 | 3,740 | 2,936 |
|
|
5436
|
+
| \`drilldown\` | 49,204 | 16,541 | 14,754 | 15,375 | 4,009 | 3,115 |
|
|
5437
|
+
| \`empty\` | 26,316 | 10,056 | 8,903 | 3,267 | 1,086 | 868 |
|
|
5438
|
+
| \`file-input\` | 70,648 | 22,941 | 20,391 | 24,668 | 6,538 | 5,412 |
|
|
5439
|
+
| \`filter-input\` | 110,412 | 35,679 | 31,658 | 32,396 | 8,385 | 6,773 |
|
|
5440
|
+
| \`flex\` | 26,312 | 9,424 | 8,374 | 4,761 | 1,036 | 821 |
|
|
5441
|
+
| \`format-date\` | 31,463 | 11,789 | 10,583 | 4,712 | 1,380 | 1,031 |
|
|
5442
|
+
| \`graph\` | 92,818 | 27,924 | 24,702 | 38,992 | 9,573 | 7,748 |
|
|
5443
|
+
| \`grid\` | 27,762 | 10,137 | 9,023 | 5,655 | 1,454 | 1,216 |
|
|
5444
|
+
| \`heatmap\` | 110,057 | 36,548 | 32,255 | 27,373 | 7,432 | 6,176 |
|
|
5445
|
+
| \`icon\` | 85,551 | 29,192 | 25,026 | 60,473 | 20,655 | 16,547 |
|
|
5446
|
+
| \`icon-button\` | 44,066 | 14,349 | 12,786 | 12,955 | 2,913 | 2,319 |
|
|
5447
|
+
| \`image\` | 27,760 | 10,306 | 9,131 | 5,216 | 1,618 | 1,266 |
|
|
5448
|
+
| \`input\` | 51,304 | 17,264 | 15,288 | 11,243 | 3,351 | 2,489 |
|
|
5449
|
+
| \`kbd\` | 30,078 | 11,329 | 10,047 | 5,494 | 1,664 | 1,208 |
|
|
5450
|
+
| \`legend\` | 41,634 | 14,661 | 13,023 | 8,065 | 2,240 | 1,737 |
|
|
5451
|
+
| \`lightbox\` | 63,432 | 20,711 | 18,428 | 23,035 | 5,920 | 4,697 |
|
|
5452
|
+
| \`line-chart\` | 113,713 | 38,278 | 33,800 | 28,159 | 7,543 | 6,253 |
|
|
5453
|
+
| \`list\` | 69,295 | 23,266 | 20,793 | 21,585 | 5,923 | 4,803 |
|
|
5454
|
+
| \`listbox\` | 82,511 | 27,062 | 23,942 | 20,034 | 5,671 | 4,387 |
|
|
5455
|
+
| \`loader\` | 30,222 | 11,214 | 10,002 | 5,652 | 1,708 | 1,342 |
|
|
5456
|
+
| \`log\` | 92,717 | 29,992 | 26,631 | 49,350 | 13,833 | 11,891 |
|
|
5457
|
+
| \`map\` | 114,692 | 30,616 | 26,827 | 71,126 | 15,712 | 13,000 |
|
|
5458
|
+
| \`megamenu\` | 66,134 | 23,308 | 20,618 | 13,673 | 3,606 | 2,736 |
|
|
5459
|
+
| \`menu\` | 109,435 | 35,106 | 30,931 | 41,177 | 10,169 | 8,340 |
|
|
5460
|
+
| \`meter\` | 39,093 | 13,830 | 12,405 | 11,136 | 2,819 | 2,365 |
|
|
5461
|
+
| \`motion-toggle\` | 27,988 | 10,725 | 9,532 | 3,044 | 986 | 740 |
|
|
5462
|
+
| \`navigation\` | 37,585 | 13,566 | 12,045 | 7,077 | 2,007 | 1,606 |
|
|
5463
|
+
| \`notifications\` | 73,053 | 22,902 | 20,452 | 31,757 | 7,626 | 6,300 |
|
|
5464
|
+
| \`number-input\` | 62,610 | 20,544 | 18,304 | 18,544 | 4,831 | 3,761 |
|
|
5465
|
+
| \`object-inspector\` | 132,306 | 41,847 | 36,810 | 52,407 | 13,134 | 10,871 |
|
|
5466
|
+
| \`option\` | 30,122 | 10,930 | 9,729 | 7,585 | 2,154 | 1,712 |
|
|
5467
|
+
| \`orb\` | 36,885 | 14,019 | 12,487 | 10,014 | 3,686 | 3,126 |
|
|
5468
|
+
| \`outline\` | 38,845 | 13,847 | 12,314 | 12,105 | 3,427 | 2,667 |
|
|
5469
|
+
| \`pagination\` | 154,907 | 47,576 | 41,367 | 62,541 | 15,108 | 12,386 |
|
|
5470
|
+
| \`pin-input\` | 52,228 | 17,955 | 16,035 | 10,570 | 3,302 | 2,568 |
|
|
5471
|
+
| \`popover\` | 68,034 | 24,118 | 21,309 | 9,594 | 2,641 | 2,021 |
|
|
5472
|
+
| \`progress\` | 36,415 | 12,815 | 11,459 | 10,169 | 2,608 | 2,255 |
|
|
5473
|
+
| \`qr-code\` | 45,270 | 17,490 | 15,562 | 18,586 | 6,783 | 5,723 |
|
|
5474
|
+
| \`quote\` | 23,646 | 9,303 | 8,221 | 1,750 | 697 | 611 |
|
|
5475
|
+
| \`radio\` | 51,120 | 16,281 | 14,513 | 11,591 | 2,742 | 2,116 |
|
|
5476
|
+
| \`rating\` | 55,527 | 19,005 | 16,938 | 11,973 | 3,666 | 2,857 |
|
|
5477
|
+
| \`sandbox\` | 108,218 | 32,974 | 28,855 | 74,725 | 20,349 | 17,077 |
|
|
5478
|
+
| \`scatter-chart\` | 108,028 | 36,473 | 32,170 | 29,693 | 8,583 | 7,005 |
|
|
5479
|
+
| \`scroll-area\` | 36,301 | 12,384 | 11,044 | 13,508 | 3,569 | 2,862 |
|
|
5480
|
+
| \`select\` | 125,846 | 40,630 | 35,662 | 35,267 | 9,117 | 7,201 |
|
|
5481
|
+
| \`skeleton\` | 26,848 | 9,947 | 8,859 | 4,755 | 1,403 | 1,129 |
|
|
5482
|
+
| \`skip-link\` | 26,118 | 10,115 | 8,948 | 2,778 | 961 | 727 |
|
|
5483
|
+
| \`slider\` | 69,605 | 20,729 | 18,554 | 28,572 | 6,252 | 5,141 |
|
|
5484
|
+
| \`sparkline\` | 54,716 | 19,331 | 17,289 | 11,422 | 3,437 | 2,815 |
|
|
5485
|
+
| \`spatial-bar-chart\` | 114,232 | 39,173 | 34,473 | 28,899 | 8,554 | 6,991 |
|
|
5486
|
+
| \`spatial-heatmap\` | 126,828 | 42,153 | 37,017 | 41,457 | 11,707 | 9,742 |
|
|
5487
|
+
| \`spatial-ribbon-chart\` | 113,204 | 38,749 | 34,175 | 29,690 | 8,962 | 7,372 |
|
|
5488
|
+
| \`spatial-scatter-chart\` | 111,501 | 37,967 | 33,342 | 28,039 | 8,233 | 6,710 |
|
|
5489
|
+
| \`spatial-surface-chart\` | 113,878 | 39,172 | 34,508 | 30,366 | 9,349 | 7,849 |
|
|
5490
|
+
| \`spatial-treemap\` | 115,578 | 39,956 | 35,155 | 30,367 | 9,373 | 7,745 |
|
|
5491
|
+
| \`speed-dial\` | 76,667 | 26,452 | 23,477 | 17,966 | 4,366 | 3,498 |
|
|
5492
|
+
| \`splitter\` | 51,121 | 16,689 | 14,957 | 20,542 | 4,916 | 4,035 |
|
|
5493
|
+
| \`stat\` | 29,171 | 10,751 | 9,606 | 5,193 | 1,472 | 1,129 |
|
|
5494
|
+
| \`steps\` | 69,006 | 21,901 | 19,478 | 27,872 | 6,743 | 5,557 |
|
|
5495
|
+
| \`strands\` | 63,680 | 23,697 | 20,888 | 38,177 | 13,700 | 11,957 |
|
|
5496
|
+
| \`switch\` | 44,449 | 14,978 | 13,362 | 6,021 | 1,770 | 1,267 |
|
|
5497
|
+
| \`table\` | 136,974 | 40,483 | 35,291 | 62,692 | 15,345 | 12,667 |
|
|
5498
|
+
| \`tabs\` | 56,031 | 18,048 | 16,068 | 19,434 | 4,726 | 3,848 |
|
|
5499
|
+
| \`tag\` | 48,197 | 17,125 | 15,291 | 13,011 | 3,615 | 2,827 |
|
|
5500
|
+
| \`text\` | 29,286 | 10,213 | 9,030 | 7,182 | 1,478 | 1,170 |
|
|
5501
|
+
| \`textarea\` | 48,905 | 16,375 | 14,607 | 9,403 | 2,651 | 2,167 |
|
|
5502
|
+
| \`time-input\` | 195,137 | 57,471 | 50,031 | 72,814 | 16,512 | 13,551 |
|
|
5503
|
+
| \`time-picker\` | 113,325 | 34,508 | 30,445 | 46,180 | 11,559 | 9,388 |
|
|
5504
|
+
| \`timeline\` | 39,321 | 13,741 | 12,307 | 10,973 | 2,694 | 2,182 |
|
|
5505
|
+
| \`toast\` | 60,192 | 20,339 | 18,183 | 20,046 | 5,404 | 4,414 |
|
|
5506
|
+
| \`toggle\` | 51,106 | 16,791 | 14,924 | 10,851 | 3,070 | 2,454 |
|
|
5507
|
+
| \`toolbar\` | 34,496 | 12,352 | 10,989 | 7,820 | 2,142 | 1,661 |
|
|
5508
|
+
| \`tooltip\` | 62,502 | 22,262 | 19,723 | 11,290 | 3,106 | 2,499 |
|
|
5509
|
+
| \`tour\` | 95,356 | 31,307 | 27,682 | 30,161 | 7,569 | 6,132 |
|
|
5510
|
+
| \`tree\` | 77,329 | 25,058 | 22,338 | 25,871 | 6,853 | 5,682 |
|
|
5511
|
+
| \`trend\` | 32,854 | 12,575 | 11,202 | 5,487 | 1,650 | 1,185 |
|
|
5512
|
+
| \`video\` | 164,366 | 48,811 | 42,542 | 87,272 | 20,644 | 17,140 |
|
|
5513
|
+
| \`video-playlist\` | 144,942 | 44,812 | 39,353 | 58,789 | 14,036 | 11,719 |
|
|
5514
|
+
| \`virtual-list\` | 66,376 | 22,417 | 19,953 | 25,370 | 7,669 | 6,422 |
|
|
5485
5515
|
|
|
5486
5516
|
## What an install adds to \`node_modules\`
|
|
5487
5517
|
|
|
@@ -5494,12 +5524,12 @@ without its whitespace, and the sizes count each one that way.
|
|
|
5494
5524
|
|
|
5495
5525
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
5496
5526
|
|---|---|---|---|---|
|
|
5497
|
-
| \`@fusion.dev/helix-core\` | 2,
|
|
5498
|
-
| \`@fusion.dev/helix-headless\` | 23,
|
|
5527
|
+
| \`@fusion.dev/helix-core\` | 2,192,783 | 587 | 791,390 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
|
|
5528
|
+
| \`@fusion.dev/helix-headless\` | 23,982,207 | 772 | 2,535,098 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
|
|
5499
5529
|
| \`@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,619,
|
|
5530
|
+
| \`@fusion.dev/helix-styles\` | 122,338 | 6 | 0 | none |
|
|
5531
|
+
| \`@fusion.dev/helix-theme\` | 453,157 | 8 | 6,257 | none |
|
|
5532
|
+
| \`@fusion.dev/helix\` | 24,619,675 | 1,023 | 566,915 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
|
|
5503
5533
|
|
|
5504
5534
|
## Not measured yet
|
|
5505
5535
|
|
|
@@ -8204,7 +8234,8 @@ The theme engine measures each ink against the ground it is actually painted
|
|
|
8204
8234
|
on. The ladder records which pairs occur. For example, \`foreground\` on
|
|
8205
8235
|
\`surface-overlay\` is a real pair, and \`foreground-on-primary\` on \`surface\` is
|
|
8206
8236
|
not. A field's fill, \`well\`, is translucent, so the text in a field is measured
|
|
8207
|
-
against the well over each surface.
|
|
8237
|
+
against the well over each surface. A lit row's fill, \`hover\`, is measured the
|
|
8238
|
+
same way. See [Color](./color).
|
|
8208
8239
|
`,
|
|
8209
8240
|
svelte: `---
|
|
8210
8241
|
description: The Svelte typings, and how Svelte passes props and binds events.
|