@fusion.dev/helix-headless 0.162.0 → 0.163.0

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

@@ -10,16 +10,22 @@ import '../../kbd/index.js';
  * - `checked` makes the row a choice.
  * - With neither, the row is a command.
  *
- * The role follows the kind. A row with `checked` is `menuitemcheckbox` with
- * `aria-checked`, and `exclusive` makes it `menuitemradio`, for a set where
- * only one can be on. A row that opens a page keeps `menuitem` and sets
- * `aria-haspopup`.
+ * The role follows the kind. A row with `checkable` or `checked` is
+ * `menuitemcheckbox` with `aria-checked`, and an `exclusive` row is
+ * `menuitemradio`, for a set where only one can be on. A row that opens a page
+ * keeps `menuitem` and sets `aria-haspopup`.
  *
  * Choosing a choice row checks or unchecks it before `helix-select` is sent,
  * so a listener reads the new `checked`. An `exclusive` row turns on and turns
  * off the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a
  * row as it is and set `checked` yourself.
  *
+ * Space on a choice row changes it and leaves the menu open, so a reader can
+ * set several in a row, as the APG's menu does. Enter and a press change it and
+ * close the menu. `close-on-select="false"` on the row keeps the menu open after
+ * any choice of it, and `close-on-select` on the row closes it after a Space as
+ * well.
+ *
  * The menu sets whether the row's page is showing as a property, never as an
  * attribute. An attribute written onto your element after it upgrades causes a
  * hydration mismatch.
@@ -82,7 +88,8 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * as a checkbox tells a reader its siblings are commands, which is the one
      * thing they are not.
      *
-     * `checked` implies it, so a row that is on never has to say both.
+     * `checked` and `exclusive` imply it, so a row that is on, or one of a set,
+     * never has to say both.
      *
      * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
      * you can cancel.
@@ -95,6 +102,14 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * state you start the row in, and `:state(checked)` carries the current one.
      */
     checked: boolean;
+    /**
+     * Whether choosing the row closes the menu.
+     *
+     * Unset takes the menu's `close-on-select`, which is on, and keeps the menu
+     * open after a Space on a choice row. Write `close-on-select="false"` for a
+     * row that changes something the reader is watching, such as a zoom step.
+     */
+    closeOnSelect?: boolean;
     /**
      * Whether the row is disabled, so it cannot be chosen.
      */
@@ -116,8 +131,7 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * it checked. `menuitemradio` tells a reader which kind of set they are in,
      * where `menuitemcheckbox` says every row is independent.
      *
-     * Meaningless without `checkable`, since a row that cannot be ticked is not
-     * one of a set of anything.
+     * It makes the row a choice, so it needs no `checkable` beside it.
      */
     exclusive: boolean;
     /**
@@ -192,6 +206,17 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * protected. Not a consumer's to read or set.
      */
     readonly isMenuItem = true;
+    /**
+     * @internal Whether the last choice of this row asked the menu to stay open:
+     * a Space on a choice row, or `close-on-select="false"`. Read by the menu
+     * while it hears the row's `helix-select`.
+     */
+    keepsOpen: boolean;
+    /**
+     * @internal Whether the row is a choice: it can be ticked, or is one of a
+     * set. Read by the menu to reserve the trailing column.
+     */
+    get choice(): boolean;
     /**
      * Whether anything was slotted into `submenu`.
      *
@@ -342,8 +367,14 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     private tick;
     /** The other `exclusive` rows in this row's run of siblings. */
     private exclusivePeers;
+    /**
+     * Chooses the row. `space` is whether a Space chose it, which keeps the menu
+     * open on a choice row unless the row says otherwise.
+     */
     private choose;
     private readonly handleClick;
+    /** Whether the click on its way is the one a Space on a linked row sent. */
+    private spacePressed;
     /**
      * Enter and Space choose the row, which a `<div>` would not do on its own.
      *

package/dist/menu/item/menu-item.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 { ariaChord, auditName, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, isRtl, onApple, PopoverController, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { ariaChord, auditName, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, isRtl, onApple, onUnlessFalse, PopoverController, requestChange, slotFilled, } from '@fusion.dev/helix-core';
 import { caretRight, check } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -29,6 +29,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         this.target = '';
         this.value = '';
         this.isMenuItem = true;
+        this.keepsOpen = false;
         this.submenu = false;
         this.start = false;
         this.end = false;
@@ -58,8 +59,10 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
             surface: () => (this.flyout ? this.partNamed('surface') : null),
         });
         this.handleClick = () => {
-            this.choose();
+            this.choose(this.spacePressed);
+            this.spacePressed = false;
         };
+        this.spacePressed = false;
         this.handleKeydown = (event) => {
             if (event.key !== 'Enter' && event.key !== ' ') {
                 return;
@@ -70,12 +73,17 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
             }
             event.preventDefault();
             if (link) {
+                this.spacePressed = true;
                 link.click();
+                this.spacePressed = false;
                 return;
             }
-            this.handleClick();
+            this.choose(event.key === ' ');
         };
     }
+    get choice() {
+        return this.checkable || this.checked || this.exclusive;
+    }
     get hasSubmenu() {
         return this.submenu;
     }
@@ -93,9 +101,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         const rows = this.knownChildren.filter((child) => child.slot === 'submenu' && child.isMenuItem);
         this.toggleState('submenu-start', this.flyout && rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
         this.toggleState('submenu-mark', this.flyout &&
-            rows.some((row) => row.checkable ||
-                row.checked ||
-                [...row.children].some((child) => child.slot === 'submenu')));
+            rows.some((row) => row.choice || [...row.children].some((child) => child.slot === 'submenu')));
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -152,7 +158,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         return this.active;
     }
     tick() {
-        if (!(this.checkable || this.checked) || this.hasSubmenu) {
+        if (!this.choice || this.hasSubmenu) {
             return;
         }
         const next = this.exclusive ? true : !this.checked;
@@ -188,10 +194,12 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         }
         return peers;
     }
-    choose() {
+    choose(space = false) {
         if (this.disabled) {
             return;
         }
+        const spaceKeeps = space && this.choice && !this.hasSubmenu;
+        this.keepsOpen = this.closeOnSelect === undefined ? spaceKeeps : !this.closeOnSelect;
         this.tick();
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
@@ -221,7 +229,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         }
         const submenu = this.hasSubmenu;
         const linked = this.href !== '' && !this.disabled;
-        const ticks = this.checkable || this.checked;
+        const ticks = this.choice;
         const role = ticks ? (this.exclusive ? 'menuitemradio' : 'menuitemcheckbox') : 'menuitem';
         const checkedState = ticks ? (this.checked ? 'true' : 'false') : nothing;
         const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
@@ -281,6 +289,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: 'close-on-select', converter: onUnlessFalse })
+], HelixHeadlessMenuItem.prototype, "closeOnSelect", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "disabled", void 0);

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

@@ -40,7 +40,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first
  * row, and Up Arrow on its last. In the menu, Up and Down Arrow move between
  * rows, Home and End go to the first and the last, a typed letter moves to
- * the next row whose name starts with it, Enter and Space choose, Right Arrow
+ * the next row whose name starts with it, Enter and Space choose (Space on a
+ * choice row changes it and leaves the menu open), Right Arrow
  * opens a row's submenu and Left Arrow goes back, the two swapping on a
  * right-to-left page. Left Arrow on the top page does nothing. Escape closes
  * the menu and returns focus to the trigger. Tab closes it and moves on.
@@ -109,6 +110,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * The text of the row that returns from a submenu.
      */
     backLabel: string;
+    /**
+     * Whether choosing a row closes the menu.
+     *
+     * On by default, and a Space on a choice row leaves the menu open either way.
+     * Write `close-on-select="false"` to keep the menu open after every choice, as
+     * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
+     */
+    closeOnSelect: boolean;
     /**
      * Whether the menu is the trigger's context menu: it opens where the reader
      * asks for one, with a right-click, a long press, Shift+F10 or the menu key.

package/dist/menu/root/menu-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 { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -31,6 +31,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     constructor() {
         super(...arguments);
         this.backLabel = 'Back';
+        this.closeOnSelect = true;
         this.context = false;
         this.label = '';
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
@@ -119,8 +120,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.enter(chosen);
                 return;
             }
+            const keep = chosen.keepsOpen || (chosen.closeOnSelect === undefined && !this.closeOnSelect);
             queueMicrotask(() => {
-                if (!event.defaultPrevented) {
+                if (!(event.defaultPrevented || keep)) {
                     this.hide();
                 }
             });
@@ -538,7 +540,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     markColumns() {
         const rows = this.flies ? this.topRows : this.drilldown.rows;
         this.toggleState('start', rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
-        this.toggleState('mark', rows.some((row) => row.checkable || row.checked || this.drilldown.hasPage(row)));
+        this.toggleState('mark', rows.some((row) => row.choice || this.drilldown.hasPage(row)));
     }
     mark(item, onPage) {
         const page = this.drilldown.page;
@@ -608,6 +610,9 @@ __decorate([
     words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessMenu.prototype, "backLabel", void 0);
+__decorate([
+    property({ attribute: 'close-on-select', converter: onUnlessFalse })
+], HelixHeadlessMenu.prototype, "closeOnSelect", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenu.prototype, "context", void 0);

package/dist/notifications/group/notification-group.d.ts

@@ -1,4 +1,4 @@
-import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
 declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
@@ -140,7 +140,10 @@ export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotific
      * the group is in is asked to update as well, since it counts the group's
      * rows and does not watch inside the group.
      */
+    private readonly recount;
     protected readonly childWatch: ChildrenController;
+    /** Hears a row upgrade after it arrived, which neither the slot nor `childWatch` reports. */
+    protected readonly upgradeWatch: UpgradeController;
     private readonly handleToggle;
     protected render(): TemplateResult;
 }

package/dist/notifications/group/notification-group.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 { assignSlots, ChildrenController, customElement, HelixElement, hostAria, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, HelixElement, hostAria, MixinControllerOpen, UpgradeController, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const TRIGGER_ID = 'trigger';
@@ -16,10 +16,12 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
         this.collapsible = false;
         this.label = '';
         this.isNotificationGroup = true;
-        this.childWatch = new ChildrenController(this, () => {
+        this.recount = () => {
             this.requestUpdate();
             this.parentElement?.requestUpdate?.();
-        });
+        };
+        this.childWatch = new ChildrenController(this, this.recount);
+        this.upgradeWatch = new UpgradeController(this, this.recount);
         this.handleToggle = () => {
             this.toggleOpen();
         };

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

@@ -1,4 +1,4 @@
-import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotificationGroup } from '../group/notification-group.js';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
@@ -239,6 +239,11 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * a group is the group's to hear, and the group asks the feed to count again.
      */
     protected readonly childWatch: ChildrenController;
+    /**
+     * Hears a row upgrade after it arrived. A row is known by its marker, which
+     * an element that has not upgraded lacks, so the row was assigned nowhere.
+     */
+    protected readonly upgradeWatch: UpgradeController;
     /**
      * An item's own read event, heard on the way past, so the count follows.
      *
@@ -328,7 +333,7 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * moment the markup is parsed. The rows themselves come from `items`, which
      * does need them upgraded, and that is the honest limit rather than a claim
      * this had made the other way: a row that upgrades late is counted on the next
-     * update, which its own `slotchange` asks for.
+     * update, which `UpgradeController` asks for when its definition arrives.
      */
     private markMedia;
     /**

package/dist/notifications/root/notifications-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 { assignSlots, ChildrenController, customElement, DelayController, deepContains, focusableElements, formatWords, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, DelayController, deepContains, focusableElements, formatWords, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { feedStep } from '../feed-keys.js';
@@ -24,6 +24,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             this.requestUpdate();
         };
         this.childWatch = new ChildrenController(this, this.handleSlotChange);
+        this.upgradeWatch = new UpgradeController(this, this.handleSlotChange);
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };

package/dist/radio/group/radio-group.d.ts

@@ -1,4 +1,4 @@
-import { DisabledCascadeController, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { DisabledCascadeController, HelixFormElement, KeyboardNavigationController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
 declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -123,6 +123,7 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      */
     get items(): HelixHeadlessRadio[];
     private observer;
+    protected readonly upgradeWatch: UpgradeController;
     /**
      * Announces before it applies, so a listener can refuse the change.
      *

package/dist/radio/group/radio-group.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, DisabledCascadeController, HelixFormElement, hostAria, KeyboardNavigationController, MixinControllerValue, MixinField, words, } from '@fusion.dev/helix-core';
+import { customElement, DisabledCascadeController, HelixFormElement, hostAria, KeyboardNavigationController, MixinControllerValue, MixinField, UpgradeController, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
@@ -22,6 +22,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
+        this.upgradeWatch = new UpgradeController(this, undefined, { subtree: true });
         this.handleSelection = (event) => {
             event.stopPropagation();
             if (this.readOnly) {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { type HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
@@ -251,6 +251,13 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * be reached from the server and are left plain.
      */
     private get listbox();
+    /**
+     * Hears an option upgrade after it arrived. The options are this element's
+     * children, which the listbox reaches through a slot and does not watch, so
+     * both read them again: the listbox to select the one `value` names, and this
+     * element for the words on its trigger.
+     */
+    protected readonly upgradeWatch: UpgradeController;
     protected readonly panel: PopoverController;
     /**
      * What the trigger says: the chosen options' words, or the placeholder.

package/dist/select/root/select-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 { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -36,6 +36,10 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.placeholder = 'Choose';
         this.position = 'floating';
         this.valueMissingMessage = 'Choose one to continue.';
+        this.upgradeWatch = new UpgradeController(this, () => {
+            this.listbox?.requestUpdate();
+            this.requestUpdate();
+        }, { subtree: true });
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('trigger'),
             boundary: () => [

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

@@ -150,7 +150,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     protected readonly keys: KeyboardNavigationController;
     /** The steps, in the order the consumer wrote them. */
     private get steps();
-    /** The index of the stage the reader is on, or `-1`. */
+    /**
+     * The index of the stage the reader is on, or `-1`.
+     *
+     * Read from `active` once anything has set it, because a move writes
+     * `active` at once and each step's `current` only on the next update: two
+     * calls to `next()` in one task then move two stages.
+     */
     private get at();
     /**
      * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`

package/dist/steps/root/steps-root.js

@@ -58,7 +58,12 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         return [...this.querySelectorAll(':scope > *')].filter((one) => 'current' in one);
     }
     get at() {
-        return this.steps.findIndex((step) => step.current);
+        const steps = this.steps;
+        if (this.active === '') {
+            return steps.findIndex((step) => step.current);
+        }
+        const item = this.resolveActive(steps);
+        return item ? steps.indexOf(item) : -1;
     }
     next() {
         return this.step(1);

package/dist/tag/group/tag-group.d.ts

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController, type SelectionMode } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, type SelectionMode, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessTag } from '../root/tag-root.js';
 /** How many tags a group lets a reader select: core's `SelectionMode`. */
@@ -179,6 +179,8 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      */
     private readonly handleDismiss;
     private readonly handleSlotchange;
+    /** Reads a tag again once it upgrades, so it takes its role and its place. */
+    protected readonly upgradeWatch: UpgradeController;
     private readonly handleFocusin;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/tag/group/tag-group.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 { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
@@ -126,6 +126,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             this.sync();
             this.requestUpdate();
         };
+        this.upgradeWatch = new UpgradeController(this, this.handleSlotchange);
         this.handleFocusin = (event) => {
             const tag = this.tagOf(event);
             if (tag && tag !== this.last) {

package/dist/toggle/group/toggle-group.d.ts

@@ -1,4 +1,4 @@
-import { DisabledCascadeController, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { DisabledCascadeController, HelixFormElement, KeyboardNavigationController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -215,6 +215,7 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      */
     private get items();
     private observer;
+    protected readonly upgradeWatch: UpgradeController;
     private readonly handleSelection;
     /**
      * Whether the group holds an answer the form can submit: a value an item

package/dist/toggle/group/toggle-group.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 { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, reportValues, rovingStop, toggleValue, toolbarAround, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, reportValues, rovingStop, toggleValue, toolbarAround, UpgradeController, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessToggle } from '../root/toggle-root.js';
@@ -35,6 +35,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
+        this.upgradeWatch = new UpgradeController(this, () => this.handleItems(), {
+            subtree: true,
+        });
         this.handleSelection = (event) => {
             queueMicrotask(() => {
                 if (event.defaultPrevented) {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -209,6 +209,7 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /** Whether many items can be checked. */
     private get multiple();
     private watcher;
+    protected readonly upgradeWatch: UpgradeController;
     /** The item that last had focus, so its removal can hand focus on. */
     private focused;
     /** The item last checked or unchecked, where a range Shift+Space checks starts. */

package/dist/tree/root/tree-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 { AriaForwardController, auditName, closestInstance, commaList, customElement, deepActiveElement, formatWords, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, requestReorder, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, closestInstance, commaList, customElement, deepActiveElement, formatWords, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, requestReorder, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { fromGrip } from '../grip.js';
@@ -53,6 +53,9 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         });
         this.pickedUpLabel = 'Picked up {name}';
         this.reorderable = false;
+        this.upgradeWatch = new UpgradeController(this, () => this.syncItems(), {
+            subtree: true,
+        });
         this.handleFocusIn = (event) => {
             this.focused = event
                 .composedPath()