@fusion.dev/helix-headless 0.145.0 → 0.146.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,12 +53,15 @@ 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
@@ -91,6 +94,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 +121,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 {
     /**
@@ -197,6 +202,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 +218,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, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -43,7 +43,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 +368,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')) {
@@ -466,8 +469,13 @@ 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>
@@ -498,9 +506,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

@@ -32,6 +32,16 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.handleLabelChange = () => {
             this.syncLabelPresence();
         };
+        this.handleMarkChange = (event) => {
+            const slot = event.target;
+            const filled = slot.assignedNodes().length > 0;
+            if (slot.name === 'dash') {
+                this.toggleState('has-dash', filled);
+            }
+            else {
+                this.toggleState('has-check', filled);
+            }
+        };
     }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -94,7 +104,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

@@ -11,6 +11,7 @@ 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 { selectAllPress, selectAllState } from '../select-all.js';
 let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -59,11 +60,7 @@ 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 next = selectAllPress(this.setBoxes());
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 return;
             }
@@ -177,13 +174,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 +193,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}

package/dist/checkbox-group/select-all.d.ts

@@ -0,0 +1,27 @@
+/** What the select-all helper reads from one box in the set. */
+export interface SetBox {
+    /** Whether the box is checked. */
+    readonly checked: boolean;
+    /** Whether the box refuses a press, so select-all leaves it as it is. */
+    readonly disabled: boolean;
+    /** What the box submits when checked. */
+    readonly value: string;
+}
+/**
+ * What the select-all box shows: checked while every enabled box is checked,
+ * mixed while only some are, and clear while none is.
+ *
+ * A disabled box counts for nothing, because a press leaves it as it is. A
+ * set whose every box is disabled reads every box, so the select-all box still
+ * shows what the set holds.
+ */
+export declare const selectAllState: (boxes: readonly SetBox[]) => {
+    checked: boolean;
+    indeterminate: boolean;
+};
+/**
+ * The values a press on the select-all box leaves, in the set's order: every
+ * enabled box checked, or every enabled box clear once all of them are
+ * checked. A disabled box keeps its state either way.
+ */
+export declare const selectAllPress: (boxes: readonly SetBox[]) => string[];

package/dist/checkbox-group/select-all.js

@@ -0,0 +1,12 @@
+export const selectAllState = (boxes) => {
+    const enabled = boxes.filter((box) => !box.disabled);
+    const counted = enabled.length > 0 ? enabled : boxes;
+    const ticked = counted.filter((box) => box.checked).length;
+    const checked = counted.length > 0 && ticked === counted.length;
+    return { checked, indeterminate: ticked > 0 && !checked };
+};
+export const selectAllPress = (boxes) => {
+    const enabled = boxes.filter((box) => !box.disabled);
+    const every = enabled.length > 0 && enabled.every((box) => box.checked);
+    return boxes.filter((box) => (box.disabled ? box.checked : !every)).map((box) => box.value);
+};

package/dist/code-block/highlight.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The highlighted lines out of what a highlighter returned, without the
+ * `<pre>` and `<code>` around them that some highlighters write.
+ *
+ * Shiki's `codeToHtml` returns a whole block, `<pre class="shiki" tabindex="0"
+ * style="…"><code>…</code></pre>`. Drawn as given inside the block's own
+ * `<pre>`, that second `<pre>` sat 13px below the gutter's first number, and
+ * its `tabindex` was a second tab stop inside the block's scroller. Prism's
+ * `highlight` and highlight.js return the lines alone, which pass through
+ * unchanged.
+ *
+ * Only a wrapper around the whole markup is taken off, and only one. The block draws its own
+ * box and colors, so the wrapper's `style` and `class` go with it.
+ */
+export declare const highlightedLines: (markup: string) => string;

package/dist/code-block/highlight.js

@@ -0,0 +1,4 @@
+export const highlightedLines = (markup) => {
+    const lines = /^\s*<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*)<\/code>\s*<\/pre>\s*$/i.exec(markup)?.[1];
+    return lines === undefined || /<\/?pre\b/i.test(lines) ? markup : lines;
+};