@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.
- package/content/color.mdx +17 -0
- package/content/composition.mdx +6 -0
- package/content/graphs.mdx +33 -2
- package/content/iconography.mdx +2 -2
- package/content/localization.mdx +167 -19
- package/content/maps.mdx +34 -2
- package/content/metrics.mdx +227 -227
- package/content/overlays.mdx +24 -7
- package/content/react.mdx +12 -0
- package/content/tokens.mdx +2 -1
- package/dist/pages.generated.js +1 -1
- package/dist/sources.generated.js +524 -260
- package/package.json +9 -9
|
@@ -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"
|
|
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\`,
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
2809
|
-
|
|
2810
|
-
properties, such as \`previous-label\` and \`next-label\` on
|
|
2811
|
-
|
|
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
|
-
##
|
|
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
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
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
|
-
|
|
2875
|
-
|
|
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
|
-
-
|
|
2909
|
-
- a
|
|
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
|
|
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
|
|
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\` |
|
|
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\` |
|
|
3610
|
-
| \`@fusion.dev/helix-headless\` | 1,
|
|
3611
|
-
| \`@fusion.dev/helix-icons\` |
|
|
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,
|
|
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\` |
|
|
3628
|
-
| \`elements.css\` | 9,
|
|
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,
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
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** |
|
|
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,
|
|
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,
|
|
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** |
|
|
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,
|
|
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** |
|
|
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,
|
|
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\` |
|
|
3736
|
-
| \`announcement\` |
|
|
3737
|
-
| \`app-header\` |
|
|
3738
|
-
| \`area-chart\` |
|
|
3739
|
-
| \`avatar\` |
|
|
3740
|
-
| \`badge\` | 26,
|
|
3741
|
-
| \`bar-chart\` |
|
|
3742
|
-
| \`blockquote\` | 24,
|
|
3743
|
-
| \`breadcrumbs\` |
|
|
3744
|
-
| \`button\` | 37,
|
|
3745
|
-
| \`button-group\` |
|
|
3746
|
-
| \`callout\` |
|
|
3747
|
-
| \`canvas\` |
|
|
3748
|
-
| \`card\` |
|
|
3749
|
-
| \`carousel\` |
|
|
3750
|
-
| \`chat\` |
|
|
3751
|
-
| \`checkbox\` | 41,
|
|
3752
|
-
| \`checkbox-group\` |
|
|
3753
|
-
| \`code\` |
|
|
3754
|
-
| \`code-block\` |
|
|
3755
|
-
| \`color-input\` |
|
|
3756
|
-
| \`color-picker\` |
|
|
3757
|
-
| \`combobox\` |
|
|
3758
|
-
| \`command\` |
|
|
3759
|
-
| \`copy-button\` |
|
|
3760
|
-
| \`data-table\` |
|
|
3761
|
-
| \`date-input\` |
|
|
3762
|
-
| \`date-picker\` |
|
|
3763
|
-
| \`description-list\` |
|
|
3764
|
-
| \`dialog\` | 39,
|
|
3765
|
-
| \`divider\` |
|
|
3766
|
-
| \`donut-chart\` |
|
|
3767
|
-
| \`drawer\` | 42,
|
|
3768
|
-
| \`drilldown\` | 41,
|
|
3769
|
-
| \`empty\` |
|
|
3770
|
-
| \`file-input\` |
|
|
3771
|
-
| \`filter-input\` |
|
|
3772
|
-
| \`format-date\` |
|
|
3773
|
-
| \`graph\` |
|
|
3774
|
-
| \`heatmap\` |
|
|
3775
|
-
| \`icon\` |
|
|
3776
|
-
| \`icon-button\` | 37,
|
|
3777
|
-
| \`image\` |
|
|
3778
|
-
| \`input\` | 47,
|
|
3779
|
-
| \`kbd\` |
|
|
3780
|
-
| \`legend\` |
|
|
3781
|
-
| \`lightbox\` |
|
|
3782
|
-
| \`line-chart\` |
|
|
3783
|
-
| \`list\` |
|
|
3784
|
-
| \`listbox\` |
|
|
3785
|
-
| \`loader\` | 27,
|
|
3786
|
-
| \`map\` |
|
|
3787
|
-
| \`megamenu\` |
|
|
3788
|
-
| \`menu\` |
|
|
3789
|
-
| \`meter\` |
|
|
3790
|
-
| \`navigation\` | 32,
|
|
3791
|
-
| \`notifications\` |
|
|
3792
|
-
| \`number-input\` |
|
|
3793
|
-
| \`object-inspector\` |
|
|
3794
|
-
| \`option\` |
|
|
3795
|
-
| \`outline\` | 33,
|
|
3796
|
-
| \`pagination\` |
|
|
3797
|
-
| \`pin-input\` |
|
|
3798
|
-
| \`popover\` | 62,
|
|
3799
|
-
| \`progress\` |
|
|
3800
|
-
| \`qr-code\` |
|
|
3801
|
-
| \`quote\` |
|
|
3802
|
-
| \`radio\` |
|
|
3803
|
-
| \`rating\` |
|
|
3804
|
-
| \`scatter-chart\` |
|
|
3805
|
-
| \`scroll-area\` |
|
|
3806
|
-
| \`select\` |
|
|
3807
|
-
| \`skeleton\` |
|
|
3808
|
-
| \`skip-link\` | 25,
|
|
3809
|
-
| \`slider\` |
|
|
3810
|
-
| \`sparkline\` |
|
|
3811
|
-
| \`speed-dial\` |
|
|
3812
|
-
| \`splitter\` |
|
|
3813
|
-
| \`stat\` |
|
|
3814
|
-
| \`steps\` |
|
|
3815
|
-
| \`switch\` |
|
|
3816
|
-
| \`table\` |
|
|
3817
|
-
| \`tabs\` | 39,
|
|
3818
|
-
| \`tag\` |
|
|
3819
|
-
| \`textarea\` |
|
|
3820
|
-
| \`time-input\` |
|
|
3821
|
-
| \`time-picker\` |
|
|
3822
|
-
| \`timeline\` |
|
|
3823
|
-
| \`toast\` |
|
|
3824
|
-
| \`toggle\` |
|
|
3825
|
-
| \`toolbar\` |
|
|
3826
|
-
| \`tooltip\` |
|
|
3827
|
-
| \`tour\` |
|
|
3828
|
-
| \`tree\` |
|
|
3829
|
-
| \`trend\` |
|
|
3830
|
-
| \`video\` |
|
|
3831
|
-
| \`video-playlist\` |
|
|
3832
|
-
| \`virtual-list\` |
|
|
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\` |
|
|
3841
|
-
| \`announcement\` |
|
|
3842
|
-
| \`app-header\` |
|
|
3843
|
-
| \`area-chart\` |
|
|
3844
|
-
| \`aura\` |
|
|
3845
|
-
| \`avatar\` |
|
|
3846
|
-
| \`badge\` |
|
|
3847
|
-
| \`bar-chart\` |
|
|
3848
|
-
| \`blockquote\` | 26,
|
|
3849
|
-
| \`breadcrumbs\` |
|
|
3850
|
-
| \`button\` | 44,
|
|
3851
|
-
| \`button-group\` |
|
|
3852
|
-
| \`callout\` |
|
|
3853
|
-
| \`canvas\` |
|
|
3854
|
-
| \`card\` |
|
|
3855
|
-
| \`carousel\` |
|
|
3856
|
-
| \`chat\` |
|
|
3857
|
-
| \`checkbox\` |
|
|
3858
|
-
| \`checkbox-group\` |
|
|
3859
|
-
| \`code\` |
|
|
3860
|
-
| \`code-block\` |
|
|
3861
|
-
| \`color-input\` |
|
|
3862
|
-
| \`color-picker\` |
|
|
3863
|
-
| \`combobox\` |
|
|
3864
|
-
| \`command\` |
|
|
3865
|
-
| \`copy-button\` |
|
|
3866
|
-
| \`data-table\` |
|
|
3867
|
-
| \`date-input\` |
|
|
3868
|
-
| \`date-picker\` |
|
|
3869
|
-
| \`description-list\` |
|
|
3870
|
-
| \`dialog\` | 45,
|
|
3871
|
-
| \`divider\` |
|
|
3872
|
-
| \`donut-chart\` |
|
|
3873
|
-
| \`drawer\` |
|
|
3874
|
-
| \`drilldown\` |
|
|
3875
|
-
| \`empty\` |
|
|
3876
|
-
| \`file-input\` |
|
|
3877
|
-
| \`filter-input\` |
|
|
3878
|
-
| \`flex\` |
|
|
3879
|
-
| \`format-date\` |
|
|
3880
|
-
| \`graph\` |
|
|
3881
|
-
| \`grid\` |
|
|
3882
|
-
| \`heatmap\` |
|
|
3883
|
-
| \`icon\` |
|
|
3884
|
-
| \`icon-button\` | 46,
|
|
3885
|
-
| \`image\` |
|
|
3886
|
-
| \`input\` | 52,
|
|
3887
|
-
| \`kbd\` |
|
|
3888
|
-
| \`legend\` |
|
|
3889
|
-
| \`lightbox\` |
|
|
3890
|
-
| \`line-chart\` |
|
|
3891
|
-
| \`list\` |
|
|
3892
|
-
| \`listbox\` |
|
|
3893
|
-
| \`loader\` | 30,
|
|
3894
|
-
| \`map\` |
|
|
3895
|
-
| \`megamenu\` |
|
|
3896
|
-
| \`menu\` |
|
|
3897
|
-
| \`meter\` |
|
|
3898
|
-
| \`navigation\` | 34,
|
|
3899
|
-
| \`notifications\` |
|
|
3900
|
-
| \`number-input\` |
|
|
3901
|
-
| \`object-inspector\` |
|
|
3902
|
-
| \`option\` |
|
|
3903
|
-
| \`orb\` | 35,
|
|
3904
|
-
| \`outline\` |
|
|
3905
|
-
| \`pagination\` |
|
|
3906
|
-
| \`pin-input\` |
|
|
3907
|
-
| \`popover\` |
|
|
3908
|
-
| \`progress\` | 33,
|
|
3909
|
-
| \`qr-code\` |
|
|
3910
|
-
| \`quote\` |
|
|
3911
|
-
| \`radio\` | 51,
|
|
3912
|
-
| \`rating\` |
|
|
3913
|
-
| \`sandbox\` |
|
|
3914
|
-
| \`scatter-chart\` |
|
|
3915
|
-
| \`scroll-area\` |
|
|
3916
|
-
| \`select\` |
|
|
3917
|
-
| \`skeleton\` |
|
|
3918
|
-
| \`skip-link\` | 27,
|
|
3919
|
-
| \`slider\` |
|
|
3920
|
-
| \`sparkline\` |
|
|
3921
|
-
| \`speed-dial\` |
|
|
3922
|
-
| \`splitter\` |
|
|
3923
|
-
| \`stat\` |
|
|
3924
|
-
| \`steps\` |
|
|
3925
|
-
| \`switch\` |
|
|
3926
|
-
| \`table\` |
|
|
3927
|
-
| \`tabs\` | 47,
|
|
3928
|
-
| \`tag\` |
|
|
3929
|
-
| \`text\` |
|
|
3930
|
-
| \`textarea\` | 49,
|
|
3931
|
-
| \`time-input\` |
|
|
3932
|
-
| \`time-picker\` |
|
|
3933
|
-
| \`timeline\` |
|
|
3934
|
-
| \`toast\` |
|
|
3935
|
-
| \`toggle\` |
|
|
3936
|
-
| \`toolbar\` |
|
|
3937
|
-
| \`tooltip\` |
|
|
3938
|
-
| \`tour\` |
|
|
3939
|
-
| \`tree\` |
|
|
3940
|
-
| \`trend\` |
|
|
3941
|
-
| \`video\` |
|
|
3942
|
-
| \`video-playlist\` | 109,
|
|
3943
|
-
| \`virtual-list\` |
|
|
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\` |
|
|
3956
|
-
| \`@fusion.dev/helix-headless\` |
|
|
3957
|
-
| \`@fusion.dev/helix-icons\` |
|
|
3958
|
-
| \`@fusion.dev/helix-styles\` |
|
|
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\` |
|
|
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
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
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
|
|
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\`
|