@fusion.dev/helix-headless 0.161.0 → 0.162.1

package/custom-elements.json

@@ -9988,6 +9988,14 @@
               "readonly": true,
               "description": "New crumbs fold again, as a new `items` does."
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, this.handleSlotChange)",
+              "description": "Reads a crumb again once it upgrades, so the current one is marked."
+            },
             {
               "kind": "method",
               "name": "renderItems",
@@ -25299,6 +25307,14 @@
               "default": "new ChildrenController(this, () => this.handleSlotChange())",
               "description": "Watches for turns arriving, since a manual slot hears nothing about them.\n\n**A turn that arrives after first paint reaches nothing on its own.**\nSlots are assigned by hand here, so appending a child assigns it to\nnothing, fires no `slotchange`, and schedules no render: the transcript\nwent on showing \"Nothing to show\" over six children it already had, and\nthe one thing a conversation does is grow. Measured with\n`assignedElements()` at zero against `children` at nine. Children only,\nnever a turn's own text, which a streaming turn rewrites every frame."
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, () => this.handleSlotChange())",
+              "description": "Hears a message upgrade after it arrived. A message is known by its marker,\nwhich an element that has not upgraded lacks, so it was assigned nowhere."
+            },
             {
               "kind": "field",
               "name": "settling",
@@ -26947,6 +26963,14 @@
               "privacy": "private",
               "description": "Watches for boxes arriving inside a wrapper, which no slot reports."
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, undefined, { subtree: true })",
+              "description": "Reads a box again once it upgrades, so it takes the group's name and value."
+            },
             {
               "kind": "field",
               "name": "judged",
@@ -38568,6 +38592,14 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController( this, () => { this.listbox?.requestUpdate() this.requestUpdate() }, { subtree: true }, )",
+              "description": "Hears an option upgrade after it arrived. The options are this element's\nchildren, which the listbox reaches through a slot and does not watch, so\nboth read them again: the listbox to select the one `value` names, and this\nelement for the words in its field."
+            },
             {
               "kind": "field",
               "name": "panel",
@@ -91710,6 +91742,14 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, this.handleSlotChange)",
+              "description": "Reads an item again once it upgrades, so it takes the role the list gives its rows."
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -93208,6 +93248,13 @@
               "description": "Every option, in the order they appear.\n\nDescendants rather than children, because a group puts a level between the\nlist and its options and the keyboard has to move through a grouped list\nexactly as it moves through a flat one.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, undefined, { subtree: true })"
+            },
             {
               "kind": "method",
               "name": "among",
@@ -111540,13 +111587,27 @@
               },
               "description": "Puts the rows the group is showing into the slot, and the rest nowhere.\n\n**Assignment rather than hiding, which is what makes this work with no\nstylesheet.** A row that is not assigned to a slot renders nothing at all:\nit is out of the layout, out of the tab order and out of the accessibility\ntree, in both tiers, without a rule anywhere. `hidden` would do the first\nthree and `inert` only the last two, and either would put the collapse in a\nplace a headless consumer has to re-implement.\n\nCollapsed keeps the first row rather than none, because a group folded to\nnothing is a heading with a number after it and no reason to believe there\nis anything behind it. The one row is the evidence."
             },
+            {
+              "kind": "field",
+              "name": "recount",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Hears a row arrive after the render. The slot is assigned by hand, so a\nnew row is in no slot and sends no `slotchange` to say it came. The feed\nthe group is in is asked to update as well, since it counts the group's\nrows and does not watch inside the group."
+            },
             {
               "kind": "field",
               "name": "childWatch",
               "privacy": "protected",
               "readonly": true,
-              "default": "new ChildrenController(this, () => { this.requestUpdate() ;(this.parentElement as Partial<Pick<HelixElement, 'requestUpdate'>> | null)?.requestUpdate?.() })",
-              "description": "Hears a row arrive after the render. The slot is assigned by hand, so a\nnew row is in no slot and sends no `slotchange` to say it came. The feed\nthe group is in is asked to update as well, since it counts the group's\nrows and does not watch inside the group."
+              "default": "new ChildrenController(this, this.recount)"
+            },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, this.recount)",
+              "description": "Hears a row upgrade after it arrived, which neither the slot nor `childWatch` reports."
             },
             {
               "kind": "field",
@@ -113424,6 +113485,14 @@
               "default": "new ChildrenController(this, this.handleSlotChange)",
               "description": "Hears a row arrive after the render. The list slot is assigned by hand, so\na new row is in no slot and sends no `slotchange`: without this it was\ndrawn nowhere and an emptied feed kept saying it was empty. A row added to\na group is the group's to hear, and the group asks the feed to count again."
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, this.handleSlotChange)",
+              "description": "Hears a row upgrade after it arrived. A row is known by its marker, which\nan element that has not upgraded lacks, so the row was assigned nowhere."
+            },
             {
               "kind": "field",
               "name": "handleRead",
@@ -113616,7 +113685,7 @@
                   "text": "void"
                 }
               },
-              "description": "Says whether anything in the feed has media, so every item can hold the\ncolumn open whether or not it has one of its own.\n\n**A fact no item can answer for itself**, which is why it is here. An item\nknows about its own media slot and nothing about its neighbors, so a feed\nwhere some rows have an avatar and some do not draws two different left\nedges for its text: measured on a four item feed, the rows without media\nstarted their text 32 pixels to the left of the rows with it. The styled\ntier turns this into a width; this tier ships no stylesheet and is\nunaffected.\n\n**What is asked of each row is its light DOM, not the row.** A notification\npublishes no property for this, and asking one would make the answer depend\non the row having drawn itself; a `[slot=\"media\"]` child is there from the\nmoment the markup is parsed. The rows themselves come from `items`, which\ndoes need them upgraded, and that is the honest limit rather than a claim\nthis had made the other way: a row that upgrades late is counted on the next\nupdate, which its own `slotchange` asks for."
+              "description": "Says whether anything in the feed has media, so every item can hold the\ncolumn open whether or not it has one of its own.\n\n**A fact no item can answer for itself**, which is why it is here. An item\nknows about its own media slot and nothing about its neighbors, so a feed\nwhere some rows have an avatar and some do not draws two different left\nedges for its text: measured on a four item feed, the rows without media\nstarted their text 32 pixels to the left of the rows with it. The styled\ntier turns this into a width; this tier ships no stylesheet and is\nunaffected.\n\n**What is asked of each row is its light DOM, not the row.** A notification\npublishes no property for this, and asking one would make the answer depend\non the row having drawn itself; a `[slot=\"media\"]` child is there from the\nmoment the markup is parsed. The rows themselves come from `items`, which\ndoes need them upgraded, and that is the honest limit rather than a claim\nthis had made the other way: a row that upgrades late is counted on the next\nupdate, which `UpgradeController` asks for when its definition arrives."
             },
             {
               "kind": "method",
@@ -130370,6 +130439,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, undefined, { subtree: true })"
+            },
             {
               "kind": "field",
               "name": "handleSelection",
@@ -138065,6 +138141,14 @@
               "description": "The list inside the surface, or nothing where there is no DOM to hold one.\n\nThe optional chain is the server. `renderRoot` is a property Lit's element\nshim does not carry, and this getter is reached from `display`, which is\nread during `render`: without it the select throws on every server render\nand cannot be served at all.\n\nThe other reads of `renderRoot` here are inside callbacks the controllers\ninvoke, and a controller only runs on a connected element, so they cannot\nbe reached from the server and are left plain.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController( this, () => { this.listbox?.requestUpdate() this.requestUpdate() }, { subtree: true }, )",
+              "description": "Hears an option upgrade after it arrived. The options are this element's\nchildren, which the listbox reaches through a slot and does not watch, so\nboth read them again: the listbox to select the one `value` names, and this\nelement for the words on its trigger."
+            },
             {
               "kind": "field",
               "name": "panel",
@@ -160781,6 +160865,14 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, this.handleSlotchange)",
+              "description": "Reads a tag again once it upgrades, so it takes its role and its place."
+            },
             {
               "kind": "field",
               "name": "handleFocusin",
@@ -174583,6 +174675,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, () => this.handleItems(), { subtree: true, })"
+            },
             {
               "kind": "field",
               "name": "handleSelection",
@@ -182498,6 +182597,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "upgradeWatch",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new UpgradeController(this, () => this.syncItems(), { subtree: true, })"
+            },
             {
               "kind": "field",
               "name": "focused",
@@ -192314,6 +192420,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.161.0"
+    "version": "0.162.1"
   }
 }

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /** One step of a trail written as data, for `items`. */
 export interface BreadcrumbItem {
@@ -120,6 +120,8 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     private readonly markLast;
     /** New crumbs fold again, as a new `items` does. */
     private readonly handleSlotChange;
+    /** Reads a crumb again once it upgrades, so the current one is marked. */
+    protected readonly upgradeWatch: UpgradeController;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-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, formatWords, HelixElement, hostAria, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -55,6 +55,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             this.expanded = false;
             this.markLast();
         };
+        this.upgradeWatch = new UpgradeController(this, this.handleSlotChange);
     }
     static { this.words = 'helix-breadcrumbs'; }
     get slotted() {

package/dist/chat/root/chat-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 { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessChatMessage } from '../message/chat-message.js';
 /** One turn handed over as data, which is what `turns` holds. */
@@ -308,6 +308,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * never a turn's own text, which a streaming turn rewrites every frame.
      */
     protected readonly childWatch: ChildrenController;
+    /**
+     * Hears a message upgrade after it arrived. A message is known by its marker,
+     * which an element that has not upgraded lacks, so it was assigned nowhere.
+     */
+    protected readonly upgradeWatch: UpgradeController;
     /** Watches the turns' own `state`, which is when one of them settles. */
     private settling;
     /** Watches the turns and the log for size, which scrolling does not report. */

package/dist/chat/root/chat-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessChat_1;
-import { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { arrowDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -63,6 +63,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.said = 0;
         this.words = TURN_WORDS;
         this.childWatch = new ChildrenController(this, () => this.handleSlotChange());
+        this.upgradeWatch = new UpgradeController(this, () => this.handleSlotChange());
         this.settling = undefined;
         this.grower = undefined;
         this.watched = [];

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -1,4 +1,4 @@
-import { DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
+import { DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
 import '../../checkbox/index.js';
@@ -132,6 +132,8 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
     private pending;
     /** Watches for boxes arriving inside a wrapper, which no slot reports. */
     private observer;
+    /** Reads a box again once it upgrades, so it takes the group's name and value. */
+    protected readonly upgradeWatch: UpgradeController;
     /** The value the required check last judged. */
     private judged;
     /** The boxes `member` is added to. */

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCheckboxGroup_1;
-import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, words, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, UpgradeController, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -21,6 +21,7 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         this.declared = [];
         this.checking = undefined;
         this.pending = false;
+        this.upgradeWatch = new UpgradeController(this, undefined, { subtree: true });
         this.watched = new Set();
         this.member = {
             hostUpdated: () => {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../tag/index.js';
@@ -376,6 +376,13 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     get type(): string;
     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 in its field.
+     */
+    protected readonly upgradeWatch: UpgradeController;
     protected readonly panel: PopoverController;
     /** The values chosen, in the order they were chosen. */
     private get values();

package/dist/combobox/root/combobox-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, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -50,6 +50,10 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.emptied = false;
         this.opening = undefined;
         this.watcher = undefined;
+        this.upgradeWatch = new UpgradeController(this, () => {
+            this.listbox?.requestUpdate();
+            this.requestUpdate();
+        }, { subtree: true });
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('field'),
             boundary: () => [

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessListItem } from '../item/list-item.js';
 import { type ListSelectionBehavior, type ListSelectionMode } from '../selection.js';
@@ -405,6 +405,8 @@ export declare class HelixHeadlessList extends HelixElement {
     private askForMore;
     private readonly handleEmptyChange;
     private readonly handleSlotChange;
+    /** Reads an item again once it upgrades, so it takes the role the list gives its rows. */
+    protected readonly upgradeWatch: UpgradeController;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/list/root/list-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 { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -138,6 +138,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             this.rowsChanged = true;
             this.requestUpdate();
         };
+        this.upgradeWatch = new UpgradeController(this, this.handleSlotChange);
     }
     static { this.words = 'helix-list'; }
     blocked(row) {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -436,6 +436,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * exactly as it moves through a flat one.
      */
     get options(): HelixHeadlessOption[];
+    protected readonly upgradeWatch: UpgradeController;
     /**
      * The elements of one kind in the list: its options, its groups or its
      * rules. Walks the tree, and walks *through* a slot when it meets one.

package/dist/listbox/root/listbox-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, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -51,6 +51,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             items: () => this.options,
         });
         this.chosenAgain = undefined;
+        this.upgradeWatch = new UpgradeController(this, undefined, { subtree: true });
         this.handleSelection = (event) => {
             if (event.detail.href !== undefined) {
                 return;

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/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;