@fusion.dev/helix-headless 0.150.0 → 0.152.0

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

@@ -1,6 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
-import '../breadcrumb/breadcrumb.js';
 /** One step of a trail written as data, for `items`. */
 export interface BreadcrumbItem {
     /** The URL the step links to. The last step is the current page and takes none. */
@@ -26,7 +25,8 @@ export interface BreadcrumbItem {
  * markers.
  *
  * The items are slotted directly, so they are `<ol>` children in the flat tree,
- * and each item sets `role="listitem"` on itself.
+ * and each item sets `role="listitem"` on itself. Where no slotted crumb is
+ * `current`, the last one is said to be the current page.
  *
  * The trail does not measure itself, and you write its overflow in markup: put
  * the crumb that holds the folded items where the gap should appear.
@@ -41,6 +41,11 @@ export interface BreadcrumbItem {
  * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
  * do not fold; write the folded crumb where the gap should be.
  *
+ * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
+ * Enter follows it. The current page and the separators are not in the tab
+ * order. In a folded trail, Enter or Space on the fold's button shows the
+ * whole trail and moves focus to the first crumb it brought back.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -96,8 +101,15 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     /** Shows the whole trail and moves focus to the first crumb it brought back. */
     private readonly expand;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     /** How many crumbs drawn from `items` are folded away, or 0. */
     private get folded();
+    /**
+     * Says the last slotted crumb is the current page where none is marked
+     * `current`, as React Aria's trail does. Through a property the crumb does
+     * not reflect, so nothing is written onto your markup.
+     */
+    private readonly markLast;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -4,12 +4,12 @@ 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, formatWords, HelixElement, hostAria, words } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import '../breadcrumb/breadcrumb.js';
+import { HelixHeadlessBreadcrumb } from '../breadcrumb/breadcrumb.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
     constructor() {
         super(...arguments);
@@ -24,6 +24,15 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
                 crumb?.shadowRoot?.querySelector('a, [part="link"]')?.focus();
             });
         };
+        this.markLast = () => {
+            const crumbs = (this.renderRoot.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+            const marked = crumbs.some((one) => one.current);
+            crumbs.forEach((crumb, index) => {
+                whenHydrated(crumb, () => {
+                    crumb.implied = !marked && this.items.length === 0 && index === crumbs.length - 1;
+                });
+            });
+        };
     }
     static { this.words = 'helix-breadcrumbs'; }
     willUpdate(changed) {
@@ -33,6 +42,10 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             this.expanded = false;
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        this.markLast();
+    }
     get folded() {
         const most = this.maxItems ?? 0;
         const count = this.items.length;
@@ -77,7 +90,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     }
     render() {
         return html `<ol part="list" role="list">
-      ${this.renderItems()}<slot></slot>
+      ${this.renderItems()}<slot @slotchange=${this.markLast}></slot>
     </ol>`;
     }
 };

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

@@ -48,6 +48,16 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      */
     static words: string;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The dismiss button's name, read by screen readers, with `{label}` for
+     * what the callout is called: its heading, or the tone's name where it has
+     * none.
+     *
+     * "Dismiss Scheduled maintenance" says which of several callouts the button
+     * takes away, where every button was "Dismiss". A label without `{label}` is
+     * read as written.
+     */
+    dismissLabel: string;
     /**
      * What kind of attention the passage needs.
      *
@@ -96,6 +106,16 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * above.
      */
     protected renderDismissIcon(): TemplateResult;
+    /**
+     * The dismiss button's name: `dismissLabel` with the heading's words, or the
+     * tone's name.
+     *
+     * The heading is read from the children, so a server and a hydrating render
+     * name the button for the tone, and the update after names it for the
+     * heading.
+     */
+    private dismissName;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,13 +4,14 @@ 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, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
+        this.dismissLabel = 'Dismiss {label}';
         this.toneLabel = '';
         this.toneLabels = {
             danger: 'Error',
@@ -26,7 +27,7 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
         hostAria(this.internals, { role: 'note' });
     }
     renderIcon(icon, _label) {
-        return html `<slot name="icon">
+        return html `<slot name="icon" aria-hidden="true">
       <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>
@@ -37,23 +38,37 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
       ${drawDismissGlyph()}
     </slot>`;
     }
+    dismissName(tone) {
+        const heading = this.childrenKnown ? slottedWords(this, ['heading']) : '';
+        return this.dismissLabel.includes('{label}')
+            ? formatWords(this, 'dismissLabel', { label: heading || tone }).trim()
+            : this.dismissLabel;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
         const tone = this.tone === 'neutral' ? 'neutral' : toneMark(this.tone) ? (this.tone ?? 'info') : 'info';
         const { icon } = toneMark(tone) ?? TONE_MARKS.info;
         const named = this.toneLabel || (this.toneLabels[tone] ?? '');
         return html `<span part="icon" role="img" aria-label=${named}>${this.renderIcon(icon, named)}</span>
       <div part="content">
-        <slot name="heading"></slot>
+        <slot name="heading" @slotchange=${() => this.requestUpdate()}></slot>
         <slot></slot>
       </div>${this.dismissible
             ? drawDismiss({
-                label: this.dismissLabel,
+                label: this.dismissName(named),
                 mark: this.renderDismissIcon(),
                 onDismiss: () => this.dismiss(),
             })
             : nothing}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessCallout.prototype, "dismissLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCallout.prototype, "tone", void 0);

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

@@ -20,6 +20,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * disabled>` turns the composer off. Sending is still `helix-send`, and it
  * does not submit the form.
  *
+ * **`required`, `minlength` and `maxlength` are checked by the browser**, as
+ * on a `<textarea>`, and the message is the browser's. `maxlength` stops the
+ * field taking more. A draft that fails them does not send, and the composer
+ * takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
+ * it, the form was submitted, or the reader edited the field and left it.
+ * Tabbing past an empty composer marks nothing.
+ *
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
  * each time it changes: when they start, and when they send or stop for
  * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
@@ -45,6 +52,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart send - The send button.
  * @csspart start - The box around the `start` slot.
  * @csspart tools - The row under the field.
+ *
+ * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.
  */
 export declare class HelixHeadlessChatComposer extends HelixFormElement {
     /**
@@ -56,10 +65,24 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      * The field's name, read by screen readers.
      */
     label: string;
+    /**
+     * The most characters a draft can have. The field stops taking more.
+     */
+    maxLength?: number;
+    /**
+     * The fewest characters a draft can have, once the reader has written in
+     * the field, as on a `<textarea>`.
+     */
+    minLength?: number;
     /**
      * Placeholder text shown in an empty field.
      */
     placeholder: string;
+    /**
+     * Whether the form needs a draft to submit. An empty draft never sends,
+     * required or not.
+     */
+    required: boolean;
     /**
      * How many rows the field opens at.
      *
@@ -97,6 +120,10 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     readonly isChatComposer = true;
     /** Whether the user is writing, which `helix-typing` announces. */
     private writing;
+    /** Whether the reader has tried to send or submit the draft, or edited it and left. */
+    private touched;
+    /** Whether the composer shows that its draft is wrong. */
+    private shownInvalid;
     /** The pause after which the user has stopped writing. */
     private readonly pause;
     /**
@@ -121,6 +148,8 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     private get declared();
     /** Puts back the draft the markup declared when the form is reset. */
     formResetCallback(): void;
+    /** The reader has had a go at the draft, so whether it is wrong can be shown. */
+    private readonly touch;
     /** Brings back the draft when the browser restores the form. */
     formStateRestoreCallback(state: string | File | FormData | null): void;
     /**
@@ -133,6 +162,7 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      */
     private markEmpty;
     protected updated(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The control that offers the turn, behind a seam so a tier can draw its own.

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

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, markRegion, words, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFormElement {
@@ -15,6 +15,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         super(...arguments);
         this.label = 'Message';
         this.placeholder = '';
+        this.required = false;
         this.rows = 1;
         this.sendLabel = 'Send';
         this.submitOn = 'enter';
@@ -22,7 +23,13 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         this.value = '';
         this.isChatComposer = true;
         this.writing = false;
+        this.touched = false;
+        this.shownInvalid = false;
         this.pause = new DelayController(this, { renders: false });
+        this.touch = () => {
+            this.touched = true;
+            this.requestUpdate();
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
@@ -65,10 +72,15 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         if (value === '' || this.isDisabled) {
             return false;
         }
+        if (!this.internals.validity.valid) {
+            this.touch();
+            return false;
+        }
         if (!this.dispatchEvent(new HelixSendEvent({ value }))) {
             return false;
         }
         this.value = '';
+        this.touched = false;
         this.markTyping(false);
         return true;
     }
@@ -78,6 +90,8 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
     formResetCallback() {
         super.formResetCallback();
         this.value = this.declared;
+        this.touched = false;
+        this.requestUpdate();
     }
     formStateRestoreCallback(state) {
         this.value = typeof state === 'string' ? state : this.declared;
@@ -93,6 +107,20 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         if (changed.has('value')) {
             this.internals.setFormValue(this.value === '' ? null : this.value);
         }
+        const field = this.partNamed('field');
+        if (field?.validity) {
+            this.internals.setValidity(field.validity, field.validationMessage, field);
+        }
+        const invalid = this.touched && !this.internals.validity.valid;
+        this.toggleState('invalid', invalid);
+        this.internals.ariaInvalid = invalid ? 'true' : null;
+        if (invalid !== this.shownInvalid) {
+            this.shownInvalid = invalid;
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.addEventListener('invalid', this.touch);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -124,7 +152,12 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         aria-label=${this.label}
         placeholder=${this.placeholder}
         rows=${this.rows}
+        ?required=${this.required}
+        minlength=${this.minLength ?? nothing}
+        maxlength=${this.maxLength ?? nothing}
+        aria-invalid=${this.shownInvalid ? 'true' : nothing}
         ?disabled=${this.isDisabled}
+        @change=${this.touch}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
@@ -140,9 +173,18 @@ __decorate([
     words,
     property()
 ], HelixHeadlessChatComposer.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'maxlength', type: Number })
+], HelixHeadlessChatComposer.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: 'minlength', type: Number })
+], HelixHeadlessChatComposer.prototype, "minLength", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessChatComposer.prototype, "required", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessChatComposer.prototype, "rows", void 0);
@@ -159,6 +201,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessChatComposer.prototype, "shownInvalid", void 0);
 HelixHeadlessChatComposer = __decorate([
     customElement('helix-headless-chat-composer')
 ], HelixHeadlessChatComposer);

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

@@ -331,6 +331,16 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     get messages(): HelixHeadlessChatMessage[];
     /** The element that scrolls, once there is one. */
     private get log();
+    /**
+     * Makes the log a tab stop while it scrolls, and takes the stop away when it
+     * does not.
+     *
+     * **A reader on a keyboard scrolls the history from the log itself.**
+     * Chromium and Firefox make a box that scrolls focusable on their own, and
+     * Safari does not, so there the arrow keys could not reach a long history.
+     * A log that fits is no stop at all, so Tab goes straight to the composer.
+     */
+    private markScroller;
     /** Whether the reader is within `threshold` of the bottom right now. */
     private get atBottom();
     /** What identifies a turn fed as data: its key, or the object it is. */

package/dist/chat/root/chat-root.js

@@ -78,6 +78,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         });
         this.filled = undefined;
         this.handleResize = () => {
+            this.markScroller();
             if (this.pinned) {
                 this.stick();
             }
@@ -141,6 +142,18 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     get log() {
         return this.partNamed('log');
     }
+    markScroller() {
+        const log = this.log;
+        if (!log) {
+            return;
+        }
+        if (log.scrollHeight > log.clientHeight) {
+            log.tabIndex = 0;
+        }
+        else {
+            log.removeAttribute('tabindex');
+        }
+    }
     get atBottom() {
         const log = this.log;
         if (!log) {
@@ -421,6 +434,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             this.virtualize.measure();
         }
         this.watchSizes();
+        this.markScroller();
         this.remember();
         this.reachHistory();
         this.announce();

package/dist/data-table/root/data-table-root.d.ts

@@ -40,6 +40,10 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *   and shows a dash while only some are chosen.
  * - Shift with a press on a checkbox selects every row between it and the row
  *   last chosen.
+ * - `selection-behavior="replace"` makes a press or a move select the row
+ *   alone, as a file list does. Control or Command with a press adds or takes
+ *   out one row, and Shift with a press selects every row from the one last
+ *   chosen.
  *
  * To act on a single row, such as opening it, put a link or a button in a cell.
  *
@@ -56,7 +60,8 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Enter, Space on the `load-more` row | Sends `helix-load-more`. |
- * | Space on a row | Selects the row, in a `selectable` table. |
+ * | Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior="replace"`, selects it alone, and Control or Command with Space adds or takes out the row. |
+ * | Down, Up, Page Down, Page Up under `selection-behavior="replace"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |
  * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
  * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
@@ -123,7 +128,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/data-table
  *
  * @slot - The columns, as `TableColumn` elements.
+ * @slot empty - Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot footer - Content below the grid. It replaces the built-in pagination.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`.
@@ -216,6 +223,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * `registerWords('de', { 'helix-data-table': { nextLabel: 'Nächste Seite' } })`.
      */
     static words: string;
+    /** The empty and loading lines are the `empty` and `loading` slots. */
+    protected statusSlots: boolean;
     /**
      * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
      *
@@ -490,6 +499,15 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * {# wybranych} other {# wybranego}}`.
      */
     selectedLabel: string;
+    /**
+     * What a key or a press on a row does to the rows already selected, in a
+     * `selectable` table. `toggle`, the default, keeps them: Space adds or takes
+     * out the row. `replace` selects the row alone, as a file list does: Down and
+     * Up carry the selection with them, and a press on a row selects it. Control
+     * or Command with a press or Space adds or takes out one row, and with a move
+     * goes without selecting. The checkboxes add or take out one row either way.
+     */
+    selectionBehavior: 'replace' | 'toggle';
     /**
      * The name of a row's checkbox. `{row}` is replaced with the row's value in
      * the first column that has a field, or with its key.
@@ -954,7 +972,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     toggleSort(field: string): boolean;
     /**
-     * The columns into the header row, everything else into the toolbar and footer.
+     * The columns into the header row, everything else into the slot it names.
      *
      * Manual assignment, so a consumer's own markup is never written to.
      */
@@ -1124,6 +1142,20 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * request carries only the state it asks for.
      */
     private readonly notePress;
+    /** Whether a press or a move on a row selects it alone. */
+    private get replaces();
+    /**
+     * Selects the row at `row` on the page alone, and makes it where a range
+     * runs from. Asks nothing where it is already the only one selected.
+     */
+    private chooseOnly;
+    /**
+     * A press on a row under `selection-behavior="replace"`: it selects the row
+     * alone, Control or Command adds or takes out the row, and Shift selects
+     * every row from the one last chosen. A press on a control in a cell, or on
+     * the checkbox or grip column, is the control's.
+     */
+    private readonly handleRowClick;
     /**
      * A click on a sortable heading, anywhere but its grip or its edge.
      *

package/dist/data-table/root/data-table-root.js

@@ -30,6 +30,7 @@ const isControl = (element) => element.matches(CONTROL) || element.shadowRoot?.d
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.defaultExpanded = '';
@@ -64,6 +65,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
         this.selectedLabel = '{count} selected';
+        this.selectionBehavior = 'toggle';
         this.selectRowLabel = 'Select {row}';
         this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.total = 0;
@@ -178,6 +180,30 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.notePress = (event) => {
             this.shiftPressed = event.shiftKey;
         };
+        this.handleRowClick = (event) => {
+            if (!this.replaces || event.defaultPrevented) {
+                return;
+            }
+            const place = this.placeOf(event);
+            if (!place || place.row < 0 || place.row >= this.drawnPage.length || place.column < this.lead) {
+                return;
+            }
+            const origin = event.composedPath()[0];
+            if (origin instanceof Node && this.controlsIn(place).some((one) => deepContains(one, origin))) {
+                return;
+            }
+            if (event.shiftKey && this.anchorKey !== undefined) {
+                this.selectRange(place.row);
+                return;
+            }
+            if (event.ctrlKey || event.metaKey) {
+                const data = this.drawnPage[place.row];
+                const key = this.keyOf(data, this.rowIndex(place.row) - 2);
+                this.chooseRow(key, !this.chosen.has(key));
+                return;
+            }
+            this.chooseOnly(place.row);
+        };
         this.handleHeadClick = (event) => {
             if (this.partIn(event, 'grip') || this.partIn(event, 'resizer')) {
                 return;
@@ -251,14 +277,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
             const { column, row } = to;
             event.preventDefault();
+            const onRow = row >= 0 && row < this.drawnPage.length;
             if (event.shiftKey &&
                 this.selectable &&
                 (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
                 place.row >= 0 &&
-                row >= 0 &&
-                row < this.drawnPage.length) {
+                onRow) {
                 this.selectRange(row, place.row);
             }
+            else if (this.replaces &&
+                onRow &&
+                row !== place.row &&
+                !event.shiftKey &&
+                !event.ctrlKey &&
+                !event.metaKey) {
+                this.chooseOnly(row);
+            }
             if (row !== place.row || column !== place.column) {
                 this.moveTo(row, column);
             }
@@ -878,6 +912,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         for (const [name, wanted] of [
             ['toolbar', true],
             ['footer', true],
+            ['empty', true],
+            ['loading', true],
         ]) {
             const slot = root.querySelector(`slot[name="${name}"]`);
             if (slot?.assign && wanted) {
@@ -1201,6 +1237,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('click', this.handleRowClick);
         this.addEventListener('pointerdown', this.notePress, true);
         this.addEventListener('keydown', this.notePress, true);
         this.addEventListener('focusin', this.handleFocusIn);
@@ -1212,6 +1249,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('click', this.handleRowClick);
         this.removeEventListener('pointerdown', this.notePress, true);
         this.removeEventListener('keydown', this.notePress, true);
         this.removeEventListener('focusin', this.handleFocusIn);
@@ -1220,6 +1258,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.removeEventListener('keydown', this.handleGripKey);
         this.removeEventListener('helix-before-resize', this.handleResize);
     }
+    get replaces() {
+        return this.selectable && this.selectionBehavior === 'replace';
+    }
+    chooseOnly(row) {
+        const data = this.drawnPage[row];
+        if (!data) {
+            return;
+        }
+        const key = this.keyOf(data, this.rowIndex(row) - 2);
+        this.anchorKey = key;
+        const now = this.chosen;
+        if (now.size === 1 && now.has(key)) {
+            return;
+        }
+        this.requestSelected(new Set([key]));
+    }
     cellAt(row, column) {
         const offset = this.lead;
         if (row === -1) {
@@ -1402,6 +1456,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     event.preventDefault();
                     this.selectRange(place.row);
                 }
+                else if (this.replaces && row && !event.ctrlKey && !event.metaKey) {
+                    event.preventDefault();
+                    this.chooseOnly(place.row);
+                }
                 else if (this.selectable && row) {
                     event.preventDefault();
                     const key = this.keyOf(row, this.rowIndex(place.row) - 2);
@@ -1595,6 +1653,9 @@ __decorate([
     words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessDataTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessDataTable.prototype, "selectionBehavior", void 0);
 __decorate([
     words,
     property({ attribute: 'select-row-label' })