@fusion.dev/helix-headless 0.142.0 → 0.143.0

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

@@ -16,7 +16,18 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * **Rotation stops on focus and on hover, and stays stopped** until the user
  * starts it again, as the APG requires. The rotation control is labeled with
- * the action it performs and is first in the tab order.
+ * the action it performs and is first in the tab order. Rotation goes on from
+ * the last slide to the first, with or without `loop`, which is about the
+ * reader's own moves.
+ *
+ * A move the reader makes is announced, the slide's position read from a
+ * polite live region. While the carousel rotates the region is off, so a
+ * screen reader is not interrupted every few seconds.
+ *
+ * The indicators are one tab stop. The arrow keys along the track move between
+ * them, Up and Down on a vertical carousel, and Home and End go to the first
+ * and the last. Without `loop`, Previous on the first slide and Next on the
+ * last are marked `aria-disabled`.
  *
  * @since 0.1.0
  * @status stable
@@ -26,12 +37,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The slides.
  *
+ * @event {HelixActivateEvent} helix-activate - Fired after the slide in view changes, with the new index as a string in `detail.value`.
  * @event {HelixSelectEvent} helix-select - Fired before the slide in view changes, with the requested index. Cancelable: cancel it to keep the current slide. Nothing moves, and a drag returns to the slide the index still holds. See `handleScroll`.
  *
  * @csspart controls - The row of controls.
  * @csspart indicator - One indicator. Pressing it moves to its slide.
  * @csspart indicator-current - The indicator for the slide in view, alongside `indicator`.
  * @csspart indicators - The row of indicators that shows which slide is in view.
+ * @csspart live - The region that announces the slide a move lands on. Visually hidden in the styled tier.
  * @csspart next - The control that moves to the next slide.
  * @csspart next-mark - The glyph on the next control.
  * @csspart previous - The control that moves to the previous slide.
@@ -131,6 +144,8 @@ export declare class HelixHeadlessCarousel extends HelixElement {
     private indexState;
     /** How many panes were drawn at the last update, to scroll when the first are. */
     private scrolledFor;
+    /** What the live region says: the position of the slide the last move landed on. */
+    private said;
     /**
      * The carousel's name, read by screen readers.
      */
@@ -336,14 +351,24 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * **A fitted carousel's last position moves with the window**, which a
      * declared one's never does: eight slides at one across has eight places to
      * stand and four across has five, so a track widened while the reader sits on
-     * the last of them is a track resting somewhere it can no longer be. Through
-     * `goTo`, so the correction goes out as the same cancelable announcement
-     * every other index change does and a consumer holding `index` hears it
-     * rather than being overwritten.
+     * the last of them is a track resting somewhere it can no longer be. See
+     * `holdIndex` for why the correction is not a request.
      *
      * Only on a change, so the observer's own re-render cannot feed itself.
      */
     private readonly readFit;
+    /**
+     * Puts the index back on the last place the track can stand, where fewer
+     * places are left than it counted.
+     *
+     * **Written, with no request.** Nobody asked for this move: a slide was
+     * removed, the window widened, or `per-view` went up. It went out as a
+     * cancelable `helix-select`, which a consumer reading the event as a reader's
+     * request had no reason to expect, and refusing it left the index past the
+     * last slide, with no current indicator and no tab stop, and asked again on
+     * every update. An index that cannot be refused is not a request.
+     */
+    private holdIndex;
     /**
      * The count handed to the styles, and nothing at all where they work it out.
      *
@@ -413,6 +438,14 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * the right, the left arrow is the one that moves on.
      */
     private readonly handleIndicatorKeydown;
+    /**
+     * Puts a requested slide in view, and says so.
+     *
+     * `helix-activate` is the notification after `helix-select`, the one Tour
+     * and Tabs send once a different member is current. A clamp in `holdIndex`
+     * sends neither, being a correction rather than a move anybody asked for.
+     */
+    private applyIndex;
     /** Moves to a slide. It wraps past either end only when `loop` is set. */
     goTo(index: number): void;
     /**
@@ -663,6 +696,15 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * floor.
      */
     private runEnd;
+    /**
+     * Whether Previous or Next has nowhere to go, which is only at an end and
+     * without `loop`.
+     *
+     * Said with `aria-disabled` and not `disabled`, so a reader who pressed Next
+     * onto the last slide keeps focus on the control they are on. Not on the
+     * server, which knows no slides and so no ends.
+     */
+    private atEnd;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/carousel/root/carousel-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, fillTemplate, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixActivateEvent, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, play, stop } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -28,6 +28,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.interval = 5000;
         this.indexState = undefined;
         this.scrolledFor = 0;
+        this.said = '';
         this.label = 'Carousel';
         this.loop = false;
         this.nextLabel = 'Next slide';
@@ -43,17 +44,29 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                 return;
             }
             this.fitted = fitted;
-            if (this.index > this.positions - 1) {
-                this.goTo(this.positions - 1);
-            }
+            this.holdIndex();
         };
         this.handleIndicatorKeydown = (event) => {
-            const step = inlineStep(this, event.key);
-            if (step === 0) {
+            const vertical = this.orientation === 'vertical';
+            const step = vertical
+                ? event.key === 'ArrowDown'
+                    ? 1
+                    : event.key === 'ArrowUp'
+                        ? -1
+                        : 0
+                : inlineStep(this, event.key);
+            let to = this.index + step;
+            if (event.key === 'Home') {
+                to = 0;
+            }
+            else if (event.key === 'End') {
+                to = this.positions - 1;
+            }
+            else if (step === 0) {
                 return;
             }
             event.preventDefault();
-            this.goTo(this.index + step);
+            this.goTo(to);
             this.updateComplete.then(() => {
                 this.renderRoot.querySelector('[part~="indicator-current"]')?.focus();
             });
@@ -88,11 +101,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                 return;
             }
             const applied = requestChange({
-                apply: (value) => {
-                    const previous = this.index;
-                    this.indexState = value;
-                    this.requestUpdate('index', previous);
-                },
+                apply: (value) => this.applyIndex(value),
                 event: (value) => new HelixSelectEvent({ value: String(value) }),
                 host: this,
                 next: nearest,
@@ -149,6 +158,14 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         return Math.max(1, Math.round((room + gap) / (pane + gap)));
     }
+    holdIndex() {
+        const last = this.positions - 1;
+        if (this.slides.length > 0 && this.index > last) {
+            const previous = this.index;
+            this.indexState = Math.max(0, last);
+            this.requestUpdate('index', previous);
+        }
+    }
     handed() {
         return this.fits ? nothing : `--carousel-per-view: ${this.clamped}`;
     }
@@ -178,6 +195,12 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     get slides() {
         return this.knownChildren.filter((child) => child instanceof HTMLElement);
     }
+    applyIndex(value) {
+        const previous = this.index;
+        this.indexState = value;
+        this.requestUpdate('index', previous);
+        this.dispatchEvent(new HelixActivateEvent({ value: String(value) }));
+    }
     goTo(index) {
         if (this.slides.length === 0) {
             return;
@@ -188,11 +211,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             return;
         }
         requestChange({
-            apply: (value) => {
-                const previous = this.index;
-                this.indexState = value;
-                this.requestUpdate('index', previous);
-            },
+            apply: (value) => this.applyIndex(value),
             event: (value) => new HelixSelectEvent({ value: String(value) }),
             host: this,
             next,
@@ -246,7 +265,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         if (!this.rotating || this.slides.length < 2) {
             return;
         }
-        this.timer = setInterval(() => this.goTo(this.index + 1), this.interval);
+        this.timer = setInterval(() => this.goTo(this.index >= this.positions - 1 ? 0 : this.index + 1), this.interval);
     }
     nearest() {
         const track = this.partNamed('track');
@@ -294,6 +313,12 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         if (changed.has('index')) {
             this.showing = undefined;
+            if (this.hasUpdated) {
+                this.said = fillTemplate(this.slideLabel, {
+                    count: this.slides.length,
+                    index: this.index + 1,
+                });
+            }
         }
         if (changed.has('perView')) {
             this.fitted = undefined;
@@ -314,9 +339,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         this.scrolledFor = drawn;
         this.runTimer();
-        if (this.slides.length > 0 && this.index > this.positions - 1) {
-            this.goTo(this.positions - 1);
-        }
+        this.holdIndex();
         this.watchPane();
         this.assign();
     }
@@ -343,6 +366,12 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             ' - var(--carousel-gap) - 100%';
         return `--carousel-run-end: calc(round(${run}, 1px) - (${run}))`;
     }
+    atEnd(side) {
+        if (this.loop || this.slides.length < 2) {
+            return false;
+        }
+        return side === 'start' ? this.index <= 0 : this.index >= this.positions - 1;
+    }
     render() {
         const rotating = this.rotating;
         const last = this.slides.length - 1;
@@ -369,6 +398,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   part="previous"
                   type="button"
                   aria-label=${this.previousLabel}
+                  aria-disabled=${this.atEnd('start') ? 'true' : nothing}
                   @click=${() => this.goTo(this.index - 1)}
                 >
                   <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
@@ -379,6 +409,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   part="next"
                   type="button"
                   aria-label=${this.nextLabel}
+                  aria-disabled=${this.atEnd('end') ? 'true' : nothing}
                   @click=${() => this.goTo(this.index + 1)}
                 >
                   <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
@@ -409,6 +440,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             ></slot>
           </div>`)}
       </div>
+      ${''}<span part="live" aria-live=${rotating ? 'off' : 'polite'}>${this.said}</span>
       ${this.slides.length > 1 && this.across !== undefined
             ? html `<div part="indicators" role="group" aria-label=${fillTemplate(this.indicatorsLabel, { label: this.label })}>
               ${''}

package/dist/chat/composer/chat-composer.d.ts

@@ -25,6 +25,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content under the field at the leading edge, such as an attachment button or a model picker.
  *
  * @event {HelixSendEvent} helix-send - Fired when the user sends their turn, and cancelable.
+ * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble.
  *
  * @csspart composer - The whole composer.
  * @csspart end - The box around the `end` slot.
@@ -69,16 +70,14 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
     /**
      * The text the user has written.
      *
-     * Read it, or set it to seed a draft.
+     * It follows typing, so reading it gives the draft. Set it to seed a draft or
+     * to replace the one in the field, and set it to `''` to clear it.
      */
     value: string;
-    private draft;
     /**
      * @internal Read by the transcript to find the composer among its children.
      */
     readonly isChatComposer = true;
-    /** What is in the field, whoever last wrote it. */
-    private get text();
     /**
      * Sends what is written, and returns whether the send went through.
      *
@@ -129,14 +128,17 @@ export declare class HelixHeadlessChatComposer extends HelixElement {
      */
     protected render(): TemplateResult;
     /**
-     * Records the draft, and stops the textarea speaking in this element's name.
+     * Takes what was typed into `value`, and says so from this element.
      *
-     * **The stop is not incidental.** `input` is composed by specification, so
-     * the `<textarea>` in this shadow root sent its own past this host and on
-     * through whatever `<helix-headless-chat>` it is slotted into, and neither
-     * element declares an `input`: a consumer binding one on either received an
-     * undeclared event whose target was a control they cannot reach. What a
-     * composer offers is `helix-send`, once, when the reader is done.
+     * **The textarea's own `input` is stopped and this element sends one.**
+     * `input` is composed by specification, so the `<textarea>` in this shadow
+     * root sent its own past this host with a target a consumer cannot reach.
+     * The one sent here comes from the composer, whose `value` already holds
+     * the text, which is what a typing indicator or a saved draft reads.
+     *
+     * **The text is `value` and nothing beside it.** A private draft read before
+     * `value` sent a seed the reader had deleted, since an empty draft fell back
+     * to it, and left `value` reading empty while the field held a whole draft.
      */
     private readonly handleInput;
     private readonly handleSend;

package/dist/chat/composer/chat-composer.js

@@ -7,7 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixElement {
     constructor() {
@@ -19,11 +20,11 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
         this.sendLabel = 'Send';
         this.submitOn = 'enter';
         this.value = '';
-        this.draft = '';
         this.isChatComposer = true;
         this.handleInput = (event) => {
             event.stopPropagation();
-            this.draft = event.target.value;
+            this.value = event.target.value;
+            this.dispatchEvent(new Event('input'));
         };
         this.handleSend = () => {
             this.send();
@@ -39,18 +40,14 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
             this.send();
         };
     }
-    get text() {
-        return this.draft || this.value;
-    }
     send() {
-        const value = this.text.trim();
+        const value = this.value.trim();
         if (value === '' || this.disabled) {
             return false;
         }
         if (!this.dispatchEvent(new HelixSendEvent({ value }))) {
             return false;
         }
-        this.draft = '';
         this.value = '';
         return true;
     }
@@ -89,7 +86,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixEle
         return html `<div part="composer">
       <textarea
         part="field"
-        .value=${this.text}
+        .value=${live(this.value)}
         aria-label=${this.label}
         placeholder=${this.placeholder}
         rows=${this.rows}
@@ -126,9 +123,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "value", void 0);
-__decorate([
-    state()
-], HelixHeadlessChatComposer.prototype, "draft", void 0);
 HelixHeadlessChatComposer = __decorate([
     customElement('helix-headless-chat-composer')
 ], HelixHeadlessChatComposer);

package/dist/chat/message/chat-message.js

@@ -28,7 +28,14 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
                 apply: (next) => {
                     this.state = next;
                 },
-                event: () => new HelixSendEvent({ value: this.textContent?.trim() ?? '' }),
+                event: () => new HelixSendEvent({
+                    value: [...this.childNodes]
+                        .filter((node) => !(node.nodeType === 1 && node.hasAttribute('slot')))
+                        .map((node) => node.textContent ?? '')
+                        .join('')
+                        .replace(/\s+/g, ' ')
+                        .trim(),
+                }),
                 host: this,
                 next: 'sending',
             });

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

@@ -65,6 +65,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  *
  * @event {HelixBeforePinEvent} helix-before-pin - Fired when the user pins or unpins the transcript by scrolling. Cancelable.
  * @event {HelixHistoryEvent} helix-history - Fired when the user reaches the oldest turn while `history` is `more`. It reports the position and cannot be canceled.
+ * @event {HelixPinEvent} helix-pin - Fired after the transcript is pinned or unpinned, with `true` or `false` in `detail.value`.
  * @event {HelixSendEvent} helix-send - Fired when the user sends a turn from the composer or retries a failed one. It is fired inside and handled here, so you can listen for it on the conversation. Cancelable: canceling it sends nothing and leaves the decision to you.
  *
  * @csspart actions - The controls for the conversation, at the header's trailing edge.

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 { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -181,6 +181,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
                 const previous = this.pinned;
                 this.pinnedState = value;
                 this.requestUpdate('pinned', previous);
+                this.dispatchEvent(new HelixPinEvent({ value: String(value) }));
             },
             event: (value) => new HelixBeforePinEvent({ value: String(value) }),
             host: this,

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

@@ -28,6 +28,8 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/checkbox
  *
  * @slot - The label.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
  *
  * @event {Event} change - The box was checked or unchecked. Relayed from the native input.
  * @event {HelixBeforeToggleEvent} helix-before-toggle - The box is about to be checked or unchecked. Cancelable: cancel it to keep its state.
@@ -46,6 +48,7 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  *
  * @cssstate checked - While the box is checked.
  * @cssstate has-label - The label slot has content, so the label is drawn.
+ * @cssstate indeterminate - While the box shows the dash, neither checked nor unchecked.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
@@ -56,6 +59,10 @@ export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
      * Shows the box as neither checked nor unchecked.
      *
      * Presentation only. It never submits, and the first change resolves it.
+     *
+     * Not reflected, as no state is: the element resolves it itself, and a
+     * reflected one removed the attribute the consumer wrote. A stylesheet
+     * reads it as `:state(indeterminate)`.
      */
     indeterminate: boolean;
     /**

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

@@ -20,11 +20,14 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.handleChange = (event) => {
             const input = event.target;
             const next = input.checked;
-            if (this.requestChecked(next)) {
+            const taken = this.requestChecked(next);
+            if (taken) {
                 this.indeterminate = false;
             }
             input.checked = this.checked;
-            this.relayNativeEvent(event);
+            if (taken) {
+                this.relayNativeEvent(event);
+            }
         };
         this.handleLabelChange = () => {
             this.syncLabelPresence();
@@ -46,6 +49,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaRequired = this.required ? 'true' : null;
+        this.toggleState('indeterminate', this.indeterminate);
         if (this.indeterminate) {
             this.dashed = true;
         }
@@ -98,7 +102,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
     }
 };
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean })
 ], HelixHeadlessCheckbox.prototype, "indeterminate", void 0);
 __decorate([
     property()

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

@@ -16,8 +16,13 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
  * `name` that you write once, and one place to read and write the whole set.
  *
  * `value` is the checked values, separated by commas, in the order the
- * checkboxes are written. Setting it checks exactly those values and unchecks
- * the rest.
+ * checkboxes are written, read from the boxes themselves. Setting it checks
+ * exactly those values and unchecks the rest.
+ *
+ * A checkbox is a member wherever it sits inside the group, in a row or a grid
+ * cell of your own, unless another group inside this one holds it. A field of
+ * another kind inside the group, such as an "Other" text field, sends its own
+ * `input` and `change` past the group.
  *
  * **The group shows the message you set in `feedback`.** It is form-associated
  * only for validity and never calls `setFormValue`, so the browser does not
@@ -29,7 +34,8 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
  * @aliases Checkbox list, Multi-select
  * @documentation https://fusion.dev/helix/components/checkbox-group
  *
- * @slot - The checkboxes.
+ * @slot - The checkboxes, and anything laid out around them.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the checkboxes, for help that needs more than plain text.
  * @slot label - The group's label, for a label that needs more than plain text.
  *
@@ -47,37 +53,63 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
 export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGroup_base {
     /**
      * The checked values, comma separated.
+     *
+     * Read from the boxes once they are known, so a box a script ticks directly
+     * is in it at once. Written, it is pushed onto the boxes.
+     */
+    get value(): string;
+    set value(next: string);
+    /** The value last written, which the boxes are given at the next update. */
+    private declared;
+    /**
+     * Whether `declared` has yet to reach the boxes.
+     *
+     * **Pushed once and then left alone**, which is the fix for a box a script
+     * ticked being unticked by the next unrelated update: every update used to
+     * push the group's value onto every box, whatever the boxes said since.
+     */
+    private pending;
+    /** Watches for boxes arriving inside a wrapper, which no slot reports. */
+    private observer;
+    /** The value the required check last judged. */
+    private judged;
+    /** The boxes `member` is added to. */
+    private readonly watched;
+    /**
+     * Asks for an update when a box's own update moved the set.
+     *
+     * **A controller on each box, because a box changed by a script says
+     * nothing.** `box.checked = false` sends no event, as on a native checkbox,
+     * so the group heard of it only at its next unrelated update: a required
+     * group whose last box a script unchecked still passed `checkValidity()` and
+     * let its form submit. A box's update is the one thing every change to its
+     * state goes through, whatever made it.
      */
-    value: string;
+    private readonly member;
     protected readonly cascade: DisabledCascadeController;
-    /** The checkboxes in the group, in the order they are written. Browser only. */
+    /**
+     * The checkboxes in the group, in the order they are written. Browser only.
+     *
+     * Descendants rather than children, so a box inside a layout wrapper of the
+     * consumer's is a member: only direct children counted, and a box in a row
+     * with a description got no name and no place in the set. A box held by a
+     * group nested inside this one is that group's.
+     */
     get boxes(): HelixHeadlessCheckbox[];
+    /** Whether this is the nearest group around `box`. */
+    private holds;
     /**
-     * Pushes the group's name and value onto the boxes.
+     * Pushes the group's name onto the boxes, and its value where one is waiting.
      *
      * As properties rather than attributes. A `name` written onto a box is a
      * change to markup the consumer rendered, which a React consumer's hydration
      * reports and does not patch up. A box that names itself keeps its own.
-     */
-    private sync;
-    /** Whether `seed` has had its one chance. */
-    private seeded;
-    /**
-     * Reads the boxes' own state into `value`, once, before anything is pushed.
      *
-     * Seeding, and never a guard in `sync` refusing to write while `value` is
-     * empty. The guard would answer the same case, a group written with no `value`
-     * whose boxes declare their own `checked` being cleared on the first update,
-     * and it also makes `group.value = ''` do nothing at all: the obvious way to
-     * clear a group would silently not, and the last box could not be unticked
-     * through the group either.
-     *
-     * The markup decides the starting set, and from then on `value` is what the
-     * boxes follow, including when it is empty. The group's `value` is a derived
-     * read of the boxes rather than state it owns, so reading it out of them at
-     * the start is what it already means.
+     * **Nothing is pushed for a value nobody wrote**, so a group written with no
+     * `value` keeps what its boxes declare, and `group.value = ''` still clears
+     * every box, being a value somebody wrote.
      */
-    private seed;
+    private sync;
     /**
      * Reads a box's requested change into `value`, and says so once.
      *
@@ -114,16 +146,17 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
     private readonly handleMemberNative;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Stops listening to a box that left the group. */
+    private unwatch;
     protected willUpdate(changed: PropertyValues): void;
-    protected firstUpdated(changed: PropertyValues): void;
     /**
      * Goes back to the set the markup started with.
      *
-     * **Seeded again rather than cleared.** The form resets each box too, in the
-     * same task and after this, so by the next update the boxes are back to
-     * what they declared and the seed reads them. Without this the group kept
-     * the reader's set, reported valid over boxes the reset had emptied, and
-     * ticked them again the next time anything updated it.
+     * The form resets each box too, in the same task and after this, so a group
+     * whose markup wrote no `value` has nothing to do: its boxes return to what
+     * they declared, and its value is read from them. A `value` the markup wrote
+     * is pushed again at the next update, after the boxes have reset, and an
+     * update is asked for, since an unchanged value schedules none.
      */
     formResetCallback(): void;
     /**
@@ -141,8 +174,8 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      * `invalid`, which is what marks the field touched and puts the message on
      * screen.
      *
-     * Anchored on the list, because the browser needs somewhere to point the
-     * bubble.
+     * Anchored on the list, which takes no focus, so the base points the bubble
+     * at the first box instead.
      */
     private validate;
     protected updated(changed: PropertyValues): void;