@fusion.dev/helix-headless 0.171.0 → 0.173.0

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

@@ -57,6 +57,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * a named `group`, and the toolbar's own arrow keys walk its buttons, so a
  * reader meets one toolbar. Under `single` it is a `radiogroup` either way.
  *
+ * **Disabled.** `disabled` on the group disables every button in it, Helix
+ * and native alike, and says so on the group with `aria-disabled`, as React
+ * Aria's `isDisabled` does. A button disabled on its own stays disabled when
+ * the group is enabled again, and a button that leaves the group gets back
+ * what it said for itself.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -73,6 +79,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate pressed - While a group with `selection-mode` has a button pressed.
  */
 export declare class HelixHeadlessButtonGroup extends HelixElement {
+    /**
+     * Disables every button in the group, and says so on the group with
+     * `aria-disabled`. Reflected, so a stylesheet can select on it.
+     */
+    disabled: boolean;
     /**
      * Keeps at least one button pressed once one is, as React Aria's
      * `disallowEmptySelection`: a press that would leave none pressed is
@@ -122,6 +133,12 @@ export declare class HelixHeadlessButtonGroup extends HelixElement {
      * not reflect, as a native control's `value` does not.
      */
     value: string;
+    /**
+     * The pressed values as a list, in a selection mode, and an empty list
+     * otherwise. Written, it presses exactly those buttons.
+     */
+    get values(): string[];
+    set values(next: string[]);
     /**
      * The Helix buttons of a group in a selection mode, in the order they are
      * written, and none otherwise. Empty on a server, which has no tree.
@@ -146,6 +163,19 @@ export declare class HelixHeadlessButtonGroup extends HelixElement {
      */
     private readonly told;
     private watcher;
+    /** The children that can be disabled: Helix buttons and native ones alike. Empty on a server. */
+    private get members();
+    /** The members this group has disabled, so one that leaves is given back its own answer. */
+    private readonly held;
+    /**
+     * Passes `disabled` down to the members, and gives a member that left
+     * what it said for itself.
+     *
+     * A member already disabled is not written to again: the watcher hears
+     * every write to a native button's `disabled`, changed or not, and would
+     * answer it with this.
+     */
+    private cascade;
     /**
      * Tells every button whether it is pressed and whether it holds the stop,
      * and puts back the ones that left.

package/dist/button-group/root/button-group-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, HelixElement, hostAria, inlineStep, pressedValue, reportRuntime, requestValue, rovingStop, toolbarAround, whenHydrated, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, HelixElement, hostAria, inheritDisabled, inlineStep, pressedValue, reportRuntime, requestValue, rovingStop, toolbarAround, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { arrowTarget } from '../arrows.js';
@@ -12,11 +12,13 @@ const isGroupButton = (child) => child instanceof HTMLElement && 'focusable' in
 let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixElement {
     constructor() {
         super(...arguments);
+        this.disabled = false;
         this.disallowEmptySelection = false;
         this.label = '';
         this.value = '';
         this.lastFocused = undefined;
         this.told = new Map();
+        this.held = new Set();
         this.warned = false;
         this.handlePress = (event) => {
             const mode = this.selectionMode;
@@ -48,6 +50,12 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
             }
         };
     }
+    get values() {
+        return this.selectionMode ? commaList(this.value) : [];
+    }
+    set values(next) {
+        this.value = next.join(',');
+    }
     get buttons() {
         return this.selectionMode && this.children ? [...this.children].filter(isGroupButton) : [];
     }
@@ -57,7 +65,33 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
     pressed(button) {
         return button.value !== '' && commaList(this.value).includes(button.value);
     }
+    get members() {
+        return this.children
+            ? [...this.children].filter((child) => child instanceof HTMLElement && 'disabled' in child)
+            : [];
+    }
+    cascade() {
+        const members = this.members;
+        for (const gone of this.held) {
+            if (!members.includes(gone)) {
+                inheritDisabled(false, [gone]);
+                this.held.delete(gone);
+            }
+        }
+        if (this.disabled) {
+            const live = members.filter((member) => !member.disabled);
+            inheritDisabled(true, live);
+            for (const member of live) {
+                this.held.add(member);
+            }
+        }
+        else if (this.held.size > 0) {
+            inheritDisabled(false, [...this.held]);
+            this.held.clear();
+        }
+    }
     sync() {
+        this.cascade();
         const buttons = this.buttons;
         const roving = this.roving;
         const stop = roving
@@ -86,11 +120,16 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
                 });
             }
         }
-        for (const child of this.selectionMode && this.children ? this.children : []) {
-            if (child.localName.includes('-') && !isGroupButton(child)) {
+        const reading = Boolean(this.selectionMode) || this.disabled;
+        for (const child of reading && this.children ? this.children : []) {
+            if (child.localName.includes('-') &&
+                !isGroupButton(child) &&
+                !customElements.get(child.localName)) {
                 void customElements.whenDefined(child.localName).then(() => this.sync());
             }
-            else if (child.localName === 'button' && !child.hasAttribute('aria-pressed')) {
+            else if (this.selectionMode &&
+                child.localName === 'button' &&
+                !child.hasAttribute('aria-pressed')) {
                 this.warn(child);
             }
         }
@@ -167,6 +206,7 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
             role: radios ? 'radiogroup' : toolbar ? 'toolbar' : 'group',
         });
         this.internals.ariaOrientation = toolbar ? (this.orientation ?? null) : null;
+        this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.toggleState('pressed', Boolean(this.selectionMode) && commaList(this.value).length > 0);
     }
     firstUpdated(changed) {
@@ -181,6 +221,9 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
         return html `<slot></slot>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessButtonGroup.prototype, "disabled", void 0);
 __decorate([
     property({ attribute: 'disallow-empty-selection', type: Boolean })
 ], HelixHeadlessButtonGroup.prototype, "disallowEmptySelection", void 0);
@@ -196,6 +239,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessButtonGroup.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessButtonGroup.prototype, "values", null);
 HelixHeadlessButtonGroup = __decorate([
     customElement('helix-headless-button-group')
 ], HelixHeadlessButtonGroup);

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

@@ -132,6 +132,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @slot footer - Content below the board.
  * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the board.
+ * @slot loading - Content shown while `loading` is set, such as a progress bar while the document arrives.
  * @slot pan-down-icon - Replaces the glyph inside the pan down button.
  * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
  * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
@@ -192,6 +193,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @cssstate fullscreen - While the board fills the screen.
  * @cssstate holding - An item picked up with a click follows the pointer until the next press puts it down.
  * @cssstate idle - The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
+ * @cssstate loading - While `loading` is set.
  * @cssstate pressing - While a press on the board, its cards or its connections is under way.
  * @cssstate sharing - The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a board with `gestures="activate"` waits to be pressed.
  * @cssstate using - A board with `gestures="activate"` has been pressed and has the gestures.
@@ -275,6 +277,11 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * `leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in.
      */
     linkedLabel: string;
+    /**
+     * Marks the board as busy while its document arrives: the board is
+     * `aria-busy`, and the `loading` slot is shown.
+     */
+    loading: boolean;
     /**
      * What screen readers hear after a key moves a card, with `{name}` for the
      * card and `{x}` and `{y}` for where it now is, in the document's units.

package/dist/canvas/root/canvas-root.js

@@ -57,6 +57,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.labelEditorLabel = 'Label for {name}';
         this.leadsToLabel = 'leads to {cards}';
         this.linkedLabel = '{leadsTo}; {comesFrom}';
+        this.loading = false;
         this.movedLabel = '{name} moved to {x}, {y}';
         this.pastedLabel = '{count, plural, one {# card pasted} other {# cards pasted}}';
         this.readOnly = false;
@@ -2133,6 +2134,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.toggleState('empty', this.nodes.length === 0);
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('loading', this.loading);
     }
     place(origin) {
         const all = this.nodes;
@@ -2411,6 +2413,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
       role="group"
       aria-label=${this.label || this.getAttribute?.('aria-label') || this.fallbackLabel}
       aria-roledescription=${(this.label || this.getAttribute?.('aria-label')) && this.roleLabel ? this.roleLabel : nothing}
+      aria-busy=${this.loading ? 'true' : nothing}
       aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -2461,6 +2464,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
           ${this.renderMarquee(origin)}
         </div>
         <slot name="empty"></slot>
+        ${this.loading ? html `<slot name="loading"></slot>` : nothing}
         ${this.renderGestures()}
       </div>
       ${this.renderControls()} ${this.renderMinimap()}
@@ -2525,6 +2529,9 @@ __decorate([
     words,
     property({ attribute: 'linked-label' })
 ], HelixHeadlessCanvas.prototype, "linkedLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCanvas.prototype, "loading", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-label' })

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

@@ -28,6 +28,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Sending an empty required composer counts as trying. Tabbing past an empty
  * composer marks nothing.
  *
+ * **`feedback` is a message of your own about the draft**, such as one your
+ * server sent back. While it is set, the composer is invalid at once, does
+ * not send or submit, shows the message under the field, and a screen reader
+ * hears it as it appears. Clear it to let the draft go.
+ *
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
  * each time it changes: when they start, and when they send or stop for
  * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
@@ -48,13 +53,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart composer - The whole composer.
  * @csspart end - The box around the `end` slot.
+ * @csspart feedback - The `feedback` message, under the field while it is set.
  * @csspart field - The text field.
  * @csspart mark - The icon inside the send button.
  * @csspart send - The send button.
  * @csspart start - The box around the `start` slot.
  * @csspart tools - The row under the field.
  *
- * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.
+ * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
  */
 export declare class HelixHeadlessChatComposer extends HelixFormElement {
     /**
@@ -62,6 +68,12 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      * `registerWords('de', { 'helix-chat-composer': { sendLabel: 'Senden' } })`.
      */
     static words: string;
+    /**
+     * A message about the draft, shown under the field. While set, the composer
+     * is invalid, does not send, and does not submit, as a field's `feedback`
+     * does, and the message is announced as it appears.
+     */
+    feedback: string;
     /**
      * The field's name, read by screen readers.
      */
@@ -123,6 +135,17 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     private writing;
     /** Whether the reader has tried to send or submit the draft, or edited it and left. */
     private touched;
+    /**
+     * Whether the reader has typed in the field since it last held a fresh
+     * draft: since it rendered, since a send cleared it, or since a reset.
+     *
+     * **A send clears the field, and the field still sends `change` as it is
+     * left**, because the platform compares the text with what it held when it
+     * was focused. Measured in Chromium before this: a required composer sent
+     * "hi", cleared, and on Tab showed itself invalid over an empty draft
+     * nobody had written.
+     */
+    private edited;
     /** Whether the composer shows that its draft is wrong. */
     private shownInvalid;
     /** The pause after which the user has stopped writing. */
@@ -147,10 +170,14 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      * back to. `value` does not reflect, so its attribute stays as written.
      */
     private get declared();
+    /** @internal `feedback` marks the composer invalid, as a field's does. */
+    protected get validityFeedback(): string;
     /** Puts back the draft the markup declared when the form is reset. */
     formResetCallback(): void;
     /** The reader has had a go at the draft, so whether it is wrong can be shown. */
     private readonly touch;
+    /** The field's `change`, which counts only after the reader typed in it. */
+    private readonly handleChange;
     /** Brings back the draft when the browser restores the form. */
     formStateRestoreCallback(state: string | File | FormData | null): void;
     /**

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

@@ -13,6 +13,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFormElement {
     constructor() {
         super(...arguments);
+        this.feedback = '';
         this.label = 'Message';
         this.placeholder = '';
         this.required = false;
@@ -24,15 +25,22 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         this.isChatComposer = true;
         this.writing = false;
         this.touched = false;
+        this.edited = false;
         this.shownInvalid = false;
         this.pause = new DelayController(this, { renders: false });
         this.touch = () => {
             this.touched = true;
             this.requestUpdate();
         };
+        this.handleChange = () => {
+            if (this.edited) {
+                this.touch();
+            }
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
+            this.edited = true;
             this.dispatchEvent(new Event('input'));
             this.markTyping(this.value !== '');
         };
@@ -87,16 +95,21 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         }
         this.value = '';
         this.touched = false;
+        this.edited = false;
         this.markTyping(false);
         return true;
     }
     get declared() {
         return this.getAttribute('value') ?? '';
     }
+    get validityFeedback() {
+        return this.feedback;
+    }
     formResetCallback() {
         super.formResetCallback();
         this.value = this.declared;
         this.touched = false;
+        this.edited = false;
         this.requestUpdate();
     }
     formStateRestoreCallback(state) {
@@ -117,7 +130,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         if (field?.validity) {
             this.internals.setValidity(field.validity, field.validationMessage, field);
         }
-        const invalid = this.touched && !this.internals.validity.valid;
+        const invalid = this.feedback !== '' || (this.touched && !this.internals.validity.valid);
         this.toggleState('invalid', invalid);
         this.internals.ariaInvalid = invalid ? 'true' : 'false';
         if (invalid !== this.shownInvalid) {
@@ -166,8 +179,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         minlength=${this.minLength ?? nothing}
         maxlength=${this.maxLength ?? nothing}
         aria-invalid=${this.shownInvalid ? 'true' : nothing}
+        aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
         ?disabled=${this.isDisabled}
-        @change=${this.touch}
+        @change=${this.handleChange}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
@@ -176,9 +190,14 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         <span part="end"><slot name="end"></slot></span>
         ${this.renderSend()}
       </div>
-    </div>`;
+    </div>${this.feedback === ''
+            ? nothing
+            : html `<p part="feedback" id="feedback" role="alert">${this.feedback}</p>`}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessChatComposer.prototype, "feedback", void 0);
 __decorate([
     words,
     property()

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

@@ -37,6 +37,13 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * `loading` while you fetch, then prepend the older turns. The turn the user
  * was reading stays in place on screen.
  *
+ * The transcript is a `log`, the role for content added in order where the
+ * newest matters most, and it answers the APG feed's keys. The `feed` role
+ * reads its articles as a list from the top, with no newest end to stay
+ * pinned to, so the log keeps the role a conversation has. While `loading` is
+ * set or older turns load, the log carries `aria-busy`, as the APG asks of a
+ * feed.
+ *
  * The log is `aria-live="off"`. A separate status region announces each new
  * turn once, when it has finished arriving. It skips the user's own turns
  * unless they failed to send, turns loaded as history, and the turns already
@@ -49,6 +56,12 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * conversations. `turns` draws a long
  * transcript one window at a time, so the log needs a block size of its own.
  *
+ * The log scrolls on this tier. It carries `data-scroller`, and `core` ships
+ * `[data-scroller] { overflow: auto }` into every shadow root, so pinning,
+ * history and the window work with no stylesheet. You still need to give the
+ * log a block size, such as `helix-headless-chat::part(log) { block-size:
+ * 20rem }`.
+ *
  * **A conversation is built from three elements.** The chat holds the
  * transcript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits
  * in the `composer` slot. When the user sends, `helix-send` reaches the chat:
@@ -65,7 +78,9 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * turn says its place, such as "3 of 40", windowed or not. The transcript is
  * a tab stop while it holds a turn, and the turn a reader moved to is one
  * too. Moving to an older turn unpins a transcript that scrolls and scrolls
- * the turn into view, and moving to the newest pins it again.
+ * the turn into view, and moving to the newest pins it again. When the turn
+ * holding focus is removed, focus moves to the turn that took its place, or to
+ * the one before it where it was the last.
  *
  * | Key | What it does |
  * |---|---|
@@ -120,7 +135,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart indicator - The three dots before the words that say who is typing, which the styled tier animates as a message's are. Hidden from screen readers.
  * @csspart live - The region where screen readers announce each turn once it has arrived.
  * @csspart loading - Shown while the history loads.
- * @csspart log - The transcript, which scrolls.
+ * @csspart log - The transcript, which scrolls. On this tier, it needs only a block size.
  * @csspart message - The message drawn for a turn from `turns`, forwarded whole.
  * @csspart message-actions - The controls on a turn from `turns`, beside its time.
  * @csspart message-avatar - The avatar box of a turn from `turns`.
@@ -518,6 +533,27 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      */
     private follow;
     protected updated(changed: PropertyValues): void;
+    /** The turn focus is in, by its place and its identity, once a reader is in one. */
+    private held;
+    /** Notes the turn focus went into, or that it went somewhere else. */
+    private readonly handleFocusIn;
+    /**
+     * Forgets the turn once focus moves to something outside the transcript.
+     * A move to nothing is kept, since removing the turn that held focus is
+     * one.
+     */
+    private readonly handleFocusOut;
+    /**
+     * Moves focus to a neighbor where removing the turn that held it dropped
+     * focus to the body: the turn that took its place, or the one before it
+     * where it was the last.
+     *
+     * **Focus went to the body**, and Page Down did nothing until the reader
+     * tabbed back into the transcript. List and Virtual List move focus to a
+     * neighbor the same way, as React Aria's GridList does. Focus anywhere but
+     * the body is where you put it, and is left there.
+     */
+    private followRemoved;
     /**
      * Hands each turn written as a child the words it is named with, once it
      * has hydrated, so its first render is the server's.

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, reportRuntime, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, deepActiveElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, reportRuntime, 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';
@@ -98,6 +98,21 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             this.resume();
         };
         this.warnedMixed = false;
+        this.handleFocusIn = (event) => {
+            const at = this.turnFrom(event.composedPath());
+            if (at === undefined || at < 0) {
+                this.held = undefined;
+                return;
+            }
+            const id = this.fed ? this.identity(this.turns[at]) : this.messages[at];
+            this.held = { at, id };
+        };
+        this.handleFocusOut = (event) => {
+            const to = event.relatedTarget;
+            if (to instanceof Node && !this.contains(to) && !this.renderRoot?.contains?.(to)) {
+                this.held = undefined;
+            }
+        };
         this.handleKeydown = (event) => {
             if (event.defaultPrevented || event.altKey || event.metaKey || event.shiftKey) {
                 return;
@@ -423,6 +438,8 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         this.settling = new MutationObserver(this.handleSettle);
         this.settling.observe(this, { attributeFilter: ['state'], subtree: true });
         this.opening = true;
@@ -436,6 +453,8 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.settling?.disconnect();
         this.settling = undefined;
         this.grower?.disconnect();
@@ -506,6 +525,23 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.remember();
         this.reachHistory();
         this.announce();
+        this.followRemoved();
+    }
+    followRemoved() {
+        const held = this.held;
+        if (held === undefined) {
+            return;
+        }
+        const ids = this.fed ? this.turns.map((turn) => this.identity(turn)) : this.messages;
+        if (ids.includes(held.id)) {
+            return;
+        }
+        this.held = undefined;
+        const active = deepActiveElement();
+        if (ids.length === 0 || (active !== null && active !== document.body)) {
+            return;
+        }
+        void this.focusTurn(Math.min(held.at, ids.length - 1));
     }
     tellTurns() {
         const messages = this.messages;
@@ -670,6 +706,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         part="log"
         role="log"
         aria-live="off"
+        data-scroller
         aria-label=${this.label || this.fallbackLabel}
         aria-busy=${busy ? 'true' : nothing}
         ?data-windowed=${fed}

package/dist/color-input/root/color-input-root.d.ts

@@ -31,7 +31,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  *
  * The trigger and ArrowDown open the panel with focus in the square. Tab moves
  * between the panel's controls without leaving it, and Escape closes it and
- * returns focus to the field.
+ * returns focus to the control that opened it: the trigger after a press, and
+ * the field after ArrowDown.
  *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
@@ -305,6 +306,19 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     protected sync(): void;
     protected updated(changed: PropertyValues): void;
+    /** Whether the trigger's press opened the panel that is open now. */
+    private pressedOpen;
+    /**
+     * The trigger's press, which notes that it opened the panel, so Escape hands
+     * focus back to the trigger.
+     */
+    private readonly handlePress;
+    /**
+     * Hands focus back to the control that opened the panel: the trigger after
+     * its press, which is the APG date picker dialog's rule, and the text after
+     * ArrowDown from it.
+     */
+    protected returnFocus(): void;
     /**
      * The picker the field opens, behind a seam the styled tier can move.
      *

package/dist/color-input/root/color-input-root.js

@@ -55,6 +55,12 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.handleSampleEnd = () => {
             this.requestOpen(true);
         };
+        this.pressedOpen = false;
+        this.handlePress = () => {
+            const opening = !this.open;
+            this.handleTriggerClick();
+            this.pressedOpen = opening && this.open;
+        };
     }
     static { this.words = 'helix-color-input'; }
     requestValue(next) {
@@ -117,6 +123,18 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         if (changed.has('value') && parseColor(this.value)) {
             this.settled = this.value;
         }
+        if (changed.has('open') && !this.open) {
+            this.pressedOpen = false;
+        }
+    }
+    returnFocus() {
+        const trigger = this.pressedOpen ? this.partNamed('trigger') : null;
+        this.pressedOpen = false;
+        if (trigger) {
+            trigger.focus();
+            return;
+        }
+        super.returnFocus();
     }
     renderPicker() {
         return html `<${this.tag('color-picker')}
@@ -204,7 +222,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
                 : 'swatch-value'
             : nothing}
           ?disabled=${this.isDisabled}
-          @click=${this.handleTriggerClick}
+          @click=${this.handlePress}
         >
           <span
             part="preview"

package/dist/color-picker/root/color-picker-root.d.ts

@@ -445,7 +445,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * field shows the color the reset put back.
      */
     formResetCallback(): void;
-    /** The line `said` holds, or nothing while it is empty. */
+    /**
+     * The line `said` holds, or nothing while it is empty. `role="alert"`, as
+     * every field's feedback line has, so the message is announced when it
+     * appears.
+     */
     protected renderPickerFeedback(): TemplateResult | typeof nothing;
     /** Whether a pointer is dragging the square's handle, said as `:state(dragging)`. */
     private dragging;

package/dist/color-picker/root/color-picker-root.js

@@ -309,7 +309,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     }
     renderPickerFeedback() {
         const said = this.said;
-        return said === '' ? nothing : html `<p part="feedback" id="feedback">${said}</p>`;
+        return said === '' ? nothing : html `<p part="feedback" id="feedback" role="alert">${said}</p>`;
     }
     settle() {
         if (this.unsettled) {