@fusion.dev/helix-headless 0.37.0 → 0.38.0

package/custom-elements.json

@@ -20391,7 +20391,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether more than one option can be chosen.\n\nThe list already does the work: `value` comes apart on commas, a press\ntoggles rather than replaces, and the arrows move without choosing. What\nthis adds is the tags, and keeping the panel open between picks.\n\nA comma is therefore not available inside an option's value, which is the\nlistbox's contract and not this element's to change.",
+              "description": "Whether more than one option can be chosen.\n\nThe list already does the work: `value` comes apart on commas, a press\ntoggles rather than replaces, and the arrows move without choosing. What\nthis adds is the tags, and keeping the panel open between picks.\n\nA comma is therefore not available inside an option's value, which is the\nlistbox's contract and not this element's to change.\n\n**The list is told, and the field is not.** `aria-multiselectable` belongs\nto `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in\nARIA 1.2; the list sets it on itself through `ElementInternals`, where a\nreader on the field hears it through `aria-controls`. This element wrote it\nonto its own `role=\"combobox\"` input as well, which an audit reports as a\nproperty the role does not support and no spec here ever asserted: the one\nthat covers this says in as many words that telling the list is what this\nelement is responsible for.",
               "attribute": "multiple"
             },
             {
@@ -21987,7 +21987,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether more than one option can be chosen.\n\nThe list already does the work: `value` comes apart on commas, a press\ntoggles rather than replaces, and the arrows move without choosing. What\nthis adds is the tags, and keeping the panel open between picks.\n\nA comma is therefore not available inside an option's value, which is the\nlistbox's contract and not this element's to change.",
+              "description": "Whether more than one option can be chosen.\n\nThe list already does the work: `value` comes apart on commas, a press\ntoggles rather than replaces, and the arrows move without choosing. What\nthis adds is the tags, and keeping the panel open between picks.\n\nA comma is therefore not available inside an option's value, which is the\nlistbox's contract and not this element's to change.\n\n**The list is told, and the field is not.** `aria-multiselectable` belongs\nto `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in\nARIA 1.2; the list sets it on itself through `ElementInternals`, where a\nreader on the field hears it through `aria-controls`. This element wrote it\nonto its own `role=\"combobox\"` input as well, which an audit reports as a\nproperty the role does not support and no spec here ever asserted: the one\nthat covers this says in as many words that telling the list is what this\nelement is responsible for.",
               "fieldName": "multiple"
             },
             {
@@ -22242,7 +22242,7 @@
           "helix": {
             "category": "forms",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/combobox",
             "aliases": [
               "Autocomplete",
@@ -34311,7 +34311,7 @@
           "helix": {
             "category": "overlays",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/drawer",
             "aliases": [
               "Sheet",
@@ -34873,7 +34873,7 @@
           "summary": "One row of a drill-down, which may hold a page of its own.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/drilldown",
             "aliases": [
               "Panel item",
@@ -35639,6 +35639,20 @@
               }
             }
           ],
+          "cssStates": [
+            {
+              "description": "While a row's page is showing rather than the top one, so a frame around this can answer the depth it is at.",
+              "name": "drilled"
+            },
+            {
+              "description": "Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
           "mixins": [
             {
               "name": "MixinCollection",
@@ -35653,7 +35667,7 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/drilldown",
             "aliases": [
               "Panel",
@@ -35673,16 +35687,6 @@
           },
           "tagName": "helix-headless-drilldown",
           "customElement": true,
-          "cssStates": [
-            {
-              "description": "Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.",
-              "name": "settled",
-              "inheritedFrom": {
-                "name": "HelixElement",
-                "module": "src/helix-element/helix-element.ts"
-              }
-            }
-          ],
           "modulePath": "src/drilldown/root/drilldown-root.ts",
           "definitionPath": "src/drilldown/root/drilldown-root.ts"
         }
@@ -53530,7 +53534,7 @@
                 "text": "number"
               },
               "default": "640",
-              "description": "The width, in pixels, under which a card becomes a band. Zero never does.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This sets\n`data-narrow` on the host and the stylesheet arranges itself off that.",
+              "description": "The width, in pixels, under which a card becomes a band. Zero never does.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This records\n`:state(narrow)` on the host and the stylesheet arranges itself off that.\n\n**A custom state and never `data-narrow`, which is what it was.** The width\nis read in `connectedCallback`, so on a phone this is true on the very first\nupdate: an attribute written there is markup a consumer's server never sent,\nwhich React reports as a mismatch and answers by rebuilding the subtree. The\nnarrow exception the server specs describe covers a mirror that can only\nbecome true long after hydration, and a viewport measured before the first\npaint is the opposite case. See `MixinControllerOpen` on `open`.",
               "attribute": "full-below"
             },
             {
@@ -54263,7 +54267,7 @@
                 "text": "number"
               },
               "default": "640",
-              "description": "The width, in pixels, under which a card becomes a band. Zero never does.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This sets\n`data-narrow` on the host and the stylesheet arranges itself off that.",
+              "description": "The width, in pixels, under which a card becomes a band. Zero never does.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This records\n`:state(narrow)` on the host and the stylesheet arranges itself off that.\n\n**A custom state and never `data-narrow`, which is what it was.** The width\nis read in `connectedCallback`, so on a phone this is true on the very first\nupdate: an attribute written there is markup a consumer's server never sent,\nwhich React reports as a mismatch and answers by rebuilding the subtree. The\nnarrow exception the server specs describe covers a mirror that can only\nbecome true long after hydration, and a viewport measured before the first\npaint is the opposite case. See `MixinControllerOpen` on `open`.",
               "fieldName": "fullBelow"
             },
             {
@@ -54319,6 +54323,10 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "While the page is under `full-below`, so the panel is a band whether or not one was asked for.",
+              "name": "narrow"
+            },
             {
               "description": "While the panel is open, which is when the trigger reads as current.",
               "name": "open"
@@ -54346,7 +54354,7 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/megamenu",
             "aliases": [
               "Mega menu",
@@ -63945,11 +63953,11 @@
           "events": [
             {
               "type": {
-                "text": "HelixBeforeActivateEvent"
+                "text": "HelixActivateEvent"
               },
-              "description": "The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves.",
-              "name": "helix-before-activate",
-              "reactProp": "onhelix-before-activate"
+              "description": "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.",
+              "name": "helix-activate",
+              "reactProp": "onhelix-activate"
             }
           ],
           "attributes": [
@@ -100133,7 +100141,7 @@
           "helix": {
             "category": "overlays",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/tooltip",
             "aliases": [
               "Hint",

package/dist/combobox/root/combobox-root.d.ts

@@ -34,7 +34,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * row and fires the event; adding the option is the consumer's.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Autocomplete, Typeahead, Search select
  * @documentation https://fusion.dev/helix/components/combobox
@@ -134,6 +134,15 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      *
      * 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.
      */
     multiple: boolean;
     /**

package/dist/combobox/root/combobox-root.js

@@ -304,7 +304,6 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           aria-autocomplete=${this.suggest ? 'both' : 'list'}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-describedby=${this.describedBy ?? nothing}
-          aria-multiselectable=${this.multiple ? 'true' : nothing}
           placeholder=${(this.chosen.length > 0 ? '' : this.placeholder) || nothing}
           ?disabled=${this.isDisabled}
           .value=${this.multiple || this.open ? this.suggestion || this.typed : this.word}

package/dist/drawer/root/drawer-root.d.ts

@@ -29,7 +29,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * ```
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
  * @aliases Sheet, Sidebar, Panel, Off-canvas
  * @documentation https://fusion.dev/helix/components/drawer

package/dist/drilldown/item/drilldown-item.d.ts

@@ -24,7 +24,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * pressed. Not on the server, which cannot see the children and so cannot know.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Panel item, Drill row
  * @documentation https://fusion.dev/helix/components/drilldown
  *

package/dist/drilldown/root/drilldown-root.d.ts

@@ -27,7 +27,7 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * shares.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Panel, Nested list, Drill-in
  * @documentation https://fusion.dev/helix/components/drilldown
@@ -43,6 +43,8 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @csspart loading - Shown while the entries are still on their way.
  * @csspart page - The region the rows are in.
  * @csspart title - The name of the page showing.
+ *
+ * @cssstate 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.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
     /**

package/dist/drilldown/root/drilldown-root.js

@@ -123,7 +123,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             this.mark(child, page, page === null);
         }
         this.placeTabStop();
-        this.toggleAttribute('data-drilled', !this.drilldown.atRoot);
+        this.toggleState('drilled', !this.drilldown.atRoot);
         if (this.direction === undefined) {
             this.removeAttribute('data-direction');
         }

package/dist/element-events.generated.js

@@ -86,7 +86,7 @@ registerElementEvents({
     'helix-headless-number-input': ['change', 'helix-before-change', 'input'],
     'helix-headless-object-inspector': ['helix-copy'],
     'helix-headless-option': ['helix-select'],
-    'helix-headless-outline': ['helix-before-activate'],
+    'helix-headless-outline': ['helix-activate'],
     'helix-headless-pagination': ['helix-navigate'],
     'helix-headless-pagination-size': ['helix-before-change'],
     'helix-headless-pin-input': ['change', 'helix-before-change', 'helix-complete', 'input'],

package/dist/megamenu/root/megamenu-root.d.ts

@@ -21,7 +21,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * expects to sweep along a row and see each section.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Mega menu, Flyout, Nav panel
  * @documentation https://fusion.dev/helix/components/megamenu
@@ -38,6 +38,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  *
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
  *
+ * @cssstate narrow - While the page is under `full-below`, so the panel is a band whether or not one was asked for.
  * @cssstate open - While the panel is open, which is when the trigger reads as current.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
@@ -55,8 +56,16 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * 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: number;
     /**

package/dist/megamenu/root/megamenu-root.js

@@ -189,7 +189,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         if (changed.has('fullBelow')) {
             this.watchWidth();
         }
-        this.toggleAttribute('data-narrow', this.narrow);
+        this.toggleState('narrow', this.narrow);
         this.tellTrigger();
         if (this.open) {
             this.band();

package/dist/outline/root/outline-root.d.ts

@@ -24,7 +24,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The links, as anchors with fragment hrefs.
  *
- * @event {HelixBeforeActivateEvent} helix-before-activate - The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixActivateEvent} 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.
  *
  * @csspart indicator - The mark that travels to the section being read.
  * @csspart nav - The navigation landmark.

package/dist/outline/root/outline-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixBeforeActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
+import { customElement, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
@@ -116,7 +116,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const next = active?.target.id ?? '';
         if (next !== this.reading) {
             this.reading = next;
-            this.dispatchEvent(new HelixBeforeActivateEvent({ value: next }));
+            this.dispatchEvent(new HelixActivateEvent({ value: next }));
         }
     }
     get atEnd() {

package/dist/tooltip/root/tooltip-root.d.ts

@@ -38,7 +38,7 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * been used.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
  * @aliases Hint, Popup label
  * @documentation https://fusion.dev/helix/components/tooltip

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.37.0",
-    "@fusion.dev/helix-icons": "0.37.0",
+    "@fusion.dev/helix-core": "0.38.0",
+    "@fusion.dev/helix-icons": "0.38.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.37.0",
-    "@fusion.dev/helix-testing": "0.37.0",
+    "@fusion.dev/helix-cem": "0.38.0",
+    "@fusion.dev/helix-testing": "0.38.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -3283,7 +3283,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?: (HelixHeadlessCombobox["multiple"]) | undefined;
   /** Text shown while nothing has been chosen. */
   placeholder?: (HelixHeadlessCombobox["placeholder"]) | undefined;
@@ -3449,7 +3458,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"?: (HelixHeadlessCombobox["multiple"]) | undefined;
   /** Text shown while nothing has been chosen. */
   "prop:placeholder"?: (HelixHeadlessCombobox["placeholder"]) | undefined;
@@ -8659,8 +8677,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"?: (HelixHeadlessMegamenu["fullBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
@@ -8675,8 +8701,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?: (HelixHeadlessMegamenu["fullBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   label?: (HelixHeadlessMegamenu["label"]) | undefined;
@@ -8752,8 +8786,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"?: (HelixHeadlessMegamenu["fullBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
@@ -8768,8 +8810,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"?: (HelixHeadlessMegamenu["fullBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   "prop:label"?: (HelixHeadlessMegamenu["label"]) | undefined;
@@ -10230,9 +10280,9 @@ export type HelixHeadlessOutlineElementEvent<E = Event> = TypedEvent<
   HelixHeadlessOutline,
   E
 >;
-/** `helix-before-activate` event type */
-export type HelixHeadlessOutlineHelixBeforeActivateElementEvent =
-  HelixHeadlessOutlineElementEvent<HelixBeforeActivateEvent>;
+/** `helix-activate` event type */
+export type HelixHeadlessOutlineHelixActivateElementEvent =
+  HelixHeadlessOutlineElementEvent<HelixActivateEvent>;
 
 export type HelixHeadlessOutlineProps = {
   /** How a click on one of these links travels to its section.
@@ -10265,9 +10315,9 @@ 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?: (HelixHeadlessOutline["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: HelixHeadlessOutlineHelixBeforeActivateElementEvent,
+  /** 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: HelixHeadlessOutlineHelixActivateElementEvent,
   ) => void) | undefined;
 };
 
@@ -10301,9 +10351,9 @@ 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"?: (HelixHeadlessOutline["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: HelixHeadlessOutlineHelixBeforeActivateElementEvent,
+  /** 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: HelixHeadlessOutlineHelixActivateElementEvent,
   ) => void) | undefined;
 
   /** Set the innerHTML of the element */
@@ -20385,6 +20435,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.
@@ -22678,6 +22737,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-headless-drilldown": Partial<
@@ -25614,8 +25674,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.
    *
@@ -25715,6 +25783,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.
    */
@@ -27344,7 +27413,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
    *
@@ -37839,6 +37908,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.
@@ -40159,6 +40237,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-headless-drilldown": Partial<
@@ -43144,8 +43223,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.
    *
@@ -43245,6 +43332,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.
    */
@@ -44896,7 +44984,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
    *

package/types/vue.d.ts

@@ -159,11 +159,11 @@ import type {
   HelixResizeEvent,
   HelixShortcutEvent,
   HelixReadEvent,
-  HelixBeforeActivateEvent,
+  HelixActivateEvent,
   HelixCompleteEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
-  HelixActivateEvent,
+  HelixBeforeActivateEvent,
   HelixTourAskEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -1724,7 +1724,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?: (HelixHeadlessCombobox["multiple"]) | undefined;
   /** Text shown while nothing has been chosen. */
   placeholder?: (HelixHeadlessCombobox["placeholder"]) | undefined;
@@ -4445,8 +4454,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"?: (HelixHeadlessMegamenu["fullBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
@@ -4461,8 +4478,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?: (HelixHeadlessMegamenu["fullBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   label?: (HelixHeadlessMegamenu["label"]) | undefined;
@@ -5247,9 +5272,9 @@ export type HelixHeadlessOutlineElementEvent<E = Event> = TypedEvent<
   HelixHeadlessOutline,
   E
 >;
-/** `helix-before-activate` event type */
-export type HelixHeadlessOutlineHelixBeforeActivateElementEvent =
-  HelixHeadlessOutlineElementEvent<HelixBeforeActivateEvent>;
+/** `helix-activate` event type */
+export type HelixHeadlessOutlineHelixActivateElementEvent =
+  HelixHeadlessOutlineElementEvent<HelixActivateEvent>;
 
 export type HelixHeadlessOutlineVueProps = {
   /** How a click on one of these links travels to its section.
@@ -5284,8 +5309,8 @@ under the chrome rather than as it reaches the top of what can be seen. */
 };
 
 export type HelixHeadlessOutlineVueEvents = {
-  /** The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves. */
-  "helix-before-activate": HelixHeadlessOutlineHelixBeforeActivateElementEvent;
+  /** 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. */
+  "helix-activate": HelixHeadlessOutlineHelixActivateElementEvent;
 };
 
 /** `HelixHeadlessPagination` component event */