@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/carousel/root/carousel-root.js

@@ -9,6 +9,7 @@ import { caretLeft, caretRight, play, stop } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { stepStop, stopFor, stopsOf } from '../stops.js';
 const COUNT_OR_AUTO = {
     fromAttribute: (value) => {
         if (value === null) {
@@ -59,7 +60,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                         ? -1
                         : 0
                 : inlineStep(this, event.key);
-            let to = this.index + step;
+            let to;
             if (event.key === 'Home') {
                 to = 0;
             }
@@ -69,6 +70,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             else if (step === 0) {
                 return;
             }
+            else {
+                to = this.move(step);
+            }
             event.preventDefault();
             this.goTo(to);
             this.updateComplete.then(() => {
@@ -213,6 +217,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     get positions() {
         return Math.max(1, this.slides.length - (this.across ?? 1) + 1);
     }
+    get stops() {
+        return stopsOf(this.positions, this.slidesPerMove);
+    }
     measure() {
         const track = this.partNamed('track');
         const pane = this.panes[0]?.getBoundingClientRect().width;
@@ -281,6 +288,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.requestUpdate('index', previous);
         this.dispatchEvent(new HelixActivateEvent({ value: String(value) }));
     }
+    move(step) {
+        return stepStop(this.stops, this.index, step < 0 ? -1 : 1, this.loop);
+    }
     goTo(index) {
         if (this.slides.length === 0) {
             return;
@@ -357,7 +367,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         if (!this.rotating || this.slides.length < 2) {
             return;
         }
-        this.timer = setInterval(() => this.goTo(this.index >= this.positions - 1 ? 0 : this.index + 1), this.interval);
+        this.timer = setInterval(() => this.goTo(this.index >= this.positions - 1 ? 0 : this.move(1)), this.interval);
     }
     nearest() {
         const track = this.partNamed('track');
@@ -366,8 +376,11 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         const bleed = this.bleed(track);
         const at = this.orientation === 'vertical' ? track.scrollTop : track.scrollLeft;
-        return this.panes.slice(0, this.positions).reduce((best, slide, index) => {
-            const distance = Math.abs(this.edgeOf(slide, track, bleed) - at);
+        return this.stops.reduce((best, index) => {
+            const slide = this.panes[index];
+            const distance = slide
+                ? Math.abs(this.edgeOf(slide, track, bleed) - at)
+                : Number.POSITIVE_INFINITY;
             return distance < best.distance ? { distance, index } : best;
         }, { distance: Number.POSITIVE_INFINITY, index: this.index }).index;
     }
@@ -484,9 +497,21 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       </svg></slot
     >`;
     }
+    paneStyle(index, last, stops) {
+        const declared = [
+            index === last ? this.runEnd() : nothing,
+            (this.slidesPerMove ?? 1) > 1 && !stops.includes(index)
+                ? 'scroll-snap-align: none !important'
+                : nothing,
+        ].filter((one) => one !== nothing);
+        return declared.length > 0 ? declared.join('; ') : nothing;
+    }
     render() {
         const rotating = this.rotating;
         const last = this.slides.length - 1;
+        const stops = this.stops;
+        const place = stopFor(stops, this.index);
+        const showing = stopFor(stops, this.showing ?? this.index);
         return html `<div part="controls">
         ${this.autoplay
             ? html `<button
@@ -511,7 +536,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   type="button"
                   aria-label=${this.previousLabel}
                   aria-disabled=${this.atEnd('start') ? 'true' : nothing}
-                  @click=${() => this.goTo(this.index - 1)}
+                  @click=${() => this.goTo(this.move(-1))}
                 >
                   ${this.renderPreviousMark()}
                 </button>
@@ -520,7 +545,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                   type="button"
                   aria-label=${this.nextLabel}
                   aria-disabled=${this.atEnd('end') ? 'true' : nothing}
-                  @click=${() => this.goTo(this.index + 1)}
+                  @click=${() => this.goTo(this.move(1))}
                 >
                   ${this.renderNextMark()}
                 </button>`}
@@ -545,7 +570,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             role="group"
             aria-roledescription=${this.slideRoleLabel || nothing}
             aria-label=${fillTemplate(this.slideLabel, { count: this.slides.length, index: index + 1 })}
-            style=${index === last ? this.runEnd() : nothing}
+            style=${this.paneStyle(index, last, stops)}
           >
             <slot
               name=${this.assignsByName ? `slide-${index + 1}` : nothing}
@@ -557,17 +582,17 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       ${this.slides.length > 1 && this.across !== undefined
             ? html `<div part="indicators" role="group" aria-label=${fillTemplate(this.indicatorsLabel, { label: this.label })}>
               ${''}
-              ${Array.from({ length: this.positions }).map((_place, at) => {
-                const current = at === (this.showing ?? this.index);
+              ${stops.map((stop, at) => {
+                const current = at === showing;
                 return html `<button
                   part="indicator${current ? ' indicator-current' : ''}"
                   type="button"
                   aria-label=${fillTemplate(this.indicatorLabel, { index: at + 1 })}
-                  aria-current=${at === this.index ? 'true' : nothing}
-                  tabindex=${at === this.index ? '0' : '-1'}
+                  aria-current=${at === place ? 'true' : nothing}
+                  tabindex=${at === place ? '0' : '-1'}
                   ?data-current=${current}
                   @keydown=${this.handleIndicatorKeydown}
-                  @click=${() => this.goTo(at)}
+                  @click=${() => this.goTo(stop)}
                 ></button>`;
             })}
             </div>`
@@ -628,6 +653,9 @@ __decorate([
 __decorate([
     property({ attribute: 'slide-role-label' })
 ], HelixHeadlessCarousel.prototype, "slideRoleLabel", void 0);
+__decorate([
+    property({ attribute: 'slides-per-move', type: Number })
+], HelixHeadlessCarousel.prototype, "slidesPerMove", void 0);
 __decorate([
     property({ attribute: 'start-label' })
 ], HelixHeadlessCarousel.prototype, "startLabel", void 0);

package/dist/carousel/stops.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Where a carousel's track stops when it moves several slides at a time, as
+ * arithmetic over its positions.
+ *
+ * A position is a slide the track can start at: six slides four across have
+ * three, 0, 1 and 2. Moving `perMove` slides at a time stops at every
+ * `perMove`th of them from the first, and always at the last, so the end of
+ * the run is reachable whatever the count.
+ */
+/** The positions the track stops at, in order: every `perMove`th from 0, and the last. */
+export declare const stopsOf: (positions: number, perMove?: number) => number[];
+/** Which stop a position is at or past: the last stop at or before it, as an index into `stops`. */
+export declare const stopFor: (stops: readonly number[], position: number) => number;
+/**
+ * The position a move of one stop forward (`1`) or back (`-1`) lands on.
+ *
+ * From a position between two stops, back goes to the stop before it. Past
+ * either end it wraps where `loop` says so, and stays at the end otherwise.
+ */
+export declare const stepStop: (stops: readonly number[], position: number, step: -1 | 1, loop: boolean) => number;

package/dist/carousel/stops.js

@@ -0,0 +1,30 @@
+export const stopsOf = (positions, perMove = 1) => {
+    const step = Number.isFinite(perMove) ? Math.max(1, Math.floor(perMove)) : 1;
+    const last = Math.max(0, positions - 1);
+    const stops = [];
+    for (let at = 0; at < last; at += step) {
+        stops.push(at);
+    }
+    stops.push(last);
+    return stops;
+};
+export const stopFor = (stops, position) => {
+    let found = 0;
+    stops.forEach((stop, at) => {
+        if (stop <= position) {
+            found = at;
+        }
+    });
+    return found;
+};
+export const stepStop = (stops, position, step, loop) => {
+    const at = stopFor(stops, position);
+    let next = step < 0 && stops[at] !== position ? at : at + step;
+    if (loop) {
+        next = (next + stops.length) % stops.length;
+    }
+    else {
+        next = Math.min(Math.max(next, 0), stops.length - 1);
+    }
+    return stops[next] ?? 0;
+};

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

@@ -4,12 +4,11 @@ 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, HelixSendEvent, hostAria, markRegion, relativeTime, requestChange, TONE_MARKS, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, RelativeClockController, relativeTime, requestChange, TONE_MARKS, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { authorWords, TURN_WORDS, turnName } from '../naming.js';
-import { RelativeClockController } from '../relative-clock.js';
 export const FAILED_LABEL = 'Not sent';
 let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixElement {
     constructor() {
@@ -23,8 +22,10 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
         this.turnWords = TURN_WORDS;
         this.isChatMessage = true;
         this.clock = new RelativeClockController(this, {
-            locale: () => this.locale,
-            moment: () => this.moment,
+            expires: (now) => {
+                const moment = this.moment;
+                return moment ? relativeTime(this.locale)(moment, now).next : undefined;
+            },
         });
         this.handleFill = () => {
             this.markEmpty();

package/dist/chat/naming.d.ts

@@ -4,6 +4,8 @@ export interface TurnWords {
     me: string;
     /** The sentence for a turn with an author and a time, with `{author}` and `{time}`. */
     sentence: string;
+    /** The name of a turn with neither an author a reader can be told nor a time. */
+    turn: string;
 }
 /** The words a chat says its turns with, where nobody said otherwise. */
 export declare const TURN_WORDS: TurnWords;
@@ -17,6 +19,8 @@ export declare const TURN_WORDS: TurnWords;
 export declare const authorWords: (author: string | undefined, authorLabel: string, words: TurnWords) => string;
 /**
  * The turn's accessible name: the sentence where it has an author and a time,
- * and whichever of the two it has otherwise. Empty where it has neither.
+ * and whichever of the two it has otherwise. Where it has neither, a turn by
+ * `them` with no `author-label` and no time, the chat's word for a turn, so
+ * no turn is an `article` with no name.
  */
 export declare const turnName: (author: string, time: string, words: TurnWords) => string;

package/dist/chat/naming.js

@@ -1,5 +1,5 @@
 import { fillTemplate } from '@fusion.dev/helix-core';
-export const TURN_WORDS = { me: 'You', sentence: '{author}, {time}' };
+export const TURN_WORDS = { me: 'You', sentence: '{author}, {time}', turn: 'Message' };
 export const authorWords = (author, authorLabel, words) => {
     if (authorLabel !== '') {
         return authorLabel;
@@ -9,4 +9,6 @@ export const authorWords = (author, authorLabel, words) => {
     }
     return author === undefined || author === 'them' ? '' : author;
 };
-export const turnName = (author, time, words) => author !== '' && time !== '' ? fillTemplate(words.sentence, { author, time }) : author || time;
+export const turnName = (author, time, words) => author !== '' && time !== ''
+    ? fillTemplate(words.sentence, { author, time })
+    : author || time || words.turn;

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

@@ -53,18 +53,25 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * `sent` or `failed` when your server answers. Add the reply as a turn with
  * `state="streaming"`, write its text as it arrives, and set `state` to `sent`
  * when it is complete. While the user types, the composer sends
- * `helix-typing`, which you can pass on to the other side. Show the other
- * side's typing in the `status` slot.
+ * `helix-typing`, which you can pass on to the other side. When the other side
+ * types, set `typing` to their name: the status band draws three dots and
+ * "Ada is typing" (`typing-label`), which a screen reader hears, and clearing
+ * it takes them away. Anything slotted into `status` is drawn first.
  *
  * A screen reader names each turn by its author and its time, such as "You, 2
  * minutes ago". Set `me-label` and `message-label` to say it in your language,
- * and give each turn by `them` an `author-label`.
+ * and give each turn by `them` an `author-label`. A turn with neither an author
+ * label nor a time is named by `turn-label`, "Message".
  *
  * A turn from `turns` is drawn in the chat's shadow root, so style it through
  * the forwarded `message-*` parts. A turn by `me` also gets each part with
  * `-mine` added, and the turn's state adds `message-meta-failed`,
  * `message-content-sending`, and `message-content-streaming`. To style each
- * participant differently, pass the turns as children.
+ * participant differently, give `author-styles` the declarations for each
+ * author, such as `{"ada": "--chat-message-background-color: …"}`: the message
+ * drawn for each of their turns takes them as its `style`, so the message's
+ * custom properties change for that author alone. Turns passed as children are
+ * styled by their `author`, such as `helix-chat-message[author="ada"]`.
  *
  * @since 0.1.0
  * @status stable
@@ -91,6 +98,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart empty - Shown when the conversation has no turns.
  * @csspart header - The region above the transcript.
  * @csspart history - Shown at the top of the transcript while older turns load.
+ * @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.
@@ -117,6 +125,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart resume - The control shown while the user is scrolled away from the bottom.
  * @csspart status - The status region, outside the log.
  * @csspart turn - The wrapper around the message drawn for one turn from `turns`.
+ * @csspart typing - The words that say who is typing, in the status band, while `typing` names someone.
  */
 export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     /**
@@ -131,6 +140,16 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     static shadowRootOptions: ShadowRootInit;
     /** How tall a turn is assumed to be before it has been drawn, in pixels. */
     static readonly ESTIMATE = 72;
+    /**
+     * Declarations for the turns from `turns` by each author, keyed by `author`,
+     * as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
+     *
+     * The message drawn for each turn by that author takes them as its `style`,
+     * so the custom properties a message reads, its fill, text color, radius and
+     * padding, change for that author alone. A turn by an author with no entry
+     * takes none, and looks as it did. JSON that does not parse is no entries.
+     */
+    authorStyles: Record<string, string>;
     /**
      * Whether the transcript opens pinned to the bottom, when `pinned` is not
      * set.
@@ -197,6 +216,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * history.
      */
     threshold: number;
+    /**
+     * The name a screen reader gives a turn with neither an author it can say
+     * nor a time: a turn by `them` with no `author-label`, say.
+     */
+    turnLabel: string;
     /**
      * The turns as data, for a transcript too long to hold as elements.
      *
@@ -208,6 +232,18 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * element to look again.
      */
     turns: readonly ChatTurn[];
+    /**
+     * Who on the other side is typing, by name, or empty while nobody is.
+     *
+     * Set it from your connection, and clear it when they stop or send. The
+     * status band says it with `typing-label`.
+     */
+    typing: string;
+    /**
+     * What the status band says while someone is typing. `{author}` is the
+     * name in `typing`.
+     */
+    typingLabel: string;
     private pinnedState;
     /** The last thing said, and how many times something has been. */
     private announcement;

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, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, wordsConverter, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -24,7 +24,11 @@ const SECOND_NAMES = {
         streaming: 'content: message-content-streaming',
     },
 };
-const secondNames = (table, key) => key !== undefined && Object.hasOwn(table, key) ? `, ${table[key]}` : '';
+const ownEntry = (table, key) => (key !== undefined && Object.hasOwn(table, key) ? table[key] : undefined);
+const secondNames = (table, key) => {
+    const names = ownEntry(table, key);
+    return names === undefined ? '' : `, ${names}`;
+};
 const settled = (turn) => turn.state !== 'sending' && turn.state !== 'streaming';
 const newsworthy = (turn) => turn.author !== 'me' || turn.state === 'failed';
 const spoken = (message) => [...message.childNodes]
@@ -36,6 +40,7 @@ const spoken = (message) => [...message.childNodes]
 let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.authorStyles = {};
         this.defaultPinned = true;
         this.history = '';
         this.historyText = 'Loading earlier messages';
@@ -43,7 +48,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.meLabel = 'You';
         this.messageLabel = '{author}, {time}';
         this.threshold = 48;
+        this.turnLabel = 'Message';
         this.turns = [];
+        this.typing = '';
+        this.typingLabel = '{author} is typing';
         this.pinnedState = undefined;
         this.announcement = '';
         this.said = 0;
@@ -365,8 +373,8 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Conversation', role: 'region' });
-        if (changed.has('meLabel') || changed.has('messageLabel')) {
-            this.words = { me: this.meLabel, sentence: this.messageLabel };
+        if (changed.has('meLabel') || changed.has('messageLabel') || changed.has('turnLabel')) {
+            this.words = { me: this.meLabel, sentence: this.messageLabel, turn: this.turnLabel };
         }
         this.countRegions();
         if (changed.has('history')) {
@@ -431,6 +439,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
               author=${turn.author ?? nothing}
               author-label=${turn.authorLabel ?? nothing}
               at=${turn.at ?? nothing}
+              style=${ownEntry(this.authorStyles, turn.author) ?? nothing}
               .turnWords=${this.words}
               state=${turn.state ?? nothing}
             >${turn.text}</${message}>
@@ -466,14 +475,22 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
       <div part="resume" ?hidden=${!away || !this.has('resume')} @click=${this.handleResume}>
         <slot name="resume"></slot>
       </div>
-      <div part="status" role="status" ?data-empty=${!this.has('status')}>
-        <slot name="status"></slot>
+      <div part="status" role="status" ?data-empty=${!this.has('status') && this.typing === ''}>
+        <slot name="status"></slot>${this.typing === ''
+            ? nothing
+            : html `<span part="typing"
+                ><span part="indicator" aria-hidden="true"></span
+                >${fillTemplate(this.typingLabel, { author: this.typing })}</span
+              >`}
       </div>
       <div part="composer" ?hidden=${!this.has('composer')}>
         <slot name="composer"></slot>
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: 'author-styles', converter: wordsConverter })
+], HelixHeadlessChat.prototype, "authorStyles", void 0);
 __decorate([
     property({ attribute: 'default-pinned', converter: onUnlessFalse })
 ], HelixHeadlessChat.prototype, "defaultPinned", void 0);
@@ -498,9 +515,18 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessChat.prototype, "threshold", void 0);
+__decorate([
+    property({ attribute: 'turn-label' })
+], HelixHeadlessChat.prototype, "turnLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessChat.prototype, "turns", void 0);
+__decorate([
+    property()
+], HelixHeadlessChat.prototype, "typing", void 0);
+__decorate([
+    property({ attribute: 'typing-label' })
+], HelixHeadlessChat.prototype, "typingLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessChat.prototype, "pinnedState", void 0);

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

@@ -21,6 +21,16 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * it as neither checked nor unchecked, it never submits, and the first click
  * resolves it.
  *
+ * **Keyboard.** The box is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Space | Checks or unchecks the box, and resolves `indeterminate`. |
+ *
+ * The native input reports checked, unchecked, or mixed. `aria-readonly` is set
+ * under `readonly`, and `aria-invalid` and `aria-describedby` point at the
+ * message while one shows.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -28,6 +38,8 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/checkbox
  *
  * @slot - The label.
+ * @slot check - An icon drawn as the mark while the box is checked, in place of the tick.
+ * @slot dash - An icon drawn as the mark while the box is indeterminate, in place of the dash.
  * @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.
  *
@@ -47,6 +59,8 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @csspart mark-indeterminate - Added to `mark` while the box is indeterminate.
  *
  * @cssstate checked - While the box is checked.
+ * @cssstate has-check - An icon is slotted into `check`.
+ * @cssstate has-dash - An icon is slotted into `dash`.
  * @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`.
@@ -107,6 +121,12 @@ export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
      * worse problem than its spacing.
      */
     private readonly handleLabelChange;
+    /**
+     * Records which of the mark's slots hold an icon, as `:state(has-check)` and
+     * `:state(has-dash)`, so a stylesheet drops its own drawing of that shape.
+     * A state, for the reason `:state(has-label)` is one.
+     */
+    private readonly handleMarkChange;
     /**
      * Asks the slot, and records the answer as a state.
      *

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -32,6 +32,16 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.handleLabelChange = () => {
             this.syncLabelPresence();
         };
+        this.handleMarkChange = (event) => {
+            const slot = event.target;
+            const filled = slotFilled(slot);
+            if (slot.name === 'dash') {
+                this.toggleState('has-dash', filled);
+            }
+            else {
+                this.toggleState('has-check', filled);
+            }
+        };
     }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -64,11 +74,9 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
     }
     syncLabelPresence() {
         const slot = this.renderRoot.querySelector('[part="label"] slot');
-        const meaningful = (node) => node.textContent?.trim() !== '' || node.nodeType === Node.ELEMENT_NODE;
-        const filled = (slot?.assignedNodes({ flatten: true }) ?? []).some(meaningful);
-        const hidden = this.label === '' &&
-            Boolean(this.getAttribute('aria-label')) &&
-            !(slot?.assignedNodes() ?? []).some(meaningful);
+        const filled = slotFilled(slot);
+        const written = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim() !== '');
+        const hidden = this.label === '' && Boolean(this.getAttribute('aria-label')) && !written;
         this.partNamed('label')?.toggleAttribute('data-hidden', hidden);
         this.toggleState('has-label', filled && !hidden);
         this.partNamed('label')?.toggleAttribute('hidden', !filled);
@@ -94,7 +102,10 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         <span
           part="mark${this.checked ? ' mark-checked' : ''}${this.indeterminate ? ' mark-indeterminate' : ''}${this.dashed ? ' mark-dash' : ''}"
           aria-hidden="true"
-        ></span>
+          >${this.dashed
+            ? html `<slot name="dash" @slotchange=${this.handleMarkChange}></slot>`
+            : html `<slot name="check" @slotchange=${this.handleMarkChange}></slot>`}</span
+        >
       </span>
       <span part="label" ?data-hidden=${named !== null}
         ><slot @slotchange=${this.handleLabelChange}>${this.label || named}</slot></span

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

@@ -34,6 +34,9 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
  * only for validity and never calls `setFormValue`, so the browser does not
  * generate a message for it.
  *
+ * **Keyboard.** Each box is its own tab stop, as a set of native checkboxes
+ * is, and Space checks the focused one. The select-all box comes first.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -221,12 +224,15 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      * for the whole set, as a box moves it.
      */
     private readonly handleSelectAll;
+    /** The set as the select-all helper reads it. */
+    private setBoxes;
     /**
      * The box above the set that checks or unchecks every box, under
      * `select-all`, behind a seam a tier can move.
      *
-     * Checked while every box is, and showing a dash while only some are. It is
-     * in this shadow root, so it is no member of the set and submits nothing.
+     * Checked while every enabled box is, and showing a dash while only some
+     * are, so its state says what a press does. It is in this shadow root, so
+     * it is no member of the set and submits nothing.
      */
     protected renderSelectAll(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

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

@@ -5,12 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCheckboxGroup_1;
-import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, toggleEvery, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
 import '../../checkbox/index.js';
+import { selectAllState } from '../select-all.js';
 let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -59,11 +60,8 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         this.handleSelectAll = (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const enabled = this.boxes.filter((box) => !box.isDisabled);
-            const every = enabled.length > 0 && enabled.every((box) => box.checked);
-            const next = this.boxes
-                .filter((box) => (enabled.includes(box) ? !every : box.checked))
-                .map((box) => box.value);
+            const boxes = this.setBoxes();
+            const next = toggleEvery(boxes.filter((box) => box.checked).map((box) => box.value), boxes.filter((box) => !box.disabled).map((box) => box.value), boxes.map((box) => box.value));
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 return;
             }
@@ -177,13 +175,18 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         this.validate();
         this.linkHost();
     }
+    setBoxes() {
+        return this.boxes.map((box) => ({
+            checked: box.checked,
+            disabled: box.isDisabled,
+            value: box.value,
+        }));
+    }
     renderSelectAll() {
         if (!this.selectAll) {
             return nothing;
         }
-        const boxes = this.childrenKnown ? this.boxes : [];
-        const ticked = boxes.filter((box) => box.checked).length;
-        const every = boxes.length > 0 && ticked === boxes.length;
+        const { checked, indeterminate } = selectAllState(this.childrenKnown ? this.setBoxes() : []);
         const box = this.tag('checkbox');
         return html `<${box}
       part="select-all"
@@ -191,8 +194,8 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         feedback: select-all-feedback, field: select-all-field, hint: select-all-hint,
         label: select-all-label, mark: select-all-mark, mark-checked: select-all-mark-checked,
         mark-dash: select-all-mark-dash, mark-indeterminate: select-all-mark-indeterminate"
-      .checked=${every}
-      .indeterminate=${ticked > 0 && !every}
+      .checked=${checked}
+      .indeterminate=${indeterminate}
       ?disabled=${this.isDisabled}
       label=${this.selectAllLabel}
       @helix-before-toggle=${this.handleSelectAll}