@fusion.dev/helix-headless 0.0.0-dev → 0.0.3

package/dist/listbox/root/listbox-root.js

@@ -44,11 +44,9 @@ const HIGHLIGHT = 'helix-filter-match';
 /**
  * Whether this environment can paint a highlight at all.
  *
- * Asked before the ranges are built rather than after. Walking every shown
- * option's text nodes to hand the result to an API that is not there is work
- * with no output, and it is not free: a server, a test environment and an older
- * browser all take that path, and the DOM implementations they use are not the
- * one this was measured against.
+ * Asked before the ranges are built rather than after: a server, a test
+ * environment and an older browser all take that path, and walking every shown
+ * option's text nodes for an API that is not there is work with no output.
  */
 const paintable = () => typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined';
 const paintMatches = () => {
@@ -122,25 +120,14 @@ const rangeFor = (root, needle) => {
  * chooses, because a reader passing over four options on the way to the fifth
  * did not mean to pick all five.
  *
- * **This does not use `KeyboardNavigationController`, and the reason given here
- * was the wrong one.** It said the controller moves and chooses in one act by
- * design, so half of this component needed that and half the opposite. The
- * controller does not work that way: it takes `origin: 'focus' | 'selection'`,
- * and `focus` exists precisely so a reader can arrow without choosing, which is
- * what `Tabs` uses in `manual` mode. `focusItem()` and `select()` are separate
- * members of `NavigableItem`. The incompatibility named above is one the
- * controller had already solved.
- *
- * The real one is where focus lives. `NavigableItem.focusItem()` moves DOM
- * focus to the item, because the controller's model is a roving tab stop. A
- * filterable list cannot do that: focus has to stay in the field or typing
- * stops, so what moves is a virtual cursor and `aria-activedescendant` is what
- * says where it is. Those two disagree about the one thing neither can
- * abstract, and no flag reconciles them.
- *
- * Worth keeping the distinction sharp, because the old wording invites the
- * wrong fix: someone reading it would add `origin` to the controller, find it
- * already there, and conclude this component could adopt it.
+ * **This does not use `KeyboardNavigationController`, and the reason is where
+ * focus lives rather than whether moving chooses.** The controller already
+ * separates those, taking `origin: 'focus' | 'selection'`. What it cannot do is
+ * leave focus alone: `NavigableItem.focusItem()` moves DOM focus to the item,
+ * its model being a roving tab stop. A filterable list cannot have that, focus
+ * having to stay in the field or typing stops, so what moves is a virtual
+ * cursor and `aria-activedescendant` is what says where it is. No flag
+ * reconciles the two.
  *
  * **Filtering hides rather than removes.** An option the filter has hidden is
  * still the consumer's element in the consumer's order, so a filter that clears
@@ -201,15 +188,22 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.defaultFilter = '';
         /** What the list is narrowed to, whoever set it. */
         this.filterState = undefined;
+        /**
+         * What is shown when a filter has hidden every option.
+         *
+         * From `MixinCollection`, which every collection in the library now shares,
+         * and re-declared here only to keep this list's own wording: "No matches" is
+         * about a filter, and the mixin's "Nothing to show" is about a list that was
+         * never given anything.
+         */
+        this.emptyText = 'No matches';
         /**
          * Whether the list renders a field for narrowing itself.
          *
          * The field lives here rather than in whatever frames the list, because the
          * filtering already does: `filter`, the empty state and the keyboard are all
-         * this component's. A select that drew its own search box above a listbox
-         * would be writing the same field again, and so would a combobox, and so
-         * would a command palette, which is the fault the three-family split exists
-         * to prevent.
+         * this component's. A select, a combobox and a command palette drawing their
+         * own search boxes would be three copies of one field.
          */
         this.filterable = false;
         /**
@@ -220,15 +214,6 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
          * Whether more than one option can be the answer.
          */
         this.multiple = false;
-        /**
-         * What is shown when a filter has hidden every option.
-         *
-         * From `MixinCollection`, which every collection in the library now shares,
-         * and re-declared here only to keep this list's own wording: "No matches" is
-         * about a filter, and the mixin's "Nothing to show" is about a list that was
-         * never given anything.
-         */
-        this.emptyText = 'No matches';
         /**
          * Which option the keyboard is on, which is not what is chosen.
          */
@@ -247,10 +232,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
          *
          * Counting during render reads the hiding from the *previous* pass, because
          * hiding happens in `updated` against options that are the consumer's
-         * elements rather than this component's markup. So a filter matching nothing
-         * rendered the full list, hid every option, and left an empty box with no
-         * message in it: the count was right one pass too late. Written to state
-         * instead, which schedules the one further render that shows it.
+         * elements rather than this component's markup, so a filter matching nothing
+         * leaves an empty box with no message in it. Written to state instead, which
+         * schedules the one further render that shows it.
          */
         this.hasMatches = true;
         /**
@@ -264,9 +248,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
          */
         this.counted = false;
         /* Stated once, and the group never thinks about it again. See the
-           controller: the cascade was four hand calls from four different
-           methods, so which paths reached it differed by component and a fifth
-           group would have got none at all. */
+           controller: cascading by hand from each method that changes the set
+           leaves the paths that reached it differing by component. */
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.options,
         });
@@ -340,8 +323,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
          *
          * `helix-filter` and not `helix-change`, because nothing about the value
          * changes: the options are hidden rather than removed, and telling a consumer
-         * their answer moved when it did not is worse than telling them nothing. It
-         * told them nothing before this.
+         * their answer moved when it did not is worse than telling them nothing.
          */
         this.handleFilter = (event) => {
             // Stopped for the reason `Input.handleInput` gives: the inner control's own
@@ -388,15 +370,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                arrows move the highlight and Enter takes it, which is what Enter already
                does by bubbling to the host handler.
         
-               **What was here instead moved focus to `[part="items"]` and re-dispatched
-               the key.** Both halves of that were wrong, and measured on a bare
-               `<helix-listbox filterable>` one Down produced: two `helix-change` events,
-               `a` then `b`, and a highlight on the *second* option. Focus on the list
-               meant moving chose, so a single press committed a value the reader was
-               arrowing past; and the original press went on bubbling to the same host
-               handler the re-dispatch had already reached, so every key was handled
-               twice and the list advanced two rows for one press. In `Command` that
-               reads as a palette that navigates away the moment a reader presses Down.
+               **Never move focus to `[part="items"]` and re-dispatch the key instead.**
+               Both halves fail: focus on the list means moving chooses, so a single
+               press commits a value the reader was arrowing past, and the original
+               press goes on bubbling to the same host handler the re-dispatch already
+               reached. Measured on a bare `<helix-listbox filterable>`, one Down
+               produced two `helix-change` events and a highlight two rows down.
         
                `stopPropagation` is what closes the second half: the field handled the
                key, so it must not arrive at the host as well. The move keys are the
@@ -412,8 +391,6 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
      * the list is still the consumer's own elements in their own order. Reading
      * gives what is being filtered on; writing declares it theirs, and
      * `default-filter` seeds one the list owns.
-     *
-     *
      */
     get filter() {
         return this.filterState ?? this.defaultFilter;
@@ -464,17 +441,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     /**
      * Walks the tree, and walks *through* a slot when it meets one.
      *
-     * Descendants rather than children, because a group puts a level between the
-     * list and its options and the keyboard has to move through a grouped list
-     * exactly as it moves through a flat one.
-     *
      * Through a slot because that is how this gets composed. `Select` renders a
      * listbox in its own shadow root with a slot inside it, so the options are
      * the *select's* light DOM and the listbox's only child is the slot: a plain
      * `querySelectorAll` finds the slot and no options at all, and the whole
-     * component comes up empty. Found the first time the two were put together,
-     * which is the argument for building the pieces separately rather than
-     * discovering it inside a finished Select.
+     * component comes up empty.
      */
     collect(nodes) {
         const found = [];
@@ -535,10 +506,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (joined === this.value) {
             return;
         }
-        /* Through the mixin rather than hand-rolled. It did the same two steps in
-           the same order, and doing them here meant the control could not be
-           owned: writing `value` is how a consumer says it is theirs, so a listbox
-           writing its own would take ownership away from them on every change. */
+        /* Through the mixin rather than hand-rolled: writing `value` is how a
+           consumer says it is theirs, so a listbox writing its own would take
+           ownership away from them on every change. */
         this.requestValue(joined);
     }
     /**
@@ -546,9 +516,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
      *
      * A combobox keeps focus in its text field, because that is the whole of what
      * a combobox is, and still has to move this list with the arrows. Without
-     * this it would have to reimplement the moving, the wrapping, the skipping of
-     * disabled options and the seeding from the current value, and the second
-     * copy would drift from this one the first time either changed.
+     * this it would reimplement the moving, the wrapping, the skipping of
+     * disabled options and the seeding from the current value.
      *
      * Public and taking the event rather than a direction, so a caller forwards
      * what it received and this decides what the key means. `preventDefault` is
@@ -577,8 +546,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
      * A method rather than something this does on its own, because a listbox
      * opening on its answer usually wants it merely *visible* and the browser
      * already manages that: centering is what a caller wants when the list is being
-     * read as a dial rather than scanned as a list, which is what Time Picker's wheels
-     * does with three of these.
+     * read as a dial rather than scanned as a list, which is what Time Picker's
+     * wheels do with three of these.
      *
      * A delta from the two boxes rather than `offsetTop`. An option is a slotted
      * light DOM child, so its `offsetParent` is whatever is positioned above it,
@@ -693,30 +662,6 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         hostAria(this.internals, { label: this.label, role: 'listbox' });
         this.internals.ariaMultiSelectable = this.multiple ? 'true' : null;
     }
-    /*
-     * Points the focused list at the option the keyboard is on.
-     *
-     * **The gap this closes.** Focus stays on `[part="items"]` while a highlight
-     * moves between options, which is the half of the ARIA listbox pattern we
-     * had. The other half is saying *which* option, and nothing did: a screen
-     * reader heard the list and its selection and never heard the item being
-     * moved over. Neither `aria-activedescendant` nor a roving `tabindex` was
-     * wired, and the pattern requires one of the two.
-     *
-     * **An element reference and not an id, because an IDREF cannot do this.**
-     * The options are the consumer's light DOM and the element that takes focus
-     * is in this shadow root, so `aria-activedescendant="whatever"` resolves
-     * against the shadow tree, finds nothing, and is dropped in silence. Element
-     * references are the platform's answer to exactly that, and they resolve
-     * outward: a shadow-tree element may point at a light-DOM one, which is the
-     * direction this needs.
-     *
-     * Feature-tested rather than assumed, for the reason `hostAria` gives:
-     * assigning to a property an engine does not implement is a no-op rather than
-     * an error, so the guard is what makes the absence visible to anyone reading
-     * this. Where it is missing the list still works and still announces its
-     * selection; what is lost is the running commentary as the keys move.
-     */
     /**
      * Where the reader is, and failing that where the answer is.
      *
@@ -726,16 +671,28 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
      * Seeding from the value means the first press moves from what the reader can
      * see is selected.
      *
-     * **The keyboard knew this and the announcement did not.** `linkActive` asked
-     * for `activeValue` alone, so a list that had been given a value and not yet
-     * arrowed through pointed `aria-activedescendant` at nothing: a screen reader
-     * was told the list and its selection, and nothing about where the cursor
-     * was, until a key moved it. Both read this now, so the thing announced and
-     * the thing the arrows move from cannot disagree.
+     * Read by `linkActive` as well as by the keys, so the option announced and
+     * the option the arrows move from cannot disagree: asking for `activeValue`
+     * alone points `aria-activedescendant` at nothing until a key has moved it.
      */
     get currentValue() {
         return this.activeValue || (this.value.split(',')[0] ?? '');
     }
+    /*
+     * Points the focused list at the option the keyboard is on.
+     *
+     * **An element reference and not an id, because an IDREF cannot do this.**
+     * The options are the consumer's light DOM and the element that takes focus
+     * is in this shadow root, so `aria-activedescendant="whatever"` resolves
+     * against the shadow tree, finds nothing, and is dropped in silence. Element
+     * references resolve outward: a shadow-tree element may point at a light-DOM
+     * one, which is the direction this needs.
+     *
+     * Feature-tested rather than assumed, for the reason `hostAria` gives:
+     * assigning to a property an engine does not implement is a no-op rather than
+     * an error. Where it is missing the list still works and still announces its
+     * selection; what is lost is the running commentary as the keys move.
+     */
     linkActive() {
         /* Whichever element the reader is actually in. `aria-activedescendant` is
            read from the focused element, so pointing the list at the active option
@@ -833,9 +790,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         id="items"
         aria-busy=${this.loading ? 'true' : nothing}
         ${
-        /* `isDisabled`, matching the filter input above it. The two lines
-           disagreed, so a listbox in a disabled fieldset kept its tab stop
-           and took arrow keys while its own filter was correctly out. */
+        /* `isDisabled`, matching the filter input above it: on `disabled`
+           alone, a listbox in a disabled fieldset keeps its tab stop and
+           takes arrow keys while its own filter is correctly out. */
         ''}
         tabindex=${this.isDisabled ? -1 : 0}
       >
@@ -863,6 +820,9 @@ __decorate([
 __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessListbox.prototype, "defaultFilter", void 0);
+__decorate([
+    property({ attribute: 'empty-text' })
+], HelixHeadlessListbox.prototype, "emptyText", void 0);
 __decorate([
     property({ attribute: 'filterable', reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "filterable", void 0);
@@ -872,9 +832,6 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "multiple", void 0);
-__decorate([
-    property({ attribute: 'empty-text' })
-], HelixHeadlessListbox.prototype, "emptyText", void 0);
 __decorate([
     state()
 ], HelixHeadlessListbox.prototype, "activeValue", void 0);

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

@@ -47,8 +47,8 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * anything managing it. Escape closes and puts focus back, because Escape is
  * the one key that has to return the reader to where they were.
  *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
+ * The custom property below is written by this component and read by whoever
+ * draws it. A consumer never sets it: it carries a number this element computed
  * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
  * without measuring anything itself.
  *
@@ -71,10 +71,37 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
+    /**
+     * The width, in pixels, under which a card becomes a band. Zero never does.
+     *
+     * A card is a panel hung off one word, and there is no room to hang anything
+     * off a word on a phone: the columns do not shrink past
+     * `--megamenu-column-size`, so four of them stay four of them and the panel
+     * runs off the side of the screen rather than reflowing. Below this it takes
+     * the whole width and its columns stack, which is the only arrangement that
+     * fits.
+     *
+     * **In script rather than a media query, and only once.** Whether the panel is
+     * 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.
+     */
+    fullBelow: number;
     /**
      * The section's name, which names the default trigger and the panel.
      */
     label: string;
+    /**
+     * Whether hovering the trigger opens the panel, or only a press does.
+     *
+     * A press always works. This says whether a mouse also opens it by resting on
+     * the trigger, and it is the default because that is what a navigation bar
+     * does. `click` is for a trigger that does something else as well, or a panel
+     * heavy enough that opening it on the way past is rude.
+     */
+    openOn: 'click' | 'hover';
     /**
      * Whether the panel is a card under the trigger or a band across the page.
      *
@@ -91,33 +118,6 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * the dismissal, is exactly what such a band needs.
      */
     variant?: 'full';
-    /**
-     * Whether hovering the trigger opens the panel, or only a press does.
-     *
-     * A press always works. This says whether a mouse also opens it by resting on
-     * the trigger, and it is the default because that is what a navigation bar
-     * does. `click` is for a trigger that does something else as well, or a panel
-     * heavy enough that opening it on the way past is rude.
-     */
-    openOn: 'click' | 'hover';
-    /**
-     * The width, in pixels, under which a card becomes a band. Zero never does.
-     *
-     * A card is a panel hung off one word, and there is no room to hang anything
-     * off a word on a phone: the columns do not shrink past
-     * `--megamenu-column-size`, so four of them stay four of them and the panel
-     * runs off the side of the screen rather than reflowing. Below this it takes
-     * the whole width and its columns stack, which is the only arrangement that
-     * fits.
-     *
-     * **In script rather than a media query, and only once.** Whether the panel is
-     * 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.
-     */
-    fullBelow: number;
     private narrow;
     private query;
     /** A band, whether because it was asked for or because there is no room. */
@@ -194,9 +194,8 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * band still sitting at 57.
      *
      * The card has none of this, because the floating controller follows its
-     * anchor. Turning that off for the band, which has nothing to be placed
-     * against, took the scroll handling with it, and this is the half that was
-     * still wanted.
+     * anchor. The band turns that controller off, having nothing to be placed
+     * against, and this is the half of it still wanted.
      *
      * A sticky bar does not move, so re-measuring returns the same number and the
      * band stays where it is. `requestOpen` rather than `close`, because closing
@@ -211,9 +210,9 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     /**
      * Shuts the panel when a reader takes one of the destinations in it.
      *
-     * Nothing closed it before, so a click navigated and left the panel hanging
-     * over wherever the reader landed. With a router that navigates in place, and
-     * this is one, that is a panel covering the page it was asked to go to.
+     * Without this a click navigates and leaves the panel hanging over wherever
+     * the reader landed. With a router that navigates in place, that is a panel
+     * covering the page it was asked to go to.
      *
      * **A modified click leaves it open**, which is the same position this
      * element already takes on middle clicks and the status bar: `cmd` on a link

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

@@ -65,8 +65,8 @@ let showing;
  * anything managing it. Escape closes and puts focus back, because Escape is
  * the one key that has to return the reader to where they were.
  *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
+ * The custom property below is written by this component and read by whoever
+ * draws it. A consumer never sets it: it carries a number this element computed
  * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
  * without measuring anything itself.
  *
@@ -91,23 +91,6 @@ let showing;
 let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
-        /**
-         * The section's name, which names the default trigger and the panel.
-         */
-        this.label = '';
-        /**
-         * Whether hovering the trigger opens the panel, or only a press does.
-         *
-         * A press always works. This says whether a mouse also opens it by resting on
-         * the trigger, and it is the default because that is what a navigation bar
-         * does. `click` is for a trigger that does something else as well, or a panel
-         * heavy enough that opening it on the way past is rude.
-         */
-        /* Read, never written back. It has a default, and a reflected default puts an
-           attribute on the host that the consumer did not write, which the server
-           then ships: the SSR spec for this element checks exactly that and caught
-           it. Nothing selects on it, so there is nothing to reflect for. */
-        this.openOn = 'hover';
         /**
          * The width, in pixels, under which a card becomes a band. Zero never does.
          *
@@ -126,6 +109,23 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
          * `data-narrow` on the host and the stylesheet arranges itself off that.
          */
         this.fullBelow = 640;
+        /**
+         * The section's name, which names the default trigger and the panel.
+         */
+        this.label = '';
+        /**
+         * Whether hovering the trigger opens the panel, or only a press does.
+         *
+         * A press always works. This says whether a mouse also opens it by resting on
+         * the trigger, and it is the default because that is what a navigation bar
+         * does. `click` is for a trigger that does something else as well, or a panel
+         * heavy enough that opening it on the way past is rude.
+         */
+        /* Read, never written back. It has a default, and a reflected default puts an
+           attribute on the host that the consumer did not write, which the server
+           then ships: the SSR spec for this element checks exactly that. Nothing
+           selects on it, so there is nothing to reflect for. */
+        this.openOn = 'hover';
         this.narrow = false;
         this.handleWidth = (event) => {
             this.narrow = event.matches;
@@ -152,9 +152,8 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
          * band still sitting at 57.
          *
          * The card has none of this, because the floating controller follows its
-         * anchor. Turning that off for the band, which has nothing to be placed
-         * against, took the scroll handling with it, and this is the half that was
-         * still wanted.
+         * anchor. The band turns that controller off, having nothing to be placed
+         * against, and this is the half of it still wanted.
          *
          * A sticky bar does not move, so re-measuring returns the same number and the
          * band stays where it is. `requestOpen` rather than `close`, because closing
@@ -175,7 +174,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             this.pointer = event.pointerType;
         };
         this.handlePointerEnter = (event) => {
-            /* Mouse only. A touch screen synthesises an enter on tap, and acting on it
+            /* Mouse only. A touch screen synthesizes an enter on tap, and acting on it
                would open the panel and then let the click that follows close it again,
                so a tap would do nothing at all. */
             if (this.openOn !== 'hover' || event.pointerType !== 'mouse') {
@@ -216,9 +215,9 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         /**
          * Shuts the panel when a reader takes one of the destinations in it.
          *
-         * Nothing closed it before, so a click navigated and left the panel hanging
-         * over wherever the reader landed. With a router that navigates in place, and
-         * this is one, that is a panel covering the page it was asked to go to.
+         * Without this a click navigates and leaves the panel hanging over wherever
+         * the reader landed. With a router that navigates in place, that is a panel
+         * covering the page it was asked to go to.
          *
          * **A modified click leaves it open**, which is the same position this
          * element already takes on middle clicks and the status bar: `cmd` on a link
@@ -411,29 +410,25 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         /* A slotted trigger is told the disclosure state, by property.
     
            `render` writes `aria-expanded` onto the button it renders itself, and a
-           consumer who takes the documented `trigger` slot replaces that button: the
-           panel opened and closed and nothing announced it, so a reader was told the
-           control was a plain button forever. Silent, because the slot works in
-           every other respect and the failure is only audible.
+           consumer who takes the documented `trigger` slot replaces that button, so
+           without this the panel opens and closes and nothing announces it. Silent,
+           because the slot works in every other respect and the failure is only
+           audible.
     
-           **It was `setAttribute` and that really was a hydration mismatch**, which
-           is what `Popover`'s class note has said since the day it was written.
-           *Measured 28 Aug 2026 against React 19.2.8*, four families server-rendered
-           and hydrated with the definitions loaded either side of `hydrateRoot`:
-           this one and `SpeedDial` produced "some attributes of the server rendered
-           HTML didn't match the client properties. This won't be patched up" in both
-           orders, and `Popover` and `Menu`, which write nothing, were clean in both.
-           React answers a mismatch by discarding the server's HTML for that subtree
-           and rebuilding it, which is the expensive half rather than the console
-           line.
+           **Never `setAttribute` here: that is a hydration mismatch.** Measured
+           against React 19.2.8, four families server-rendered and hydrated with the
+           definitions loaded either side of `hydrateRoot`: this one and `SpeedDial`
+           produced "some attributes of the server rendered HTML didn't match the
+           client properties. This won't be patched up" in both orders, and
+           `Popover` and `Menu`, which write nothing, were clean in both. React
+           answers a mismatch by discarding the server's HTML for that subtree and
+           rebuilding it, which is the expensive half rather than the console line.
     
-           **The property is the way through, and it is this library's own answer
-           already.** `Menu` tells its items by property for exactly this reason and
-           says so. React diffs the attributes it rendered and never looks at a
-           property, so `expanded` travels to the trigger, lands as `aria-expanded`
-           inside that element's shadow root, and the consumer's markup is left as
-           they served it. Both notes get what they were protecting: nothing is
-           written onto their element, and the reader is still told.
+           **The property is the way through**, as `Menu` already does for its items.
+           React diffs the attributes it rendered and never looks at a property, so
+           `expanded` travels to the trigger, lands as `aria-expanded` inside that
+           element's shadow root, and the consumer's markup is left as they served
+           it.
     
            **What it cannot reach is a trigger that is not a Helix element.** A plain
            `<button slot="trigger">` has no shadow root to hide the state in and no
@@ -442,13 +437,13 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
            than written to, on the same argument `Tooltip` makes about a link it
            will not write for the consumer.
     
-           **`aria-controls` is not written here and cannot be.** It named `panel`,
-           an id inside this shadow root, and an IDREF resolves only within the tree
-           that holds it: from a light-DOM trigger looking in, the reference was to
-           nothing. Measured, `document.querySelector('#panel')` came back `null`
-           while the same id resolved inside `megamenu.shadowRoot`. An inert
+           **`aria-controls` is not written here and cannot be.** It would name
+           `panel`, an id inside this shadow root, and an IDREF resolves only within
+           the tree that holds it: from a light-DOM trigger looking in, the reference
+           is to nothing. Measured, `document.querySelector('#panel')` came back
+           `null` while the same id resolved inside `megamenu.shadowRoot`. An inert
            `aria-controls` is worse than none, an audit tool reporting it satisfied
-           and a screen reader following it nowhere. See #322. */
+           and a screen reader following it nowhere. */
         this.tellTrigger();
         if (this.open) {
             /* Before showing this one, so the two are never both up for a frame. The
@@ -505,18 +500,18 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: 'full-below', type: Number })
+], HelixHeadlessMegamenu.prototype, "fullBelow", void 0);
 __decorate([
     property()
 ], HelixHeadlessMegamenu.prototype, "label", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessMegamenu.prototype, "variant", void 0);
 __decorate([
     property({ attribute: 'open-on' })
 ], HelixHeadlessMegamenu.prototype, "openOn", void 0);
 __decorate([
-    property({ attribute: 'full-below', type: Number })
-], HelixHeadlessMegamenu.prototype, "fullBelow", void 0);
+    property({ reflect: true })
+], HelixHeadlessMegamenu.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessMegamenu.prototype, "narrow", void 0);