@fusion.dev/helix-docs 0.168.0 → 0.170.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/metrics.mdx +225 -225
- package/content/react.mdx +26 -4
- package/content/server-rendering.mdx +26 -4
- package/dist/sources.generated.js +277 -233
- package/package.json +9 -9
|
@@ -3829,7 +3829,7 @@ on its own.
|
|
|
3829
3829
|
|
|
3830
3830
|
| | Raw | Gzip | Brotli |
|
|
3831
3831
|
|---|---|---|---|
|
|
3832
|
-
| Lit and \`@fusion.dev/helix-core\` | 246,
|
|
3832
|
+
| Lit and \`@fusion.dev/helix-core\` | 246,814 | 77,142 | 66,087 |
|
|
3833
3833
|
|
|
3834
3834
|
## Whole packages
|
|
3835
3835
|
|
|
@@ -3840,12 +3840,12 @@ either barrel. The per-component tables show what your page pays.
|
|
|
3840
3840
|
|
|
3841
3841
|
| Package | Raw | Gzip | Brotli | |
|
|
3842
3842
|
|---|---|---|---|---|
|
|
3843
|
-
| \`@fusion.dev/helix-core\` |
|
|
3844
|
-
| \`@fusion.dev/helix-headless\` | 1,
|
|
3843
|
+
| \`@fusion.dev/helix-core\` | 246,023 | 76,942 | 65,772 | The element base class, mixins, decorators, and floating positioning. |
|
|
3844
|
+
| \`@fusion.dev/helix-headless\` | 1,341,324 | 363,276 | 272,318 | Every headless family. The barrel entry includes all of them. |
|
|
3845
3845
|
| \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
|
|
3846
3846
|
| \`@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. |
|
|
3847
3847
|
| \`fusion_helix_theme_bg.wasm\` | 490,971 | 155,905 | 125,923 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
|
|
3848
|
-
| \`@fusion.dev/helix\` | 2,
|
|
3848
|
+
| \`@fusion.dev/helix\` | 2,035,179 | 502,582 | 356,073 | Every styled family. |
|
|
3849
3849
|
| \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
|
|
3850
3850
|
|
|
3851
3851
|
## Stylesheets
|
|
@@ -3858,21 +3858,21 @@ shows the whole cost of using the base layer on its own.
|
|
|
3858
3858
|
|
|
3859
3859
|
| File | Raw | Gzip | Brotli | |
|
|
3860
3860
|
|---|---|---|---|---|
|
|
3861
|
-
| \`base.css\` | 34,
|
|
3862
|
-
| \`elements.css\` |
|
|
3861
|
+
| \`base.css\` | 34,301 | 4,796 | 4,165 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
|
|
3862
|
+
| \`elements.css\` | 15,041 | 2,431 | 2,151 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
|
|
3863
3863
|
| \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
|
|
3864
3864
|
| \`primitives.css\` | 7,510 | 1,402 | 1,201 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
|
|
3865
3865
|
| \`tokens.css\` | 22,747 | 2,757 | 2,313 | The 197 semantic tokens. Every styled component needs them. |
|
|
3866
3866
|
|
|
3867
3867
|
## What the numbers say
|
|
3868
3868
|
|
|
3869
|
-
**Most of your first component is the shared runtime.** The median styled family is 17,
|
|
3869
|
+
**Most of your first component is the shared runtime.** The median styled family is 17,756 bytes gzipped alone, and it adds 3,855 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
|
|
3870
3870
|
|
|
3871
|
-
Across the 105 styled components, the smallest is \`code\` at 8,471 bytes gzipped alone, and the largest is \`data-table\` at 80,
|
|
3871
|
+
Across the 105 styled components, the smallest is \`code\` at 8,471 bytes gzipped alone, and the largest is \`data-table\` at 80,709. Every family together is 502,582.
|
|
3872
3872
|
|
|
3873
|
-
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 363,
|
|
3873
|
+
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 363,276 bytes gzipped, whatever else the page imports. That is 20 times the median family above. All 105 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.
|
|
3874
3874
|
|
|
3875
|
-
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,
|
|
3875
|
+
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,967 bytes gzipped alone.
|
|
3876
3876
|
|
|
3877
3877
|
## Compared with other systems
|
|
3878
3878
|
|
|
@@ -3884,43 +3884,43 @@ The table has no whole-library row. That row would compare how many components e
|
|
|
3884
3884
|
|
|
3885
3885
|
| Component | System | Raw | Gzip | Brotli |
|
|
3886
3886
|
|---|---|---|---|---|
|
|
3887
|
-
| \`button\` | **Helix** | 45,395 | 15,
|
|
3887
|
+
| \`button\` | **Helix** | 45,395 | 15,060 | 13,470 |
|
|
3888
3888
|
| | Carbon | 133,058 | 20,959 | 17,685 |
|
|
3889
3889
|
| | Material Web | 47,060 | 14,173 | 12,591 |
|
|
3890
3890
|
| | Shoelace | 62,628 | 18,287 | 15,805 |
|
|
3891
3891
|
| | Spectrum | 98,792 | 22,045 | 18,674 |
|
|
3892
|
-
| \`checkbox\` | **Helix** | 48,956 | 15,657 | 13,
|
|
3892
|
+
| \`checkbox\` | **Helix** | 48,956 | 15,657 | 13,980 |
|
|
3893
3893
|
| | Carbon | 60,255 | 15,609 | 13,550 |
|
|
3894
3894
|
| | Material Web | 43,785 | 13,556 | 12,015 |
|
|
3895
3895
|
| | Shoelace | 47,614 | 15,177 | 13,301 |
|
|
3896
3896
|
| | Spectrum | 62,492 | 15,437 | 13,481 |
|
|
3897
|
-
| \`dialog\` | **Helix** | 45,814 | 15,
|
|
3897
|
+
| \`dialog\` | **Helix** | 45,814 | 15,667 | 13,961 |
|
|
3898
3898
|
| | Carbon | 510,866 | 67,390 | 39,189 |
|
|
3899
3899
|
| | Material Web | 34,238 | 11,510 | 10,229 |
|
|
3900
3900
|
| | Shoelace | 52,754 | 17,698 | 15,554 |
|
|
3901
3901
|
| | Spectrum | 155,708 | 31,899 | 26,262 |
|
|
3902
|
-
| \`radio\` | **Helix** | 53,483 | 16,
|
|
3902
|
+
| \`radio\` | **Helix** | 53,483 | 16,524 | 14,732 |
|
|
3903
3903
|
| | Carbon | 63,055 | 16,887 | 14,605 |
|
|
3904
3904
|
| | Material Web | 41,044 | 13,234 | 11,757 |
|
|
3905
3905
|
| | Shoelace | 34,865 | 12,027 | 10,559 |
|
|
3906
3906
|
| | Spectrum | 38,685 | 10,660 | 9,370 |
|
|
3907
|
-
| \`switch\` | **Helix** | 45,669 | 15,
|
|
3907
|
+
| \`switch\` | **Helix** | 45,669 | 15,115 | 13,504 |
|
|
3908
3908
|
| | Carbon | 69,423 | 17,127 | 14,764 |
|
|
3909
3909
|
| | Material Web | 50,155 | 14,577 | 12,935 |
|
|
3910
3910
|
| | Shoelace | 37,833 | 11,814 | 10,568 |
|
|
3911
3911
|
| | Spectrum | 62,322 | 15,059 | 13,321 |
|
|
3912
|
-
| \`tabs\` | **Helix** | 60,388 | 18,
|
|
3912
|
+
| \`tabs\` | **Helix** | 60,388 | 18,899 | 16,818 |
|
|
3913
3913
|
| | Carbon | 578,766 | 73,537 | 43,235 |
|
|
3914
3914
|
| | Material Web | 38,883 | 12,820 | 11,368 |
|
|
3915
3915
|
| | Shoelace | 54,573 | 17,140 | 15,068 |
|
|
3916
3916
|
| | Spectrum | 64,875 | 18,298 | 16,283 |
|
|
3917
|
-
| \`tooltip\` | **Helix** | 61,569 | 21,793 | 19,
|
|
3917
|
+
| \`tooltip\` | **Helix** | 61,569 | 21,793 | 19,320 |
|
|
3918
3918
|
| | Carbon | 189,382 | 30,354 | 22,273 |
|
|
3919
3919
|
| | Material Web | | not shipped | |
|
|
3920
3920
|
| | Shoelace | 57,412 | 20,220 | 17,933 |
|
|
3921
3921
|
| | Spectrum | 136,599 | 40,552 | 35,286 |
|
|
3922
3922
|
|
|
3923
|
-
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is tabs against Material Web, at 6,
|
|
3923
|
+
At least one system is smaller than Helix on \`button\`, \`checkbox\`, \`dialog\`, \`radio\`, \`switch\`, \`tabs\`, \`tooltip\`. The largest gap is tabs against Material Web, at 6,079 bytes gzipped. 16 of 27 peer measurements are smaller than the Helix row.
|
|
3924
3924
|
|
|
3925
3925
|
Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
|
|
3926
3926
|
|
|
@@ -3966,104 +3966,104 @@ Structure, accessibility, state, and form participation. It has no presentation
|
|
|
3966
3966
|
|
|
3967
3967
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
3968
3968
|
|---|---|---|---|---|---|---|
|
|
3969
|
-
| \`accordion\` | 32,745 | 11,983 | 10,
|
|
3970
|
-
| \`announcement\` | 38,688 | 14,000 | 12,
|
|
3971
|
-
| \`app-header\` | 33,875 | 12,386 | 11,026 | 6,137 | 1,
|
|
3972
|
-
| \`area-chart\` | 90,314 | 31,
|
|
3973
|
-
| \`avatar\` | 31,
|
|
3974
|
-
| \`badge\` | 26,985 | 10,575 | 9,
|
|
3975
|
-
| \`bar-chart\` | 93,279 | 32,
|
|
3976
|
-
| \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,731 | 1,
|
|
3977
|
-
| \`breadcrumbs\` | 37,187 | 14,
|
|
3978
|
-
| \`button\` | 38,273 | 13,617 | 12,
|
|
3979
|
-
| \`button-group\` | 26,959 | 10,
|
|
3980
|
-
| \`callout\` | 36,184 | 13,
|
|
3981
|
-
| \`canvas\` | 109,723 | 35,015 | 30,
|
|
3982
|
-
| \`card\` | 23,959 | 9,
|
|
3983
|
-
| \`carousel\` | 43,284 | 15,
|
|
3984
|
-
| \`chat\` | 77,304 | 25,623 | 22,
|
|
3985
|
-
| \`checkbox\` | 42,127 | 14,
|
|
3986
|
-
| \`checkbox-group\` | 49,682 | 16,102 | 14,
|
|
3987
|
-
| \`code\` | 20,483 | 8,144 | 7,
|
|
3988
|
-
| \`code-block\` | 103,926 | 35,
|
|
3989
|
-
| \`color-input\` | 142,508 | 44,
|
|
3990
|
-
| \`color-picker\` | 103,814 | 32,831 | 28,
|
|
3991
|
-
| \`combobox\` | 138,073 | 42,
|
|
3992
|
-
| \`command\` | 104,771 | 32,
|
|
3993
|
-
| \`copy-button\` | 83,251 | 28,
|
|
3994
|
-
| \`data-table\` |
|
|
3995
|
-
| \`date-input\` | 143,256 | 44,
|
|
3996
|
-
| \`date-picker\` | 61,737 | 20,
|
|
3997
|
-
| \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 |
|
|
3998
|
-
| \`dialog\` | 40,334 | 14,
|
|
3999
|
-
| \`divider\` | 23,173 | 9,044 |
|
|
4000
|
-
| \`donut-chart\` | 87,568 | 30,
|
|
4001
|
-
| \`drawer\` | 44,608 | 15,802 | 14,
|
|
4002
|
-
| \`drilldown\` | 44,814 | 15,
|
|
4003
|
-
| \`empty\` | 24,376 | 9,
|
|
4004
|
-
| \`file-input\` | 58,960 | 20,
|
|
4005
|
-
| \`filter-input\` | 145,467 | 44,
|
|
4006
|
-
| \`format-date\` | 29,730 | 11,161 | 9,
|
|
4007
|
-
| \`graph\` | 68,895 | 22,763 | 20,
|
|
4008
|
-
| \`heatmap\` | 94,745 | 32,
|
|
4009
|
-
| \`icon\` | 82,676 | 28,313 | 24,
|
|
4010
|
-
| \`icon-button\` | 38,710 | 13,654 | 12,
|
|
4011
|
-
| \`image\` | 25,686 | 9,596 | 8,
|
|
4012
|
-
| \`input\` | 48,430 | 16,604 | 14,
|
|
4013
|
-
| \`kbd\` | 27,537 | 10,603 | 9,364 | 3,825 | 1,
|
|
4014
|
-
| \`legend\` | 34,902 | 12,
|
|
4015
|
-
| \`lightbox\` | 56,089 | 18,
|
|
4016
|
-
| \`line-chart\` | 91,349 | 31,
|
|
4017
|
-
| \`list\` | 62,672 | 21,571 | 19,
|
|
4018
|
-
| \`listbox\` | 82,178 | 26,
|
|
4019
|
-
| \`loader\` | 27,624 | 10,
|
|
4020
|
-
| \`map\` | 82,956 | 25,077 | 21,
|
|
4021
|
-
| \`megamenu\` | 60,088 | 21,
|
|
4022
|
-
| \`menu\` | 100,313 | 33,
|
|
4023
|
-
| \`meter\` | 32,441 | 12,
|
|
4024
|
-
| \`navigation\` | 34,
|
|
4025
|
-
| \`notifications\` | 59,725 | 19,
|
|
4026
|
-
| \`number-input\` | 57,089 | 19,055 |
|
|
4027
|
-
| \`object-inspector\` | 115,389 | 38,477 | 33,
|
|
4028
|
-
| \`option\` | 27,320 | 9,919 | 8,780 | 5,521 | 1,
|
|
4029
|
-
| \`outline\` | 33,744 | 12,
|
|
4030
|
-
| \`pagination\` | 138,662 | 43,
|
|
4031
|
-
| \`pin-input\` | 48,251 | 16,
|
|
4032
|
-
| \`popover\` | 63,093 | 22,
|
|
4033
|
-
| \`progress\` | 28,742 | 11,015 | 9,783 | 3,305 | 1,
|
|
4034
|
-
| \`qr-code\` | 43,379 | 16,926 | 15,
|
|
4035
|
-
| \`quote\` | 22,698 | 9,004 | 7,944 | 1,539 |
|
|
4036
|
-
| \`radio\` | 44,982 | 14,
|
|
4037
|
-
| \`rating\` | 51,236 | 17,
|
|
4038
|
-
| \`scatter-chart\` | 90,984 | 31,425 | 27,
|
|
4039
|
-
| \`scroll-area\` | 30,549 | 11,169 | 9,
|
|
4040
|
-
| \`select\` | 120,953 | 39,
|
|
4041
|
-
| \`skeleton\` | 22,510 | 8,765 | 7,771 | 1,321 |
|
|
4042
|
-
| \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,553 |
|
|
4043
|
-
| \`slider\` | 54,077 | 18,
|
|
4044
|
-
| \`sparkline\` | 47,807 | 17,537 | 15,
|
|
4045
|
-
| \`speed-dial\` | 70,101 | 25,089 | 22,
|
|
4046
|
-
| \`splitter\` | 44,053 | 15,355 | 13,700 | 14,377 | 3,913 | 3,
|
|
4047
|
-
| \`stat\` | 25,480 | 9,707 | 8,
|
|
4048
|
-
| \`steps\` | 54,568 | 18,
|
|
4049
|
-
| \`switch\` | 40,981 | 13,969 | 12,
|
|
4050
|
-
| \`table\` | 120,277 | 37,098 | 32,
|
|
4051
|
-
| \`tabs\` | 50,391 | 17,
|
|
4052
|
-
| \`tag\` | 44,398 | 16,147 | 14,
|
|
4053
|
-
| \`textarea\` | 45,888 | 15,
|
|
4054
|
-
| \`time-input\` | 172,003 | 52,511 | 45,
|
|
4055
|
-
| \`time-picker\` | 101,145 | 31,
|
|
4056
|
-
| \`timeline\` | 31,592 | 11,836 | 10,
|
|
4057
|
-
| \`toast\` | 52,128 | 18,240 | 16,
|
|
4058
|
-
| \`toggle\` | 46,308 | 15,173 | 13,
|
|
4059
|
-
| \`toolbar\` | 32,712 | 12,211 | 10,
|
|
4060
|
-
| \`tooltip\` | 58,421 | 21,
|
|
4061
|
-
| \`tour\` | 86,328 | 29,
|
|
4062
|
-
| \`tree\` | 69,456 | 23,
|
|
4063
|
-
| \`trend\` | 30,375 | 11,
|
|
4064
|
-
| \`video\` | 143,446 | 44,
|
|
4065
|
-
| \`video-playlist\` | 130,671 | 41,
|
|
4066
|
-
| \`virtual-list\` | 60,023 | 20,534 | 18,
|
|
3969
|
+
| \`accordion\` | 32,745 | 11,983 | 10,618 | 6,019 | 1,776 | 1,312 |
|
|
3970
|
+
| \`announcement\` | 38,688 | 14,000 | 12,515 | 5,014 | 1,571 | 1,117 |
|
|
3971
|
+
| \`app-header\` | 33,875 | 12,386 | 11,026 | 6,137 | 1,874 | 1,321 |
|
|
3972
|
+
| \`area-chart\` | 90,314 | 31,513 | 27,846 | 14,463 | 4,497 | 3,561 |
|
|
3973
|
+
| \`avatar\` | 31,417 | 11,889 | 10,605 | 4,588 | 1,396 | 1,041 |
|
|
3974
|
+
| \`badge\` | 26,985 | 10,575 | 9,438 | 3,276 | 1,070 | 758 |
|
|
3975
|
+
| \`bar-chart\` | 93,279 | 32,360 | 28,644 | 17,281 | 5,293 | 4,201 |
|
|
3976
|
+
| \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,731 | 1,054 | 755 |
|
|
3977
|
+
| \`breadcrumbs\` | 37,187 | 14,183 | 12,614 | 8,000 | 2,601 | 2,022 |
|
|
3978
|
+
| \`button\` | 38,273 | 13,617 | 12,191 | 5,208 | 1,614 | 1,098 |
|
|
3979
|
+
| \`button-group\` | 26,959 | 10,275 | 9,086 | 4,550 | 1,502 | 1,037 |
|
|
3980
|
+
| \`callout\` | 36,184 | 13,853 | 12,290 | 3,217 | 1,126 | 766 |
|
|
3981
|
+
| \`canvas\` | 109,723 | 35,015 | 30,559 | 69,521 | 21,216 | 17,501 |
|
|
3982
|
+
| \`card\` | 23,959 | 9,172 | 8,113 | 2,422 | 777 | 507 |
|
|
3983
|
+
| \`carousel\` | 43,284 | 15,477 | 13,875 | 15,311 | 4,313 | 3,315 |
|
|
3984
|
+
| \`chat\` | 77,304 | 25,623 | 22,739 | 25,968 | 7,656 | 5,921 |
|
|
3985
|
+
| \`checkbox\` | 42,127 | 14,156 | 12,623 | 3,391 | 1,100 | 672 |
|
|
3986
|
+
| \`checkbox-group\` | 49,682 | 16,102 | 14,385 | 8,941 | 2,534 | 1,718 |
|
|
3987
|
+
| \`code\` | 20,483 | 8,144 | 7,221 | 466 | 243 | 137 |
|
|
3988
|
+
| \`code-block\` | 103,926 | 35,034 | 30,976 | 36,367 | 10,546 | 8,419 |
|
|
3989
|
+
| \`color-input\` | 142,508 | 44,799 | 39,172 | 54,854 | 14,149 | 11,396 |
|
|
3990
|
+
| \`color-picker\` | 103,814 | 32,831 | 28,765 | 46,639 | 12,502 | 9,992 |
|
|
3991
|
+
| \`combobox\` | 138,073 | 42,790 | 37,523 | 40,002 | 9,888 | 7,645 |
|
|
3992
|
+
| \`command\` | 104,771 | 32,271 | 28,268 | 34,628 | 9,025 | 7,069 |
|
|
3993
|
+
| \`copy-button\` | 83,251 | 28,356 | 25,116 | 18,372 | 4,923 | 3,781 |
|
|
3994
|
+
| \`data-table\` | 207,707 | 62,071 | 53,050 | 97,263 | 25,035 | 20,032 |
|
|
3995
|
+
| \`date-input\` | 143,256 | 44,343 | 39,019 | 38,193 | 9,423 | 7,462 |
|
|
3996
|
+
| \`date-picker\` | 61,737 | 20,889 | 18,707 | 20,220 | 5,582 | 4,387 |
|
|
3997
|
+
| \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 705 | 384 |
|
|
3998
|
+
| \`dialog\` | 40,334 | 14,399 | 12,782 | 6,164 | 1,905 | 1,369 |
|
|
3999
|
+
| \`divider\` | 23,173 | 9,044 | 7,995 | 1,745 | 660 | 416 |
|
|
4000
|
+
| \`donut-chart\` | 87,568 | 30,596 | 27,050 | 14,642 | 4,487 | 3,535 |
|
|
4001
|
+
| \`drawer\` | 44,608 | 15,802 | 14,077 | 7,655 | 2,368 | 1,740 |
|
|
4002
|
+
| \`drilldown\` | 44,814 | 15,590 | 13,892 | 10,162 | 2,820 | 2,142 |
|
|
4003
|
+
| \`empty\` | 24,376 | 9,367 | 8,309 | 2,282 | 788 | 610 |
|
|
4004
|
+
| \`file-input\` | 58,960 | 20,178 | 17,953 | 13,495 | 4,226 | 3,275 |
|
|
4005
|
+
| \`filter-input\` | 145,467 | 44,639 | 38,921 | 55,360 | 13,887 | 10,977 |
|
|
4006
|
+
| \`format-date\` | 29,730 | 11,161 | 9,977 | 4,769 | 1,436 | 1,078 |
|
|
4007
|
+
| \`graph\` | 68,895 | 22,763 | 20,292 | 17,642 | 5,469 | 4,309 |
|
|
4008
|
+
| \`heatmap\` | 94,745 | 32,475 | 28,667 | 17,151 | 5,013 | 3,892 |
|
|
4009
|
+
| \`icon\` | 82,676 | 28,313 | 24,224 | 59,024 | 19,863 | 16,175 |
|
|
4010
|
+
| \`icon-button\` | 38,710 | 13,654 | 12,172 | 5,645 | 1,666 | 1,198 |
|
|
4011
|
+
| \`image\` | 25,686 | 9,596 | 8,498 | 4,159 | 1,297 | 873 |
|
|
4012
|
+
| \`input\` | 48,430 | 16,604 | 14,660 | 7,542 | 2,515 | 1,722 |
|
|
4013
|
+
| \`kbd\` | 27,537 | 10,603 | 9,364 | 3,825 | 1,255 | 884 |
|
|
4014
|
+
| \`legend\` | 34,902 | 12,914 | 11,498 | 3,289 | 1,157 | 789 |
|
|
4015
|
+
| \`lightbox\` | 56,089 | 18,737 | 16,641 | 16,991 | 4,706 | 3,484 |
|
|
4016
|
+
| \`line-chart\` | 91,349 | 31,684 | 28,055 | 15,168 | 4,560 | 3,614 |
|
|
4017
|
+
| \`list\` | 62,672 | 21,571 | 19,226 | 15,912 | 4,652 | 3,451 |
|
|
4018
|
+
| \`listbox\` | 82,178 | 26,480 | 23,431 | 19,686 | 5,508 | 4,205 |
|
|
4019
|
+
| \`loader\` | 27,624 | 10,570 | 9,385 | 2,682 | 978 | 611 |
|
|
4020
|
+
| \`map\` | 82,956 | 25,077 | 21,824 | 40,792 | 10,639 | 8,189 |
|
|
4021
|
+
| \`megamenu\` | 60,088 | 21,679 | 19,256 | 8,929 | 2,530 | 1,794 |
|
|
4022
|
+
| \`menu\` | 100,313 | 33,058 | 29,229 | 31,483 | 8,121 | 6,370 |
|
|
4023
|
+
| \`meter\` | 32,441 | 12,317 | 10,985 | 5,291 | 1,617 | 1,225 |
|
|
4024
|
+
| \`navigation\` | 34,478 | 12,975 | 11,534 | 3,696 | 1,318 | 891 |
|
|
4025
|
+
| \`notifications\` | 59,725 | 19,859 | 17,721 | 18,816 | 5,062 | 3,947 |
|
|
4026
|
+
| \`number-input\` | 57,089 | 19,055 | 16,982 | 13,553 | 3,718 | 2,778 |
|
|
4027
|
+
| \`object-inspector\` | 115,389 | 38,477 | 33,889 | 35,827 | 10,235 | 8,036 |
|
|
4028
|
+
| \`option\` | 27,320 | 9,919 | 8,780 | 5,521 | 1,401 | 981 |
|
|
4029
|
+
| \`outline\` | 33,744 | 12,673 | 11,281 | 6,894 | 2,271 | 1,605 |
|
|
4030
|
+
| \`pagination\` | 138,662 | 43,417 | 37,746 | 47,559 | 12,047 | 9,397 |
|
|
4031
|
+
| \`pin-input\` | 48,251 | 16,684 | 14,879 | 7,048 | 2,356 | 1,761 |
|
|
4032
|
+
| \`popover\` | 63,093 | 22,781 | 20,175 | 5,852 | 1,797 | 1,265 |
|
|
4033
|
+
| \`progress\` | 28,742 | 11,015 | 9,783 | 3,305 | 1,090 | 810 |
|
|
4034
|
+
| \`qr-code\` | 43,379 | 16,926 | 15,074 | 17,336 | 6,516 | 5,383 |
|
|
4035
|
+
| \`quote\` | 22,698 | 9,004 | 7,944 | 1,539 | 703 | 366 |
|
|
4036
|
+
| \`radio\` | 44,982 | 14,988 | 13,351 | 4,432 | 1,396 | 928 |
|
|
4037
|
+
| \`rating\` | 51,236 | 17,507 | 15,618 | 8,141 | 2,508 | 1,840 |
|
|
4038
|
+
| \`scatter-chart\` | 90,984 | 31,425 | 27,725 | 16,225 | 4,889 | 3,840 |
|
|
4039
|
+
| \`scroll-area\` | 30,549 | 11,169 | 9,877 | 8,810 | 2,712 | 2,125 |
|
|
4040
|
+
| \`select\` | 120,953 | 39,096 | 34,339 | 30,463 | 8,083 | 6,126 |
|
|
4041
|
+
| \`skeleton\` | 22,510 | 8,765 | 7,771 | 1,321 | 545 | 315 |
|
|
4042
|
+
| \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,553 | 640 | 449 |
|
|
4043
|
+
| \`slider\` | 54,077 | 18,098 | 16,157 | 13,495 | 3,971 | 3,005 |
|
|
4044
|
+
| \`sparkline\` | 47,807 | 17,537 | 15,632 | 6,103 | 2,221 | 1,749 |
|
|
4045
|
+
| \`speed-dial\` | 70,101 | 25,089 | 22,268 | 11,056 | 2,967 | 2,236 |
|
|
4046
|
+
| \`splitter\` | 44,053 | 15,355 | 13,700 | 14,377 | 3,913 | 3,057 |
|
|
4047
|
+
| \`stat\` | 25,480 | 9,707 | 8,608 | 2,962 | 938 | 589 |
|
|
4048
|
+
| \`steps\` | 54,568 | 18,817 | 16,684 | 13,502 | 3,786 | 2,828 |
|
|
4049
|
+
| \`switch\` | 40,981 | 13,969 | 12,465 | 1,963 | 745 | 443 |
|
|
4050
|
+
| \`table\` | 120,277 | 37,098 | 32,237 | 46,796 | 12,748 | 10,213 |
|
|
4051
|
+
| \`tabs\` | 50,391 | 17,007 | 15,135 | 11,170 | 2,983 | 2,242 |
|
|
4052
|
+
| \`tag\` | 44,398 | 16,147 | 14,422 | 8,672 | 2,575 | 1,899 |
|
|
4053
|
+
| \`textarea\` | 45,888 | 15,551 | 13,869 | 5,560 | 1,736 | 1,233 |
|
|
4054
|
+
| \`time-input\` | 172,003 | 52,511 | 45,550 | 49,135 | 12,423 | 9,783 |
|
|
4055
|
+
| \`time-picker\` | 101,145 | 31,545 | 27,755 | 34,441 | 9,267 | 7,158 |
|
|
4056
|
+
| \`timeline\` | 31,592 | 11,836 | 10,589 | 4,412 | 1,217 | 885 |
|
|
4057
|
+
| \`toast\` | 52,128 | 18,240 | 16,223 | 12,791 | 3,711 | 2,754 |
|
|
4058
|
+
| \`toggle\` | 46,308 | 15,173 | 13,464 | 6,703 | 2,056 | 1,451 |
|
|
4059
|
+
| \`toolbar\` | 32,712 | 12,211 | 10,878 | 5,487 | 1,821 | 1,317 |
|
|
4060
|
+
| \`tooltip\` | 58,421 | 21,042 | 18,676 | 8,513 | 2,478 | 1,828 |
|
|
4061
|
+
| \`tour\` | 86,328 | 29,279 | 25,877 | 20,806 | 5,730 | 4,330 |
|
|
4062
|
+
| \`tree\` | 69,456 | 23,080 | 20,530 | 17,795 | 5,181 | 3,913 |
|
|
4063
|
+
| \`trend\` | 30,375 | 11,862 | 10,566 | 3,822 | 1,263 | 842 |
|
|
4064
|
+
| \`video\` | 143,446 | 44,384 | 38,763 | 67,925 | 17,090 | 13,909 |
|
|
4065
|
+
| \`video-playlist\` | 130,671 | 41,533 | 36,567 | 44,902 | 11,448 | 9,113 |
|
|
4066
|
+
| \`virtual-list\` | 60,023 | 20,534 | 18,308 | 20,777 | 6,426 | 5,073 |
|
|
4067
4067
|
|
|
4068
4068
|
### Styled tier
|
|
4069
4069
|
|
|
@@ -4071,111 +4071,111 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
|
|
|
4071
4071
|
|
|
4072
4072
|
| Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
|
|
4073
4073
|
|---|---|---|---|---|---|---|
|
|
4074
|
-
| \`accordion\` | 36,857 | 12,
|
|
4075
|
-
| \`announcement\` | 43,624 | 15,064 | 13,
|
|
4076
|
-
| \`app-header\` | 39,343 | 13,
|
|
4077
|
-
| \`area-chart\` | 98,956 | 33,
|
|
4078
|
-
| \`aura\` | 51,454 | 17,
|
|
4079
|
-
| \`avatar\` | 35,
|
|
4080
|
-
| \`badge\` | 32,752 | 11,
|
|
4081
|
-
| \`bar-chart\` | 107,347 | 35,
|
|
4082
|
-
| \`blockquote\` | 26,860 | 10,107 | 8,936 | 5,287 | 1,
|
|
4083
|
-
| \`breadcrumbs\` | 44,839 | 15,
|
|
4084
|
-
| \`button\` | 45,395 | 15,
|
|
4085
|
-
| \`button-group\` | 30,815 | 10,972 | 9,
|
|
4086
|
-
| \`callout\` | 40,328 | 14,800 | 13,
|
|
4087
|
-
| \`canvas\` | 131,925 | 39,
|
|
4088
|
-
| \`card\` | 28,213 | 10,189 | 9,
|
|
4089
|
-
| \`carousel\` | 54,175 | 17,
|
|
4090
|
-
| \`chat\` | 93,236 | 28,370 | 25,
|
|
4091
|
-
| \`checkbox\` | 48,956 | 15,657 | 13,
|
|
4092
|
-
| \`checkbox-group\` | 57,582 | 17,763 | 15,
|
|
4093
|
-
| \`code\` | 21,671 | 8,471 | 7,490 | 1,639 |
|
|
4094
|
-
| \`code-block\` | 129,368 | 38,
|
|
4095
|
-
| \`color-input\` | 187,150 | 51,
|
|
4096
|
-
| \`color-picker\` | 142,646 | 38,535 | 33,
|
|
4097
|
-
| \`combobox\` | 154,642 | 45,
|
|
4098
|
-
| \`command\` | 122,668 | 35,
|
|
4099
|
-
| \`copy-button\` | 96,335 | 30,494 | 27,
|
|
4100
|
-
| \`data-table\` |
|
|
4101
|
-
| \`date-input\` | 165,527 | 48,
|
|
4102
|
-
| \`date-picker\` | 70,053 | 22,
|
|
4103
|
-
| \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,
|
|
4104
|
-
| \`dialog\` | 45,814 | 15,
|
|
4105
|
-
| \`divider\` | 25,821 | 9,692 | 8,548 | 4,376 | 1,317 |
|
|
4106
|
-
| \`donut-chart\` | 97,699 | 32,
|
|
4107
|
-
| \`drawer\` | 50,804 | 17,
|
|
4108
|
-
| \`drilldown\` | 51,187 | 16,
|
|
4109
|
-
| \`empty\` | 26,021 | 9,
|
|
4110
|
-
| \`file-input\` | 71,224 | 22,637 | 20,
|
|
4111
|
-
| \`filter-input\` | 181,527 | 50,
|
|
4112
|
-
| \`flex\` | 25,978 | 9,320 | 8,
|
|
4113
|
-
| \`format-date\` | 30,314 | 11,291 | 10,102 | 5,337 | 1,
|
|
4114
|
-
| \`graph\` | 83,785 | 25,
|
|
4115
|
-
| \`grid\` | 27,233 | 9,
|
|
4116
|
-
| \`heatmap\` | 102,326 | 34,087 | 30,
|
|
4117
|
-
| \`icon\` | 84,859 | 28,840 | 24,
|
|
4118
|
-
| \`icon-button\` | 47,177 | 15,050 | 13,
|
|
4119
|
-
| \`image\` | 27,417 | 10,071 | 8,941 | 5,872 | 1,
|
|
4120
|
-
| \`input\` | 53,044 | 17,678 | 15,
|
|
4121
|
-
| \`kbd\` | 29,864 | 11,
|
|
4122
|
-
| \`legend\` | 40,308 | 14,
|
|
4123
|
-
| \`lightbox\` | 63,083 | 20,
|
|
4124
|
-
| \`line-chart\` | 102,895 | 34,
|
|
4125
|
-
| \`list\` | 69,727 | 23,
|
|
4126
|
-
| \`listbox\` | 86,985 | 27,
|
|
4127
|
-
| \`loader\` | 30,830 | 11,357 | 10,
|
|
4128
|
-
| \`map\` | 119,571 | 30,617 | 26,
|
|
4129
|
-
| \`megamenu\` | 65,411 | 22,
|
|
4130
|
-
| \`menu\` | 113,387 | 35,
|
|
4131
|
-
| \`meter\` | 38,671 | 13,
|
|
4132
|
-
| \`navigation\` |
|
|
4133
|
-
| \`notifications\` | 74,590 | 22,508 | 20,
|
|
4134
|
-
| \`number-input\` | 62,431 | 20,
|
|
4135
|
-
| \`object-inspector\` | 133,209 | 41,378 | 36,
|
|
4136
|
-
| \`option\` | 31,522 | 10,947 | 9,
|
|
4137
|
-
| \`orb\` | 36,192 | 13,
|
|
4138
|
-
| \`outline\` | 38,336 | 13,
|
|
4139
|
-
| \`pagination\` | 158,390 | 46,840 | 40,
|
|
4140
|
-
| \`pin-input\` | 51,943 | 17,602 | 15,
|
|
4141
|
-
| \`popover\` | 66,594 | 23,
|
|
4142
|
-
| \`progress\` | 36,291 | 12,
|
|
4143
|
-
| \`qr-code\` | 45,317 | 17,
|
|
4144
|
-
| \`quote\` | 23,589 | 9,213 | 8,
|
|
4145
|
-
| \`radio\` | 53,483 | 16,
|
|
4146
|
-
| \`rating\` | 55,377 | 18,691 | 16,
|
|
4147
|
-
| \`sandbox\` | 91,186 | 26,522 | 23,
|
|
4148
|
-
| \`scatter-chart\` | 100,359 | 33,490 | 29,
|
|
4149
|
-
| \`scroll-area\` | 35,927 | 12,124 | 10,
|
|
4150
|
-
| \`select\` | 136,359 | 41,
|
|
4151
|
-
| \`skeleton\` | 26,269 | 9,
|
|
4152
|
-
| \`skip-link\` | 27,440 | 10,
|
|
4153
|
-
| \`slider\` | 69,487 | 20,
|
|
4154
|
-
| \`sparkline\` | 53,434 | 18,
|
|
4155
|
-
| \`speed-dial\` | 78,181 | 26,523 | 23,
|
|
4156
|
-
| \`splitter\` | 50,494 | 16,
|
|
4157
|
-
| \`stat\` | 29,023 | 10,426 | 9,
|
|
4158
|
-
| \`steps\` | 69,787 | 21,
|
|
4159
|
-
| \`strands\` | 49,560 | 17,761 | 15,
|
|
4160
|
-
| \`switch\` | 45,669 | 15,
|
|
4161
|
-
| \`table\` | 139,550 | 40,
|
|
4162
|
-
| \`tabs\` | 60,388 | 18,
|
|
4163
|
-
| \`tag\` | 49,666 | 17,
|
|
4164
|
-
| \`text\` | 28,979 | 10,064 | 8,
|
|
4165
|
-
| \`textarea\` | 50,175 | 16,
|
|
4166
|
-
| \`time-input\` | 198,142 | 56,806 | 49,
|
|
4167
|
-
| \`time-picker\` | 114,537 | 34,
|
|
4168
|
-
| \`timeline\` | 39,191 | 13,
|
|
4169
|
-
| \`toast\` | 60,737 | 20,109 | 17,885 | 21,387 | 5,
|
|
4170
|
-
| \`toggle\` | 51,862 | 16,
|
|
4171
|
-
| \`toolbar\` | 35,730 | 12,720 | 11,
|
|
4172
|
-
| \`tooltip\` | 61,569 | 21,793 | 19,
|
|
4173
|
-
| \`tour\` | 97,703 | 31,
|
|
4174
|
-
| \`tree\` | 78,869 | 25,015 | 22,
|
|
4175
|
-
| \`trend\` | 32,227 | 12,325 | 11,
|
|
4176
|
-
| \`video\` | 166,510 | 48,
|
|
4177
|
-
| \`video-playlist\` | 149,785 | 44,
|
|
4178
|
-
| \`virtual-list\` | 62,360 | 21,069 | 18,
|
|
4074
|
+
| \`accordion\` | 36,857 | 12,853 | 11,433 | 10,116 | 2,685 | 2,152 |
|
|
4075
|
+
| \`announcement\` | 43,624 | 15,064 | 13,460 | 9,931 | 2,686 | 2,091 |
|
|
4076
|
+
| \`app-header\` | 39,343 | 13,599 | 12,086 | 11,590 | 3,101 | 2,418 |
|
|
4077
|
+
| \`area-chart\` | 98,956 | 33,401 | 29,552 | 23,086 | 6,451 | 5,240 |
|
|
4078
|
+
| \`aura\` | 51,454 | 17,756 | 15,763 | 27,662 | 8,670 | 7,267 |
|
|
4079
|
+
| \`avatar\` | 35,091 | 12,684 | 11,344 | 8,247 | 2,189 | 1,707 |
|
|
4080
|
+
| \`badge\` | 32,752 | 11,795 | 10,508 | 9,034 | 2,301 | 1,737 |
|
|
4081
|
+
| \`bar-chart\` | 107,347 | 35,189 | 31,026 | 31,330 | 8,147 | 6,646 |
|
|
4082
|
+
| \`blockquote\` | 26,860 | 10,107 | 8,936 | 5,287 | 1,589 | 1,215 |
|
|
4083
|
+
| \`breadcrumbs\` | 44,839 | 15,417 | 13,760 | 15,636 | 3,855 | 3,173 |
|
|
4084
|
+
| \`button\` | 45,395 | 15,060 | 13,470 | 12,314 | 3,100 | 2,358 |
|
|
4085
|
+
| \`button-group\` | 30,815 | 10,972 | 9,753 | 8,394 | 2,225 | 1,687 |
|
|
4086
|
+
| \`callout\` | 40,328 | 14,800 | 13,203 | 7,345 | 2,112 | 1,611 |
|
|
4087
|
+
| \`canvas\` | 131,925 | 39,252 | 34,152 | 91,365 | 25,320 | 21,030 |
|
|
4088
|
+
| \`card\` | 28,213 | 10,189 | 9,049 | 6,662 | 1,824 | 1,400 |
|
|
4089
|
+
| \`carousel\` | 54,175 | 17,279 | 15,437 | 26,186 | 6,170 | 4,875 |
|
|
4090
|
+
| \`chat\` | 93,236 | 28,370 | 25,043 | 41,896 | 10,461 | 8,393 |
|
|
4091
|
+
| \`checkbox\` | 48,956 | 15,657 | 13,980 | 10,203 | 2,652 | 1,990 |
|
|
4092
|
+
| \`checkbox-group\` | 57,582 | 17,763 | 15,829 | 16,834 | 4,244 | 3,230 |
|
|
4093
|
+
| \`code\` | 21,671 | 8,471 | 7,490 | 1,639 | 561 | 488 |
|
|
4094
|
+
| \`code-block\` | 129,368 | 38,861 | 34,295 | 61,796 | 14,489 | 11,966 |
|
|
4095
|
+
| \`color-input\` | 187,150 | 51,234 | 44,755 | 99,488 | 20,674 | 17,036 |
|
|
4096
|
+
| \`color-picker\` | 142,646 | 38,535 | 33,837 | 85,459 | 18,323 | 15,002 |
|
|
4097
|
+
| \`combobox\` | 154,642 | 45,845 | 40,190 | 56,555 | 12,953 | 10,377 |
|
|
4098
|
+
| \`command\` | 122,668 | 35,566 | 31,219 | 52,522 | 12,368 | 10,007 |
|
|
4099
|
+
| \`copy-button\` | 96,335 | 30,494 | 27,016 | 31,439 | 7,152 | 5,659 |
|
|
4100
|
+
| \`data-table\` | 291,856 | 80,709 | 65,908 | 180,202 | 43,376 | 32,438 |
|
|
4101
|
+
| \`date-input\` | 165,527 | 48,185 | 42,325 | 60,445 | 13,284 | 10,776 |
|
|
4102
|
+
| \`date-picker\` | 70,053 | 22,357 | 19,982 | 28,515 | 7,034 | 5,635 |
|
|
4103
|
+
| \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,474 | 1,087 |
|
|
4104
|
+
| \`dialog\` | 45,814 | 15,667 | 13,961 | 11,625 | 3,204 | 2,454 |
|
|
4105
|
+
| \`divider\` | 25,821 | 9,692 | 8,548 | 4,376 | 1,317 | 931 |
|
|
4106
|
+
| \`donut-chart\` | 97,699 | 32,669 | 28,858 | 24,752 | 6,652 | 5,234 |
|
|
4107
|
+
| \`drawer\` | 50,804 | 17,202 | 15,355 | 13,836 | 3,826 | 2,982 |
|
|
4108
|
+
| \`drilldown\` | 51,187 | 16,886 | 15,082 | 16,523 | 4,183 | 3,197 |
|
|
4109
|
+
| \`empty\` | 26,021 | 9,825 | 8,677 | 3,909 | 1,274 | 960 |
|
|
4110
|
+
| \`file-input\` | 71,224 | 22,637 | 20,099 | 25,746 | 6,678 | 5,322 |
|
|
4111
|
+
| \`filter-input\` | 181,527 | 50,443 | 43,827 | 91,396 | 19,750 | 15,997 |
|
|
4112
|
+
| \`flex\` | 25,978 | 9,320 | 8,253 | 5,154 | 1,206 | 888 |
|
|
4113
|
+
| \`format-date\` | 30,314 | 11,291 | 10,102 | 5,337 | 1,568 | 1,111 |
|
|
4114
|
+
| \`graph\` | 83,785 | 25,388 | 22,521 | 32,513 | 8,158 | 6,554 |
|
|
4115
|
+
| \`grid\` | 27,233 | 9,978 | 8,825 | 6,021 | 1,610 | 1,296 |
|
|
4116
|
+
| \`heatmap\` | 102,326 | 34,087 | 30,022 | 24,713 | 6,616 | 5,221 |
|
|
4117
|
+
| \`icon\` | 84,859 | 28,840 | 24,726 | 61,200 | 20,440 | 16,655 |
|
|
4118
|
+
| \`icon-button\` | 47,177 | 15,050 | 13,429 | 14,097 | 3,131 | 2,384 |
|
|
4119
|
+
| \`image\` | 27,417 | 10,071 | 8,941 | 5,872 | 1,784 | 1,339 |
|
|
4120
|
+
| \`input\` | 53,044 | 17,678 | 15,610 | 12,139 | 3,624 | 2,746 |
|
|
4121
|
+
| \`kbd\` | 29,864 | 11,147 | 9,843 | 6,137 | 1,808 | 1,380 |
|
|
4122
|
+
| \`legend\` | 40,308 | 14,176 | 12,542 | 8,570 | 2,412 | 1,783 |
|
|
4123
|
+
| \`lightbox\` | 63,083 | 20,095 | 17,843 | 23,963 | 6,071 | 4,614 |
|
|
4124
|
+
| \`line-chart\` | 102,895 | 34,062 | 30,139 | 26,698 | 6,975 | 5,601 |
|
|
4125
|
+
| \`list\` | 69,727 | 23,129 | 20,601 | 22,944 | 6,189 | 4,860 |
|
|
4126
|
+
| \`listbox\` | 86,985 | 27,619 | 24,364 | 24,473 | 6,632 | 5,071 |
|
|
4127
|
+
| \`loader\` | 30,830 | 11,357 | 10,101 | 5,870 | 1,762 | 1,330 |
|
|
4128
|
+
| \`map\` | 119,571 | 30,617 | 26,632 | 77,400 | 16,304 | 13,013 |
|
|
4129
|
+
| \`megamenu\` | 65,411 | 22,857 | 20,254 | 14,234 | 3,746 | 2,799 |
|
|
4130
|
+
| \`menu\` | 113,387 | 35,373 | 31,276 | 44,544 | 10,474 | 8,481 |
|
|
4131
|
+
| \`meter\` | 38,671 | 13,584 | 12,159 | 11,502 | 2,936 | 2,414 |
|
|
4132
|
+
| \`navigation\` | 38,564 | 13,834 | 12,345 | 7,765 | 2,200 | 1,691 |
|
|
4133
|
+
| \`notifications\` | 74,590 | 22,508 | 20,077 | 33,671 | 7,714 | 6,260 |
|
|
4134
|
+
| \`number-input\` | 62,431 | 20,242 | 18,059 | 18,879 | 4,940 | 3,921 |
|
|
4135
|
+
| \`object-inspector\` | 133,209 | 41,378 | 36,307 | 53,631 | 13,211 | 10,619 |
|
|
4136
|
+
| \`option\` | 31,522 | 10,947 | 9,684 | 9,715 | 2,427 | 1,927 |
|
|
4137
|
+
| \`orb\` | 36,192 | 13,878 | 12,387 | 9,445 | 3,637 | 2,966 |
|
|
4138
|
+
| \`outline\` | 38,336 | 13,558 | 12,115 | 11,471 | 3,186 | 2,380 |
|
|
4139
|
+
| \`pagination\` | 158,390 | 46,840 | 40,684 | 67,273 | 15,491 | 12,330 |
|
|
4140
|
+
| \`pin-input\` | 51,943 | 17,602 | 15,694 | 10,721 | 3,303 | 2,494 |
|
|
4141
|
+
| \`popover\` | 66,594 | 23,551 | 20,906 | 9,336 | 2,608 | 1,936 |
|
|
4142
|
+
| \`progress\` | 36,291 | 12,643 | 11,276 | 10,837 | 2,770 | 2,242 |
|
|
4143
|
+
| \`qr-code\` | 45,317 | 17,411 | 15,519 | 19,258 | 7,015 | 5,806 |
|
|
4144
|
+
| \`quote\` | 23,589 | 9,213 | 8,147 | 2,413 | 907 | 580 |
|
|
4145
|
+
| \`radio\` | 53,483 | 16,524 | 14,732 | 12,923 | 2,995 | 2,215 |
|
|
4146
|
+
| \`rating\` | 55,377 | 18,691 | 16,637 | 12,265 | 3,720 | 2,859 |
|
|
4147
|
+
| \`sandbox\` | 91,186 | 26,522 | 23,247 | 58,615 | 14,405 | 11,839 |
|
|
4148
|
+
| \`scatter-chart\` | 100,359 | 33,490 | 29,542 | 25,579 | 7,031 | 5,517 |
|
|
4149
|
+
| \`scroll-area\` | 35,927 | 12,124 | 10,762 | 14,171 | 3,726 | 2,895 |
|
|
4150
|
+
| \`select\` | 136,359 | 41,920 | 36,740 | 45,853 | 10,917 | 8,655 |
|
|
4151
|
+
| \`skeleton\` | 26,269 | 9,682 | 8,609 | 5,066 | 1,492 | 1,066 |
|
|
4152
|
+
| \`skip-link\` | 27,440 | 10,499 | 9,298 | 3,441 | 1,154 | 876 |
|
|
4153
|
+
| \`slider\` | 69,487 | 20,437 | 18,245 | 28,886 | 6,380 | 5,156 |
|
|
4154
|
+
| \`sparkline\` | 53,434 | 18,853 | 16,837 | 11,713 | 3,575 | 2,818 |
|
|
4155
|
+
| \`speed-dial\` | 78,181 | 26,523 | 23,627 | 19,119 | 4,440 | 3,457 |
|
|
4156
|
+
| \`splitter\` | 50,494 | 16,424 | 14,699 | 20,798 | 5,029 | 4,000 |
|
|
4157
|
+
| \`stat\` | 29,023 | 10,426 | 9,280 | 6,495 | 1,675 | 1,290 |
|
|
4158
|
+
| \`steps\` | 69,787 | 21,637 | 19,196 | 28,706 | 6,656 | 5,363 |
|
|
4159
|
+
| \`strands\` | 49,560 | 17,761 | 15,761 | 25,615 | 8,444 | 7,158 |
|
|
4160
|
+
| \`switch\` | 45,669 | 15,115 | 13,504 | 6,635 | 1,936 | 1,428 |
|
|
4161
|
+
| \`table\` | 139,550 | 40,292 | 35,069 | 66,068 | 16,005 | 12,939 |
|
|
4162
|
+
| \`tabs\` | 60,388 | 18,899 | 16,818 | 21,157 | 4,955 | 4,028 |
|
|
4163
|
+
| \`tag\` | 49,666 | 17,300 | 15,430 | 13,922 | 3,735 | 2,870 |
|
|
4164
|
+
| \`text\` | 28,979 | 10,064 | 8,865 | 7,770 | 1,669 | 1,259 |
|
|
4165
|
+
| \`textarea\` | 50,175 | 16,562 | 14,819 | 9,829 | 2,778 | 2,130 |
|
|
4166
|
+
| \`time-input\` | 198,142 | 56,806 | 49,389 | 75,264 | 16,796 | 13,536 |
|
|
4167
|
+
| \`time-picker\` | 114,537 | 34,041 | 29,968 | 47,825 | 11,785 | 9,428 |
|
|
4168
|
+
| \`timeline\` | 39,191 | 13,320 | 11,907 | 12,004 | 2,743 | 2,200 |
|
|
4169
|
+
| \`toast\` | 60,737 | 20,109 | 17,885 | 21,387 | 5,669 | 4,451 |
|
|
4170
|
+
| \`toggle\` | 51,862 | 16,432 | 14,624 | 12,243 | 3,346 | 2,610 |
|
|
4171
|
+
| \`toolbar\` | 35,730 | 12,720 | 11,370 | 8,488 | 2,346 | 1,726 |
|
|
4172
|
+
| \`tooltip\` | 61,569 | 21,793 | 19,320 | 11,643 | 3,245 | 2,525 |
|
|
4173
|
+
| \`tour\` | 97,703 | 31,379 | 27,757 | 32,163 | 7,843 | 6,206 |
|
|
4174
|
+
| \`tree\` | 78,869 | 25,015 | 22,290 | 27,190 | 7,189 | 5,750 |
|
|
4175
|
+
| \`trend\` | 32,227 | 12,325 | 11,005 | 5,655 | 1,745 | 1,365 |
|
|
4176
|
+
| \`video\` | 166,510 | 48,287 | 42,236 | 90,971 | 20,960 | 17,354 |
|
|
4177
|
+
| \`video-playlist\` | 149,785 | 44,727 | 39,272 | 64,000 | 14,621 | 11,898 |
|
|
4178
|
+
| \`virtual-list\` | 62,360 | 21,069 | 18,756 | 23,097 | 6,982 | 5,535 |
|
|
4179
4179
|
|
|
4180
4180
|
## What an install adds to \`node_modules\`
|
|
4181
4181
|
|
|
@@ -4187,12 +4187,12 @@ stripped column shows the bytes we removed.
|
|
|
4187
4187
|
|
|
4188
4188
|
| Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
|
|
4189
4189
|
|---|---|---|---|---|
|
|
4190
|
-
| \`@fusion.dev/helix-core\` | 2,
|
|
4191
|
-
| \`@fusion.dev/helix-headless\` | 21,
|
|
4190
|
+
| \`@fusion.dev/helix-core\` | 2,414,480 | 541 | 696,280 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
|
|
4191
|
+
| \`@fusion.dev/helix-headless\` | 21,224,724 | 686 | 2,137,109 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
|
|
4192
4192
|
| \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
|
|
4193
|
-
| \`@fusion.dev/helix-styles\` |
|
|
4193
|
+
| \`@fusion.dev/helix-styles\` | 117,028 | 6 | 0 | none |
|
|
4194
4194
|
| \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
|
|
4195
|
-
| \`@fusion.dev/helix\` | 21,
|
|
4195
|
+
| \`@fusion.dev/helix\` | 21,272,517 | 944 | 469,327 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
|
|
4196
4196
|
|
|
4197
4197
|
## Not measured yet
|
|
4198
4198
|
|
|
@@ -4829,10 +4829,32 @@ are strings and booleans, so they pass through server rendering intact. \`cell\`
|
|
|
4829
4829
|
and \`compare\` are functions, set on an element that repairs its own props.
|
|
4830
4830
|
Inside a \`columns\` array, the bridge could not reach them.
|
|
4831
4831
|
|
|
4832
|
-
The
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4832
|
+
The table cannot draw its cells on the server, because reading a cell needs the
|
|
4833
|
+
columns and the server render does not pass the table its markup children. Write
|
|
4834
|
+
the first page as rows. In the same server component, map the first page of the
|
|
4835
|
+
array to \`helix-table-row\` and \`helix-table-cell\` elements under the columns.
|
|
4836
|
+
Sort and page it as the table does, and format each value as its column draws it:
|
|
4837
|
+
|
|
4838
|
+
\`\`\`tsx
|
|
4839
|
+
const firstPage = [...rows].sort((a, b) => a.name.localeCompare(b.name)).slice(0, 4)
|
|
4840
|
+
|
|
4841
|
+
<helix-data-table default-sort="name:asc" label="People" page-size={4} rows={rows}>
|
|
4842
|
+
<helix-table-column field="name" sortable>Name</helix-table-column>
|
|
4843
|
+
<helix-table-column field="team" sortable>Team</helix-table-column>
|
|
4844
|
+
{firstPage.map((person) => (
|
|
4845
|
+
<helix-table-row key={person.name}>
|
|
4846
|
+
<helix-table-cell header>{person.name}</helix-table-cell>
|
|
4847
|
+
<helix-table-cell>{person.team}</helix-table-cell>
|
|
4848
|
+
</helix-table-row>
|
|
4849
|
+
))}
|
|
4850
|
+
</helix-data-table>
|
|
4851
|
+
\`\`\`
|
|
4852
|
+
|
|
4853
|
+
The values are in the served HTML, and \`@fusion.dev/helix-styles/helix.css\` lays
|
|
4854
|
+
them out as the table before the script runs. The table shows your rows until
|
|
4855
|
+
\`rows\` holds a row, then draws its own in their place. It leaves your rows in the
|
|
4856
|
+
page, so React finds the markup it rendered. A development build warns when the
|
|
4857
|
+
first page the table draws shows different words from the rows you served.
|
|
4836
4858
|
|
|
4837
4859
|
### The React version
|
|
4838
4860
|
|
|
@@ -5718,10 +5740,32 @@ your elements and the element that takes focus is in its shadow root. Test for
|
|
|
5718
5740
|
support before you use element references. Assigning to a property that an
|
|
5719
5741
|
engine does not implement does nothing and throws no error.
|
|
5720
5742
|
|
|
5721
|
-
## A
|
|
5722
|
-
|
|
5723
|
-
A
|
|
5724
|
-
a
|
|
5743
|
+
## A parent finds its children
|
|
5744
|
+
|
|
5745
|
+
A child does not announce itself to its parent, and there is no ready event. A
|
|
5746
|
+
parent cannot wait on a child that has not upgraded, so what the parent needs
|
|
5747
|
+
from the child decides how it finds it:
|
|
5748
|
+
|
|
5749
|
+
- For what you slotted, read \`assignedElements\` on the slot, and read it again
|
|
5750
|
+
on \`slotchange\`.
|
|
5751
|
+
- For children that arrive, move, or change outside a slot, observe the light
|
|
5752
|
+
DOM with a \`MutationObserver\`.
|
|
5753
|
+
- For a child's property, wait on \`customElements.whenDefined\`. A custom element
|
|
5754
|
+
has no properties before it upgrades.
|
|
5755
|
+
- For a child's state that a script can change with no event, add a controller
|
|
5756
|
+
to the child with \`addController\`. Its \`hostUpdated\` runs after every update
|
|
5757
|
+
of the child.
|
|
5758
|
+
- Where the child holds the answer, it finds its parent by identity with
|
|
5759
|
+
\`closestInstance\`, as \`Accordion.Item\` does.
|
|
5760
|
+
|
|
5761
|
+
## Serve the values of a data table
|
|
5762
|
+
|
|
5763
|
+
A data table reads each cell from its column, and the server does not pass it
|
|
5764
|
+
its columns, so it serves its headings and no values. Write the first page under
|
|
5765
|
+
the columns as \`helix-table-row\` and \`helix-table-cell\` elements, in the table's
|
|
5766
|
+
sort and page size. The table shows them until \`rows\` holds a row, then draws
|
|
5767
|
+
its own rows in their place. See [React](./react) for the server component
|
|
5768
|
+
version.
|
|
5725
5769
|
|
|
5726
5770
|
## Write a server spec
|
|
5727
5771
|
|