@fusion.dev/helix-docs 0.147.0 → 0.149.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.
@@ -924,6 +924,23 @@ The eight syntax roles for code are \`callable\`, \`comment\`, \`constant\`,
924
924
  \`invalid\`, \`keyword\`, \`name\`, \`string\`, and \`tag\`. A full editor theme has more
925
925
  roles. Helix has fewer because code in documentation only needs to be read.
926
926
 
927
+ ### Scrollbars
928
+
929
+ \`Scroll Area\`, \`Chat\`, and \`Virtual List\` color their scrollbars with three
930
+ tokens:
931
+
932
+ - \`--helix-scrollbar-thumb-color\` is the thumb at rest. It is a mid gray that
933
+ measures at least 3:1 against the page and every surface, in both modes.
934
+ - \`--helix-scrollbar-thumb-hover-color\` is the thumb while the pointer is over
935
+ its scroller. It is \`foreground-subtle\`.
936
+ - \`--helix-scrollbar-track-color\` is the track behind the thumb. It is
937
+ \`transparent\`, so the scroller's own ground shows through.
938
+
939
+ Each of the three reads its own hook first, such as \`--scroll-area-thumb-color\`
940
+ or \`--chat-scrollbar-thumb-color\`, so you can recolor one scroller and leave
941
+ the rest. Set the tokens to recolor all three. Other families that scroll keep
942
+ the browser's own scrollbar.
943
+
927
944
  ## Why colors use OKLCH
928
945
 
929
946
  Every Helix color is written in OKLCH. In sRGB, equal numeric steps do not look
@@ -1124,6 +1141,12 @@ A property that holds content, such as a tooltip's text, is the fallback content
1124
1141
  for a slot of the same name. Helix never renders both.
1125
1142
 
1126
1143
  \`\`\`html
1144
+ <!-- The trigger, which names the tooltip in aria-describedby -->
1145
+ <helix-button
1146
+ aria-describedby="save-tip"
1147
+ id="save"
1148
+ >Save</helix-button>
1149
+
1127
1150
  <!-- The property -->
1128
1151
  <helix-tooltip
1129
1152
  content="Save"
@@ -2154,9 +2177,40 @@ leaves removing it to your framework.
2154
2177
  - In the search field, Down moves into the list, and Escape empties the search.
2155
2178
  With \`no-panel\`, Escape on an empty search closes the list.
2156
2179
  - Screen readers read the selected note first, then how each other note links
2157
- to it, such as "Linked from Roadmap", and the count as a search narrows it.
2180
+ to it, such as "Linked from Roadmap". They hear the count when a search or
2181
+ the legend changes it.
2182
+ - After the arrow keys, plus, minus, or the buttons move the drawing, screen
2183
+ readers hear which way it went, such as "Moved right" or "Zoomed in".
2184
+ \`connectGraph\` tells the frame once the drawing has moved. If you answer
2185
+ \`helix-graph-pan\` and \`helix-graph-zoom\` yourself, call \`frame.moved()\` once
2186
+ your view has moved.
2187
+ - When you change \`nodes\` or \`links\`, the list keeps the note the keys are on.
2188
+ When that note is removed, the keys move to the note that took its row.
2158
2189
  - Change the words with \`search-label\`, \`count-label\`, \`selected-label\`,
2159
- \`links-to-label\`, \`linked-from-label\`, and \`linked-both-label\`.
2190
+ \`links-to-label\`, \`linked-from-label\`, \`linked-both-label\`,
2191
+ \`moved-up-label\`, \`moved-down-label\`, \`moved-left-label\`,
2192
+ \`moved-right-label\`, \`zoomed-in-label\`, and \`zoomed-out-label\`, or register
2193
+ them for a language with \`registerWords\` (see
2194
+ [Localization](./localization)).
2195
+
2196
+ ## Events
2197
+
2198
+ The frame sends these events. Their names follow Map's: \`helix-graph-pan\`,
2199
+ \`helix-graph-zoom\`, \`helix-graph-ready\`, and \`helix-graph-part-change\` match
2200
+ \`helix-map-pan\`, \`helix-map-zoom\`, \`helix-map-ready\`, and
2201
+ \`helix-map-part-change\`. These are the names Graph keeps.
2202
+
2203
+ | Event | Sent when | Cancelable | Who listens |
2204
+ |---|---|---|---|
2205
+ | \`helix-before-activate\` | A note is about to be selected | Yes | You, to keep the selection in your own state |
2206
+ | \`helix-activate\` | A note was selected, in the list or the drawing | No | You |
2207
+ | \`helix-graph-filter\` | A group in the legend was pressed, before its notes are shown or hidden | Yes | You, to set \`hiddenGroups\` yourself |
2208
+ | \`helix-graph-layout\` | A layout settled, with where it put each note | No | You, to keep the positions |
2209
+ | \`helix-graph-ready\` | The graph has been drawn whole | No | You, to show the graph once it is finished |
2210
+ | \`helix-graph-pan\` | An arrow key or a pan button asked the drawing to move | No | \`connectGraph\`, or your own renderer |
2211
+ | \`helix-graph-zoom\` | Plus, minus, or a zoom button asked the drawing to zoom | No | \`connectGraph\`, or your own renderer |
2212
+ | \`helix-graph-part-change\` | The notes, links, selection, depth, or gestures changed | No | \`connectGraph\` only. It stays on the frame. |
2213
+ | \`helix-graph-signal\` | \`signal()\` was called | No | \`connectGraph\` only. It stays on the frame. |
2160
2214
 
2161
2215
  ## Write a driver
2162
2216
 
@@ -2194,7 +2248,7 @@ title: Iconography
2194
2248
  <helix-icon name="trash"></helix-icon>
2195
2249
  \`\`\`
2196
2250
 
2197
- Helix has 125 glyphs, 120 of them from Phosphor, drawn on a 256 box at
2251
+ Helix has 126 glyphs, 121 of them from Phosphor, drawn on a 256 box at
2198
2252
  Phosphor's bold weight. We keep Phosphor's own geometry. Rescaling to a 24 box
2199
2253
  would change the optical weight of every glyph, and the set would stop matching
2200
2254
  Phosphor. We use the bold weight because Phosphor's regular weight is a
@@ -2274,7 +2328,7 @@ both are set, \`icon\` wins.
2274
2328
 
2275
2329
  \`icon\` also keeps your bundle small. \`name\` looks up glyphs in an index of the
2276
2330
  whole set, and no bundler can tree-shake that index. If you render one icon by
2277
- \`name\`, you ship the whole set: 17 kB gzipped for 125 glyphs. With \`icon\`, you
2331
+ \`name\`, you ship the whole set: 17 kB gzipped for 126 glyphs. With \`icon\`, you
2278
2332
  ship only the glyph you import.
2279
2333
 
2280
2334
  \`icon\` also draws glyphs from outside this set. Anything that exports the same
@@ -2692,7 +2746,7 @@ custom events. [React](./react) covers both.
2692
2746
  See [Tiers](./tiers) for how the packages relate and which one to use.
2693
2747
  `,
2694
2748
  localization: `---
2695
- description: Set the locale of date, time, and number controls, translate component strings, and lay out pages right to left.
2749
+ description: Set the locale of date, time, and number controls, translate the built-in words, and lay out pages right to left.
2696
2750
  section: Essentials
2697
2751
  title: Localization and RTL
2698
2752
  ---
@@ -2797,27 +2851,175 @@ Six families format numbers or dates and take a \`locale\`:
2797
2851
  ></helix-pagination>
2798
2852
  \`\`\`
2799
2853
 
2800
- If you do not set \`locale\`, these controls use the browser's locale, which is
2801
- usually correct. Set \`locale\` when your users choose your application's
2854
+ If you do not set \`locale\`, these controls use the nearest \`lang\` attribute,
2855
+ then the browser's locale, which is usually correct. Set \`locale\` when your users choose your application's
2802
2856
  language separately from the language of their operating system.
2803
2857
 
2804
2858
  The first day of the week comes from \`Intl.Locale\`'s week information, which
2805
2859
  Firefox does not provide. There, and where you set no \`locale\`, the week starts
2806
2860
  on Sunday. Set \`first-day-of-week\` to choose the day yourself.
2807
2861
 
2808
- \`locale\` formats dates, times, and numbers. It does not translate the words a
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.
2862
+ \`locale\` formats dates, times, and numbers. On a family that reads the words
2863
+ registry, it also picks the words. On the others, set the words a control
2864
+ speaks through their properties, such as \`previous-label\` and \`next-label\` on
2865
+ Date Picker and Date Input. See
2866
+ [Translate the built-in words](#translate-the-built-in-words). A time wheel's
2867
+ name, such as "Hour", comes from the locale.
2812
2868
 
2813
2869
  Formatting uses \`Intl\`, so Helix bundles no locale data, and you have nothing to
2814
2870
  keep up to date.
2815
2871
 
2816
- ## Translate component strings
2872
+ ## Calendars
2873
+
2874
+ Date Picker, Date Input, and Format Date write dates in five calendars. Each
2875
+ has the Gregorian months, so the days in a Date Picker are the same in all
2876
+ five:
2817
2877
 
2818
- More than a hundred properties in the headless tier set text that your users
2819
- see. Examples include \`pan-up-label\` on a map and \`remove-label\` on a combobox's
2820
- selected tags. Properties that combine values are format templates:
2878
+ | Calendar | October 6, 2026 | The locale's own calendar for |
2879
+ |---|---|---|
2880
+ | \`gregory\` | October 6, 2026 | Most locales |
2881
+ | \`buddhist\` | 6 ตุลาคม 2569 | \`th-TH\` |
2882
+ | \`japanese\` | 令和8年10月6日 | \`ja-JP-u-ca-japanese\` |
2883
+ | \`roc\` | 民國115年10月6日 | \`zh-TW-u-ca-roc\` |
2884
+ | \`iso8601\` | 2026 October 6 | A locale written with \`-u-ca-iso8601\` |
2885
+
2886
+ If you do not set \`calendar\`, these components use the locale's own calendar
2887
+ when it is one of the five. Set \`calendar\` to choose one yourself:
2888
+
2889
+ \`\`\`html
2890
+ <helix-date-picker
2891
+ calendar="buddhist"
2892
+ locale="en-US"
2893
+ ></helix-date-picker>
2894
+ \`\`\`
2895
+
2896
+ **Every other calendar is written as Gregorian**, in the locale's language and
2897
+ digits. This includes the Persian, Islamic, Hebrew, Ethiopic, Indian, Coptic,
2898
+ Chinese, and Dangi calendars, whose months are not the Gregorian months. A page
2899
+ in \`fa-IR\`, whose own calendar is Persian, shows October 2026 as "اکتبر ۲۰۲۶".
2900
+
2901
+ The value is \`YYYY-MM-DD\` in every calendar. In a \`segmented\` Date Input, the
2902
+ segments hold the Gregorian day, month, and year, so a Buddhist date is typed
2903
+ with the year 2026.
2904
+
2905
+ ## Translate the built-in words
2906
+
2907
+ Components have English words built in: the names a screen reader hears, the
2908
+ sentences a live region says, and the text on buttons such as "Load more".
2909
+ Register the words for a language once, and every element in that language
2910
+ speaks them:
2911
+
2912
+ \`\`\`js
2913
+ import { registerWords } from '@fusion.dev/helix'
2914
+
2915
+ registerWords('pl', {
2916
+ 'helix-combobox': {
2917
+ emptyText: 'Brak wyników',
2918
+ resultsLabel:
2919
+ '{count, plural, one {# wynik} few {# wyniki} many {# wyników} other {# wyniku}}',
2920
+ },
2921
+ 'helix-data-table': {
2922
+ nextLabel: 'Następna strona',
2923
+ previousLabel: 'Poprzednia strona',
2924
+ },
2925
+ })
2926
+ \`\`\`
2927
+
2928
+ Each family's words are keyed by its tag, such as \`helix-combobox\`, and then
2929
+ by the property name. The headless and styled tiers share one key. To type the
2930
+ keys, import the generated types once:
2931
+
2932
+ \`\`\`ts
2933
+ import type {} from '@fusion.dev/helix/words'
2934
+ \`\`\`
2935
+
2936
+ Every family reads the registry for the words it declares, the words several
2937
+ families share included. Register a shared word under each family's key: the
2938
+ name of a dismiss button, \`dismissLabel\`, under \`helix-callout\`; a collection's
2939
+ \`emptyText\` and \`loadingText\` under \`helix-tree\`; and the sentence a field
2940
+ reports when a required value is missing, \`valueMissingMessage\`, under
2941
+ \`helix-checkbox\`. A family that has its own English for a shared word, such as
2942
+ Tag's \`Remove {label}\`, keeps it until you register another.
2943
+
2944
+ The name a family gives itself where nothing else names it is \`fallbackLabel\`
2945
+ in every family, such as \`{ 'helix-table': { fallbackLabel: 'Tabelle' } }\`.
2946
+
2947
+ ### Which words an element uses
2948
+
2949
+ 1. **A value you set on the element**, as an attribute or a property. The
2950
+ English counts as a value, so \`empty-text="No matches"\` keeps the English
2951
+ on every page.
2952
+ 2. The words registered for the element's locale.
2953
+ 3. The English.
2954
+
2955
+ Set the property to \`null\`, or remove the attribute, to return to the
2956
+ registered words. Reading the property gives the word the element uses, in its
2957
+ locale.
2958
+
2959
+ ### Which locale an element speaks
2960
+
2961
+ 1. The element's \`locale\` property.
2962
+ 2. The nearest \`lang\` attribute, read through shadow roots, such as
2963
+ \`<html lang="pl">\`.
2964
+ 3. The browser's language.
2965
+
2966
+ The same locale picks the words, the plural forms, and the way numbers are
2967
+ written, so one sentence never mixes two languages.
2968
+
2969
+ A word that a language does not have falls back one key at a time, through
2970
+ the regional, script, and language forms of the tag and then to English. A
2971
+ \`de-CH\` page uses a \`de-CH\` word, then a \`de\` word, then the English. Hong Kong
2972
+ (\`zh-HK\`) reaches a \`zh-Hant\` word before a \`zh\` word. Name a set of words by
2973
+ its full tag where a language has regional forms, such as \`pt-BR\`, \`pt-PT\`, and
2974
+ \`es-419\`.
2975
+
2976
+ When you register words, or change the \`lang\` of the \`<html>\` element, every
2977
+ element on the page updates once. When you change the \`lang\` of another
2978
+ element, call \`refreshWords()\`.
2979
+
2980
+ ### Write a message
2981
+
2982
+ Words are messages in a small part of the ICU MessageFormat syntax, which
2983
+ translation tools read:
2984
+
2985
+ | Syntax | What it does |
2986
+ |---|---|
2987
+ | \`{name}\` | Puts in a value. A number is written in the locale, such as \`1.200\` in German. |
2988
+ | \`{p, number, percent}\` | Writes a number as a percentage, with the sign where the locale puts it. \`{n, number, integer}\` rounds. |
2989
+ | \`{count, plural, one {# wynik} few {# wyniki} other {# wyniku}}\` | Picks a form by the language's plural rules. \`#\` is the number. \`=0 {...}\` matches one exact number, and \`offset:1\` counts from one. |
2990
+ | \`{n, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}\` | Picks a form for a position. |
2991
+ | \`{direction, select, ascending {...} descending {...} other {...}}\` | Picks a whole sentence by a value, so a language can phrase each one its own way. |
2992
+ | \`''\` and \`'{'\` | Write one apostrophe, and a brace as text. A single apostrophe is text, so \`L'élément\` needs no escaping. |
2993
+
2994
+ Each property's reference entry names its placeholders. A message that does
2995
+ not parse shows as written, so a typo appears on the page where you can see it.
2996
+
2997
+ \`formatMessage(message, values, locale)\` formats a message for your own
2998
+ elements, and \`wordsLocale(element)\` gives the locale an element speaks.
2999
+
3000
+ ### Server rendering
3001
+
3002
+ A server knows the element's own attributes and the words your server code
3003
+ registered. It does not know the page around the element. So on a server, and
3004
+ in the first render while an element hydrates, a word uses the element's
3005
+ \`locale\`, then its own \`lang\`, then the locale you set with
3006
+ \`setDefaultWordsLocale\`, then English. After hydration, the element reads the
3007
+ nearest \`lang\` and updates once if its words change.
3008
+
3009
+ - Register the same words on the server and in the browser, before the
3010
+ elements are defined, so the two renders agree.
3011
+ - A server that renders one language calls \`setDefaultWordsLocale('pl')\` once.
3012
+ - A server that renders several languages sets \`lang\` or \`locale\` on the
3013
+ elements.
3014
+
3015
+ The registry holds no current language, so two requests in two languages in
3016
+ one process do not affect each other.
3017
+
3018
+ ### Set the words of other families
3019
+
3020
+ A value set on the element always wins, so any family takes its words as
3021
+ properties too, such as \`empty-text\` on a listbox. Properties that combine
3022
+ values are format templates:
2821
3023
 
2822
3024
  \`\`\`html
2823
3025
  <helix-pagination-summary
@@ -2849,7 +3051,8 @@ or \`disable-times\` rules out.
2849
3051
  A message appears in the browser's own validation bubble and on the line under
2850
3052
  the field. \`feedback\` does not reach the bubble. If you do not set a message, a
2851
3053
  text field shows the browser's own message, which is already in your user's
2852
- language. Every other control shows its English sentence.
3054
+ language. Every other control shows its English sentence. An empty message
3055
+ counts as not set.
2853
3056
 
2854
3057
  \`\`\`html
2855
3058
  <helix-number-input
@@ -2871,9 +3074,8 @@ Aria's \`@react-stately/color\` translates, so you can reuse that table.
2871
3074
  ></helix-color-picker>
2872
3075
  \`\`\`
2873
3076
 
2874
- **Pass these strings from your own translation system.** Helix ships English
2875
- defaults and no translation tools. If Helix had its own string catalog, you
2876
- would have to keep two catalogs in step.
3077
+ Helix ships English words and no translations. Pass the words from your own
3078
+ translation system, either to \`registerWords\` or to the properties.
2877
3079
 
2878
3080
  ## What to check when you add a language
2879
3081
 
@@ -2905,12 +3107,12 @@ would have to keep two catalogs in step.
2905
3107
 
2906
3108
  Helix does not include:
2907
3109
 
2908
- - a message catalog
2909
- - a pluralization helper
3110
+ - translations of its words into other languages
3111
+ - a message catalog for your own application's text
2910
3112
  - a date-range formatter, beyond what the controls format themselves
2911
3113
 
2912
- These belong to your application's i18n layer. You can set every translatable
2913
- property from that layer.
3114
+ These belong to your application's i18n layer. You can register every word,
3115
+ and set every translatable property, from that layer.
2914
3116
  `,
2915
3117
  maps: `---
2916
3118
  description: Add interactive maps to your site, styled with your theme and drawn by MapLibre or Leaflet.
@@ -3241,7 +3443,8 @@ frame with the marker's \`name\`, or its \`label\` if it has no name.
3241
3443
 
3242
3444
  To show that a place has been visited, add \`passed\`. The marker is drawn in a
3243
3445
  muted color, and screen readers hear its name followed by "passed". Use
3244
- \`passed-label\` to change that word.
3446
+ \`passed-label\` to change that sentence, where \`{label}\` is the place's name,
3447
+ such as \`{label} (visited)\`.
3245
3448
 
3246
3449
  ### Clusters
3247
3450
 
@@ -3494,6 +3697,35 @@ group, and shows or hides every layer in it. Keep labels short, such as
3494
3697
  "Walking route", and put the rest in \`description\`, which screen readers read
3495
3698
  after the label.
3496
3699
 
3700
+ ## Use your own icons in the controls
3701
+
3702
+ Each control's glyph is a slot, so the controls can use the same icon set as
3703
+ the rest of your page. An icon you slot in is sized like the glyph it replaces:
3704
+
3705
+ \`\`\`html
3706
+ <helix-map
3707
+ controls="layers zoom compass fullscreen"
3708
+ label="Our stores"
3709
+ >
3710
+ <div id="map"></div>
3711
+ <svg
3712
+ slot="zoom-in-icon"
3713
+ viewBox="0 0 16 16"
3714
+ ><path d="M7 2h2v5h5v2H9v5H7V9H2V7h5Z"/></svg>
3715
+ <svg
3716
+ slot="zoom-out-icon"
3717
+ viewBox="0 0 16 16"
3718
+ ><path d="M2 7h12v2H2Z"/></svg>
3719
+ </helix-map>
3720
+ \`\`\`
3721
+
3722
+ The slots are \`fullscreen-icon\`, \`layers-icon\`, \`tilt-icon\`, \`zoom-in-icon\`,
3723
+ \`zoom-out-icon\`, \`rotate-left-icon\`, \`rotate-right-icon\`, \`pan-up-icon\`,
3724
+ \`pan-down-icon\`, \`pan-start-icon\`, \`pan-end-icon\`, and \`face-north-icon\`. The
3725
+ compass sets \`--map-needle-turn\` to the angle that points north, so an icon in
3726
+ \`face-north-icon\` turns with the map when its style is
3727
+ \`rotate: var(--map-needle-turn)\`.
3728
+
3497
3729
  ## Keyboard and screen readers
3498
3730
 
3499
3731
  - The frame is one tab stop. Arrow keys pan the map, and the plus and minus keys
@@ -3502,7 +3734,9 @@ after the label.
3502
3734
  Keys with Control, Command, or Alt are left to the browser, so page zoom and
3503
3735
  Back still work with focus on the map.
3504
3736
  - The markers are one tab stop. Arrow keys move between them in the order you
3505
- wrote them. The map pans to show a marker that is off screen.
3737
+ wrote them. The map pans to show a marker that is off screen. If your page
3738
+ removes the marker that has focus, focus moves to the next marker, or to the
3739
+ one before when it was the last.
3506
3740
  - A points layer is one tab stop over the points and counts in view. Arrow keys
3507
3741
  move top to bottom and along each line. Enter on a count zooms in to it.
3508
3742
  - Screen readers find the map's shown layers in a list inside the frame, named
@@ -3595,7 +3829,7 @@ on its own.
3595
3829
 
3596
3830
  | | Raw | Gzip | Brotli |
3597
3831
  |---|---|---|---|
3598
- | Lit and \`@fusion.dev/helix-core\` | 197,383 | 61,311 | 52,882 |
3832
+ | Lit and \`@fusion.dev/helix-core\` | 223,692 | 69,690 | 59,939 |
3599
3833
 
3600
3834
  ## Whole packages
3601
3835
 
@@ -3606,12 +3840,12 @@ either barrel. The per-component tables show what your page pays.
3606
3840
 
3607
3841
  | Package | Raw | Gzip | Brotli | |
3608
3842
  |---|---|---|---|---|
3609
- | \`@fusion.dev/helix-core\` | 196,594 | 60,802 | 52,521 | The element base class, mixins, decorators, and floating positioning. |
3610
- | \`@fusion.dev/helix-headless\` | 1,081,915 | 289,834 | 219,388 | Every headless family. The barrel entry includes all of them. |
3611
- | \`@fusion.dev/helix-icons\` | 55,738 | 17,784 | 15,143 | The whole glyph set. |
3843
+ | \`@fusion.dev/helix-core\` | 222,903 | 69,474 | 59,548 | The element base class, mixins, decorators, and floating positioning. |
3844
+ | \`@fusion.dev/helix-headless\` | 1,163,184 | 312,570 | 236,652 | Every headless family. The barrel entry includes all of them. |
3845
+ | \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
3612
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. |
3613
3847
  | \`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. |
3614
- | \`@fusion.dev/helix\` | 1,682,747 | 405,899 | 290,867 | Every styled family. |
3848
+ | \`@fusion.dev/helix\` | 1,784,404 | 432,690 | 309,814 | Every styled family. |
3615
3849
  | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
3616
3850
 
3617
3851
  ## Stylesheets
@@ -3624,21 +3858,21 @@ shows the whole cost of using the base layer on its own.
3624
3858
 
3625
3859
  | File | Raw | Gzip | Brotli | |
3626
3860
  |---|---|---|---|---|
3627
- | \`base.css\` | 33,417 | 4,740 | 4,109 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
3628
- | \`elements.css\` | 9,057 | 1,517 | 1,343 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
3861
+ | \`base.css\` | 34,079 | 4,772 | 4,135 | The base layer. It styles markup Helix does not render, and it works with no JavaScript. |
3862
+ | \`elements.css\` | 9,126 | 1,524 | 1,351 | Hides each element until its definition loads. It is generated from the tags in \`@fusion.dev/helix\`. |
3629
3863
  | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
3630
3864
  | \`primitives.css\` | 7,510 | 1,402 | 1,201 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
3631
- | \`tokens.css\` | 22,349 | 2,664 | 2,247 | The 193 semantic tokens. Every styled component needs them. |
3865
+ | \`tokens.css\` | 22,571 | 2,710 | 2,281 | The 196 semantic tokens. Every styled component needs them. |
3632
3866
 
3633
3867
  ## What the numbers say
3634
3868
 
3635
- **Most of your first component is the shared runtime.** The median styled family is 16,736 bytes gzipped alone, and it adds 3,554 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.
3869
+ **Most of your first component is the shared runtime.** The median styled family is 17,377 bytes gzipped alone, and it adds 3,504 to a page that already has Helix. The shared runtime is 80 percent of the first component, and the component itself is 20 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.
3636
3870
 
3637
- Across the 104 styled components, the smallest is \`code\` at 9,494 bytes gzipped alone, and the largest is \`data-table\` at 61,123. Every family together is 405,899.
3871
+ Across the 104 styled components, the smallest is \`code\` at 8,350 bytes gzipped alone, and the largest is \`data-table\` at 74,154. Every family together is 432,690.
3638
3872
 
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 289,834 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.
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 312,570 bytes gzipped, whatever else the page imports. That is 18 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.
3640
3874
 
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,521 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 16,435 bytes gzipped alone.
3642
3876
 
3643
3877
  ## Compared with other systems
3644
3878
 
@@ -3650,43 +3884,43 @@ The table has no whole-library row. That row would compare how many components e
3650
3884
 
3651
3885
  | Component | System | Raw | Gzip | Brotli |
3652
3886
  |---|---|---|---|---|
3653
- | \`button\` | **Helix** | 44,445 | 14,921 | 13,252 |
3887
+ | \`button\` | **Helix** | 44,670 | 14,891 | 13,257 |
3654
3888
  | | Carbon | 133,058 | 20,959 | 17,685 |
3655
3889
  | | Material Web | 47,060 | 14,173 | 12,591 |
3656
3890
  | | Shoelace | 62,628 | 18,287 | 15,805 |
3657
3891
  | | Spectrum | 98,792 | 22,045 | 18,674 |
3658
- | \`checkbox\` | **Helix** | 47,925 | 15,506 | 13,765 |
3892
+ | \`checkbox\` | **Helix** | 48,304 | 15,478 | 13,866 |
3659
3893
  | | Carbon | 60,255 | 15,609 | 13,550 |
3660
3894
  | | Material Web | 43,785 | 13,556 | 12,015 |
3661
3895
  | | Shoelace | 47,614 | 15,177 | 13,301 |
3662
3896
  | | Spectrum | 62,492 | 15,437 | 13,481 |
3663
- | \`dialog\` | **Helix** | 45,077 | 15,497 | 13,763 |
3897
+ | \`dialog\` | **Helix** | 45,463 | 15,531 | 13,837 |
3664
3898
  | | Carbon | 510,866 | 67,390 | 39,189 |
3665
3899
  | | Material Web | 34,238 | 11,510 | 10,229 |
3666
3900
  | | Shoelace | 52,754 | 17,698 | 15,554 |
3667
3901
  | | Spectrum | 155,708 | 31,899 | 26,262 |
3668
- | \`radio\` | **Helix** | 51,225 | 16,030 | 14,197 |
3902
+ | \`radio\` | **Helix** | 51,603 | 16,019 | 14,245 |
3669
3903
  | | Carbon | 63,055 | 16,887 | 14,605 |
3670
3904
  | | Material Web | 41,044 | 13,234 | 11,757 |
3671
3905
  | | Shoelace | 34,865 | 12,027 | 10,559 |
3672
3906
  | | Spectrum | 38,685 | 10,660 | 9,370 |
3673
- | \`switch\` | **Helix** | 44,640 | 14,958 | 13,292 |
3907
+ | \`switch\` | **Helix** | 45,017 | 14,936 | 13,319 |
3674
3908
  | | Carbon | 69,423 | 17,127 | 14,764 |
3675
3909
  | | Material Web | 50,155 | 14,577 | 12,935 |
3676
3910
  | | Shoelace | 37,833 | 11,814 | 10,568 |
3677
3911
  | | Spectrum | 62,322 | 15,059 | 13,321 |
3678
- | \`tabs\` | **Helix** | 47,668 | 15,425 | 13,639 |
3912
+ | \`tabs\` | **Helix** | 47,906 | 15,383 | 13,685 |
3679
3913
  | | Carbon | 578,766 | 73,537 | 43,235 |
3680
3914
  | | Material Web | 38,883 | 12,820 | 11,368 |
3681
3915
  | | Shoelace | 54,573 | 17,140 | 15,068 |
3682
3916
  | | Spectrum | 64,875 | 18,298 | 16,283 |
3683
- | \`tooltip\` | **Helix** | 64,095 | 22,841 | 20,261 |
3917
+ | \`tooltip\` | **Helix** | 61,441 | 21,738 | 19,283 |
3684
3918
  | | Carbon | 189,382 | 30,354 | 22,273 |
3685
3919
  | | Material Web | | not shipped | |
3686
3920
  | | Shoelace | 57,412 | 20,220 | 17,933 |
3687
3921
  | | Spectrum | 136,599 | 40,552 | 35,286 |
3688
3922
 
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,370 bytes gzipped. 12 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 radio against Spectrum, at 5,359 bytes gzipped. 12 of 27 peer measurements are smaller than the Helix row.
3690
3924
 
3691
3925
  Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
3692
3926
 
@@ -3732,104 +3966,104 @@ Structure, accessibility, state, and form participation. It has no presentation
3732
3966
 
3733
3967
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
3734
3968
  |---|---|---|---|---|---|---|
3735
- | \`accordion\` | 34,630 | 12,815 | 11,363 | 5,636 | 1,672 | 1,192 |
3736
- | \`announcement\` | 32,799 | 12,226 | 10,853 | 3,057 | 920 | 583 |
3737
- | \`app-header\` | 26,457 | 10,230 | 9,049 | 2,356 | 772 | 484 |
3738
- | \`area-chart\` | 82,151 | 28,960 | 25,581 | 14,013 | 4,300 | 3,364 |
3739
- | \`avatar\` | 29,122 | 10,934 | 9,676 | 4,433 | 1,308 | 882 |
3740
- | \`badge\` | 26,635 | 10,368 | 9,173 | 2,953 | 947 | 550 |
3741
- | \`bar-chart\` | 85,474 | 29,950 | 26,495 | 16,951 | 5,207 | 4,118 |
3742
- | \`blockquote\` | 24,736 | 9,803 | 8,652 | 912 | 368 | 170 |
3743
- | \`breadcrumbs\` | 30,961 | 11,974 | 10,613 | 5,917 | 2,059 | 1,453 |
3744
- | \`button\` | 37,324 | 13,449 | 11,955 | 5,051 | 1,579 | 1,054 |
3745
- | \`button-group\` | 24,623 | 9,699 | 8,568 | 813 | 367 | 134 |
3746
- | \`callout\` | 30,908 | 11,895 | 10,517 | 1,329 | 521 | 350 |
3747
- | \`canvas\` | 90,151 | 28,403 | 24,857 | 52,251 | 15,670 | 12,954 |
3748
- | \`card\` | 26,081 | 10,079 | 8,899 | 2,120 | 648 | 388 |
3749
- | \`carousel\` | 40,888 | 14,476 | 12,819 | 15,389 | 4,229 | 3,256 |
3750
- | \`chat\` | 64,356 | 21,675 | 19,152 | 20,818 | 6,243 | 4,848 |
3751
- | \`checkbox\` | 41,101 | 13,983 | 12,421 | 3,217 | 1,052 | 619 |
3752
- | \`checkbox-group\` | 47,080 | 15,425 | 13,714 | 8,307 | 2,328 | 1,575 |
3753
- | \`code\` | 23,072 | 9,203 | 8,134 | 451 | 217 | 22 |
3754
- | \`code-block\` | 89,798 | 30,217 | 26,754 | 26,390 | 7,207 | 5,620 |
3755
- | \`color-input\` | 124,305 | 39,200 | 34,408 | 42,187 | 10,757 | 8,518 |
3756
- | \`color-picker\` | 85,911 | 27,316 | 24,068 | 34,327 | 9,151 | 7,169 |
3757
- | \`combobox\` | 120,098 | 37,069 | 32,608 | 40,023 | 9,919 | 7,707 |
3758
- | \`command\` | 80,108 | 24,509 | 21,588 | 29,213 | 7,600 | 5,901 |
3759
- | \`copy-button\` | 81,655 | 27,883 | 24,681 | 18,244 | 4,912 | 3,709 |
3760
- | \`data-table\` | 171,585 | 50,912 | 43,882 | 86,477 | 22,425 | 17,787 |
3761
- | \`date-input\` | 128,931 | 39,534 | 34,692 | 35,683 | 8,695 | 6,903 |
3762
- | \`date-picker\` | 52,256 | 17,483 | 15,602 | 16,847 | 4,541 | 3,475 |
3763
- | \`description-list\` | 25,893 | 9,946 | 8,791 | 2,100 | 652 | 380 |
3764
- | \`dialog\` | 39,596 | 14,216 | 12,622 | 5,808 | 1,816 | 1,216 |
3765
- | \`divider\` | 24,870 | 9,849 | 8,681 | 1,046 | 412 | 234 |
3766
- | \`donut-chart\` | 81,582 | 28,505 | 25,277 | 14,750 | 4,453 | 3,454 |
3767
- | \`drawer\` | 42,471 | 15,282 | 13,548 | 5,901 | 1,893 | 1,279 |
3768
- | \`drilldown\` | 41,399 | 14,750 | 13,074 | 7,856 | 2,207 | 1,519 |
3769
- | \`empty\` | 25,889 | 10,110 | 8,951 | 1,502 | 547 | 357 |
3770
- | \`file-input\` | 63,030 | 21,019 | 18,718 | 17,382 | 5,162 | 4,022 |
3771
- | \`filter-input\` | 122,853 | 38,014 | 33,299 | 41,760 | 10,487 | 8,225 |
3772
- | \`format-date\` | 30,625 | 11,627 | 10,342 | 3,936 | 1,165 | 838 |
3773
- | \`graph\` | 61,002 | 20,267 | 18,032 | 14,808 | 4,734 | 3,709 |
3774
- | \`heatmap\` | 88,166 | 30,329 | 26,780 | 16,775 | 4,915 | 3,881 |
3775
- | \`icon\` | 82,997 | 28,577 | 24,538 | 56,734 | 19,718 | 15,476 |
3776
- | \`icon-button\` | 37,720 | 13,481 | 11,981 | 5,450 | 1,632 | 1,051 |
3777
- | \`image\` | 28,292 | 10,661 | 9,449 | 4,151 | 1,277 | 872 |
3778
- | \`input\` | 47,533 | 16,414 | 14,423 | 7,500 | 2,528 | 1,779 |
3779
- | \`kbd\` | 29,277 | 11,328 | 10,015 | 4,214 | 1,452 | 986 |
3780
- | \`legend\` | 35,294 | 13,262 | 11,776 | 3,488 | 1,239 | 771 |
3781
- | \`lightbox\` | 48,608 | 16,244 | 14,393 | 14,010 | 3,837 | 2,796 |
3782
- | \`line-chart\` | 83,343 | 29,165 | 25,844 | 14,869 | 4,441 | 3,475 |
3783
- | \`list\` | 37,616 | 13,769 | 12,242 | 9,661 | 2,876 | 2,121 |
3784
- | \`listbox\` | 61,691 | 19,912 | 17,664 | 17,552 | 4,863 | 3,734 |
3785
- | \`loader\` | 27,258 | 10,507 | 9,317 | 2,646 | 921 | 580 |
3786
- | \`map\` | 78,563 | 23,490 | 20,396 | 38,035 | 9,989 | 7,699 |
3787
- | \`megamenu\` | 61,690 | 22,485 | 19,886 | 8,150 | 2,357 | 1,647 |
3788
- | \`menu\` | 82,564 | 28,302 | 24,883 | 19,038 | 5,005 | 3,764 |
3789
- | \`meter\` | 30,222 | 11,423 | 10,106 | 5,138 | 1,554 | 1,129 |
3790
- | \`navigation\` | 32,458 | 12,336 | 10,955 | 2,196 | 809 | 462 |
3791
- | \`notifications\` | 51,888 | 17,151 | 15,259 | 16,120 | 4,170 | 3,192 |
3792
- | \`number-input\` | 51,146 | 17,243 | 15,371 | 10,208 | 2,808 | 1,999 |
3793
- | \`object-inspector\` | 107,815 | 36,046 | 31,692 | 34,478 | 9,929 | 7,831 |
3794
- | \`option\` | 28,273 | 10,528 | 9,323 | 3,985 | 983 | 625 |
3795
- | \`outline\` | 33,201 | 12,603 | 11,154 | 6,689 | 2,167 | 1,538 |
3796
- | \`pagination\` | 114,812 | 35,986 | 31,358 | 43,139 | 10,972 | 8,640 |
3797
- | \`pin-input\` | 45,328 | 15,534 | 13,798 | 6,884 | 2,259 | 1,565 |
3798
- | \`popover\` | 62,292 | 22,594 | 20,005 | 5,484 | 1,637 | 1,197 |
3799
- | \`progress\` | 27,862 | 10,760 | 9,539 | 2,985 | 971 | 679 |
3800
- | \`qr-code\` | 40,442 | 15,682 | 13,897 | 16,741 | 6,206 | 5,183 |
3801
- | \`quote\` | 24,651 | 9,805 | 8,641 | 1,226 | 563 | 257 |
3802
- | \`radio\` | 42,723 | 14,488 | 12,846 | 3,890 | 1,199 | 798 |
3803
- | \`rating\` | 48,395 | 16,463 | 14,643 | 7,956 | 2,409 | 1,727 |
3804
- | \`scatter-chart\` | 82,989 | 28,974 | 25,645 | 15,707 | 4,739 | 3,683 |
3805
- | \`scroll-area\` | 33,156 | 12,237 | 10,860 | 8,811 | 2,651 | 1,962 |
3806
- | \`select\` | 98,295 | 31,977 | 28,062 | 27,000 | 7,137 | 5,380 |
3807
- | \`skeleton\` | 25,050 | 9,817 | 8,672 | 1,255 | 513 | 260 |
3808
- | \`skip-link\` | 25,165 | 9,942 | 8,779 | 1,515 | 586 | 335 |
3809
- | \`slider\` | 46,135 | 15,461 | 13,845 | 8,318 | 2,334 | 1,764 |
3810
- | \`sparkline\` | 42,124 | 15,644 | 13,968 | 6,047 | 2,180 | 1,665 |
3811
- | \`speed-dial\` | 59,554 | 22,093 | 19,550 | 4,290 | 1,277 | 807 |
3812
- | \`splitter\` | 38,988 | 13,591 | 12,067 | 11,622 | 3,127 | 2,420 |
3813
- | \`stat\` | 25,878 | 9,994 | 8,828 | 1,896 | 635 | 441 |
3814
- | \`steps\` | 47,084 | 16,063 | 14,281 | 11,502 | 3,193 | 2,361 |
3815
- | \`switch\` | 39,955 | 13,801 | 12,255 | 1,791 | 687 | 285 |
3816
- | \`table\` | 66,738 | 20,860 | 18,457 | 22,634 | 6,087 | 4,745 |
3817
- | \`tabs\` | 39,373 | 13,774 | 12,191 | 5,885 | 1,561 | 1,000 |
3818
- | \`tag\` | 38,974 | 14,201 | 12,584 | 6,778 | 2,004 | 1,398 |
3819
- | \`textarea\` | 44,993 | 15,385 | 13,707 | 5,517 | 1,686 | 1,221 |
3820
- | \`time-input\` | 144,486 | 43,877 | 38,118 | 46,086 | 11,489 | 8,984 |
3821
- | \`time-picker\` | 76,976 | 24,018 | 21,179 | 29,046 | 7,717 | 5,892 |
3822
- | \`timeline\` | 27,959 | 10,609 | 9,406 | 3,151 | 807 | 484 |
3823
- | \`toast\` | 45,556 | 16,229 | 14,422 | 9,706 | 2,968 | 2,204 |
3824
- | \`toggle\` | 46,300 | 15,507 | 13,788 | 5,614 | 1,667 | 1,084 |
3825
- | \`toolbar\` | 31,672 | 11,991 | 10,650 | 4,891 | 1,645 | 1,129 |
3826
- | \`tooltip\` | 60,947 | 22,060 | 19,569 | 8,705 | 2,542 | 1,916 |
3827
- | \`tour\` | 79,389 | 26,953 | 23,840 | 17,616 | 4,790 | 3,712 |
3828
- | \`tree\` | 47,285 | 16,265 | 14,400 | 11,960 | 3,428 | 2,662 |
3829
- | \`trend\` | 28,037 | 10,907 | 9,655 | 3,529 | 1,145 | 847 |
3830
- | \`video\` | 120,974 | 37,842 | 33,024 | 52,489 | 13,090 | 10,493 |
3831
- | \`video-playlist\` | 92,606 | 30,534 | 26,876 | 27,214 | 6,884 | 5,402 |
3832
- | \`virtual-list\` | 47,569 | 16,874 | 15,036 | 12,192 | 3,891 | 3,028 |
3969
+ | \`accordion\` | 32,263 | 11,820 | 10,462 | 5,679 | 1,707 | 1,146 |
3970
+ | \`announcement\` | 38,491 | 13,896 | 12,381 | 5,015 | 1,590 | 931 |
3971
+ | \`app-header\` | 23,721 | 9,087 | 8,056 | 2,353 | 796 | 438 |
3972
+ | \`area-chart\` | 84,979 | 30,124 | 26,713 | 14,029 | 4,184 | 3,324 |
3973
+ | \`avatar\` | 31,252 | 11,798 | 10,554 | 4,562 | 1,361 | 882 |
3974
+ | \`badge\` | 26,386 | 10,364 | 9,205 | 2,869 | 920 | 498 |
3975
+ | \`bar-chart\` | 88,299 | 31,114 | 27,516 | 16,965 | 4,983 | 3,978 |
3976
+ | \`blockquote\` | 24,161 | 9,459 | 8,348 | 2,732 | 1,033 | 630 |
3977
+ | \`breadcrumbs\` | 33,441 | 13,045 | 11,620 | 5,924 | 2,050 | 1,481 |
3978
+ | \`button\` | 37,548 | 13,404 | 11,965 | 5,074 | 1,604 | 980 |
3979
+ | \`button-group\` | 26,267 | 10,045 | 8,929 | 3,980 | 1,363 | 775 |
3980
+ | \`callout\` | 31,586 | 12,036 | 10,668 | 1,569 | 608 | 265 |
3981
+ | \`canvas\` | 97,290 | 30,875 | 27,114 | 57,601 | 17,303 | 14,191 |
3982
+ | \`card\` | 23,347 | 8,929 | 7,913 | 2,120 | 666 | 387 |
3983
+ | \`carousel\` | 43,148 | 15,402 | 13,713 | 15,308 | 4,121 | 3,121 |
3984
+ | \`chat\` | 69,924 | 23,502 | 20,803 | 21,455 | 6,226 | 5,027 |
3985
+ | \`checkbox\` | 41,475 | 13,947 | 12,496 | 3,392 | 1,098 | 569 |
3986
+ | \`checkbox-group\` | 48,099 | 15,665 | 13,987 | 8,890 | 2,451 | 1,695 |
3987
+ | \`code\` | 20,340 | 8,059 | 7,173 | 451 | 231 | 7 |
3988
+ | \`code-block\` | 92,691 | 31,351 | 27,815 | 26,518 | 7,089 | 5,533 |
3989
+ | \`color-input\` | 130,992 | 41,502 | 36,353 | 46,126 | 11,678 | 9,309 |
3990
+ | \`color-picker\` | 92,261 | 29,447 | 25,945 | 38,044 | 10,072 | 8,014 |
3991
+ | \`combobox\` | 138,077 | 42,748 | 37,548 | 41,170 | 9,967 | 7,860 |
3992
+ | \`command\` | 96,374 | 29,969 | 26,280 | 29,540 | 7,592 | 5,897 |
3993
+ | \`copy-button\` | 82,457 | 28,133 | 24,907 | 18,166 | 4,706 | 3,632 |
3994
+ | \`data-table\` | 199,621 | 59,834 | 51,186 | 91,940 | 23,791 | 18,797 |
3995
+ | \`date-input\` | 132,731 | 41,037 | 36,027 | 35,972 | 8,732 | 7,012 |
3996
+ | \`date-picker\` | 54,466 | 18,369 | 16,496 | 17,001 | 4,459 | 3,501 |
3997
+ | \`description-list\` | 23,284 | 8,830 | 7,812 | 2,225 | 682 | 280 |
3998
+ | \`dialog\` | 39,983 | 14,248 | 12,663 | 5,957 | 1,831 | 1,163 |
3999
+ | \`divider\` | 22,788 | 8,870 | 7,872 | 1,486 | 570 | 188 |
4000
+ | \`donut-chart\` | 84,155 | 29,630 | 26,273 | 14,638 | 4,299 | 3,408 |
4001
+ | \`drawer\` | 42,856 | 15,297 | 13,610 | 6,049 | 1,944 | 1,308 |
4002
+ | \`drilldown\` | 41,741 | 14,765 | 13,165 | 7,871 | 2,226 | 1,462 |
4003
+ | \`empty\` | 23,802 | 9,141 | 8,118 | 1,955 | 725 | 387 |
4004
+ | \`file-input\` | 66,001 | 22,265 | 19,786 | 17,511 | 5,038 | 4,021 |
4005
+ | \`filter-input\` | 126,444 | 39,373 | 34,530 | 41,823 | 10,221 | 8,049 |
4006
+ | \`format-date\` | 28,969 | 10,891 | 9,690 | 4,312 | 1,312 | 795 |
4007
+ | \`graph\` | 67,405 | 22,282 | 19,823 | 17,073 | 5,078 | 4,073 |
4008
+ | \`heatmap\` | 91,416 | 31,543 | 27,872 | 17,191 | 4,800 | 3,895 |
4009
+ | \`icon\` | 80,614 | 27,528 | 23,545 | 57,089 | 19,337 | 15,523 |
4010
+ | \`icon-button\` | 37,985 | 13,448 | 12,002 | 5,511 | 1,643 | 1,020 |
4011
+ | \`image\` | 25,558 | 9,519 | 8,462 | 4,155 | 1,279 | 821 |
4012
+ | \`input\` | 47,778 | 16,393 | 14,480 | 7,538 | 2,453 | 1,678 |
4013
+ | \`kbd\` | 26,543 | 10,192 | 9,030 | 3,605 | 1,205 | 731 |
4014
+ | \`legend\` | 32,682 | 12,166 | 10,793 | 3,290 | 1,145 | 720 |
4015
+ | \`lightbox\` | 50,818 | 17,147 | 15,272 | 14,214 | 3,782 | 2,683 |
4016
+ | \`line-chart\` | 85,931 | 30,280 | 26,875 | 14,777 | 4,265 | 3,439 |
4017
+ | \`list\` | 58,052 | 20,298 | 18,129 | 12,454 | 3,550 | 2,709 |
4018
+ | \`listbox\` | 77,332 | 25,086 | 22,249 | 17,688 | 4,800 | 3,751 |
4019
+ | \`loader\` | 27,496 | 10,492 | 9,331 | 2,686 | 960 | 553 |
4020
+ | \`map\` | 82,154 | 24,757 | 21,587 | 40,127 | 10,285 | 7,936 |
4021
+ | \`megamenu\` | 59,070 | 21,398 | 18,945 | 8,033 | 2,297 | 1,493 |
4022
+ | \`menu\` | 83,299 | 28,460 | 25,151 | 18,462 | 4,615 | 3,536 |
4023
+ | \`meter\` | 32,305 | 12,236 | 10,920 | 5,291 | 1,612 | 1,114 |
4024
+ | \`navigation\` | 32,843 | 12,356 | 11,016 | 2,196 | 794 | 398 |
4025
+ | \`notifications\` | 54,221 | 17,876 | 15,921 | 17,256 | 4,405 | 3,421 |
4026
+ | \`number-input\` | 53,245 | 18,048 | 16,131 | 10,491 | 2,857 | 2,000 |
4027
+ | \`object-inspector\` | 112,811 | 37,684 | 33,162 | 34,596 | 9,829 | 7,696 |
4028
+ | \`option\` | 25,539 | 9,388 | 8,325 | 3,984 | 976 | 556 |
4029
+ | \`outline\` | 33,444 | 12,570 | 11,192 | 6,722 | 2,186 | 1,474 |
4030
+ | \`pagination\` | 133,082 | 41,802 | 36,342 | 44,853 | 11,270 | 8,731 |
4031
+ | \`pin-input\` | 47,591 | 16,476 | 14,721 | 7,044 | 2,316 | 1,652 |
4032
+ | \`popover\` | 62,726 | 22,644 | 20,100 | 5,631 | 1,734 | 1,062 |
4033
+ | \`progress\` | 28,123 | 10,757 | 9,569 | 3,023 | 993 | 630 |
4034
+ | \`qr-code\` | 43,243 | 16,851 | 15,022 | 17,337 | 6,339 | 5,273 |
4035
+ | \`quote\` | 21,918 | 8,659 | 7,681 | 1,230 | 554 | 181 |
4036
+ | \`radio\` | 43,102 | 14,457 | 12,842 | 4,068 | 1,264 | 711 |
4037
+ | \`rating\` | 50,576 | 17,304 | 15,422 | 8,135 | 2,456 | 1,654 |
4038
+ | \`scatter-chart\` | 85,884 | 30,131 | 26,663 | 15,790 | 4,591 | 3,691 |
4039
+ | \`scroll-area\` | 30,421 | 11,096 | 9,864 | 8,812 | 2,645 | 1,976 |
4040
+ | \`select\` | 115,372 | 37,524 | 32,922 | 27,759 | 7,208 | 5,543 |
4041
+ | \`skeleton\` | 22,315 | 8,665 | 7,692 | 1,255 | 521 | 205 |
4042
+ | \`skip-link\` | 25,407 | 9,935 | 8,839 | 1,554 | 619 | 266 |
4043
+ | \`slider\` | 48,006 | 16,213 | 14,515 | 8,359 | 2,316 | 1,763 |
4044
+ | \`sparkline\` | 44,544 | 16,665 | 14,935 | 6,102 | 2,180 | 1,671 |
4045
+ | \`speed-dial\` | 67,533 | 24,328 | 21,605 | 9,257 | 2,503 | 1,730 |
4046
+ | \`splitter\` | 39,832 | 13,739 | 12,287 | 12,021 | 3,120 | 2,435 |
4047
+ | \`stat\` | 23,162 | 8,884 | 7,882 | 1,900 | 649 | 294 |
4048
+ | \`steps\` | 49,762 | 17,165 | 15,291 | 11,763 | 3,174 | 2,363 |
4049
+ | \`switch\` | 40,329 | 13,762 | 12,287 | 1,964 | 754 | 343 |
4050
+ | \`table\` | 95,219 | 29,655 | 26,079 | 33,732 | 9,006 | 7,123 |
4051
+ | \`tabs\` | 39,616 | 13,733 | 12,209 | 5,919 | 1,622 | 955 |
4052
+ | \`tag\` | 41,359 | 15,186 | 13,581 | 6,712 | 2,003 | 1,307 |
4053
+ | \`textarea\` | 45,236 | 15,332 | 13,685 | 5,556 | 1,726 | 1,111 |
4054
+ | \`time-input\` | 162,264 | 49,492 | 42,964 | 47,415 | 11,715 | 9,186 |
4055
+ | \`time-picker\` | 93,705 | 29,392 | 25,857 | 30,447 | 7,907 | 6,124 |
4056
+ | \`timeline\` | 25,225 | 9,450 | 8,416 | 3,154 | 810 | 469 |
4057
+ | \`toast\` | 48,431 | 17,309 | 15,368 | 9,402 | 2,832 | 2,084 |
4058
+ | \`toggle\` | 43,650 | 14,408 | 12,784 | 5,559 | 1,698 | 1,098 |
4059
+ | \`toolbar\` | 32,568 | 12,127 | 10,830 | 5,486 | 1,813 | 1,163 |
4060
+ | \`tooltip\` | 58,293 | 20,976 | 18,653 | 8,512 | 2,435 | 1,823 |
4061
+ | \`tour\` | 81,942 | 28,030 | 24,878 | 17,717 | 4,712 | 3,707 |
4062
+ | \`tree\` | 64,952 | 21,733 | 19,332 | 14,482 | 3,996 | 3,081 |
4063
+ | \`trend\` | 30,239 | 11,784 | 10,494 | 3,821 | 1,241 | 815 |
4064
+ | \`video\` | 124,145 | 39,099 | 34,173 | 52,551 | 12,985 | 10,404 |
4065
+ | \`video-playlist\` | 93,433 | 30,728 | 27,112 | 26,727 | 6,480 | 5,102 |
4066
+ | \`virtual-list\` | 50,312 | 17,586 | 15,711 | 11,983 | 3,703 | 2,863 |
3833
4067
 
3834
4068
  ### Styled tier
3835
4069
 
@@ -3837,110 +4071,110 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
3837
4071
 
3838
4072
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
3839
4073
  |---|---|---|---|---|---|---|
3840
- | \`accordion\` | 38,742 | 13,694 | 12,134 | 9,733 | 2,579 | 1,976 |
3841
- | \`announcement\` | 37,551 | 13,298 | 11,791 | 7,792 | 2,013 | 1,511 |
3842
- | \`app-header\` | 30,230 | 11,107 | 9,830 | 6,113 | 1,664 | 1,246 |
3843
- | \`area-chart\` | 89,999 | 30,684 | 27,116 | 21,839 | 6,061 | 4,817 |
3844
- | \`aura\` | 53,895 | 18,791 | 16,590 | 28,066 | 8,789 | 7,422 |
3845
- | \`avatar\` | 32,795 | 11,724 | 10,370 | 8,091 | 2,117 | 1,621 |
3846
- | \`badge\` | 32,126 | 11,540 | 10,220 | 8,432 | 2,119 | 1,572 |
3847
- | \`bar-chart\` | 98,626 | 32,655 | 28,855 | 30,078 | 7,923 | 6,451 |
3848
- | \`blockquote\` | 26,118 | 10,118 | 8,921 | 2,278 | 682 | 462 |
3849
- | \`breadcrumbs\` | 37,683 | 13,203 | 11,718 | 12,624 | 3,313 | 2,607 |
3850
- | \`button\` | 44,445 | 14,921 | 13,252 | 12,157 | 3,062 | 2,336 |
3851
- | \`button-group\` | 26,249 | 10,067 | 8,904 | 2,422 | 741 | 485 |
3852
- | \`callout\` | 34,726 | 12,789 | 11,317 | 5,131 | 1,419 | 1,071 |
3853
- | \`canvas\` | 110,268 | 32,286 | 28,175 | 72,016 | 19,500 | 16,155 |
3854
- | \`card\` | 29,740 | 11,017 | 9,758 | 5,764 | 1,567 | 1,148 |
3855
- | \`carousel\` | 51,775 | 16,304 | 14,536 | 26,264 | 6,117 | 4,993 |
3856
- | \`chat\` | 78,398 | 24,208 | 21,453 | 34,848 | 8,782 | 7,144 |
3857
- | \`checkbox\` | 47,925 | 15,506 | 13,765 | 10,029 | 2,567 | 1,947 |
3858
- | \`checkbox-group\` | 54,982 | 17,105 | 15,167 | 16,197 | 4,030 | 3,039 |
3859
- | \`code\` | 24,171 | 9,494 | 8,410 | 1,534 | 494 | 331 |
3860
- | \`code-block\` | 110,305 | 33,464 | 29,670 | 46,881 | 10,587 | 8,568 |
3861
- | \`color-input\` | 163,860 | 45,140 | 39,664 | 81,727 | 16,633 | 13,752 |
3862
- | \`color-picker\` | 119,691 | 32,445 | 28,667 | 68,095 | 14,264 | 11,838 |
3863
- | \`combobox\` | 136,925 | 40,028 | 35,163 | 56,832 | 12,833 | 10,452 |
3864
- | \`command\` | 91,942 | 26,789 | 23,600 | 41,032 | 9,969 | 7,961 |
3865
- | \`copy-button\` | 94,739 | 30,047 | 26,577 | 31,309 | 7,174 | 5,634 |
3866
- | \`data-table\` | 222,452 | 61,123 | 51,238 | 136,877 | 32,524 | 25,058 |
3867
- | \`date-input\` | 150,404 | 43,261 | 37,972 | 57,133 | 12,435 | 10,184 |
3868
- | \`date-picker\` | 60,092 | 18,879 | 16,820 | 24,664 | 5,960 | 4,744 |
3869
- | \`description-list\` | 28,917 | 10,598 | 9,371 | 5,111 | 1,308 | 871 |
3870
- | \`dialog\` | 45,077 | 15,497 | 13,763 | 11,270 | 3,116 | 2,367 |
3871
- | \`divider\` | 27,373 | 10,448 | 9,206 | 3,532 | 1,039 | 697 |
3872
- | \`donut-chart\` | 91,716 | 30,609 | 27,120 | 24,860 | 6,605 | 5,318 |
3873
- | \`drawer\` | 48,671 | 16,704 | 14,847 | 12,082 | 3,355 | 2,681 |
3874
- | \`drilldown\` | 47,774 | 16,069 | 14,317 | 14,217 | 3,560 | 2,767 |
3875
- | \`empty\` | 27,534 | 10,593 | 9,368 | 3,129 | 1,012 | 754 |
3876
- | \`file-input\` | 75,783 | 23,492 | 20,839 | 30,122 | 7,642 | 6,141 |
3877
- | \`filter-input\` | 155,290 | 43,298 | 37,955 | 73,821 | 15,529 | 12,561 |
3878
- | \`flex\` | 28,585 | 10,400 | 9,195 | 5,151 | 1,173 | 813 |
3879
- | \`format-date\` | 31,259 | 11,769 | 10,462 | 4,554 | 1,322 | 1,019 |
3880
- | \`graph\` | 75,564 | 22,854 | 20,193 | 29,349 | 7,404 | 5,979 |
3881
- | \`grid\` | 29,413 | 10,812 | 9,576 | 5,984 | 1,554 | 1,219 |
3882
- | \`heatmap\` | 95,749 | 31,948 | 28,162 | 24,337 | 6,532 | 5,149 |
3883
- | \`icon\` | 83,686 | 28,735 | 24,628 | 57,406 | 19,872 | 15,599 |
3884
- | \`icon-button\` | 46,189 | 14,909 | 13,253 | 13,902 | 3,069 | 2,413 |
3885
- | \`image\` | 30,023 | 11,138 | 9,859 | 5,864 | 1,769 | 1,353 |
3886
- | \`input\` | 52,114 | 17,497 | 15,366 | 12,066 | 3,639 | 2,645 |
3887
- | \`kbd\` | 31,604 | 11,884 | 10,519 | 6,524 | 1,999 | 1,465 |
3888
- | \`legend\` | 40,702 | 14,540 | 12,843 | 8,767 | 2,493 | 1,893 |
3889
- | \`lightbox\` | 55,592 | 17,610 | 15,581 | 20,982 | 5,215 | 4,031 |
3890
- | \`line-chart\` | 94,093 | 31,400 | 27,856 | 25,601 | 6,713 | 5,427 |
3891
- | \`list\` | 42,574 | 14,917 | 13,281 | 14,602 | 4,042 | 3,183 |
3892
- | \`listbox\` | 66,267 | 20,941 | 18,558 | 22,116 | 5,917 | 4,552 |
3893
- | \`loader\` | 30,461 | 11,297 | 10,037 | 5,834 | 1,724 | 1,314 |
3894
- | \`map\` | 114,434 | 28,832 | 25,092 | 73,898 | 15,408 | 12,327 |
3895
- | \`megamenu\` | 67,012 | 23,635 | 20,940 | 13,456 | 3,535 | 2,687 |
3896
- | \`menu\` | 93,704 | 30,425 | 26,878 | 30,172 | 7,178 | 5,741 |
3897
- | \`meter\` | 36,451 | 12,711 | 11,284 | 11,349 | 2,854 | 2,310 |
3898
- | \`navigation\` | 34,175 | 12,793 | 11,325 | 3,898 | 1,306 | 919 |
3899
- | \`notifications\` | 65,569 | 19,588 | 17,464 | 29,792 | 6,671 | 5,390 |
3900
- | \`number-input\` | 56,374 | 18,422 | 16,406 | 15,418 | 4,057 | 3,123 |
3901
- | \`object-inspector\` | 125,431 | 38,901 | 34,202 | 52,076 | 12,737 | 10,295 |
3902
- | \`option\` | 32,119 | 11,520 | 10,208 | 7,823 | 1,969 | 1,517 |
3903
- | \`orb\` | 35,702 | 13,813 | 12,280 | 9,408 | 3,548 | 2,945 |
3904
- | \`outline\` | 37,794 | 13,495 | 11,981 | 11,266 | 3,068 | 2,401 |
3905
- | \`pagination\` | 133,157 | 39,119 | 34,059 | 61,462 | 13,970 | 11,314 |
3906
- | \`pin-input\` | 49,015 | 16,461 | 14,597 | 10,557 | 3,207 | 2,418 |
3907
- | \`popover\` | 65,793 | 23,377 | 20,734 | 8,967 | 2,445 | 1,791 |
3908
- | \`progress\` | 33,591 | 12,114 | 10,741 | 8,696 | 2,323 | 1,849 |
3909
- | \`qr-code\` | 42,244 | 16,137 | 14,287 | 18,525 | 6,678 | 5,491 |
3910
- | \`quote\` | 25,409 | 9,992 | 8,804 | 1,968 | 740 | 487 |
3911
- | \`radio\` | 51,225 | 16,030 | 14,197 | 12,381 | 2,795 | 2,108 |
3912
- | \`rating\` | 52,538 | 17,677 | 15,692 | 12,080 | 3,645 | 2,846 |
3913
- | \`sandbox\` | 71,961 | 20,757 | 18,401 | 41,872 | 9,919 | 8,021 |
3914
- | \`scatter-chart\` | 92,086 | 30,992 | 27,396 | 24,782 | 6,791 | 5,454 |
3915
- | \`scroll-area\` | 38,254 | 13,193 | 11,737 | 13,890 | 3,647 | 2,889 |
3916
- | \`select\` | 112,131 | 34,470 | 30,286 | 40,821 | 9,713 | 7,768 |
3917
- | \`skeleton\` | 27,986 | 10,527 | 9,340 | 4,175 | 1,208 | 868 |
3918
- | \`skip-link\` | 27,070 | 10,468 | 9,213 | 3,403 | 1,119 | 802 |
3919
- | \`slider\` | 59,606 | 17,666 | 15,762 | 21,775 | 4,626 | 3,779 |
3920
- | \`sparkline\` | 47,751 | 16,981 | 15,169 | 11,657 | 3,515 | 2,824 |
3921
- | \`speed-dial\` | 66,215 | 23,377 | 20,731 | 10,931 | 2,584 | 1,893 |
3922
- | \`splitter\` | 44,893 | 14,588 | 12,984 | 17,511 | 4,159 | 3,282 |
3923
- | \`stat\` | 29,426 | 10,724 | 9,523 | 5,431 | 1,372 | 939 |
3924
- | \`steps\` | 62,190 | 18,889 | 16,769 | 26,598 | 6,075 | 4,779 |
3925
- | \`switch\` | 44,640 | 14,958 | 13,292 | 6,463 | 1,850 | 1,329 |
3926
- | \`table\` | 80,443 | 23,398 | 20,688 | 36,328 | 8,651 | 7,022 |
3927
- | \`tabs\` | 47,668 | 15,425 | 13,639 | 14,167 | 3,249 | 2,507 |
3928
- | \`tag\` | 44,066 | 15,342 | 13,669 | 11,854 | 3,136 | 2,323 |
3929
- | \`text\` | 31,186 | 10,899 | 9,619 | 7,761 | 1,645 | 1,191 |
3930
- | \`textarea\` | 49,246 | 16,390 | 14,582 | 9,752 | 2,731 | 2,070 |
3931
- | \`time-input\` | 169,655 | 48,086 | 41,766 | 71,242 | 15,598 | 12,767 |
3932
- | \`time-picker\` | 89,724 | 26,319 | 23,206 | 41,774 | 10,108 | 8,070 |
3933
- | \`timeline\` | 35,155 | 11,998 | 10,630 | 10,338 | 2,227 | 1,739 |
3934
- | \`toast\` | 53,803 | 18,050 | 16,042 | 17,938 | 4,862 | 3,827 |
3935
- | \`toggle\` | 51,716 | 16,767 | 14,846 | 11,016 | 2,947 | 2,295 |
3936
- | \`toolbar\` | 33,417 | 12,415 | 10,992 | 6,621 | 2,093 | 1,496 |
3937
- | \`tooltip\` | 64,095 | 22,841 | 20,261 | 11,835 | 3,291 | 2,490 |
3938
- | \`tour\` | 90,765 | 29,048 | 25,698 | 28,974 | 6,934 | 5,520 |
3939
- | \`tree\` | 55,278 | 17,952 | 15,895 | 19,938 | 5,177 | 4,106 |
3940
- | \`trend\` | 29,888 | 11,392 | 10,085 | 5,362 | 1,630 | 1,260 |
3941
- | \`video\` | 142,109 | 41,607 | 36,378 | 73,607 | 16,915 | 13,786 |
3942
- | \`video-playlist\` | 109,107 | 33,378 | 29,438 | 43,699 | 9,813 | 7,881 |
3943
- | \`virtual-list\` | 48,941 | 17,268 | 15,332 | 13,547 | 4,280 | 3,289 |
4074
+ | \`accordion\` | 36,375 | 12,705 | 11,268 | 9,776 | 2,548 | 1,846 |
4075
+ | \`announcement\` | 43,284 | 14,971 | 13,353 | 9,789 | 2,603 | 1,973 |
4076
+ | \`app-header\` | 27,494 | 9,972 | 8,812 | 6,110 | 1,703 | 1,232 |
4077
+ | \`area-chart\` | 92,825 | 31,847 | 28,160 | 21,855 | 5,896 | 4,748 |
4078
+ | \`aura\` | 51,161 | 17,647 | 15,648 | 28,069 | 8,692 | 7,378 |
4079
+ | \`avatar\` | 34,926 | 12,608 | 11,312 | 8,222 | 2,152 | 1,612 |
4080
+ | \`badge\` | 31,874 | 11,537 | 10,281 | 8,348 | 2,070 | 1,562 |
4081
+ | \`bar-chart\` | 101,443 | 33,811 | 29,929 | 30,092 | 7,782 | 6,377 |
4082
+ | \`blockquote\` | 26,126 | 9,890 | 8,735 | 4,680 | 1,472 | 1,019 |
4083
+ | \`breadcrumbs\` | 40,166 | 14,288 | 12,751 | 12,631 | 3,242 | 2,468 |
4084
+ | \`button\` | 44,670 | 14,891 | 13,257 | 12,180 | 2,994 | 2,291 |
4085
+ | \`button-group\` | 30,123 | 10,751 | 9,562 | 7,824 | 2,057 | 1,435 |
4086
+ | \`callout\` | 35,404 | 12,933 | 11,474 | 5,371 | 1,551 | 1,075 |
4087
+ | \`canvas\` | 118,408 | 34,934 | 30,560 | 78,366 | 21,258 | 17,490 |
4088
+ | \`card\` | 27,090 | 9,877 | 8,782 | 5,849 | 1,621 | 1,117 |
4089
+ | \`carousel\` | 54,039 | 17,234 | 15,434 | 26,183 | 5,959 | 4,799 |
4090
+ | \`chat\` | 84,259 | 26,013 | 23,105 | 35,772 | 8,837 | 7,198 |
4091
+ | \`checkbox\` | 48,304 | 15,478 | 13,866 | 10,204 | 2,569 | 1,907 |
4092
+ | \`checkbox-group\` | 55,999 | 17,341 | 15,439 | 16,779 | 4,071 | 3,168 |
4093
+ | \`code\` | 21,438 | 8,350 | 7,410 | 1,534 | 514 | 214 |
4094
+ | \`code-block\` | 113,767 | 34,690 | 30,820 | 47,580 | 10,521 | 8,515 |
4095
+ | \`color-input\` | 172,783 | 47,795 | 41,970 | 87,904 | 17,984 | 14,869 |
4096
+ | \`color-picker\` | 128,267 | 34,963 | 30,850 | 74,046 | 15,661 | 12,881 |
4097
+ | \`combobox\` | 155,099 | 45,804 | 40,250 | 58,175 | 13,048 | 10,547 |
4098
+ | \`command\` | 108,401 | 32,341 | 28,383 | 41,556 | 10,006 | 7,982 |
4099
+ | \`copy-button\` | 95,541 | 30,302 | 26,890 | 31,234 | 6,978 | 5,602 |
4100
+ | \`data-table\` | 267,314 | 74,154 | 61,256 | 158,565 | 37,682 | 28,441 |
4101
+ | \`date-input\` | 154,203 | 44,767 | 39,329 | 57,425 | 12,505 | 10,243 |
4102
+ | \`date-picker\` | 62,302 | 19,754 | 17,648 | 24,818 | 5,809 | 4,734 |
4103
+ | \`description-list\` | 26,911 | 9,597 | 8,500 | 5,841 | 1,486 | 993 |
4104
+ | \`dialog\` | 45,463 | 15,531 | 13,837 | 11,419 | 3,049 | 2,375 |
4105
+ | \`divider\` | 25,331 | 9,485 | 8,417 | 4,013 | 1,168 | 776 |
4106
+ | \`donut-chart\` | 94,288 | 31,729 | 28,116 | 24,748 | 6,429 | 5,367 |
4107
+ | \`drawer\` | 49,055 | 16,710 | 14,951 | 12,230 | 3,288 | 2,624 |
4108
+ | \`drilldown\` | 48,115 | 16,105 | 14,362 | 14,232 | 3,497 | 2,669 |
4109
+ | \`empty\` | 25,447 | 9,638 | 8,520 | 3,582 | 1,187 | 753 |
4110
+ | \`file-input\` | 78,755 | 24,723 | 21,983 | 30,256 | 7,538 | 6,121 |
4111
+ | \`filter-input\` | 158,922 | 44,637 | 39,049 | 73,928 | 15,418 | 12,403 |
4112
+ | \`flex\` | 25,850 | 9,251 | 8,206 | 5,154 | 1,191 | 812 |
4113
+ | \`format-date\` | 29,553 | 11,019 | 9,812 | 4,880 | 1,455 | 913 |
4114
+ | \`graph\` | 82,121 | 24,867 | 22,045 | 31,770 | 7,761 | 6,359 |
4115
+ | \`grid\` | 27,105 | 9,903 | 8,808 | 6,021 | 1,604 | 1,143 |
4116
+ | \`heatmap\` | 98,999 | 33,151 | 29,264 | 24,753 | 6,402 | 5,227 |
4117
+ | \`icon\` | 81,303 | 27,683 | 23,695 | 57,761 | 19,488 | 15,665 |
4118
+ | \`icon-button\` | 46,452 | 14,878 | 13,314 | 13,963 | 3,010 | 2,274 |
4119
+ | \`image\` | 27,289 | 10,006 | 8,887 | 5,868 | 1,771 | 1,233 |
4120
+ | \`input\` | 52,358 | 17,477 | 15,436 | 12,104 | 3,511 | 2,604 |
4121
+ | \`kbd\` | 28,870 | 10,750 | 9,522 | 5,917 | 1,768 | 1,187 |
4122
+ | \`legend\` | 38,088 | 13,437 | 11,886 | 8,571 | 2,359 | 1,646 |
4123
+ | \`lightbox\` | 57,810 | 18,527 | 16,462 | 21,187 | 5,091 | 4,002 |
4124
+ | \`line-chart\` | 96,681 | 32,507 | 28,873 | 25,504 | 6,484 | 5,390 |
4125
+ | \`list\` | 64,672 | 21,788 | 19,434 | 19,053 | 4,985 | 4,050 |
4126
+ | \`listbox\` | 82,102 | 26,213 | 23,192 | 22,442 | 5,882 | 4,595 |
4127
+ | \`loader\` | 30,702 | 11,284 | 10,107 | 5,874 | 1,746 | 1,214 |
4128
+ | \`map\` | 118,769 | 30,286 | 26,424 | 76,731 | 15,938 | 12,736 |
4129
+ | \`megamenu\` | 64,392 | 22,605 | 19,981 | 13,339 | 3,428 | 2,508 |
4130
+ | \`menu\` | 94,439 | 30,597 | 27,086 | 29,592 | 6,789 | 5,462 |
4131
+ | \`meter\` | 38,535 | 13,536 | 12,126 | 11,502 | 2,811 | 2,326 |
4132
+ | \`navigation\` | 34,563 | 12,819 | 11,464 | 3,898 | 1,274 | 853 |
4133
+ | \`notifications\` | 69,087 | 20,539 | 18,315 | 32,111 | 7,082 | 5,801 |
4134
+ | \`number-input\` | 58,471 | 19,231 | 17,192 | 15,701 | 4,021 | 3,033 |
4135
+ | \`object-inspector\` | 130,426 | 40,564 | 35,654 | 52,198 | 12,735 | 10,085 |
4136
+ | \`option\` | 29,385 | 10,379 | 9,196 | 7,818 | 1,952 | 1,349 |
4137
+ | \`orb\` | 35,918 | 13,782 | 12,285 | 9,423 | 3,492 | 2,901 |
4138
+ | \`outline\` | 38,036 | 13,461 | 11,992 | 11,299 | 3,040 | 2,276 |
4139
+ | \`pagination\` | 152,420 | 45,162 | 39,323 | 64,178 | 14,642 | 11,721 |
4140
+ | \`pin-input\` | 51,283 | 17,406 | 15,589 | 10,717 | 3,193 | 2,438 |
4141
+ | \`popover\` | 66,227 | 23,427 | 20,783 | 9,114 | 2,485 | 1,809 |
4142
+ | \`progress\` | 33,851 | 12,117 | 10,862 | 8,734 | 2,300 | 1,884 |
4143
+ | \`qr-code\` | 45,181 | 17,347 | 15,460 | 19,258 | 6,816 | 5,713 |
4144
+ | \`quote\` | 22,676 | 8,850 | 7,835 | 1,972 | 761 | 365 |
4145
+ | \`radio\` | 51,603 | 16,019 | 14,245 | 12,559 | 2,775 | 2,026 |
4146
+ | \`rating\` | 54,717 | 18,515 | 16,520 | 12,259 | 3,599 | 2,681 |
4147
+ | \`sandbox\` | 75,603 | 21,919 | 19,480 | 43,353 | 10,049 | 8,202 |
4148
+ | \`scatter-chart\` | 94,980 | 32,154 | 28,453 | 24,865 | 6,682 | 5,448 |
4149
+ | \`scroll-area\` | 35,799 | 12,062 | 10,803 | 14,173 | 3,605 | 2,803 |
4150
+ | \`select\` | 130,389 | 40,272 | 35,345 | 42,758 | 10,018 | 7,942 |
4151
+ | \`skeleton\` | 25,250 | 9,379 | 8,345 | 4,175 | 1,234 | 757 |
4152
+ | \`skip-link\` | 27,312 | 10,455 | 9,255 | 3,442 | 1,143 | 728 |
4153
+ | \`slider\` | 61,484 | 18,430 | 16,483 | 21,816 | 4,437 | 3,662 |
4154
+ | \`sparkline\` | 50,171 | 18,013 | 16,101 | 11,712 | 3,454 | 2,738 |
4155
+ | \`speed-dial\` | 75,502 | 25,745 | 22,848 | 17,209 | 3,868 | 2,993 |
4156
+ | \`splitter\` | 46,272 | 14,819 | 13,294 | 18,442 | 4,180 | 3,347 |
4157
+ | \`stat\` | 26,709 | 9,615 | 8,578 | 5,435 | 1,405 | 968 |
4158
+ | \`steps\` | 64,872 | 20,005 | 17,829 | 26,859 | 5,929 | 4,816 |
4159
+ | \`switch\` | 45,017 | 14,936 | 13,319 | 6,636 | 1,923 | 1,291 |
4160
+ | \`table\` | 111,816 | 32,491 | 28,600 | 50,325 | 11,840 | 9,543 |
4161
+ | \`tabs\` | 47,906 | 15,383 | 13,685 | 14,203 | 3,182 | 2,418 |
4162
+ | \`tag\` | 46,453 | 16,325 | 14,608 | 11,788 | 3,070 | 2,334 |
4163
+ | \`text\` | 28,851 | 9,993 | 8,839 | 7,770 | 1,656 | 1,180 |
4164
+ | \`textarea\` | 49,489 | 16,360 | 14,598 | 9,791 | 2,668 | 1,990 |
4165
+ | \`time-input\` | 187,913 | 53,735 | 46,781 | 73,041 | 16,059 | 13,072 |
4166
+ | \`time-picker\` | 106,925 | 31,849 | 28,128 | 43,656 | 10,411 | 8,289 |
4167
+ | \`timeline\` | 32,421 | 10,856 | 9,641 | 10,340 | 2,226 | 1,696 |
4168
+ | \`toast\` | 56,963 | 19,202 | 17,059 | 17,920 | 4,665 | 3,851 |
4169
+ | \`toggle\` | 49,064 | 15,666 | 13,915 | 10,961 | 2,872 | 2,177 |
4170
+ | \`toolbar\` | 35,586 | 12,637 | 11,308 | 8,487 | 2,293 | 1,654 |
4171
+ | \`tooltip\` | 61,441 | 21,738 | 19,283 | 11,642 | 3,152 | 2,408 |
4172
+ | \`tour\` | 93,317 | 30,119 | 26,759 | 29,075 | 6,820 | 5,433 |
4173
+ | \`tree\` | 74,370 | 23,738 | 21,063 | 23,875 | 5,921 | 4,891 |
4174
+ | \`trend\` | 32,091 | 12,277 | 10,992 | 5,654 | 1,708 | 1,176 |
4175
+ | \`video\` | 145,281 | 42,885 | 37,592 | 73,670 | 16,791 | 13,757 |
4176
+ | \`video-playlist\` | 109,937 | 33,569 | 29,677 | 43,216 | 9,393 | 7,620 |
4177
+ | \`virtual-list\` | 52,016 | 18,025 | 16,093 | 13,669 | 4,099 | 3,220 |
3944
4178
 
3945
4179
  ## What an install adds to \`node_modules\`
3946
4180
 
@@ -3952,12 +4186,12 @@ stripped column shows the bytes we removed.
3952
4186
 
3953
4187
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
3954
4188
  |---|---|---|---|---|
3955
- | \`@fusion.dev/helix-core\` | 1,947,427 | 463 | 519,050 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
3956
- | \`@fusion.dev/helix-headless\` | 17,910,100 | 651 | 1,677,126 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
3957
- | \`@fusion.dev/helix-icons\` | 149,615 | 21 | 47,843 | \`svgo\` |
3958
- | \`@fusion.dev/helix-styles\` | 108,978 | 6 | 0 | none |
4189
+ | \`@fusion.dev/helix-core\` | 2,236,589 | 515 | 623,888 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
4190
+ | \`@fusion.dev/helix-headless\` | 19,096,230 | 674 | 1,804,473 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
4191
+ | \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
4192
+ | \`@fusion.dev/helix-styles\` | 110,590 | 6 | 0 | none |
3959
4193
  | \`@fusion.dev/helix-theme\` | 528,598 | 8 | 5,393 | none |
3960
- | \`@fusion.dev/helix\` | 18,337,345 | 909 | 394,847 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
4194
+ | \`@fusion.dev/helix\` | 19,396,931 | 920 | 401,249 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
3961
4195
 
3962
4196
  ## Not measured yet
3963
4197
 
@@ -4251,13 +4485,30 @@ The fields with a panel behave the same way:
4251
4485
  **A tooltip never takes focus.** A tooltip only describes a control, so it
4252
4486
  cannot contain a button. For something with a button in it, use a \`Popover\`.
4253
4487
 
4254
- A tooltip describes its trigger by itself, whether it wraps the trigger or
4255
- names it with \`for\`. A Helix trigger is described as soon as it has rendered.
4256
- A plain element in your markup is described the first time a reader points at
4257
- it or focuses it, so the link is never written into markup your server sent.
4258
- Write \`aria-describedby\` yourself to have the link in the server's markup.
4259
- In the \`for\` form, the tooltip itself is out of the accessibility tree while
4260
- its bubble is down, so a reader meets its words once, as the description.
4488
+ **Name the tooltip in its trigger's \`aria-describedby\`.** Place the tooltip
4489
+ beside its trigger, name the trigger with \`for\`, and give the trigger an
4490
+ \`aria-describedby\` with the tooltip's id. The description is then in the
4491
+ markup your server sends, so a screen reader meets it at rest, in reading mode
4492
+ too:
4493
+
4494
+ \`\`\`html
4495
+ <helix-button
4496
+ aria-describedby="save-tip"
4497
+ id="save"
4498
+ >Save</helix-button>
4499
+ <helix-tooltip
4500
+ content="Save your work"
4501
+ for="save"
4502
+ id="save-tip"
4503
+ ></helix-tooltip>
4504
+ \`\`\`
4505
+
4506
+ Without the attribute, a tooltip links itself. A Helix trigger is described as
4507
+ soon as it has rendered. A plain element that \`for\` names is described the
4508
+ first time you point at it or focus it, so the link is never written into
4509
+ markup your server sent. In the \`for\` form, the tooltip itself is out of the
4510
+ accessibility tree while its bubble is down, so you meet its words once, as the
4511
+ description.
4261
4512
  The pointer can move onto a tooltip's bubble and the bubble stays, so a reader
4262
4513
  can read it under a magnifier. Set \`hoverable="false"\` to hide it once the
4263
4514
  pointer reaches it.
@@ -4527,6 +4778,18 @@ The prop is \`on\` followed by the exact event name. \`onHelixOpen\` and \`onOpe
4527
4778
  not work. React 19 passes an unknown \`on*\` prop to \`addEventListener\` with the
4528
4779
  name as written, so use the event's own casing.
4529
4780
 
4781
+ In a development build, an element prints a warning once when one of its \`on\`
4782
+ props can never run:
4783
+
4784
+ - a misspelled event name, such as \`onhelix-opne\`
4785
+ - an event that a different element sends
4786
+ - Solid's \`on:\` syntax
4787
+ - a callback property that was removed, such as \`onCheckedChange\`
4788
+
4789
+ TypeScript does not check a JSX prop whose name has a hyphen, so the console is
4790
+ the only place these show. Vite and webpack use the \`development\` export
4791
+ condition while you develop. A production build carries none of the check.
4792
+
4530
4793
  ## The hydration bridge
4531
4794
 
4532
4795
  While React hydrates, it skips everything it would have to apply imperatively.
@@ -6542,9 +6805,10 @@ Helix has two layers of tokens. You use the second layer, the semantic tokens.
6542
6805
  | Semantic | \`--helix-color-primary\` | Any code, including yours |
6543
6806
 
6544
6807
  Each semantic token is named for its purpose. The name does not describe its
6545
- value. Every token belongs to exactly one of fifteen categories:
6808
+ value. Every token belongs to exactly one of sixteen categories:
6546
6809
 
6547
6810
  - \`color\`
6811
+ - \`scrollbar\`
6548
6812
  - \`space\`
6549
6813
  - \`radii\`
6550
6814
  - \`font\`