@fusion.dev/helix-docs 0.194.0 → 0.196.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.
Files changed (6) hide show
  1. package/content/charting.mdx +26 -18
  2. package/content/introduction.mdx +1 -0
  3. package/content/metrics.mdx +223 -223
  4. package/content/spatial-charts.mdx +30 -6
  5. package/dist/sources.generated.js +280 -247
  6. package/package.json +11 -9
package/content/metrics.mdx CHANGED
@@ -46,7 +46,7 @@ on its own.
46
46
 
47
47
  | | Raw | Gzip | Brotli |
48
48
  |---|---|---|---|
49
- | Lit and `@fusion.dev/helix-core` | 251,897 | 80,754 | 69,093 |
49
+ | Lit and `@fusion.dev/helix-core` | 253,599 | 81,597 | 69,720 |
50
50
 
51
51
  ## Whole packages
52
52
 
@@ -57,12 +57,12 @@ either barrel. The per-component tables show what your page pays.
57
57
 
58
58
  | Package | Raw | Gzip | Brotli | |
59
59
  |---|---|---|---|---|
60
- | `@fusion.dev/helix-core` | 251,106 | 80,604 | 68,830 | The element base class, mixins, decorators, and floating positioning. |
61
- | `@fusion.dev/helix-headless` | 1,359,829 | 380,685 | 285,603 | Every headless family. The barrel entry includes all of them. |
60
+ | `@fusion.dev/helix-core` | 252,808 | 81,455 | 69,458 | The element base class, mixins, decorators, and floating positioning. |
61
+ | `@fusion.dev/helix-headless` | 1,366,720 | 383,153 | 287,396 | Every headless family. The barrel entry includes all of them. |
62
62
  | `@fusion.dev/helix-icons` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
63
63
  | `@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. |
64
64
  | `fusion_helix_theme_bg.wasm` | 490,971 | 155,905 | 125,923 | The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs. |
65
- | `@fusion.dev/helix` | 2,043,807 | 529,318 | 377,652 | Every styled family. |
65
+ | `@fusion.dev/helix` | 2,050,629 | 531,895 | 379,443 | Every styled family. |
66
66
  | `lit` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
67
67
 
68
68
  ## Stylesheets
@@ -83,11 +83,11 @@ shows the whole cost of using the base layer on its own.
83
83
 
84
84
  ## What the numbers say
85
85
 
86
- **Most of your first component is the shared runtime.** The median styled family is 18,136 bytes gzipped alone, and it adds 4,021 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
86
+ **Most of your first component is the shared runtime.** The median styled family is 18,134 bytes gzipped alone, and it adds 4,014 to a page that already has Helix. The shared runtime is 78 percent of the first component, and the component itself is 22 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
87
87
 
88
- Across the 108 styled components, the smallest is `code` at 8,333 bytes gzipped alone, and the largest is `data-table` at 66,818. Every family together is 529,318.
88
+ Across the 108 styled components, the smallest is `code` at 8,333 bytes gzipped alone, and the largest is `data-table` at 66,818. Every family together is 531,895.
89
89
 
90
- No family imports a barrel. The `barrels` rule in `fusion x 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 380,685 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 108 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.
90
+ No family imports a barrel. The `barrels` rule in `fusion x 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 383,153 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 108 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.
91
91
 
92
92
  The headless tier never had the problem, so it serves as the control. `@fusion.dev/helix-core` is `sideEffects: false`, and the median headless family is 17,291 bytes gzipped alone.
93
93
 
@@ -106,7 +106,7 @@ The table has no whole-library row. That row would compare how many components e
106
106
  | | Material Web | 47,060 | 14,173 | 12,591 |
107
107
  | | Shoelace | 62,628 | 18,287 | 15,805 |
108
108
  | | Spectrum | 98,792 | 22,045 | 18,674 |
109
- | `checkbox` | **Helix** | 46,865 | 15,190 | 13,514 |
109
+ | `checkbox` | **Helix** | 46,865 | 15,190 | 13,541 |
110
110
  | | Carbon | 60,255 | 15,609 | 13,550 |
111
111
  | | Material Web | 43,785 | 13,556 | 12,015 |
112
112
  | | Shoelace | 47,614 | 15,177 | 13,301 |
@@ -121,17 +121,17 @@ The table has no whole-library row. That row would compare how many components e
121
121
  | | Material Web | 41,044 | 13,234 | 11,757 |
122
122
  | | Shoelace | 34,865 | 12,027 | 10,559 |
123
123
  | | Spectrum | 38,685 | 10,660 | 9,370 |
124
- | `switch` | **Helix** | 43,562 | 14,639 | 13,019 |
124
+ | `switch` | **Helix** | 43,562 | 14,637 | 13,009 |
125
125
  | | Carbon | 69,423 | 17,127 | 14,764 |
126
126
  | | Material Web | 50,155 | 14,577 | 12,935 |
127
127
  | | Shoelace | 37,833 | 11,814 | 10,568 |
128
128
  | | Spectrum | 62,322 | 15,059 | 13,321 |
129
- | `tabs` | **Helix** | 55,263 | 17,752 | 15,850 |
129
+ | `tabs` | **Helix** | 55,263 | 17,752 | 15,848 |
130
130
  | | Carbon | 578,766 | 73,537 | 43,235 |
131
131
  | | Material Web | 38,883 | 12,820 | 11,368 |
132
132
  | | Shoelace | 54,573 | 17,140 | 15,068 |
133
133
  | | Spectrum | 64,875 | 18,298 | 16,283 |
134
- | `tooltip` | **Helix** | 61,420 | 21,834 | 19,346 |
134
+ | `tooltip` | **Helix** | 61,420 | 21,834 | 19,393 |
135
135
  | | Carbon | 189,382 | 30,354 | 22,273 |
136
136
  | | Material Web | | not shipped | |
137
137
  | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -183,107 +183,107 @@ Structure, accessibility, state, and form participation. It has no presentation
183
183
 
184
184
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
185
185
  |---|---|---|---|---|---|---|
186
- | `accordion` | 31,879 | 11,804 | 10,470 | 5,329 | 1,584 | 1,204 |
187
- | `announcement` | 36,692 | 13,312 | 11,893 | 4,682 | 1,388 | 1,101 |
188
- | `app-header` | 32,289 | 11,898 | 10,551 | 5,871 | 1,759 | 1,312 |
189
- | `area-chart` | 90,301 | 31,727 | 28,017 | 14,057 | 4,331 | 3,465 |
190
- | `avatar` | 30,463 | 11,596 | 10,369 | 3,957 | 1,206 | 975 |
191
- | `badge` | 27,088 | 10,568 | 9,406 | 2,942 | 909 | 757 |
192
- | `bar-chart` | 94,416 | 32,821 | 29,056 | 18,022 | 5,411 | 4,357 |
193
- | `blockquote` | 24,107 | 9,420 | 8,334 | 2,402 | 884 | 652 |
194
- | `breadcrumbs` | 36,279 | 13,907 | 12,385 | 7,360 | 2,429 | 1,944 |
195
- | `button` | 35,194 | 12,591 | 11,200 | 4,925 | 1,443 | 1,131 |
196
- | `button-group` | 27,640 | 10,382 | 9,204 | 4,927 | 1,514 | 1,162 |
197
- | `callout` | 35,256 | 13,593 | 12,073 | 2,884 | 977 | 780 |
198
- | `canvas` | 108,483 | 34,750 | 30,428 | 68,924 | 20,914 | 17,652 |
199
- | `card` | 23,824 | 9,093 | 8,106 | 2,090 | 653 | 533 |
200
- | `carousel` | 42,748 | 15,233 | 13,610 | 15,005 | 4,196 | 3,211 |
201
- | `chat` | 79,390 | 26,446 | 23,375 | 27,455 | 8,064 | 6,395 |
202
- | `checkbox` | 40,374 | 13,681 | 12,198 | 3,107 | 953 | 678 |
203
- | `checkbox-group` | 47,602 | 15,601 | 13,897 | 8,325 | 2,365 | 1,717 |
204
- | `code` | 20,301 | 8,015 | 7,122 | 138 | 73 | 25 |
205
- | `code-block` | 102,738 | 34,889 | 30,833 | 36,842 | 10,758 | 8,782 |
206
- | `color-input` | 141,792 | 45,090 | 39,356 | 55,132 | 14,316 | 11,584 |
207
- | `color-picker` | 103,415 | 32,966 | 28,858 | 47,253 | 12,729 | 10,287 |
208
- | `combobox` | 132,023 | 41,951 | 36,939 | 35,789 | 9,118 | 7,130 |
209
- | `command` | 99,560 | 31,521 | 27,729 | 30,059 | 8,120 | 6,390 |
210
- | `copy-button` | 80,548 | 27,648 | 24,460 | 18,341 | 4,992 | 3,960 |
211
- | `data-table` | 199,900 | 61,426 | 52,524 | 89,488 | 23,835 | 19,149 |
212
- | `date-input` | 141,223 | 44,511 | 39,138 | 38,228 | 9,486 | 7,492 |
213
- | `date-picker` | 61,360 | 20,935 | 18,805 | 20,345 | 5,607 | 4,454 |
214
- | `description-list` | 22,900 | 8,765 | 7,765 | 1,565 | 529 | 302 |
215
- | `dialog` | 38,294 | 13,635 | 12,133 | 5,837 | 1,719 | 1,302 |
216
- | `divider` | 22,991 | 8,924 | 7,882 | 1,416 | 507 | 400 |
217
- | `donut-chart` | 89,212 | 31,129 | 27,564 | 14,641 | 4,489 | 3,590 |
218
- | `drawer` | 42,939 | 15,158 | 13,506 | 7,698 | 2,304 | 1,742 |
219
- | `drilldown` | 42,756 | 14,941 | 13,295 | 9,709 | 2,730 | 2,100 |
220
- | `empty` | 24,241 | 9,287 | 8,245 | 1,951 | 644 | 439 |
221
- | `file-input` | 57,757 | 20,019 | 17,807 | 13,093 | 4,149 | 3,315 |
222
- | `filter-input` | 97,846 | 32,818 | 29,132 | 21,629 | 6,183 | 4,933 |
223
- | `format-date` | 30,158 | 11,290 | 10,085 | 4,434 | 1,269 | 1,040 |
224
- | `graph` | 74,369 | 24,503 | 21,694 | 21,877 | 6,464 | 5,154 |
225
- | `heatmap` | 98,128 | 33,502 | 29,631 | 18,944 | 5,586 | 4,404 |
226
- | `icon` | 82,157 | 28,049 | 23,964 | 58,304 | 19,611 | 15,897 |
227
- | `icon-button` | 35,305 | 12,619 | 11,227 | 5,034 | 1,480 | 1,208 |
228
- | `image` | 25,504 | 9,479 | 8,405 | 3,823 | 1,151 | 945 |
229
- | `input` | 46,361 | 15,975 | 14,074 | 7,352 | 2,434 | 1,809 |
230
- | `kbd` | 27,511 | 10,569 | 9,338 | 3,516 | 1,119 | 901 |
231
- | `legend` | 35,184 | 12,934 | 11,492 | 2,957 | 993 | 759 |
232
- | `lightbox` | 55,724 | 18,816 | 16,719 | 16,730 | 4,681 | 3,522 |
233
- | `line-chart` | 91,335 | 31,880 | 28,245 | 14,762 | 4,405 | 3,591 |
234
- | `list` | 61,803 | 21,292 | 18,983 | 15,241 | 4,431 | 3,429 |
235
- | `listbox` | 76,711 | 25,427 | 22,459 | 15,564 | 4,618 | 3,475 |
236
- | `loader` | 26,379 | 10,041 | 8,930 | 2,775 | 948 | 654 |
237
- | `map` | 78,565 | 24,393 | 21,306 | 37,026 | 10,131 | 7,995 |
238
- | `megamenu` | 60,027 | 21,697 | 19,186 | 8,596 | 2,361 | 1,732 |
239
- | `menu` | 97,473 | 32,553 | 28,731 | 30,180 | 7,973 | 6,406 |
240
- | `meter` | 31,721 | 12,025 | 10,728 | 4,894 | 1,438 | 1,260 |
241
- | `navigation` | 33,088 | 12,436 | 11,036 | 3,366 | 1,150 | 954 |
242
- | `notifications` | 58,346 | 19,881 | 17,728 | 18,207 | 5,059 | 3,947 |
243
- | `number-input` | 56,271 | 18,842 | 16,797 | 13,523 | 3,633 | 2,708 |
244
- | `object-inspector` | 113,929 | 38,373 | 33,731 | 35,493 | 10,287 | 8,146 |
245
- | `option` | 26,477 | 9,763 | 8,667 | 4,524 | 1,192 | 940 |
246
- | `outline` | 33,612 | 12,597 | 11,180 | 7,856 | 2,581 | 2,088 |
247
- | `pagination` | 136,258 | 43,650 | 38,001 | 45,378 | 11,902 | 9,398 |
248
- | `pin-input` | 47,068 | 16,413 | 14,641 | 6,736 | 2,230 | 1,693 |
249
- | `popover` | 63,853 | 22,981 | 20,338 | 6,374 | 1,856 | 1,351 |
250
- | `progress` | 28,084 | 10,728 | 9,551 | 2,970 | 919 | 789 |
251
- | `qr-code` | 42,719 | 16,647 | 14,841 | 17,004 | 6,296 | 5,377 |
252
- | `quote` | 22,516 | 8,884 | 7,829 | 1,211 | 531 | 405 |
253
- | `radio` | 42,561 | 14,464 | 12,873 | 3,817 | 1,204 | 851 |
254
- | `rating` | 50,257 | 17,291 | 15,429 | 8,028 | 2,436 | 1,906 |
255
- | `scatter-chart` | 91,226 | 31,675 | 28,009 | 16,126 | 4,820 | 3,949 |
256
- | `scroll-area` | 30,430 | 11,078 | 9,813 | 8,499 | 2,593 | 2,089 |
257
- | `select` | 115,289 | 38,175 | 33,407 | 26,033 | 7,161 | 5,483 |
258
- | `skeleton` | 22,328 | 8,643 | 7,668 | 991 | 402 | 266 |
259
- | `skip-link` | 23,871 | 9,338 | 8,265 | 1,225 | 493 | 361 |
260
- | `slider` | 52,873 | 17,827 | 15,916 | 13,159 | 3,787 | 3,004 |
261
- | `sparkline` | 47,984 | 17,500 | 15,637 | 5,980 | 2,116 | 1,585 |
262
- | `spatial-heatmap` | 109,081 | 37,164 | 32,781 | 27,225 | 8,015 | 6,482 |
263
- | `spatial-scatter-chart` | 94,415 | 33,051 | 29,102 | 16,258 | 5,255 | 4,252 |
264
- | `spatial-surface-chart` | 96,111 | 33,772 | 29,752 | 17,890 | 5,910 | 4,832 |
265
- | `speed-dial` | 68,751 | 24,717 | 21,949 | 10,915 | 2,961 | 2,411 |
266
- | `splitter` | 43,751 | 15,169 | 13,536 | 14,396 | 3,855 | 3,139 |
267
- | `stat` | 25,255 | 9,674 | 8,601 | 2,303 | 765 | 559 |
268
- | `steps` | 53,623 | 18,636 | 16,600 | 13,602 | 3,849 | 3,027 |
269
- | `switch` | 39,233 | 13,495 | 12,037 | 1,679 | 615 | 474 |
270
- | `table` | 118,358 | 37,062 | 32,238 | 45,147 | 12,474 | 9,919 |
271
- | `tabs` | 46,310 | 15,908 | 14,138 | 10,491 | 2,883 | 2,252 |
272
- | `tag` | 42,676 | 15,621 | 13,972 | 8,454 | 2,531 | 1,931 |
273
- | `textarea` | 43,852 | 14,941 | 13,326 | 5,402 | 1,596 | 1,240 |
274
- | `time-input` | 169,269 | 52,675 | 45,763 | 48,510 | 12,450 | 9,857 |
275
- | `time-picker` | 99,603 | 31,518 | 27,788 | 33,933 | 9,200 | 7,222 |
276
- | `timeline` | 31,286 | 11,863 | 10,576 | 4,061 | 1,216 | 912 |
277
- | `toast` | 50,871 | 17,940 | 16,019 | 12,123 | 3,519 | 2,914 |
278
- | `toggle` | 45,577 | 15,271 | 13,575 | 6,007 | 1,808 | 1,331 |
279
- | `toolbar` | 31,047 | 11,573 | 10,294 | 5,158 | 1,661 | 1,302 |
280
- | `tooltip` | 58,616 | 21,090 | 18,709 | 8,433 | 2,352 | 1,956 |
281
- | `tour` | 83,717 | 28,762 | 25,413 | 19,814 | 5,443 | 4,255 |
282
- | `tree` | 67,586 | 22,717 | 20,231 | 17,198 | 4,962 | 3,902 |
283
- | `trend` | 29,717 | 11,568 | 10,337 | 3,486 | 1,116 | 926 |
284
- | `video` | 141,208 | 44,138 | 38,535 | 66,218 | 16,803 | 13,737 |
285
- | `video-playlist` | 127,686 | 41,301 | 36,388 | 42,774 | 11,219 | 9,185 |
286
- | `virtual-list` | 63,451 | 21,631 | 19,310 | 23,305 | 7,160 | 5,748 |
186
+ | `accordion` | 31,879 | 11,804 | 10,470 | 5,330 | 1,572 | 1,249 |
187
+ | `announcement` | 36,692 | 13,312 | 11,862 | 4,681 | 1,394 | 1,093 |
188
+ | `app-header` | 32,289 | 11,898 | 10,588 | 5,870 | 1,775 | 1,313 |
189
+ | `area-chart` | 90,301 | 31,727 | 28,072 | 14,060 | 4,347 | 3,454 |
190
+ | `avatar` | 30,463 | 11,596 | 10,369 | 3,957 | 1,200 | 976 |
191
+ | `badge` | 27,088 | 10,568 | 9,409 | 2,944 | 911 | 740 |
192
+ | `bar-chart` | 94,416 | 32,821 | 29,048 | 18,023 | 5,407 | 4,438 |
193
+ | `blockquote` | 24,107 | 9,421 | 8,336 | 2,401 | 903 | 797 |
194
+ | `breadcrumbs` | 36,279 | 13,907 | 12,385 | 7,361 | 2,402 | 1,965 |
195
+ | `button` | 35,194 | 12,591 | 11,200 | 4,926 | 1,455 | 1,092 |
196
+ | `button-group` | 27,640 | 10,382 | 9,203 | 4,929 | 1,517 | 1,201 |
197
+ | `callout` | 35,256 | 13,593 | 12,073 | 2,884 | 985 | 806 |
198
+ | `canvas` | 108,483 | 34,751 | 30,389 | 68,925 | 20,947 | 17,504 |
199
+ | `card` | 23,824 | 9,093 | 8,080 | 2,090 | 640 | 429 |
200
+ | `carousel` | 42,748 | 15,233 | 13,610 | 15,006 | 4,160 | 3,254 |
201
+ | `chat` | 79,390 | 26,446 | 23,403 | 27,457 | 8,045 | 6,399 |
202
+ | `checkbox` | 40,374 | 13,681 | 12,224 | 3,107 | 948 | 679 |
203
+ | `checkbox-group` | 47,602 | 15,599 | 13,905 | 8,324 | 2,378 | 1,729 |
204
+ | `code` | 20,301 | 8,016 | 7,129 | 138 | 79 | 134 |
205
+ | `code-block` | 102,738 | 34,889 | 30,818 | 36,847 | 10,721 | 8,707 |
206
+ | `color-input` | 141,792 | 45,091 | 39,385 | 55,137 | 14,277 | 11,609 |
207
+ | `color-picker` | 103,415 | 32,966 | 28,916 | 47,255 | 12,677 | 10,248 |
208
+ | `combobox` | 132,023 | 41,951 | 36,925 | 35,792 | 9,090 | 7,047 |
209
+ | `command` | 99,560 | 31,521 | 27,757 | 30,062 | 8,097 | 6,439 |
210
+ | `copy-button` | 80,548 | 27,649 | 24,493 | 18,340 | 4,951 | 3,974 |
211
+ | `data-table` | 199,900 | 61,426 | 52,548 | 89,489 | 23,842 | 19,047 |
212
+ | `date-input` | 141,223 | 44,512 | 39,156 | 38,231 | 9,442 | 7,497 |
213
+ | `date-picker` | 61,360 | 20,935 | 18,772 | 20,346 | 5,589 | 4,468 |
214
+ | `description-list` | 22,900 | 8,765 | 7,765 | 1,565 | 517 | 372 |
215
+ | `dialog` | 38,294 | 13,635 | 12,133 | 5,837 | 1,716 | 1,343 |
216
+ | `divider` | 22,991 | 8,924 | 7,882 | 1,415 | 522 | 406 |
217
+ | `donut-chart` | 89,212 | 31,129 | 27,561 | 14,642 | 4,496 | 3,603 |
218
+ | `drawer` | 42,939 | 15,158 | 13,506 | 7,699 | 2,306 | 1,784 |
219
+ | `drilldown` | 42,756 | 14,941 | 13,295 | 9,709 | 2,719 | 2,100 |
220
+ | `empty` | 24,241 | 9,287 | 8,243 | 1,951 | 635 | 545 |
221
+ | `file-input` | 57,757 | 20,019 | 17,838 | 13,094 | 4,117 | 3,236 |
222
+ | `filter-input` | 97,846 | 32,819 | 29,116 | 21,631 | 6,175 | 4,862 |
223
+ | `format-date` | 30,158 | 11,290 | 10,085 | 4,435 | 1,268 | 1,055 |
224
+ | `graph` | 74,369 | 24,503 | 21,668 | 21,879 | 6,449 | 5,188 |
225
+ | `heatmap` | 98,128 | 33,502 | 29,614 | 18,942 | 5,585 | 4,376 |
226
+ | `icon` | 82,157 | 28,049 | 23,964 | 58,303 | 19,562 | 16,116 |
227
+ | `icon-button` | 35,305 | 12,619 | 11,226 | 5,035 | 1,481 | 1,125 |
228
+ | `image` | 25,504 | 9,479 | 8,404 | 3,823 | 1,158 | 1,035 |
229
+ | `input` | 46,361 | 15,972 | 14,088 | 7,351 | 2,397 | 1,860 |
230
+ | `kbd` | 27,511 | 10,569 | 9,336 | 3,518 | 1,126 | 922 |
231
+ | `legend` | 35,184 | 12,935 | 11,492 | 2,956 | 1,006 | 912 |
232
+ | `lightbox` | 55,724 | 18,818 | 16,720 | 16,731 | 4,655 | 3,606 |
233
+ | `line-chart` | 91,335 | 31,880 | 28,266 | 14,763 | 4,402 | 3,528 |
234
+ | `list` | 61,803 | 21,292 | 19,004 | 15,242 | 4,415 | 3,498 |
235
+ | `listbox` | 76,711 | 25,427 | 22,459 | 15,565 | 4,602 | 3,491 |
236
+ | `loader` | 26,379 | 10,041 | 8,940 | 2,774 | 951 | 667 |
237
+ | `map` | 78,565 | 24,394 | 21,323 | 37,032 | 10,098 | 7,980 |
238
+ | `megamenu` | 60,027 | 21,698 | 19,201 | 8,595 | 2,375 | 1,768 |
239
+ | `menu` | 97,473 | 32,553 | 28,753 | 30,182 | 7,943 | 6,424 |
240
+ | `meter` | 31,721 | 12,025 | 10,728 | 4,893 | 1,450 | 1,349 |
241
+ | `navigation` | 33,088 | 12,436 | 11,040 | 3,365 | 1,146 | 889 |
242
+ | `notifications` | 58,346 | 19,881 | 17,733 | 18,209 | 5,058 | 3,998 |
243
+ | `number-input` | 56,271 | 18,841 | 16,797 | 13,525 | 3,612 | 2,704 |
244
+ | `object-inspector` | 113,929 | 38,373 | 33,750 | 35,495 | 10,278 | 8,291 |
245
+ | `option` | 26,477 | 9,763 | 8,666 | 4,524 | 1,210 | 860 |
246
+ | `outline` | 33,612 | 12,597 | 11,181 | 7,858 | 2,573 | 2,017 |
247
+ | `pagination` | 136,258 | 43,650 | 37,946 | 45,382 | 11,880 | 9,485 |
248
+ | `pin-input` | 47,068 | 16,412 | 14,641 | 6,737 | 2,231 | 1,699 |
249
+ | `popover` | 63,853 | 22,981 | 20,302 | 6,374 | 1,849 | 1,360 |
250
+ | `progress` | 28,084 | 10,728 | 9,551 | 2,969 | 921 | 771 |
251
+ | `qr-code` | 42,719 | 16,647 | 14,833 | 17,005 | 6,286 | 5,336 |
252
+ | `quote` | 22,516 | 8,884 | 7,828 | 1,210 | 523 | 395 |
253
+ | `radio` | 42,561 | 14,464 | 12,889 | 3,817 | 1,196 | 795 |
254
+ | `rating` | 50,257 | 17,291 | 15,437 | 8,028 | 2,436 | 1,860 |
255
+ | `scatter-chart` | 91,226 | 31,675 | 27,947 | 16,128 | 4,818 | 3,873 |
256
+ | `scroll-area` | 30,430 | 11,078 | 9,814 | 8,499 | 2,584 | 2,082 |
257
+ | `select` | 115,289 | 38,175 | 33,460 | 26,034 | 7,129 | 5,454 |
258
+ | `skeleton` | 22,328 | 8,643 | 7,666 | 991 | 403 | 210 |
259
+ | `skip-link` | 23,871 | 9,337 | 8,265 | 1,224 | 496 | 373 |
260
+ | `slider` | 52,873 | 17,827 | 15,916 | 13,158 | 3,777 | 3,035 |
261
+ | `sparkline` | 47,984 | 17,500 | 15,650 | 5,982 | 2,127 | 1,695 |
262
+ | `spatial-heatmap` | 113,453 | 38,788 | 34,042 | 31,595 | 9,606 | 7,882 |
263
+ | `spatial-scatter-chart` | 98,077 | 34,517 | 30,445 | 18,240 | 5,991 | 4,772 |
264
+ | `spatial-surface-chart` | 99,770 | 35,240 | 31,083 | 19,869 | 6,683 | 5,380 |
265
+ | `speed-dial` | 68,751 | 24,718 | 21,871 | 10,914 | 2,935 | 2,288 |
266
+ | `splitter` | 43,751 | 15,169 | 13,535 | 14,395 | 3,866 | 3,149 |
267
+ | `stat` | 25,255 | 9,675 | 8,602 | 2,302 | 760 | 622 |
268
+ | `steps` | 53,623 | 18,636 | 16,600 | 13,604 | 3,825 | 3,049 |
269
+ | `switch` | 39,233 | 13,496 | 12,037 | 1,679 | 629 | 411 |
270
+ | `table` | 118,358 | 37,062 | 32,221 | 45,150 | 12,431 | 10,045 |
271
+ | `tabs` | 46,310 | 15,908 | 14,142 | 10,493 | 2,872 | 2,326 |
272
+ | `tag` | 42,676 | 15,621 | 13,972 | 8,456 | 2,533 | 1,923 |
273
+ | `textarea` | 43,852 | 14,941 | 13,326 | 5,403 | 1,609 | 1,211 |
274
+ | `time-input` | 169,269 | 52,676 | 45,793 | 48,513 | 12,431 | 9,898 |
275
+ | `time-picker` | 99,603 | 31,518 | 27,761 | 33,934 | 9,194 | 7,300 |
276
+ | `timeline` | 31,286 | 11,863 | 10,611 | 4,062 | 1,201 | 906 |
277
+ | `toast` | 50,871 | 17,940 | 16,003 | 12,125 | 3,530 | 2,733 |
278
+ | `toggle` | 45,577 | 15,271 | 13,604 | 6,009 | 1,805 | 1,346 |
279
+ | `toolbar` | 31,047 | 11,572 | 10,294 | 5,159 | 1,672 | 1,280 |
280
+ | `tooltip` | 58,616 | 21,090 | 18,697 | 8,435 | 2,352 | 1,866 |
281
+ | `tour` | 83,717 | 28,762 | 25,387 | 19,810 | 5,445 | 4,298 |
282
+ | `tree` | 67,586 | 22,717 | 20,257 | 17,200 | 4,960 | 3,968 |
283
+ | `trend` | 29,717 | 11,568 | 10,337 | 3,488 | 1,120 | 885 |
284
+ | `video` | 141,208 | 44,138 | 38,526 | 66,219 | 16,730 | 13,756 |
285
+ | `video-playlist` | 127,686 | 41,301 | 36,334 | 42,779 | 11,205 | 9,146 |
286
+ | `virtual-list` | 63,451 | 21,631 | 19,226 | 23,304 | 7,149 | 5,777 |
287
287
 
288
288
  ### Styled tier
289
289
 
@@ -291,114 +291,114 @@ The headless tier plus presentation. `bun add @fusion.dev/helix` installs this t
291
291
 
292
292
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
293
293
  |---|---|---|---|---|---|---|
294
- | `accordion` | 35,311 | 12,653 | 11,212 | 8,746 | 2,446 | 2,060 |
295
- | `announcement` | 41,307 | 14,365 | 12,836 | 9,278 | 2,485 | 1,972 |
296
- | `app-header` | 37,449 | 13,103 | 11,680 | 11,016 | 2,982 | 2,438 |
297
- | `area-chart` | 98,393 | 33,576 | 29,680 | 22,130 | 6,236 | 5,083 |
298
- | `aura` | 56,085 | 19,320 | 17,090 | 29,774 | 9,282 | 7,803 |
299
- | `avatar` | 33,464 | 12,351 | 11,066 | 6,945 | 1,982 | 1,637 |
300
- | `badge` | 32,595 | 11,821 | 10,514 | 8,438 | 2,162 | 1,752 |
301
- | `bar-chart` | 108,944 | 35,726 | 31,539 | 32,531 | 8,360 | 6,866 |
302
- | `blockquote` | 26,332 | 9,968 | 8,824 | 4,612 | 1,422 | 1,221 |
303
- | `breadcrumbs` | 43,220 | 15,115 | 13,532 | 14,285 | 3,663 | 2,991 |
304
- | `button` | 41,612 | 14,008 | 12,455 | 11,324 | 2,890 | 2,340 |
305
- | `button-group` | 31,138 | 11,066 | 9,841 | 8,408 | 2,193 | 1,717 |
306
- | `callout` | 39,049 | 14,537 | 12,904 | 6,659 | 1,939 | 1,538 |
307
- | `canvas` | 129,523 | 38,715 | 33,849 | 89,608 | 24,792 | 20,896 |
308
- | `card` | 27,725 | 10,100 | 8,963 | 5,976 | 1,640 | 1,412 |
309
- | `carousel` | 53,234 | 17,022 | 15,227 | 25,476 | 6,005 | 4,908 |
310
- | `chat` | 94,674 | 29,166 | 25,837 | 42,729 | 10,823 | 8,822 |
311
- | `checkbox` | 46,865 | 15,190 | 13,514 | 9,580 | 2,480 | 1,943 |
312
- | `checkbox-group` | 54,826 | 17,244 | 15,360 | 15,538 | 4,019 | 3,109 |
313
- | `code` | 21,154 | 8,333 | 7,394 | 976 | 404 | 368 |
314
- | `code-block` | 127,213 | 38,714 | 34,147 | 61,301 | 14,729 | 12,023 |
315
- | `color-input` | 184,176 | 51,349 | 44,945 | 97,505 | 20,459 | 17,136 |
316
- | `color-picker` | 140,348 | 38,509 | 33,818 | 84,178 | 18,271 | 15,178 |
317
- | `combobox` | 147,503 | 44,927 | 39,538 | 51,253 | 12,079 | 9,675 |
318
- | `command` | 110,838 | 33,878 | 29,811 | 41,332 | 10,512 | 8,549 |
319
- | `copy-button` | 92,577 | 29,825 | 26,419 | 30,354 | 7,206 | 5,862 |
320
- | `data-table` | 230,715 | 66,818 | 57,241 | 120,284 | 29,334 | 23,795 |
321
- | `date-input` | 162,349 | 48,216 | 42,470 | 59,337 | 13,202 | 10,831 |
322
- | `date-picker` | 69,281 | 22,362 | 20,076 | 28,248 | 7,048 | 5,764 |
323
- | `description-list` | 25,855 | 9,517 | 8,467 | 4,508 | 1,253 | 1,082 |
324
- | `dialog` | 43,407 | 14,900 | 13,271 | 10,933 | 3,027 | 2,496 |
325
- | `divider` | 25,291 | 9,546 | 8,434 | 3,699 | 1,140 | 956 |
326
- | `donut-chart` | 99,170 | 33,263 | 29,399 | 24,576 | 6,688 | 5,395 |
327
- | `drawer` | 48,772 | 16,542 | 14,744 | 13,512 | 3,701 | 3,104 |
328
- | `drilldown` | 48,438 | 16,236 | 14,452 | 15,377 | 4,023 | 3,285 |
329
- | `empty` | 25,550 | 9,762 | 8,654 | 3,242 | 1,097 | 811 |
330
- | `file-input` | 69,285 | 22,419 | 19,952 | 24,612 | 6,538 | 5,331 |
331
- | `filter-input` | 108,688 | 34,990 | 30,983 | 32,465 | 8,398 | 6,864 |
332
- | `flex` | 25,740 | 9,194 | 8,150 | 4,763 | 1,041 | 911 |
333
- | `format-date` | 30,414 | 11,403 | 10,191 | 4,672 | 1,401 | 1,173 |
334
- | `graph` | 89,037 | 27,080 | 23,947 | 36,527 | 9,167 | 7,434 |
335
- | `grid` | 27,002 | 9,846 | 8,729 | 5,638 | 1,469 | 1,276 |
336
- | `heatmap` | 105,486 | 35,190 | 31,043 | 26,281 | 7,256 | 5,856 |
337
- | `icon` | 83,995 | 28,567 | 24,524 | 60,129 | 20,147 | 16,458 |
338
- | `icon-button` | 43,040 | 13,980 | 12,450 | 12,753 | 2,881 | 2,232 |
339
- | `image` | 26,892 | 9,946 | 8,806 | 5,193 | 1,595 | 1,359 |
340
- | `input` | 50,619 | 17,064 | 15,034 | 11,593 | 3,541 | 2,695 |
341
- | `kbd` | 29,504 | 11,108 | 9,827 | 5,494 | 1,668 | 1,277 |
342
- | `legend` | 40,423 | 14,214 | 12,646 | 8,067 | 2,286 | 1,752 |
343
- | `lightbox` | 62,016 | 20,155 | 17,955 | 23,006 | 5,985 | 4,597 |
344
- | `line-chart` | 102,454 | 34,257 | 30,365 | 25,863 | 6,820 | 5,495 |
345
- | `list` | 68,150 | 22,814 | 20,368 | 21,568 | 5,960 | 4,810 |
346
- | `listbox` | 81,154 | 26,542 | 23,470 | 19,993 | 5,717 | 4,361 |
347
- | `loader` | 29,263 | 10,815 | 9,652 | 5,642 | 1,704 | 1,404 |
348
- | `map` | 111,513 | 29,574 | 25,953 | 69,963 | 15,530 | 12,540 |
349
- | `megamenu` | 64,996 | 22,864 | 20,254 | 13,546 | 3,538 | 2,702 |
350
- | `menu` | 108,403 | 34,710 | 30,647 | 41,097 | 10,151 | 8,248 |
351
- | `meter` | 37,896 | 13,377 | 11,942 | 11,050 | 2,799 | 2,381 |
352
- | `navigation` | 36,814 | 13,269 | 11,770 | 7,077 | 2,016 | 1,595 |
353
- | `notifications` | 71,839 | 22,457 | 20,046 | 31,691 | 7,660 | 6,292 |
354
- | `number-input` | 61,253 | 20,026 | 17,829 | 18,490 | 4,814 | 3,860 |
355
- | `object-inspector` | 130,338 | 41,205 | 36,256 | 51,881 | 13,188 | 10,707 |
356
- | `option` | 29,672 | 10,762 | 9,548 | 7,711 | 2,201 | 1,779 |
357
- | `orb` | 35,265 | 13,488 | 12,001 | 9,732 | 3,645 | 3,055 |
358
- | `outline` | 37,846 | 13,458 | 11,936 | 12,073 | 3,441 | 2,856 |
359
- | `pagination` | 153,264 | 46,929 | 40,863 | 62,363 | 15,233 | 12,251 |
360
- | `pin-input` | 50,409 | 17,316 | 15,431 | 10,058 | 3,137 | 2,329 |
361
- | `popover` | 67,005 | 23,748 | 20,996 | 9,508 | 2,647 | 2,109 |
362
- | `progress` | 35,232 | 12,380 | 11,035 | 10,101 | 2,588 | 2,315 |
363
- | `qr-code` | 44,321 | 17,121 | 15,279 | 18,588 | 6,784 | 5,745 |
364
- | `quote` | 23,074 | 9,079 | 7,998 | 1,752 | 704 | 648 |
365
- | `radio` | 50,349 | 15,975 | 14,204 | 11,592 | 2,742 | 2,183 |
366
- | `rating` | 54,190 | 18,519 | 16,488 | 11,945 | 3,641 | 2,938 |
367
- | `sandbox` | 104,428 | 31,486 | 27,625 | 72,144 | 19,140 | 16,207 |
368
- | `scatter-chart` | 100,317 | 33,784 | 29,939 | 25,196 | 6,955 | 5,758 |
369
- | `scroll-area` | 35,437 | 12,026 | 10,702 | 13,489 | 3,575 | 2,930 |
370
- | `select` | 124,418 | 40,070 | 35,132 | 35,145 | 9,071 | 7,140 |
371
- | `skeleton` | 26,090 | 9,664 | 8,587 | 4,738 | 1,396 | 1,182 |
372
- | `skip-link` | 25,441 | 9,851 | 8,691 | 2,780 | 970 | 843 |
373
- | `slider` | 67,842 | 20,138 | 18,001 | 28,108 | 6,159 | 4,980 |
374
- | `sparkline` | 53,442 | 18,851 | 16,864 | 11,420 | 3,478 | 2,863 |
375
- | `spatial-heatmap` | 118,016 | 39,202 | 34,545 | 36,139 | 10,081 | 8,262 |
376
- | `spatial-scatter-chart` | 101,873 | 34,752 | 30,607 | 23,695 | 6,991 | 5,660 |
377
- | `spatial-surface-chart` | 103,007 | 35,444 | 31,284 | 24,765 | 7,587 | 6,162 |
378
- | `speed-dial` | 75,797 | 26,105 | 23,165 | 17,945 | 4,385 | 3,465 |
379
- | `splitter` | 49,804 | 16,208 | 14,471 | 20,430 | 4,922 | 4,076 |
380
- | `stat` | 28,117 | 10,371 | 9,280 | 5,157 | 1,469 | 1,201 |
381
- | `steps` | 67,449 | 21,378 | 19,083 | 27,416 | 6,651 | 5,427 |
382
- | `strands` | 62,138 | 23,151 | 20,397 | 38,012 | 13,741 | 11,850 |
383
- | `switch` | 43,562 | 14,639 | 13,019 | 5,998 | 1,762 | 1,477 |
384
- | `table` | 135,900 | 40,155 | 34,967 | 62,688 | 15,591 | 12,696 |
385
- | `tabs` | 55,263 | 17,752 | 15,850 | 19,436 | 4,760 | 3,803 |
386
- | `tag` | 47,247 | 16,757 | 14,961 | 13,013 | 3,628 | 2,912 |
387
- | `text` | 28,756 | 9,943 | 8,755 | 7,395 | 1,497 | 1,217 |
388
- | `textarea` | 47,785 | 15,949 | 14,234 | 9,318 | 2,650 | 2,138 |
389
- | `time-input` | 193,597 | 56,836 | 49,555 | 72,825 | 16,683 | 13,638 |
390
- | `time-picker` | 111,928 | 33,946 | 29,855 | 46,250 | 11,628 | 9,363 |
391
- | `timeline` | 38,179 | 13,327 | 11,920 | 10,946 | 2,723 | 2,242 |
392
- | `toast` | 58,767 | 19,783 | 17,679 | 20,005 | 5,383 | 4,363 |
393
- | `toggle` | 50,439 | 16,510 | 14,664 | 10,854 | 3,073 | 2,558 |
394
- | `toolbar` | 33,726 | 12,066 | 10,725 | 7,822 | 2,162 | 1,693 |
395
- | `tooltip` | 61,420 | 21,834 | 19,346 | 11,219 | 3,088 | 2,508 |
396
- | `tour` | 93,708 | 30,741 | 27,201 | 29,784 | 7,467 | 6,010 |
397
- | `tree` | 76,275 | 24,651 | 21,944 | 25,873 | 6,911 | 5,538 |
398
- | `trend` | 31,231 | 12,049 | 10,723 | 4,981 | 1,588 | 1,260 |
399
- | `video` | 161,715 | 47,867 | 41,782 | 86,709 | 20,350 | 17,119 |
400
- | `video-playlist` | 143,639 | 44,279 | 38,894 | 58,710 | 14,190 | 11,757 |
401
- | `virtual-list` | 65,445 | 22,138 | 19,709 | 25,282 | 7,667 | 6,257 |
294
+ | `accordion` | 35,311 | 12,653 | 11,212 | 8,747 | 2,421 | 2,026 |
295
+ | `announcement` | 41,307 | 14,365 | 12,835 | 9,277 | 2,478 | 1,913 |
296
+ | `app-header` | 37,449 | 13,103 | 11,680 | 11,015 | 2,976 | 2,327 |
297
+ | `area-chart` | 98,393 | 33,576 | 29,669 | 22,133 | 6,229 | 4,945 |
298
+ | `aura` | 56,085 | 19,320 | 17,114 | 29,775 | 9,287 | 7,862 |
299
+ | `avatar` | 33,464 | 12,351 | 11,051 | 6,945 | 1,968 | 1,644 |
300
+ | `badge` | 32,595 | 11,821 | 10,551 | 8,440 | 2,168 | 1,814 |
301
+ | `bar-chart` | 108,944 | 35,726 | 31,541 | 32,532 | 8,362 | 6,821 |
302
+ | `blockquote` | 26,332 | 9,968 | 8,824 | 4,613 | 1,445 | 1,162 |
303
+ | `breadcrumbs` | 43,220 | 15,115 | 13,501 | 14,286 | 3,647 | 3,118 |
304
+ | `button` | 41,612 | 14,008 | 12,455 | 11,325 | 2,890 | 2,349 |
305
+ | `button-group` | 31,138 | 11,066 | 9,804 | 8,410 | 2,209 | 1,831 |
306
+ | `callout` | 39,049 | 14,537 | 12,921 | 6,659 | 1,927 | 1,556 |
307
+ | `canvas` | 129,523 | 38,715 | 33,822 | 89,609 | 24,828 | 20,944 |
308
+ | `card` | 27,725 | 10,099 | 8,963 | 5,976 | 1,632 | 1,261 |
309
+ | `carousel` | 53,234 | 17,022 | 15,226 | 25,477 | 5,978 | 4,934 |
310
+ | `chat` | 94,674 | 29,166 | 25,825 | 42,734 | 10,809 | 8,804 |
311
+ | `checkbox` | 46,865 | 15,190 | 13,541 | 9,580 | 2,490 | 2,015 |
312
+ | `checkbox-group` | 54,826 | 17,244 | 15,360 | 15,537 | 4,010 | 3,123 |
313
+ | `code` | 21,154 | 8,333 | 7,394 | 976 | 401 | 406 |
314
+ | `code-block` | 127,213 | 38,715 | 34,208 | 61,302 | 14,710 | 12,077 |
315
+ | `color-input` | 184,176 | 51,349 | 44,885 | 97,507 | 20,443 | 17,133 |
316
+ | `color-picker` | 140,348 | 38,509 | 33,802 | 84,179 | 18,166 | 15,164 |
317
+ | `combobox` | 147,503 | 44,927 | 39,557 | 51,256 | 12,039 | 9,752 |
318
+ | `command` | 110,838 | 33,879 | 29,816 | 41,333 | 10,476 | 8,498 |
319
+ | `copy-button` | 92,577 | 29,826 | 26,430 | 30,353 | 7,185 | 5,894 |
320
+ | `data-table` | 230,715 | 66,818 | 57,239 | 120,291 | 29,344 | 23,806 |
321
+ | `date-input` | 162,349 | 48,216 | 42,425 | 59,342 | 13,178 | 10,948 |
322
+ | `date-picker` | 69,281 | 22,362 | 20,076 | 28,249 | 7,035 | 5,709 |
323
+ | `description-list` | 25,855 | 9,517 | 8,467 | 4,508 | 1,254 | 971 |
324
+ | `dialog` | 43,407 | 14,900 | 13,271 | 10,933 | 2,993 | 2,476 |
325
+ | `divider` | 25,291 | 9,547 | 8,433 | 3,698 | 1,154 | 913 |
326
+ | `donut-chart` | 99,170 | 33,263 | 29,365 | 24,577 | 6,675 | 5,522 |
327
+ | `drawer` | 48,772 | 16,542 | 14,744 | 13,513 | 3,692 | 3,020 |
328
+ | `drilldown` | 48,438 | 16,240 | 14,452 | 15,379 | 4,017 | 3,145 |
329
+ | `empty` | 25,550 | 9,762 | 8,654 | 3,242 | 1,092 | 983 |
330
+ | `file-input` | 69,285 | 22,420 | 19,924 | 24,613 | 6,514 | 5,313 |
331
+ | `filter-input` | 108,688 | 34,991 | 31,084 | 32,466 | 8,398 | 6,815 |
332
+ | `flex` | 25,740 | 9,194 | 8,150 | 4,762 | 1,034 | 845 |
333
+ | `format-date` | 30,414 | 11,403 | 10,189 | 4,673 | 1,393 | 1,173 |
334
+ | `graph` | 89,037 | 27,080 | 23,928 | 36,529 | 9,140 | 7,515 |
335
+ | `grid` | 27,002 | 9,846 | 8,726 | 5,639 | 1,457 | 1,267 |
336
+ | `heatmap` | 105,486 | 35,190 | 31,040 | 26,279 | 7,237 | 5,870 |
337
+ | `icon` | 83,995 | 28,566 | 24,460 | 60,128 | 20,114 | 16,437 |
338
+ | `icon-button` | 43,040 | 13,981 | 12,450 | 12,754 | 2,864 | 2,235 |
339
+ | `image` | 26,892 | 9,946 | 8,813 | 5,193 | 1,610 | 1,364 |
340
+ | `input` | 50,619 | 17,063 | 15,061 | 11,594 | 3,496 | 2,602 |
341
+ | `kbd` | 29,504 | 11,109 | 9,826 | 5,496 | 1,659 | 1,328 |
342
+ | `legend` | 40,423 | 14,214 | 12,618 | 8,066 | 2,281 | 1,875 |
343
+ | `lightbox` | 62,016 | 20,155 | 17,959 | 23,007 | 5,965 | 4,667 |
344
+ | `line-chart` | 102,454 | 34,257 | 30,346 | 25,865 | 6,819 | 5,644 |
345
+ | `list` | 68,150 | 22,814 | 20,379 | 21,569 | 5,914 | 4,750 |
346
+ | `listbox` | 81,154 | 26,542 | 23,469 | 19,994 | 5,688 | 4,291 |
347
+ | `loader` | 29,263 | 10,815 | 9,648 | 5,641 | 1,699 | 1,539 |
348
+ | `map` | 111,513 | 29,575 | 25,972 | 69,971 | 15,441 | 12,743 |
349
+ | `megamenu` | 64,996 | 22,865 | 20,247 | 13,546 | 3,540 | 2,883 |
350
+ | `menu` | 108,403 | 34,710 | 30,603 | 41,096 | 10,137 | 8,275 |
351
+ | `meter` | 37,896 | 13,377 | 11,956 | 11,049 | 2,799 | 2,365 |
352
+ | `navigation` | 36,814 | 13,268 | 11,772 | 7,076 | 2,010 | 1,625 |
353
+ | `notifications` | 71,839 | 22,457 | 20,071 | 31,694 | 7,653 | 6,242 |
354
+ | `number-input` | 61,253 | 20,026 | 17,844 | 18,492 | 4,793 | 3,862 |
355
+ | `object-inspector` | 130,338 | 41,205 | 36,251 | 51,889 | 13,159 | 10,641 |
356
+ | `option` | 29,672 | 10,762 | 9,548 | 7,712 | 2,201 | 1,774 |
357
+ | `orb` | 35,265 | 13,488 | 12,000 | 9,730 | 3,660 | 3,109 |
358
+ | `outline` | 37,846 | 13,457 | 11,935 | 12,075 | 3,444 | 2,724 |
359
+ | `pagination` | 153,264 | 46,929 | 40,888 | 62,371 | 15,207 | 12,306 |
360
+ | `pin-input` | 50,409 | 17,316 | 15,431 | 10,059 | 3,133 | 2,498 |
361
+ | `popover` | 67,005 | 23,749 | 20,997 | 9,508 | 2,639 | 2,123 |
362
+ | `progress` | 35,232 | 12,380 | 11,066 | 10,100 | 2,593 | 2,192 |
363
+ | `qr-code` | 44,321 | 17,121 | 15,278 | 18,589 | 6,787 | 5,788 |
364
+ | `quote` | 23,074 | 9,079 | 8,008 | 1,751 | 718 | 575 |
365
+ | `radio` | 50,349 | 15,975 | 14,204 | 11,592 | 2,733 | 2,222 |
366
+ | `rating` | 54,190 | 18,516 | 16,487 | 11,945 | 3,653 | 2,863 |
367
+ | `sandbox` | 104,428 | 31,486 | 27,614 | 72,146 | 19,183 | 16,122 |
368
+ | `scatter-chart` | 100,317 | 33,784 | 29,875 | 25,198 | 6,980 | 5,616 |
369
+ | `scroll-area` | 35,437 | 12,025 | 10,713 | 13,489 | 3,555 | 2,777 |
370
+ | `select` | 124,418 | 40,070 | 35,145 | 35,148 | 9,050 | 7,093 |
371
+ | `skeleton` | 26,090 | 9,664 | 8,583 | 4,738 | 1,396 | 1,128 |
372
+ | `skip-link` | 25,441 | 9,851 | 8,691 | 2,779 | 967 | 728 |
373
+ | `slider` | 67,842 | 20,140 | 18,018 | 28,109 | 6,167 | 4,906 |
374
+ | `sparkline` | 53,442 | 18,851 | 16,823 | 11,422 | 3,470 | 2,780 |
375
+ | `spatial-heatmap` | 122,253 | 40,833 | 35,862 | 40,379 | 11,663 | 9,575 |
376
+ | `spatial-scatter-chart` | 105,573 | 36,234 | 31,878 | 25,715 | 7,727 | 6,195 |
377
+ | `spatial-surface-chart` | 106,704 | 36,932 | 32,554 | 26,782 | 8,346 | 6,804 |
378
+ | `speed-dial` | 75,797 | 26,105 | 23,216 | 17,946 | 4,387 | 3,414 |
379
+ | `splitter` | 49,804 | 16,208 | 14,481 | 20,431 | 4,916 | 3,951 |
380
+ | `stat` | 28,117 | 10,371 | 9,280 | 5,156 | 1,471 | 1,146 |
381
+ | `steps` | 67,449 | 21,378 | 19,083 | 27,419 | 6,623 | 5,371 |
382
+ | `strands` | 62,138 | 23,151 | 20,401 | 38,013 | 13,697 | 11,884 |
383
+ | `switch` | 43,562 | 14,637 | 13,009 | 5,998 | 1,759 | 1,379 |
384
+ | `table` | 135,900 | 40,155 | 34,968 | 62,694 | 15,563 | 12,650 |
385
+ | `tabs` | 55,263 | 17,752 | 15,848 | 19,437 | 4,743 | 3,772 |
386
+ | `tag` | 47,247 | 16,757 | 14,961 | 13,015 | 3,632 | 2,916 |
387
+ | `text` | 28,756 | 9,943 | 8,755 | 7,397 | 1,530 | 1,190 |
388
+ | `textarea` | 47,785 | 15,949 | 14,234 | 9,319 | 2,648 | 2,113 |
389
+ | `time-input` | 193,597 | 56,836 | 49,491 | 72,826 | 16,608 | 13,597 |
390
+ | `time-picker` | 111,928 | 33,946 | 29,862 | 46,255 | 11,612 | 9,381 |
391
+ | `timeline` | 38,179 | 13,327 | 11,920 | 10,948 | 2,703 | 2,251 |
392
+ | `toast` | 58,767 | 19,783 | 17,700 | 20,007 | 5,392 | 4,319 |
393
+ | `toggle` | 50,439 | 16,510 | 14,664 | 10,856 | 3,074 | 2,546 |
394
+ | `toolbar` | 33,726 | 12,065 | 10,723 | 7,823 | 2,165 | 1,714 |
395
+ | `tooltip` | 61,420 | 21,834 | 19,393 | 11,221 | 3,098 | 2,559 |
396
+ | `tour` | 93,708 | 30,741 | 27,233 | 29,782 | 7,473 | 6,038 |
397
+ | `tree` | 76,275 | 24,651 | 21,966 | 25,874 | 6,890 | 5,627 |
398
+ | `trend` | 31,231 | 12,049 | 10,723 | 4,983 | 1,581 | 1,231 |
399
+ | `video` | 161,715 | 47,867 | 41,758 | 86,708 | 20,440 | 17,124 |
400
+ | `video-playlist` | 143,639 | 44,279 | 38,981 | 58,711 | 14,179 | 11,683 |
401
+ | `virtual-list` | 65,445 | 22,138 | 19,717 | 25,281 | 7,663 | 6,183 |
402
402
 
403
403
  ## What an install adds to `node_modules`
404
404
 
@@ -410,12 +410,12 @@ stripped column shows the bytes we removed.
410
410
 
411
411
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
412
412
  |---|---|---|---|---|
413
- | `@fusion.dev/helix-core` | 2,593,631 | 567 | 743,574 | `@floating-ui/dom`, `@fusion.dev/helix-icons`, `tslib` |
414
- | `@fusion.dev/helix-headless` | 25,857,080 | 730 | 2,314,273 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `tslib`, `uqr` |
413
+ | `@fusion.dev/helix-core` | 2,603,668 | 569 | 751,479 | `@floating-ui/dom`, `@fusion.dev/helix-icons`, `tslib` |
414
+ | `@fusion.dev/helix-headless` | 25,880,966 | 730 | 2,329,616 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `tslib`, `uqr` |
415
415
  | `@fusion.dev/helix-icons` | 150,509 | 21 | 48,154 | `svgo` |
416
416
  | `@fusion.dev/helix-styles` | 121,243 | 6 | 0 | none |
417
417
  | `@fusion.dev/helix-theme` | 529,299 | 8 | 5,393 | none |
418
- | `@fusion.dev/helix` | 27,147,873 | 981 | 543,383 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles`, `tslib` |
418
+ | `@fusion.dev/helix` | 27,255,887 | 981 | 543,384 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles`, `tslib` |
419
419
 
420
420
  ## Not measured yet
421
421
 
package/content/spatial-charts.mdx CHANGED
@@ -116,17 +116,32 @@ Once three.js has drawn, the chart hides its SVG drawing.
116
116
  | | SVG | three.js |
117
117
  |---|---|---|
118
118
  | What it needs | Nothing more than the chart | `@fusion.dev/helix-plot`, three.js, and WebGL |
119
- | How the view moves | Shift with an arrow turns it a step | Drag to turn, the wheel or a pinch to zoom, and Shift with an arrow to turn a step |
119
+ | How the view moves | Drag to turn and tilt, and Shift with an arrow to turn a step | Drag to turn, the wheel or a pinch to zoom, and Shift with an arrow to turn a step |
120
120
  | Light | Shaded by which way each face turns, with no perspective | Lit from above, in perspective |
121
121
  | Without WebGL | Drawn | Not drawn, and the SVG drawing stays |
122
122
 
123
- Start with SVG. Connect three.js where a reader gains from turning the chart
124
- freely, or where the data is too large for SVG to draw smoothly.
123
+ Start with SVG. Connect three.js where a reader gains from zooming and from
124
+ perspective, or where the data is larger than SVG draws smoothly.
125
+
126
+ **The SVG drawing turns within a frame or two up to these sizes**, measured in
127
+ Chromium on an Apple silicon Mac:
128
+
129
+ | Chart | Turns within a frame or two | Measured above that |
130
+ |---|---|---|
131
+ | `Spatial Scatter Chart` | 2,000 points | 5,000 points: 67 ms a turn step |
132
+ | `Spatial Surface Chart` | 900 readings, a grid of 30 by 30 | 1,600 readings: 50 ms, and 3,600: 113 ms |
133
+ | `Spatial Heatmap` | 365 days | 730 days: 50 ms, and 1,825: 132 ms |
134
+
135
+ A slower machine reaches these sizes sooner. three.js draws each chart on the
136
+ graphics card.
125
137
 
126
138
  ## Read a chart with the pointer and the keys
127
139
 
128
140
  A pointer resting on a reading shows its row in the chart's tooltip, the same
129
- tooltip every Helix chart shows. A tap shows it until a tap lands elsewhere.
141
+ tooltip every Helix chart shows. A tap shows it until a tap lands elsewhere. A
142
+ drag turns and tilts the view, and a press that hardly moves is still a press.
143
+ On a touch screen, a drag across turns the view, and a drag up or down scrolls
144
+ the page.
130
145
 
131
146
  The plot takes focus, and the keys move the reading:
132
147
 
@@ -142,10 +157,19 @@ The plot takes focus, and the keys move the reading:
142
157
  `Spatial Heatmap` takes `Heatmap`'s keys, and Shift with an arrow turns its
143
158
  view, except under `selection-mode="multiple"`, where it selects a range.
144
159
 
145
- In three.js, a turn moves over a quarter of a second, and with reduced motion
146
- set it happens at once. The SVG drawing turns in one step. No spatial chart
160
+ In three.js, a step of Shift with an arrow moves over a quarter of a second,
161
+ and with reduced motion set it happens at once. In the SVG drawing, a step
162
+ happens at once, and a drag turns the view as the pointer moves. Both drawings
163
+ turn round the middle of the data and keep their size through a drag, so
164
+ nothing else on the page moves. Once the drag ends, the SVG drawing settles
165
+ into the space that fits it, at once with reduced motion set. No spatial chart
147
166
  turns by itself.
148
167
 
168
+ The numbers and names stand outside the box, along the edges that face the
169
+ reader, and move to other edges as the view turns. A number that would cover
170
+ another is left out. `Spatial Heatmap` stands its first and last labels under
171
+ the two ends of its front edge, clear of the relief.
172
+
149
173
  ## Color a spatial chart
150
174
 
151
175
  Each chart takes its colors from your theme, and these hooks change them: