@fusion.dev/helix 0.36.0 → 0.38.0

package/types/jsx.d.ts

@@ -4438,7 +4438,16 @@ toggles rather than replaces, and the arrows move without choosing. What
 this adds is the tags, and keeping the panel open between picks.
 
 A comma is therefore not available inside an option's value, which is the
-listbox's contract and not this element's to change. */
+listbox's contract and not this element's to change.
+
+**The list is told, and the field is not.** `aria-multiselectable` belongs
+to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
+ARIA 1.2; the list sets it on itself through `ElementInternals`, where a
+reader on the field hears it through `aria-controls`. This element wrote it
+onto its own `role="combobox"` input as well, which an audit reports as a
+property the role does not support and no spec here ever asserted: the one
+that covers this says in as many words that telling the list is what this
+element is responsible for. */
   multiple?: (HelixCombobox["multiple"]) | undefined;
   /** Text shown while nothing has been chosen. */
   placeholder?: (HelixCombobox["placeholder"]) | undefined;
@@ -4602,7 +4611,16 @@ toggles rather than replaces, and the arrows move without choosing. What
 this adds is the tags, and keeping the panel open between picks.
 
 A comma is therefore not available inside an option's value, which is the
-listbox's contract and not this element's to change. */
+listbox's contract and not this element's to change.
+
+**The list is told, and the field is not.** `aria-multiselectable` belongs
+to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
+ARIA 1.2; the list sets it on itself through `ElementInternals`, where a
+reader on the field hears it through `aria-controls`. This element wrote it
+onto its own `role="combobox"` input as well, which an audit reports as a
+property the role does not support and no spec here ever asserted: the one
+that covers this says in as many words that telling the list is what this
+element is responsible for. */
   "prop:multiple"?: (HelixCombobox["multiple"]) | undefined;
   /** Text shown while nothing has been chosen. */
   "prop:placeholder"?: (HelixCombobox["placeholder"]) | undefined;
@@ -6939,12 +6957,12 @@ the circle is not drawn. */
 
 /** `HelixDrawer` component event */
 export type HelixDrawerElementEvent<E = Event> = TypedEvent<HelixDrawer, E>;
-/** `helix-before-open` event type */
-export type HelixDrawerHelixBeforeOpenElementEvent =
-  HelixDrawerElementEvent<HelixBeforeOpenEvent>;
 /** `helix-before-close` event type */
 export type HelixDrawerHelixBeforeCloseElementEvent =
   HelixDrawerElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixDrawerHelixBeforeOpenElementEvent =
+  HelixDrawerElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixDrawerProps = {
   /** Whether the panel is glass rather than opaque.
@@ -7038,12 +7056,12 @@ Held here as well as on the element, so a value set before the first render
 survives to it and a consumer reading one back gets what they wrote. */
   returnValue?: (HelixDrawer["returnValue"]) | undefined;
 
-  /** Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves. */
-  "onhelix-before-open"?: ((e: HelixDrawerHelixBeforeOpenElementEvent) => void) | undefined;
   /** Relayed, because the platform's own does not escape. */
   onclose?: ((e: HelixDrawerElementEvent) => void) | undefined;
   /** Fired before the panel closes, and cancelable. */
   "onhelix-before-close"?: ((e: HelixDrawerHelixBeforeCloseElementEvent) => void) | undefined;
+  /** Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves. */
+  "onhelix-before-open"?: ((e: HelixDrawerHelixBeforeOpenElementEvent) => void) | undefined;
   /** Says the state moved, carrying `newState` and `oldState`. */
   ontoggle?: ((e: HelixDrawerElementEvent) => void) | undefined;
 };
@@ -7139,14 +7157,14 @@ alone, and `Dialog`'s `close()` is the one that takes the value directly.
 Held here as well as on the element, so a value set before the first render
 survives to it and a consumer reading one back gets what they wrote. */
   "prop:returnValue"?: (HelixDrawer["returnValue"]) | undefined;
-  /** Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves. */
-  "on:helix-before-open"?: ((e: HelixDrawerHelixBeforeOpenElementEvent) => void) | undefined;
   /** Relayed, because the platform's own does not escape. */
   "on:close"?: ((e: HelixDrawerElementEvent) => void) | undefined;
   /** Fired before the panel closes, and cancelable. */
   "on:helix-before-close"?: ((
     e: HelixDrawerHelixBeforeCloseElementEvent,
   ) => void) | undefined;
+  /** Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves. */
+  "on:helix-before-open"?: ((e: HelixDrawerHelixBeforeOpenElementEvent) => void) | undefined;
   /** Says the state moved, carrying `newState` and `oldState`. */
   "on:toggle"?: ((e: HelixDrawerElementEvent) => void) | undefined;
 
@@ -9108,12 +9126,7 @@ HTML writes as one costs what an attribute always costs here: nothing
 warns. `<helix-input readonly>` is what anybody who has written HTML types;
 against `read-only` it parses to no property at all, and the field stays
 editable with no error anywhere. Measured on the dash-cased form, `readOnly`
-came back `false`.
-
-A part was renamed for
-the same kind of reason: there is no `helix-v` tag, so no consumer is
-holding the old spelling, and this is free today and a deprecation after
-the first release. */
+came back `false`. */
   readonly?: (HelixInput["readOnly"]) | undefined;
   /** Whether the field refuses input while still submitting its value.
 
@@ -9123,12 +9136,7 @@ HTML writes as one costs what an attribute always costs here: nothing
 warns. `<helix-input readonly>` is what anybody who has written HTML types;
 against `read-only` it parses to no property at all, and the field stays
 editable with no error anywhere. Measured on the dash-cased form, `readOnly`
-came back `false`.
-
-A part was renamed for
-the same kind of reason: there is no `helix-v` tag, so no consumer is
-holding the old spelling, and this is free today and a deprecation after
-the first release. */
+came back `false`. */
   readOnly?: (HelixInput["readOnly"]) | undefined;
   /** Whether a password field offers a toggle that shows what was typed.
 
@@ -9272,12 +9280,7 @@ HTML writes as one costs what an attribute always costs here: nothing
 warns. `<helix-input readonly>` is what anybody who has written HTML types;
 against `read-only` it parses to no property at all, and the field stays
 editable with no error anywhere. Measured on the dash-cased form, `readOnly`
-came back `false`.
-
-A part was renamed for
-the same kind of reason: there is no `helix-v` tag, so no consumer is
-holding the old spelling, and this is free today and a deprecation after
-the first release. */
+came back `false`. */
   "bool:readonly"?: (HelixInput["readOnly"]) | undefined;
   /** Whether the field refuses input while still submitting its value.
 
@@ -9287,12 +9290,7 @@ HTML writes as one costs what an attribute always costs here: nothing
 warns. `<helix-input readonly>` is what anybody who has written HTML types;
 against `read-only` it parses to no property at all, and the field stays
 editable with no error anywhere. Measured on the dash-cased form, `readOnly`
-came back `false`.
-
-A part was renamed for
-the same kind of reason: there is no `helix-v` tag, so no consumer is
-holding the old spelling, and this is free today and a deprecation after
-the first release. */
+came back `false`. */
   "prop:readOnly"?: (HelixInput["readOnly"]) | undefined;
   /** Whether a password field offers a toggle that shows what was typed.
 
@@ -10352,8 +10350,16 @@ fits.
 a band is not a question of paint: a band is not placed against the trigger,
 so the controller has to be told not to measure, and that decision is here
 whatever the stylesheet says. Writing the width in both places would be one
-number in two languages, drifting the first time either moved. This sets
-`data-narrow` on the host and the stylesheet arranges itself off that. */
+number in two languages, drifting the first time either moved. This records
+`:state(narrow)` on the host and the stylesheet arranges itself off that.
+
+**A custom state and never `data-narrow`, which is what it was.** The width
+is read in `connectedCallback`, so on a phone this is true on the very first
+update: an attribute written there is markup a consumer's server never sent,
+which React reports as a mismatch and answers by rebuilding the subtree. The
+narrow exception the server specs describe covers a mirror that can only
+become true long after hydration, and a viewport measured before the first
+paint is the opposite case. See `MixinControllerOpen` on `open`. */
   "full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
@@ -10368,8 +10374,16 @@ fits.
 a band is not a question of paint: a band is not placed against the trigger,
 so the controller has to be told not to measure, and that decision is here
 whatever the stylesheet says. Writing the width in both places would be one
-number in two languages, drifting the first time either moved. This sets
-`data-narrow` on the host and the stylesheet arranges itself off that. */
+number in two languages, drifting the first time either moved. This records
+`:state(narrow)` on the host and the stylesheet arranges itself off that.
+
+**A custom state and never `data-narrow`, which is what it was.** The width
+is read in `connectedCallback`, so on a phone this is true on the very first
+update: an attribute written there is markup a consumer's server never sent,
+which React reports as a mismatch and answers by rebuilding the subtree. The
+narrow exception the server specs describe covers a mirror that can only
+become true long after hydration, and a viewport measured before the first
+paint is the opposite case. See `MixinControllerOpen` on `open`. */
   fullBelow?: (HelixMegamenu["fullBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   label?: (HelixMegamenu["label"]) | undefined;
@@ -10443,8 +10457,16 @@ fits.
 a band is not a question of paint: a band is not placed against the trigger,
 so the controller has to be told not to measure, and that decision is here
 whatever the stylesheet says. Writing the width in both places would be one
-number in two languages, drifting the first time either moved. This sets
-`data-narrow` on the host and the stylesheet arranges itself off that. */
+number in two languages, drifting the first time either moved. This records
+`:state(narrow)` on the host and the stylesheet arranges itself off that.
+
+**A custom state and never `data-narrow`, which is what it was.** The width
+is read in `connectedCallback`, so on a phone this is true on the very first
+update: an attribute written there is markup a consumer's server never sent,
+which React reports as a mismatch and answers by rebuilding the subtree. The
+narrow exception the server specs describe covers a mirror that can only
+become true long after hydration, and a viewport measured before the first
+paint is the opposite case. See `MixinControllerOpen` on `open`. */
   "attr:full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
@@ -10459,8 +10481,16 @@ fits.
 a band is not a question of paint: a band is not placed against the trigger,
 so the controller has to be told not to measure, and that decision is here
 whatever the stylesheet says. Writing the width in both places would be one
-number in two languages, drifting the first time either moved. This sets
-`data-narrow` on the host and the stylesheet arranges itself off that. */
+number in two languages, drifting the first time either moved. This records
+`:state(narrow)` on the host and the stylesheet arranges itself off that.
+
+**A custom state and never `data-narrow`, which is what it was.** The width
+is read in `connectedCallback`, so on a phone this is true on the very first
+update: an attribute written there is markup a consumer's server never sent,
+which React reports as a mismatch and answers by rebuilding the subtree. The
+narrow exception the server specs describe covers a mirror that can only
+become true long after hydration, and a viewport measured before the first
+paint is the opposite case. See `MixinControllerOpen` on `open`. */
   "prop:fullBelow"?: (HelixMegamenu["fullBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   "prop:label"?: (HelixMegamenu["label"]) | undefined;
@@ -11997,9 +12027,9 @@ markup. */
 
 /** `HelixOutline` component event */
 export type HelixOutlineElementEvent<E = Event> = TypedEvent<HelixOutline, E>;
-/** `helix-before-activate` event type */
-export type HelixOutlineHelixBeforeActivateElementEvent =
-  HelixOutlineElementEvent<HelixBeforeActivateEvent>;
+/** `helix-activate` event type */
+export type HelixOutlineHelixActivateElementEvent =
+  HelixOutlineElementEvent<HelixActivateEvent>;
 
 export type HelixOutlineProps = {
   /** How a click on one of these links travels to its section.
@@ -12032,10 +12062,8 @@ a little more: without it the current section changes as a heading slides
 under the chrome rather than as it reaches the top of what can be seen. */
   offset?: (HelixOutline["offset"]) | undefined;
 
-  /** The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves. */
-  "onhelix-before-activate"?: ((
-    e: HelixOutlineHelixBeforeActivateElementEvent,
-  ) => void) | undefined;
+  /** The section being read has changed, carrying its id as the value. An announcement: it is read off where the page is scrolled to, so there is no decision here to take. */
+  "onhelix-activate"?: ((e: HelixOutlineHelixActivateElementEvent) => void) | undefined;
 };
 
 export type HelixOutlineSolidJsProps = {
@@ -12068,10 +12096,8 @@ The reading line. A page with a sticky masthead sets this to its height, or
 a little more: without it the current section changes as a heading slides
 under the chrome rather than as it reaches the top of what can be seen. */
   "prop:offset"?: (HelixOutline["offset"]) | undefined;
-  /** The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves. */
-  "on:helix-before-activate"?: ((
-    e: HelixOutlineHelixBeforeActivateElementEvent,
-  ) => void) | undefined;
+  /** The section being read has changed, carrying its id as the value. An announcement: it is read off where the page is scrolled to, so there is no decision here to take. */
+  "on:helix-activate"?: ((e: HelixOutlineHelixActivateElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -13445,7 +13471,7 @@ either, and both are only a choice of drawing. A scale whose marks are
 `Radio.Group`, whose options already carry a value and a name each.
 
 **Undefaulted, because it reflects.** A default of `marks` writes
-`appearance="marks"` onto every server-rendered rating, which React holds no
+`variant="marks"` onto every server-rendered rating, which React holds no
 prop for and reports as a hydration mismatch. The stylesheet names only
 `dots`, so an unset one draws marks anyway. */
   variant?: (HelixRating["variant"]) | undefined;
@@ -13585,7 +13611,7 @@ either, and both are only a choice of drawing. A scale whose marks are
 `Radio.Group`, whose options already carry a value and a name each.
 
 **Undefaulted, because it reflects.** A default of `marks` writes
-`appearance="marks"` onto every server-rendered rating, which React holds no
+`variant="marks"` onto every server-rendered rating, which React holds no
 prop for and reports as a hydration mismatch. The stylesheet names only
 `dots`, so an unset one draws marks anyway. */
   "prop:variant"?: (HelixRating["variant"]) | undefined;
@@ -23300,7 +23326,7 @@ export type CustomElements = {
    * - `--color-input-panel-size`: Width of the panel, and so of the square. (default: `undefined`)
    * - `--color-input-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
    * - `--color-input-swatch-radius`: Corner radius of that block. (default: `undefined`)
-   * - `--color-input-swatch-size`: Edge length of the block in `appearance="swatch"`. (default: `undefined`)
+   * - `--color-input-swatch-size`: Edge length of the block in `variant="swatch"`. (default: `undefined`)
    * - `--color-input-swatch`: The chosen color, to paint over the transparency check. (default: `undefined`)
    *
    * ## CSS Parts
@@ -23667,6 +23693,15 @@ export type CustomElements = {
    *
    * A comma is therefore not available inside an option's value, which is the
    * listbox's contract and not this element's to change.
+   *
+   * **The list is told, and the field is not.** `aria-multiselectable` belongs
+   * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
+   * ARIA 1.2; the list sets it on itself through `ElementInternals`, where a
+   * reader on the field hears it through `aria-controls`. This element wrote it
+   * onto its own `role="combobox"` input as well, which an audit reports as a
+   * property the role does not support and no spec here ever asserted: the one
+   * that covers this says in as many words that telling the list is what this
+   * element is responsible for.
    * - `placeholder`: Text shown while nothing has been chosen.
    * - `remove-label`/`removeLabel`: What a tag's remove control is called, since the mark has no name.
    * - `suggest`: Whether the field finishes the word as it is typed.
@@ -23821,7 +23856,7 @@ export type CustomElements = {
    * - `--combobox-background-color`: Fill behind the field. (default: `undefined`)
    * - `--combobox-border-color`: Color of the panel's edge. (default: `undefined`)
    * - `--combobox-border-width`: Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. (default: `undefined`)
-   * - `--combobox-control-size`: Smallest the text field shrinks to (default: `undefined`)
+   * - `--combobox-control-size`: Smallest the text field shrinks to once tags share its line. (default: `undefined`)
    * - `--combobox-panel-size`: Width of the panel. Follows the field by default. (default: `undefined`)
    * - `--combobox-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
    *
@@ -25783,9 +25818,9 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-open`: Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.
    * - `close`: Relayed, because the platform's own does not escape.
    * - `helix-before-close`: Fired before the panel closes, and cancelable.
+   * - `helix-before-open`: Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.
    * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
@@ -25812,12 +25847,12 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--drawer-backdrop`: Filter applied behind a `material="glass"` drawer. Follows the theme's material policy; set it to override the strength on one drawer. (default: `undefined`)
+   * - `--drawer-backdrop`: Filter applied behind a `frosted` or `glass` drawer. Follows the theme's material policy; set it to override the strength on one drawer. (default: `undefined`)
    * - `--drawer-background-color`: Surface behind the panel. (default: `undefined`)
    * - `--drawer-border-color`: Color of the panel's edge. (default: `undefined`)
    * - `--drawer-border-width`: Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. (default: `undefined`)
    * - `--drawer-padding`: Padding inside the panel. (default: `undefined`)
-   * - `--drawer-padding-block-start`: Padding above the content, which clears the close control. (default: `undefined`)
+   * - `--drawer-padding-block-start`: Padding above the header, which is a step deeper than the other three so the first line clears the window's own edge. Falls back to `--drawer-padding`, so setting that alone governs all four sides. (default: `undefined`)
    * - `--drawer-radius`: Corner radius on the edges that face the page. (default: `undefined`)
    * - `--drawer-scrim`: The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one. (default: `undefined`)
    * - `--drawer-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
@@ -26028,6 +26063,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `drilled`: While a row's page is showing rather than the top one, so a frame around this can answer the depth it is at.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drilldown": Partial<
@@ -27837,8 +27873,11 @@ export type CustomElements = {
    * the platform's.
    *
    * Height comes from the region, like every other control: `data-density` on
-   * whatever holds it, not a `size` here. Invalid styling waits for
-   * `:user-invalid`, because a field is not wrong before anyone has filled it in.
+   * whatever holds it, not a `size` here. Invalid styling waits for the `invalid`
+   * custom state, because a field is not wrong before anyone has filled it in and
+   * `:user-invalid` cannot answer that here: it tracks the control the reader is
+   * in, which is inside this shadow root, so it never reaches the host the rule
+   * selects on.
    *
    * ## Attributes & Properties
    *
@@ -27885,11 +27924,6 @@ export type CustomElements = {
    * against `read-only` it parses to no property at all, and the field stays
    * editable with no error anywhere. Measured on the dash-cased form, `readOnly`
    * came back `false`.
-   *
-   * A part was renamed for
-   * the same kind of reason: there is no `helix-v` tag, so no consumer is
-   * holding the old spelling, and this is free today and a deprecation after
-   * the first release.
    * - `reveal`: Whether a password field offers a toggle that shows what was typed.
    *
    * Ignored on every other type. A reveal on an email field would be a button
@@ -28848,6 +28882,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The options, and any groups of them.
+   * - `filter-icon`: The mark in the filter's field. Left empty, a magnifier is drawn.
    * - `hint`: Richer than a string.
    * - `label`: Richer than a string.
    *
@@ -29080,8 +29115,16 @@ export type CustomElements = {
    * a band is not a question of paint: a band is not placed against the trigger,
    * so the controller has to be told not to measure, and that decision is here
    * whatever the stylesheet says. Writing the width in both places would be one
-   * number in two languages, drifting the first time either moved. This sets
-   * `data-narrow` on the host and the stylesheet arranges itself off that.
+   * number in two languages, drifting the first time either moved. This records
+   * `:state(narrow)` on the host and the stylesheet arranges itself off that.
+   *
+   * **A custom state and never `data-narrow`, which is what it was.** The width
+   * is read in `connectedCallback`, so on a phone this is true on the very first
+   * update: an attribute written there is markup a consumer's server never sent,
+   * which React reports as a mismatch and answers by rebuilding the subtree. The
+   * narrow exception the server specs describe covers a mirror that can only
+   * become true long after hydration, and a viewport measured before the first
+   * paint is the opposite case. See `MixinControllerOpen` on `open`.
    * - `label`: The section's name, which names the default trigger and the panel.
    * - `open-on`/`openOn`: Whether hovering the trigger opens the panel, or only a press does.
    *
@@ -29155,7 +29198,7 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--megamenu-backdrop`: A filter behind the panel, for glass. (default: `undefined`)
+   * - `--megamenu-backdrop`: A filter behind the panel, which is `none` until one is asked for: this family carries no `material`, so the pair is two hooks rather than a word. (default: `undefined`)
    * - `--megamenu-background-color`: The panel's own fill. (default: `undefined`)
    * - `--megamenu-border-width`: Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. (default: `undefined`)
    * - `--megamenu-column-size`: The narrowest a column goes before the grid wraps. (default: `undefined`)
@@ -29175,6 +29218,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
    * - `open`: While the panel is open, which is when the trigger reads as current.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
@@ -30840,9 +30884,11 @@ export type CustomElements = {
    * the shape a table of contents has taken since printed marginalia: the line
    * says the list is one thing, and the lit segment says where in it you are.
    *
-   * Nesting is the consumer's, expressed as `data-level` on a link. An outline
-   * that read heading levels itself would have to look at the document, and the
-   * document is not always where the headings are.
+   * Nesting is the consumer's, expressed as `data-level` on a link, and the
+   * levels are the heading levels: `2` through `6` each take one more step of
+   * `--outline-indent`, and a link with no `data-level` is the top one. An
+   * outline that read heading levels itself would have to look at the document,
+   * and the document is not always where the headings are.
    *
    * ## Attributes & Properties
    *
@@ -30907,7 +30953,7 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-activate`: The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves.
+   * - `helix-activate`: The section being read has changed, carrying its id as the value. An announcement: it is read off where the page is scrolled to, so there is no decision here to take.
    *
    * ## Slots
    *
@@ -32219,7 +32265,7 @@ export type CustomElements = {
    * `Radio.Group`, whose options already carry a value and a name each.
    *
    * **Undefaulted, because it reflects.** A default of `marks` writes
-   * `appearance="marks"` onto every server-rendered rating, which React holds no
+   * `variant="marks"` onto every server-rendered rating, which React holds no
    * prop for and reports as a hydration mismatch. The stylesheet names only
    * `dots`, so an unset one draws marks anyway.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
@@ -37358,7 +37404,7 @@ export type CustomElements = {
    * CSS variables available for styling the component.
    *
    * - `--tooltip-arrow-size`: Size of the point at the bubble's edge. (default: `undefined`)
-   * - `--tooltip-backdrop`: Blur behind a `glass` bubble. (default: `undefined`)
+   * - `--tooltip-backdrop`: Blur behind a `frosted` or `glass` bubble. (default: `undefined`)
    * - `--tooltip-background-color`: Fill of the bubble. (default: `undefined`)
    * - `--tooltip-max-inline-size`: Widest the bubble grows before wrapping. (default: `undefined`)
    *
@@ -42182,7 +42228,7 @@ export type CustomElementsSolidJs = {
    * - `--color-input-panel-size`: Width of the panel, and so of the square. (default: `undefined`)
    * - `--color-input-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
    * - `--color-input-swatch-radius`: Corner radius of that block. (default: `undefined`)
-   * - `--color-input-swatch-size`: Edge length of the block in `appearance="swatch"`. (default: `undefined`)
+   * - `--color-input-swatch-size`: Edge length of the block in `variant="swatch"`. (default: `undefined`)
    * - `--color-input-swatch`: The chosen color, to paint over the transparency check. (default: `undefined`)
    *
    * ## CSS Parts
@@ -42555,6 +42601,15 @@ export type CustomElementsSolidJs = {
    *
    * A comma is therefore not available inside an option's value, which is the
    * listbox's contract and not this element's to change.
+   *
+   * **The list is told, and the field is not.** `aria-multiselectable` belongs
+   * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
+   * ARIA 1.2; the list sets it on itself through `ElementInternals`, where a
+   * reader on the field hears it through `aria-controls`. This element wrote it
+   * onto its own `role="combobox"` input as well, which an audit reports as a
+   * property the role does not support and no spec here ever asserted: the one
+   * that covers this says in as many words that telling the list is what this
+   * element is responsible for.
    * - `placeholder`: Text shown while nothing has been chosen.
    * - `remove-label`/`removeLabel`: What a tag's remove control is called, since the mark has no name.
    * - `suggest`: Whether the field finishes the word as it is typed.
@@ -42709,7 +42764,7 @@ export type CustomElementsSolidJs = {
    * - `--combobox-background-color`: Fill behind the field. (default: `undefined`)
    * - `--combobox-border-color`: Color of the panel's edge. (default: `undefined`)
    * - `--combobox-border-width`: Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. (default: `undefined`)
-   * - `--combobox-control-size`: Smallest the text field shrinks to (default: `undefined`)
+   * - `--combobox-control-size`: Smallest the text field shrinks to once tags share its line. (default: `undefined`)
    * - `--combobox-panel-size`: Width of the panel. Follows the field by default. (default: `undefined`)
    * - `--combobox-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
    *
@@ -44702,9 +44757,9 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-open`: Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.
    * - `close`: Relayed, because the platform's own does not escape.
    * - `helix-before-close`: Fired before the panel closes, and cancelable.
+   * - `helix-before-open`: Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.
    * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
@@ -44731,12 +44786,12 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--drawer-backdrop`: Filter applied behind a `material="glass"` drawer. Follows the theme's material policy; set it to override the strength on one drawer. (default: `undefined`)
+   * - `--drawer-backdrop`: Filter applied behind a `frosted` or `glass` drawer. Follows the theme's material policy; set it to override the strength on one drawer. (default: `undefined`)
    * - `--drawer-background-color`: Surface behind the panel. (default: `undefined`)
    * - `--drawer-border-color`: Color of the panel's edge. (default: `undefined`)
    * - `--drawer-border-width`: Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. (default: `undefined`)
    * - `--drawer-padding`: Padding inside the panel. (default: `undefined`)
-   * - `--drawer-padding-block-start`: Padding above the content, which clears the close control. (default: `undefined`)
+   * - `--drawer-padding-block-start`: Padding above the header, which is a step deeper than the other three so the first line clears the window's own edge. Falls back to `--drawer-padding`, so setting that alone governs all four sides. (default: `undefined`)
    * - `--drawer-radius`: Corner radius on the edges that face the page. (default: `undefined`)
    * - `--drawer-scrim`: The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one. (default: `undefined`)
    * - `--drawer-shadow`: Lift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default. (default: `undefined`)
@@ -44953,6 +45008,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `drilled`: While a row's page is showing rather than the top one, so a frame around this can answer the depth it is at.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-drilldown": Partial<
@@ -46808,8 +46864,11 @@ export type CustomElementsSolidJs = {
    * the platform's.
    *
    * Height comes from the region, like every other control: `data-density` on
-   * whatever holds it, not a `size` here. Invalid styling waits for
-   * `:user-invalid`, because a field is not wrong before anyone has filled it in.
+   * whatever holds it, not a `size` here. Invalid styling waits for the `invalid`
+   * custom state, because a field is not wrong before anyone has filled it in and
+   * `:user-invalid` cannot answer that here: it tracks the control the reader is
+   * in, which is inside this shadow root, so it never reaches the host the rule
+   * selects on.
    *
    * ## Attributes & Properties
    *
@@ -46856,11 +46915,6 @@ export type CustomElementsSolidJs = {
    * against `read-only` it parses to no property at all, and the field stays
    * editable with no error anywhere. Measured on the dash-cased form, `readOnly`
    * came back `false`.
-   *
-   * A part was renamed for
-   * the same kind of reason: there is no `helix-v` tag, so no consumer is
-   * holding the old spelling, and this is free today and a deprecation after
-   * the first release.
    * - `reveal`: Whether a password field offers a toggle that shows what was typed.
    *
    * Ignored on every other type. A reveal on an email field would be a button
@@ -47837,6 +47891,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The options, and any groups of them.
+   * - `filter-icon`: The mark in the filter's field. Left empty, a magnifier is drawn.
    * - `hint`: Richer than a string.
    * - `label`: Richer than a string.
    *
@@ -48075,8 +48130,16 @@ export type CustomElementsSolidJs = {
    * a band is not a question of paint: a band is not placed against the trigger,
    * so the controller has to be told not to measure, and that decision is here
    * whatever the stylesheet says. Writing the width in both places would be one
-   * number in two languages, drifting the first time either moved. This sets
-   * `data-narrow` on the host and the stylesheet arranges itself off that.
+   * number in two languages, drifting the first time either moved. This records
+   * `:state(narrow)` on the host and the stylesheet arranges itself off that.
+   *
+   * **A custom state and never `data-narrow`, which is what it was.** The width
+   * is read in `connectedCallback`, so on a phone this is true on the very first
+   * update: an attribute written there is markup a consumer's server never sent,
+   * which React reports as a mismatch and answers by rebuilding the subtree. The
+   * narrow exception the server specs describe covers a mirror that can only
+   * become true long after hydration, and a viewport measured before the first
+   * paint is the opposite case. See `MixinControllerOpen` on `open`.
    * - `label`: The section's name, which names the default trigger and the panel.
    * - `open-on`/`openOn`: Whether hovering the trigger opens the panel, or only a press does.
    *
@@ -48150,7 +48213,7 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--megamenu-backdrop`: A filter behind the panel, for glass. (default: `undefined`)
+   * - `--megamenu-backdrop`: A filter behind the panel, which is `none` until one is asked for: this family carries no `material`, so the pair is two hooks rather than a word. (default: `undefined`)
    * - `--megamenu-background-color`: The panel's own fill. (default: `undefined`)
    * - `--megamenu-border-width`: Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. (default: `undefined`)
    * - `--megamenu-column-size`: The narrowest a column goes before the grid wraps. (default: `undefined`)
@@ -48170,6 +48233,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
    * - `open`: While the panel is open, which is when the trigger reads as current.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
@@ -49874,9 +49938,11 @@ export type CustomElementsSolidJs = {
    * the shape a table of contents has taken since printed marginalia: the line
    * says the list is one thing, and the lit segment says where in it you are.
    *
-   * Nesting is the consumer's, expressed as `data-level` on a link. An outline
-   * that read heading levels itself would have to look at the document, and the
-   * document is not always where the headings are.
+   * Nesting is the consumer's, expressed as `data-level` on a link, and the
+   * levels are the heading levels: `2` through `6` each take one more step of
+   * `--outline-indent`, and a link with no `data-level` is the top one. An
+   * outline that read heading levels itself would have to look at the document,
+   * and the document is not always where the headings are.
    *
    * ## Attributes & Properties
    *
@@ -49941,7 +50007,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-activate`: The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves.
+   * - `helix-activate`: The section being read has changed, carrying its id as the value. An announcement: it is read off where the page is scrolled to, so there is no decision here to take.
    *
    * ## Slots
    *
@@ -51290,7 +51356,7 @@ export type CustomElementsSolidJs = {
    * `Radio.Group`, whose options already carry a value and a name each.
    *
    * **Undefaulted, because it reflects.** A default of `marks` writes
-   * `appearance="marks"` onto every server-rendered rating, which React holds no
+   * `variant="marks"` onto every server-rendered rating, which React holds no
    * prop for and reports as a hydration mismatch. The stylesheet names only
    * `dots`, so an unset one draws marks anyway.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
@@ -56552,7 +56618,7 @@ export type CustomElementsSolidJs = {
    * CSS variables available for styling the component.
    *
    * - `--tooltip-arrow-size`: Size of the point at the bubble's edge. (default: `undefined`)
-   * - `--tooltip-backdrop`: Blur behind a `glass` bubble. (default: `undefined`)
+   * - `--tooltip-backdrop`: Blur behind a `frosted` or `glass` bubble. (default: `undefined`)
    * - `--tooltip-background-color`: Fill of the bubble. (default: `undefined`)
    * - `--tooltip-max-inline-size`: Widest the bubble grows before wrapping. (default: `undefined`)
    *
@@ -58089,7 +58155,7 @@ export type CustomCssProperties = {
   "--color-input-shadow"?: (string) | undefined;
   /** Corner radius of that block. */
   "--color-input-swatch-radius"?: (string) | undefined;
-  /** Edge length of the block in `appearance="swatch"`. */
+  /** Edge length of the block in `variant="swatch"`. */
   "--color-input-swatch-size"?: (string) | undefined;
   /** The chosen color, to paint over the transparency check. */
   "--color-input-swatch"?: (string) | undefined;
@@ -58117,7 +58183,7 @@ export type CustomCssProperties = {
   "--combobox-border-color"?: (string) | undefined;
   /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. */
   "--combobox-border-width"?: (string) | undefined;
-  /** Smallest the text field shrinks to */
+  /** Smallest the text field shrinks to once tags share its line. */
   "--combobox-control-size"?: (string) | undefined;
   /** Width of the panel. Follows the field by default. */
   "--combobox-panel-size"?: (string) | undefined;
@@ -58213,7 +58279,7 @@ export type CustomCssProperties = {
   "--donut-chart-track-color"?: (string) | undefined;
   /** How thick the ring is drawn, derived from `hole`. */
   "--donut-chart-stroke"?: (string) | undefined;
-  /** Filter applied behind a `material="glass"` drawer. Follows the theme's material policy; set it to override the strength on one drawer. */
+  /** Filter applied behind a `frosted` or `glass` drawer. Follows the theme's material policy; set it to override the strength on one drawer. */
   "--drawer-backdrop"?: (string) | undefined;
   /** Surface behind the panel. */
   "--drawer-background-color"?: (string) | undefined;
@@ -58223,7 +58289,7 @@ export type CustomCssProperties = {
   "--drawer-border-width"?: (string) | undefined;
   /** Padding inside the panel. */
   "--drawer-padding"?: (string) | undefined;
-  /** Padding above the content, which clears the close control. */
+  /** Padding above the header, which is a step deeper than the other three so the first line clears the window's own edge. Falls back to `--drawer-padding`, so setting that alone governs all four sides. */
   "--drawer-padding-block-start"?: (string) | undefined;
   /** Corner radius on the edges that face the page. */
   "--drawer-radius"?: (string) | undefined;
@@ -58381,7 +58447,7 @@ export type CustomCssProperties = {
   "--loader-size"?: (string) | undefined;
   /** Color of the circle behind it. */
   "--loader-track-color"?: (string) | undefined;
-  /** A filter behind the panel, for glass. */
+  /** A filter behind the panel, which is `none` until one is asked for: this family carries no `material`, so the pair is two hooks rather than a word. */
   "--megamenu-backdrop"?: (string) | undefined;
   /** The panel's own fill. */
   "--megamenu-background-color"?: (string) | undefined;
@@ -58817,7 +58883,7 @@ export type CustomCssProperties = {
   "--toolbar-gap"?: (string) | undefined;
   /** Size of the point at the bubble's edge. */
   "--tooltip-arrow-size"?: (string) | undefined;
-  /** Blur behind a `glass` bubble. */
+  /** Blur behind a `frosted` or `glass` bubble. */
   "--tooltip-backdrop"?: (string) | undefined;
   /** Fill of the bubble. */
   "--tooltip-background-color"?: (string) | undefined;