@fusion.dev/helix-docs 0.148.0 → 0.149.0

package/dist/sources.generated.js

@@ -924,6 +924,23 @@ The eight syntax roles for code are \`callable\`, \`comment\`, \`constant\`,
 \`invalid\`, \`keyword\`, \`name\`, \`string\`, and \`tag\`. A full editor theme has more
 roles. Helix has fewer because code in documentation only needs to be read.
 
+### Scrollbars
+
+\`Scroll Area\`, \`Chat\`, and \`Virtual List\` color their scrollbars with three
+tokens:
+
+- \`--helix-scrollbar-thumb-color\` is the thumb at rest. It is a mid gray that
+  measures at least 3:1 against the page and every surface, in both modes.
+- \`--helix-scrollbar-thumb-hover-color\` is the thumb while the pointer is over
+  its scroller. It is \`foreground-subtle\`.
+- \`--helix-scrollbar-track-color\` is the track behind the thumb. It is
+  \`transparent\`, so the scroller's own ground shows through.
+
+Each of the three reads its own hook first, such as \`--scroll-area-thumb-color\`
+or \`--chat-scrollbar-thumb-color\`, so you can recolor one scroller and leave
+the rest. Set the tokens to recolor all three. Other families that scroll keep
+the browser's own scrollbar.
+
 ## Why colors use OKLCH
 
 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
 for a slot of the same name. Helix never renders both.
 
 \`\`\`html
+<!-- The trigger, which names the tooltip in aria-describedby -->
+<helix-button
+  aria-describedby="save-tip"
+  id="save"
+>Save</helix-button>
+
 <!-- The property -->
 <helix-tooltip
   content="Save"
@@ -2154,9 +2177,40 @@ leaves removing it to your framework.
 - In the search field, Down moves into the list, and Escape empties the search.
   With \`no-panel\`, Escape on an empty search closes the list.
 - Screen readers read the selected note first, then how each other note links
-  to it, such as "Linked from Roadmap", and the count as a search narrows it.
+  to it, such as "Linked from Roadmap". They hear the count when a search or
+  the legend changes it.
+- After the arrow keys, plus, minus, or the buttons move the drawing, screen
+  readers hear which way it went, such as "Moved right" or "Zoomed in".
+  \`connectGraph\` tells the frame once the drawing has moved. If you answer
+  \`helix-graph-pan\` and \`helix-graph-zoom\` yourself, call \`frame.moved()\` once
+  your view has moved.
+- When you change \`nodes\` or \`links\`, the list keeps the note the keys are on.
+  When that note is removed, the keys move to the note that took its row.
 - Change the words with \`search-label\`, \`count-label\`, \`selected-label\`,
-  \`links-to-label\`, \`linked-from-label\`, and \`linked-both-label\`.
+  \`links-to-label\`, \`linked-from-label\`, \`linked-both-label\`,
+  \`moved-up-label\`, \`moved-down-label\`, \`moved-left-label\`,
+  \`moved-right-label\`, \`zoomed-in-label\`, and \`zoomed-out-label\`, or register
+  them for a language with \`registerWords\` (see
+  [Localization](./localization)).
+
+## Events
+
+The frame sends these events. Their names follow Map's: \`helix-graph-pan\`,
+\`helix-graph-zoom\`, \`helix-graph-ready\`, and \`helix-graph-part-change\` match
+\`helix-map-pan\`, \`helix-map-zoom\`, \`helix-map-ready\`, and
+\`helix-map-part-change\`. These are the names Graph keeps.
+
+| Event | Sent when | Cancelable | Who listens |
+|---|---|---|---|
+| \`helix-before-activate\` | A note is about to be selected | Yes | You, to keep the selection in your own state |
+| \`helix-activate\` | A note was selected, in the list or the drawing | No | You |
+| \`helix-graph-filter\` | A group in the legend was pressed, before its notes are shown or hidden | Yes | You, to set \`hiddenGroups\` yourself |
+| \`helix-graph-layout\` | A layout settled, with where it put each note | No | You, to keep the positions |
+| \`helix-graph-ready\` | The graph has been drawn whole | No | You, to show the graph once it is finished |
+| \`helix-graph-pan\` | An arrow key or a pan button asked the drawing to move | No | \`connectGraph\`, or your own renderer |
+| \`helix-graph-zoom\` | Plus, minus, or a zoom button asked the drawing to zoom | No | \`connectGraph\`, or your own renderer |
+| \`helix-graph-part-change\` | The notes, links, selection, depth, or gestures changed | No | \`connectGraph\` only. It stays on the frame. |
+| \`helix-graph-signal\` | \`signal()\` was called | No | \`connectGraph\` only. It stays on the frame. |
 
 ## Write a driver
 
@@ -2194,7 +2248,7 @@ title: Iconography
 <helix-icon name="trash"></helix-icon>
 \`\`\`
 
-Helix has 125 glyphs, 120 of them from Phosphor, drawn on a 256 box at
+Helix has 126 glyphs, 121 of them from Phosphor, drawn on a 256 box at
 Phosphor's bold weight. We keep Phosphor's own geometry. Rescaling to a 24 box
 would change the optical weight of every glyph, and the set would stop matching
 Phosphor. We use the bold weight because Phosphor's regular weight is a
@@ -2274,7 +2328,7 @@ both are set, \`icon\` wins.
 
 \`icon\` also keeps your bundle small. \`name\` looks up glyphs in an index of the
 whole set, and no bundler can tree-shake that index. If you render one icon by
-\`name\`, you ship the whole set: 17 kB gzipped for 125 glyphs. With \`icon\`, you
+\`name\`, you ship the whole set: 17 kB gzipped for 126 glyphs. With \`icon\`, you
 ship only the glyph you import.
 
 \`icon\` also draws glyphs from outside this set. Anything that exports the same
@@ -2692,7 +2746,7 @@ custom events. [React](./react) covers both.
 See [Tiers](./tiers) for how the packages relate and which one to use.
 `,
     localization: `---
-description: Set the locale of date, time, and number controls, translate component strings, and lay out pages right to left.
+description: Set the locale of date, time, and number controls, translate the built-in words, and lay out pages right to left.
 section: Essentials
 title: Localization and RTL
 ---
@@ -2797,27 +2851,175 @@ Six families format numbers or dates and take a \`locale\`:
 ></helix-pagination>
 \`\`\`
 
-If you do not set \`locale\`, these controls use the browser's locale, which is
-usually correct. Set \`locale\` when your users choose your application's
+If you do not set \`locale\`, these controls use the nearest \`lang\` attribute,
+then the browser's locale, which is usually correct. Set \`locale\` when your users choose your application's
 language separately from the language of their operating system.
 
 The first day of the week comes from \`Intl.Locale\`'s week information, which
 Firefox does not provide. There, and where you set no \`locale\`, the week starts
 on Sunday. Set \`first-day-of-week\` to choose the day yourself.
 
-\`locale\` formats dates, times, and numbers. It does not translate the words a
-control speaks, such as "Previous month" on a calendar. Set those through their
-properties, such as \`previous-label\` and \`next-label\` on Date Picker and Date
-Input. A time wheel's name, such as "Hour", comes from the locale.
+\`locale\` formats dates, times, and numbers. On a family that reads the words
+registry, it also picks the words. On the others, set the words a control
+speaks through their properties, such as \`previous-label\` and \`next-label\` on
+Date Picker and Date Input. See
+[Translate the built-in words](#translate-the-built-in-words). A time wheel's
+name, such as "Hour", comes from the locale.
 
 Formatting uses \`Intl\`, so Helix bundles no locale data, and you have nothing to
 keep up to date.
 
-## Translate component strings
+## Calendars
+
+Date Picker, Date Input, and Format Date write dates in five calendars. Each
+has the Gregorian months, so the days in a Date Picker are the same in all
+five:
+
+| Calendar | October 6, 2026 | The locale's own calendar for |
+|---|---|---|
+| \`gregory\` | October 6, 2026 | Most locales |
+| \`buddhist\` | 6 ตุลาคม 2569 | \`th-TH\` |
+| \`japanese\` | 令和8年10月6日 | \`ja-JP-u-ca-japanese\` |
+| \`roc\` | 民國115年10月6日 | \`zh-TW-u-ca-roc\` |
+| \`iso8601\` | 2026 October 6 | A locale written with \`-u-ca-iso8601\` |
 
-More than a hundred properties in the headless tier set text that your users
-see. Examples include \`pan-up-label\` on a map and \`remove-label\` on a combobox's
-selected tags. Properties that combine values are format templates:
+If you do not set \`calendar\`, these components use the locale's own calendar
+when it is one of the five. Set \`calendar\` to choose one yourself:
+
+\`\`\`html
+<helix-date-picker
+  calendar="buddhist"
+  locale="en-US"
+></helix-date-picker>
+\`\`\`
+
+**Every other calendar is written as Gregorian**, in the locale's language and
+digits. This includes the Persian, Islamic, Hebrew, Ethiopic, Indian, Coptic,
+Chinese, and Dangi calendars, whose months are not the Gregorian months. A page
+in \`fa-IR\`, whose own calendar is Persian, shows October 2026 as "اکتبر ۲۰۲۶".
+
+The value is \`YYYY-MM-DD\` in every calendar. In a \`segmented\` Date Input, the
+segments hold the Gregorian day, month, and year, so a Buddhist date is typed
+with the year 2026.
+
+## Translate the built-in words
+
+Components have English words built in: the names a screen reader hears, the
+sentences a live region says, and the text on buttons such as "Load more".
+Register the words for a language once, and every element in that language
+speaks them:
+
+\`\`\`js
+import { registerWords } from '@fusion.dev/helix'
+
+registerWords('pl', {
+  'helix-combobox': {
+    emptyText: 'Brak wyników',
+    resultsLabel:
+      '{count, plural, one {# wynik} few {# wyniki} many {# wyników} other {# wyniku}}',
+  },
+  'helix-data-table': {
+    nextLabel: 'Następna strona',
+    previousLabel: 'Poprzednia strona',
+  },
+})
+\`\`\`
+
+Each family's words are keyed by its tag, such as \`helix-combobox\`, and then
+by the property name. The headless and styled tiers share one key. To type the
+keys, import the generated types once:
+
+\`\`\`ts
+import type {} from '@fusion.dev/helix/words'
+\`\`\`
+
+Every family reads the registry for the words it declares, the words several
+families share included. Register a shared word under each family's key: the
+name of a dismiss button, \`dismissLabel\`, under \`helix-callout\`; a collection's
+\`emptyText\` and \`loadingText\` under \`helix-tree\`; and the sentence a field
+reports when a required value is missing, \`valueMissingMessage\`, under
+\`helix-checkbox\`. A family that has its own English for a shared word, such as
+Tag's \`Remove {label}\`, keeps it until you register another.
+
+The name a family gives itself where nothing else names it is \`fallbackLabel\`
+in every family, such as \`{ 'helix-table': { fallbackLabel: 'Tabelle' } }\`.
+
+### Which words an element uses
+
+1. **A value you set on the element**, as an attribute or a property. The
+   English counts as a value, so \`empty-text="No matches"\` keeps the English
+   on every page.
+2. The words registered for the element's locale.
+3. The English.
+
+Set the property to \`null\`, or remove the attribute, to return to the
+registered words. Reading the property gives the word the element uses, in its
+locale.
+
+### Which locale an element speaks
+
+1. The element's \`locale\` property.
+2. The nearest \`lang\` attribute, read through shadow roots, such as
+   \`<html lang="pl">\`.
+3. The browser's language.
+
+The same locale picks the words, the plural forms, and the way numbers are
+written, so one sentence never mixes two languages.
+
+A word that a language does not have falls back one key at a time, through
+the regional, script, and language forms of the tag and then to English. A
+\`de-CH\` page uses a \`de-CH\` word, then a \`de\` word, then the English. Hong Kong
+(\`zh-HK\`) reaches a \`zh-Hant\` word before a \`zh\` word. Name a set of words by
+its full tag where a language has regional forms, such as \`pt-BR\`, \`pt-PT\`, and
+\`es-419\`.
+
+When you register words, or change the \`lang\` of the \`<html>\` element, every
+element on the page updates once. When you change the \`lang\` of another
+element, call \`refreshWords()\`.
+
+### Write a message
+
+Words are messages in a small part of the ICU MessageFormat syntax, which
+translation tools read:
+
+| Syntax | What it does |
+|---|---|
+| \`{name}\` | Puts in a value. A number is written in the locale, such as \`1.200\` in German. |
+| \`{p, number, percent}\` | Writes a number as a percentage, with the sign where the locale puts it. \`{n, number, integer}\` rounds. |
+| \`{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. |
+| \`{n, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}\` | Picks a form for a position. |
+| \`{direction, select, ascending {...} descending {...} other {...}}\` | Picks a whole sentence by a value, so a language can phrase each one its own way. |
+| \`''\` and \`'{'\` | Write one apostrophe, and a brace as text. A single apostrophe is text, so \`L'élément\` needs no escaping. |
+
+Each property's reference entry names its placeholders. A message that does
+not parse shows as written, so a typo appears on the page where you can see it.
+
+\`formatMessage(message, values, locale)\` formats a message for your own
+elements, and \`wordsLocale(element)\` gives the locale an element speaks.
+
+### Server rendering
+
+A server knows the element's own attributes and the words your server code
+registered. It does not know the page around the element. So on a server, and
+in the first render while an element hydrates, a word uses the element's
+\`locale\`, then its own \`lang\`, then the locale you set with
+\`setDefaultWordsLocale\`, then English. After hydration, the element reads the
+nearest \`lang\` and updates once if its words change.
+
+- Register the same words on the server and in the browser, before the
+  elements are defined, so the two renders agree.
+- A server that renders one language calls \`setDefaultWordsLocale('pl')\` once.
+- A server that renders several languages sets \`lang\` or \`locale\` on the
+  elements.
+
+The registry holds no current language, so two requests in two languages in
+one process do not affect each other.
+
+### Set the words of other families
+
+A value set on the element always wins, so any family takes its words as
+properties too, such as \`empty-text\` on a listbox. Properties that combine
+values are format templates:
 
 \`\`\`html
 <helix-pagination-summary
@@ -2849,7 +3051,8 @@ or \`disable-times\` rules out.
 A message appears in the browser's own validation bubble and on the line under
 the field. \`feedback\` does not reach the bubble. If you do not set a message, a
 text field shows the browser's own message, which is already in your user's
-language. Every other control shows its English sentence.
+language. Every other control shows its English sentence. An empty message
+counts as not set.
 
 \`\`\`html
 <helix-number-input
@@ -2871,9 +3074,8 @@ Aria's \`@react-stately/color\` translates, so you can reuse that table.
 ></helix-color-picker>
 \`\`\`
 
-**Pass these strings from your own translation system.** Helix ships English
-defaults and no translation tools. If Helix had its own string catalog, you
-would have to keep two catalogs in step.
+Helix ships English words and no translations. Pass the words from your own
+translation system, either to \`registerWords\` or to the properties.
 
 ## What to check when you add a language
 
@@ -2905,12 +3107,12 @@ would have to keep two catalogs in step.
 
 Helix does not include:
 
-- a message catalog
-- a pluralization helper
+- translations of its words into other languages
+- a message catalog for your own application's text
 - a date-range formatter, beyond what the controls format themselves
 
-These belong to your application's i18n layer. You can set every translatable
-property from that layer.
+These belong to your application's i18n layer. You can register every word,
+and set every translatable property, from that layer.
 `,
     maps: `---
 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.
 
 To show that a place has been visited, add \`passed\`. The marker is drawn in a
 muted color, and screen readers hear its name followed by "passed". Use
-\`passed-label\` to change that word.
+\`passed-label\` to change that sentence, where \`{label}\` is the place's name,
+such as \`{label} (visited)\`.
 
 ### Clusters
 
@@ -3626,7 +3829,7 @@ on its own.
 
 | | Raw | Gzip | Brotli |
 |---|---|---|---|
-| Lit and \`@fusion.dev/helix-core\` | 205,917 | 64,259 | 55,327 |
+| Lit and \`@fusion.dev/helix-core\` | 223,692 | 69,690 | 59,939 |
 
 ## Whole packages
 
@@ -3637,12 +3840,12 @@ either barrel. The per-component tables show what your page pays.
 
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 205,127 | 63,820 | 54,886 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 1,118,470 | 300,499 | 227,376 | Every headless family. The barrel entry includes all of them. |
-| \`@fusion.dev/helix-icons\` | 55,738 | 17,784 | 15,143 | The whole glyph set. |
+| \`@fusion.dev/helix-core\` | 222,903 | 69,474 | 59,548 | The element base class, mixins, decorators, and floating positioning. |
+| \`@fusion.dev/helix-headless\` | 1,163,184 | 312,570 | 236,652 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-icons\` | 56,111 | 17,847 | 15,166 | The whole glyph set. |
 | \`@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. |
 | \`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. |
-| \`@fusion.dev/helix\` | 1,730,273 | 417,951 | 299,916 | Every styled family. |
+| \`@fusion.dev/helix\` | 1,784,404 | 432,690 | 309,814 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -3659,17 +3862,17 @@ shows the whole cost of using the base layer on its own.
 | \`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\`. |
 | \`helix.css\` | 207 | 148 | 118 | The other four stylesheets in one import, in the order they must load. |
 | \`primitives.css\` | 7,510 | 1,402 | 1,201 | The primitive layer. It is private, and it ships because \`tokens.css\` refers to it. |
-| \`tokens.css\` | 22,349 | 2,664 | 2,247 | The 193 semantic tokens. Every styled component needs them. |
+| \`tokens.css\` | 22,571 | 2,710 | 2,281 | The 196 semantic tokens. Every styled component needs them. |
 
 ## What the numbers say
 
-**Most of your first component is the shared runtime.** The median styled family is 16,549 bytes gzipped alone, and it adds 3,604 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.
+**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.
 
-Across the 104 styled components, the smallest is \`code\` at 9,283 bytes gzipped alone, and the largest is \`data-table\` at 65,711. Every family together is 417,951.
+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.
 
-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 300,499 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.
+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.
 
-The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 15,428 bytes gzipped alone.
+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.
 
 ## Compared with other systems
 
@@ -3681,43 +3884,43 @@ The table has no whole-library row. That row would compare how many components e
 
 | Component | System | Raw | Gzip | Brotli |
 |---|---|---|---|---|
-| \`button\` | **Helix** | 44,047 | 14,711 | 13,071 |
+| \`button\` | **Helix** | 44,670 | 14,891 | 13,257 |
 | | Carbon | 133,058 | 20,959 | 17,685 |
 | | Material Web | 47,060 | 14,173 | 12,591 |
 | | Shoelace | 62,628 | 18,287 | 15,805 |
 | | Spectrum | 98,792 | 22,045 | 18,674 |
-| \`checkbox\` | **Helix** | 47,527 | 15,292 | 13,617 |
+| \`checkbox\` | **Helix** | 48,304 | 15,478 | 13,866 |
 | | Carbon | 60,255 | 15,609 | 13,550 |
 | | Material Web | 43,785 | 13,556 | 12,015 |
 | | Shoelace | 47,614 | 15,177 | 13,301 |
 | | Spectrum | 62,492 | 15,437 | 13,481 |
-| \`dialog\` | **Helix** | 44,710 | 15,294 | 13,579 |
+| \`dialog\` | **Helix** | 45,463 | 15,531 | 13,837 |
 | | Carbon | 510,866 | 67,390 | 39,189 |
 | | Material Web | 34,238 | 11,510 | 10,229 |
 | | Shoelace | 52,754 | 17,698 | 15,554 |
 | | Spectrum | 155,708 | 31,899 | 26,262 |
-| \`radio\` | **Helix** | 50,827 | 15,828 | 14,024 |
+| \`radio\` | **Helix** | 51,603 | 16,019 | 14,245 |
 | | Carbon | 63,055 | 16,887 | 14,605 |
 | | Material Web | 41,044 | 13,234 | 11,757 |
 | | Shoelace | 34,865 | 12,027 | 10,559 |
 | | Spectrum | 38,685 | 10,660 | 9,370 |
-| \`switch\` | **Helix** | 44,242 | 14,743 | 13,118 |
+| \`switch\` | **Helix** | 45,017 | 14,936 | 13,319 |
 | | Carbon | 69,423 | 17,127 | 14,764 |
 | | Material Web | 50,155 | 14,577 | 12,935 |
 | | Shoelace | 37,833 | 11,814 | 10,568 |
 | | Spectrum | 62,322 | 15,059 | 13,321 |
-| \`tabs\` | **Helix** | 47,274 | 15,200 | 13,465 |
+| \`tabs\` | **Helix** | 47,906 | 15,383 | 13,685 |
 | | Carbon | 578,766 | 73,537 | 43,235 |
 | | Material Web | 38,883 | 12,820 | 11,368 |
 | | Shoelace | 54,573 | 17,140 | 15,068 |
 | | Spectrum | 64,875 | 18,298 | 16,283 |
-| \`tooltip\` | **Helix** | 63,778 | 22,685 | 20,074 |
+| \`tooltip\` | **Helix** | 61,441 | 21,738 | 19,283 |
 | | Carbon | 189,382 | 30,354 | 22,273 |
 | | Material Web | | not shipped | |
 | | Shoelace | 57,412 | 20,220 | 17,933 |
 | | Spectrum | 136,599 | 40,552 | 35,286 |
 
-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,168 bytes gzipped. 11 of 27 peer measurements are smaller than the Helix row.
+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.
 
 Helix's \`radio\` family includes Radio Group, so its row carries an element that some peer rows measure without.
 
@@ -3763,104 +3966,104 @@ Structure, accessibility, state, and form participation. It has no presentation
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 34,599 | 12,746 | 11,253 | 5,677 | 1,668 | 1,124 |
-| \`announcement\` | 37,793 | 13,662 | 12,172 | 4,958 | 1,504 | 954 |
-| \`app-header\` | 26,057 | 10,021 | 8,867 | 2,355 | 770 | 465 |
-| \`area-chart\` | 82,327 | 28,998 | 25,687 | 13,783 | 4,189 | 3,173 |
-| \`avatar\` | 28,724 | 10,723 | 9,521 | 4,431 | 1,293 | 913 |
-| \`badge\` | 26,341 | 10,223 | 9,051 | 2,856 | 881 | 569 |
-| \`bar-chart\` | 85,682 | 29,992 | 26,565 | 16,750 | 5,082 | 4,033 |
-| \`blockquote\` | 26,495 | 10,392 | 9,172 | 2,728 | 987 | 575 |
-| \`breadcrumbs\` | 31,013 | 11,998 | 10,647 | 5,890 | 2,029 | 1,369 |
-| \`button\` | 36,926 | 13,243 | 11,777 | 5,052 | 1,553 | 1,014 |
-| \`button-group\` | 28,635 | 10,976 | 9,708 | 4,009 | 1,318 | 784 |
-| \`callout\` | 30,510 | 11,691 | 10,310 | 1,329 | 511 | 256 |
-| \`canvas\` | 94,520 | 29,726 | 25,973 | 56,373 | 16,965 | 13,959 |
-| \`card\` | 25,683 | 9,868 | 8,720 | 2,120 | 629 | 369 |
-| \`carousel\` | 40,679 | 14,335 | 12,748 | 15,245 | 4,186 | 3,230 |
-| \`chat\` | 64,573 | 21,728 | 19,231 | 20,705 | 6,185 | 4,748 |
-| \`checkbox\` | 40,703 | 13,778 | 12,250 | 3,216 | 1,009 | 536 |
-| \`checkbox-group\` | 47,130 | 15,435 | 13,751 | 8,518 | 2,372 | 1,649 |
-| \`code\` | 22,676 | 8,995 | 7,962 | 451 | 193 | -39 |
-| \`code-block\` | 89,900 | 30,256 | 26,787 | 26,214 | 7,115 | 5,544 |
-| \`color-input\` | 128,357 | 40,479 | 35,443 | 45,336 | 11,354 | 9,239 |
-| \`color-picker\` | 89,868 | 28,497 | 25,069 | 37,476 | 9,868 | 7,961 |
-| \`combobox\` | 132,206 | 40,879 | 35,886 | 40,061 | 9,697 | 7,561 |
-| \`command\` | 91,109 | 28,172 | 24,749 | 28,756 | 7,459 | 5,789 |
-| \`copy-button\` | 81,732 | 27,904 | 24,705 | 18,043 | 4,823 | 3,712 |
-| \`data-table\` | 177,469 | 52,857 | 45,447 | 87,094 | 22,420 | 17,791 |
-| \`date-input\` | 129,176 | 39,698 | 34,814 | 35,517 | 8,680 | 6,802 |
-| \`date-picker\` | 51,896 | 17,290 | 15,373 | 16,843 | 4,551 | 3,411 |
-| \`description-list\` | 25,620 | 9,767 | 8,627 | 2,225 | 653 | 233 |
-| \`dialog\` | 39,229 | 14,016 | 12,440 | 5,808 | 1,749 | 1,152 |
-| \`divider\` | 25,124 | 9,813 | 8,631 | 1,486 | 526 | 92 |
-| \`donut-chart\` | 81,790 | 28,585 | 25,297 | 14,549 | 4,372 | 3,349 |
-| \`drawer\` | 42,104 | 15,079 | 13,405 | 5,900 | 1,857 | 1,340 |
-| \`drilldown\` | 41,055 | 14,565 | 12,909 | 7,827 | 2,197 | 1,433 |
-| \`empty\` | 26,122 | 10,072 | 8,893 | 1,955 | 689 | 312 |
-| \`file-input\` | 63,230 | 21,118 | 18,716 | 17,157 | 5,119 | 3,805 |
-| \`filter-input\` | 123,578 | 38,261 | 33,530 | 41,535 | 10,097 | 7,981 |
-| \`format-date\` | 30,502 | 11,522 | 10,203 | 4,264 | 1,268 | 820 |
-| \`graph\` | 61,596 | 20,349 | 18,024 | 14,949 | 4,733 | 3,544 |
-| \`heatmap\` | 88,781 | 30,512 | 26,905 | 16,840 | 4,883 | 3,737 |
-| \`icon\` | 82,599 | 28,375 | 24,312 | 56,734 | 19,634 | 15,484 |
-| \`icon-button\` | 37,322 | 13,275 | 11,807 | 5,451 | 1,598 | 1,048 |
-| \`image\` | 27,892 | 10,443 | 9,263 | 4,150 | 1,260 | 830 |
-| \`input\` | 47,135 | 16,195 | 14,271 | 7,501 | 2,541 | 1,586 |
-| \`kbd\` | 28,879 | 11,113 | 9,854 | 3,603 | 1,143 | 675 |
-| \`legend\` | 35,018 | 13,100 | 11,583 | 3,288 | 1,121 | 700 |
-| \`lightbox\` | 48,210 | 16,024 | 14,180 | 14,009 | 3,825 | 2,707 |
-| \`line-chart\` | 83,551 | 29,222 | 25,888 | 14,668 | 4,366 | 3,352 |
-| \`list\` | 37,656 | 13,730 | 12,182 | 9,263 | 2,724 | 2,018 |
-| \`listbox\` | 72,268 | 23,357 | 20,688 | 17,105 | 4,777 | 3,591 |
-| \`loader\` | 26,858 | 10,297 | 9,117 | 2,645 | 908 | 480 |
-| \`map\` | 79,735 | 23,671 | 20,572 | 39,195 | 10,047 | 7,803 |
-| \`megamenu\` | 61,409 | 22,351 | 19,751 | 8,029 | 2,286 | 1,542 |
-| \`menu\` | 82,618 | 28,310 | 24,982 | 18,425 | 4,687 | 3,451 |
-| \`meter\` | 29,827 | 11,213 | 9,929 | 5,137 | 1,545 | 1,107 |
-| \`navigation\` | 32,202 | 12,190 | 10,834 | 2,157 | 738 | 358 |
-| \`notifications\` | 53,396 | 17,636 | 15,706 | 17,009 | 4,468 | 3,354 |
-| \`number-input\` | 50,748 | 17,027 | 15,162 | 10,208 | 2,827 | 1,918 |
-| \`object-inspector\` | 108,235 | 36,138 | 31,800 | 34,472 | 9,732 | 7,581 |
-| \`option\` | 27,875 | 10,326 | 9,149 | 3,986 | 967 | 527 |
-| \`outline\` | 32,807 | 12,399 | 10,969 | 6,688 | 2,121 | 1,536 |
-| \`pagination\` | 127,559 | 39,929 | 34,783 | 44,032 | 10,936 | 8,583 |
-| \`pin-input\` | 45,063 | 15,421 | 13,737 | 6,922 | 2,305 | 1,503 |
-| \`popover\` | 61,979 | 22,412 | 19,828 | 5,484 | 1,628 | 1,039 |
-| \`progress\` | 27,468 | 10,548 | 9,381 | 2,984 | 964 | 578 |
-| \`qr-code\` | 40,550 | 15,698 | 13,985 | 17,131 | 6,360 | 5,313 |
-| \`quote\` | 24,253 | 9,588 | 8,453 | 1,226 | 524 | 221 |
-| \`radio\` | 42,325 | 14,273 | 12,634 | 3,889 | 1,180 | 655 |
-| \`rating\` | 47,997 | 16,253 | 14,424 | 7,960 | 2,421 | 1,632 |
-| \`scatter-chart\` | 83,097 | 29,016 | 25,614 | 15,409 | 4,622 | 3,588 |
-| \`scroll-area\` | 32,757 | 12,025 | 10,620 | 8,810 | 2,636 | 1,943 |
-| \`select\` | 110,141 | 35,834 | 31,426 | 27,005 | 7,148 | 5,475 |
-| \`skeleton\` | 24,651 | 9,607 | 8,507 | 1,255 | 496 | 172 |
-| \`skip-link\` | 24,766 | 9,727 | 8,601 | 1,514 | 588 | 220 |
-| \`slider\` | 45,737 | 15,247 | 13,601 | 8,318 | 2,309 | 1,663 |
-| \`sparkline\` | 42,117 | 15,651 | 13,911 | 6,051 | 2,157 | 1,572 |
-| \`speed-dial\` | 66,869 | 24,123 | 21,351 | 9,210 | 2,499 | 1,739 |
-| \`splitter\` | 39,158 | 13,572 | 12,084 | 11,945 | 3,157 | 2,317 |
-| \`stat\` | 25,480 | 9,785 | 8,675 | 1,896 | 633 | 274 |
-| \`steps\` | 47,079 | 16,059 | 14,268 | 11,507 | 3,184 | 2,325 |
-| \`switch\` | 39,557 | 13,598 | 12,049 | 1,790 | 659 | 322 |
-| \`table\` | 76,355 | 23,794 | 21,032 | 29,992 | 8,102 | 6,395 |
-| \`tabs\` | 38,979 | 13,543 | 12,004 | 5,884 | 1,536 | 1,022 |
-| \`tag\` | 38,733 | 14,057 | 12,504 | 6,613 | 1,935 | 1,275 |
-| \`textarea\` | 44,595 | 15,169 | 13,489 | 5,518 | 1,674 | 1,145 |
-| \`time-input\` | 156,499 | 47,737 | 41,370 | 46,506 | 11,375 | 8,974 |
-| \`time-picker\` | 88,789 | 27,745 | 24,463 | 29,628 | 7,823 | 5,910 |
-| \`timeline\` | 27,561 | 10,396 | 9,207 | 3,150 | 789 | 481 |
-| \`toast\` | 45,771 | 16,176 | 14,381 | 9,724 | 3,004 | 2,227 |
-| \`toggle\` | 45,986 | 15,344 | 13,630 | 5,557 | 1,618 | 1,022 |
-| \`toolbar\` | 31,922 | 11,971 | 10,614 | 5,438 | 1,743 | 1,111 |
-| \`tooltip\` | 60,630 | 21,901 | 19,460 | 8,507 | 2,447 | 1,730 |
-| \`tour\` | 79,443 | 26,990 | 23,856 | 17,613 | 4,787 | 3,673 |
-| \`tree\` | 46,891 | 16,052 | 14,220 | 11,959 | 3,412 | 2,604 |
-| \`trend\` | 27,639 | 10,693 | 9,495 | 3,528 | 1,130 | 724 |
-| \`video\` | 121,496 | 37,965 | 33,110 | 52,343 | 12,915 | 10,324 |
-| \`video-playlist\` | 92,660 | 30,563 | 26,927 | 26,601 | 6,605 | 5,067 |
-| \`virtual-list\` | 47,451 | 16,793 | 14,912 | 11,904 | 3,743 | 2,825 |
+| \`accordion\` | 32,263 | 11,820 | 10,462 | 5,679 | 1,707 | 1,146 |
+| \`announcement\` | 38,491 | 13,896 | 12,381 | 5,015 | 1,590 | 931 |
+| \`app-header\` | 23,721 | 9,087 | 8,056 | 2,353 | 796 | 438 |
+| \`area-chart\` | 84,979 | 30,124 | 26,713 | 14,029 | 4,184 | 3,324 |
+| \`avatar\` | 31,252 | 11,798 | 10,554 | 4,562 | 1,361 | 882 |
+| \`badge\` | 26,386 | 10,364 | 9,205 | 2,869 | 920 | 498 |
+| \`bar-chart\` | 88,299 | 31,114 | 27,516 | 16,965 | 4,983 | 3,978 |
+| \`blockquote\` | 24,161 | 9,459 | 8,348 | 2,732 | 1,033 | 630 |
+| \`breadcrumbs\` | 33,441 | 13,045 | 11,620 | 5,924 | 2,050 | 1,481 |
+| \`button\` | 37,548 | 13,404 | 11,965 | 5,074 | 1,604 | 980 |
+| \`button-group\` | 26,267 | 10,045 | 8,929 | 3,980 | 1,363 | 775 |
+| \`callout\` | 31,586 | 12,036 | 10,668 | 1,569 | 608 | 265 |
+| \`canvas\` | 97,290 | 30,875 | 27,114 | 57,601 | 17,303 | 14,191 |
+| \`card\` | 23,347 | 8,929 | 7,913 | 2,120 | 666 | 387 |
+| \`carousel\` | 43,148 | 15,402 | 13,713 | 15,308 | 4,121 | 3,121 |
+| \`chat\` | 69,924 | 23,502 | 20,803 | 21,455 | 6,226 | 5,027 |
+| \`checkbox\` | 41,475 | 13,947 | 12,496 | 3,392 | 1,098 | 569 |
+| \`checkbox-group\` | 48,099 | 15,665 | 13,987 | 8,890 | 2,451 | 1,695 |
+| \`code\` | 20,340 | 8,059 | 7,173 | 451 | 231 | 7 |
+| \`code-block\` | 92,691 | 31,351 | 27,815 | 26,518 | 7,089 | 5,533 |
+| \`color-input\` | 130,992 | 41,502 | 36,353 | 46,126 | 11,678 | 9,309 |
+| \`color-picker\` | 92,261 | 29,447 | 25,945 | 38,044 | 10,072 | 8,014 |
+| \`combobox\` | 138,077 | 42,748 | 37,548 | 41,170 | 9,967 | 7,860 |
+| \`command\` | 96,374 | 29,969 | 26,280 | 29,540 | 7,592 | 5,897 |
+| \`copy-button\` | 82,457 | 28,133 | 24,907 | 18,166 | 4,706 | 3,632 |
+| \`data-table\` | 199,621 | 59,834 | 51,186 | 91,940 | 23,791 | 18,797 |
+| \`date-input\` | 132,731 | 41,037 | 36,027 | 35,972 | 8,732 | 7,012 |
+| \`date-picker\` | 54,466 | 18,369 | 16,496 | 17,001 | 4,459 | 3,501 |
+| \`description-list\` | 23,284 | 8,830 | 7,812 | 2,225 | 682 | 280 |
+| \`dialog\` | 39,983 | 14,248 | 12,663 | 5,957 | 1,831 | 1,163 |
+| \`divider\` | 22,788 | 8,870 | 7,872 | 1,486 | 570 | 188 |
+| \`donut-chart\` | 84,155 | 29,630 | 26,273 | 14,638 | 4,299 | 3,408 |
+| \`drawer\` | 42,856 | 15,297 | 13,610 | 6,049 | 1,944 | 1,308 |
+| \`drilldown\` | 41,741 | 14,765 | 13,165 | 7,871 | 2,226 | 1,462 |
+| \`empty\` | 23,802 | 9,141 | 8,118 | 1,955 | 725 | 387 |
+| \`file-input\` | 66,001 | 22,265 | 19,786 | 17,511 | 5,038 | 4,021 |
+| \`filter-input\` | 126,444 | 39,373 | 34,530 | 41,823 | 10,221 | 8,049 |
+| \`format-date\` | 28,969 | 10,891 | 9,690 | 4,312 | 1,312 | 795 |
+| \`graph\` | 67,405 | 22,282 | 19,823 | 17,073 | 5,078 | 4,073 |
+| \`heatmap\` | 91,416 | 31,543 | 27,872 | 17,191 | 4,800 | 3,895 |
+| \`icon\` | 80,614 | 27,528 | 23,545 | 57,089 | 19,337 | 15,523 |
+| \`icon-button\` | 37,985 | 13,448 | 12,002 | 5,511 | 1,643 | 1,020 |
+| \`image\` | 25,558 | 9,519 | 8,462 | 4,155 | 1,279 | 821 |
+| \`input\` | 47,778 | 16,393 | 14,480 | 7,538 | 2,453 | 1,678 |
+| \`kbd\` | 26,543 | 10,192 | 9,030 | 3,605 | 1,205 | 731 |
+| \`legend\` | 32,682 | 12,166 | 10,793 | 3,290 | 1,145 | 720 |
+| \`lightbox\` | 50,818 | 17,147 | 15,272 | 14,214 | 3,782 | 2,683 |
+| \`line-chart\` | 85,931 | 30,280 | 26,875 | 14,777 | 4,265 | 3,439 |
+| \`list\` | 58,052 | 20,298 | 18,129 | 12,454 | 3,550 | 2,709 |
+| \`listbox\` | 77,332 | 25,086 | 22,249 | 17,688 | 4,800 | 3,751 |
+| \`loader\` | 27,496 | 10,492 | 9,331 | 2,686 | 960 | 553 |
+| \`map\` | 82,154 | 24,757 | 21,587 | 40,127 | 10,285 | 7,936 |
+| \`megamenu\` | 59,070 | 21,398 | 18,945 | 8,033 | 2,297 | 1,493 |
+| \`menu\` | 83,299 | 28,460 | 25,151 | 18,462 | 4,615 | 3,536 |
+| \`meter\` | 32,305 | 12,236 | 10,920 | 5,291 | 1,612 | 1,114 |
+| \`navigation\` | 32,843 | 12,356 | 11,016 | 2,196 | 794 | 398 |
+| \`notifications\` | 54,221 | 17,876 | 15,921 | 17,256 | 4,405 | 3,421 |
+| \`number-input\` | 53,245 | 18,048 | 16,131 | 10,491 | 2,857 | 2,000 |
+| \`object-inspector\` | 112,811 | 37,684 | 33,162 | 34,596 | 9,829 | 7,696 |
+| \`option\` | 25,539 | 9,388 | 8,325 | 3,984 | 976 | 556 |
+| \`outline\` | 33,444 | 12,570 | 11,192 | 6,722 | 2,186 | 1,474 |
+| \`pagination\` | 133,082 | 41,802 | 36,342 | 44,853 | 11,270 | 8,731 |
+| \`pin-input\` | 47,591 | 16,476 | 14,721 | 7,044 | 2,316 | 1,652 |
+| \`popover\` | 62,726 | 22,644 | 20,100 | 5,631 | 1,734 | 1,062 |
+| \`progress\` | 28,123 | 10,757 | 9,569 | 3,023 | 993 | 630 |
+| \`qr-code\` | 43,243 | 16,851 | 15,022 | 17,337 | 6,339 | 5,273 |
+| \`quote\` | 21,918 | 8,659 | 7,681 | 1,230 | 554 | 181 |
+| \`radio\` | 43,102 | 14,457 | 12,842 | 4,068 | 1,264 | 711 |
+| \`rating\` | 50,576 | 17,304 | 15,422 | 8,135 | 2,456 | 1,654 |
+| \`scatter-chart\` | 85,884 | 30,131 | 26,663 | 15,790 | 4,591 | 3,691 |
+| \`scroll-area\` | 30,421 | 11,096 | 9,864 | 8,812 | 2,645 | 1,976 |
+| \`select\` | 115,372 | 37,524 | 32,922 | 27,759 | 7,208 | 5,543 |
+| \`skeleton\` | 22,315 | 8,665 | 7,692 | 1,255 | 521 | 205 |
+| \`skip-link\` | 25,407 | 9,935 | 8,839 | 1,554 | 619 | 266 |
+| \`slider\` | 48,006 | 16,213 | 14,515 | 8,359 | 2,316 | 1,763 |
+| \`sparkline\` | 44,544 | 16,665 | 14,935 | 6,102 | 2,180 | 1,671 |
+| \`speed-dial\` | 67,533 | 24,328 | 21,605 | 9,257 | 2,503 | 1,730 |
+| \`splitter\` | 39,832 | 13,739 | 12,287 | 12,021 | 3,120 | 2,435 |
+| \`stat\` | 23,162 | 8,884 | 7,882 | 1,900 | 649 | 294 |
+| \`steps\` | 49,762 | 17,165 | 15,291 | 11,763 | 3,174 | 2,363 |
+| \`switch\` | 40,329 | 13,762 | 12,287 | 1,964 | 754 | 343 |
+| \`table\` | 95,219 | 29,655 | 26,079 | 33,732 | 9,006 | 7,123 |
+| \`tabs\` | 39,616 | 13,733 | 12,209 | 5,919 | 1,622 | 955 |
+| \`tag\` | 41,359 | 15,186 | 13,581 | 6,712 | 2,003 | 1,307 |
+| \`textarea\` | 45,236 | 15,332 | 13,685 | 5,556 | 1,726 | 1,111 |
+| \`time-input\` | 162,264 | 49,492 | 42,964 | 47,415 | 11,715 | 9,186 |
+| \`time-picker\` | 93,705 | 29,392 | 25,857 | 30,447 | 7,907 | 6,124 |
+| \`timeline\` | 25,225 | 9,450 | 8,416 | 3,154 | 810 | 469 |
+| \`toast\` | 48,431 | 17,309 | 15,368 | 9,402 | 2,832 | 2,084 |
+| \`toggle\` | 43,650 | 14,408 | 12,784 | 5,559 | 1,698 | 1,098 |
+| \`toolbar\` | 32,568 | 12,127 | 10,830 | 5,486 | 1,813 | 1,163 |
+| \`tooltip\` | 58,293 | 20,976 | 18,653 | 8,512 | 2,435 | 1,823 |
+| \`tour\` | 81,942 | 28,030 | 24,878 | 17,717 | 4,712 | 3,707 |
+| \`tree\` | 64,952 | 21,733 | 19,332 | 14,482 | 3,996 | 3,081 |
+| \`trend\` | 30,239 | 11,784 | 10,494 | 3,821 | 1,241 | 815 |
+| \`video\` | 124,145 | 39,099 | 34,173 | 52,551 | 12,985 | 10,404 |
+| \`video-playlist\` | 93,433 | 30,728 | 27,112 | 26,727 | 6,480 | 5,102 |
+| \`virtual-list\` | 50,312 | 17,586 | 15,711 | 11,983 | 3,703 | 2,863 |
 
 ### Styled tier
 
@@ -3868,110 +4071,110 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 
 | Family | Alone raw | Alone gzip | Alone brotli | Added raw | Added gzip | Added brotli |
 |---|---|---|---|---|---|---|
-| \`accordion\` | 38,711 | 13,631 | 12,080 | 9,774 | 2,591 | 1,968 |
-| \`announcement\` | 42,583 | 14,734 | 13,116 | 9,730 | 2,623 | 1,980 |
-| \`app-header\` | 29,830 | 10,898 | 9,622 | 6,112 | 1,631 | 1,132 |
-| \`area-chart\` | 90,175 | 30,721 | 27,175 | 21,609 | 5,956 | 4,673 |
-| \`aura\` | 53,497 | 18,568 | 16,426 | 28,065 | 8,715 | 7,358 |
-| \`avatar\` | 32,397 | 11,518 | 10,194 | 8,089 | 2,102 | 1,505 |
-| \`badge\` | 31,832 | 11,394 | 10,101 | 8,335 | 2,084 | 1,562 |
-| \`bar-chart\` | 98,834 | 32,718 | 28,948 | 29,877 | 7,818 | 6,234 |
-| \`blockquote\` | 28,460 | 10,810 | 9,543 | 4,676 | 1,421 | 950 |
-| \`breadcrumbs\` | 37,735 | 13,230 | 11,746 | 12,597 | 3,312 | 2,520 |
-| \`button\` | 44,047 | 14,711 | 13,071 | 12,158 | 3,062 | 2,242 |
-| \`button-group\` | 32,491 | 11,668 | 10,347 | 7,853 | 2,034 | 1,505 |
-| \`callout\` | 34,328 | 12,591 | 11,138 | 5,131 | 1,406 | 966 |
-| \`canvas\` | 115,638 | 33,782 | 29,423 | 77,139 | 20,890 | 17,182 |
-| \`card\` | 29,426 | 10,815 | 9,575 | 5,847 | 1,565 | 1,150 |
-| \`carousel\` | 51,570 | 16,165 | 14,379 | 26,120 | 6,089 | 4,966 |
-| \`chat\` | 78,616 | 24,265 | 21,449 | 34,735 | 8,676 | 7,000 |
-| \`checkbox\` | 47,527 | 15,292 | 13,617 | 10,028 | 2,567 | 1,886 |
-| \`checkbox-group\` | 55,032 | 17,116 | 15,184 | 16,410 | 4,109 | 3,027 |
-| \`code\` | 23,773 | 9,283 | 8,208 | 1,534 | 487 | 285 |
-| \`code-block\` | 110,978 | 33,561 | 29,770 | 47,276 | 10,442 | 8,501 |
-| \`color-input\` | 170,147 | 46,758 | 40,947 | 87,111 | 17,755 | 14,650 |
-| \`color-picker\` | 125,879 | 33,973 | 29,902 | 73,479 | 15,483 | 12,670 |
-| \`combobox\` | 149,224 | 43,933 | 38,566 | 57,065 | 12,664 | 10,226 |
-| \`command\` | 103,136 | 30,504 | 26,849 | 40,773 | 9,799 | 7,899 |
-| \`copy-button\` | 94,816 | 30,077 | 26,595 | 31,108 | 7,083 | 5,545 |
-| \`data-table\` | 237,797 | 65,711 | 54,693 | 146,340 | 34,858 | 26,654 |
-| \`date-input\` | 150,649 | 43,418 | 38,018 | 56,967 | 12,337 | 10,100 |
-| \`date-picker\` | 59,732 | 18,689 | 16,619 | 24,660 | 5,964 | 4,617 |
-| \`description-list\` | 29,247 | 10,532 | 9,322 | 5,841 | 1,434 | 876 |
-| \`dialog\` | 44,710 | 15,294 | 13,579 | 11,269 | 3,071 | 2,254 |
-| \`divider\` | 27,667 | 10,423 | 9,186 | 4,013 | 1,154 | 788 |
-| \`donut-chart\` | 91,924 | 30,670 | 27,145 | 24,659 | 6,543 | 5,244 |
-| \`drawer\` | 48,304 | 16,497 | 14,662 | 12,081 | 3,292 | 2,569 |
-| \`drilldown\` | 47,430 | 15,886 | 14,133 | 14,188 | 3,551 | 2,666 |
-| \`empty\` | 27,767 | 10,564 | 9,333 | 3,582 | 1,174 | 750 |
-| \`file-input\` | 75,983 | 23,592 | 20,959 | 29,897 | 7,611 | 5,958 |
-| \`filter-input\` | 156,054 | 43,551 | 38,039 | 73,641 | 15,334 | 12,454 |
-| \`flex\` | 28,186 | 10,188 | 9,026 | 5,150 | 1,157 | 767 |
-| \`format-date\` | 31,087 | 11,640 | 10,346 | 4,832 | 1,415 | 983 |
-| \`graph\` | 76,314 | 22,953 | 20,296 | 29,646 | 7,432 | 5,738 |
-| \`grid\` | 29,439 | 10,821 | 9,596 | 6,015 | 1,551 | 1,152 |
-| \`heatmap\` | 96,364 | 32,119 | 28,403 | 24,402 | 6,530 | 5,131 |
-| \`icon\` | 83,286 | 28,533 | 24,387 | 57,406 | 19,813 | 15,576 |
-| \`icon-button\` | 45,791 | 14,696 | 13,038 | 13,903 | 3,066 | 2,239 |
-| \`image\` | 29,623 | 10,933 | 9,695 | 5,863 | 1,753 | 1,281 |
-| \`input\` | 51,716 | 17,281 | 15,206 | 12,067 | 3,676 | 2,592 |
-| \`kbd\` | 31,206 | 11,669 | 10,349 | 5,913 | 1,741 | 1,259 |
-| \`legend\` | 40,423 | 14,375 | 12,704 | 8,567 | 2,381 | 1,696 |
-| \`lightbox\` | 55,194 | 17,397 | 15,431 | 20,979 | 5,200 | 3,884 |
-| \`line-chart\` | 94,301 | 31,461 | 27,865 | 25,400 | 6,624 | 5,305 |
-| \`list\` | 42,614 | 14,884 | 13,249 | 14,204 | 3,899 | 3,032 |
-| \`listbox\` | 77,037 | 24,463 | 21,667 | 21,861 | 5,889 | 4,445 |
-| \`loader\` | 30,062 | 11,088 | 9,858 | 5,833 | 1,698 | 1,261 |
-| \`map\` | 116,341 | 29,143 | 25,378 | 75,797 | 15,760 | 12,527 |
-| \`megamenu\` | 66,731 | 23,493 | 20,787 | 13,335 | 3,485 | 2,614 |
-| \`menu\` | 93,758 | 30,438 | 26,862 | 29,559 | 6,881 | 5,355 |
-| \`meter\` | 36,056 | 12,503 | 11,118 | 11,348 | 2,854 | 2,301 |
-| \`navigation\` | 33,921 | 12,651 | 11,213 | 3,859 | 1,225 | 768 |
-| \`notifications\` | 67,305 | 20,121 | 17,956 | 30,908 | 6,974 | 5,606 |
-| \`number-input\` | 55,976 | 18,206 | 16,218 | 15,418 | 4,073 | 2,942 |
-| \`object-inspector\` | 125,853 | 38,996 | 34,286 | 52,073 | 12,643 | 10,168 |
-| \`option\` | 31,721 | 11,306 | 9,993 | 7,821 | 1,967 | 1,440 |
-| \`orb\` | 35,300 | 13,597 | 12,047 | 9,407 | 3,582 | 2,898 |
-| \`outline\` | 37,400 | 13,291 | 11,768 | 11,265 | 3,066 | 2,286 |
-| \`pagination\` | 146,901 | 43,303 | 37,782 | 63,357 | 14,385 | 11,550 |
-| \`pin-input\` | 48,750 | 16,346 | 14,510 | 10,595 | 3,264 | 2,426 |
-| \`popover\` | 65,480 | 23,217 | 20,569 | 8,966 | 2,450 | 1,779 |
-| \`progress\` | 33,197 | 11,906 | 10,581 | 8,695 | 2,307 | 1,804 |
-| \`qr-code\` | 42,489 | 16,190 | 14,339 | 19,051 | 6,836 | 5,624 |
-| \`quote\` | 25,010 | 9,785 | 8,636 | 1,968 | 726 | 391 |
-| \`radio\` | 50,827 | 15,828 | 14,024 | 12,380 | 2,787 | 2,089 |
-| \`rating\` | 52,140 | 17,473 | 15,523 | 12,084 | 3,657 | 2,812 |
-| \`sandbox\` | 72,677 | 20,814 | 18,440 | 42,743 | 9,911 | 8,160 |
-| \`scatter-chart\` | 92,194 | 31,037 | 27,413 | 24,484 | 6,695 | 5,330 |
-| \`scroll-area\` | 37,855 | 12,977 | 11,523 | 13,889 | 3,625 | 2,817 |
-| \`select\` | 125,158 | 38,548 | 33,824 | 42,001 | 9,857 | 7,814 |
-| \`skeleton\` | 27,586 | 10,321 | 9,156 | 4,175 | 1,192 | 753 |
-| \`skip-link\` | 26,670 | 10,245 | 9,025 | 3,402 | 1,087 | 736 |
-| \`slider\` | 59,208 | 17,447 | 15,611 | 21,775 | 4,597 | 3,669 |
-| \`sparkline\` | 47,746 | 16,987 | 15,102 | 11,661 | 3,512 | 2,729 |
-| \`speed-dial\` | 74,838 | 25,531 | 22,639 | 17,163 | 3,958 | 2,994 |
-| \`splitter\` | 45,597 | 14,651 | 13,115 | 18,366 | 4,295 | 3,324 |
-| \`stat\` | 29,028 | 10,516 | 9,369 | 5,431 | 1,379 | 930 |
-| \`steps\` | 62,185 | 18,880 | 16,764 | 26,599 | 6,048 | 4,762 |
-| \`switch\` | 44,242 | 14,743 | 13,118 | 6,462 | 1,851 | 1,261 |
-| \`table\` | 90,549 | 26,305 | 23,252 | 44,169 | 10,519 | 8,637 |
-| \`tabs\` | 47,274 | 15,200 | 13,465 | 14,168 | 3,241 | 2,415 |
-| \`tag\` | 43,825 | 15,188 | 13,516 | 11,689 | 3,083 | 2,275 |
-| \`text\` | 31,185 | 10,898 | 9,626 | 7,764 | 1,608 | 1,089 |
-| \`textarea\` | 48,848 | 16,184 | 14,397 | 9,753 | 2,743 | 2,008 |
-| \`time-input\` | 182,147 | 52,014 | 45,225 | 72,137 | 15,746 | 12,703 |
-| \`time-picker\` | 102,012 | 30,183 | 26,622 | 42,839 | 10,162 | 8,126 |
-| \`timeline\` | 34,757 | 11,790 | 10,410 | 10,339 | 2,253 | 1,667 |
-| \`toast\` | 54,303 | 18,052 | 15,978 | 18,242 | 4,939 | 3,883 |
-| \`toggle\` | 51,402 | 16,600 | 14,764 | 10,959 | 2,922 | 2,180 |
-| \`toolbar\` | 34,938 | 12,472 | 11,053 | 8,439 | 2,267 | 1,627 |
-| \`tooltip\` | 63,778 | 22,685 | 20,074 | 11,637 | 3,233 | 2,401 |
-| \`tour\` | 90,819 | 29,076 | 25,764 | 28,971 | 6,939 | 5,441 |
-| \`tree\` | 54,884 | 17,751 | 15,743 | 19,937 | 5,142 | 4,003 |
-| \`trend\` | 29,490 | 11,181 | 9,911 | 5,361 | 1,631 | 1,069 |
-| \`video\` | 142,631 | 41,730 | 36,526 | 73,465 | 16,776 | 13,696 |
-| \`video-playlist\` | 109,161 | 33,413 | 29,414 | 43,086 | 9,445 | 7,568 |
-| \`virtual-list\` | 48,822 | 17,180 | 15,246 | 13,259 | 4,134 | 3,110 |
+| \`accordion\` | 36,375 | 12,705 | 11,268 | 9,776 | 2,548 | 1,846 |
+| \`announcement\` | 43,284 | 14,971 | 13,353 | 9,789 | 2,603 | 1,973 |
+| \`app-header\` | 27,494 | 9,972 | 8,812 | 6,110 | 1,703 | 1,232 |
+| \`area-chart\` | 92,825 | 31,847 | 28,160 | 21,855 | 5,896 | 4,748 |
+| \`aura\` | 51,161 | 17,647 | 15,648 | 28,069 | 8,692 | 7,378 |
+| \`avatar\` | 34,926 | 12,608 | 11,312 | 8,222 | 2,152 | 1,612 |
+| \`badge\` | 31,874 | 11,537 | 10,281 | 8,348 | 2,070 | 1,562 |
+| \`bar-chart\` | 101,443 | 33,811 | 29,929 | 30,092 | 7,782 | 6,377 |
+| \`blockquote\` | 26,126 | 9,890 | 8,735 | 4,680 | 1,472 | 1,019 |
+| \`breadcrumbs\` | 40,166 | 14,288 | 12,751 | 12,631 | 3,242 | 2,468 |
+| \`button\` | 44,670 | 14,891 | 13,257 | 12,180 | 2,994 | 2,291 |
+| \`button-group\` | 30,123 | 10,751 | 9,562 | 7,824 | 2,057 | 1,435 |
+| \`callout\` | 35,404 | 12,933 | 11,474 | 5,371 | 1,551 | 1,075 |
+| \`canvas\` | 118,408 | 34,934 | 30,560 | 78,366 | 21,258 | 17,490 |
+| \`card\` | 27,090 | 9,877 | 8,782 | 5,849 | 1,621 | 1,117 |
+| \`carousel\` | 54,039 | 17,234 | 15,434 | 26,183 | 5,959 | 4,799 |
+| \`chat\` | 84,259 | 26,013 | 23,105 | 35,772 | 8,837 | 7,198 |
+| \`checkbox\` | 48,304 | 15,478 | 13,866 | 10,204 | 2,569 | 1,907 |
+| \`checkbox-group\` | 55,999 | 17,341 | 15,439 | 16,779 | 4,071 | 3,168 |
+| \`code\` | 21,438 | 8,350 | 7,410 | 1,534 | 514 | 214 |
+| \`code-block\` | 113,767 | 34,690 | 30,820 | 47,580 | 10,521 | 8,515 |
+| \`color-input\` | 172,783 | 47,795 | 41,970 | 87,904 | 17,984 | 14,869 |
+| \`color-picker\` | 128,267 | 34,963 | 30,850 | 74,046 | 15,661 | 12,881 |
+| \`combobox\` | 155,099 | 45,804 | 40,250 | 58,175 | 13,048 | 10,547 |
+| \`command\` | 108,401 | 32,341 | 28,383 | 41,556 | 10,006 | 7,982 |
+| \`copy-button\` | 95,541 | 30,302 | 26,890 | 31,234 | 6,978 | 5,602 |
+| \`data-table\` | 267,314 | 74,154 | 61,256 | 158,565 | 37,682 | 28,441 |
+| \`date-input\` | 154,203 | 44,767 | 39,329 | 57,425 | 12,505 | 10,243 |
+| \`date-picker\` | 62,302 | 19,754 | 17,648 | 24,818 | 5,809 | 4,734 |
+| \`description-list\` | 26,911 | 9,597 | 8,500 | 5,841 | 1,486 | 993 |
+| \`dialog\` | 45,463 | 15,531 | 13,837 | 11,419 | 3,049 | 2,375 |
+| \`divider\` | 25,331 | 9,485 | 8,417 | 4,013 | 1,168 | 776 |
+| \`donut-chart\` | 94,288 | 31,729 | 28,116 | 24,748 | 6,429 | 5,367 |
+| \`drawer\` | 49,055 | 16,710 | 14,951 | 12,230 | 3,288 | 2,624 |
+| \`drilldown\` | 48,115 | 16,105 | 14,362 | 14,232 | 3,497 | 2,669 |
+| \`empty\` | 25,447 | 9,638 | 8,520 | 3,582 | 1,187 | 753 |
+| \`file-input\` | 78,755 | 24,723 | 21,983 | 30,256 | 7,538 | 6,121 |
+| \`filter-input\` | 158,922 | 44,637 | 39,049 | 73,928 | 15,418 | 12,403 |
+| \`flex\` | 25,850 | 9,251 | 8,206 | 5,154 | 1,191 | 812 |
+| \`format-date\` | 29,553 | 11,019 | 9,812 | 4,880 | 1,455 | 913 |
+| \`graph\` | 82,121 | 24,867 | 22,045 | 31,770 | 7,761 | 6,359 |
+| \`grid\` | 27,105 | 9,903 | 8,808 | 6,021 | 1,604 | 1,143 |
+| \`heatmap\` | 98,999 | 33,151 | 29,264 | 24,753 | 6,402 | 5,227 |
+| \`icon\` | 81,303 | 27,683 | 23,695 | 57,761 | 19,488 | 15,665 |
+| \`icon-button\` | 46,452 | 14,878 | 13,314 | 13,963 | 3,010 | 2,274 |
+| \`image\` | 27,289 | 10,006 | 8,887 | 5,868 | 1,771 | 1,233 |
+| \`input\` | 52,358 | 17,477 | 15,436 | 12,104 | 3,511 | 2,604 |
+| \`kbd\` | 28,870 | 10,750 | 9,522 | 5,917 | 1,768 | 1,187 |
+| \`legend\` | 38,088 | 13,437 | 11,886 | 8,571 | 2,359 | 1,646 |
+| \`lightbox\` | 57,810 | 18,527 | 16,462 | 21,187 | 5,091 | 4,002 |
+| \`line-chart\` | 96,681 | 32,507 | 28,873 | 25,504 | 6,484 | 5,390 |
+| \`list\` | 64,672 | 21,788 | 19,434 | 19,053 | 4,985 | 4,050 |
+| \`listbox\` | 82,102 | 26,213 | 23,192 | 22,442 | 5,882 | 4,595 |
+| \`loader\` | 30,702 | 11,284 | 10,107 | 5,874 | 1,746 | 1,214 |
+| \`map\` | 118,769 | 30,286 | 26,424 | 76,731 | 15,938 | 12,736 |
+| \`megamenu\` | 64,392 | 22,605 | 19,981 | 13,339 | 3,428 | 2,508 |
+| \`menu\` | 94,439 | 30,597 | 27,086 | 29,592 | 6,789 | 5,462 |
+| \`meter\` | 38,535 | 13,536 | 12,126 | 11,502 | 2,811 | 2,326 |
+| \`navigation\` | 34,563 | 12,819 | 11,464 | 3,898 | 1,274 | 853 |
+| \`notifications\` | 69,087 | 20,539 | 18,315 | 32,111 | 7,082 | 5,801 |
+| \`number-input\` | 58,471 | 19,231 | 17,192 | 15,701 | 4,021 | 3,033 |
+| \`object-inspector\` | 130,426 | 40,564 | 35,654 | 52,198 | 12,735 | 10,085 |
+| \`option\` | 29,385 | 10,379 | 9,196 | 7,818 | 1,952 | 1,349 |
+| \`orb\` | 35,918 | 13,782 | 12,285 | 9,423 | 3,492 | 2,901 |
+| \`outline\` | 38,036 | 13,461 | 11,992 | 11,299 | 3,040 | 2,276 |
+| \`pagination\` | 152,420 | 45,162 | 39,323 | 64,178 | 14,642 | 11,721 |
+| \`pin-input\` | 51,283 | 17,406 | 15,589 | 10,717 | 3,193 | 2,438 |
+| \`popover\` | 66,227 | 23,427 | 20,783 | 9,114 | 2,485 | 1,809 |
+| \`progress\` | 33,851 | 12,117 | 10,862 | 8,734 | 2,300 | 1,884 |
+| \`qr-code\` | 45,181 | 17,347 | 15,460 | 19,258 | 6,816 | 5,713 |
+| \`quote\` | 22,676 | 8,850 | 7,835 | 1,972 | 761 | 365 |
+| \`radio\` | 51,603 | 16,019 | 14,245 | 12,559 | 2,775 | 2,026 |
+| \`rating\` | 54,717 | 18,515 | 16,520 | 12,259 | 3,599 | 2,681 |
+| \`sandbox\` | 75,603 | 21,919 | 19,480 | 43,353 | 10,049 | 8,202 |
+| \`scatter-chart\` | 94,980 | 32,154 | 28,453 | 24,865 | 6,682 | 5,448 |
+| \`scroll-area\` | 35,799 | 12,062 | 10,803 | 14,173 | 3,605 | 2,803 |
+| \`select\` | 130,389 | 40,272 | 35,345 | 42,758 | 10,018 | 7,942 |
+| \`skeleton\` | 25,250 | 9,379 | 8,345 | 4,175 | 1,234 | 757 |
+| \`skip-link\` | 27,312 | 10,455 | 9,255 | 3,442 | 1,143 | 728 |
+| \`slider\` | 61,484 | 18,430 | 16,483 | 21,816 | 4,437 | 3,662 |
+| \`sparkline\` | 50,171 | 18,013 | 16,101 | 11,712 | 3,454 | 2,738 |
+| \`speed-dial\` | 75,502 | 25,745 | 22,848 | 17,209 | 3,868 | 2,993 |
+| \`splitter\` | 46,272 | 14,819 | 13,294 | 18,442 | 4,180 | 3,347 |
+| \`stat\` | 26,709 | 9,615 | 8,578 | 5,435 | 1,405 | 968 |
+| \`steps\` | 64,872 | 20,005 | 17,829 | 26,859 | 5,929 | 4,816 |
+| \`switch\` | 45,017 | 14,936 | 13,319 | 6,636 | 1,923 | 1,291 |
+| \`table\` | 111,816 | 32,491 | 28,600 | 50,325 | 11,840 | 9,543 |
+| \`tabs\` | 47,906 | 15,383 | 13,685 | 14,203 | 3,182 | 2,418 |
+| \`tag\` | 46,453 | 16,325 | 14,608 | 11,788 | 3,070 | 2,334 |
+| \`text\` | 28,851 | 9,993 | 8,839 | 7,770 | 1,656 | 1,180 |
+| \`textarea\` | 49,489 | 16,360 | 14,598 | 9,791 | 2,668 | 1,990 |
+| \`time-input\` | 187,913 | 53,735 | 46,781 | 73,041 | 16,059 | 13,072 |
+| \`time-picker\` | 106,925 | 31,849 | 28,128 | 43,656 | 10,411 | 8,289 |
+| \`timeline\` | 32,421 | 10,856 | 9,641 | 10,340 | 2,226 | 1,696 |
+| \`toast\` | 56,963 | 19,202 | 17,059 | 17,920 | 4,665 | 3,851 |
+| \`toggle\` | 49,064 | 15,666 | 13,915 | 10,961 | 2,872 | 2,177 |
+| \`toolbar\` | 35,586 | 12,637 | 11,308 | 8,487 | 2,293 | 1,654 |
+| \`tooltip\` | 61,441 | 21,738 | 19,283 | 11,642 | 3,152 | 2,408 |
+| \`tour\` | 93,317 | 30,119 | 26,759 | 29,075 | 6,820 | 5,433 |
+| \`tree\` | 74,370 | 23,738 | 21,063 | 23,875 | 5,921 | 4,891 |
+| \`trend\` | 32,091 | 12,277 | 10,992 | 5,654 | 1,708 | 1,176 |
+| \`video\` | 145,281 | 42,885 | 37,592 | 73,670 | 16,791 | 13,757 |
+| \`video-playlist\` | 109,937 | 33,569 | 29,677 | 43,216 | 9,393 | 7,620 |
+| \`virtual-list\` | 52,016 | 18,025 | 16,093 | 13,669 | 4,099 | 3,220 |
 
 ## What an install adds to \`node_modules\`
 
@@ -3983,12 +4186,12 @@ stripped column shows the bytes we removed.
 
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
-| \`@fusion.dev/helix-core\` | 2,054,000 | 489 | 549,112 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
-| \`@fusion.dev/helix-headless\` | 18,434,488 | 665 | 1,746,772 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
-| \`@fusion.dev/helix-icons\` | 149,615 | 21 | 47,843 | \`svgo\` |
-| \`@fusion.dev/helix-styles\` | 109,709 | 6 | 0 | none |
+| \`@fusion.dev/helix-core\` | 2,236,589 | 515 | 623,888 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
+| \`@fusion.dev/helix-headless\` | 19,096,230 | 674 | 1,804,473 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
+| \`@fusion.dev/helix-icons\` | 150,509 | 21 | 48,154 | \`svgo\` |
+| \`@fusion.dev/helix-styles\` | 110,590 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 528,598 | 8 | 5,393 | none |
-| \`@fusion.dev/helix\` | 18,762,650 | 913 | 397,566 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
+| \`@fusion.dev/helix\` | 19,396,931 | 920 | 401,249 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
 
 ## Not measured yet
 
@@ -4282,13 +4485,30 @@ The fields with a panel behave the same way:
 **A tooltip never takes focus.** A tooltip only describes a control, so it
 cannot contain a button. For something with a button in it, use a \`Popover\`.
 
-A tooltip describes its trigger by itself, whether it wraps the trigger or
-names it with \`for\`. A Helix trigger is described as soon as it has rendered.
-A plain element in your markup is described the first time a reader points at
-it or focuses it, so the link is never written into markup your server sent.
-Write \`aria-describedby\` yourself to have the link in the server's markup.
-In the \`for\` form, the tooltip itself is out of the accessibility tree while
-its bubble is down, so a reader meets its words once, as the description.
+**Name the tooltip in its trigger's \`aria-describedby\`.** Place the tooltip
+beside its trigger, name the trigger with \`for\`, and give the trigger an
+\`aria-describedby\` with the tooltip's id. The description is then in the
+markup your server sends, so a screen reader meets it at rest, in reading mode
+too:
+
+\`\`\`html
+<helix-button
+  aria-describedby="save-tip"
+  id="save"
+>Save</helix-button>
+<helix-tooltip
+  content="Save your work"
+  for="save"
+  id="save-tip"
+></helix-tooltip>
+\`\`\`
+
+Without the attribute, a tooltip links itself. A Helix trigger is described as
+soon as it has rendered. A plain element that \`for\` names is described the
+first time you point at it or focus it, so the link is never written into
+markup your server sent. In the \`for\` form, the tooltip itself is out of the
+accessibility tree while its bubble is down, so you meet its words once, as the
+description.
 The pointer can move onto a tooltip's bubble and the bubble stays, so a reader
 can read it under a magnifier. Set \`hoverable="false"\` to hide it once the
 pointer reaches it.
@@ -4558,6 +4778,18 @@ The prop is \`on\` followed by the exact event name. \`onHelixOpen\` and \`onOpe
 not work. React 19 passes an unknown \`on*\` prop to \`addEventListener\` with the
 name as written, so use the event's own casing.
 
+In a development build, an element prints a warning once when one of its \`on\`
+props can never run:
+
+- a misspelled event name, such as \`onhelix-opne\`
+- an event that a different element sends
+- Solid's \`on:\` syntax
+- a callback property that was removed, such as \`onCheckedChange\`
+
+TypeScript does not check a JSX prop whose name has a hyphen, so the console is
+the only place these show. Vite and webpack use the \`development\` export
+condition while you develop. A production build carries none of the check.
+
 ## The hydration bridge
 
 While React hydrates, it skips everything it would have to apply imperatively.
@@ -6573,9 +6805,10 @@ Helix has two layers of tokens. You use the second layer, the semantic tokens.
 | Semantic | \`--helix-color-primary\` | Any code, including yours |
 
 Each semantic token is named for its purpose. The name does not describe its
-value. Every token belongs to exactly one of fifteen categories:
+value. Every token belongs to exactly one of sixteen categories:
 
 - \`color\`
+- \`scrollbar\`
 - \`space\`
 - \`radii\`
 - \`font\`