@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary Triggers an action, submits a form, or navigates.
  *
@@ -21,6 +21,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * it. To submit, the button calls `requestSubmit()` on its form, which runs
  * validation, unlike `submit()`.
  *
+ * A `submit` listener reads `event.submitter` as `null`, because the platform
+ * accepts only a native submit button there. The button's `name` and `value`
+ * are in the form data, so read them from `new FormData(form)` to tell two
+ * submit buttons apart.
+ *
+ * As the first submit button in its form, it is the form's default button:
+ * Enter in a text field of the form presses it, as it presses a native one.
+ *
+ * Set `pending` while the action a press started is still running. The button
+ * keeps focus and refuses presses, and a reader on it hears `pending-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -31,10 +42,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content before the label, usually an icon.
  *
  * @csspart button - The inner control.
+ * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending, and the styled button clips it out of view.
  * @csspart text - The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
+ *
+ * @cssstate pending - The button is pending: `pending` is set.
  */
 export declare class HelixHeadlessButton extends HelixFormElement {
     protected readonly aria: AriaForwardController;
+    /**
+     * @internal Whether a host `aria-label` names the inner button. A subclass
+     * that writes the name itself, as `CopyButton` does while it confirms a
+     * copy, says no.
+     */
+    protected get forwardsLabel(): boolean;
     /**
      * What to send when the button is activated, and what to send it to.
      *
@@ -143,6 +163,24 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * "button" and nothing else.
      */
     label: string;
+    /**
+     * Whether the action the button started is still running.
+     *
+     * A pending button keeps focus and stays in the tab order, and refuses every
+     * press: a click, Enter and Space, and Enter in a field of its form. The
+     * click does not reach your listeners. The inner control carries
+     * `aria-busy` and `aria-disabled`, and when the button becomes pending while
+     * it has focus, a reader hears `pending-label`. The styled button draws a
+     * turning ring over its words.
+     *
+     * `disabled` takes the button out of reach. Use `pending` for the wait after
+     * a press, so focus stays where the reader left it.
+     */
+    pending: boolean;
+    /**
+     * What a reader hears when the button becomes pending while it has focus.
+     */
+    pendingLabel: string;
     /**
      * What kind of panel this button opens, where it opens one: `menu` for a
      * `Menu`.
@@ -153,6 +191,27 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * reported collapsed and expanded and no popup.
      */
     popup?: 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';
+    /**
+     * The status region, rendered from the first time the button is pending, so
+     * a button that never waits carries no live region.
+     */
+    private readonly status;
+    /**
+     * Says `pendingLabel` when the button becomes pending under focus, and
+     * clears it when the wait ends.
+     *
+     * **Only under focus**, as React Aria announces it: the reader who pressed
+     * the button is the one waiting, and a button elsewhere on the page that
+     * starts waiting is not news to them. The region arrives empty and takes its
+     * words a frame later, since a region that arrives with its words is read
+     * inconsistently.
+     */
+    private sayPending;
+    /**
+     * @internal The live region a pending button speaks in, for a subclass that
+     * replaces the template, as `CopyButton` does.
+     */
+    protected renderLive(): TemplateResult | typeof nothing;
     /** Moves focus to the inner control, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     private readonly handleClick;
@@ -235,7 +294,31 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * fixes and would only appear on the browsers that work.
      */
     private sendCommand;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** @internal A submit button is what its form's implicit submission presses. */
+    protected get submitsForm(): boolean;
+    /** @internal Pressed as the form's default button, through the inner control. */
+    protected activate(): void;
+    /** The form whose Enter key this button listens to, as its default button. */
+    private watched;
+    /**
+     * Presses this button for Enter in a native text field of its form, when it
+     * is the form's default button.
+     *
+     * The platform cannot find a default button in a shadow root, so a form whose
+     * only submit button is this one found none: with two fields Enter did
+     * nothing, and with one it submitted without this button's name, value or
+     * overrides. The event's default is prevented so a later native submit button
+     * is not pressed instead.
+     */
+    private readonly pressOnEnter;
+    /** Listens to the form this button now belongs to, and to no other. */
+    private watchForm;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Called by the browser when the button's form changes. */
+    formAssociatedCallback(form: HTMLFormElement | null): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/button/root/button-root.js

@@ -4,14 +4,16 @@ 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, customElement, elementById, HelixFallbackCommandEvent, HelixFormElement, supportsInvokers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, StatusController, supportsInvokers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
+            label: () => this.forwardsLabel,
             target: () => this.partNamed('button'),
+            unnamed: 'Give it words, a `label`, or an `aria-label`.',
         });
         this.command = '';
         this.commandFor = '';
@@ -22,7 +24,15 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.formNoValidate = false;
         this.formTarget = '';
         this.label = '';
-        this.handleClick = () => {
+        this.pending = false;
+        this.pendingLabel = 'Loading';
+        this.status = new StatusController(this);
+        this.handleClick = (event) => {
+            if (this.pending) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
             this.linkCommand();
             this.sendCommand();
             if (this.type === 'button') {
@@ -41,6 +51,34 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         };
         this.type = 'button';
         this.value = '';
+        this.watched = null;
+        this.pressOnEnter = (event) => {
+            const form = this.watched;
+            if (event.key !== 'Enter' ||
+                event.defaultPrevented ||
+                !form ||
+                !HelixFormElement.submitsOnEnter(event.composedPath()[0], form) ||
+                HelixFormElement.defaultButton(form) !== this) {
+                return;
+            }
+            event.preventDefault();
+            if (!this.isDisabled && !this.pending) {
+                this.activate();
+            }
+        };
+    }
+    get forwardsLabel() {
+        return true;
+    }
+    sayPending() {
+        const focused = this.renderRoot?.activeElement != null;
+        if (!focused && this.status.said === '') {
+            return;
+        }
+        this.status.say(this.pending && focused ? this.pendingLabel : '', { clear: false });
+    }
+    renderLive() {
+        return drawStatus(this.status);
     }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -112,9 +150,41 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         }
         this.commandTarget()?.dispatchEvent(new HelixFallbackCommandEvent(this.command, this));
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('pending', this.pending);
+    }
     updated(changed) {
         super.updated(changed);
         this.linkCommand();
+        if (changed.has('pending') && changed.get('pending') !== undefined) {
+            this.sayPending();
+        }
+    }
+    get submitsForm() {
+        return this.type === 'submit';
+    }
+    activate() {
+        this.partNamed('button')?.click();
+    }
+    watchForm(form) {
+        if (form === this.watched) {
+            return;
+        }
+        this.watched?.removeEventListener('keypress', this.pressOnEnter);
+        form?.addEventListener('keypress', this.pressOnEnter);
+        this.watched = form;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.watchForm(this.form);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watchForm(null);
+    }
+    formAssociatedCallback(form) {
+        this.watchForm(form);
     }
     render() {
         const label = html `<slot name="start"></slot><slot part="text"></slot><slot name="end"></slot>`;
@@ -124,6 +194,8 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       type="button"
       aria-expanded=${this.expanded === undefined ? nothing : String(this.expanded)}
       aria-haspopup=${this.popup ?? nothing}
+      aria-busy=${this.pending ? 'true' : nothing}
+      aria-disabled=${this.pending ? 'true' : nothing}
       aria-label=${this.label || nothing}
       command=${this.command || nothing}
       tabindex=${stop}
@@ -131,7 +203,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       @click=${this.handleClick}
     >
       ${label}
-    </button>`;
+    </button>${this.renderLive()}`;
     }
 };
 __decorate([
@@ -164,6 +236,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessButton.prototype, "pending", void 0);
+__decorate([
+    property({ attribute: 'pending-label' })
+], HelixHeadlessButton.prototype, "pendingLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessButton.prototype, "popup", void 0);

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

@@ -1,15 +1,22 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A passage set apart as a note, information, a warning, or an error.
  *
  * @description
  * `tone` is on the headless tier because it carries meaning. It picks the icon
- * and the icon's accessible name, so a screen reader announces "Error" for an
- * error callout whether or not the color is seen.
+ * and the icon region's accessible name, so a screen reader announces "Error"
+ * for an error callout whether or not the color is seen. Set `tone-label` to
+ * say the name in another language.
  *
  * The icon is the fallback content of a slot. Slot your own icon to replace it,
- * and the default disappears with no extra check.
+ * and the default disappears with no extra check. The tone's name stays on the
+ * region around it.
+ *
+ * Set `dismissible` for a note a reader may put away, as Shoelace's `closable`
+ * alert does. The button fires `helix-dismiss` and the callout stays until a
+ * listener removes it, so the page decides whether it comes back.
  *
  * A callout sets a passage apart inside a document and is read where it sits.
  * For page-level chrome above the masthead that is a live region and can be
@@ -22,14 +29,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/callout
  *
  * @slot - The callout's content.
+ * @slot dismiss-icon - Replaces the cross inside the dismiss button.
  * @slot heading - A heading above the content.
  * @slot icon - Replaces the icon chosen by `tone`.
  *
+ * @event {HelixDismissEvent} helix-dismiss - The dismiss button was pressed. The callout does not remove itself, so remove it in response. Cancelable.
+ *
  * @csspart content - The content region.
- * @csspart icon - The icon region.
+ * @csspart dismiss - The button that dismisses the callout, shown when `dismissible` is set.
+ * @csspart dismiss-mark - The cross on the dismiss button, shown when the `dismiss-icon` slot is empty.
+ * @csspart icon - The icon region, an image named for the tone.
  * @csspart icon-mark - The icon for the tone, shown when no icon is slotted.
  */
-export declare class HelixHeadlessCallout extends HelixElement {
+export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
     protected willUpdate(changed: PropertyValues): void;
     /**
      * What kind of attention the passage needs.
@@ -40,6 +52,13 @@ export declare class HelixHeadlessCallout extends HelixElement {
      * is the whole of the registry, which is why there is no `severity` beside it.
      */
     tone?: 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+    /**
+     * What a screen reader is told the tone is, such as "Fehler".
+     *
+     * Absent is the English for the tone: "Error", "Information", "Note",
+     * "Success" or "Warning".
+     */
+    toneLabel: string;
     /**
      * The mark for the callout's tone, behind a seam.
      *
@@ -56,7 +75,13 @@ export declare class HelixHeadlessCallout extends HelixElement {
     protected renderIcon(icon: {
         content: string;
         viewBox: string;
-    }, label: string): TemplateResult;
+    }, _label: string): TemplateResult;
+    /**
+     * The cross inside the dismiss button, behind a seam, for the reason
+     * `renderIcon` gives: the slot answers the page and the method the tier
+     * above.
+     */
+    protected renderDismissIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {
@@ -64,3 +89,4 @@ declare global {
         'helix-headless-callout': HelixHeadlessCallout;
     }
 }
+export {};

package/dist/callout/root/callout-root.js

@@ -4,35 +4,54 @@ 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, HelixElement, hostAria, TONE_MARKS, toneMark } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const NOTE = { icon: TONE_MARKS.info.icon, label: 'Note' };
-let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
+let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.toneLabel = '';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'note' });
     }
-    renderIcon(icon, label) {
+    renderIcon(icon, _label) {
         return html `<slot name="icon">
-      <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} role="img" aria-label=${label}>
+      <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>
     </slot>`;
     }
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      ${drawDismissGlyph()}
+    </slot>`;
+    }
     render() {
         const { icon, label } = this.tone === 'neutral' ? NOTE : (toneMark(this.tone) ?? TONE_MARKS.info);
-        return html `<span part="icon">${this.renderIcon(icon, label)}</span>
+        const named = this.toneLabel || label;
+        return html `<span part="icon" role="img" aria-label=${named}>${this.renderIcon(icon, named)}</span>
       <div part="content">
         <slot name="heading"></slot>
         <slot></slot>
-      </div>`;
+      </div>${this.dismissible
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.dismiss(),
+            })
+            : nothing}`;
     }
 };
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCallout.prototype, "tone", void 0);
+__decorate([
+    property({ attribute: 'tone-label' })
+], HelixHeadlessCallout.prototype, "toneLabel", void 0);
 HelixHeadlessCallout = __decorate([
     customElement('helix-headless-callout')
 ], HelixHeadlessCallout);

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

@@ -72,6 +72,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @aliases Board, JSON Canvas, Whiteboard
  * @documentation https://fusion.dev/helix/components/canvas
  *
+ * @slot - The board's `helix-canvas-node` and `helix-canvas-edge` elements, drawn on the plane.
  * @slot empty - Content shown when the document has no nodes.
  * @slot footer - Content below the board.
  * @slot header - Content above the board.

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

@@ -1738,7 +1738,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return html `<svg
       part="edges"
       role="none"
-      @focusin=${this.handleFocusIn}
       viewBox=${`0 0 ${box.width} ${box.height}`}
       width=${box.width}
       height=${box.height}
@@ -1889,9 +1888,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
              ruling's own offset is where the document's zero lands, so a line
              falls on every multiple of its spacing in the document's units and
              a card placed on one sits on a line. -->
+        <!-- **Focus is heard here as well as on the host.** Moving from one
+             connection to the next moves focus inside this shadow root, and a
+             browser does not tell the host about a move that starts and ends
+             in its own tree. So the stop stayed on the first of two
+             connections in a row. Heard on the board and never on the edges'
+             SVG element: Chromium makes an SVG element with a focus listener
+             a Tab stop of its own, an unnamed one between the board and the
+             first card. Heard twice from a card, which the handler answers
+             the same way both times. -->
         <div
           part="board"
           style=${`--_canvas-plane-inline-size: ${box.width}px; --_canvas-plane-block-size: ${box.height}px`}
+          @focusin=${this.handleFocusIn}
         >
           ${this.renderEdges(origin, box)} ${this.renderLabels(origin)}
           <slot @slotchange=${this.handleSlotChange}></slot>

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

@@ -14,7 +14,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * Name the card with `aria-label` or `aria-labelledby`. These are the only
  * names that work with server rendering, because reading a title from the light
- * DOM needs a DOM, and the server has none.
+ * DOM needs a DOM, and the server has none. **A named card is a group**, so a
+ * reader entering it hears its name; an unnamed one has no role, since a group
+ * with no name only adds "group" to what a reader says.
+ *
+ * `header-actions` and `footer-actions` hold controls at the end of the
+ * header's and the footer's line, as Web Awesome's card does. While one holds
+ * something, its line is a `header-row` or `footer-row` part; otherwise there
+ * is no wrapper and every region is a bare slot. A server cannot see slotted
+ * content, so served actions sit on their own line until the script runs.
  *
  * @since 0.1.0
  * @status stable
@@ -24,8 +32,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The card's main content.
  * @slot footer - Actions that conclude the card.
+ * @slot footer-actions - Controls at the end of the footer's line, with the footer at its start.
  * @slot header - Title and any actions for the whole card.
+ * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
+ *
+ * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
  */
 export declare class HelixHeadlessCard extends HelixElement {
     /**
@@ -42,7 +55,23 @@ export declare class HelixHeadlessCard extends HelixElement {
      * with no attribute on it and the stylesheet only describes the departure.
      */
     mediaPlacement?: 'end';
+    /**
+     * @internal The host's `aria-labelledby`, observed so the card becomes a
+     * group once it is named. Not reflected: the attribute is the consumer's.
+     */
+    protected labelledBy: string | null;
+    /**
+     * @internal The host's `aria-label`, observed for the same reason as
+     * `labelledBy`. Not reflected: the attribute is the consumer's.
+     */
+    protected namedBy: string | null;
+    /** Whether `footer-actions` holds something, read from the slot. */
+    private footerActions;
+    /** Whether `header-actions` holds something, read from the slot. */
+    private headerActions;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private readonly readActions;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/card/root/card-root.js

@@ -4,26 +4,59 @@ 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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.labelledBy = null;
+        this.namedBy = null;
+        this.footerActions = false;
+        this.headerActions = false;
+        this.readActions = () => {
+            const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
+            this.headerActions = filled('header-actions');
+            this.footerActions = filled('footer-actions');
+        };
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'group' });
+        const named = Boolean(this.namedBy?.trim() || this.labelledBy?.trim());
+        hostAria(this.internals, { role: named ? 'group' : '' });
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.readActions();
     }
     render() {
+        const header = html `<slot name="header"></slot
+      ><slot name="header-actions" @slotchange=${this.readActions}></slot>`;
+        const footer = html `<slot name="footer"></slot
+      ><slot name="footer-actions" @slotchange=${this.readActions}></slot>`;
         return html `
       <slot name="media"></slot>
-      <slot name="header"></slot>
+      ${this.headerActions ? html `<div part="header-row">${header}</div>` : header}
       <slot></slot>
-      <slot name="footer"></slot>
+      ${this.footerActions ? html `<div part="footer-row">${footer}</div>` : footer}
     `;
     }
 };
 __decorate([
     property({ attribute: 'media-placement', reflect: true })
 ], HelixHeadlessCard.prototype, "mediaPlacement", void 0);
+__decorate([
+    property({ attribute: 'aria-labelledby' })
+], HelixHeadlessCard.prototype, "labelledBy", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], HelixHeadlessCard.prototype, "namedBy", void 0);
+__decorate([
+    state()
+], HelixHeadlessCard.prototype, "footerActions", void 0);
+__decorate([
+    state()
+], HelixHeadlessCard.prototype, "headerActions", void 0);
 HelixHeadlessCard = __decorate([
     customElement('helix-headless-card')
 ], HelixHeadlessCard);

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 {