@fusion.dev/helix-docs 0.143.0 → 0.144.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/accessibility.mdx +7 -0
- package/content/building-on-the-headless-tier.mdx +2 -1
- package/content/localization.mdx +12 -0
- package/content/metrics.mdx +223 -223
- package/content/overlays.mdx +29 -2
- package/dist/sources.generated.js +273 -226
- package/package.json +9 -9
|
@@ -67,6 +67,13 @@ words are yours to choose. An icon-only control has no other text to name it:
|
|
|
67
67
|
></helix-icon-button>
|
|
68
68
|
\`\`\`
|
|
69
69
|
|
|
70
|
+
A button or a form control that renders with no name warns once in the console:
|
|
71
|
+
\`<helix-icon-button> has no accessible name\`, followed by the ways to give it
|
|
72
|
+
one. The check runs a moment after the control first renders, so a label your
|
|
73
|
+
framework writes beside the control in the same pass counts. The warning has the
|
|
74
|
+
kind \`missing-name\`, so \`@fusion.dev/helix-diagnostics\` counts it with the
|
|
75
|
+
other runtime events.
|
|
76
|
+
|
|
70
77
|
### \`label\` and \`aria-label\`
|
|
71
78
|
|
|
72
79
|
\`label\` renders visible text and names the control through that text.
|
|
@@ -363,12 +370,13 @@ open.
|
|
|
363
370
|
|
|
364
371
|
[//]: # (renders)
|
|
365
372
|
|
|
366
|
-
**
|
|
373
|
+
**28 of the 98 headless families interpolate another family's tag**, across 20 distinct children.
|
|
367
374
|
|
|
368
375
|
| Family | Renders |
|
|
369
376
|
|---|---|
|
|
370
377
|
| \`area-chart\`, \`bar-chart\`, \`copy-button\`, \`donut-chart\`, \`heatmap\`, \`line-chart\`, \`scatter-chart\` | \`tooltip\` |
|
|
371
378
|
| \`chat\` | \`chat-message\` |
|
|
379
|
+
| \`checkbox-group\` | \`checkbox\` |
|
|
372
380
|
| \`code-block\`, \`object-inspector\` | \`copy-button\` |
|
|
373
381
|
| \`color-input\` | \`color-picker\` |
|
|
374
382
|
| \`color-picker\` | \`button\`, \`button-group\`, \`slider\` |
|
|
@@ -2842,6 +2850,18 @@ language. Every other control shows its English sentence.
|
|
|
2842
2850
|
></helix-number-input>
|
|
2843
2851
|
\`\`\`
|
|
2844
2852
|
|
|
2853
|
+
Color Picker and Color Input say a color's name to a screen reader, such as
|
|
2854
|
+
"vibrant red". Set \`color-words\` to a JSON table of the words a name is made
|
|
2855
|
+
of. The keys are the English words, and they match the strings that React
|
|
2856
|
+
Aria's \`@react-stately/color\` translates, so you can reuse that table.
|
|
2857
|
+
|
|
2858
|
+
\`\`\`html
|
|
2859
|
+
<helix-color-picker
|
|
2860
|
+
color-words='{"red": "rot", "vibrant": "kräftiges", "colorName": "{lightness} {chroma} {hue}"}'
|
|
2861
|
+
lang="de"
|
|
2862
|
+
></helix-color-picker>
|
|
2863
|
+
\`\`\`
|
|
2864
|
+
|
|
2845
2865
|
**Pass these strings from your own translation system.** Helix ships English
|
|
2846
2866
|
defaults and no translation tools. If Helix had its own string catalog, you
|
|
2847
2867
|
would have to keep two catalogs in step.
|
|
@@ -3566,7 +3586,7 @@ on its own.
|
|
|
3566
3586
|
|
|
3567
3587
|
| | Raw | Gzip | Brotli |
|
|
3568
3588
|
|---|---|---|---|
|
|
3569
|
-
| Lit and \`@fusion.dev/helix-core\` |
|
|
3589
|
+
| Lit and \`@fusion.dev/helix-core\` | 182,087 | 57,026 | 49,129 |
|
|
3570
3590
|
|
|
3571
3591
|
## Whole packages
|
|
3572
3592
|
|
|
@@ -3577,12 +3597,12 @@ either barrel. The per-component tables show what your page pays.
|
|
|
3577
3597
|
|
|
3578
3598
|
| Package | Raw | Gzip | Brotli | |
|
|
3579
3599
|
|---|---|---|---|---|
|
|
3580
|
-
| \`@fusion.dev/helix-core\` |
|
|
3581
|
-
| \`@fusion.dev/helix-headless\` |
|
|
3600
|
+
| \`@fusion.dev/helix-core\` | 181,641 | 56,641 | 48,897 | The element base class, mixins, decorators, and floating positioning. |
|
|
3601
|
+
| \`@fusion.dev/helix-headless\` | 929,891 | 247,016 | 188,830 | Every headless family. The barrel entry includes all of them. |
|
|
3582
3602
|
| \`@fusion.dev/helix-icons\` | 55,738 | 17,784 | 15,143 | The whole glyph set. |
|
|
3583
3603
|
| \`@fusion.dev/helix-theme\` | 3,626 | 1,597 | 1,384 | The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
|
|
3584
3604
|
| \`fusion_helix_theme_bg.wasm\` | 490,270 | 155,600 | 125,779 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
|
|
3585
|
-
| \`@fusion.dev/helix\` | 1,
|
|
3605
|
+
| \`@fusion.dev/helix\` | 1,471,844 | 349,349 | 250,882 | Every styled family. |
|
|
3586
3606
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
|
|
3587
3607
|
|
|
3588
3608
|
## Stylesheets
|
|
@@ -3596,20 +3616,20 @@ shows the whole cost of using the base layer on its own.
|
|
|
3596
3616
|
| File | Raw | Gzip | Brotli | |
|
|
3597
3617
|
|---|---|---|---|---|
|
|
3598
3618
|
| \`base.css\` | 30,786 | 4,465 | 3,884 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
|
|
3599
|
-
| \`elements.css\` | 8,
|
|
3619
|
+
| \`elements.css\` | 8,862 | 1,492 | 1,318 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
|
|
3600
3620
|
| \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
|
|
3601
3621
|
| \`primitives.css\` | 7,510 | 1,402 | 1,201 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
|
|
3602
3622
|
| \`tokens.css\` | 22,349 | 2,664 | 2,247 | The 193 semantic tokens. Every styled component needs them. |
|
|
3603
3623
|
|
|
3604
3624
|
## What the numbers say
|
|
3605
3625
|
|
|
3606
|
-
**Most of your first component is the shared runtime.** The median styled family is
|
|
3626
|
+
**Most of your first component is the shared runtime.** The median styled family is 17,001 bytes gzipped alone, and it adds 2,926 to a page that already has Helix. The shared runtime is 83 percent of the first component, and the component itself is 17 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.
|
|
3607
3627
|
|
|
3608
|
-
Across the 104 styled components, the smallest is \`code\` at 10,
|
|
3628
|
+
Across the 104 styled components, the smallest is \`code\` at 10,676 bytes gzipped alone, and the largest is \`data-table\` at 56,196. Every family together is 349,349.
|
|
3609
3629
|
|
|
3610
|
-
No family imports a barrel. The \`barrels\` rule in \`fusion 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
|
|
3630
|
+
No family imports a barrel. The \`barrels\` rule in \`fusion 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 247,016 bytes gzipped, whatever else the page imports. That is 15 times the median family above. All 104 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.
|
|
3611
3631
|
|
|
3612
|
-
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
|
|
3632
|
+
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 16,148 bytes gzipped alone.
|
|
3613
3633
|
|
|
3614
3634
|
## Compared with other systems
|
|
3615
3635
|
|
|
@@ -3621,43 +3641,43 @@ The table has no whole-library row. That row would compare how many components e
|
|
|
3621
3641
|
|
|
3622
3642
|
| Component | System | Raw | Gzip | Brotli |
|
|
3623
3643
|
|---|---|---|---|---|
|
|
3624
|
-
| \`button\` | **Helix** |
|
|
3644
|
+
| \`button\` | **Helix** | 56,398 | 16,247 | 14,165 |
|
|
3625
3645
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
3626
3646
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
3627
3647
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
3628
3648
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
3629
|
-
| \`checkbox\` | **Helix** |
|
|
3649
|
+
| \`checkbox\` | **Helix** | 60,002 | 16,960 | 14,858 |
|
|
3630
3650
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
3631
3651
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
3632
3652
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
3633
3653
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
3634
|
-
| \`dialog\` | **Helix** |
|
|
3654
|
+
| \`dialog\` | **Helix** | 54,741 | 16,320 | 14,276 |
|
|
3635
3655
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
3636
3656
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
3637
3657
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
3638
3658
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
3639
|
-
| \`radio\` | **Helix** |
|
|
3659
|
+
| \`radio\` | **Helix** | 64,144 | 17,850 | 15,648 |
|
|
3640
3660
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
3641
3661
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
3642
3662
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
3643
3663
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
3644
|
-
| \`switch\` | **Helix** |
|
|
3664
|
+
| \`switch\` | **Helix** | 57,461 | 16,577 | 14,545 |
|
|
3645
3665
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
3646
3666
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
3647
3667
|
| | Shoelace | 37,833 | 11,814 | 10,568 |
|
|
3648
3668
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
3649
|
-
| \`tabs\` | **Helix** |
|
|
3669
|
+
| \`tabs\` | **Helix** | 55,917 | 16,074 | 14,020 |
|
|
3650
3670
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
3651
3671
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
3652
3672
|
| | Shoelace | 54,573 | 17,140 | 15,068 |
|
|
3653
3673
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
3654
|
-
| \`tooltip\` | **Helix** |
|
|
3674
|
+
| \`tooltip\` | **Helix** | 74,148 | 23,682 | 20,846 |
|
|
3655
3675
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
3656
3676
|
| | Material Web | | not shipped | |
|
|
3657
3677
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
3658
3678
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
3659
3679
|
|
|
3660
|
-
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at
|
|
3680
|
+
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 7,190 bytes gzipped. 15 of 27 peer measurements are smaller than the Helix row.
|
|
3661
3681
|
|
|
3662
3682
|
Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
|
|
3663
3683
|
|
|
@@ -3703,104 +3723,104 @@ Structure, accessibility, state, and form participation. It has no presentation
|
|
|
3703
3723
|
|
|
3704
3724
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
3705
3725
|
|---|---|---|---|---|---|---|
|
|
3706
|
-
| \`accordion\` | 44,
|
|
3707
|
-
| \`announcement\` | 40,
|
|
3708
|
-
| \`app-header\` | 37,
|
|
3709
|
-
| \`area-chart\` |
|
|
3710
|
-
| \`avatar\` |
|
|
3711
|
-
| \`badge\` |
|
|
3712
|
-
| \`bar-chart\` |
|
|
3713
|
-
| \`blockquote\` | 36,
|
|
3714
|
-
| \`breadcrumbs\` | 38,
|
|
3715
|
-
| \`button\` |
|
|
3716
|
-
| \`button-group\` |
|
|
3717
|
-
| \`callout\` |
|
|
3718
|
-
| \`canvas\` | 97,
|
|
3719
|
-
| \`card\` |
|
|
3720
|
-
| \`carousel\` |
|
|
3721
|
-
| \`chat\` | 63,
|
|
3722
|
-
| \`checkbox\` |
|
|
3723
|
-
| \`checkbox-group\` |
|
|
3724
|
-
| \`code\` | 34,
|
|
3725
|
-
| \`code-block\` |
|
|
3726
|
-
| \`color-input\` |
|
|
3727
|
-
| \`color-picker\` |
|
|
3728
|
-
| \`combobox\` |
|
|
3729
|
-
| \`command\` |
|
|
3730
|
-
| \`copy-button\` |
|
|
3731
|
-
| \`data-table\` |
|
|
3732
|
-
| \`date-input\` |
|
|
3733
|
-
| \`date-picker\` |
|
|
3734
|
-
| \`description-list\` |
|
|
3735
|
-
| \`dialog\` |
|
|
3736
|
-
| \`divider\` | 36,
|
|
3737
|
-
| \`donut-chart\` |
|
|
3738
|
-
| \`drawer\` |
|
|
3739
|
-
| \`drilldown\` |
|
|
3740
|
-
| \`empty\` | 36,
|
|
3741
|
-
| \`file-input\` |
|
|
3742
|
-
| \`filter-input\` |
|
|
3743
|
-
| \`format-date\` |
|
|
3744
|
-
| \`graph\` | 68,
|
|
3745
|
-
| \`heatmap\` |
|
|
3746
|
-
| \`icon\` |
|
|
3747
|
-
| \`icon-button\` |
|
|
3748
|
-
| \`image\` |
|
|
3749
|
-
| \`input\` |
|
|
3750
|
-
| \`kbd\` |
|
|
3751
|
-
| \`legend\` |
|
|
3752
|
-
| \`lightbox\` |
|
|
3753
|
-
| \`line-chart\` |
|
|
3754
|
-
| \`list\` |
|
|
3755
|
-
| \`listbox\` |
|
|
3756
|
-
| \`loader\` |
|
|
3757
|
-
| \`map\` | 88,
|
|
3758
|
-
| \`megamenu\` | 67,
|
|
3759
|
-
| \`menu\` |
|
|
3760
|
-
| \`meter\` | 39,
|
|
3761
|
-
| \`navigation\` |
|
|
3762
|
-
| \`notifications\` |
|
|
3763
|
-
| \`number-input\` |
|
|
3764
|
-
| \`object-inspector\` |
|
|
3765
|
-
| \`option\` |
|
|
3766
|
-
| \`outline\` | 41,
|
|
3767
|
-
| \`pagination\` |
|
|
3768
|
-
| \`pin-input\` |
|
|
3769
|
-
| \`popover\` |
|
|
3770
|
-
| \`progress\` | 37,
|
|
3771
|
-
| \`qr-code\` |
|
|
3772
|
-
| \`quote\` | 35,
|
|
3773
|
-
| \`radio\` |
|
|
3774
|
-
| \`rating\` |
|
|
3775
|
-
| \`scatter-chart\` |
|
|
3776
|
-
| \`scroll-area\` | 37,
|
|
3777
|
-
| \`select\` |
|
|
3778
|
-
| \`skeleton\` |
|
|
3779
|
-
| \`skip-link\` | 36,
|
|
3780
|
-
| \`slider\` |
|
|
3781
|
-
| \`sparkline\` |
|
|
3782
|
-
| \`speed-dial\` | 70,
|
|
3783
|
-
| \`splitter\` |
|
|
3784
|
-
| \`stat\` | 36,
|
|
3785
|
-
| \`steps\` |
|
|
3786
|
-
| \`switch\` |
|
|
3787
|
-
| \`table\` |
|
|
3788
|
-
| \`tabs\` |
|
|
3789
|
-
| \`tag\` |
|
|
3790
|
-
| \`textarea\` |
|
|
3791
|
-
| \`time-input\` |
|
|
3792
|
-
| \`time-picker\` |
|
|
3793
|
-
| \`timeline\` | 38,
|
|
3794
|
-
| \`toast\` |
|
|
3795
|
-
| \`toggle\` |
|
|
3796
|
-
| \`toolbar\` |
|
|
3797
|
-
| \`tooltip\` |
|
|
3798
|
-
| \`tour\` |
|
|
3799
|
-
| \`tree\` |
|
|
3800
|
-
| \`trend\` |
|
|
3801
|
-
| \`video\` |
|
|
3802
|
-
| \`video-playlist\` |
|
|
3803
|
-
| \`virtual-list\` |
|
|
3726
|
+
| \`accordion\` | 44,701 | 13,626 | 11,933 | 4,240 | 1,216 | 879 |
|
|
3727
|
+
| \`announcement\` | 40,721 | 12,427 | 10,877 | 1,422 | 470 | 220 |
|
|
3728
|
+
| \`app-header\` | 37,314 | 11,161 | 9,828 | 1,800 | 610 | 304 |
|
|
3729
|
+
| \`area-chart\` | 90,369 | 29,258 | 25,668 | 13,495 | 4,140 | 3,231 |
|
|
3730
|
+
| \`avatar\` | 40,474 | 12,079 | 10,630 | 4,317 | 1,319 | 916 |
|
|
3731
|
+
| \`badge\` | 36,128 | 10,891 | 9,562 | 1,149 | 436 | 150 |
|
|
3732
|
+
| \`bar-chart\` | 92,950 | 29,977 | 26,287 | 15,690 | 4,734 | 3,684 |
|
|
3733
|
+
| \`blockquote\` | 36,294 | 10,964 | 9,606 | 912 | 368 | 166 |
|
|
3734
|
+
| \`breadcrumbs\` | 38,511 | 11,586 | 10,180 | 2,248 | 662 | 420 |
|
|
3735
|
+
| \`button\` | 49,106 | 14,753 | 12,864 | 4,710 | 1,442 | 966 |
|
|
3736
|
+
| \`button-group\` | 36,012 | 10,792 | 9,472 | 661 | 278 | 17 |
|
|
3737
|
+
| \`callout\` | 41,362 | 12,662 | 11,077 | 1,329 | 509 | 341 |
|
|
3738
|
+
| \`canvas\` | 97,945 | 28,734 | 25,129 | 50,699 | 15,269 | 12,665 |
|
|
3739
|
+
| \`card\` | 37,123 | 11,127 | 9,754 | 1,604 | 507 | 199 |
|
|
3740
|
+
| \`carousel\` | 49,032 | 14,602 | 12,873 | 12,343 | 3,380 | 2,522 |
|
|
3741
|
+
| \`chat\` | 63,883 | 19,478 | 17,158 | 18,377 | 5,465 | 4,344 |
|
|
3742
|
+
| \`checkbox\` | 53,376 | 15,507 | 13,630 | 2,958 | 958 | 510 |
|
|
3743
|
+
| \`checkbox-group\` | 58,828 | 16,890 | 14,812 | 7,836 | 2,158 | 1,422 |
|
|
3744
|
+
| \`code\` | 34,631 | 10,379 | 9,095 | 451 | 217 | 5 |
|
|
3745
|
+
| \`code-block\` | 97,970 | 30,627 | 26,843 | 23,818 | 6,378 | 5,060 |
|
|
3746
|
+
| \`color-input\` | 126,667 | 38,020 | 33,193 | 37,761 | 9,575 | 7,587 |
|
|
3747
|
+
| \`color-picker\` | 89,459 | 26,331 | 23,074 | 30,390 | 8,129 | 6,339 |
|
|
3748
|
+
| \`combobox\` | 124,918 | 36,824 | 32,129 | 35,736 | 8,855 | 6,997 |
|
|
3749
|
+
| \`command\` | 86,526 | 24,600 | 21,456 | 26,825 | 7,073 | 5,455 |
|
|
3750
|
+
| \`copy-button\` | 91,383 | 28,739 | 25,185 | 17,224 | 4,559 | 3,426 |
|
|
3751
|
+
| \`data-table\` | 166,647 | 48,062 | 41,467 | 76,823 | 19,901 | 15,778 |
|
|
3752
|
+
| \`date-input\` | 135,874 | 39,621 | 34,569 | 34,269 | 8,259 | 6,505 |
|
|
3753
|
+
| \`date-picker\` | 62,134 | 18,124 | 16,067 | 16,799 | 4,429 | 3,354 |
|
|
3754
|
+
| \`description-list\` | 36,115 | 10,751 | 9,429 | 1,132 | 329 | 52 |
|
|
3755
|
+
| \`dialog\` | 49,122 | 15,045 | 13,119 | 4,950 | 1,588 | 1,070 |
|
|
3756
|
+
| \`divider\` | 36,362 | 10,991 | 9,663 | 981 | 387 | 140 |
|
|
3757
|
+
| \`donut-chart\` | 88,589 | 28,406 | 24,960 | 13,145 | 3,946 | 3,122 |
|
|
3758
|
+
| \`drawer\` | 49,857 | 15,264 | 13,305 | 4,473 | 1,494 | 972 |
|
|
3759
|
+
| \`drilldown\` | 52,271 | 15,920 | 13,912 | 6,372 | 1,788 | 1,225 |
|
|
3760
|
+
| \`empty\` | 36,800 | 11,098 | 9,726 | 956 | 375 | 156 |
|
|
3761
|
+
| \`file-input\` | 70,157 | 21,089 | 18,462 | 13,699 | 4,113 | 3,073 |
|
|
3762
|
+
| \`filter-input\` | 122,233 | 36,317 | 31,769 | 32,194 | 8,036 | 6,293 |
|
|
3763
|
+
| \`format-date\` | 41,800 | 12,579 | 11,116 | 4,302 | 1,231 | 822 |
|
|
3764
|
+
| \`graph\` | 68,878 | 20,642 | 18,131 | 14,811 | 4,762 | 3,746 |
|
|
3765
|
+
| \`heatmap\` | 93,526 | 29,776 | 26,031 | 13,605 | 3,880 | 2,960 |
|
|
3766
|
+
| \`icon\` | 93,519 | 29,356 | 25,023 | 55,716 | 19,410 | 15,184 |
|
|
3767
|
+
| \`icon-button\` | 49,502 | 14,787 | 12,881 | 5,109 | 1,488 | 931 |
|
|
3768
|
+
| \`image\` | 39,391 | 11,664 | 10,247 | 3,695 | 1,088 | 699 |
|
|
3769
|
+
| \`input\` | 58,901 | 17,599 | 15,313 | 7,196 | 2,442 | 1,597 |
|
|
3770
|
+
| \`kbd\` | 39,704 | 12,134 | 10,658 | 3,432 | 1,172 | 699 |
|
|
3771
|
+
| \`legend\` | 42,474 | 12,907 | 11,291 | 2,304 | 797 | 399 |
|
|
3772
|
+
| \`lightbox\` | 52,296 | 15,432 | 13,574 | 7,865 | 2,197 | 1,462 |
|
|
3773
|
+
| \`line-chart\` | 90,719 | 29,240 | 25,692 | 13,695 | 4,083 | 3,203 |
|
|
3774
|
+
| \`list\` | 37,108 | 10,989 | 9,641 | 1,766 | 503 | 212 |
|
|
3775
|
+
| \`listbox\` | 72,278 | 21,086 | 18,482 | 16,468 | 4,603 | 3,470 |
|
|
3776
|
+
| \`loader\` | 38,134 | 11,443 | 10,061 | 1,966 | 701 | 428 |
|
|
3777
|
+
| \`map\` | 88,866 | 24,638 | 21,318 | 37,993 | 9,921 | 7,589 |
|
|
3778
|
+
| \`megamenu\` | 67,545 | 21,979 | 19,301 | 5,166 | 1,504 | 950 |
|
|
3779
|
+
| \`menu\` | 84,482 | 27,139 | 23,697 | 10,758 | 2,901 | 2,034 |
|
|
3780
|
+
| \`meter\` | 39,935 | 11,963 | 10,523 | 4,407 | 1,321 | 936 |
|
|
3781
|
+
| \`navigation\` | 42,076 | 12,846 | 11,125 | 1,587 | 531 | 233 |
|
|
3782
|
+
| \`notifications\` | 60,428 | 17,470 | 15,447 | 15,559 | 4,000 | 3,056 |
|
|
3783
|
+
| \`number-input\` | 62,711 | 18,414 | 16,200 | 9,936 | 2,710 | 1,914 |
|
|
3784
|
+
| \`object-inspector\` | 107,211 | 33,688 | 29,397 | 26,855 | 7,376 | 5,779 |
|
|
3785
|
+
| \`option\` | 39,192 | 11,592 | 10,200 | 3,485 | 905 | 564 |
|
|
3786
|
+
| \`outline\` | 41,446 | 12,643 | 11,102 | 4,703 | 1,485 | 1,025 |
|
|
3787
|
+
| \`pagination\` | 121,340 | 36,006 | 31,403 | 38,967 | 9,843 | 7,657 |
|
|
3788
|
+
| \`pin-input\` | 56,225 | 16,427 | 14,415 | 6,212 | 1,940 | 1,209 |
|
|
3789
|
+
| \`popover\` | 72,247 | 23,560 | 20,556 | 3,678 | 1,122 | 667 |
|
|
3790
|
+
| \`progress\` | 37,937 | 11,449 | 10,052 | 2,409 | 803 | 484 |
|
|
3791
|
+
| \`qr-code\` | 50,196 | 16,089 | 14,139 | 14,937 | 5,517 | 4,541 |
|
|
3792
|
+
| \`quote\` | 35,535 | 10,672 | 9,341 | 552 | 293 | 133 |
|
|
3793
|
+
| \`radio\` | 55,852 | 16,358 | 14,260 | 3,954 | 1,196 | 751 |
|
|
3794
|
+
| \`rating\` | 60,609 | 18,068 | 15,805 | 7,789 | 2,398 | 1,708 |
|
|
3795
|
+
| \`scatter-chart\` | 90,002 | 28,914 | 25,377 | 13,985 | 4,210 | 3,261 |
|
|
3796
|
+
| \`scroll-area\` | 37,778 | 11,354 | 9,950 | 2,743 | 897 | 591 |
|
|
3797
|
+
| \`select\` | 106,032 | 32,233 | 28,217 | 23,738 | 6,133 | 4,792 |
|
|
3798
|
+
| \`skeleton\` | 36,541 | 10,963 | 9,654 | 1,190 | 453 | 126 |
|
|
3799
|
+
| \`skip-link\` | 36,698 | 11,106 | 9,705 | 1,562 | 631 | 311 |
|
|
3800
|
+
| \`slider\` | 57,787 | 16,802 | 14,802 | 7,357 | 2,094 | 1,438 |
|
|
3801
|
+
| \`sparkline\` | 43,547 | 13,471 | 11,798 | 2,387 | 913 | 631 |
|
|
3802
|
+
| \`speed-dial\` | 70,466 | 23,179 | 20,368 | 4,218 | 1,216 | 728 |
|
|
3803
|
+
| \`splitter\` | 50,411 | 14,864 | 13,103 | 10,977 | 2,906 | 2,217 |
|
|
3804
|
+
| \`stat\` | 36,863 | 10,988 | 9,645 | 1,511 | 493 | 222 |
|
|
3805
|
+
| \`steps\` | 55,412 | 16,440 | 14,377 | 8,459 | 2,323 | 1,635 |
|
|
3806
|
+
| \`switch\` | 52,608 | 15,403 | 13,513 | 1,790 | 676 | 308 |
|
|
3807
|
+
| \`table\` | 57,260 | 17,241 | 15,170 | 14,844 | 4,328 | 3,413 |
|
|
3808
|
+
| \`tabs\` | 49,298 | 14,722 | 12,809 | 4,025 | 1,047 | 747 |
|
|
3809
|
+
| \`tag\` | 47,772 | 14,598 | 12,861 | 5,626 | 1,674 | 1,136 |
|
|
3810
|
+
| \`textarea\` | 55,171 | 16,121 | 14,138 | 4,676 | 1,440 | 983 |
|
|
3811
|
+
| \`time-input\` | 148,716 | 43,305 | 37,532 | 43,009 | 10,737 | 8,330 |
|
|
3812
|
+
| \`time-picker\` | 85,174 | 24,617 | 21,538 | 27,375 | 7,292 | 5,587 |
|
|
3813
|
+
| \`timeline\` | 38,507 | 11,551 | 10,144 | 2,239 | 643 | 438 |
|
|
3814
|
+
| \`toast\` | 53,129 | 16,174 | 14,275 | 8,468 | 2,532 | 1,874 |
|
|
3815
|
+
| \`toggle\` | 59,077 | 17,265 | 15,114 | 5,356 | 1,515 | 1,001 |
|
|
3816
|
+
| \`toolbar\` | 43,517 | 13,332 | 11,648 | 4,134 | 1,427 | 851 |
|
|
3817
|
+
| \`tooltip\` | 71,070 | 22,939 | 20,172 | 8,345 | 2,401 | 1,737 |
|
|
3818
|
+
| \`tour\` | 87,778 | 27,527 | 24,134 | 15,948 | 4,335 | 3,270 |
|
|
3819
|
+
| \`tree\` | 54,810 | 16,530 | 14,410 | 8,344 | 2,414 | 1,763 |
|
|
3820
|
+
| \`trend\` | 38,098 | 11,560 | 10,156 | 2,213 | 709 | 384 |
|
|
3821
|
+
| \`video\` | 119,411 | 36,126 | 31,356 | 41,045 | 10,622 | 8,364 |
|
|
3822
|
+
| \`video-playlist\` | 92,641 | 28,852 | 25,227 | 17,519 | 4,309 | 3,217 |
|
|
3823
|
+
| \`virtual-list\` | 47,934 | 14,791 | 12,860 | 3,995 | 1,384 | 997 |
|
|
3804
3824
|
|
|
3805
3825
|
### Styled tier
|
|
3806
3826
|
|
|
@@ -3808,110 +3828,110 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
|
|
|
3808
3828
|
|
|
3809
3829
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
3810
3830
|
|---|---|---|---|---|---|---|
|
|
3811
|
-
| \`accordion\` |
|
|
3812
|
-
| \`announcement\` | 45,
|
|
3813
|
-
| \`app-header\` | 41,
|
|
3814
|
-
| \`area-chart\` |
|
|
3815
|
-
| \`aura\` | 64,
|
|
3816
|
-
| \`avatar\` |
|
|
3817
|
-
| \`badge\` |
|
|
3818
|
-
| \`bar-chart\` |
|
|
3819
|
-
| \`blockquote\` | 37,
|
|
3820
|
-
| \`breadcrumbs\` |
|
|
3821
|
-
| \`button\` |
|
|
3822
|
-
| \`button-group\` | 37,
|
|
3823
|
-
| \`callout\` |
|
|
3824
|
-
| \`canvas\` | 118,
|
|
3825
|
-
| \`card\` |
|
|
3826
|
-
| \`carousel\` | 59,
|
|
3827
|
-
| \`chat\` |
|
|
3828
|
-
| \`checkbox\` |
|
|
3829
|
-
| \`checkbox-group\` |
|
|
3830
|
-
| \`code\` | 35,
|
|
3831
|
-
| \`code-block\` |
|
|
3832
|
-
| \`color-input\` |
|
|
3833
|
-
| \`color-picker\` |
|
|
3834
|
-
| \`combobox\` |
|
|
3835
|
-
| \`command\` |
|
|
3836
|
-
| \`copy-button\` |
|
|
3837
|
-
| \`data-table\` |
|
|
3838
|
-
| \`date-input\` |
|
|
3839
|
-
| \`date-picker\` |
|
|
3840
|
-
| \`description-list\` | 38,
|
|
3841
|
-
| \`dialog\` |
|
|
3842
|
-
| \`divider\` | 38,
|
|
3843
|
-
| \`donut-chart\` |
|
|
3844
|
-
| \`drawer\` |
|
|
3845
|
-
| \`drilldown\` |
|
|
3846
|
-
| \`empty\` | 38,
|
|
3847
|
-
| \`file-input\` |
|
|
3848
|
-
| \`filter-input\` |
|
|
3849
|
-
| \`flex\` |
|
|
3850
|
-
| \`format-date\` |
|
|
3851
|
-
| \`graph\` | 83,
|
|
3852
|
-
| \`grid\` | 38,
|
|
3853
|
-
| \`heatmap\` |
|
|
3854
|
-
| \`icon\` |
|
|
3855
|
-
| \`icon-button\` |
|
|
3856
|
-
| \`image\` |
|
|
3857
|
-
| \`input\` |
|
|
3858
|
-
| \`kbd\` |
|
|
3859
|
-
| \`legend\` |
|
|
3860
|
-
| \`lightbox\` |
|
|
3861
|
-
| \`line-chart\` |
|
|
3862
|
-
| \`list\` | 41,
|
|
3863
|
-
| \`listbox\` |
|
|
3864
|
-
| \`loader\` |
|
|
3865
|
-
| \`map\` | 125,
|
|
3866
|
-
| \`megamenu\` | 72,
|
|
3867
|
-
| \`menu\` |
|
|
3868
|
-
| \`meter\` |
|
|
3869
|
-
| \`navigation\` |
|
|
3870
|
-
| \`notifications\` |
|
|
3871
|
-
| \`number-input\` |
|
|
3872
|
-
| \`object-inspector\` |
|
|
3873
|
-
| \`option\` |
|
|
3874
|
-
| \`orb\` | 46,
|
|
3875
|
-
| \`outline\` | 45,
|
|
3876
|
-
| \`pagination\` |
|
|
3877
|
-
| \`pin-input\` |
|
|
3878
|
-
| \`popover\` |
|
|
3879
|
-
| \`progress\` |
|
|
3880
|
-
| \`qr-code\` |
|
|
3881
|
-
| \`quote\` | 36,
|
|
3882
|
-
| \`radio\` |
|
|
3883
|
-
| \`rating\` |
|
|
3884
|
-
| \`sandbox\` |
|
|
3885
|
-
| \`scatter-chart\` |
|
|
3886
|
-
| \`scroll-area\` | 40,
|
|
3887
|
-
| \`select\` |
|
|
3888
|
-
| \`skeleton\` |
|
|
3889
|
-
| \`skip-link\` |
|
|
3890
|
-
| \`slider\` |
|
|
3891
|
-
| \`sparkline\` |
|
|
3892
|
-
| \`speed-dial\` |
|
|
3893
|
-
| \`splitter\` |
|
|
3894
|
-
| \`stat\` | 40,
|
|
3895
|
-
| \`steps\` |
|
|
3896
|
-
| \`switch\` |
|
|
3897
|
-
| \`table\` |
|
|
3898
|
-
| \`tabs\` |
|
|
3899
|
-
| \`tag\` |
|
|
3900
|
-
| \`text\` | 40,
|
|
3901
|
-
| \`textarea\` |
|
|
3902
|
-
| \`time-input\` |
|
|
3903
|
-
| \`time-picker\` |
|
|
3904
|
-
| \`timeline\` | 41,
|
|
3905
|
-
| \`toast\` |
|
|
3906
|
-
| \`toggle\` |
|
|
3907
|
-
| \`toolbar\` |
|
|
3908
|
-
| \`tooltip\` |
|
|
3909
|
-
| \`tour\` |
|
|
3910
|
-
| \`tree\` |
|
|
3911
|
-
| \`trend\` | 39,
|
|
3912
|
-
| \`video\` |
|
|
3913
|
-
| \`video-playlist\` |
|
|
3914
|
-
| \`virtual-list\` |
|
|
3831
|
+
| \`accordion\` | 48,121 | 14,422 | 12,688 | 7,647 | 2,065 | 1,560 |
|
|
3832
|
+
| \`announcement\` | 45,485 | 13,478 | 11,811 | 6,169 | 1,548 | 1,222 |
|
|
3833
|
+
| \`app-header\` | 41,202 | 12,052 | 10,574 | 5,673 | 1,515 | 1,108 |
|
|
3834
|
+
| \`area-chart\` | 98,228 | 30,935 | 27,181 | 21,331 | 5,831 | 4,582 |
|
|
3835
|
+
| \`aura\` | 64,892 | 19,687 | 17,298 | 26,743 | 8,324 | 7,050 |
|
|
3836
|
+
| \`avatar\` | 44,061 | 12,836 | 11,293 | 7,891 | 2,116 | 1,661 |
|
|
3837
|
+
| \`badge\` | 40,439 | 11,760 | 10,311 | 5,445 | 1,325 | 1,001 |
|
|
3838
|
+
| \`bar-chart\` | 106,399 | 32,622 | 28,595 | 29,117 | 7,395 | 5,972 |
|
|
3839
|
+
| \`blockquote\` | 37,656 | 11,278 | 9,895 | 2,258 | 693 | 401 |
|
|
3840
|
+
| \`breadcrumbs\` | 42,077 | 12,357 | 10,859 | 5,799 | 1,446 | 1,054 |
|
|
3841
|
+
| \`button\` | 56,398 | 16,247 | 14,165 | 11,984 | 2,955 | 2,197 |
|
|
3842
|
+
| \`button-group\` | 37,688 | 11,167 | 9,792 | 2,320 | 688 | 446 |
|
|
3843
|
+
| \`callout\` | 45,299 | 13,583 | 11,889 | 5,248 | 1,441 | 1,084 |
|
|
3844
|
+
| \`canvas\` | 118,250 | 32,469 | 28,310 | 70,994 | 18,981 | 15,657 |
|
|
3845
|
+
| \`card\` | 40,909 | 12,065 | 10,599 | 5,378 | 1,439 | 1,060 |
|
|
3846
|
+
| \`carousel\` | 59,973 | 16,383 | 14,508 | 23,273 | 5,225 | 4,198 |
|
|
3847
|
+
| \`chat\` | 78,040 | 21,966 | 19,379 | 32,525 | 7,983 | 6,436 |
|
|
3848
|
+
| \`checkbox\` | 60,002 | 16,960 | 14,858 | 9,568 | 2,436 | 1,804 |
|
|
3849
|
+
| \`checkbox-group\` | 66,556 | 18,479 | 16,166 | 15,554 | 3,827 | 2,840 |
|
|
3850
|
+
| \`code\` | 35,708 | 10,676 | 9,358 | 1,511 | 510 | 280 |
|
|
3851
|
+
| \`code-block\` | 117,062 | 33,746 | 29,661 | 42,896 | 9,601 | 7,751 |
|
|
3852
|
+
| \`color-input\` | 161,920 | 43,479 | 38,020 | 72,998 | 15,074 | 12,421 |
|
|
3853
|
+
| \`color-picker\` | 119,011 | 31,025 | 27,241 | 59,934 | 12,942 | 10,570 |
|
|
3854
|
+
| \`combobox\` | 141,827 | 39,737 | 34,754 | 52,627 | 11,802 | 9,495 |
|
|
3855
|
+
| \`command\` | 98,519 | 26,850 | 23,518 | 38,807 | 9,390 | 7,486 |
|
|
3856
|
+
| \`copy-button\` | 103,331 | 30,817 | 26,998 | 29,157 | 6,650 | 5,227 |
|
|
3857
|
+
| \`data-table\` | 208,210 | 56,196 | 47,474 | 118,121 | 28,030 | 21,633 |
|
|
3858
|
+
| \`date-input\` | 157,188 | 43,280 | 37,801 | 55,567 | 11,971 | 9,704 |
|
|
3859
|
+
| \`date-picker\` | 69,815 | 19,452 | 17,281 | 24,462 | 5,777 | 4,561 |
|
|
3860
|
+
| \`description-list\` | 38,493 | 11,308 | 9,902 | 3,500 | 914 | 586 |
|
|
3861
|
+
| \`dialog\` | 54,741 | 16,320 | 14,276 | 10,551 | 2,885 | 2,204 |
|
|
3862
|
+
| \`divider\` | 38,940 | 11,591 | 10,168 | 3,542 | 990 | 652 |
|
|
3863
|
+
| \`donut-chart\` | 98,342 | 30,409 | 26,765 | 22,874 | 5,995 | 4,800 |
|
|
3864
|
+
| \`drawer\` | 55,007 | 16,412 | 14,381 | 9,604 | 2,677 | 2,095 |
|
|
3865
|
+
| \`drilldown\` | 56,968 | 16,933 | 14,788 | 11,056 | 2,834 | 2,148 |
|
|
3866
|
+
| \`empty\` | 38,473 | 11,578 | 10,099 | 2,613 | 857 | 561 |
|
|
3867
|
+
| \`file-input\` | 81,761 | 23,313 | 20,426 | 25,298 | 6,337 | 5,024 |
|
|
3868
|
+
| \`filter-input\` | 150,189 | 40,993 | 35,691 | 59,777 | 12,607 | 10,072 |
|
|
3869
|
+
| \`flex\` | 37,069 | 11,029 | 9,663 | 2,078 | 606 | 316 |
|
|
3870
|
+
| \`format-date\` | 42,448 | 12,721 | 11,225 | 4,932 | 1,384 | 975 |
|
|
3871
|
+
| \`graph\` | 83,721 | 23,127 | 20,248 | 29,634 | 7,367 | 5,805 |
|
|
3872
|
+
| \`grid\` | 38,524 | 11,590 | 10,202 | 3,533 | 1,152 | 854 |
|
|
3873
|
+
| \`heatmap\` | 100,985 | 31,285 | 27,393 | 21,043 | 5,417 | 4,248 |
|
|
3874
|
+
| \`icon\` | 94,226 | 29,533 | 25,208 | 56,405 | 19,564 | 15,360 |
|
|
3875
|
+
| \`icon-button\` | 57,339 | 16,168 | 14,140 | 12,926 | 2,896 | 2,176 |
|
|
3876
|
+
| \`image\` | 41,085 | 12,122 | 10,641 | 5,371 | 1,566 | 1,173 |
|
|
3877
|
+
| \`input\` | 63,649 | 18,692 | 16,286 | 11,927 | 3,565 | 2,565 |
|
|
3878
|
+
| \`kbd\` | 41,118 | 12,584 | 11,043 | 4,829 | 1,629 | 1,121 |
|
|
3879
|
+
| \`legend\` | 47,965 | 14,166 | 12,383 | 7,671 | 2,046 | 1,442 |
|
|
3880
|
+
| \`lightbox\` | 57,296 | 16,525 | 14,566 | 12,850 | 3,300 | 2,482 |
|
|
3881
|
+
| \`line-chart\` | 101,137 | 31,376 | 27,585 | 24,094 | 6,226 | 5,072 |
|
|
3882
|
+
| \`list\` | 41,331 | 11,967 | 10,518 | 5,976 | 1,490 | 1,177 |
|
|
3883
|
+
| \`listbox\` | 76,796 | 22,106 | 19,326 | 20,975 | 5,632 | 4,354 |
|
|
3884
|
+
| \`loader\` | 41,425 | 12,238 | 10,760 | 5,242 | 1,484 | 1,079 |
|
|
3885
|
+
| \`map\` | 125,915 | 30,054 | 26,073 | 75,034 | 15,543 | 12,270 |
|
|
3886
|
+
| \`megamenu\` | 72,426 | 23,061 | 20,296 | 10,031 | 2,594 | 1,911 |
|
|
3887
|
+
| \`menu\` | 92,016 | 28,697 | 25,105 | 18,272 | 4,491 | 3,413 |
|
|
3888
|
+
| \`meter\` | 46,018 | 13,184 | 11,630 | 10,472 | 2,578 | 2,052 |
|
|
3889
|
+
| \`navigation\` | 43,728 | 13,312 | 11,528 | 3,221 | 1,022 | 622 |
|
|
3890
|
+
| \`notifications\` | 73,708 | 19,871 | 17,586 | 28,831 | 6,427 | 5,267 |
|
|
3891
|
+
| \`number-input\` | 67,684 | 19,551 | 17,221 | 14,890 | 3,876 | 2,953 |
|
|
3892
|
+
| \`object-inspector\` | 122,792 | 36,326 | 31,725 | 42,419 | 10,058 | 8,043 |
|
|
3893
|
+
| \`option\` | 42,446 | 12,501 | 11,019 | 6,725 | 1,813 | 1,295 |
|
|
3894
|
+
| \`orb\` | 46,363 | 14,669 | 12,905 | 8,724 | 3,373 | 2,779 |
|
|
3895
|
+
| \`outline\` | 45,186 | 13,419 | 11,785 | 8,426 | 2,301 | 1,717 |
|
|
3896
|
+
| \`pagination\` | 139,323 | 39,095 | 34,021 | 56,933 | 12,979 | 10,410 |
|
|
3897
|
+
| \`pin-input\` | 59,673 | 17,283 | 15,193 | 9,643 | 2,818 | 2,023 |
|
|
3898
|
+
| \`popover\` | 75,869 | 24,333 | 21,264 | 7,282 | 1,936 | 1,356 |
|
|
3899
|
+
| \`progress\` | 43,533 | 12,712 | 11,219 | 7,987 | 2,083 | 1,600 |
|
|
3900
|
+
| \`qr-code\` | 51,860 | 16,518 | 14,502 | 16,585 | 5,954 | 4,865 |
|
|
3901
|
+
| \`quote\` | 36,215 | 10,843 | 9,481 | 1,216 | 460 | 197 |
|
|
3902
|
+
| \`radio\` | 64,144 | 17,850 | 15,648 | 12,236 | 2,730 | 2,072 |
|
|
3903
|
+
| \`rating\` | 64,926 | 19,300 | 16,928 | 12,084 | 3,628 | 2,814 |
|
|
3904
|
+
| \`sandbox\` | 77,010 | 20,452 | 17,994 | 37,272 | 8,465 | 6,969 |
|
|
3905
|
+
| \`scatter-chart\` | 98,869 | 30,809 | 27,023 | 22,828 | 6,117 | 4,881 |
|
|
3906
|
+
| \`scroll-area\` | 40,926 | 11,999 | 10,508 | 5,874 | 1,556 | 1,077 |
|
|
3907
|
+
| \`select\` | 118,886 | 34,630 | 30,262 | 36,578 | 8,554 | 6,822 |
|
|
3908
|
+
| \`skeleton\` | 39,347 | 11,644 | 10,257 | 3,981 | 1,150 | 791 |
|
|
3909
|
+
| \`skip-link\` | 38,161 | 11,506 | 10,081 | 3,008 | 1,022 | 664 |
|
|
3910
|
+
| \`slider\` | 68,867 | 18,804 | 16,589 | 18,420 | 4,147 | 3,205 |
|
|
3911
|
+
| \`sparkline\` | 47,474 | 14,421 | 12,684 | 6,294 | 1,882 | 1,503 |
|
|
3912
|
+
| \`speed-dial\` | 134,519 | 43,564 | 36,886 | 66,341 | 21,581 | 17,007 |
|
|
3913
|
+
| \`splitter\` | 56,483 | 15,850 | 13,987 | 17,031 | 3,967 | 3,124 |
|
|
3914
|
+
| \`stat\` | 40,443 | 11,709 | 10,282 | 5,081 | 1,229 | 889 |
|
|
3915
|
+
| \`steps\` | 70,250 | 19,157 | 16,771 | 23,289 | 5,099 | 4,082 |
|
|
3916
|
+
| \`switch\` | 57,461 | 16,577 | 14,545 | 6,627 | 1,858 | 1,342 |
|
|
3917
|
+
| \`table\` | 63,029 | 18,409 | 16,244 | 20,603 | 5,526 | 4,454 |
|
|
3918
|
+
| \`tabs\` | 55,917 | 16,074 | 14,020 | 10,629 | 2,426 | 1,812 |
|
|
3919
|
+
| \`tag\` | 52,749 | 15,717 | 13,896 | 10,588 | 2,807 | 2,044 |
|
|
3920
|
+
| \`text\` | 40,992 | 11,800 | 10,350 | 6,004 | 1,453 | 998 |
|
|
3921
|
+
| \`textarea\` | 58,889 | 17,042 | 14,926 | 8,378 | 2,391 | 1,704 |
|
|
3922
|
+
| \`time-input\` | 172,753 | 47,297 | 40,980 | 67,030 | 14,784 | 11,821 |
|
|
3923
|
+
| \`time-picker\` | 96,904 | 26,815 | 23,494 | 39,096 | 9,543 | 7,544 |
|
|
3924
|
+
| \`timeline\` | 41,820 | 12,294 | 10,765 | 5,538 | 1,397 | 1,058 |
|
|
3925
|
+
| \`toast\` | 61,343 | 17,944 | 15,845 | 16,665 | 4,368 | 3,382 |
|
|
3926
|
+
| \`toggle\` | 64,719 | 18,533 | 16,240 | 10,987 | 2,817 | 2,127 |
|
|
3927
|
+
| \`toolbar\` | 44,810 | 13,631 | 11,889 | 5,409 | 1,735 | 1,212 |
|
|
3928
|
+
| \`tooltip\` | 74,148 | 23,682 | 20,846 | 11,405 | 3,162 | 2,426 |
|
|
3929
|
+
| \`tour\` | 99,455 | 29,632 | 26,015 | 27,607 | 6,491 | 5,087 |
|
|
3930
|
+
| \`tree\` | 60,660 | 17,892 | 15,658 | 14,183 | 3,823 | 2,941 |
|
|
3931
|
+
| \`trend\` | 39,907 | 12,024 | 10,551 | 4,003 | 1,179 | 874 |
|
|
3932
|
+
| \`video\` | 137,129 | 39,344 | 34,264 | 58,747 | 13,884 | 11,183 |
|
|
3933
|
+
| \`video-playlist\` | 105,059 | 31,036 | 27,158 | 29,919 | 6,565 | 5,145 |
|
|
3934
|
+
| \`virtual-list\` | 48,726 | 15,007 | 13,061 | 4,770 | 1,587 | 1,099 |
|
|
3915
3935
|
|
|
3916
3936
|
## What an install adds to \`node_modules\`
|
|
3917
3937
|
|
|
@@ -3923,12 +3943,12 @@ stripped column shows the bytes we removed.
|
|
|
3923
3943
|
|
|
3924
3944
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
3925
3945
|
|---|---|---|---|---|
|
|
3926
|
-
| \`@fusion.dev/helix-core\` | 1,
|
|
3927
|
-
| \`@fusion.dev/helix-headless\` |
|
|
3946
|
+
| \`@fusion.dev/helix-core\` | 1,637,132 | 231 | 417,937 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
3947
|
+
| \`@fusion.dev/helix-headless\` | 15,882,414 | 561 | 1,363,913 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
3928
3948
|
| \`@fusion.dev/helix-icons\` | 149,615 | 21 | 47,843 | \`svgo\` |
|
|
3929
|
-
| \`@fusion.dev/helix-styles\` | 106,
|
|
3949
|
+
| \`@fusion.dev/helix-styles\` | 106,152 | 6 | 0 | none |
|
|
3930
3950
|
| \`@fusion.dev/helix-theme\` | 528,598 | 8 | 5,393 | none |
|
|
3931
|
-
| \`@fusion.dev/helix\` |
|
|
3951
|
+
| \`@fusion.dev/helix\` | 16,571,414 | 885 | 383,770 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
3932
3952
|
|
|
3933
3953
|
## Not measured yet
|
|
3934
3954
|
|
|
@@ -4197,8 +4217,15 @@ to the element that opened it. \`Dialog\` does this, and so does \`Drawer\` unle
|
|
|
4197
4217
|
you set \`modal="false"\`. The page behind a modal \`Dialog\` or \`Drawer\` does not
|
|
4198
4218
|
scroll while it is open.
|
|
4199
4219
|
|
|
4200
|
-
\`Popover\`
|
|
4201
|
-
panel,
|
|
4220
|
+
Opening a \`Popover\` moves focus to the first control in its panel, or to the
|
|
4221
|
+
panel where it holds none, and closing it from inside gives focus back to the
|
|
4222
|
+
trigger. It does not trap focus unless you set \`modal\`, which keeps \`Tab\` in the
|
|
4223
|
+
panel until it closes. When focus moves out of its trigger and its panel, the
|
|
4224
|
+
popover closes.
|
|
4225
|
+
|
|
4226
|
+
Press F8 to move focus to the \`Toast\` stack, and press it again to go back.
|
|
4227
|
+
Set \`hotkey\` on the stack to use another key. The stack's name says which key
|
|
4228
|
+
it is.
|
|
4202
4229
|
|
|
4203
4230
|
The fields with a panel behave the same way:
|
|
4204
4231
|
|
|
@@ -4211,6 +4238,12 @@ The fields with a panel behave the same way:
|
|
|
4211
4238
|
**A tooltip never takes focus.** A tooltip only describes a control, so it
|
|
4212
4239
|
cannot contain a button. For something with a button in it, use a \`Popover\`.
|
|
4213
4240
|
|
|
4241
|
+
A tooltip describes its trigger by itself, whether it wraps the trigger or
|
|
4242
|
+
names it with \`for\`. A Helix trigger is described as soon as it has rendered.
|
|
4243
|
+
A plain element in your markup is described the first time a reader points at
|
|
4244
|
+
it or focuses it, so the link is never written into markup your server sent.
|
|
4245
|
+
Write \`aria-describedby\` yourself to have the link in the server's markup.
|
|
4246
|
+
|
|
4214
4247
|
## Keep an overlay open
|
|
4215
4248
|
|
|
4216
4249
|
An overlay sends \`helix-before-close\` before it closes. Cancel the event to keep
|
|
@@ -4234,6 +4267,20 @@ on the \`overlay\` and \`display\` properties, which allows an exit animation on
|
|
|
4234
4267
|
element the browser is about to remove from the top layer. Every overlay
|
|
4235
4268
|
responds to \`prefers-reduced-motion\`.
|
|
4236
4269
|
|
|
4270
|
+
\`Dialog\` and \`Drawer\` also say where they are in the journey:
|
|
4271
|
+
\`:state(entering)\` holds from the moment they open until their entrance has
|
|
4272
|
+
finished, and \`:state(exiting)\` from the moment they close until their exit has
|
|
4273
|
+
finished. Select on them to draw an entrance or an exit of your own.
|
|
4274
|
+
|
|
4275
|
+
## Swiping an overlay away
|
|
4276
|
+
|
|
4277
|
+
A touch or a pen swipes a \`Drawer\` toward the edge it came from, and a \`Toast\`
|
|
4278
|
+
message toward the end of the line. A swipe past halfway, or a quick one, closes
|
|
4279
|
+
it through the same cancelable request as its close control. A \`Drawer\` with
|
|
4280
|
+
\`snap-points\` comes to rest at the nearest point, such as half open. In a
|
|
4281
|
+
\`Lightbox\`, a swipe across the viewer shows the next or the previous item. A
|
|
4282
|
+
mouse never swipes, because dragging with a mouse selects text.
|
|
4283
|
+
|
|
4237
4284
|
## Choose an overlay
|
|
4238
4285
|
|
|
4239
4286
|
| Component | Use it for |
|