@fusion.dev/helix-docs 0.187.0 → 0.188.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.
@@ -479,6 +479,48 @@ TypeScript declares custom elements this way. The interface merges from your
479
479
  source, and a generated file cannot name a class that is not in the same
480
480
  program.
481
481
 
482
+ ## Check your components with \`helix component\`
483
+
484
+ \`helix component\` checks the components you write on Helix's base classes. Name
485
+ the folders that hold them in \`helix.json\` at your project's root:
486
+
487
+ \`\`\`json
488
+ { "tiers": ["src/components"] }
489
+ \`\`\`
490
+
491
+ Then run it:
492
+
493
+ \`\`\`sh
494
+ helix component audit
495
+ helix component check
496
+ \`\`\`
497
+
498
+ \`audit\` prints each rule and what it found, and \`check\` prints nothing when
499
+ there is nothing to report. Both exit 1 on a finding, and \`--json\` prints the
500
+ findings as data. The rules check what your components document and write:
501
+
502
+ | Rule | What it checks |
503
+ |---|---|
504
+ | \`tier\` | A component built on a headless one that renders children sets \`tier\`, so its children are yours and not Helix's |
505
+ | \`registered\` | Every element a component's base renders is registered under the prefix it sets |
506
+ | \`composed\` | A module that renders one of your elements, by its base or in its own template, imports the module that registers it |
507
+ | \`slots\` | A \`@slot\` you document is one the Helix class under it takes, or one your template renders |
508
+ | \`exportparts\` | A \`::part()\` written at your elements or at Helix's names a part that element publishes |
509
+ | \`words\` | A component with \`static words\` declares its English defaults \`@words\`, and joins no word into a sentence outside the message |
510
+ | \`dispatched\` | An event your component sends by name, with \`new CustomEvent\` or \`new Event\`, is documented with \`@event\` |
511
+ | \`parts\` | A \`@csspart\` you document is rendered, and a \`part\` you render is documented |
512
+ | \`states\` | A custom state you record is documented with \`@cssstate\`, and a documented one is recorded |
513
+ | \`hooks\` | A \`@cssproperty\` you document is read, and one you read is documented |
514
+ | \`restated\` | A part, a slot, or an event is declared once |
515
+ | \`reflected\` | A property that reflects has no default, so a host carries no attribute nobody wrote |
516
+ | \`reflected-defaults\` | A reflected property writes no attribute on upgrade that a server did not send |
517
+ | \`attribute-names\` | A property that mirrors a platform attribute answers to the platform's spelling |
518
+ | \`constructed\` | No class field reads the element's attributes in its initializer, where a parsed element has none yet |
519
+ | \`observers\` | An observer built once is not torn down by a lifecycle that runs many times |
520
+ | \`leaks\` | A listener on something the element does not own is removed when the element is |
521
+
522
+ \`--only parts,states\` runs a few of them.
523
+
482
524
  ## What the headless tier handles for you
483
525
 
484
526
  ### Tree-shaking
@@ -1027,7 +1069,7 @@ the file your client reads and keeps every other server in it:
1027
1069
  | \`vscode\` | \`.vscode/mcp.json\` |
1028
1070
 
1029
1071
  The server runs \`npx @fusion.dev/helix-cli mcp\`, which is the copy in your
1030
- project. It has eight tools:
1072
+ project. It has nine tools:
1031
1073
 
1032
1074
  | Tool | What it returns |
1033
1075
  |---|---|
@@ -1037,6 +1079,7 @@ project. It has eight tools:
1037
1079
  | \`helix_imports\` | The import lines for a list of tags, and the closest tag to any unknown one |
1038
1080
  | \`helix_tokens\` | The semantic tokens, by a word in the name or description and by category |
1039
1081
  | \`helix_check\` | The findings \`helix scan\` reports for the files you name, or for a snippet before you write it |
1082
+ | \`helix_check_page\` | The findings the page diagnostics report for each address you name, opened headless, with what the library logged as the page ran |
1040
1083
  | \`helix_audit_theme\` | Every foreground and background pair a brand color derives to, with its ratio and target |
1041
1084
  | \`helix_derive_theme\` | The theme's CSS |
1042
1085
 
@@ -4297,7 +4340,7 @@ on its own.
4297
4340
 
4298
4341
  | | Raw | Gzip | Brotli |
4299
4342
  |---|---|---|---|
4300
- | Lit and \`@fusion.dev/helix-core\` | 248,564 | 79,270 | 67,889 |
4343
+ | Lit and \`@fusion.dev/helix-core\` | 248,564 | 79,270 | 67,881 |
4301
4344
 
4302
4345
  ## Whole packages
4303
4346
 
@@ -4308,12 +4351,12 @@ either barrel. The per-component tables show what your page pays.
4308
4351
 
4309
4352
  | Package | Raw | Gzip | Brotli | |
4310
4353
  |---|---|---|---|---|
4311
- | \`@fusion.dev/helix-core\` | 247,773 | 79,121 | 67,573 | The element base class, mixins, decorators, and floating positioning. |
4312
- | \`@fusion.dev/helix-headless\` | 1,337,367 | 373,053 | 279,925 | Every headless family. The barrel entry includes all of them. |
4354
+ | \`@fusion.dev/helix-core\` | 247,773 | 79,121 | 67,595 | The element base class, mixins, decorators, and floating positioning. |
4355
+ | \`@fusion.dev/helix-headless\` | 1,337,367 | 373,053 | 280,098 | Every headless family. The barrel entry includes all of them. |
4313
4356
  | \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
4314
4357
  | \`@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. |
4315
4358
  | \`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. |
4316
- | \`@fusion.dev/helix\` | 2,015,564 | 520,954 | 371,815 | Every styled family. |
4359
+ | \`@fusion.dev/helix\` | 2,015,564 | 520,954 | 372,055 | Every styled family. |
4317
4360
  | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
4318
4361
 
4319
4362
  ## Stylesheets
@@ -4336,11 +4379,11 @@ shows the whole cost of using the base layer on its own.
4336
4379
 
4337
4380
  **Most of your first component is the shared runtime.** The median styled family is 17,535 bytes gzipped alone, and it adds 3,868 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.
4338
4381
 
4339
- Across the 106 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 520,954.
4382
+ Across the 106 styled components, the smallest is \`code\` at 8,331 bytes gzipped alone, and the largest is \`data-table\` at 66,817. Every family together is 520,954.
4340
4383
 
4341
4384
  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 373,053 bytes gzipped, whatever else the page imports. That is 21 times the median family above. All 106 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.
4342
4385
 
4343
- 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,645 bytes gzipped alone.
4386
+ 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,647 bytes gzipped alone.
4344
4387
 
4345
4388
  ## Compared with other systems
4346
4389
 
@@ -4352,12 +4395,12 @@ The table has no whole-library row. That row would compare how many components e
4352
4395
 
4353
4396
  | Component | System | Raw | Gzip | Brotli |
4354
4397
  |---|---|---|---|---|
4355
- | \`button\` | **Helix** | 41,612 | 14,007 | 12,441 |
4398
+ | \`button\` | **Helix** | 41,612 | 14,007 | 12,440 |
4356
4399
  | | Carbon | 133,058 | 20,959 | 17,685 |
4357
4400
  | | Material Web | 47,060 | 14,173 | 12,591 |
4358
4401
  | | Shoelace | 62,628 | 18,287 | 15,805 |
4359
4402
  | | Spectrum | 98,792 | 22,045 | 18,674 |
4360
- | \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,516 |
4403
+ | \`checkbox\` | **Helix** | 46,865 | 15,190 | 13,517 |
4361
4404
  | | Carbon | 60,255 | 15,609 | 13,550 |
4362
4405
  | | Material Web | 43,785 | 13,556 | 12,015 |
4363
4406
  | | Shoelace | 47,614 | 15,177 | 13,301 |
@@ -4372,17 +4415,17 @@ The table has no whole-library row. That row would compare how many components e
4372
4415
  | | Material Web | 41,044 | 13,234 | 11,757 |
4373
4416
  | | Shoelace | 34,865 | 12,027 | 10,559 |
4374
4417
  | | Spectrum | 38,685 | 10,660 | 9,370 |
4375
- | \`switch\` | **Helix** | 43,562 | 14,637 | 13,010 |
4418
+ | \`switch\` | **Helix** | 43,562 | 14,638 | 13,007 |
4376
4419
  | | Carbon | 69,423 | 17,127 | 14,764 |
4377
4420
  | | Material Web | 50,155 | 14,577 | 12,935 |
4378
4421
  | | Shoelace | 37,833 | 11,814 | 10,568 |
4379
4422
  | | Spectrum | 62,322 | 15,059 | 13,321 |
4380
- | \`tabs\` | **Helix** | 55,263 | 17,753 | 15,835 |
4423
+ | \`tabs\` | **Helix** | 55,263 | 17,753 | 15,846 |
4381
4424
  | | Carbon | 578,766 | 73,537 | 43,235 |
4382
4425
  | | Material Web | 38,883 | 12,820 | 11,368 |
4383
4426
  | | Shoelace | 54,573 | 17,140 | 15,068 |
4384
4427
  | | Spectrum | 64,875 | 18,298 | 16,283 |
4385
- | \`tooltip\` | **Helix** | 61,420 | 21,833 | 19,366 |
4428
+ | \`tooltip\` | **Helix** | 61,420 | 21,833 | 19,329 |
4386
4429
  | | Carbon | 189,382 | 30,354 | 22,273 |
4387
4430
  | | Material Web | | not shipped | |
4388
4431
  | | Shoelace | 57,412 | 20,220 | 17,933 |
@@ -4434,105 +4477,105 @@ Structure, accessibility, state, and form participation. It has no presentation
4434
4477
 
4435
4478
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
4436
4479
  |---|---|---|---|---|---|---|
4437
- | \`accordion\` | 31,879 | 11,805 | 10,464 | 5,329 | 1,598 | 1,201 |
4438
- | \`announcement\` | 36,692 | 13,313 | 11,857 | 4,682 | 1,425 | 1,151 |
4439
- | \`app-header\` | 32,289 | 11,899 | 10,609 | 5,871 | 1,795 | 1,314 |
4440
- | \`area-chart\` | 90,301 | 31,725 | 28,033 | 14,058 | 4,345 | 3,519 |
4441
- | \`avatar\` | 30,463 | 11,596 | 10,395 | 3,957 | 1,234 | 996 |
4442
- | \`badge\` | 27,088 | 10,568 | 9,410 | 2,942 | 919 | 680 |
4443
- | \`bar-chart\` | 94,416 | 32,821 | 29,079 | 18,026 | 5,441 | 4,384 |
4444
- | \`blockquote\` | 24,107 | 9,421 | 8,333 | 2,402 | 913 | 792 |
4445
- | \`breadcrumbs\` | 36,279 | 13,906 | 12,381 | 7,360 | 2,451 | 1,863 |
4446
- | \`button\` | 35,194 | 12,591 | 11,199 | 4,925 | 1,471 | 1,101 |
4447
- | \`button-group\` | 27,640 | 10,382 | 9,203 | 4,928 | 1,516 | 1,108 |
4448
- | \`callout\` | 35,256 | 13,595 | 12,070 | 2,884 | 992 | 672 |
4449
- | \`canvas\` | 108,483 | 34,750 | 30,378 | 68,927 | 20,973 | 17,579 |
4450
- | \`card\` | 23,777 | 9,053 | 8,018 | 2,090 | 655 | 458 |
4451
- | \`carousel\` | 42,748 | 15,234 | 13,592 | 15,006 | 4,215 | 3,284 |
4452
- | \`chat\` | 79,390 | 26,446 | 23,340 | 27,455 | 8,116 | 6,323 |
4453
- | \`checkbox\` | 40,374 | 13,681 | 12,223 | 3,107 | 979 | 715 |
4454
- | \`checkbox-group\` | 47,602 | 15,600 | 13,904 | 8,325 | 2,351 | 1,675 |
4455
- | \`code\` | 20,301 | 8,015 | 7,128 | 138 | 67 | 44 |
4456
- | \`code-block\` | 102,738 | 34,889 | 30,829 | 36,843 | 10,785 | 8,723 |
4457
- | \`color-input\` | 141,792 | 45,087 | 39,353 | 55,136 | 14,334 | 11,579 |
4458
- | \`color-picker\` | 103,415 | 32,966 | 28,889 | 47,256 | 12,743 | 10,286 |
4459
- | \`combobox\` | 132,023 | 41,951 | 36,926 | 35,791 | 9,112 | 7,114 |
4460
- | \`command\` | 99,513 | 31,476 | 27,699 | 30,061 | 8,170 | 6,287 |
4461
- | \`copy-button\` | 80,548 | 27,649 | 24,493 | 18,341 | 4,985 | 3,862 |
4462
- | \`data-table\` | 199,900 | 61,427 | 52,552 | 89,488 | 23,783 | 19,122 |
4463
- | \`date-input\` | 141,223 | 44,512 | 39,087 | 38,229 | 9,447 | 7,481 |
4464
- | \`date-picker\` | 61,360 | 20,936 | 18,758 | 20,347 | 5,579 | 4,404 |
4465
- | \`description-list\` | 22,900 | 8,766 | 7,766 | 1,565 | 525 | 363 |
4466
- | \`dialog\` | 38,247 | 13,598 | 12,117 | 5,837 | 1,753 | 1,370 |
4467
- | \`divider\` | 22,991 | 8,924 | 7,882 | 1,416 | 502 | 365 |
4468
- | \`donut-chart\` | 89,212 | 31,127 | 27,516 | 14,641 | 4,497 | 3,726 |
4469
- | \`drawer\` | 42,892 | 15,123 | 13,470 | 7,698 | 2,295 | 1,762 |
4470
- | \`drilldown\` | 42,756 | 14,941 | 13,298 | 9,710 | 2,724 | 2,115 |
4471
- | \`empty\` | 24,194 | 9,251 | 8,200 | 1,951 | 658 | 452 |
4472
- | \`file-input\` | 57,757 | 20,019 | 17,787 | 13,094 | 4,155 | 3,327 |
4473
- | \`filter-input\` | 97,846 | 32,818 | 29,095 | 21,630 | 6,199 | 4,832 |
4474
- | \`format-date\` | 30,158 | 11,290 | 10,090 | 4,434 | 1,263 | 1,027 |
4475
- | \`graph\` | 74,369 | 24,503 | 21,668 | 21,878 | 6,484 | 5,239 |
4476
- | \`heatmap\` | 98,128 | 33,504 | 29,599 | 18,944 | 5,590 | 4,500 |
4477
- | \`icon\` | 82,157 | 28,050 | 23,958 | 58,304 | 19,661 | 16,059 |
4478
- | \`icon-button\` | 35,305 | 12,620 | 11,230 | 5,034 | 1,512 | 1,196 |
4479
- | \`image\` | 25,504 | 9,480 | 8,403 | 3,824 | 1,152 | 876 |
4480
- | \`input\` | 46,361 | 15,974 | 14,090 | 7,352 | 2,452 | 1,782 |
4481
- | \`isometric-heatmap\` | 102,771 | 34,712 | 30,611 | 23,536 | 6,749 | 5,369 |
4482
- | \`kbd\` | 27,511 | 10,571 | 9,363 | 3,516 | 1,152 | 829 |
4483
- | \`legend\` | 35,184 | 12,935 | 11,491 | 2,957 | 1,019 | 860 |
4484
- | \`lightbox\` | 55,724 | 18,816 | 16,708 | 16,730 | 4,692 | 3,556 |
4485
- | \`line-chart\` | 91,335 | 31,881 | 28,246 | 14,762 | 4,418 | 3,595 |
4486
- | \`list\` | 61,803 | 21,294 | 18,990 | 15,242 | 4,449 | 3,468 |
4487
- | \`listbox\` | 76,711 | 25,427 | 22,518 | 15,565 | 4,585 | 3,562 |
4488
- | \`loader\` | 26,379 | 10,041 | 8,907 | 2,775 | 969 | 755 |
4489
- | \`map\` | 78,565 | 24,393 | 21,306 | 37,025 | 10,128 | 7,979 |
4490
- | \`megamenu\` | 60,027 | 21,698 | 19,184 | 8,595 | 2,405 | 1,729 |
4491
- | \`menu\` | 97,473 | 32,550 | 28,740 | 30,180 | 7,996 | 6,317 |
4492
- | \`meter\` | 31,721 | 12,026 | 10,720 | 4,894 | 1,453 | 1,142 |
4493
- | \`navigation\` | 33,088 | 12,436 | 11,039 | 3,366 | 1,183 | 972 |
4494
- | \`notifications\` | 58,346 | 19,881 | 17,738 | 18,207 | 5,055 | 4,084 |
4495
- | \`number-input\` | 56,271 | 18,839 | 16,788 | 13,524 | 3,662 | 2,808 |
4496
- | \`object-inspector\` | 113,929 | 38,372 | 33,710 | 35,492 | 10,303 | 8,228 |
4497
- | \`option\` | 26,477 | 9,764 | 8,662 | 4,525 | 1,231 | 929 |
4480
+ | \`accordion\` | 31,879 | 11,805 | 10,464 | 5,329 | 1,598 | 1,256 |
4481
+ | \`announcement\` | 36,692 | 13,313 | 11,854 | 4,682 | 1,425 | 1,118 |
4482
+ | \`app-header\` | 32,289 | 11,899 | 10,606 | 5,871 | 1,796 | 1,259 |
4483
+ | \`area-chart\` | 90,301 | 31,725 | 28,046 | 14,058 | 4,345 | 3,496 |
4484
+ | \`avatar\` | 30,463 | 11,596 | 10,369 | 3,957 | 1,234 | 973 |
4485
+ | \`badge\` | 27,088 | 10,568 | 9,410 | 2,942 | 920 | 756 |
4486
+ | \`bar-chart\` | 94,416 | 32,821 | 29,099 | 18,026 | 5,441 | 4,501 |
4487
+ | \`blockquote\` | 24,107 | 9,422 | 8,332 | 2,402 | 913 | 753 |
4488
+ | \`breadcrumbs\` | 36,279 | 13,906 | 12,382 | 7,360 | 2,452 | 1,974 |
4489
+ | \`button\` | 35,194 | 12,591 | 11,222 | 4,925 | 1,472 | 1,121 |
4490
+ | \`button-group\` | 27,640 | 10,382 | 9,200 | 4,928 | 1,517 | 1,109 |
4491
+ | \`callout\` | 35,256 | 13,593 | 12,058 | 2,884 | 992 | 726 |
4492
+ | \`canvas\` | 108,483 | 34,750 | 30,438 | 68,927 | 20,973 | 17,684 |
4493
+ | \`card\` | 23,777 | 9,054 | 8,019 | 2,090 | 655 | 525 |
4494
+ | \`carousel\` | 42,748 | 15,234 | 13,597 | 15,006 | 4,216 | 3,333 |
4495
+ | \`chat\` | 79,390 | 26,444 | 23,377 | 27,455 | 8,117 | 6,376 |
4496
+ | \`checkbox\` | 40,374 | 13,681 | 12,199 | 3,107 | 979 | 666 |
4497
+ | \`checkbox-group\` | 47,602 | 15,601 | 13,904 | 8,325 | 2,351 | 1,779 |
4498
+ | \`code\` | 20,301 | 8,015 | 7,121 | 138 | 67 | 44 |
4499
+ | \`code-block\` | 102,738 | 34,890 | 30,788 | 36,843 | 10,786 | 8,800 |
4500
+ | \`color-input\` | 141,792 | 45,087 | 39,341 | 55,136 | 14,334 | 11,510 |
4501
+ | \`color-picker\` | 103,415 | 32,966 | 28,881 | 47,256 | 12,743 | 10,241 |
4502
+ | \`combobox\` | 132,023 | 41,951 | 36,907 | 35,791 | 9,112 | 7,035 |
4503
+ | \`command\` | 99,513 | 31,476 | 27,708 | 30,061 | 8,171 | 6,363 |
4504
+ | \`copy-button\` | 80,548 | 27,649 | 24,490 | 18,341 | 4,985 | 3,998 |
4505
+ | \`data-table\` | 199,900 | 61,427 | 52,553 | 89,488 | 23,783 | 19,070 |
4506
+ | \`date-input\` | 141,223 | 44,512 | 39,113 | 38,229 | 9,448 | 7,610 |
4507
+ | \`date-picker\` | 61,360 | 20,936 | 18,750 | 20,347 | 5,579 | 4,382 |
4508
+ | \`description-list\` | 22,900 | 8,765 | 7,766 | 1,565 | 526 | 391 |
4509
+ | \`dialog\` | 38,247 | 13,598 | 12,117 | 5,837 | 1,753 | 1,446 |
4510
+ | \`divider\` | 22,991 | 8,924 | 7,882 | 1,416 | 502 | 425 |
4511
+ | \`donut-chart\` | 89,212 | 31,127 | 27,556 | 14,641 | 4,497 | 3,632 |
4512
+ | \`drawer\` | 42,892 | 15,123 | 13,469 | 7,698 | 2,296 | 1,835 |
4513
+ | \`drilldown\` | 42,756 | 14,941 | 13,297 | 9,710 | 2,724 | 2,066 |
4514
+ | \`empty\` | 24,194 | 9,251 | 8,200 | 1,951 | 658 | 530 |
4515
+ | \`file-input\` | 57,757 | 20,019 | 17,785 | 13,094 | 4,155 | 3,281 |
4516
+ | \`filter-input\` | 97,846 | 32,819 | 29,116 | 21,630 | 6,199 | 4,852 |
4517
+ | \`format-date\` | 30,158 | 11,290 | 10,090 | 4,434 | 1,264 | 1,089 |
4518
+ | \`graph\` | 74,369 | 24,504 | 21,641 | 21,878 | 6,485 | 5,288 |
4519
+ | \`heatmap\` | 98,128 | 33,505 | 29,605 | 18,944 | 5,590 | 4,462 |
4520
+ | \`icon\` | 82,157 | 28,050 | 23,959 | 58,304 | 19,662 | 16,121 |
4521
+ | \`icon-button\` | 35,305 | 12,620 | 11,230 | 5,034 | 1,513 | 1,165 |
4522
+ | \`image\` | 25,504 | 9,480 | 8,404 | 3,824 | 1,152 | 935 |
4523
+ | \`input\` | 46,361 | 15,974 | 14,090 | 7,352 | 2,452 | 1,865 |
4524
+ | \`isometric-heatmap\` | 102,771 | 34,713 | 30,595 | 23,536 | 6,749 | 5,398 |
4525
+ | \`kbd\` | 27,511 | 10,571 | 9,367 | 3,516 | 1,153 | 767 |
4526
+ | \`legend\` | 35,184 | 12,935 | 11,491 | 2,957 | 1,019 | 874 |
4527
+ | \`lightbox\` | 55,724 | 18,816 | 16,725 | 16,730 | 4,692 | 3,582 |
4528
+ | \`line-chart\` | 91,335 | 31,881 | 28,290 | 14,762 | 4,418 | 3,698 |
4529
+ | \`list\` | 61,803 | 21,294 | 18,983 | 15,242 | 4,449 | 3,619 |
4530
+ | \`listbox\` | 76,711 | 25,427 | 22,527 | 15,565 | 4,585 | 3,551 |
4531
+ | \`loader\` | 26,379 | 10,041 | 8,907 | 2,775 | 969 | 751 |
4532
+ | \`map\` | 78,565 | 24,393 | 21,288 | 37,025 | 10,128 | 7,955 |
4533
+ | \`megamenu\` | 60,027 | 21,698 | 19,183 | 8,595 | 2,405 | 1,778 |
4534
+ | \`menu\` | 97,473 | 32,550 | 28,767 | 30,180 | 7,996 | 6,383 |
4535
+ | \`meter\` | 31,721 | 12,026 | 10,721 | 4,894 | 1,453 | 1,182 |
4536
+ | \`navigation\` | 33,088 | 12,436 | 11,034 | 3,366 | 1,183 | 1,023 |
4537
+ | \`notifications\` | 58,346 | 19,881 | 17,738 | 18,207 | 5,056 | 4,000 |
4538
+ | \`number-input\` | 56,271 | 18,840 | 16,789 | 13,524 | 3,662 | 2,768 |
4539
+ | \`object-inspector\` | 113,929 | 38,372 | 33,717 | 35,492 | 10,304 | 8,250 |
4540
+ | \`option\` | 26,477 | 9,763 | 8,662 | 4,525 | 1,231 | 950 |
4498
4541
  | \`outline\` | 33,612 | 12,598 | 11,179 | 7,856 | 2,569 | 1,942 |
4499
- | \`pagination\` | 136,258 | 43,650 | 37,968 | 45,377 | 11,934 | 9,430 |
4500
- | \`pin-input\` | 47,068 | 16,413 | 14,656 | 6,736 | 2,253 | 1,679 |
4501
- | \`popover\` | 63,806 | 22,941 | 20,269 | 6,375 | 1,876 | 1,391 |
4502
- | \`progress\` | 28,084 | 10,730 | 9,552 | 2,970 | 933 | 784 |
4503
- | \`qr-code\` | 42,719 | 16,645 | 14,846 | 17,004 | 6,288 | 5,327 |
4504
- | \`quote\` | 22,516 | 8,885 | 7,828 | 1,211 | 523 | 436 |
4505
- | \`radio\` | 42,561 | 14,464 | 12,878 | 3,817 | 1,227 | 860 |
4506
- | \`rating\` | 50,257 | 17,289 | 15,409 | 8,029 | 2,456 | 1,823 |
4507
- | \`scatter-chart\` | 91,226 | 31,676 | 27,953 | 16,127 | 4,840 | 3,799 |
4508
- | \`scroll-area\` | 30,430 | 11,079 | 9,814 | 8,499 | 2,602 | 2,068 |
4509
- | \`select\` | 115,289 | 38,173 | 33,453 | 26,033 | 7,140 | 5,340 |
4510
- | \`skeleton\` | 22,328 | 8,644 | 7,666 | 991 | 367 | 229 |
4511
- | \`skip-link\` | 23,871 | 9,338 | 8,265 | 1,225 | 493 | 350 |
4512
- | \`slider\` | 52,873 | 17,826 | 15,978 | 13,159 | 3,817 | 2,927 |
4513
- | \`sparkline\` | 47,984 | 17,500 | 15,601 | 5,981 | 2,162 | 1,673 |
4514
- | \`speed-dial\` | 68,751 | 24,718 | 21,898 | 10,915 | 2,990 | 2,359 |
4515
- | \`splitter\` | 43,751 | 15,167 | 13,536 | 14,397 | 3,878 | 3,177 |
4516
- | \`stat\` | 25,255 | 9,675 | 8,601 | 2,303 | 781 | 553 |
4517
- | \`steps\` | 53,623 | 18,636 | 16,567 | 13,603 | 3,869 | 3,159 |
4518
- | \`switch\` | 39,233 | 13,495 | 12,048 | 1,679 | 625 | 396 |
4519
- | \`table\` | 118,358 | 37,061 | 32,288 | 45,150 | 12,476 | 10,092 |
4520
- | \`tabs\` | 46,310 | 15,908 | 14,148 | 10,491 | 2,916 | 2,292 |
4521
- | \`tag\` | 42,676 | 15,620 | 13,972 | 8,455 | 2,548 | 2,025 |
4522
- | \`textarea\` | 43,852 | 14,941 | 13,326 | 5,402 | 1,622 | 1,271 |
4523
- | \`time-input\` | 169,269 | 52,676 | 45,838 | 48,511 | 12,418 | 9,781 |
4524
- | \`time-picker\` | 99,603 | 31,517 | 27,728 | 33,933 | 9,190 | 7,178 |
4525
- | \`timeline\` | 31,286 | 11,863 | 10,638 | 4,061 | 1,259 | 981 |
4526
- | \`toast\` | 50,871 | 17,940 | 16,020 | 12,124 | 3,529 | 2,769 |
4527
- | \`toggle\` | 45,577 | 15,270 | 13,576 | 6,007 | 1,799 | 1,303 |
4528
- | \`toolbar\` | 31,047 | 11,573 | 10,294 | 5,158 | 1,694 | 1,299 |
4529
- | \`tooltip\` | 58,616 | 21,091 | 18,704 | 8,434 | 2,378 | 1,931 |
4530
- | \`tour\` | 83,670 | 28,722 | 25,379 | 19,815 | 5,458 | 4,358 |
4531
- | \`tree\` | 67,586 | 22,717 | 20,230 | 17,199 | 4,979 | 3,932 |
4532
- | \`trend\` | 29,717 | 11,568 | 10,337 | 3,487 | 1,133 | 886 |
4533
- | \`video\` | 141,208 | 44,137 | 38,490 | 66,217 | 16,841 | 13,759 |
4534
- | \`video-playlist\` | 127,686 | 41,301 | 36,312 | 42,775 | 11,224 | 9,029 |
4535
- | \`virtual-list\` | 63,451 | 21,632 | 19,226 | 23,305 | 7,171 | 5,849 |
4542
+ | \`pagination\` | 136,258 | 43,650 | 37,953 | 45,377 | 11,934 | 9,415 |
4543
+ | \`pin-input\` | 47,068 | 16,413 | 14,653 | 6,736 | 2,253 | 1,741 |
4544
+ | \`popover\` | 63,806 | 22,941 | 20,256 | 6,375 | 1,876 | 1,363 |
4545
+ | \`progress\` | 28,084 | 10,730 | 9,551 | 2,970 | 933 | 720 |
4546
+ | \`qr-code\` | 42,719 | 16,647 | 14,847 | 17,004 | 6,288 | 5,382 |
4547
+ | \`quote\` | 22,516 | 8,884 | 7,827 | 1,211 | 523 | 417 |
4548
+ | \`radio\` | 42,561 | 14,464 | 12,878 | 3,817 | 1,228 | 898 |
4549
+ | \`rating\` | 50,257 | 17,289 | 15,409 | 8,029 | 2,456 | 1,870 |
4550
+ | \`scatter-chart\` | 91,226 | 31,676 | 27,942 | 16,127 | 4,840 | 3,890 |
4551
+ | \`scroll-area\` | 30,430 | 11,080 | 9,813 | 8,499 | 2,603 | 2,039 |
4552
+ | \`select\` | 115,289 | 38,173 | 33,481 | 26,033 | 7,140 | 5,395 |
4553
+ | \`skeleton\` | 22,328 | 8,644 | 7,666 | 991 | 368 | 296 |
4554
+ | \`skip-link\` | 23,871 | 9,338 | 8,264 | 1,225 | 494 | 424 |
4555
+ | \`slider\` | 52,873 | 17,826 | 15,978 | 13,159 | 3,818 | 3,037 |
4556
+ | \`sparkline\` | 47,984 | 17,499 | 15,601 | 5,981 | 2,162 | 1,764 |
4557
+ | \`speed-dial\` | 68,751 | 24,718 | 21,901 | 10,915 | 2,990 | 2,266 |
4558
+ | \`splitter\` | 43,751 | 15,167 | 13,536 | 14,397 | 3,878 | 3,176 |
4559
+ | \`stat\` | 25,255 | 9,675 | 8,601 | 2,303 | 781 | 544 |
4560
+ | \`steps\` | 53,623 | 18,635 | 16,567 | 13,603 | 3,870 | 3,086 |
4561
+ | \`switch\` | 39,233 | 13,495 | 12,047 | 1,679 | 625 | 379 |
4562
+ | \`table\` | 118,358 | 37,061 | 32,257 | 45,150 | 12,475 | 10,024 |
4563
+ | \`tabs\` | 46,310 | 15,908 | 14,160 | 10,491 | 2,916 | 2,259 |
4564
+ | \`tag\` | 42,676 | 15,620 | 13,972 | 8,455 | 2,548 | 1,991 |
4565
+ | \`textarea\` | 43,852 | 14,941 | 13,326 | 5,402 | 1,622 | 1,239 |
4566
+ | \`time-input\` | 169,269 | 52,676 | 45,872 | 48,511 | 12,418 | 9,739 |
4567
+ | \`time-picker\` | 99,603 | 31,518 | 27,772 | 33,933 | 9,190 | 7,206 |
4568
+ | \`timeline\` | 31,286 | 11,863 | 10,607 | 4,061 | 1,260 | 1,014 |
4569
+ | \`toast\` | 50,871 | 17,938 | 16,020 | 12,124 | 3,529 | 2,827 |
4570
+ | \`toggle\` | 45,577 | 15,270 | 13,576 | 6,007 | 1,799 | 1,392 |
4571
+ | \`toolbar\` | 31,047 | 11,573 | 10,294 | 5,158 | 1,695 | 1,249 |
4572
+ | \`tooltip\` | 58,616 | 21,090 | 18,705 | 8,434 | 2,379 | 1,908 |
4573
+ | \`tour\` | 83,670 | 28,722 | 25,339 | 19,815 | 5,459 | 4,255 |
4574
+ | \`tree\` | 67,586 | 22,718 | 20,230 | 17,199 | 4,980 | 4,023 |
4575
+ | \`trend\` | 29,717 | 11,569 | 10,337 | 3,487 | 1,134 | 913 |
4576
+ | \`video\` | 141,208 | 44,137 | 38,496 | 66,217 | 16,841 | 13,780 |
4577
+ | \`video-playlist\` | 127,686 | 41,301 | 36,338 | 42,775 | 11,225 | 9,072 |
4578
+ | \`virtual-list\` | 63,451 | 21,630 | 19,226 | 23,305 | 7,171 | 5,779 |
4536
4579
 
4537
4580
  ### Styled tier
4538
4581
 
@@ -4540,112 +4583,112 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
4540
4583
 
4541
4584
  | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
4542
4585
  |---|---|---|---|---|---|---|
4543
- | \`accordion\` | 35,311 | 12,654 | 11,236 | 8,746 | 2,463 | 1,998 |
4544
- | \`announcement\` | 41,307 | 14,365 | 12,844 | 9,278 | 2,489 | 2,054 |
4545
- | \`app-header\` | 37,449 | 13,103 | 11,662 | 11,016 | 3,009 | 2,470 |
4546
- | \`area-chart\` | 98,393 | 33,578 | 29,660 | 22,131 | 6,256 | 5,025 |
4547
- | \`aura\` | 56,085 | 19,320 | 17,126 | 29,774 | 9,335 | 7,865 |
4548
- | \`avatar\` | 33,464 | 12,351 | 11,051 | 6,945 | 2,007 | 1,685 |
4549
- | \`badge\` | 32,595 | 11,820 | 10,531 | 8,438 | 2,177 | 1,748 |
4550
- | \`bar-chart\` | 108,944 | 35,724 | 31,568 | 32,533 | 8,394 | 6,820 |
4551
- | \`blockquote\` | 26,332 | 9,968 | 8,824 | 4,612 | 1,452 | 1,164 |
4552
- | \`breadcrumbs\` | 43,220 | 15,115 | 13,466 | 14,285 | 3,697 | 3,044 |
4553
- | \`button\` | 41,612 | 14,007 | 12,441 | 11,324 | 2,907 | 2,346 |
4554
- | \`button-group\` | 31,138 | 11,066 | 9,805 | 8,409 | 2,230 | 1,841 |
4555
- | \`callout\` | 39,049 | 14,537 | 12,949 | 6,659 | 1,950 | 1,535 |
4556
- | \`canvas\` | 129,523 | 38,718 | 33,863 | 89,611 | 24,897 | 20,987 |
4557
- | \`card\` | 27,678 | 10,060 | 8,915 | 5,976 | 1,650 | 1,363 |
4558
- | \`carousel\` | 53,234 | 17,022 | 15,256 | 25,477 | 6,038 | 4,946 |
4559
- | \`chat\` | 94,674 | 29,166 | 25,830 | 42,730 | 10,859 | 8,749 |
4560
- | \`checkbox\` | 46,865 | 15,190 | 13,516 | 9,580 | 2,503 | 1,920 |
4561
- | \`checkbox-group\` | 54,826 | 17,244 | 15,360 | 15,542 | 4,028 | 3,169 |
4562
- | \`code\` | 21,154 | 8,333 | 7,402 | 976 | 399 | 301 |
4563
- | \`code-block\` | 127,213 | 38,714 | 34,143 | 61,300 | 14,740 | 12,109 |
4564
- | \`color-input\` | 184,176 | 51,348 | 44,934 | 97,504 | 20,559 | 17,166 |
4565
- | \`color-picker\` | 140,348 | 38,508 | 33,775 | 84,177 | 18,389 | 15,187 |
4566
- | \`combobox\` | 147,503 | 44,927 | 39,531 | 51,254 | 12,085 | 9,694 |
4567
- | \`command\` | 110,791 | 33,835 | 29,880 | 41,332 | 10,522 | 8,545 |
4568
- | \`copy-button\` | 92,577 | 29,825 | 26,416 | 30,355 | 7,219 | 5,801 |
4569
- | \`data-table\` | 230,715 | 66,818 | 57,324 | 120,282 | 29,306 | 23,816 |
4570
- | \`date-input\` | 162,349 | 48,215 | 42,468 | 59,336 | 13,196 | 10,823 |
4571
- | \`date-picker\` | 69,281 | 22,363 | 20,060 | 28,250 | 7,010 | 5,666 |
4572
- | \`description-list\` | 25,855 | 9,518 | 8,459 | 4,508 | 1,284 | 1,017 |
4573
- | \`dialog\` | 43,360 | 14,855 | 13,244 | 10,933 | 3,007 | 2,490 |
4574
- | \`divider\` | 25,291 | 9,547 | 8,433 | 3,699 | 1,140 | 891 |
4575
- | \`donut-chart\` | 99,170 | 33,263 | 29,415 | 24,576 | 6,712 | 5,427 |
4576
- | \`drawer\` | 48,725 | 16,509 | 14,724 | 13,512 | 3,708 | 2,986 |
4577
- | \`drilldown\` | 48,438 | 16,235 | 14,469 | 15,378 | 4,052 | 3,262 |
4578
- | \`empty\` | 25,503 | 9,726 | 8,598 | 3,242 | 1,117 | 896 |
4579
- | \`file-input\` | 69,285 | 22,420 | 19,930 | 24,612 | 6,551 | 5,279 |
4580
- | \`filter-input\` | 108,688 | 34,990 | 30,999 | 32,465 | 8,412 | 6,787 |
4581
- | \`flex\` | 25,740 | 9,194 | 8,149 | 4,763 | 1,047 | 850 |
4582
- | \`format-date\` | 30,414 | 11,403 | 10,189 | 4,672 | 1,402 | 1,050 |
4583
- | \`graph\` | 89,037 | 27,079 | 23,901 | 36,528 | 9,184 | 7,421 |
4584
- | \`grid\` | 27,002 | 9,846 | 8,742 | 5,638 | 1,467 | 1,312 |
4585
- | \`heatmap\` | 105,486 | 35,189 | 31,063 | 26,281 | 7,264 | 5,929 |
4586
- | \`icon\` | 83,995 | 28,566 | 24,515 | 60,129 | 20,177 | 16,474 |
4587
- | \`icon-button\` | 43,040 | 13,981 | 12,435 | 12,753 | 2,882 | 2,258 |
4588
- | \`image\` | 26,892 | 9,947 | 8,792 | 5,194 | 1,620 | 1,337 |
4589
- | \`input\` | 50,619 | 17,063 | 15,049 | 11,597 | 3,559 | 2,663 |
4590
- | \`isometric-heatmap\` | 110,852 | 36,558 | 32,275 | 31,598 | 8,642 | 6,913 |
4591
- | \`kbd\` | 29,504 | 11,110 | 9,838 | 5,494 | 1,685 | 1,342 |
4592
- | \`legend\` | 40,423 | 14,214 | 12,607 | 8,067 | 2,264 | 1,846 |
4593
- | \`lightbox\` | 62,016 | 20,155 | 17,964 | 23,006 | 6,017 | 4,683 |
4594
- | \`line-chart\` | 102,454 | 34,257 | 30,340 | 25,863 | 6,849 | 5,539 |
4595
- | \`list\` | 68,150 | 22,816 | 20,343 | 21,569 | 5,958 | 4,706 |
4596
- | \`listbox\` | 81,154 | 26,542 | 23,465 | 19,994 | 5,703 | 4,473 |
4597
- | \`loader\` | 29,263 | 10,814 | 9,643 | 5,642 | 1,730 | 1,396 |
4598
- | \`map\` | 111,513 | 29,575 | 25,948 | 69,961 | 15,525 | 12,703 |
4599
- | \`megamenu\` | 64,996 | 22,865 | 20,305 | 13,547 | 3,558 | 2,813 |
4600
- | \`menu\` | 108,403 | 34,710 | 30,612 | 41,098 | 10,160 | 8,290 |
4601
- | \`meter\` | 37,896 | 13,377 | 11,948 | 11,050 | 2,820 | 2,322 |
4602
- | \`navigation\` | 36,814 | 13,268 | 11,774 | 7,077 | 2,025 | 1,612 |
4603
- | \`notifications\` | 71,808 | 22,447 | 19,990 | 31,663 | 7,637 | 6,248 |
4604
- | \`number-input\` | 61,253 | 20,024 | 17,846 | 18,491 | 4,850 | 3,838 |
4605
- | \`object-inspector\` | 130,338 | 41,206 | 36,258 | 51,884 | 13,190 | 10,666 |
4606
- | \`option\` | 29,672 | 10,762 | 9,552 | 7,712 | 2,213 | 1,846 |
4607
- | \`orb\` | 35,265 | 13,488 | 12,001 | 9,730 | 3,689 | 3,108 |
4608
- | \`outline\` | 37,846 | 13,459 | 11,945 | 12,073 | 3,491 | 2,800 |
4609
- | \`pagination\` | 153,264 | 46,929 | 40,857 | 62,366 | 15,240 | 12,281 |
4610
- | \`pin-input\` | 50,409 | 17,316 | 15,449 | 10,058 | 3,179 | 2,402 |
4611
- | \`popover\` | 66,958 | 23,702 | 20,940 | 9,509 | 2,658 | 2,109 |
4612
- | \`progress\` | 35,232 | 12,380 | 11,035 | 10,101 | 2,602 | 2,225 |
4613
- | \`qr-code\` | 44,321 | 17,121 | 15,278 | 18,589 | 6,787 | 5,736 |
4614
- | \`quote\` | 23,074 | 9,079 | 8,006 | 1,752 | 733 | 509 |
4615
- | \`radio\` | 50,349 | 15,977 | 14,203 | 11,594 | 2,766 | 2,213 |
4616
- | \`rating\` | 54,190 | 18,519 | 16,486 | 11,946 | 3,671 | 2,903 |
4617
- | \`sandbox\` | 104,428 | 31,486 | 27,640 | 72,147 | 19,289 | 16,119 |
4618
- | \`scatter-chart\` | 100,317 | 33,785 | 29,869 | 25,197 | 6,982 | 5,771 |
4619
- | \`scroll-area\` | 35,437 | 12,027 | 10,702 | 13,489 | 3,582 | 2,961 |
4620
- | \`select\` | 124,418 | 40,070 | 35,154 | 35,147 | 9,067 | 7,129 |
4621
- | \`skeleton\` | 26,090 | 9,664 | 8,589 | 4,738 | 1,432 | 1,187 |
4622
- | \`skip-link\` | 25,441 | 9,852 | 8,690 | 2,780 | 983 | 736 |
4623
- | \`slider\` | 67,842 | 20,140 | 18,005 | 28,108 | 6,184 | 5,032 |
4624
- | \`sparkline\` | 53,442 | 18,851 | 16,826 | 11,421 | 3,519 | 2,864 |
4625
- | \`speed-dial\` | 75,797 | 26,105 | 23,139 | 17,946 | 4,404 | 3,516 |
4626
- | \`splitter\` | 49,804 | 16,210 | 14,531 | 20,431 | 4,937 | 4,039 |
4627
- | \`stat\` | 28,117 | 10,372 | 9,280 | 5,157 | 1,482 | 1,194 |
4628
- | \`steps\` | 67,449 | 21,377 | 19,024 | 27,416 | 6,635 | 5,515 |
4629
- | \`strands\` | 62,138 | 23,148 | 20,396 | 38,015 | 13,797 | 11,910 |
4630
- | \`switch\` | 43,562 | 14,637 | 13,010 | 5,998 | 1,792 | 1,391 |
4631
- | \`table\` | 135,900 | 40,155 | 34,934 | 62,687 | 15,581 | 12,776 |
4632
- | \`tabs\` | 55,263 | 17,753 | 15,835 | 19,437 | 4,783 | 3,841 |
4633
- | \`tag\` | 47,247 | 16,757 | 14,968 | 13,016 | 3,658 | 2,921 |
4634
- | \`text\` | 28,756 | 9,943 | 8,755 | 7,396 | 1,519 | 1,235 |
4635
- | \`textarea\` | 47,785 | 15,949 | 14,228 | 9,318 | 2,677 | 2,078 |
4636
- | \`time-input\` | 193,597 | 56,836 | 49,504 | 72,824 | 16,646 | 13,498 |
4637
- | \`time-picker\` | 111,928 | 33,946 | 29,864 | 46,251 | 11,628 | 9,328 |
4638
- | \`timeline\` | 38,179 | 13,326 | 11,930 | 10,947 | 2,751 | 2,261 |
4639
- | \`toast\` | 58,767 | 19,784 | 17,637 | 20,006 | 5,408 | 4,422 |
4640
- | \`toggle\` | 50,439 | 16,510 | 14,668 | 10,854 | 3,077 | 2,438 |
4641
- | \`toolbar\` | 33,726 | 12,066 | 10,723 | 7,822 | 2,163 | 1,769 |
4642
- | \`tooltip\` | 61,420 | 21,833 | 19,366 | 11,220 | 3,137 | 2,485 |
4643
- | \`tour\` | 93,661 | 30,696 | 27,184 | 29,787 | 7,497 | 6,053 |
4644
- | \`tree\` | 76,275 | 24,651 | 21,972 | 25,874 | 6,942 | 5,517 |
4645
- | \`trend\` | 31,231 | 12,049 | 10,722 | 4,982 | 1,613 | 1,281 |
4646
- | \`video\` | 161,715 | 47,866 | 41,707 | 86,712 | 20,444 | 16,977 |
4647
- | \`video-playlist\` | 143,639 | 44,278 | 38,886 | 58,709 | 14,189 | 11,798 |
4648
- | \`virtual-list\` | 65,445 | 22,136 | 19,655 | 25,282 | 7,676 | 6,231 |
4586
+ | \`accordion\` | 35,311 | 12,654 | 11,236 | 8,746 | 2,463 | 2,016 |
4587
+ | \`announcement\` | 41,307 | 14,365 | 12,844 | 9,278 | 2,489 | 2,072 |
4588
+ | \`app-header\` | 37,449 | 13,103 | 11,682 | 11,016 | 3,009 | 2,472 |
4589
+ | \`area-chart\` | 98,393 | 33,578 | 29,681 | 22,131 | 6,257 | 5,070 |
4590
+ | \`aura\` | 56,085 | 19,320 | 17,108 | 29,774 | 9,336 | 7,876 |
4591
+ | \`avatar\` | 33,464 | 12,351 | 11,051 | 6,945 | 2,007 | 1,646 |
4592
+ | \`badge\` | 32,595 | 11,820 | 10,538 | 8,438 | 2,178 | 1,772 |
4593
+ | \`bar-chart\` | 108,944 | 35,724 | 31,572 | 32,533 | 8,394 | 6,852 |
4594
+ | \`blockquote\` | 26,332 | 9,968 | 8,824 | 4,612 | 1,452 | 1,178 |
4595
+ | \`breadcrumbs\` | 43,220 | 15,115 | 13,467 | 14,285 | 3,698 | 3,040 |
4596
+ | \`button\` | 41,612 | 14,007 | 12,440 | 11,324 | 2,908 | 2,298 |
4597
+ | \`button-group\` | 31,138 | 11,066 | 9,842 | 8,409 | 2,230 | 1,782 |
4598
+ | \`callout\` | 39,049 | 14,535 | 12,913 | 6,659 | 1,950 | 1,513 |
4599
+ | \`canvas\` | 129,523 | 38,717 | 33,888 | 89,611 | 24,897 | 20,996 |
4600
+ | \`card\` | 27,678 | 10,060 | 8,915 | 5,976 | 1,650 | 1,334 |
4601
+ | \`carousel\` | 53,234 | 17,022 | 15,255 | 25,477 | 6,038 | 4,870 |
4602
+ | \`chat\` | 94,674 | 29,164 | 25,829 | 42,730 | 10,860 | 8,790 |
4603
+ | \`checkbox\` | 46,865 | 15,190 | 13,517 | 9,580 | 2,503 | 1,944 |
4604
+ | \`checkbox-group\` | 54,826 | 17,245 | 15,350 | 15,542 | 4,028 | 3,246 |
4605
+ | \`code\` | 21,154 | 8,331 | 7,402 | 976 | 400 | 302 |
4606
+ | \`code-block\` | 127,213 | 38,714 | 34,143 | 61,300 | 14,740 | 12,197 |
4607
+ | \`color-input\` | 184,176 | 51,348 | 44,906 | 97,504 | 20,559 | 17,123 |
4608
+ | \`color-picker\` | 140,348 | 38,508 | 33,798 | 84,177 | 18,390 | 15,111 |
4609
+ | \`combobox\` | 147,503 | 44,927 | 39,521 | 51,254 | 12,086 | 9,732 |
4610
+ | \`command\` | 110,791 | 33,835 | 29,865 | 41,332 | 10,522 | 8,578 |
4611
+ | \`copy-button\` | 92,577 | 29,825 | 26,415 | 30,355 | 7,220 | 5,816 |
4612
+ | \`data-table\` | 230,715 | 66,817 | 57,250 | 120,282 | 29,305 | 23,909 |
4613
+ | \`date-input\` | 162,349 | 48,215 | 42,382 | 59,336 | 13,196 | 10,914 |
4614
+ | \`date-picker\` | 69,281 | 22,363 | 20,060 | 28,250 | 7,010 | 5,696 |
4615
+ | \`description-list\` | 25,855 | 9,517 | 8,456 | 4,508 | 1,284 | 1,066 |
4616
+ | \`dialog\` | 43,360 | 14,855 | 13,244 | 10,933 | 3,007 | 2,429 |
4617
+ | \`divider\` | 25,291 | 9,547 | 8,433 | 3,699 | 1,141 | 848 |
4618
+ | \`donut-chart\` | 99,170 | 33,263 | 29,421 | 24,576 | 6,712 | 5,519 |
4619
+ | \`drawer\` | 48,725 | 16,508 | 14,718 | 13,512 | 3,708 | 3,022 |
4620
+ | \`drilldown\` | 48,438 | 16,235 | 14,465 | 15,378 | 4,052 | 3,152 |
4621
+ | \`empty\` | 25,503 | 9,726 | 8,598 | 3,242 | 1,118 | 869 |
4622
+ | \`file-input\` | 69,285 | 22,419 | 19,892 | 24,612 | 6,551 | 5,311 |
4623
+ | \`filter-input\` | 108,688 | 34,991 | 31,014 | 32,465 | 8,412 | 6,809 |
4624
+ | \`flex\` | 25,740 | 9,195 | 8,149 | 4,763 | 1,048 | 935 |
4625
+ | \`format-date\` | 30,414 | 11,403 | 10,189 | 4,672 | 1,402 | 1,046 |
4626
+ | \`graph\` | 89,037 | 27,080 | 23,910 | 36,528 | 9,184 | 7,482 |
4627
+ | \`grid\` | 27,002 | 9,846 | 8,742 | 5,638 | 1,467 | 1,298 |
4628
+ | \`heatmap\` | 105,486 | 35,189 | 31,084 | 26,281 | 7,264 | 5,828 |
4629
+ | \`icon\` | 83,995 | 28,566 | 24,453 | 60,129 | 20,178 | 16,509 |
4630
+ | \`icon-button\` | 43,040 | 13,981 | 12,435 | 12,753 | 2,883 | 2,232 |
4631
+ | \`image\` | 26,892 | 9,947 | 8,805 | 5,194 | 1,621 | 1,269 |
4632
+ | \`input\` | 50,619 | 17,063 | 15,053 | 11,597 | 3,559 | 2,712 |
4633
+ | \`isometric-heatmap\` | 110,852 | 36,559 | 32,285 | 31,598 | 8,642 | 6,875 |
4634
+ | \`kbd\` | 29,504 | 11,109 | 9,839 | 5,494 | 1,685 | 1,317 |
4635
+ | \`legend\` | 40,423 | 14,214 | 12,618 | 8,067 | 2,264 | 1,748 |
4636
+ | \`lightbox\` | 62,016 | 20,155 | 17,964 | 23,006 | 6,017 | 4,675 |
4637
+ | \`line-chart\` | 102,454 | 34,257 | 30,348 | 25,863 | 6,850 | 5,597 |
4638
+ | \`list\` | 68,150 | 22,816 | 20,364 | 21,569 | 5,958 | 4,789 |
4639
+ | \`listbox\` | 81,154 | 26,542 | 23,415 | 19,994 | 5,704 | 4,449 |
4640
+ | \`loader\` | 29,263 | 10,814 | 9,643 | 5,642 | 1,730 | 1,434 |
4641
+ | \`map\` | 111,513 | 29,575 | 25,972 | 69,961 | 15,526 | 12,713 |
4642
+ | \`megamenu\` | 64,996 | 22,865 | 20,223 | 13,547 | 3,559 | 2,740 |
4643
+ | \`menu\` | 108,403 | 34,711 | 30,660 | 41,098 | 10,160 | 8,328 |
4644
+ | \`meter\` | 37,896 | 13,378 | 11,948 | 11,050 | 2,821 | 2,509 |
4645
+ | \`navigation\` | 36,814 | 13,270 | 11,770 | 7,077 | 2,025 | 1,715 |
4646
+ | \`notifications\` | 71,808 | 22,447 | 20,022 | 31,663 | 7,637 | 6,268 |
4647
+ | \`number-input\` | 61,253 | 20,024 | 17,821 | 18,491 | 4,851 | 3,791 |
4648
+ | \`object-inspector\` | 130,338 | 41,206 | 36,213 | 51,884 | 13,191 | 10,671 |
4649
+ | \`option\` | 29,672 | 10,762 | 9,552 | 7,712 | 2,214 | 1,720 |
4650
+ | \`orb\` | 35,265 | 13,489 | 12,038 | 9,730 | 3,690 | 3,222 |
4651
+ | \`outline\` | 37,846 | 13,459 | 11,946 | 12,073 | 3,491 | 2,636 |
4652
+ | \`pagination\` | 153,264 | 46,929 | 40,896 | 62,366 | 15,241 | 12,287 |
4653
+ | \`pin-input\` | 50,409 | 17,316 | 15,449 | 10,058 | 3,179 | 2,491 |
4654
+ | \`popover\` | 66,958 | 23,702 | 20,940 | 9,509 | 2,658 | 2,163 |
4655
+ | \`progress\` | 35,232 | 12,380 | 11,030 | 10,101 | 2,602 | 2,356 |
4656
+ | \`qr-code\` | 44,321 | 17,121 | 15,249 | 18,589 | 6,787 | 5,728 |
4657
+ | \`quote\` | 23,074 | 9,080 | 8,006 | 1,752 | 733 | 537 |
4658
+ | \`radio\` | 50,349 | 15,977 | 14,203 | 11,594 | 2,766 | 2,266 |
4659
+ | \`rating\` | 54,190 | 18,519 | 16,485 | 11,946 | 3,671 | 2,845 |
4660
+ | \`sandbox\` | 104,428 | 31,484 | 27,584 | 72,147 | 19,289 | 16,159 |
4661
+ | \`scatter-chart\` | 100,317 | 33,785 | 29,872 | 25,197 | 6,983 | 5,655 |
4662
+ | \`scroll-area\` | 35,437 | 12,027 | 10,679 | 13,489 | 3,583 | 2,910 |
4663
+ | \`select\` | 124,418 | 40,070 | 35,132 | 35,147 | 9,068 | 7,080 |
4664
+ | \`skeleton\` | 26,090 | 9,664 | 8,589 | 4,738 | 1,433 | 1,190 |
4665
+ | \`skip-link\` | 25,441 | 9,851 | 8,690 | 2,780 | 983 | 753 |
4666
+ | \`slider\` | 67,842 | 20,140 | 17,971 | 28,108 | 6,184 | 5,029 |
4667
+ | \`sparkline\` | 53,442 | 18,851 | 16,851 | 11,421 | 3,520 | 2,874 |
4668
+ | \`speed-dial\` | 75,797 | 26,105 | 23,131 | 17,946 | 4,405 | 3,556 |
4669
+ | \`splitter\` | 49,804 | 16,210 | 14,531 | 20,431 | 4,937 | 4,060 |
4670
+ | \`stat\` | 28,117 | 10,372 | 9,280 | 5,157 | 1,483 | 1,178 |
4671
+ | \`steps\` | 67,449 | 21,378 | 19,083 | 27,416 | 6,636 | 5,388 |
4672
+ | \`strands\` | 62,138 | 23,148 | 20,396 | 38,015 | 13,797 | 11,925 |
4673
+ | \`switch\` | 43,562 | 14,638 | 13,007 | 5,998 | 1,793 | 1,392 |
4674
+ | \`table\` | 135,900 | 40,155 | 34,974 | 62,687 | 15,581 | 12,853 |
4675
+ | \`tabs\` | 55,263 | 17,753 | 15,846 | 19,437 | 4,783 | 3,864 |
4676
+ | \`tag\` | 47,247 | 16,757 | 14,968 | 13,016 | 3,658 | 2,940 |
4677
+ | \`text\` | 28,756 | 9,943 | 8,755 | 7,396 | 1,519 | 1,260 |
4678
+ | \`textarea\` | 47,785 | 15,949 | 14,227 | 9,318 | 2,678 | 2,149 |
4679
+ | \`time-input\` | 193,597 | 56,836 | 49,480 | 72,824 | 16,646 | 13,626 |
4680
+ | \`time-picker\` | 111,928 | 33,946 | 29,873 | 46,251 | 11,628 | 9,402 |
4681
+ | \`timeline\` | 38,179 | 13,326 | 11,921 | 10,947 | 2,752 | 2,268 |
4682
+ | \`toast\` | 58,767 | 19,781 | 17,659 | 20,006 | 5,409 | 4,346 |
4683
+ | \`toggle\` | 50,439 | 16,509 | 14,668 | 10,854 | 3,077 | 2,473 |
4684
+ | \`toolbar\` | 33,726 | 12,066 | 10,723 | 7,822 | 2,163 | 1,725 |
4685
+ | \`tooltip\` | 61,420 | 21,833 | 19,329 | 11,220 | 3,137 | 2,506 |
4686
+ | \`tour\` | 93,661 | 30,696 | 27,131 | 29,787 | 7,498 | 5,974 |
4687
+ | \`tree\` | 76,275 | 24,651 | 21,957 | 25,874 | 6,943 | 5,657 |
4688
+ | \`trend\` | 31,231 | 12,050 | 10,722 | 4,982 | 1,613 | 1,353 |
4689
+ | \`video\` | 161,715 | 47,866 | 41,770 | 86,712 | 20,444 | 16,964 |
4690
+ | \`video-playlist\` | 143,639 | 44,278 | 38,906 | 58,709 | 14,190 | 11,656 |
4691
+ | \`virtual-list\` | 65,445 | 22,136 | 19,690 | 25,282 | 7,676 | 6,226 |
4649
4692
 
4650
4693
  ## What an install adds to \`node_modules\`
4651
4694
 
@@ -4657,12 +4700,12 @@ stripped column shows the bytes we removed.
4657
4700
 
4658
4701
  | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
4659
4702
  |---|---|---|---|---|
4660
- | \`@fusion.dev/helix-core\` | 2,561,244 | 559 | 727,996 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
4661
- | \`@fusion.dev/helix-headless\` | 25,354,104 | 716 | 2,256,499 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
4703
+ | \`@fusion.dev/helix-core\` | 2,560,950 | 559 | 727,994 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\`, \`tslib\` |
4704
+ | \`@fusion.dev/helix-headless\` | 25,355,390 | 716 | 2,256,500 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`tslib\`, \`uqr\` |
4662
4705
  | \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
4663
4706
  | \`@fusion.dev/helix-styles\` | 121,089 | 6 | 0 | none |
4664
4707
  | \`@fusion.dev/helix-theme\` | 529,299 | 8 | 5,393 | none |
4665
- | \`@fusion.dev/helix\` | 26,639,279 | 968 | 539,177 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
4708
+ | \`@fusion.dev/helix\` | 26,659,493 | 969 | 539,178 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\`, \`tslib\` |
4666
4709
 
4667
4710
  ## Not measured yet
4668
4711
 
@@ -7715,21 +7758,15 @@ title: Using Helix with an agent
7715
7758
 
7716
7759
  # Using Helix with an agent
7717
7760
 
7718
- **We publish this guide as a web page so that every tool can read it.** It began
7719
- as \`.claude/skills/using-helix/SKILL.md\`, a file format that one vendor reads in
7720
- a repository. Every other vendor reads its own file:
7761
+ This guide is in two places, and both say the same thing:
7721
7762
 
7722
- - Cursor reads \`.cursor/rules\`.
7723
- - Copilot reads \`.github/copilot-instructions.md\`.
7763
+ - this page, which [llms.txt](https://fusion.dev/llms.txt) indexes
7764
+ - \`skills/helix/SKILL.md\` inside \`@fusion.dev/helix\`, which matches the version
7765
+ you installed and works offline
7724
7766
 
7725
- If you install the published packages, you have none of these files. You have
7726
- this site and no checkout of our repository.
7727
-
7728
- So the guide lives in one place, here, at a URL that
7729
- [llms.txt](https://fusion.dev/llms.txt) indexes and that each of those files can
7730
- link to. Paste the link into the file your tool reads. [The MCP
7731
- server](./coding-agents) works with any vendor and runs code, and Claude,
7732
- Cursor, Windsurf, and Zed all support it.
7767
+ [Link your tool to this guide](#link-your-tool-to-this-guide) says how to point
7768
+ each tool at one of them. [The MCP server](./coding-agents) works with any
7769
+ vendor and runs code, and Claude, Cursor, Windsurf, and Zed all support it.
7733
7770
 
7734
7771
  ## Read the family before writing its tags
7735
7772
 
@@ -7930,20 +7967,28 @@ If you are adding a script to a recipe, use the component.
7930
7967
 
7931
7968
  ## Link your tool to this guide
7932
7969
 
7933
- **Link to this page from your instructions file, and do not copy it.** Each tool
7934
- that reads project instructions reads a file in your repository, and each tool
7935
- reads a different one. A copy starts to go stale as soon as you paste it, and
7936
- this page changes with the library.
7970
+ **Point your tool at the guide, and do not copy it.** A copy starts to go stale
7971
+ as soon as you paste it, and the guide changes with the library.
7972
+
7973
+ The skill in the package matches the Helix you installed. In Claude Code, link
7974
+ it into your project's skills folder:
7975
+
7976
+ \`\`\`sh
7977
+ mkdir -p .claude/skills
7978
+ ln -s ../../node_modules/@fusion.dev/helix/skills/helix .claude/skills/helix
7979
+ \`\`\`
7980
+
7981
+ Other tools read a file in your repository. Add a line to it that names the
7982
+ skill, or this page:
7937
7983
 
7938
7984
  \`\`\`md
7939
- Helix: read https://fusion.dev/helix/docs/using-helix-with-an-agent
7940
- before writing components, and https://fusion.dev/helix/custom-elements.json
7941
- for the API.
7985
+ Helix: read node_modules/@fusion.dev/helix/skills/helix/SKILL.md before
7986
+ writing components, and node_modules/@fusion.dev/helix/api.json for the API.
7942
7987
  \`\`\`
7943
7988
 
7944
7989
  | Tool | Where it goes |
7945
7990
  |---|---|
7946
- | Claude Code | \`AGENTS.md\` or \`CLAUDE.md\`, or a skill in \`.claude/skills/\` |
7991
+ | Claude Code | \`.claude/skills/helix\`, or a line in \`AGENTS.md\` or \`CLAUDE.md\` |
7947
7992
  | Cursor | \`.cursor/rules/\` |
7948
7993
  | GitHub Copilot | \`.github/copilot-instructions.md\` |
7949
7994
  | Anything else | Whatever it reads. The line is the same |
@@ -7951,7 +7996,7 @@ for the API.
7951
7996
  We do not write those files for you, and we chose this on purpose. You would
7952
7997
  have to maintain a file we generated in your repository against our changes. A
7953
7998
  tool that rewrote it on install would be a dependency you did not ask for, in a
7954
- directory you own. You paste the line above, and you can delete it.
7999
+ directory you own. You add the link or the line, and you can delete it.
7955
8000
 
7956
8001
  ## Install the Helix MCP server
7957
8002