@fusion.dev/helix-docs 0.172.0 → 0.173.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.
@@ -3829,7 +3829,7 @@ on its own.
3829
3829
 
3830
3830
  | | Raw | Gzip | Brotli |
3831
3831
  |---|---|---|---|
3832
- | Lit and \`@fusion.dev/helix-core\` | 248,415 | 77,646 | 66,566 |
3832
+ | Lit and \`@fusion.dev/helix-core\` | 248,690 | 77,759 | 66,712 |
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\` | 247,624 | 77,468 | 66,202 | The element base class, mixins, decorators, and floating positioning. |
3844
- | \`@fusion.dev/helix-headless\` | 1,355,090 | 367,157 | 274,922 | Every headless family. The barrel entry includes all of them. |
3843
+ | \`@fusion.dev/helix-core\` | 247,899 | 77,582 | 66,304 | The element base class, mixins, decorators, and floating positioning. |
3844
+ | \`@fusion.dev/helix-headless\` | 1,361,995 | 369,205 | 276,482 | 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,052,377 | 507,221 | 359,385 | Every styled family. |
3848
+ | \`@fusion.dev/helix\` | 2,072,750 | 513,462 | 364,013 | 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
@@ -3866,13 +3866,13 @@ shows the whole cost of using the base layer on its own.
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,756 bytes gzipped alone, and it adds 3,860 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.
3869
+ **Most of your first component is the shared runtime.** The median styled family is 17,757 bytes gzipped alone, and it adds 3,860 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,903. Every family together is 507,221.
3871
+ Across the 105 styled components, the smallest is \`code\` at 8,471 bytes gzipped alone, and the largest is \`data-table\` at 80,903. Every family together is 513,462.
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 367,157 bytes gzipped, whatever else the page imports. That is 21 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.
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 369,205 bytes gzipped, whatever else the page imports. That is 21 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,967 bytes gzipped alone.
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 17,022 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,058 | 13,429 |
3887
+ | \`button\` | **Helix** | 45,395 | 15,059 | 13,429 |
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** | 49,014 | 15,669 | 13,982 |
3892
+ | \`checkbox\` | **Helix** | 49,014 | 15,668 | 13,981 |
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** | 46,594 | 15,877 | 14,136 |
3897
+ | \`dialog\` | **Helix** | 46,594 | 15,877 | 14,147 |
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,541 | 16,538 | 14,734 |
3902
+ | \`radio\` | **Helix** | 53,541 | 16,539 | 14,731 |
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,727 | 15,127 | 13,471 |
3907
+ | \`switch\` | **Helix** | 45,727 | 15,127 | 13,488 |
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,899 | 16,801 |
3912
+ | \`tabs\` | **Helix** | 60,663 | 19,011 | 16,904 |
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** | 62,018 | 21,904 | 19,464 |
3917
+ | \`tooltip\` | **Helix** | 62,241 | 21,948 | 19,514 |
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,079 bytes gzipped. 16 of 27 peer measurements are smaller than the Helix row.
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,191 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,625 | 6,019 | 1,768 | 1,170 |
3970
- | \`announcement\` | 38,688 | 14,000 | 12,488 | 5,014 | 1,567 | 984 |
3971
- | \`app-header\` | 33,875 | 12,386 | 11,026 | 6,137 | 1,867 | 1,211 |
3972
- | \`area-chart\` | 90,763 | 31,620 | 27,973 | 14,463 | 4,481 | 3,483 |
3973
- | \`avatar\` | 31,417 | 11,889 | 10,607 | 4,588 | 1,380 | 938 |
3974
- | \`badge\` | 26,985 | 10,575 | 9,439 | 3,276 | 1,053 | 534 |
3975
- | \`bar-chart\` | 93,728 | 32,467 | 28,699 | 17,281 | 5,273 | 4,103 |
3976
- | \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,731 | 1,052 | 679 |
3977
- | \`breadcrumbs\` | 37,187 | 14,183 | 12,614 | 8,000 | 2,589 | 1,982 |
3978
- | \`button\` | 38,273 | 13,617 | 12,145 | 5,208 | 1,607 | 1,116 |
3979
- | \`button-group\` | 26,959 | 10,275 | 9,086 | 4,550 | 1,495 | 958 |
3980
- | \`callout\` | 36,184 | 13,853 | 12,291 | 3,217 | 1,124 | 670 |
3981
- | \`canvas\` | 109,723 | 35,015 | 30,584 | 69,521 | 21,167 | 17,501 |
3982
- | \`card\` | 23,959 | 9,173 | 8,133 | 2,422 | 787 | 446 |
3983
- | \`carousel\` | 43,284 | 15,477 | 13,789 | 15,311 | 4,312 | 3,215 |
3984
- | \`chat\` | 80,299 | 26,453 | 23,392 | 28,478 | 8,275 | 6,417 |
3985
- | \`checkbox\` | 42,185 | 14,168 | 12,641 | 3,391 | 1,098 | 642 |
3986
- | \`checkbox-group\` | 49,740 | 16,116 | 14,393 | 8,941 | 2,513 | 1,685 |
3987
- | \`code\` | 20,483 | 8,144 | 7,222 | 466 | 235 | 51 |
3988
- | \`code-block\` | 105,025 | 35,267 | 31,170 | 37,017 | 10,651 | 8,477 |
3989
- | \`color-input\` | 144,353 | 45,296 | 39,520 | 56,179 | 14,497 | 11,554 |
3990
- | \`color-picker\` | 104,921 | 33,093 | 29,015 | 47,675 | 12,761 | 10,136 |
3991
- | \`combobox\` | 138,878 | 43,023 | 37,802 | 40,300 | 9,962 | 7,785 |
3992
- | \`command\` | 105,970 | 32,597 | 28,624 | 35,008 | 9,100 | 7,007 |
3993
- | \`copy-button\` | 83,700 | 28,472 | 25,205 | 18,372 | 4,894 | 3,723 |
3994
- | \`data-table\` | 208,460 | 62,274 | 53,159 | 97,508 | 25,160 | 19,954 |
3995
- | \`date-input\` | 143,776 | 44,476 | 39,078 | 38,193 | 9,401 | 7,424 |
3996
- | \`date-picker\` | 61,750 | 20,897 | 18,709 | 20,220 | 5,560 | 4,271 |
3997
- | \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 698 | 296 |
3998
- | \`dialog\` | 41,114 | 14,614 | 12,997 | 6,187 | 1,908 | 1,266 |
3999
- | \`divider\` | 23,173 | 9,044 | 7,995 | 1,745 | 658 | 364 |
4000
- | \`donut-chart\` | 88,017 | 30,708 | 27,134 | 14,640 | 4,471 | 3,591 |
4001
- | \`drawer\` | 45,388 | 16,018 | 14,238 | 7,678 | 2,352 | 1,686 |
4002
- | \`drilldown\` | 44,814 | 15,590 | 13,892 | 10,162 | 2,817 | 1,972 |
4003
- | \`empty\` | 24,376 | 9,367 | 8,289 | 2,282 | 801 | 447 |
4004
- | \`file-input\` | 59,018 | 20,192 | 17,995 | 13,495 | 4,215 | 3,185 |
4005
- | \`filter-input\` | 150,756 | 46,068 | 40,033 | 59,435 | 14,962 | 11,825 |
4006
- | \`format-date\` | 30,056 | 11,305 | 10,091 | 4,769 | 1,420 | 940 |
4007
- | \`graph\` | 68,895 | 22,763 | 20,283 | 17,642 | 5,453 | 4,245 |
4008
- | \`heatmap\` | 95,194 | 32,587 | 28,768 | 17,151 | 5,006 | 3,835 |
4009
- | \`icon\` | 82,676 | 28,313 | 24,182 | 59,024 | 19,869 | 16,165 |
4010
- | \`icon-button\` | 38,710 | 13,654 | 12,177 | 5,645 | 1,664 | 1,000 |
4011
- | \`image\` | 25,686 | 9,596 | 8,498 | 4,159 | 1,298 | 851 |
4012
- | \`input\` | 48,634 | 16,661 | 14,714 | 7,688 | 2,545 | 1,812 |
4013
- | \`kbd\` | 27,537 | 10,603 | 9,364 | 3,825 | 1,257 | 728 |
4014
- | \`legend\` | 34,902 | 12,915 | 11,476 | 3,289 | 1,152 | 800 |
4015
- | \`lightbox\` | 56,869 | 18,971 | 16,846 | 17,014 | 4,723 | 3,369 |
4016
- | \`line-chart\` | 91,798 | 31,794 | 28,166 | 15,168 | 4,544 | 3,599 |
4017
- | \`list\` | 62,672 | 21,571 | 19,225 | 15,912 | 4,637 | 3,411 |
4018
- | \`listbox\` | 82,406 | 26,536 | 23,457 | 19,854 | 5,535 | 4,128 |
4019
- | \`loader\` | 27,624 | 10,571 | 9,385 | 2,682 | 971 | 542 |
4020
- | \`map\` | 82,956 | 25,077 | 21,786 | 40,792 | 10,621 | 8,189 |
4021
- | \`megamenu\` | 60,537 | 21,791 | 19,315 | 8,929 | 2,527 | 1,761 |
4022
- | \`menu\` | 105,284 | 34,851 | 30,797 | 33,419 | 8,657 | 6,752 |
4023
- | \`meter\` | 32,441 | 12,317 | 10,985 | 5,291 | 1,609 | 1,120 |
4024
- | \`navigation\` | 34,478 | 12,975 | 11,531 | 3,696 | 1,326 | 798 |
4025
- | \`notifications\` | 60,049 | 19,983 | 17,814 | 18,816 | 5,045 | 3,831 |
4026
- | \`number-input\` | 57,454 | 19,134 | 17,073 | 13,860 | 3,757 | 2,663 |
4027
- | \`object-inspector\` | 115,838 | 38,602 | 33,992 | 35,827 | 10,230 | 8,069 |
4028
- | \`option\` | 27,320 | 9,919 | 8,780 | 5,521 | 1,395 | 845 |
4029
- | \`outline\` | 33,744 | 12,673 | 11,282 | 6,894 | 2,266 | 1,580 |
4030
- | \`pagination\` | 139,375 | 43,608 | 37,904 | 47,767 | 12,083 | 9,413 |
4031
- | \`pin-input\` | 48,309 | 16,697 | 14,893 | 7,048 | 2,343 | 1,655 |
4032
- | \`popover\` | 65,839 | 23,559 | 20,867 | 6,748 | 2,021 | 1,367 |
4033
- | \`progress\` | 28,742 | 11,015 | 9,783 | 3,305 | 1,074 | 719 |
4034
- | \`qr-code\` | 43,379 | 16,926 | 15,030 | 17,336 | 6,513 | 5,283 |
4035
- | \`quote\` | 22,698 | 9,004 | 7,944 | 1,539 | 706 | 357 |
4036
- | \`radio\` | 45,040 | 15,003 | 13,372 | 4,432 | 1,380 | 822 |
4037
- | \`rating\` | 51,294 | 17,519 | 15,598 | 8,141 | 2,513 | 1,668 |
4038
- | \`scatter-chart\` | 91,433 | 31,536 | 27,838 | 16,225 | 4,891 | 3,815 |
4039
- | \`scroll-area\` | 30,549 | 11,169 | 9,924 | 8,810 | 2,704 | 2,039 |
4040
- | \`select\` | 121,666 | 39,277 | 34,417 | 30,668 | 8,119 | 6,078 |
4041
- | \`skeleton\` | 22,510 | 8,765 | 7,771 | 1,321 | 542 | 286 |
4042
- | \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,553 | 625 | 315 |
4043
- | \`slider\` | 54,135 | 18,110 | 16,203 | 13,495 | 3,951 | 2,926 |
4044
- | \`sparkline\` | 47,807 | 17,537 | 15,634 | 6,103 | 2,209 | 1,635 |
4045
- | \`speed-dial\` | 70,550 | 25,209 | 22,397 | 11,056 | 2,968 | 2,212 |
4046
- | \`splitter\` | 44,053 | 15,355 | 13,700 | 14,377 | 3,895 | 2,980 |
4047
- | \`stat\` | 25,480 | 9,707 | 8,605 | 2,962 | 933 | 539 |
4048
- | \`steps\` | 56,683 | 19,390 | 17,233 | 14,557 | 4,076 | 3,084 |
4049
- | \`switch\` | 41,039 | 13,981 | 12,475 | 1,963 | 737 | 396 |
4050
- | \`table\` | 120,335 | 37,107 | 32,285 | 46,796 | 12,745 | 10,013 |
4051
- | \`tabs\` | 50,391 | 17,007 | 15,142 | 11,170 | 2,987 | 2,095 |
4052
- | \`tag\` | 44,398 | 16,147 | 14,422 | 8,672 | 2,557 | 1,769 |
4053
- | \`textarea\` | 46,124 | 15,614 | 13,932 | 5,738 | 1,772 | 1,148 |
4054
- | \`time-input\` | 172,691 | 52,698 | 45,668 | 49,303 | 12,456 | 9,775 |
4055
- | \`time-picker\` | 101,385 | 31,616 | 27,801 | 34,609 | 9,281 | 7,192 |
4056
- | \`timeline\` | 31,964 | 12,015 | 10,725 | 4,412 | 1,201 | 758 |
4057
- | \`toast\` | 52,128 | 18,240 | 16,243 | 12,791 | 3,691 | 2,741 |
4058
- | \`toggle\` | 46,366 | 15,185 | 13,474 | 6,703 | 2,030 | 1,297 |
4059
- | \`toolbar\` | 32,712 | 12,211 | 10,878 | 5,487 | 1,814 | 1,198 |
4060
- | \`tooltip\` | 58,870 | 21,155 | 18,783 | 8,513 | 2,468 | 1,796 |
4061
- | \`tour\` | 86,777 | 29,406 | 25,972 | 20,806 | 5,715 | 4,312 |
4062
- | \`tree\` | 69,456 | 23,081 | 20,471 | 17,795 | 5,164 | 3,844 |
4063
- | \`trend\` | 30,375 | 11,862 | 10,581 | 3,822 | 1,249 | 854 |
4064
- | \`video\` | 146,529 | 45,265 | 39,522 | 69,861 | 17,622 | 14,226 |
4065
- | \`video-playlist\` | 133,933 | 42,448 | 37,312 | 47,019 | 11,985 | 9,635 |
4066
- | \`virtual-list\` | 60,181 | 20,572 | 18,335 | 20,935 | 6,461 | 5,079 |
3969
+ | \`accordion\` | 32,745 | 11,983 | 10,619 | 6,019 | 1,769 | 1,142 |
3970
+ | \`announcement\` | 38,688 | 13,999 | 12,522 | 5,014 | 1,567 | 984 |
3971
+ | \`app-header\` | 33,875 | 12,386 | 11,026 | 6,137 | 1,871 | 1,156 |
3972
+ | \`area-chart\` | 90,986 | 31,665 | 28,017 | 14,686 | 4,530 | 3,455 |
3973
+ | \`avatar\` | 31,417 | 11,889 | 10,607 | 4,588 | 1,381 | 864 |
3974
+ | \`badge\` | 26,985 | 10,575 | 9,439 | 3,276 | 1,055 | 570 |
3975
+ | \`bar-chart\` | 93,951 | 32,512 | 28,731 | 17,504 | 5,324 | 4,101 |
3976
+ | \`blockquote\` | 24,289 | 9,538 | 8,445 | 2,731 | 1,054 | 611 |
3977
+ | \`breadcrumbs\` | 37,187 | 14,184 | 12,614 | 8,000 | 2,591 | 1,827 |
3978
+ | \`button\` | 38,273 | 13,617 | 12,186 | 5,208 | 1,608 | 979 |
3979
+ | \`button-group\` | 27,883 | 10,536 | 9,327 | 5,322 | 1,715 | 1,055 |
3980
+ | \`callout\` | 36,184 | 13,854 | 12,309 | 3,217 | 1,127 | 673 |
3981
+ | \`canvas\` | 109,942 | 35,061 | 30,697 | 69,740 | 21,208 | 17,486 |
3982
+ | \`card\` | 23,959 | 9,173 | 8,133 | 2,422 | 788 | 322 |
3983
+ | \`carousel\` | 43,284 | 15,477 | 13,790 | 15,311 | 4,315 | 3,160 |
3984
+ | \`chat\` | 80,299 | 26,454 | 23,380 | 28,478 | 8,289 | 6,293 |
3985
+ | \`checkbox\` | 42,185 | 14,168 | 12,640 | 3,391 | 1,100 | 440 |
3986
+ | \`checkbox-group\` | 49,740 | 16,116 | 14,394 | 8,941 | 2,514 | 1,636 |
3987
+ | \`code\` | 20,483 | 8,146 | 7,222 | 466 | 236 | -3 |
3988
+ | \`code-block\` | 106,241 | 35,546 | 31,368 | 38,240 | 10,966 | 8,689 |
3989
+ | \`color-input\` | 145,288 | 45,562 | 39,728 | 56,951 | 14,701 | 11,700 |
3990
+ | \`color-picker\` | 105,853 | 33,343 | 29,160 | 48,447 | 12,969 | 10,145 |
3991
+ | \`combobox\` | 139,109 | 43,088 | 37,856 | 40,531 | 10,028 | 7,718 |
3992
+ | \`command\` | 105,970 | 32,597 | 28,613 | 35,008 | 9,111 | 6,991 |
3993
+ | \`copy-button\` | 84,919 | 28,739 | 25,469 | 19,593 | 5,189 | 3,873 |
3994
+ | \`data-table\` | 208,460 | 62,273 | 53,205 | 97,508 | 25,184 | 19,900 |
3995
+ | \`date-input\` | 144,007 | 44,541 | 39,154 | 38,424 | 9,467 | 7,281 |
3996
+ | \`date-picker\` | 61,750 | 20,897 | 18,702 | 20,220 | 5,562 | 4,166 |
3997
+ | \`description-list\` | 23,412 | 8,907 | 7,880 | 2,225 | 698 | 348 |
3998
+ | \`dialog\` | 41,114 | 14,614 | 13,012 | 6,187 | 1,906 | 1,252 |
3999
+ | \`divider\` | 23,173 | 9,044 | 8,008 | 1,745 | 659 | 214 |
4000
+ | \`donut-chart\` | 88,240 | 30,756 | 27,213 | 14,863 | 4,516 | 3,407 |
4001
+ | \`drawer\` | 45,388 | 16,019 | 14,238 | 7,678 | 2,353 | 1,538 |
4002
+ | \`drilldown\` | 44,814 | 15,590 | 13,892 | 10,162 | 2,825 | 1,980 |
4003
+ | \`empty\` | 24,376 | 9,367 | 8,289 | 2,282 | 803 | 418 |
4004
+ | \`file-input\` | 59,249 | 20,257 | 17,995 | 13,726 | 4,276 | 3,154 |
4005
+ | \`filter-input\` | 150,756 | 46,068 | 40,029 | 59,435 | 14,972 | 11,714 |
4006
+ | \`format-date\` | 30,056 | 11,305 | 10,096 | 4,769 | 1,420 | 846 |
4007
+ | \`graph\` | 69,368 | 22,845 | 20,283 | 18,116 | 5,537 | 4,171 |
4008
+ | \`heatmap\` | 95,417 | 32,639 | 28,787 | 17,374 | 5,050 | 3,798 |
4009
+ | \`icon\` | 82,676 | 28,313 | 24,202 | 59,024 | 19,877 | 16,090 |
4010
+ | \`icon-button\` | 38,710 | 13,654 | 12,182 | 5,645 | 1,667 | 1,013 |
4011
+ | \`image\` | 25,686 | 9,596 | 8,494 | 4,159 | 1,302 | 790 |
4012
+ | \`input\` | 48,634 | 16,661 | 14,728 | 7,688 | 2,549 | 1,669 |
4013
+ | \`kbd\` | 27,537 | 10,603 | 9,364 | 3,825 | 1,259 | 759 |
4014
+ | \`legend\` | 34,902 | 12,915 | 11,476 | 3,289 | 1,150 | 678 |
4015
+ | \`lightbox\` | 56,869 | 18,971 | 16,886 | 17,014 | 4,723 | 3,399 |
4016
+ | \`line-chart\` | 92,021 | 31,834 | 28,206 | 15,391 | 4,594 | 3,548 |
4017
+ | \`list\` | 62,852 | 21,627 | 19,285 | 15,975 | 4,655 | 3,364 |
4018
+ | \`listbox\` | 82,406 | 26,536 | 23,496 | 19,854 | 5,538 | 4,078 |
4019
+ | \`loader\` | 27,624 | 10,571 | 9,381 | 2,682 | 973 | 617 |
4020
+ | \`map\` | 82,956 | 25,077 | 21,786 | 40,792 | 10,630 | 8,123 |
4021
+ | \`megamenu\` | 60,537 | 21,791 | 19,316 | 8,929 | 2,526 | 1,642 |
4022
+ | \`menu\` | 105,284 | 34,851 | 30,786 | 33,419 | 8,663 | 6,689 |
4023
+ | \`meter\` | 32,441 | 12,317 | 10,986 | 5,291 | 1,610 | 1,087 |
4024
+ | \`navigation\` | 34,753 | 13,102 | 11,629 | 3,696 | 1,328 | 829 |
4025
+ | \`notifications\` | 60,049 | 19,983 | 17,822 | 18,816 | 5,046 | 3,852 |
4026
+ | \`number-input\` | 57,454 | 19,134 | 17,075 | 13,860 | 3,754 | 2,685 |
4027
+ | \`object-inspector\` | 117,054 | 38,893 | 34,221 | 37,051 | 10,524 | 8,244 |
4028
+ | \`option\` | 27,320 | 9,919 | 8,780 | 5,521 | 1,395 | 860 |
4029
+ | \`outline\` | 35,323 | 13,262 | 11,792 | 8,200 | 2,722 | 1,936 |
4030
+ | \`pagination\` | 139,375 | 43,609 | 37,886 | 47,767 | 12,095 | 9,279 |
4031
+ | \`pin-input\` | 48,309 | 16,697 | 14,894 | 7,048 | 2,342 | 1,586 |
4032
+ | \`popover\` | 65,839 | 23,559 | 20,934 | 6,748 | 2,022 | 1,331 |
4033
+ | \`progress\` | 28,742 | 11,015 | 9,783 | 3,305 | 1,076 | 689 |
4034
+ | \`qr-code\` | 43,379 | 16,926 | 15,075 | 17,336 | 6,514 | 5,220 |
4035
+ | \`quote\` | 22,698 | 9,004 | 7,944 | 1,539 | 705 | 268 |
4036
+ | \`radio\` | 45,040 | 15,003 | 13,371 | 4,432 | 1,380 | 774 |
4037
+ | \`rating\` | 51,294 | 17,519 | 15,601 | 8,141 | 2,513 | 1,658 |
4038
+ | \`scatter-chart\` | 91,656 | 31,575 | 27,853 | 16,448 | 4,941 | 3,710 |
4039
+ | \`scroll-area\` | 30,549 | 11,169 | 9,879 | 8,810 | 2,708 | 1,919 |
4040
+ | \`select\` | 121,666 | 39,278 | 34,461 | 30,668 | 8,127 | 6,074 |
4041
+ | \`skeleton\` | 22,510 | 8,765 | 7,771 | 1,321 | 540 | 188 |
4042
+ | \`skip-link\` | 25,535 | 10,013 | 8,877 | 1,553 | 627 | 319 |
4043
+ | \`slider\` | 54,135 | 18,110 | 16,244 | 13,495 | 3,950 | 2,847 |
4044
+ | \`sparkline\` | 47,807 | 17,537 | 15,634 | 6,103 | 2,208 | 1,587 |
4045
+ | \`speed-dial\` | 71,335 | 25,366 | 22,527 | 11,841 | 3,136 | 2,187 |
4046
+ | \`splitter\` | 44,408 | 15,451 | 13,790 | 14,732 | 3,985 | 3,032 |
4047
+ | \`stat\` | 25,480 | 9,707 | 8,605 | 2,962 | 938 | 583 |
4048
+ | \`steps\` | 56,683 | 19,390 | 17,234 | 14,557 | 4,078 | 3,106 |
4049
+ | \`switch\` | 41,039 | 13,981 | 12,475 | 1,963 | 738 | 333 |
4050
+ | \`table\` | 120,335 | 37,107 | 32,320 | 46,796 | 12,753 | 9,985 |
4051
+ | \`tabs\` | 50,666 | 17,118 | 15,177 | 11,170 | 2,986 | 2,067 |
4052
+ | \`tag\` | 44,780 | 16,253 | 14,511 | 9,054 | 2,669 | 1,750 |
4053
+ | \`textarea\` | 46,124 | 15,614 | 13,922 | 5,738 | 1,772 | 1,036 |
4054
+ | \`time-input\` | 173,070 | 52,833 | 45,782 | 49,682 | 12,562 | 9,746 |
4055
+ | \`time-picker\` | 101,533 | 31,654 | 27,793 | 34,757 | 9,329 | 7,137 |
4056
+ | \`timeline\` | 32,605 | 12,200 | 10,902 | 5,055 | 1,391 | 889 |
4057
+ | \`toast\` | 52,128 | 18,240 | 16,244 | 12,791 | 3,691 | 2,644 |
4058
+ | \`toggle\` | 46,641 | 15,299 | 13,578 | 6,703 | 2,030 | 1,446 |
4059
+ | \`toolbar\` | 32,712 | 12,211 | 10,878 | 5,487 | 1,815 | 1,217 |
4060
+ | \`tooltip\` | 59,093 | 21,200 | 18,822 | 8,736 | 2,512 | 1,767 |
4061
+ | \`tour\` | 86,777 | 29,406 | 25,977 | 20,806 | 5,724 | 4,312 |
4062
+ | \`tree\` | 69,456 | 23,081 | 20,471 | 17,795 | 5,165 | 3,799 |
4063
+ | \`trend\` | 30,375 | 11,863 | 10,583 | 3,822 | 1,254 | 786 |
4064
+ | \`video\` | 146,529 | 45,265 | 39,491 | 69,861 | 17,636 | 14,195 |
4065
+ | \`video-playlist\` | 133,933 | 42,448 | 37,315 | 47,019 | 11,996 | 9,545 |
4066
+ | \`virtual-list\` | 60,387 | 20,622 | 18,410 | 21,141 | 6,509 | 5,052 |
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,854 | 11,433 | 10,116 | 2,695 | 2,017 |
4075
- | \`announcement\` | 43,624 | 15,064 | 13,431 | 9,931 | 2,672 | 1,996 |
4076
- | \`app-header\` | 39,343 | 13,599 | 12,087 | 11,590 | 3,097 | 2,362 |
4077
- | \`area-chart\` | 99,405 | 33,510 | 29,575 | 23,086 | 6,420 | 5,007 |
4078
- | \`aura\` | 51,454 | 17,756 | 15,732 | 27,662 | 8,674 | 7,266 |
4079
- | \`avatar\` | 35,091 | 12,684 | 11,344 | 8,247 | 2,182 | 1,603 |
4080
- | \`badge\` | 32,752 | 11,796 | 10,508 | 9,034 | 2,290 | 1,807 |
4081
- | \`bar-chart\` | 107,796 | 35,304 | 31,175 | 31,330 | 8,125 | 6,412 |
4082
- | \`blockquote\` | 26,860 | 10,107 | 8,937 | 5,287 | 1,590 | 1,069 |
4083
- | \`breadcrumbs\` | 44,839 | 15,417 | 13,803 | 15,636 | 3,860 | 3,114 |
4084
- | \`button\` | 45,395 | 15,058 | 13,429 | 12,314 | 3,102 | 2,339 |
4085
- | \`button-group\` | 30,815 | 10,972 | 9,753 | 8,394 | 2,220 | 1,561 |
4086
- | \`callout\` | 40,328 | 14,800 | 13,204 | 7,345 | 2,094 | 1,522 |
4087
- | \`canvas\` | 131,925 | 39,252 | 34,209 | 91,365 | 25,295 | 20,897 |
4088
- | \`card\` | 28,213 | 10,189 | 9,048 | 6,662 | 1,803 | 1,293 |
4089
- | \`carousel\` | 54,175 | 17,279 | 15,481 | 26,186 | 6,155 | 4,866 |
4090
- | \`chat\` | 96,668 | 29,242 | 25,864 | 44,844 | 11,129 | 8,807 |
4091
- | \`checkbox\` | 49,014 | 15,669 | 13,982 | 10,203 | 2,632 | 1,909 |
4092
- | \`checkbox-group\` | 57,640 | 17,777 | 15,820 | 16,834 | 4,231 | 3,109 |
4093
- | \`code\` | 21,671 | 8,471 | 7,490 | 1,639 | 574 | 413 |
4094
- | \`code-block\` | 131,026 | 39,169 | 34,617 | 63,005 | 14,661 | 11,960 |
4095
- | \`color-input\` | 188,995 | 51,714 | 45,167 | 100,811 | 20,982 | 17,244 |
4096
- | \`color-picker\` | 143,753 | 38,807 | 33,933 | 86,493 | 18,581 | 15,119 |
4097
- | \`combobox\` | 155,447 | 46,075 | 40,420 | 56,853 | 13,021 | 10,418 |
4098
- | \`command\` | 123,864 | 35,894 | 31,461 | 52,902 | 12,451 | 9,989 |
4099
- | \`copy-button\` | 96,784 | 30,606 | 27,117 | 31,439 | 7,136 | 5,525 |
4100
- | \`data-table\` | 292,611 | 80,903 | 66,123 | 180,444 | 43,466 | 32,472 |
4101
- | \`date-input\` | 166,047 | 48,312 | 42,475 | 60,445 | 13,254 | 10,745 |
4102
- | \`date-picker\` | 70,066 | 22,365 | 19,990 | 28,515 | 7,015 | 5,550 |
4103
- | \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,475 | 985 |
4104
- | \`dialog\` | 46,594 | 15,877 | 14,136 | 11,648 | 3,190 | 2,456 |
4105
- | \`divider\` | 25,821 | 9,692 | 8,548 | 4,376 | 1,307 | 944 |
4106
- | \`donut-chart\` | 98,148 | 32,778 | 28,958 | 24,750 | 6,637 | 5,179 |
4107
- | \`drawer\` | 51,584 | 17,416 | 15,570 | 13,859 | 3,821 | 2,956 |
4108
- | \`drilldown\` | 51,187 | 16,886 | 15,088 | 16,523 | 4,173 | 3,257 |
4109
- | \`empty\` | 26,021 | 9,826 | 8,677 | 3,909 | 1,277 | 774 |
4110
- | \`file-input\` | 71,282 | 22,652 | 20,113 | 25,746 | 6,669 | 5,332 |
4111
- | \`filter-input\` | 186,978 | 51,956 | 45,068 | 95,640 | 20,860 | 16,811 |
4112
- | \`flex\` | 25,978 | 9,321 | 8,257 | 5,154 | 1,207 | 878 |
4113
- | \`format-date\` | 30,640 | 11,432 | 10,213 | 5,337 | 1,548 | 1,031 |
4114
- | \`graph\` | 83,785 | 25,388 | 22,506 | 32,513 | 8,161 | 6,409 |
4115
- | \`grid\` | 27,233 | 9,978 | 8,825 | 6,021 | 1,609 | 1,203 |
4116
- | \`heatmap\` | 102,775 | 34,189 | 30,228 | 24,713 | 6,620 | 5,164 |
4117
- | \`icon\` | 84,859 | 28,840 | 24,719 | 61,200 | 20,452 | 16,631 |
4118
- | \`icon-button\` | 47,177 | 15,048 | 13,450 | 14,097 | 3,118 | 2,357 |
4119
- | \`image\` | 27,417 | 10,071 | 8,941 | 5,872 | 1,784 | 1,297 |
4120
- | \`input\` | 53,248 | 17,735 | 15,688 | 12,285 | 3,675 | 2,645 |
4121
- | \`kbd\` | 29,864 | 11,147 | 9,844 | 6,137 | 1,797 | 1,198 |
4122
- | \`legend\` | 40,308 | 14,176 | 12,544 | 8,570 | 2,410 | 1,742 |
4123
- | \`lightbox\` | 63,863 | 20,329 | 18,084 | 23,986 | 6,088 | 4,522 |
4124
- | \`line-chart\` | 103,344 | 34,157 | 30,264 | 26,698 | 6,984 | 5,562 |
4125
- | \`list\` | 69,727 | 23,129 | 20,645 | 22,944 | 6,186 | 4,745 |
4126
- | \`listbox\` | 87,214 | 27,683 | 24,446 | 24,641 | 6,659 | 5,105 |
4127
- | \`loader\` | 30,830 | 11,357 | 10,101 | 5,870 | 1,750 | 1,266 |
4128
- | \`map\` | 119,571 | 30,617 | 26,661 | 77,400 | 16,314 | 12,918 |
4129
- | \`megamenu\` | 65,860 | 22,963 | 20,359 | 14,234 | 3,732 | 2,799 |
4130
- | \`menu\` | 118,358 | 37,178 | 32,800 | 46,480 | 11,009 | 9,001 |
4131
- | \`meter\` | 38,671 | 13,585 | 12,159 | 11,502 | 2,915 | 2,228 |
4132
- | \`navigation\` | 38,564 | 13,834 | 12,345 | 7,765 | 2,191 | 1,572 |
4133
- | \`notifications\` | 74,914 | 22,638 | 20,180 | 33,671 | 7,707 | 6,088 |
4134
- | \`number-input\` | 62,796 | 20,331 | 18,158 | 19,186 | 4,997 | 3,685 |
4135
- | \`object-inspector\` | 133,658 | 41,511 | 36,535 | 53,631 | 13,193 | 10,509 |
4136
- | \`option\` | 31,522 | 10,947 | 9,686 | 9,715 | 2,432 | 1,815 |
4137
- | \`orb\` | 36,192 | 13,879 | 12,387 | 9,445 | 3,639 | 2,876 |
4138
- | \`outline\` | 38,336 | 13,558 | 12,112 | 11,471 | 3,174 | 2,271 |
4139
- | \`pagination\` | 159,103 | 47,035 | 40,879 | 67,485 | 15,531 | 12,364 |
4140
- | \`pin-input\` | 52,001 | 17,615 | 15,709 | 10,721 | 3,314 | 2,429 |
4141
- | \`popover\` | 69,340 | 24,321 | 21,552 | 10,231 | 2,863 | 2,016 |
4142
- | \`progress\` | 36,291 | 12,643 | 11,276 | 10,837 | 2,760 | 2,190 |
4143
- | \`qr-code\` | 45,317 | 17,412 | 15,492 | 19,258 | 7,020 | 5,710 |
4144
- | \`quote\` | 23,589 | 9,213 | 8,124 | 2,413 | 893 | 616 |
4145
- | \`radio\` | 53,541 | 16,538 | 14,734 | 12,923 | 2,989 | 2,120 |
4146
- | \`rating\` | 55,435 | 18,704 | 16,701 | 12,265 | 3,723 | 2,742 |
4147
- | \`sandbox\` | 93,454 | 27,175 | 23,835 | 60,885 | 15,028 | 12,163 |
4148
- | \`scatter-chart\` | 100,808 | 33,593 | 29,675 | 25,579 | 7,016 | 5,529 |
4149
- | \`scroll-area\` | 35,927 | 12,124 | 10,757 | 14,171 | 3,720 | 2,910 |
4150
- | \`select\` | 137,072 | 42,106 | 36,924 | 46,058 | 10,972 | 8,594 |
4151
- | \`skeleton\` | 26,269 | 9,683 | 8,609 | 5,066 | 1,490 | 1,008 |
4152
- | \`skip-link\` | 27,440 | 10,500 | 9,298 | 3,441 | 1,132 | 733 |
4153
- | \`slider\` | 69,545 | 20,449 | 18,325 | 28,886 | 6,359 | 5,022 |
4154
- | \`sparkline\` | 53,434 | 18,854 | 16,865 | 11,713 | 3,575 | 2,798 |
4155
- | \`speed-dial\` | 78,630 | 26,647 | 23,715 | 19,119 | 4,416 | 3,364 |
4156
- | \`splitter\` | 50,494 | 16,425 | 14,687 | 20,798 | 4,998 | 3,912 |
4157
- | \`stat\` | 29,023 | 10,426 | 9,283 | 6,495 | 1,672 | 1,237 |
4158
- | \`steps\` | 71,902 | 22,212 | 19,718 | 29,762 | 6,941 | 5,616 |
4159
- | \`strands\` | 49,560 | 17,761 | 15,769 | 25,615 | 8,461 | 7,146 |
4160
- | \`switch\` | 45,727 | 15,127 | 13,471 | 6,635 | 1,923 | 1,395 |
4161
- | \`table\` | 139,608 | 40,301 | 35,032 | 66,068 | 15,998 | 12,849 |
4162
- | \`tabs\` | 60,388 | 18,899 | 16,801 | 21,157 | 4,926 | 3,833 |
4163
- | \`tag\` | 49,666 | 17,301 | 15,425 | 13,922 | 3,736 | 2,868 |
4164
- | \`text\` | 28,979 | 10,064 | 8,869 | 7,770 | 1,661 | 1,167 |
4165
- | \`textarea\` | 50,411 | 16,625 | 14,809 | 10,007 | 2,826 | 2,103 |
4166
- | \`time-input\` | 198,830 | 57,002 | 49,491 | 75,432 | 16,822 | 13,595 |
4167
- | \`time-picker\` | 114,778 | 34,117 | 29,924 | 47,993 | 11,816 | 9,412 |
4168
- | \`timeline\` | 39,563 | 13,486 | 12,060 | 12,004 | 2,743 | 2,154 |
4169
- | \`toast\` | 60,737 | 20,109 | 17,884 | 21,387 | 5,646 | 4,460 |
4170
- | \`toggle\` | 51,920 | 16,444 | 14,619 | 12,243 | 3,354 | 2,495 |
4171
- | \`toolbar\` | 35,730 | 12,720 | 11,371 | 8,488 | 2,319 | 1,674 |
4172
- | \`tooltip\` | 62,018 | 21,904 | 19,464 | 11,643 | 3,230 | 2,433 |
4173
- | \`tour\` | 98,152 | 31,515 | 27,870 | 32,163 | 7,836 | 6,143 |
4174
- | \`tree\` | 78,869 | 25,015 | 22,310 | 27,190 | 7,162 | 5,683 |
4175
- | \`trend\` | 32,227 | 12,325 | 11,013 | 5,655 | 1,741 | 1,254 |
4176
- | \`video\` | 169,593 | 49,192 | 42,938 | 92,907 | 21,464 | 17,633 |
4177
- | \`video-playlist\` | 153,047 | 45,651 | 40,018 | 66,117 | 15,168 | 12,276 |
4178
- | \`virtual-list\` | 62,518 | 21,105 | 18,870 | 23,255 | 6,987 | 5,502 |
4074
+ | \`accordion\` | 36,857 | 12,854 | 11,433 | 10,116 | 2,693 | 1,955 |
4075
+ | \`announcement\` | 43,624 | 15,064 | 13,468 | 9,931 | 2,672 | 1,941 |
4076
+ | \`app-header\` | 39,343 | 13,600 | 12,087 | 11,590 | 3,095 | 2,312 |
4077
+ | \`area-chart\` | 99,628 | 33,560 | 29,685 | 23,309 | 6,471 | 5,051 |
4078
+ | \`aura\` | 51,454 | 17,757 | 15,762 | 27,662 | 8,676 | 7,149 |
4079
+ | \`avatar\` | 35,091 | 12,684 | 11,346 | 8,247 | 2,183 | 1,554 |
4080
+ | \`badge\` | 32,752 | 11,796 | 10,508 | 9,034 | 2,290 | 1,702 |
4081
+ | \`bar-chart\` | 108,019 | 35,341 | 31,267 | 31,553 | 8,172 | 6,462 |
4082
+ | \`blockquote\` | 26,860 | 10,106 | 8,936 | 5,287 | 1,593 | 1,112 |
4083
+ | \`breadcrumbs\` | 44,839 | 15,417 | 13,760 | 15,636 | 3,860 | 2,913 |
4084
+ | \`button\` | 45,395 | 15,059 | 13,429 | 12,314 | 3,103 | 2,268 |
4085
+ | \`button-group\` | 31,742 | 11,238 | 9,978 | 9,164 | 2,414 | 1,707 |
4086
+ | \`callout\` | 40,328 | 14,800 | 13,204 | 7,345 | 2,098 | 1,600 |
4087
+ | \`canvas\` | 132,144 | 39,299 | 34,209 | 91,584 | 25,349 | 20,911 |
4088
+ | \`card\` | 28,213 | 10,189 | 9,048 | 6,662 | 1,804 | 1,287 |
4089
+ | \`carousel\` | 54,175 | 17,279 | 15,442 | 26,186 | 6,158 | 4,831 |
4090
+ | \`chat\` | 96,668 | 29,242 | 25,872 | 44,844 | 11,140 | 8,778 |
4091
+ | \`checkbox\` | 49,014 | 15,668 | 13,981 | 10,203 | 2,633 | 1,777 |
4092
+ | \`checkbox-group\` | 57,640 | 17,777 | 15,820 | 16,834 | 4,233 | 3,038 |
4093
+ | \`code\` | 21,671 | 8,471 | 7,490 | 1,639 | 577 | 334 |
4094
+ | \`code-block\` | 132,609 | 39,532 | 34,910 | 64,590 | 15,046 | 12,083 |
4095
+ | \`color-input\` | 189,930 | 51,984 | 45,391 | 101,583 | 21,176 | 17,429 |
4096
+ | \`color-picker\` | 144,685 | 39,061 | 34,214 | 87,265 | 18,794 | 15,226 |
4097
+ | \`combobox\` | 155,678 | 46,141 | 40,458 | 57,084 | 13,087 | 10,448 |
4098
+ | \`command\` | 123,864 | 35,894 | 31,505 | 52,902 | 12,459 | 9,898 |
4099
+ | \`copy-button\` | 98,366 | 31,009 | 27,434 | 33,025 | 7,531 | 5,783 |
4100
+ | \`data-table\` | 292,611 | 80,903 | 65,984 | 180,444 | 43,483 | 32,357 |
4101
+ | \`date-input\` | 166,278 | 48,372 | 42,575 | 60,676 | 13,317 | 10,698 |
4102
+ | \`date-picker\` | 70,066 | 22,365 | 20,002 | 28,515 | 7,015 | 5,485 |
4103
+ | \`description-list\` | 27,039 | 9,669 | 8,577 | 5,841 | 1,478 | 954 |
4104
+ | \`dialog\` | 46,594 | 15,877 | 14,147 | 11,648 | 3,194 | 2,417 |
4105
+ | \`divider\` | 25,821 | 9,693 | 8,547 | 4,376 | 1,311 | 929 |
4106
+ | \`donut-chart\` | 98,371 | 32,820 | 29,075 | 24,973 | 6,681 | 5,199 |
4107
+ | \`drawer\` | 51,584 | 17,416 | 15,522 | 13,859 | 3,822 | 2,953 |
4108
+ | \`drilldown\` | 51,187 | 16,886 | 15,082 | 16,523 | 4,179 | 3,015 |
4109
+ | \`empty\` | 26,021 | 9,826 | 8,678 | 3,909 | 1,278 | 726 |
4110
+ | \`file-input\` | 71,513 | 22,716 | 20,146 | 25,977 | 6,729 | 5,329 |
4111
+ | \`filter-input\` | 186,978 | 51,956 | 45,043 | 95,640 | 20,867 | 16,883 |
4112
+ | \`flex\` | 25,978 | 9,321 | 8,258 | 5,154 | 1,206 | 796 |
4113
+ | \`format-date\` | 30,640 | 11,432 | 10,213 | 5,337 | 1,551 | 1,049 |
4114
+ | \`graph\` | 84,277 | 25,480 | 22,515 | 33,006 | 8,248 | 6,502 |
4115
+ | \`grid\` | 27,233 | 9,978 | 8,825 | 6,021 | 1,609 | 1,181 |
4116
+ | \`heatmap\` | 102,998 | 34,235 | 30,222 | 24,936 | 6,676 | 5,170 |
4117
+ | \`icon\` | 84,859 | 28,840 | 24,746 | 61,200 | 20,458 | 16,667 |
4118
+ | \`icon-button\` | 47,177 | 15,048 | 13,450 | 14,097 | 3,120 | 2,259 |
4119
+ | \`image\` | 27,417 | 10,071 | 8,935 | 5,872 | 1,785 | 1,207 |
4120
+ | \`input\` | 53,248 | 17,735 | 15,688 | 12,285 | 3,675 | 2,593 |
4121
+ | \`kbd\` | 29,864 | 11,147 | 9,844 | 6,137 | 1,801 | 1,204 |
4122
+ | \`legend\` | 40,308 | 14,176 | 12,545 | 8,570 | 2,411 | 1,697 |
4123
+ | \`lightbox\` | 63,863 | 20,330 | 18,067 | 23,986 | 6,090 | 4,464 |
4124
+ | \`line-chart\` | 103,567 | 34,209 | 30,312 | 26,921 | 7,031 | 5,527 |
4125
+ | \`list\` | 69,907 | 23,196 | 20,650 | 23,007 | 6,202 | 4,789 |
4126
+ | \`listbox\` | 87,214 | 27,683 | 24,427 | 24,641 | 6,660 | 5,033 |
4127
+ | \`loader\` | 30,830 | 11,358 | 10,102 | 5,870 | 1,753 | 1,207 |
4128
+ | \`map\` | 119,571 | 30,617 | 26,649 | 77,400 | 16,329 | 12,880 |
4129
+ | \`megamenu\` | 65,860 | 22,963 | 20,350 | 14,234 | 3,733 | 2,673 |
4130
+ | \`menu\` | 118,358 | 37,179 | 32,759 | 46,480 | 11,019 | 8,744 |
4131
+ | \`meter\` | 38,671 | 13,585 | 12,159 | 11,502 | 2,915 | 2,234 |
4132
+ | \`navigation\` | 38,839 | 13,959 | 12,419 | 7,765 | 2,191 | 1,567 |
4133
+ | \`notifications\` | 74,914 | 22,638 | 20,192 | 33,671 | 7,715 | 6,099 |
4134
+ | \`number-input\` | 62,796 | 20,331 | 18,100 | 19,186 | 4,999 | 3,744 |
4135
+ | \`object-inspector\` | 135,245 | 41,872 | 36,787 | 55,222 | 13,563 | 10,789 |
4136
+ | \`option\` | 31,522 | 10,947 | 9,689 | 9,715 | 2,433 | 1,741 |
4137
+ | \`orb\` | 36,941 | 14,131 | 12,610 | 10,072 | 3,816 | 2,960 |
4138
+ | \`outline\` | 39,915 | 14,145 | 12,617 | 12,777 | 3,628 | 2,646 |
4139
+ | \`pagination\` | 159,103 | 47,035 | 40,932 | 67,485 | 15,539 | 12,291 |
4140
+ | \`pin-input\` | 52,001 | 17,615 | 15,718 | 10,721 | 3,315 | 2,372 |
4141
+ | \`popover\` | 69,340 | 24,321 | 21,608 | 10,231 | 2,863 | 2,039 |
4142
+ | \`progress\` | 36,291 | 12,643 | 11,276 | 10,837 | 2,759 | 2,085 |
4143
+ | \`qr-code\` | 45,317 | 17,412 | 15,511 | 19,258 | 7,023 | 5,619 |
4144
+ | \`quote\` | 23,589 | 9,214 | 8,148 | 2,413 | 895 | 491 |
4145
+ | \`radio\` | 53,541 | 16,539 | 14,731 | 12,923 | 2,989 | 2,069 |
4146
+ | \`rating\` | 55,435 | 18,704 | 16,700 | 12,265 | 3,727 | 2,666 |
4147
+ | \`sandbox\` | 105,701 | 31,214 | 27,279 | 73,136 | 19,034 | 15,459 |
4148
+ | \`scatter-chart\` | 101,031 | 33,646 | 29,708 | 25,802 | 7,060 | 5,500 |
4149
+ | \`scroll-area\` | 35,927 | 12,124 | 10,756 | 14,171 | 3,722 | 2,715 |
4150
+ | \`select\` | 137,072 | 42,106 | 36,919 | 46,058 | 10,982 | 8,572 |
4151
+ | \`skeleton\` | 26,269 | 9,683 | 8,610 | 5,066 | 1,491 | 971 |
4152
+ | \`skip-link\` | 27,440 | 10,500 | 9,298 | 3,441 | 1,134 | 655 |
4153
+ | \`slider\` | 69,545 | 20,449 | 18,335 | 28,886 | 6,359 | 4,898 |
4154
+ | \`sparkline\` | 53,434 | 18,854 | 16,865 | 11,713 | 3,575 | 2,703 |
4155
+ | \`speed-dial\` | 79,415 | 26,808 | 23,781 | 19,904 | 4,585 | 3,452 |
4156
+ | \`splitter\` | 50,849 | 16,520 | 14,755 | 21,153 | 5,091 | 3,913 |
4157
+ | \`stat\` | 29,023 | 10,426 | 9,290 | 6,495 | 1,674 | 1,096 |
4158
+ | \`steps\` | 71,902 | 22,212 | 19,746 | 29,762 | 6,947 | 5,450 |
4159
+ | \`strands\` | 49,560 | 17,761 | 15,752 | 25,615 | 8,464 | 7,026 |
4160
+ | \`switch\` | 45,727 | 15,127 | 13,488 | 6,635 | 1,924 | 1,250 |
4161
+ | \`table\` | 139,608 | 40,301 | 35,057 | 66,068 | 16,007 | 12,759 |
4162
+ | \`tabs\` | 60,663 | 19,011 | 16,904 | 21,157 | 4,927 | 3,752 |
4163
+ | \`tag\` | 50,048 | 17,404 | 15,589 | 14,304 | 3,838 | 2,814 |
4164
+ | \`text\` | 28,979 | 10,064 | 8,869 | 7,770 | 1,664 | 1,117 |
4165
+ | \`textarea\` | 50,411 | 16,626 | 14,816 | 10,007 | 2,828 | 2,046 |
4166
+ | \`time-input\` | 199,209 | 57,140 | 49,609 | 75,811 | 16,926 | 13,522 |
4167
+ | \`time-picker\` | 114,926 | 34,152 | 30,046 | 48,141 | 11,863 | 9,389 |
4168
+ | \`timeline\` | 40,524 | 13,714 | 12,270 | 12,967 | 2,966 | 2,278 |
4169
+ | \`toast\` | 60,737 | 20,109 | 17,885 | 21,387 | 5,647 | 4,303 |
4170
+ | \`toggle\` | 52,195 | 16,559 | 14,695 | 12,243 | 3,355 | 2,410 |
4171
+ | \`toolbar\` | 35,730 | 12,720 | 11,372 | 8,488 | 2,321 | 1,615 |
4172
+ | \`tooltip\` | 62,241 | 21,948 | 19,514 | 11,866 | 3,282 | 2,405 |
4173
+ | \`tour\` | 98,152 | 31,515 | 27,849 | 32,163 | 7,847 | 6,142 |
4174
+ | \`tree\` | 78,869 | 25,015 | 22,253 | 27,190 | 7,164 | 5,637 |
4175
+ | \`trend\` | 32,227 | 12,325 | 11,000 | 5,655 | 1,745 | 1,202 |
4176
+ | \`video\` | 169,593 | 49,193 | 42,943 | 92,907 | 21,469 | 17,584 |
4177
+ | \`video-playlist\` | 153,047 | 45,651 | 40,036 | 66,117 | 15,178 | 12,367 |
4178
+ | \`virtual-list\` | 62,724 | 21,154 | 18,910 | 23,461 | 7,038 | 5,480 |
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,426,691 | 541 | 701,248 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
4191
- | \`@fusion.dev/helix-headless\` | 21,378,792 | 686 | 2,162,224 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
4190
+ | \`@fusion.dev/helix-core\` | 2,428,287 | 541 | 702,094 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
4191
+ | \`@fusion.dev/helix-headless\` | 21,509,808 | 690 | 2,186,103 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
4192
4192
  | \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
4193
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,392,328 | 944 | 473,566 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
4195
+ | \`@fusion.dev/helix\` | 21,584,857 | 950 | 505,592 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
4196
4196
 
4197
4197
  ## Not measured yet
4198
4198
 
@@ -5415,12 +5415,17 @@ without tracking which element sent each event. The names the sandbox reads:
5415
5415
  - A pane named \`html\` sets the preview's markup.
5416
5416
  - A pane named \`css\` sets its stylesheet.
5417
5417
  - A pane named \`js\` sets a script, which runs as a module after the markup.
5418
+ - A pane named for a module file, ending in \`.js\` or \`.mjs\`, such as
5419
+ \`utils.js\`, is a module the other scripts import by its path.
5420
+ - A pane named \`package.json\` sets the npm packages the scripts import by name,
5421
+ from its \`dependencies\`.
5418
5422
 
5419
5423
  The sandbox ignores a pane with any other name, so that pane only displays its
5420
5424
  contents.
5421
5425
 
5422
- A pane's text goes in its \`value\`. The pane renders no children. The sandbox
5423
- also hands each pane's \`value\` to the preview when it starts, so you write the
5426
+ A pane's text goes in its \`value\`, or inside the pane where \`value\` is not set.
5427
+ Put markup inside a \`<template>\`, so the page does not render it. The sandbox
5428
+ also hands each pane's text to the preview when it starts, so you write the
5424
5429
  text once, in the pane. A preview given its own \`source\` keeps it until the
5425
5430
  first edit.
5426
5431
 
@@ -5453,6 +5458,72 @@ holds the \`name\` of the pane shown. The arrow keys move between the tabs, and
5453
5458
  \`helix-before-change\` with the pane's \`name\`, which you can cancel, and
5454
5459
  \`change\` once \`file\` holds it. The panes not shown carry \`hidden\`.
5455
5460
 
5461
+ ## Packages and module files
5462
+
5463
+ In the built-in document, an example imports npm packages by name and its own
5464
+ files by path, as it would in a project. A \`package.json\` pane lists the
5465
+ packages and their versions, and each package loads from the preview's \`cdn\`,
5466
+ \`https://esm.sh/\` by default, at the version or range given. Each module pane
5467
+ is a file the scripts import by a relative path:
5468
+
5469
+ \`\`\`html
5470
+ <helix-sandbox>
5471
+ <helix-sandbox-source label="main.js" name="js" slot="source">
5472
+ import confetti from 'canvas-confetti'
5473
+ import { cheer } from './cheer.js'
5474
+
5475
+ confetti()
5476
+ cheer()
5477
+ </helix-sandbox-source>
5478
+ <helix-sandbox-source name="cheer.js" slot="source">
5479
+ export const cheer = () => console.log('Done')
5480
+ </helix-sandbox-source>
5481
+ <helix-sandbox-source name="package.json" slot="source">
5482
+ { "dependencies": { "canvas-confetti": "^1.9" } }
5483
+ </helix-sandbox-source>
5484
+ <helix-sandbox-preview slot="preview"></helix-sandbox-preview>
5485
+ </helix-sandbox>
5486
+ \`\`\`
5487
+
5488
+ The preview takes the same lists as \`dependencies\` and \`modules\` without a
5489
+ sandbox around it. \`imports\` maps a name to an address of your own, and wins
5490
+ over a package of the same name. The preview loads its document again when one
5491
+ of them changes, because a browser reads an import map only as a document
5492
+ starts. A \`src\` document declares its own import map.
5493
+
5494
+ ## Editing keys
5495
+
5496
+ In a source pane, Tab inserts two spaces. Shift+Tab moves focus back, and
5497
+ Escape then Tab moves it forward. The field's description says this to a
5498
+ screen reader. The other keys follow CodeMirror. \`Mod\` is Command on a Mac and
5499
+ Control elsewhere.
5500
+
5501
+ | Key | Does |
5502
+ |---|---|
5503
+ | Tab, with text selected | Indents every line the selection touches |
5504
+ | \`Mod+]\` | Indents the lines |
5505
+ | \`Mod+[\` | Outdents the lines |
5506
+ | \`Mod+/\` | Comments the lines out, or back in |
5507
+ | Enter | Breaks the line and keeps its indentation, one level deeper after an opening bracket |
5508
+
5509
+ Three editing aids are off until you set them:
5510
+
5511
+ - \`close-brackets\` closes brackets and quotes as you type them. A closing
5512
+ character typed before the same one steps over it, and Backspace between an
5513
+ empty pair deletes both.
5514
+ - \`match-brackets\` marks the bracket beside the caret and its pair while the
5515
+ field has focus.
5516
+ - \`complete\` offers the words of the source that start with the word you are
5517
+ typing, and the words in \`completions\`. The arrow keys move through the list,
5518
+ Enter or Tab takes a word, and Escape closes it. \`manifestWords\` reads the tag
5519
+ names, attribute names, and custom properties of a custom elements manifest
5520
+ into \`completions\`.
5521
+
5522
+ A pane is \`:state(modified)\` while it holds an edit, and so is the sandbox
5523
+ around it. The file tab of an edited pane has a dot after its name, and a
5524
+ screen reader reads it as modified. \`reset()\` on a pane, or on the sandbox for
5525
+ every pane, puts back the source it was given.
5526
+
5456
5527
  ## Your own editor
5457
5528
 
5458
5529
  Any element can be the source pane. Put it in the \`source\` slot, give it a
@@ -5499,10 +5570,6 @@ customElements.define('code-editor', CodeEditor)
5499
5570
  </helix-sandbox>
5500
5571
  \`\`\`
5501
5572
 
5502
- In a source pane, Tab inserts two spaces. Shift+Tab moves focus back, and
5503
- Escape then Tab moves it forward. The field's description says this to a
5504
- screen reader.
5505
-
5506
5573
  Each request has a notification once it is applied: \`helix-edit\` after
5507
5574
  \`helix-before-edit\`, \`helix-split\` after \`helix-before-split\`, and
5508
5575
  \`helix-panel-resize\` after \`helix-before-panel-resize\`. Listen for these to