@fusion.dev/helix-docs 0.145.0 → 0.146.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 +11 -4
- package/content/localization.mdx +3 -3
- package/content/metrics.mdx +223 -223
- package/content/overlays.mdx +17 -6
- package/content/state-and-control.mdx +7 -5
- package/dist/sources.generated.js +261 -241
- package/package.json +9 -9
|
@@ -67,13 +67,20 @@ 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
|
|
71
|
-
\`<helix-icon-button> has no accessible name\`,
|
|
72
|
-
one. The check runs a moment after the control
|
|
73
|
-
framework writes beside the control in the same
|
|
70
|
+
A button, a form control, a button group or an open dialog that has no name
|
|
71
|
+
warns once in the console: \`<helix-icon-button> has no accessible name\`,
|
|
72
|
+
followed by the ways to give it one. The check runs a moment after the control
|
|
73
|
+
first renders, so a label your framework writes beside the control in the same
|
|
74
|
+
pass counts. The warning has the
|
|
74
75
|
kind \`missing-name\`, so \`@fusion.dev/helix-diagnostics\` counts it with the
|
|
75
76
|
other runtime events.
|
|
76
77
|
|
|
78
|
+
The warning prints in development builds only. Vite and webpack ask for the
|
|
79
|
+
\`development\` export condition while you develop, and so do
|
|
80
|
+
\`bun --conditions development\` and \`node --conditions=development\`. A production
|
|
81
|
+
build resolves the check to a function that does nothing and carries none of
|
|
82
|
+
its code.
|
|
83
|
+
|
|
77
84
|
### \`label\` and \`aria-label\`
|
|
78
85
|
|
|
79
86
|
\`label\` renders visible text and names the control through that text.
|
|
@@ -2799,9 +2806,9 @@ Firefox does not provide. There, and where you set no \`locale\`, the week start
|
|
|
2799
2806
|
on Sunday. Set \`first-day-of-week\` to choose the day yourself.
|
|
2800
2807
|
|
|
2801
2808
|
\`locale\` formats dates, times, and numbers. It does not translate the words a
|
|
2802
|
-
control speaks, such as "Previous month" on a calendar
|
|
2803
|
-
|
|
2804
|
-
|
|
2809
|
+
control speaks, such as "Previous month" on a calendar. Set those through their
|
|
2810
|
+
properties, such as \`previous-label\` and \`next-label\` on Date Picker and Date
|
|
2811
|
+
Input. A time wheel's name, such as "Hour", comes from the locale.
|
|
2805
2812
|
|
|
2806
2813
|
Formatting uses \`Intl\`, so Helix bundles no locale data, and you have nothing to
|
|
2807
2814
|
keep up to date.
|
|
@@ -3588,7 +3595,7 @@ on its own.
|
|
|
3588
3595
|
|
|
3589
3596
|
| | Raw | Gzip | Brotli |
|
|
3590
3597
|
|---|---|---|---|
|
|
3591
|
-
| Lit and \`@fusion.dev/helix-core\` |
|
|
3598
|
+
| Lit and \`@fusion.dev/helix-core\` | 193,574 | 59,922 | 51,738 |
|
|
3592
3599
|
|
|
3593
3600
|
## Whole packages
|
|
3594
3601
|
|
|
@@ -3599,12 +3606,12 @@ either barrel. The per-component tables show what your page pays.
|
|
|
3599
3606
|
|
|
3600
3607
|
| Package | Raw | Gzip | Brotli | |
|
|
3601
3608
|
|---|---|---|---|---|
|
|
3602
|
-
| \`@fusion.dev/helix-core\` |
|
|
3603
|
-
| \`@fusion.dev/helix-headless\` |
|
|
3609
|
+
| \`@fusion.dev/helix-core\` | 193,127 | 59,646 | 51,633 | The element base class, mixins, decorators, and floating positioning. |
|
|
3610
|
+
| \`@fusion.dev/helix-headless\` | 1,049,675 | 280,304 | 212,522 | Every headless family. The barrel entry includes all of them. |
|
|
3604
3611
|
| \`@fusion.dev/helix-icons\` | 55,738 | 17,784 | 15,143 | The whole glyph set. |
|
|
3605
3612
|
| \`@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. |
|
|
3606
3613
|
| \`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. |
|
|
3607
|
-
| \`@fusion.dev/helix\` | 1,
|
|
3614
|
+
| \`@fusion.dev/helix\` | 1,652,094 | 394,810 | 282,318 | Every styled family. |
|
|
3608
3615
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
|
|
3609
3616
|
|
|
3610
3617
|
## Stylesheets
|
|
@@ -3617,7 +3624,7 @@ shows the whole cost of using the base layer on its own.
|
|
|
3617
3624
|
|
|
3618
3625
|
| File | Raw | Gzip | Brotli | |
|
|
3619
3626
|
|---|---|---|---|---|
|
|
3620
|
-
| \`base.css\` | 31,
|
|
3627
|
+
| \`base.css\` | 31,946 | 4,590 | 3,986 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
|
|
3621
3628
|
| \`elements.css\` | 8,988 | 1,507 | 1,331 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
|
|
3622
3629
|
| \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
|
|
3623
3630
|
| \`primitives.css\` | 7,510 | 1,402 | 1,201 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
|
|
@@ -3625,13 +3632,13 @@ shows the whole cost of using the base layer on its own.
|
|
|
3625
3632
|
|
|
3626
3633
|
## What the numbers say
|
|
3627
3634
|
|
|
3628
|
-
**Most of your first component is the shared runtime.** The median styled family is
|
|
3635
|
+
**Most of your first component is the shared runtime.** The median styled family is 16,593 bytes gzipped alone, and it adds 3,472 to a page that already has Helix. The shared runtime is 79 percent of the first component, and the component itself is 21 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.
|
|
3629
3636
|
|
|
3630
|
-
Across the 104 styled components, the smallest is \`code\` at
|
|
3637
|
+
Across the 104 styled components, the smallest is \`code\` at 9,709 bytes gzipped alone, and the largest is \`data-table\` at 59,799. Every family together is 394,810.
|
|
3631
3638
|
|
|
3632
|
-
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
|
|
3639
|
+
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 280,304 bytes gzipped, whatever else the page imports. That is 17 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.
|
|
3633
3640
|
|
|
3634
|
-
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
|
|
3641
|
+
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 15,543 bytes gzipped alone.
|
|
3635
3642
|
|
|
3636
3643
|
## Compared with other systems
|
|
3637
3644
|
|
|
@@ -3643,43 +3650,43 @@ The table has no whole-library row. That row would compare how many components e
|
|
|
3643
3650
|
|
|
3644
3651
|
| Component | System | Raw | Gzip | Brotli |
|
|
3645
3652
|
|---|---|---|---|---|
|
|
3646
|
-
| \`button\` | **Helix** |
|
|
3653
|
+
| \`button\` | **Helix** | 45,987 | 15,139 | 13,449 |
|
|
3647
3654
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
3648
3655
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
3649
3656
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
3650
3657
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
3651
|
-
| \`checkbox\` | **Helix** |
|
|
3658
|
+
| \`checkbox\` | **Helix** | 49,373 | 15,701 | 13,969 |
|
|
3652
3659
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
3653
3660
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
3654
3661
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
3655
3662
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
3656
|
-
| \`dialog\` | **Helix** |
|
|
3663
|
+
| \`dialog\` | **Helix** | 46,501 | 15,697 | 13,964 |
|
|
3657
3664
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
3658
3665
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
3659
3666
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
3660
3667
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
3661
|
-
| \`radio\` | **Helix** |
|
|
3668
|
+
| \`radio\` | **Helix** | 52,721 | 16,186 | 14,360 |
|
|
3662
3669
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
3663
3670
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
3664
3671
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
3665
3672
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
3666
|
-
| \`switch\` | **Helix** |
|
|
3673
|
+
| \`switch\` | **Helix** | 46,090 | 15,170 | 13,492 |
|
|
3667
3674
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
3668
3675
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
3669
3676
|
| | Shoelace | 37,833 | 11,814 | 10,568 |
|
|
3670
3677
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
3671
|
-
| \`tabs\` | **Helix** |
|
|
3678
|
+
| \`tabs\` | **Helix** | 49,184 | 15,669 | 13,856 |
|
|
3672
3679
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
3673
3680
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
3674
3681
|
| | Shoelace | 54,573 | 17,140 | 15,068 |
|
|
3675
3682
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
3676
|
-
| \`tooltip\` | **Helix** |
|
|
3683
|
+
| \`tooltip\` | **Helix** | 64,554 | 22,770 | 20,202 |
|
|
3677
3684
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
3678
3685
|
| | Material Web | | not shipped | |
|
|
3679
3686
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
3680
3687
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
3681
3688
|
|
|
3682
|
-
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at
|
|
3689
|
+
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is radio against Spectrum, at 5,526 bytes gzipped. 14 of 27 peer measurements are smaller than the Helix row.
|
|
3683
3690
|
|
|
3684
3691
|
Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
|
|
3685
3692
|
|
|
@@ -3725,104 +3732,104 @@ Structure, accessibility, state, and form participation. It has no presentation
|
|
|
3725
3732
|
|
|
3726
3733
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
3727
3734
|
|---|---|---|---|---|---|---|
|
|
3728
|
-
| \`accordion\` |
|
|
3729
|
-
| \`announcement\` |
|
|
3730
|
-
| \`app-header\` |
|
|
3731
|
-
| \`area-chart\` |
|
|
3732
|
-
| \`avatar\` |
|
|
3733
|
-
| \`badge\` |
|
|
3734
|
-
| \`bar-chart\` |
|
|
3735
|
-
| \`blockquote\` |
|
|
3736
|
-
| \`breadcrumbs\` |
|
|
3737
|
-
| \`button\` |
|
|
3738
|
-
| \`button-group\` |
|
|
3739
|
-
| \`callout\` |
|
|
3740
|
-
| \`canvas\` |
|
|
3741
|
-
| \`card\` |
|
|
3742
|
-
| \`carousel\` |
|
|
3743
|
-
| \`chat\` |
|
|
3744
|
-
| \`checkbox\` |
|
|
3745
|
-
| \`checkbox-group\` |
|
|
3746
|
-
| \`code\` |
|
|
3747
|
-
| \`code-block\` |
|
|
3748
|
-
| \`color-input\` |
|
|
3749
|
-
| \`color-picker\` |
|
|
3750
|
-
| \`combobox\` |
|
|
3751
|
-
| \`command\` |
|
|
3752
|
-
| \`copy-button\` |
|
|
3753
|
-
| \`data-table\` |
|
|
3754
|
-
| \`date-input\` |
|
|
3755
|
-
| \`date-picker\` |
|
|
3756
|
-
| \`description-list\` |
|
|
3757
|
-
| \`dialog\` |
|
|
3758
|
-
| \`divider\` |
|
|
3759
|
-
| \`donut-chart\` |
|
|
3760
|
-
| \`drawer\` |
|
|
3761
|
-
| \`drilldown\` |
|
|
3762
|
-
| \`empty\` |
|
|
3763
|
-
| \`file-input\` |
|
|
3764
|
-
| \`filter-input\` |
|
|
3765
|
-
| \`format-date\` |
|
|
3766
|
-
| \`graph\` |
|
|
3767
|
-
| \`heatmap\` |
|
|
3768
|
-
| \`icon\` |
|
|
3769
|
-
| \`icon-button\` |
|
|
3770
|
-
| \`image\` |
|
|
3771
|
-
| \`input\` |
|
|
3772
|
-
| \`kbd\` |
|
|
3773
|
-
| \`legend\` |
|
|
3774
|
-
| \`lightbox\` |
|
|
3775
|
-
| \`line-chart\` |
|
|
3776
|
-
| \`list\` |
|
|
3777
|
-
| \`listbox\` |
|
|
3778
|
-
| \`loader\` |
|
|
3779
|
-
| \`map\` |
|
|
3780
|
-
| \`megamenu\` |
|
|
3781
|
-
| \`menu\` |
|
|
3782
|
-
| \`meter\` |
|
|
3783
|
-
| \`navigation\` |
|
|
3784
|
-
| \`notifications\` |
|
|
3785
|
-
| \`number-input\` |
|
|
3786
|
-
| \`object-inspector\` |
|
|
3787
|
-
| \`option\` |
|
|
3788
|
-
| \`outline\` |
|
|
3789
|
-
| \`pagination\` |
|
|
3790
|
-
| \`pin-input\` |
|
|
3791
|
-
| \`popover\` |
|
|
3792
|
-
| \`progress\` |
|
|
3793
|
-
| \`qr-code\` |
|
|
3794
|
-
| \`quote\` |
|
|
3795
|
-
| \`radio\` |
|
|
3796
|
-
| \`rating\` |
|
|
3797
|
-
| \`scatter-chart\` |
|
|
3798
|
-
| \`scroll-area\` |
|
|
3799
|
-
| \`select\` |
|
|
3800
|
-
| \`skeleton\` |
|
|
3801
|
-
| \`skip-link\` |
|
|
3802
|
-
| \`slider\` |
|
|
3803
|
-
| \`sparkline\` |
|
|
3804
|
-
| \`speed-dial\` |
|
|
3805
|
-
| \`splitter\` |
|
|
3806
|
-
| \`stat\` |
|
|
3807
|
-
| \`steps\` |
|
|
3808
|
-
| \`switch\` |
|
|
3809
|
-
| \`table\` |
|
|
3810
|
-
| \`tabs\` |
|
|
3811
|
-
| \`tag\` |
|
|
3812
|
-
| \`textarea\` |
|
|
3813
|
-
| \`time-input\` |
|
|
3814
|
-
| \`time-picker\` |
|
|
3815
|
-
| \`timeline\` |
|
|
3816
|
-
| \`toast\` |
|
|
3817
|
-
| \`toggle\` |
|
|
3818
|
-
| \`toolbar\` |
|
|
3819
|
-
| \`tooltip\` |
|
|
3820
|
-
| \`tour\` |
|
|
3821
|
-
| \`tree\` |
|
|
3822
|
-
| \`trend\` |
|
|
3823
|
-
| \`video\` |
|
|
3824
|
-
| \`video-playlist\` |
|
|
3825
|
-
| \`virtual-list\` |
|
|
3735
|
+
| \`accordion\` | 35,423 | 12,826 | 11,340 | 5,240 | 1,537 | 1,134 |
|
|
3736
|
+
| \`announcement\` | 32,949 | 12,153 | 10,766 | 2,334 | 728 | 465 |
|
|
3737
|
+
| \`app-header\` | 27,775 | 10,422 | 9,235 | 2,353 | 797 | 441 |
|
|
3738
|
+
| \`area-chart\` | 82,110 | 28,769 | 25,449 | 13,609 | 4,251 | 3,223 |
|
|
3739
|
+
| \`avatar\` | 30,163 | 11,082 | 9,856 | 4,150 | 1,236 | 837 |
|
|
3740
|
+
| \`badge\` | 25,996 | 9,988 | 8,834 | 1,166 | 446 | 276 |
|
|
3741
|
+
| \`bar-chart\` | 85,712 | 29,822 | 26,319 | 16,829 | 5,157 | 4,124 |
|
|
3742
|
+
| \`blockquote\` | 26,054 | 9,998 | 8,859 | 912 | 383 | 260 |
|
|
3743
|
+
| \`breadcrumbs\` | 31,881 | 12,006 | 10,663 | 5,723 | 1,992 | 1,429 |
|
|
3744
|
+
| \`button\` | 38,605 | 13,625 | 12,122 | 5,049 | 1,574 | 1,104 |
|
|
3745
|
+
| \`button-group\` | 25,941 | 9,897 | 8,775 | 813 | 370 | 137 |
|
|
3746
|
+
| \`callout\` | 31,820 | 12,008 | 10,597 | 1,329 | 532 | 297 |
|
|
3747
|
+
| \`canvas\` | 91,470 | 28,585 | 25,063 | 52,251 | 15,727 | 13,050 |
|
|
3748
|
+
| \`card\` | 27,130 | 10,217 | 9,043 | 1,851 | 580 | 365 |
|
|
3749
|
+
| \`carousel\` | 42,208 | 14,656 | 13,052 | 15,389 | 4,276 | 3,351 |
|
|
3750
|
+
| \`chat\` | 65,158 | 21,678 | 19,216 | 20,600 | 6,203 | 4,819 |
|
|
3751
|
+
| \`checkbox\` | 42,324 | 14,165 | 12,583 | 3,277 | 1,054 | 615 |
|
|
3752
|
+
| \`checkbox-group\` | 48,181 | 15,555 | 13,831 | 8,402 | 2,358 | 1,613 |
|
|
3753
|
+
| \`code\` | 24,390 | 9,404 | 8,342 | 451 | 227 | 98 |
|
|
3754
|
+
| \`code-block\` | 89,847 | 30,065 | 26,630 | 25,864 | 7,093 | 5,531 |
|
|
3755
|
+
| \`color-input\` | 120,136 | 37,964 | 33,341 | 40,217 | 10,367 | 8,219 |
|
|
3756
|
+
| \`color-picker\` | 82,088 | 26,085 | 23,018 | 32,695 | 8,872 | 6,965 |
|
|
3757
|
+
| \`combobox\` | 120,047 | 36,804 | 32,432 | 39,475 | 9,780 | 7,691 |
|
|
3758
|
+
| \`command\` | 80,751 | 24,427 | 21,471 | 29,428 | 7,708 | 6,017 |
|
|
3759
|
+
| \`copy-button\` | 81,885 | 27,778 | 24,618 | 17,897 | 4,822 | 3,714 |
|
|
3760
|
+
| \`data-table\` | 169,429 | 49,981 | 43,147 | 84,129 | 21,748 | 17,364 |
|
|
3761
|
+
| \`date-input\` | 127,792 | 39,085 | 34,317 | 35,370 | 8,656 | 6,894 |
|
|
3762
|
+
| \`date-picker\` | 52,220 | 17,360 | 15,484 | 16,851 | 4,534 | 3,492 |
|
|
3763
|
+
| \`description-list\` | 27,096 | 10,107 | 8,945 | 1,984 | 627 | 316 |
|
|
3764
|
+
| \`dialog\` | 40,879 | 14,414 | 12,811 | 5,808 | 1,850 | 1,288 |
|
|
3765
|
+
| \`divider\` | 26,188 | 10,050 | 8,888 | 1,046 | 433 | 203 |
|
|
3766
|
+
| \`donut-chart\` | 81,537 | 28,278 | 25,066 | 14,342 | 4,365 | 3,488 |
|
|
3767
|
+
| \`drawer\` | 41,311 | 14,769 | 13,082 | 5,608 | 1,851 | 1,362 |
|
|
3768
|
+
| \`drilldown\` | 41,653 | 14,666 | 13,039 | 6,974 | 1,996 | 1,331 |
|
|
3769
|
+
| \`empty\` | 26,647 | 10,138 | 8,991 | 1,042 | 419 | 236 |
|
|
3770
|
+
| \`file-input\` | 62,374 | 20,646 | 18,328 | 16,194 | 4,891 | 3,694 |
|
|
3771
|
+
| \`filter-input\` | 122,835 | 37,749 | 33,184 | 41,280 | 10,308 | 8,123 |
|
|
3772
|
+
| \`format-date\` | 31,709 | 11,709 | 10,404 | 4,029 | 1,242 | 828 |
|
|
3773
|
+
| \`graph\` | 62,029 | 20,340 | 18,079 | 14,808 | 4,776 | 3,721 |
|
|
3774
|
+
| \`heatmap\` | 84,761 | 29,046 | 25,700 | 14,176 | 4,148 | 3,195 |
|
|
3775
|
+
| \`icon\` | 83,642 | 28,532 | 24,430 | 56,072 | 19,519 | 15,448 |
|
|
3776
|
+
| \`icon-button\` | 39,001 | 13,660 | 12,144 | 5,448 | 1,621 | 1,083 |
|
|
3777
|
+
| \`image\` | 29,459 | 10,836 | 9,612 | 4,000 | 1,274 | 910 |
|
|
3778
|
+
| \`input\` | 48,568 | 16,527 | 14,518 | 7,411 | 2,566 | 1,686 |
|
|
3779
|
+
| \`kbd\` | 30,072 | 11,369 | 10,029 | 3,896 | 1,384 | 909 |
|
|
3780
|
+
| \`legend\` | 36,324 | 13,374 | 11,907 | 3,243 | 1,167 | 785 |
|
|
3781
|
+
| \`lightbox\` | 47,121 | 15,871 | 14,039 | 11,932 | 3,469 | 2,561 |
|
|
3782
|
+
| \`line-chart\` | 83,221 | 28,949 | 25,642 | 14,445 | 4,361 | 3,458 |
|
|
3783
|
+
| \`list\` | 38,215 | 13,672 | 12,149 | 9,041 | 2,688 | 2,015 |
|
|
3784
|
+
| \`listbox\` | 62,592 | 19,927 | 17,722 | 17,522 | 4,867 | 3,709 |
|
|
3785
|
+
| \`loader\` | 28,576 | 10,705 | 9,499 | 2,644 | 944 | 594 |
|
|
3786
|
+
| \`map\` | 79,883 | 23,693 | 20,598 | 38,035 | 10,009 | 7,669 |
|
|
3787
|
+
| \`megamenu\` | 59,654 | 21,572 | 19,051 | 7,054 | 2,083 | 1,406 |
|
|
3788
|
+
| \`menu\` | 83,080 | 28,173 | 24,866 | 18,800 | 4,954 | 3,687 |
|
|
3789
|
+
| \`meter\` | 29,986 | 11,096 | 9,838 | 4,520 | 1,398 | 1,084 |
|
|
3790
|
+
| \`navigation\` | 33,741 | 12,529 | 11,093 | 2,196 | 820 | 531 |
|
|
3791
|
+
| \`notifications\` | 52,218 | 17,085 | 15,214 | 15,863 | 4,166 | 3,253 |
|
|
3792
|
+
| \`number-input\` | 51,957 | 17,267 | 15,301 | 9,740 | 2,691 | 1,909 |
|
|
3793
|
+
| \`object-inspector\` | 107,134 | 35,646 | 31,254 | 34,041 | 9,915 | 7,741 |
|
|
3794
|
+
| \`option\` | 29,099 | 10,679 | 9,475 | 3,487 | 935 | 611 |
|
|
3795
|
+
| \`outline\` | 34,626 | 12,794 | 11,332 | 6,999 | 2,283 | 1,702 |
|
|
3796
|
+
| \`pagination\` | 112,953 | 35,161 | 30,734 | 40,707 | 10,319 | 8,063 |
|
|
3797
|
+
| \`pin-input\` | 45,867 | 15,347 | 13,631 | 6,396 | 2,041 | 1,387 |
|
|
3798
|
+
| \`popover\` | 62,824 | 22,561 | 19,944 | 5,399 | 1,663 | 1,104 |
|
|
3799
|
+
| \`progress\` | 28,074 | 10,603 | 9,386 | 2,609 | 889 | 705 |
|
|
3800
|
+
| \`qr-code\` | 41,476 | 15,779 | 13,951 | 16,453 | 6,132 | 5,004 |
|
|
3801
|
+
| \`quote\` | 25,969 | 10,007 | 8,829 | 1,226 | 581 | 376 |
|
|
3802
|
+
| \`radio\` | 43,945 | 14,629 | 12,962 | 3,911 | 1,202 | 765 |
|
|
3803
|
+
| \`rating\` | 49,624 | 16,604 | 14,718 | 8,315 | 2,525 | 1,783 |
|
|
3804
|
+
| \`scatter-chart\` | 82,495 | 28,617 | 25,255 | 14,851 | 4,532 | 3,492 |
|
|
3805
|
+
| \`scroll-area\` | 34,470 | 12,424 | 11,027 | 8,851 | 2,742 | 2,080 |
|
|
3806
|
+
| \`select\` | 96,990 | 31,255 | 27,502 | 25,121 | 6,555 | 4,986 |
|
|
3807
|
+
| \`skeleton\` | 26,368 | 10,020 | 8,867 | 1,255 | 504 | 245 |
|
|
3808
|
+
| \`skip-link\` | 26,483 | 10,143 | 8,958 | 1,512 | 637 | 417 |
|
|
3809
|
+
| \`slider\` | 46,921 | 15,530 | 13,873 | 7,821 | 2,263 | 1,705 |
|
|
3810
|
+
| \`sparkline\` | 41,635 | 15,324 | 13,611 | 4,695 | 1,778 | 1,324 |
|
|
3811
|
+
| \`speed-dial\` | 60,809 | 22,254 | 19,770 | 4,222 | 1,265 | 790 |
|
|
3812
|
+
| \`splitter\` | 40,164 | 13,759 | 12,216 | 11,515 | 3,109 | 2,487 |
|
|
3813
|
+
| \`stat\` | 27,196 | 10,190 | 9,045 | 1,896 | 644 | 353 |
|
|
3814
|
+
| \`steps\` | 48,069 | 16,143 | 14,337 | 11,292 | 3,182 | 2,401 |
|
|
3815
|
+
| \`switch\` | 41,238 | 13,997 | 12,442 | 1,791 | 695 | 344 |
|
|
3816
|
+
| \`table\` | 66,222 | 20,480 | 18,214 | 21,651 | 5,865 | 4,536 |
|
|
3817
|
+
| \`tabs\` | 40,656 | 13,980 | 12,414 | 5,885 | 1,572 | 1,004 |
|
|
3818
|
+
| \`tag\` | 39,623 | 14,246 | 12,688 | 6,540 | 1,979 | 1,410 |
|
|
3819
|
+
| \`textarea\` | 46,159 | 15,528 | 13,775 | 5,559 | 1,745 | 1,157 |
|
|
3820
|
+
| \`time-input\` | 142,372 | 43,174 | 37,539 | 45,425 | 11,385 | 8,949 |
|
|
3821
|
+
| \`time-picker\` | 75,931 | 23,622 | 20,952 | 28,692 | 7,720 | 5,921 |
|
|
3822
|
+
| \`timeline\` | 29,277 | 10,803 | 9,574 | 3,150 | 807 | 503 |
|
|
3823
|
+
| \`toast\` | 44,585 | 15,809 | 13,988 | 8,606 | 2,681 | 1,954 |
|
|
3824
|
+
| \`toggle\` | 47,735 | 15,698 | 13,936 | 5,878 | 1,722 | 1,225 |
|
|
3825
|
+
| \`toolbar\` | 32,263 | 11,971 | 10,643 | 4,344 | 1,526 | 1,092 |
|
|
3826
|
+
| \`tooltip\` | 61,359 | 21,986 | 19,516 | 8,461 | 2,510 | 1,862 |
|
|
3827
|
+
| \`tour\` | 79,690 | 26,859 | 23,810 | 17,127 | 4,712 | 3,699 |
|
|
3828
|
+
| \`tree\` | 48,344 | 16,359 | 14,493 | 12,015 | 3,467 | 2,614 |
|
|
3829
|
+
| \`trend\` | 28,378 | 10,747 | 9,501 | 2,728 | 877 | 695 |
|
|
3830
|
+
| \`video\` | 121,383 | 37,645 | 32,926 | 52,146 | 13,024 | 10,436 |
|
|
3831
|
+
| \`video-playlist\` | 93,065 | 30,392 | 26,801 | 26,920 | 6,816 | 5,310 |
|
|
3832
|
+
| \`virtual-list\` | 47,544 | 16,611 | 14,739 | 11,130 | 3,551 | 2,670 |
|
|
3826
3833
|
|
|
3827
3834
|
### Styled tier
|
|
3828
3835
|
|
|
@@ -3830,110 +3837,110 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
|
|
|
3830
3837
|
|
|
3831
3838
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
3832
3839
|
|---|---|---|---|---|---|---|
|
|
3833
|
-
| \`accordion\` |
|
|
3834
|
-
| \`announcement\` |
|
|
3835
|
-
| \`app-header\` |
|
|
3836
|
-
| \`area-chart\` |
|
|
3837
|
-
| \`aura\` |
|
|
3838
|
-
| \`avatar\` |
|
|
3839
|
-
| \`badge\` |
|
|
3840
|
-
| \`bar-chart\` |
|
|
3841
|
-
| \`blockquote\` |
|
|
3842
|
-
| \`breadcrumbs\` |
|
|
3843
|
-
| \`button\` |
|
|
3844
|
-
| \`button-group\` |
|
|
3845
|
-
| \`callout\` |
|
|
3846
|
-
| \`canvas\` |
|
|
3847
|
-
| \`card\` |
|
|
3848
|
-
| \`carousel\` |
|
|
3849
|
-
| \`chat\` |
|
|
3850
|
-
| \`checkbox\` |
|
|
3851
|
-
| \`checkbox-group\` |
|
|
3852
|
-
| \`code\` |
|
|
3853
|
-
| \`code-block\` |
|
|
3854
|
-
| \`color-input\` |
|
|
3855
|
-
| \`color-picker\` |
|
|
3856
|
-
| \`combobox\` |
|
|
3857
|
-
| \`command\` |
|
|
3858
|
-
| \`copy-button\` |
|
|
3859
|
-
| \`data-table\` |
|
|
3860
|
-
| \`date-input\` |
|
|
3861
|
-
| \`date-picker\` |
|
|
3862
|
-
| \`description-list\` |
|
|
3863
|
-
| \`dialog\` |
|
|
3864
|
-
| \`divider\` |
|
|
3865
|
-
| \`donut-chart\` |
|
|
3866
|
-
| \`drawer\` |
|
|
3867
|
-
| \`drilldown\` |
|
|
3868
|
-
| \`empty\` |
|
|
3869
|
-
| \`file-input\` |
|
|
3870
|
-
| \`filter-input\` |
|
|
3871
|
-
| \`flex\` |
|
|
3872
|
-
| \`format-date\` |
|
|
3873
|
-
| \`graph\` |
|
|
3874
|
-
| \`grid\` |
|
|
3875
|
-
| \`heatmap\` |
|
|
3876
|
-
| \`icon\` |
|
|
3877
|
-
| \`icon-button\` |
|
|
3878
|
-
| \`image\` |
|
|
3879
|
-
| \`input\` |
|
|
3880
|
-
| \`kbd\` |
|
|
3881
|
-
| \`legend\` |
|
|
3882
|
-
| \`lightbox\` |
|
|
3883
|
-
| \`line-chart\` |
|
|
3884
|
-
| \`list\` |
|
|
3885
|
-
| \`listbox\` |
|
|
3886
|
-
| \`loader\` |
|
|
3887
|
-
| \`map\` |
|
|
3888
|
-
| \`megamenu\` |
|
|
3889
|
-
| \`menu\` |
|
|
3890
|
-
| \`meter\` |
|
|
3891
|
-
| \`navigation\` |
|
|
3892
|
-
| \`notifications\` |
|
|
3893
|
-
| \`number-input\` |
|
|
3894
|
-
| \`object-inspector\` |
|
|
3895
|
-
| \`option\` |
|
|
3896
|
-
| \`orb\` |
|
|
3897
|
-
| \`outline\` |
|
|
3898
|
-
| \`pagination\` |
|
|
3899
|
-
| \`pin-input\` |
|
|
3900
|
-
| \`popover\` |
|
|
3901
|
-
| \`progress\` |
|
|
3902
|
-
| \`qr-code\` |
|
|
3903
|
-
| \`quote\` |
|
|
3904
|
-
| \`radio\` |
|
|
3905
|
-
| \`rating\` |
|
|
3906
|
-
| \`sandbox\` |
|
|
3907
|
-
| \`scatter-chart\` |
|
|
3908
|
-
| \`scroll-area\` |
|
|
3909
|
-
| \`select\` |
|
|
3910
|
-
| \`skeleton\` |
|
|
3911
|
-
| \`skip-link\` |
|
|
3912
|
-
| \`slider\` |
|
|
3913
|
-
| \`sparkline\` |
|
|
3914
|
-
| \`speed-dial\` |
|
|
3915
|
-
| \`splitter\` |
|
|
3916
|
-
| \`stat\` |
|
|
3917
|
-
| \`steps\` |
|
|
3918
|
-
| \`switch\` |
|
|
3919
|
-
| \`table\` |
|
|
3920
|
-
| \`tabs\` |
|
|
3921
|
-
| \`tag\` |
|
|
3922
|
-
| \`text\` |
|
|
3923
|
-
| \`textarea\` |
|
|
3924
|
-
| \`time-input\` |
|
|
3925
|
-
| \`time-picker\` |
|
|
3926
|
-
| \`timeline\` |
|
|
3927
|
-
| \`toast\` |
|
|
3928
|
-
| \`toggle\` |
|
|
3929
|
-
| \`toolbar\` |
|
|
3930
|
-
| \`tooltip\` |
|
|
3931
|
-
| \`tour\` |
|
|
3932
|
-
| \`tree\` |
|
|
3933
|
-
| \`trend\` |
|
|
3934
|
-
| \`video\` |
|
|
3935
|
-
| \`video-playlist\` |
|
|
3936
|
-
| \`virtual-list\` |
|
|
3840
|
+
| \`accordion\` | 39,648 | 13,717 | 12,166 | 9,452 | 2,459 | 1,956 |
|
|
3841
|
+
| \`announcement\` | 37,714 | 13,213 | 11,692 | 7,081 | 1,807 | 1,416 |
|
|
3842
|
+
| \`app-header\` | 31,665 | 11,326 | 10,023 | 6,226 | 1,738 | 1,322 |
|
|
3843
|
+
| \`area-chart\` | 90,087 | 30,477 | 26,982 | 21,562 | 5,984 | 4,746 |
|
|
3844
|
+
| \`aura\` | 55,272 | 18,976 | 16,767 | 28,121 | 8,833 | 7,475 |
|
|
3845
|
+
| \`avatar\` | 33,752 | 11,841 | 10,478 | 7,724 | 2,038 | 1,583 |
|
|
3846
|
+
| \`badge\` | 31,616 | 11,165 | 9,841 | 6,773 | 1,633 | 1,237 |
|
|
3847
|
+
| \`bar-chart\` | 99,274 | 32,501 | 28,802 | 30,373 | 7,886 | 6,412 |
|
|
3848
|
+
| \`blockquote\` | 27,480 | 10,325 | 9,128 | 2,320 | 714 | 477 |
|
|
3849
|
+
| \`breadcrumbs\` | 36,411 | 12,875 | 11,407 | 10,237 | 2,909 | 2,222 |
|
|
3850
|
+
| \`button\` | 45,987 | 15,139 | 13,449 | 12,413 | 3,124 | 2,350 |
|
|
3851
|
+
| \`button-group\` | 27,619 | 10,269 | 9,095 | 2,472 | 757 | 463 |
|
|
3852
|
+
| \`callout\` | 35,772 | 12,923 | 11,405 | 5,264 | 1,469 | 1,158 |
|
|
3853
|
+
| \`canvas\` | 111,811 | 32,315 | 28,173 | 72,583 | 19,572 | 16,120 |
|
|
3854
|
+
| \`card\` | 30,920 | 11,170 | 9,882 | 5,624 | 1,534 | 1,146 |
|
|
3855
|
+
| \`carousel\` | 53,470 | 16,505 | 14,730 | 26,637 | 6,234 | 4,932 |
|
|
3856
|
+
| \`chat\` | 79,518 | 24,218 | 21,431 | 34,954 | 8,773 | 7,097 |
|
|
3857
|
+
| \`checkbox\` | 49,373 | 15,701 | 13,969 | 10,311 | 2,619 | 1,989 |
|
|
3858
|
+
| \`checkbox-group\` | 56,334 | 17,248 | 15,344 | 16,544 | 4,121 | 3,144 |
|
|
3859
|
+
| \`code\` | 25,513 | 9,709 | 8,603 | 1,556 | 516 | 329 |
|
|
3860
|
+
| \`code-block\` | 110,938 | 33,351 | 29,516 | 46,941 | 10,550 | 8,467 |
|
|
3861
|
+
| \`color-input\` | 156,927 | 43,520 | 38,261 | 76,994 | 15,798 | 13,028 |
|
|
3862
|
+
| \`color-picker\` | 112,915 | 30,856 | 27,252 | 63,513 | 13,715 | 11,191 |
|
|
3863
|
+
| \`combobox\` | 137,388 | 39,769 | 35,011 | 56,798 | 12,779 | 10,333 |
|
|
3864
|
+
| \`command\` | 92,981 | 26,697 | 23,556 | 41,645 | 10,084 | 8,040 |
|
|
3865
|
+
| \`copy-button\` | 95,290 | 30,001 | 26,514 | 31,283 | 7,088 | 5,554 |
|
|
3866
|
+
| \`data-table\` | 219,309 | 59,799 | 50,341 | 133,542 | 31,483 | 24,314 |
|
|
3867
|
+
| \`date-input\` | 149,493 | 42,780 | 37,603 | 57,055 | 12,400 | 10,054 |
|
|
3868
|
+
| \`date-picker\` | 59,901 | 18,687 | 16,655 | 24,514 | 5,925 | 4,668 |
|
|
3869
|
+
| \`description-list\` | 29,802 | 10,712 | 9,489 | 4,675 | 1,233 | 851 |
|
|
3870
|
+
| \`dialog\` | 46,501 | 15,697 | 13,964 | 11,409 | 3,146 | 2,449 |
|
|
3871
|
+
| \`divider\` | 28,768 | 10,650 | 9,394 | 3,607 | 1,044 | 818 |
|
|
3872
|
+
| \`donut-chart\` | 92,006 | 30,393 | 26,916 | 24,787 | 6,534 | 5,257 |
|
|
3873
|
+
| \`drawer\` | 47,737 | 16,225 | 14,466 | 12,015 | 3,314 | 2,646 |
|
|
3874
|
+
| \`drilldown\` | 47,177 | 15,844 | 14,102 | 12,483 | 3,203 | 2,454 |
|
|
3875
|
+
| \`empty\` | 28,323 | 10,625 | 9,379 | 2,699 | 905 | 624 |
|
|
3876
|
+
| \`file-input\` | 74,567 | 22,958 | 20,367 | 28,375 | 7,195 | 5,725 |
|
|
3877
|
+
| \`filter-input\` | 154,784 | 42,931 | 37,576 | 72,853 | 15,284 | 12,395 |
|
|
3878
|
+
| \`flex\` | 30,108 | 10,626 | 9,401 | 5,354 | 1,236 | 884 |
|
|
3879
|
+
| \`format-date\` | 32,358 | 11,850 | 10,514 | 4,659 | 1,414 | 1,008 |
|
|
3880
|
+
| \`graph\` | 77,140 | 22,929 | 20,207 | 29,899 | 7,446 | 5,912 |
|
|
3881
|
+
| \`grid\` | 30,903 | 11,036 | 9,784 | 6,154 | 1,606 | 1,244 |
|
|
3882
|
+
| \`heatmap\` | 92,356 | 30,614 | 27,062 | 21,750 | 5,729 | 4,580 |
|
|
3883
|
+
| \`icon\` | 84,349 | 28,702 | 24,576 | 56,761 | 19,719 | 15,680 |
|
|
3884
|
+
| \`icon-button\` | 47,707 | 15,105 | 13,400 | 14,134 | 3,125 | 2,360 |
|
|
3885
|
+
| \`image\` | 31,155 | 11,301 | 10,008 | 5,676 | 1,756 | 1,277 |
|
|
3886
|
+
| \`input\` | 53,316 | 17,622 | 15,495 | 12,142 | 3,694 | 2,733 |
|
|
3887
|
+
| \`kbd\` | 32,296 | 11,921 | 10,536 | 6,101 | 1,922 | 1,344 |
|
|
3888
|
+
| \`legend\` | 41,820 | 14,643 | 12,910 | 8,608 | 2,426 | 1,759 |
|
|
3889
|
+
| \`lightbox\` | 53,408 | 17,147 | 15,190 | 18,202 | 4,760 | 3,642 |
|
|
3890
|
+
| \`line-chart\` | 94,186 | 31,168 | 27,626 | 25,394 | 6,610 | 5,268 |
|
|
3891
|
+
| \`list\` | 43,351 | 14,851 | 13,191 | 14,157 | 3,877 | 3,029 |
|
|
3892
|
+
| \`listbox\` | 67,349 | 20,979 | 18,642 | 22,266 | 5,923 | 4,560 |
|
|
3893
|
+
| \`loader\` | 31,947 | 11,533 | 10,206 | 5,998 | 1,768 | 1,328 |
|
|
3894
|
+
| \`map\` | 116,933 | 29,086 | 25,357 | 75,073 | 15,487 | 12,386 |
|
|
3895
|
+
| \`megamenu\` | 64,956 | 22,722 | 20,138 | 12,340 | 3,234 | 2,437 |
|
|
3896
|
+
| \`menu\` | 94,419 | 30,294 | 26,742 | 30,132 | 7,145 | 5,585 |
|
|
3897
|
+
| \`meter\` | 36,173 | 12,337 | 10,960 | 10,687 | 2,670 | 2,241 |
|
|
3898
|
+
| \`navigation\` | 35,512 | 13,002 | 11,548 | 3,950 | 1,315 | 891 |
|
|
3899
|
+
| \`notifications\` | 66,278 | 19,550 | 17,442 | 29,914 | 6,700 | 5,373 |
|
|
3900
|
+
| \`number-input\` | 57,367 | 18,461 | 16,401 | 15,131 | 3,925 | 2,998 |
|
|
3901
|
+
| \`object-inspector\` | 125,222 | 38,543 | 33,849 | 52,111 | 12,858 | 10,259 |
|
|
3902
|
+
| \`option\` | 32,356 | 11,597 | 10,269 | 6,728 | 1,839 | 1,424 |
|
|
3903
|
+
| \`orb\` | 37,072 | 14,019 | 12,406 | 9,455 | 3,624 | 2,995 |
|
|
3904
|
+
| \`outline\` | 38,686 | 13,623 | 12,113 | 11,041 | 3,111 | 2,422 |
|
|
3905
|
+
| \`pagination\` | 131,174 | 38,247 | 33,447 | 58,910 | 13,423 | 10,780 |
|
|
3906
|
+
| \`pin-input\` | 49,458 | 16,242 | 14,464 | 9,965 | 2,948 | 2,173 |
|
|
3907
|
+
| \`popover\` | 66,446 | 23,365 | 20,707 | 9,003 | 2,495 | 1,786 |
|
|
3908
|
+
| \`progress\` | 33,746 | 11,886 | 10,543 | 8,261 | 2,186 | 1,724 |
|
|
3909
|
+
| \`qr-code\` | 43,343 | 16,256 | 14,361 | 18,304 | 6,645 | 5,494 |
|
|
3910
|
+
| \`quote\` | 26,748 | 10,201 | 9,004 | 1,987 | 771 | 485 |
|
|
3911
|
+
| \`radio\` | 52,721 | 16,186 | 14,360 | 12,675 | 2,829 | 2,215 |
|
|
3912
|
+
| \`rating\` | 53,941 | 17,838 | 15,865 | 12,610 | 3,777 | 2,924 |
|
|
3913
|
+
| \`sandbox\` | 73,642 | 20,738 | 18,327 | 42,938 | 9,908 | 8,082 |
|
|
3914
|
+
| \`scatter-chart\` | 91,707 | 30,604 | 27,058 | 24,041 | 6,525 | 5,271 |
|
|
3915
|
+
| \`scroll-area\` | 39,737 | 13,392 | 11,914 | 14,098 | 3,720 | 2,900 |
|
|
3916
|
+
| \`select\` | 110,083 | 33,673 | 29,635 | 38,199 | 9,006 | 7,220 |
|
|
3917
|
+
| \`skeleton\` | 29,150 | 10,708 | 9,479 | 4,019 | 1,206 | 941 |
|
|
3918
|
+
| \`skip-link\` | 28,435 | 10,669 | 9,404 | 3,445 | 1,156 | 823 |
|
|
3919
|
+
| \`slider\` | 58,875 | 17,557 | 15,668 | 19,758 | 4,338 | 3,490 |
|
|
3920
|
+
| \`sparkline\` | 47,130 | 16,627 | 14,838 | 10,172 | 3,094 | 2,565 |
|
|
3921
|
+
| \`speed-dial\` | 67,690 | 23,550 | 20,901 | 11,082 | 2,596 | 1,939 |
|
|
3922
|
+
| \`splitter\` | 46,236 | 14,764 | 13,121 | 17,569 | 4,176 | 3,336 |
|
|
3923
|
+
| \`stat\` | 30,837 | 10,934 | 9,708 | 5,523 | 1,398 | 1,120 |
|
|
3924
|
+
| \`steps\` | 63,670 | 19,017 | 16,847 | 26,882 | 6,122 | 4,878 |
|
|
3925
|
+
| \`switch\` | 46,090 | 15,170 | 13,492 | 6,628 | 1,890 | 1,400 |
|
|
3926
|
+
| \`table\` | 80,130 | 22,990 | 20,413 | 35,549 | 8,413 | 6,744 |
|
|
3927
|
+
| \`tabs\` | 49,184 | 15,669 | 13,856 | 14,401 | 3,320 | 2,587 |
|
|
3928
|
+
| \`tag\` | 44,798 | 15,385 | 13,680 | 11,697 | 3,094 | 2,373 |
|
|
3929
|
+
| \`text\` | 32,695 | 11,038 | 9,748 | 7,950 | 1,677 | 1,239 |
|
|
3930
|
+
| \`textarea\` | 50,571 | 16,559 | 14,706 | 9,950 | 2,808 | 2,061 |
|
|
3931
|
+
| \`time-input\` | 167,108 | 47,235 | 41,122 | 70,148 | 15,398 | 12,471 |
|
|
3932
|
+
| \`time-picker\` | 87,900 | 25,845 | 22,888 | 40,652 | 10,014 | 7,910 |
|
|
3933
|
+
| \`timeline\` | 36,697 | 12,228 | 10,837 | 10,557 | 2,278 | 1,776 |
|
|
3934
|
+
| \`toast\` | 53,014 | 17,618 | 15,629 | 17,018 | 4,546 | 3,534 |
|
|
3935
|
+
| \`toggle\` | 53,651 | 16,999 | 15,078 | 11,781 | 3,060 | 2,364 |
|
|
3936
|
+
| \`toolbar\` | 33,825 | 12,355 | 10,931 | 5,891 | 1,912 | 1,357 |
|
|
3937
|
+
| \`tooltip\` | 64,554 | 22,770 | 20,202 | 11,638 | 3,251 | 2,477 |
|
|
3938
|
+
| \`tour\` | 91,457 | 28,984 | 25,677 | 28,876 | 6,896 | 5,519 |
|
|
3939
|
+
| \`tree\` | 56,616 | 18,102 | 16,096 | 20,273 | 5,268 | 4,149 |
|
|
3940
|
+
| \`trend\` | 30,083 | 11,203 | 9,927 | 4,413 | 1,326 | 991 |
|
|
3941
|
+
| \`video\` | 143,075 | 41,445 | 36,267 | 73,821 | 16,806 | 13,730 |
|
|
3942
|
+
| \`video-playlist\` | 109,297 | 33,176 | 29,235 | 43,136 | 9,654 | 7,743 |
|
|
3943
|
+
| \`virtual-list\` | 48,879 | 16,983 | 15,092 | 12,445 | 3,925 | 3,063 |
|
|
3937
3944
|
|
|
3938
3945
|
## What an install adds to \`node_modules\`
|
|
3939
3946
|
|
|
@@ -3945,12 +3952,12 @@ stripped column shows the bytes we removed.
|
|
|
3945
3952
|
|
|
3946
3953
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
3947
3954
|
|---|---|---|---|---|
|
|
3948
|
-
| \`@fusion.dev/helix-core\` | 1,
|
|
3949
|
-
| \`@fusion.dev/helix-headless\` |
|
|
3955
|
+
| \`@fusion.dev/helix-core\` | 1,870,667 | 437 | 498,690 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
3956
|
+
| \`@fusion.dev/helix-headless\` | 17,383,146 | 631 | 1,609,009 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
3950
3957
|
| \`@fusion.dev/helix-icons\` | 149,615 | 21 | 47,843 | \`svgo\` |
|
|
3951
|
-
| \`@fusion.dev/helix-styles\` | 107,
|
|
3958
|
+
| \`@fusion.dev/helix-styles\` | 107,438 | 6 | 0 | none |
|
|
3952
3959
|
| \`@fusion.dev/helix-theme\` | 528,598 | 8 | 5,393 | none |
|
|
3953
|
-
| \`@fusion.dev/helix\` | 17,
|
|
3960
|
+
| \`@fusion.dev/helix\` | 17,913,464 | 905 | 410,028 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
3954
3961
|
|
|
3955
3962
|
## Not measured yet
|
|
3956
3963
|
|
|
@@ -4216,14 +4223,16 @@ press \`Escape\` again.
|
|
|
4216
4223
|
|
|
4217
4224
|
A modal overlay keeps \`Tab\` inside itself while it is open, and it returns focus
|
|
4218
4225
|
to the element that opened it. \`Dialog\` does this, and so does \`Drawer\` unless
|
|
4219
|
-
you set \`modal="false"\`.
|
|
4226
|
+
you set \`modal="false"\`. Set \`dismissible\` on either to draw a close control in
|
|
4227
|
+
the corner by the title. The page behind a modal \`Dialog\` or \`Drawer\` does not
|
|
4220
4228
|
scroll while it is open.
|
|
4221
4229
|
|
|
4222
4230
|
Opening a \`Popover\` moves focus to the first control in its panel, or to the
|
|
4223
4231
|
panel where it holds none, and closing it from inside gives focus back to the
|
|
4224
|
-
trigger. It does not trap focus
|
|
4225
|
-
|
|
4226
|
-
|
|
4232
|
+
trigger, however it closes, setting \`open\` included. It does not trap focus
|
|
4233
|
+
unless you set \`modal\`, which keeps \`Tab\` in the panel until it closes and hides
|
|
4234
|
+
the rest of the page from screen readers meanwhile. When focus moves out of its
|
|
4235
|
+
trigger and its panel, the popover closes.
|
|
4227
4236
|
|
|
4228
4237
|
Press F8 to move focus to the \`Toast\` stack, and press it again to go back.
|
|
4229
4238
|
Set \`hotkey\` on the stack to use another key. The stack's name says which key
|
|
@@ -4247,6 +4256,9 @@ names it with \`for\`. A Helix trigger is described as soon as it has rendered.
|
|
|
4247
4256
|
A plain element in your markup is described the first time a reader points at
|
|
4248
4257
|
it or focuses it, so the link is never written into markup your server sent.
|
|
4249
4258
|
Write \`aria-describedby\` yourself to have the link in the server's markup.
|
|
4259
|
+
The pointer can move onto a tooltip's bubble and the bubble stays, so a reader
|
|
4260
|
+
can read it under a magnifier. Set \`hoverable="false"\` to hide it once the
|
|
4261
|
+
pointer reaches it.
|
|
4250
4262
|
|
|
4251
4263
|
## Keep an overlay open
|
|
4252
4264
|
|
|
@@ -4281,9 +4293,15 @@ finished. Select on them to draw an entrance or an exit of your own.
|
|
|
4281
4293
|
A touch or a pen swipes a \`Drawer\` toward the edge it came from, and a \`Toast\`
|
|
4282
4294
|
message toward the end of the line. A swipe past halfway, or a quick one, closes
|
|
4283
4295
|
it through the same cancelable request as its close control. A \`Drawer\` with
|
|
4284
|
-
\`snap-points\` comes to rest at the nearest point, such as half open
|
|
4296
|
+
\`snap-points\` comes to rest at the nearest point, such as half open, and
|
|
4297
|
+
\`:state(snapped)\` holds while it rests short of the whole panel. Moving focus
|
|
4298
|
+
with \`Tab\` to a control past the edge of the window opens it the rest of the
|
|
4299
|
+
way, and \`snapTo()\` moves it from script. In a
|
|
4285
4300
|
\`Lightbox\`, a swipe across the viewer shows the next or the previous item. A
|
|
4286
|
-
mouse never swipes, because dragging with a mouse selects text.
|
|
4301
|
+
mouse never swipes, because dragging with a mouse selects text. A \`Lightbox\`
|
|
4302
|
+
with \`max-zoom\` also zooms: pinch the item, or double click or double tap it,
|
|
4303
|
+
and drag it about once zoomed. It swipes only while the item is at its own
|
|
4304
|
+
size.
|
|
4287
4305
|
|
|
4288
4306
|
## Choose an overlay
|
|
4289
4307
|
|
|
@@ -5789,11 +5807,13 @@ current value. The pair comes from the platform. A native input reflects its
|
|
|
5789
5807
|
\`value\` *content attribute* to \`defaultValue\`, and it keeps a dirty flag. Once a
|
|
5790
5808
|
user has typed, the flag stops the attribute from changing the value.
|
|
5791
5809
|
|
|
5792
|
-
**A form reset
|
|
5793
|
-
\`<input value="Ada">\`
|
|
5794
|
-
|
|
5795
|
-
|
|
5796
|
-
\`
|
|
5810
|
+
**A form reset returns to a \`value\` or \`checked\` you wrote in markup**, as it
|
|
5811
|
+
does on a native control: \`<input value="Ada">\` and \`<helix-input value="Ada">\`
|
|
5812
|
+
both reset to \`Ada\`. Where \`default-value\` or \`default-checked\` is written, the
|
|
5813
|
+
reset returns to that instead. The attribute is read at the reset, and a
|
|
5814
|
+
framework that sets \`value\` as a property writes no attribute, so write the
|
|
5815
|
+
starting value of a form control as \`default-value\`, or \`default-checked\` for a
|
|
5816
|
+
checkbox or a switch, when a reset has to return to it.
|
|
5797
5817
|
|
|
5798
5818
|
## State is published as a custom state
|
|
5799
5819
|
|