@fusion.dev/helix-docs 0.147.0 → 0.149.0

package/content/overlays.mdx

@@ -106,13 +106,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.

package/content/react.mdx

@@ -29,6 +29,18 @@ The prop is `on` followed by the exact event name. `onHelixOpen` and `onOpen` do
 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.

package/content/tokens.mdx

@@ -15,9 +15,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`

package/dist/pages.generated.js

@@ -107,7 +107,7 @@ export const docPages = [
         title: 'Introduction',
     },
     {
-        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',
         slug: 'localization',
         title: 'Localization and RTL',