@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.
@@ -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 or a form control that renders with no name warns once in the console:
71
- \`<helix-icon-button> has no accessible name\`, followed by the ways to give it
72
- one. The check runs a moment after the control first renders, so a label your
73
- framework writes beside the control in the same pass counts. The warning has the
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 or "Hour" on a time
2803
- wheel. Set those through their properties, such as \`previous-label\` and
2804
- \`next-label\` on Date Picker and Date Input, and \`hour-label\` on Time Picker.
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\` | 187,432 | 58,155 | 50,073 |
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\` | 186,986 | 57,779 | 49,809 | The element base class, mixins, decorators, and floating positioning. |
3603
- | \`@fusion.dev/helix-headless\` | 992,145 | 263,585 | 200,543 | Every headless family. The barrel entry includes all of them. |
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,568,947 | 373,763 | 267,263 | Every styled family. |
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,572 | 4,533 | 3,941 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
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 17,557 bytes gzipped alone, and it adds 3,233 to a page that already has Helix. The shared runtime is 82 percent of the first component, and the component itself is 18 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.
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 11,100 bytes gzipped alone, and the largest is \`data-table\` at 60,538. Every family together is 373,763.
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 263,585 bytes gzipped, whatever else the page imports. That is 15 times the median family above. All 104 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
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 16,776 bytes gzipped alone.
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** | 59,087 | 16,738 | 14,534 |
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** | 62,691 | 17,487 | 15,241 |
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** | 57,430 | 16,792 | 14,604 |
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** | 66,658 | 18,229 | 15,925 |
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** | 60,150 | 17,097 | 14,895 |
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** | 61,927 | 17,273 | 15,039 |
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** | 76,823 | 24,103 | 21,174 |
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 7,569 bytes gzipped. 16 of 27 peer measurements are smaller than the Helix row.
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\` | 48,182 | 14,297 | 12,505 | 4,984 | 1,425 | 1,027 |
3729
- | \`announcement\` | 45,102 | 13,253 | 11,583 | 2,271 | 666 | 366 |
3730
- | \`app-header\` | 40,435 | 11,750 | 10,286 | 2,247 | 762 | 416 |
3731
- | \`area-chart\` | 93,044 | 29,698 | 26,035 | 13,495 | 4,160 | 3,202 |
3732
- | \`avatar\` | 43,148 | 12,508 | 10,964 | 4,317 | 1,353 | 970 |
3733
- | \`badge\` | 38,802 | 11,320 | 9,899 | 1,149 | 462 | 169 |
3734
- | \`bar-chart\` | 95,625 | 30,410 | 26,632 | 15,690 | 4,757 | 3,722 |
3735
- | \`blockquote\` | 38,968 | 11,387 | 9,960 | 912 | 390 | 223 |
3736
- | \`breadcrumbs\` | 43,561 | 12,979 | 11,433 | 4,544 | 1,603 | 1,263 |
3737
- | \`button\` | 51,795 | 15,244 | 13,214 | 4,710 | 1,463 | 1,005 |
3738
- | \`button-group\` | 38,686 | 11,221 | 9,844 | 661 | 314 | 77 |
3739
- | \`callout\` | 44,036 | 13,108 | 11,419 | 1,329 | 523 | 261 |
3740
- | \`canvas\` | 102,108 | 29,682 | 25,917 | 52,193 | 15,722 | 13,044 |
3741
- | \`card\` | 39,797 | 11,559 | 10,137 | 1,604 | 531 | 315 |
3742
- | \`carousel\` | 54,081 | 15,710 | 13,854 | 14,651 | 4,009 | 3,111 |
3743
- | \`chat\` | 76,203 | 22,724 | 19,951 | 20,500 | 6,178 | 4,821 |
3744
- | \`checkbox\` | 56,065 | 16,037 | 13,985 | 2,958 | 969 | 620 |
3745
- | \`checkbox-group\` | 61,517 | 17,368 | 15,101 | 7,836 | 2,170 | 1,501 |
3746
- | \`code\` | 37,305 | 10,814 | 9,479 | 451 | 231 | 86 |
3747
- | \`code-block\` | 100,659 | 31,094 | 27,245 | 23,817 | 6,443 | 5,060 |
3748
- | \`color-input\` | 129,357 | 38,449 | 33,511 | 37,761 | 9,644 | 7,541 |
3749
- | \`color-picker\` | 92,148 | 26,799 | 23,386 | 30,390 | 8,172 | 6,406 |
3750
- | \`combobox\` | 127,674 | 37,291 | 32,418 | 35,587 | 8,865 | 6,853 |
3751
- | \`command\` | 89,215 | 25,050 | 21,805 | 26,676 | 7,056 | 5,454 |
3752
- | \`copy-button\` | 94,025 | 29,170 | 25,483 | 17,176 | 4,558 | 3,424 |
3753
- | \`data-table\` | 177,658 | 50,785 | 43,702 | 83,800 | 21,866 | 17,318 |
3754
- | \`date-input\` | 138,630 | 40,115 | 34,906 | 34,269 | 8,334 | 6,560 |
3755
- | \`date-picker\` | 64,808 | 18,557 | 16,414 | 16,799 | 4,441 | 3,383 |
3756
- | \`description-list\` | 40,008 | 11,505 | 10,096 | 1,984 | 611 | 311 |
3757
- | \`dialog\` | 51,811 | 15,529 | 13,433 | 4,950 | 1,603 | 1,104 |
3758
- | \`divider\` | 39,036 | 11,419 | 9,978 | 981 | 410 | 201 |
3759
- | \`donut-chart\` | 91,264 | 28,858 | 25,333 | 13,145 | 3,968 | 3,167 |
3760
- | \`drawer\` | 52,546 | 15,697 | 13,644 | 4,473 | 1,493 | 988 |
3761
- | \`drilldown\` | 55,170 | 16,411 | 14,315 | 6,516 | 1,848 | 1,203 |
3762
- | \`empty\` | 39,474 | 11,522 | 10,104 | 956 | 395 | 130 |
3763
- | \`file-input\` | 72,912 | 21,565 | 18,822 | 13,699 | 4,130 | 3,092 |
3764
- | \`filter-input\` | 133,282 | 38,923 | 33,905 | 39,353 | 9,810 | 7,662 |
3765
- | \`format-date\` | 44,474 | 13,019 | 11,437 | 4,302 | 1,250 | 889 |
3766
- | \`graph\` | 72,758 | 21,404 | 18,752 | 14,811 | 4,748 | 3,673 |
3767
- | \`heatmap\` | 96,216 | 30,222 | 26,355 | 13,605 | 3,906 | 2,947 |
3768
- | \`icon\` | 96,193 | 29,774 | 25,428 | 55,716 | 19,403 | 15,205 |
3769
- | \`icon-button\` | 52,191 | 15,281 | 13,237 | 5,109 | 1,504 | 994 |
3770
- | \`image\` | 42,343 | 12,216 | 10,739 | 3,973 | 1,227 | 884 |
3771
- | \`input\` | 61,557 | 18,134 | 15,685 | 7,153 | 2,441 | 1,637 |
3772
- | \`kbd\` | 42,378 | 12,577 | 11,040 | 3,432 | 1,198 | 697 |
3773
- | \`legend\` | 45,148 | 13,356 | 11,696 | 2,304 | 823 | 460 |
3774
- | \`lightbox\` | 54,970 | 15,935 | 13,911 | 7,865 | 2,207 | 1,534 |
3775
- | \`line-chart\` | 93,394 | 29,685 | 26,039 | 13,695 | 4,104 | 3,262 |
3776
- | \`list\` | 48,692 | 14,425 | 12,682 | 7,199 | 2,144 | 1,437 |
3777
- | \`listbox\` | 74,967 | 21,544 | 18,804 | 16,319 | 4,553 | 3,453 |
3778
- | \`loader\` | 40,808 | 11,871 | 10,403 | 1,966 | 726 | 417 |
3779
- | \`map\` | 91,646 | 25,104 | 21,696 | 38,033 | 9,990 | 7,610 |
3780
- | \`megamenu\` | 70,632 | 22,586 | 19,786 | 5,578 | 1,670 | 1,044 |
3781
- | \`menu\` | 95,195 | 29,728 | 25,881 | 17,573 | 4,578 | 3,401 |
3782
- | \`meter\` | 42,609 | 12,396 | 10,904 | 4,407 | 1,348 | 968 |
3783
- | \`navigation\` | 48,387 | 14,631 | 12,723 | 2,154 | 838 | 524 |
3784
- | \`notifications\` | 63,509 | 17,999 | 15,938 | 15,970 | 4,098 | 3,135 |
3785
- | \`number-input\` | 65,400 | 18,945 | 16,551 | 9,936 | 2,720 | 1,861 |
3786
- | \`object-inspector\` | 114,399 | 35,425 | 30,886 | 30,054 | 8,440 | 6,624 |
3787
- | \`option\` | 41,866 | 12,031 | 10,573 | 3,485 | 935 | 565 |
3788
- | \`outline\` | 46,216 | 13,754 | 12,092 | 6,690 | 2,163 | 1,520 |
3789
- | \`pagination\` | 124,374 | 36,548 | 31,753 | 39,162 | 9,921 | 7,799 |
3790
- | \`pin-input\` | 58,914 | 16,966 | 14,779 | 6,212 | 1,954 | 1,182 |
3791
- | \`popover\` | 74,937 | 23,994 | 20,915 | 3,678 | 1,132 | 733 |
3792
- | \`progress\` | 40,611 | 11,884 | 10,467 | 2,409 | 832 | 550 |
3793
- | \`qr-code\` | 52,870 | 16,531 | 14,518 | 14,937 | 5,498 | 4,506 |
3794
- | \`quote\` | 38,209 | 11,104 | 9,723 | 552 | 309 | 49 |
3795
- | \`radio\` | 58,366 | 16,737 | 14,580 | 3,728 | 1,137 | 704 |
3796
- | \`rating\` | 63,329 | 18,548 | 16,230 | 7,746 | 2,399 | 1,688 |
3797
- | \`scatter-chart\` | 92,677 | 29,362 | 25,735 | 13,985 | 4,238 | 3,245 |
3798
- | \`scroll-area\` | 46,343 | 13,511 | 11,835 | 7,808 | 2,377 | 1,838 |
3799
- | \`select\` | 108,755 | 32,689 | 28,578 | 23,622 | 6,113 | 4,689 |
3800
- | \`skeleton\` | 39,215 | 11,392 | 9,980 | 1,190 | 486 | 233 |
3801
- | \`skip-link\` | 39,372 | 11,544 | 10,106 | 1,562 | 649 | 313 |
3802
- | \`slider\` | 60,476 | 17,333 | 15,200 | 7,357 | 2,100 | 1,551 |
3803
- | \`sparkline\` | 46,221 | 13,916 | 12,229 | 2,387 | 918 | 630 |
3804
- | \`speed-dial\` | 73,207 | 23,615 | 20,753 | 4,218 | 1,242 | 720 |
3805
- | \`splitter\` | 53,638 | 15,614 | 13,630 | 11,451 | 3,064 | 2,338 |
3806
- | \`stat\` | 39,537 | 11,425 | 10,025 | 1,511 | 519 | 372 |
3807
- | \`steps\` | 59,661 | 17,391 | 15,117 | 10,031 | 2,763 | 1,998 |
3808
- | \`switch\` | 55,297 | 15,928 | 13,872 | 1,790 | 686 | 399 |
3809
- | \`table\` | 78,937 | 22,295 | 19,462 | 22,544 | 6,192 | 4,826 |
3810
- | \`tabs\` | 53,749 | 15,656 | 13,649 | 5,251 | 1,392 | 928 |
3811
- | \`tag\` | 50,512 | 15,118 | 13,302 | 5,626 | 1,687 | 1,105 |
3812
- | \`textarea\` | 57,860 | 16,657 | 14,482 | 4,676 | 1,455 | 962 |
3813
- | \`time-input\` | 151,472 | 43,753 | 37,870 | 42,860 | 10,709 | 8,441 |
3814
- | \`time-picker\` | 87,863 | 25,091 | 21,864 | 27,226 | 7,296 | 5,595 |
3815
- | \`timeline\` | 42,119 | 12,148 | 10,666 | 3,185 | 812 | 480 |
3816
- | \`toast\` | 56,162 | 16,815 | 14,779 | 7,965 | 2,426 | 1,825 |
3817
- | \`toggle\` | 61,817 | 17,715 | 15,518 | 5,356 | 1,532 | 1,024 |
3818
- | \`toolbar\` | 46,413 | 13,924 | 12,054 | 4,344 | 1,524 | 998 |
3819
- | \`tooltip\` | 73,745 | 23,374 | 20,558 | 8,345 | 2,417 | 1,793 |
3820
- | \`tour\` | 90,468 | 28,012 | 24,507 | 15,948 | 4,388 | 3,357 |
3821
- | \`tree\` | 60,625 | 17,888 | 15,566 | 11,410 | 3,282 | 2,472 |
3822
- | \`trend\` | 40,772 | 11,996 | 10,523 | 2,213 | 727 | 444 |
3823
- | \`video\` | 132,460 | 39,115 | 33,890 | 50,202 | 12,703 | 10,093 |
3824
- | \`video-playlist\` | 104,620 | 31,866 | 27,789 | 25,604 | 6,488 | 4,970 |
3825
- | \`virtual-list\` | 56,040 | 16,855 | 14,660 | 7,855 | 2,560 | 1,858 |
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\` | 51,996 | 15,127 | 13,260 | 8,785 | 2,272 | 1,810 |
3834
- | \`announcement\` | 49,868 | 14,312 | 12,520 | 7,018 | 1,749 | 1,363 |
3835
- | \`app-header\` | 44,323 | 12,642 | 11,100 | 6,120 | 1,670 | 1,268 |
3836
- | \`area-chart\` | 100,903 | 31,364 | 27,476 | 21,331 | 5,874 | 4,708 |
3837
- | \`aura\` | 68,432 | 20,526 | 18,004 | 27,607 | 8,662 | 7,313 |
3838
- | \`avatar\` | 46,735 | 13,264 | 11,648 | 7,891 | 2,125 | 1,634 |
3839
- | \`badge\` | 43,113 | 12,196 | 10,665 | 5,445 | 1,352 | 954 |
3840
- | \`bar-chart\` | 109,074 | 33,063 | 29,011 | 29,117 | 7,451 | 6,038 |
3841
- | \`blockquote\` | 40,330 | 11,709 | 10,250 | 2,258 | 711 | 535 |
3842
- | \`breadcrumbs\` | 47,403 | 13,789 | 12,158 | 8,370 | 2,446 | 1,887 |
3843
- | \`button\` | 59,087 | 16,738 | 14,534 | 11,984 | 2,987 | 2,212 |
3844
- | \`button-group\` | 40,362 | 11,601 | 10,176 | 2,320 | 708 | 420 |
3845
- | \`callout\` | 47,973 | 14,026 | 12,271 | 5,248 | 1,449 | 1,088 |
3846
- | \`canvas\` | 122,450 | 33,433 | 29,098 | 72,525 | 19,548 | 16,234 |
3847
- | \`card\` | 43,583 | 12,500 | 10,968 | 5,378 | 1,475 | 1,131 |
3848
- | \`carousel\` | 65,340 | 17,549 | 15,539 | 25,899 | 5,956 | 4,733 |
3849
- | \`chat\` | 90,360 | 25,192 | 22,136 | 34,648 | 8,738 | 7,009 |
3850
- | \`checkbox\` | 62,691 | 17,487 | 15,241 | 9,568 | 2,454 | 1,853 |
3851
- | \`checkbox-group\` | 69,245 | 18,957 | 16,532 | 15,554 | 3,820 | 2,872 |
3852
- | \`code\` | 38,382 | 11,100 | 9,739 | 1,511 | 528 | 380 |
3853
- | \`code-block\` | 119,751 | 34,184 | 29,938 | 42,895 | 9,656 | 7,794 |
3854
- | \`color-input\` | 164,610 | 43,923 | 38,450 | 72,998 | 15,122 | 12,351 |
3855
- | \`color-picker\` | 121,700 | 31,494 | 27,592 | 59,934 | 13,000 | 10,504 |
3856
- | \`combobox\` | 144,583 | 40,222 | 35,165 | 52,478 | 11,819 | 9,370 |
3857
- | \`command\` | 101,208 | 27,287 | 23,861 | 38,658 | 9,383 | 7,402 |
3858
- | \`copy-button\` | 105,973 | 31,236 | 27,327 | 29,109 | 6,690 | 5,225 |
3859
- | \`data-table\` | 226,777 | 60,538 | 50,713 | 132,384 | 31,442 | 24,204 |
3860
- | \`date-input\` | 159,944 | 43,750 | 38,133 | 55,567 | 12,043 | 9,729 |
3861
- | \`date-picker\` | 72,489 | 19,877 | 17,653 | 24,462 | 5,777 | 4,621 |
3862
- | \`description-list\` | 42,710 | 12,098 | 10,595 | 4,675 | 1,215 | 820 |
3863
- | \`dialog\` | 57,430 | 16,792 | 14,604 | 10,551 | 2,894 | 2,234 |
3864
- | \`divider\` | 41,614 | 12,030 | 10,535 | 3,542 | 1,016 | 646 |
3865
- | \`donut-chart\` | 101,017 | 30,850 | 27,095 | 22,874 | 6,025 | 4,828 |
3866
- | \`drawer\` | 57,696 | 16,843 | 14,687 | 9,604 | 2,690 | 2,104 |
3867
- | \`drilldown\` | 59,937 | 17,454 | 15,254 | 11,270 | 2,901 | 2,242 |
3868
- | \`empty\` | 41,147 | 12,013 | 10,486 | 2,613 | 878 | 544 |
3869
- | \`file-input\` | 84,516 | 23,831 | 20,829 | 25,298 | 6,387 | 5,050 |
3870
- | \`filter-input\` | 163,717 | 43,928 | 38,177 | 69,415 | 14,735 | 11,870 |
3871
- | \`flex\` | 42,852 | 11,968 | 10,499 | 5,187 | 1,150 | 761 |
3872
- | \`format-date\` | 45,122 | 13,167 | 11,570 | 4,932 | 1,413 | 1,065 |
3873
- | \`graph\` | 87,601 | 23,918 | 20,907 | 29,634 | 7,383 | 5,965 |
3874
- | \`grid\` | 43,813 | 12,422 | 10,941 | 6,154 | 1,599 | 1,210 |
3875
- | \`heatmap\` | 103,675 | 31,725 | 27,779 | 21,043 | 5,449 | 4,216 |
3876
- | \`icon\` | 96,900 | 29,952 | 25,546 | 56,405 | 19,562 | 15,270 |
3877
- | \`icon-button\` | 60,028 | 16,654 | 14,511 | 12,926 | 2,904 | 2,168 |
3878
- | \`image\` | 44,037 | 12,680 | 11,118 | 5,649 | 1,696 | 1,170 |
3879
- | \`input\` | 66,300 | 19,221 | 16,664 | 11,884 | 3,566 | 2,670 |
3880
- | \`kbd\` | 43,792 | 13,034 | 11,457 | 4,829 | 1,641 | 1,170 |
3881
- | \`legend\` | 50,639 | 14,618 | 12,770 | 7,671 | 2,071 | 1,529 |
3882
- | \`lightbox\` | 59,970 | 17,029 | 14,909 | 12,850 | 3,298 | 2,514 |
3883
- | \`line-chart\` | 103,812 | 31,810 | 27,859 | 24,094 | 6,276 | 4,948 |
3884
- | \`list\` | 53,824 | 15,600 | 13,715 | 12,315 | 3,316 | 2,496 |
3885
- | \`listbox\` | 79,485 | 22,558 | 19,736 | 20,826 | 5,586 | 4,308 |
3886
- | \`loader\` | 44,099 | 12,665 | 11,143 | 5,242 | 1,510 | 1,116 |
3887
- | \`map\` | 128,697 | 30,515 | 26,414 | 75,074 | 15,527 | 12,408 |
3888
- | \`megamenu\` | 75,513 | 23,618 | 20,738 | 10,443 | 2,763 | 2,106 |
3889
- | \`menu\` | 105,201 | 31,674 | 27,636 | 27,568 | 6,582 | 5,122 |
3890
- | \`meter\` | 48,692 | 13,620 | 11,991 | 10,472 | 2,606 | 2,044 |
3891
- | \`navigation\` | 50,161 | 15,107 | 13,167 | 3,908 | 1,310 | 903 |
3892
- | \`notifications\` | 77,423 | 20,438 | 18,074 | 29,875 | 6,613 | 5,353 |
3893
- | \`number-input\` | 70,373 | 20,083 | 17,564 | 14,890 | 3,882 | 2,932 |
3894
- | \`object-inspector\` | 131,097 | 38,189 | 33,355 | 46,731 | 11,254 | 9,045 |
3895
- | \`option\` | 45,120 | 12,942 | 11,368 | 6,725 | 1,839 | 1,332 |
3896
- | \`orb\` | 50,299 | 15,575 | 13,645 | 9,518 | 3,618 | 2,949 |
3897
- | \`outline\` | 50,275 | 14,576 | 12,869 | 10,732 | 3,007 | 2,289 |
3898
- | \`pagination\` | 142,357 | 39,619 | 34,462 | 57,128 | 13,039 | 10,384 |
3899
- | \`pin-input\` | 62,362 | 17,819 | 15,600 | 9,643 | 2,837 | 2,015 |
3900
- | \`popover\` | 78,559 | 24,787 | 21,610 | 7,282 | 1,931 | 1,484 |
3901
- | \`progress\` | 46,207 | 13,149 | 11,553 | 7,987 | 2,106 | 1,705 |
3902
- | \`qr-code\` | 54,534 | 16,958 | 14,843 | 16,585 | 5,944 | 4,839 |
3903
- | \`quote\` | 38,889 | 11,276 | 9,854 | 1,216 | 474 | 180 |
3904
- | \`radio\` | 66,658 | 18,229 | 15,925 | 12,010 | 2,678 | 2,035 |
3905
- | \`rating\` | 67,641 | 19,771 | 17,249 | 12,041 | 3,616 | 2,780 |
3906
- | \`sandbox\` | 82,648 | 21,799 | 19,107 | 40,160 | 9,244 | 7,536 |
3907
- | \`scatter-chart\` | 101,544 | 31,250 | 27,338 | 22,828 | 6,171 | 4,935 |
3908
- | \`scroll-area\` | 51,608 | 14,461 | 12,733 | 13,055 | 3,345 | 2,582 |
3909
- | \`select\` | 121,609 | 35,082 | 30,625 | 36,462 | 8,552 | 6,785 |
3910
- | \`skeleton\` | 42,021 | 12,077 | 10,617 | 3,981 | 1,173 | 833 |
3911
- | \`skip-link\` | 41,073 | 11,975 | 10,479 | 3,246 | 1,073 | 670 |
3912
- | \`slider\` | 71,556 | 19,327 | 16,987 | 18,420 | 4,156 | 3,322 |
3913
- | \`sparkline\` | 50,148 | 14,863 | 13,036 | 6,294 | 1,884 | 1,465 |
3914
- | \`speed-dial\` | 137,814 | 44,096 | 37,356 | 66,895 | 21,748 | 17,084 |
3915
- | \`splitter\` | 59,710 | 16,605 | 14,560 | 17,505 | 4,128 | 3,276 |
3916
- | \`stat\` | 43,117 | 12,145 | 10,642 | 5,081 | 1,258 | 899 |
3917
- | \`steps\` | 74,508 | 20,100 | 17,552 | 24,865 | 5,588 | 4,386 |
3918
- | \`switch\` | 60,150 | 17,097 | 14,895 | 6,627 | 1,883 | 1,420 |
3919
- | \`table\` | 92,421 | 24,743 | 21,642 | 36,018 | 8,625 | 6,933 |
3920
- | \`tabs\` | 61,927 | 17,273 | 15,039 | 13,418 | 3,051 | 2,349 |
3921
- | \`tag\` | 55,489 | 16,232 | 14,241 | 10,588 | 2,808 | 2,095 |
3922
- | \`text\` | 45,640 | 12,441 | 10,881 | 7,984 | 1,684 | 1,209 |
3923
- | \`textarea\` | 61,578 | 17,564 | 15,311 | 8,378 | 2,407 | 1,784 |
3924
- | \`time-input\` | 175,509 | 47,749 | 41,289 | 66,881 | 14,780 | 11,858 |
3925
- | \`time-picker\` | 99,593 | 27,271 | 23,801 | 38,947 | 9,529 | 7,600 |
3926
- | \`timeline\` | 49,538 | 13,580 | 11,922 | 10,592 | 2,261 | 1,721 |
3927
- | \`toast\` | 64,376 | 18,574 | 16,317 | 16,162 | 4,267 | 3,375 |
3928
- | \`toggle\` | 67,459 | 18,981 | 16,563 | 10,987 | 2,815 | 2,180 |
3929
- | \`toolbar\` | 47,892 | 14,293 | 12,367 | 5,804 | 1,885 | 1,288 |
3930
- | \`tooltip\` | 76,823 | 24,103 | 21,174 | 11,405 | 3,167 | 2,452 |
3931
- | \`tour\` | 102,145 | 30,117 | 26,431 | 27,607 | 6,556 | 5,203 |
3932
- | \`tree\` | 68,362 | 19,519 | 17,079 | 19,134 | 4,965 | 3,978 |
3933
- | \`trend\` | 42,581 | 12,462 | 10,926 | 4,003 | 1,201 | 919 |
3934
- | \`video\` | 152,815 | 42,768 | 37,128 | 70,541 | 16,254 | 13,257 |
3935
- | \`video-playlist\` | 119,515 | 34,478 | 30,107 | 40,483 | 9,181 | 7,326 |
3936
- | \`virtual-list\` | 57,009 | 17,103 | 14,901 | 8,805 | 2,803 | 2,094 |
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,688,821 | 235 | 431,863 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
3949
- | \`@fusion.dev/helix-headless\` | 16,659,970 | 597 | 1,492,151 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
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,064 | 6 | 0 | none |
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,298,599 | 901 | 404,611 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
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"\`. The page behind a modal \`Dialog\` or \`Drawer\` does not
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 unless you set \`modal\`, which keeps \`Tab\` in the
4225
- panel until it closes. When focus moves out of its trigger and its panel, the
4226
- popover closes.
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. In a
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 clears a \`value\` or \`checked\` you wrote in markup.** A native
5793
- \`<input value="Ada">\` resets to \`Ada\`, and \`<helix-input value="Ada">\` resets to
5794
- empty, because a Helix control resets to \`default-value\` and \`default-checked\`.
5795
- Write the starting value of a form control as \`default-value\`, or
5796
- \`default-checked\` for a checkbox or a switch.
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