@fusion.dev/helix-headless 0.172.0 → 0.173.0

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type Placement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
 import '../../tooltip/index.js';
 /**
@@ -31,7 +32,17 @@ import '../../tooltip/index.js';
  * The button is named `label`, or the host's `aria-label`, and its name
  * changes to `copied-label` or `error-label` for the moment after a press. The
  * same words are said in a live region, so a screen reader hears the result,
- * and the tooltip shows them.
+ * and the tooltip shows them. The tooltip does not also describe the button,
+ * since its words are the button's name.
+ *
+ * **The tooltip.** It shows the name on hover and focus and the result after a
+ * press. `tooltip="copy"` shows it only for the result, and `tooltip="none"`
+ * draws none, as Web Awesome's copy button offers. `tooltip-placement` is the
+ * side it prefers, and it moves to another side where that one does not fit.
+ *
+ * **Words on the button.** `show-label` draws the name beside the icon, and
+ * the result in its place after a press. The button is as wide as the longest
+ * of the three, so a press does not resize it.
  *
  * @since 0.1.0
  * @status stable
@@ -50,6 +61,7 @@ import '../../tooltip/index.js';
  * @csspart live - The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
  * @csspart mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
+ * @csspart text - The words beside the icon, under `show-label`. It holds all three, `label`, `copied-label` and `error-label`, with all but the current one hidden.
  * @csspart tooltip - The tooltip bubble, forwarded from the tooltip inside the button.
  * @csspart tooltip-arrow - The tooltip's arrow, which points at the button.
  * @csspart tooltip-arrow-bottom - The arrow while the bubble is below the button, on the bubble's top edge. Set together with `tooltip-arrow`.
@@ -64,7 +76,6 @@ import '../../tooltip/index.js';
  * @cssstate copied - The moment after a successful copy, while `copied-label` names the button.
  * @cssstate failed - The moment after a press that put nothing on the clipboard, while `error-label` names the button.
  *
- * @withheld csspart text - Button's words, which this does not render: the label is the icon's name.
  * @withheld slot end - Button's, which this does not render.
  * @withheld slot start - Button's, which this does not render.
  */
@@ -106,6 +117,24 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * world is called Copy. A consumer with a better word still sets it.
      */
     label: string;
+    /**
+     * Draws the name as words beside the icon, and the result in their place
+     * after a press. The button stays as wide as the longest of them.
+     */
+    showLabel: boolean;
+    /**
+     * When the tooltip shows: `full` on hover and focus and after a press,
+     * `copy` only after a press, to show the result, and `none` never, for a
+     * button whose result shows another way, such as under `show-label`.
+     *
+     * Unset is `full`, and the attribute stays absent until you write it.
+     */
+    tooltip?: 'copy' | 'full' | 'none';
+    /**
+     * The side the tooltip prefers. It moves to another side where this one
+     * does not fit.
+     */
+    tooltipPlacement: Placement;
     /**
      * The text copied to the clipboard.
      *
@@ -156,6 +185,9 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      */
     protected get forwardsLabel(): boolean;
     protected willUpdate(changed: PropertyValues): void;
+    /** Whether the last render showed a result, so `tooltip="copy"` opens and closes on the change. */
+    private showedResult;
+    protected updated(changed: PropertyValues): void;
     /** @internal A copy button never submits, so it is no form's default button. */
     protected get submitsForm(): boolean;
     /**
@@ -211,6 +243,14 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     protected renderCopiedIcon(): TemplateResult;
     /** The mark for a press that put nothing on the clipboard, behind a seam of its own. */
     protected renderFailedIcon(): TemplateResult;
+    /**
+     * The words beside the icon, under `show-label`, behind a seam of its own.
+     *
+     * All three are drawn and only the current one shows, so the button is as
+     * wide as the longest of them and a press does not resize it. Hidden from a
+     * screen reader, which hears the same words as the button's name.
+     */
+    protected renderText(): TemplateResult | typeof nothing;
     /**
      * The bubble the control sits inside, behind a seam.
      *

package/dist/copy-button/root/copy-button-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 HelixHeadlessCopyButton_1;
-import { CopyController, customElement, HelixCopyErrorEvent, words } from '@fusion.dev/helix-core';
+import { CopyController, customElement, HelixCopyErrorEvent, words, } from '@fusion.dev/helix-core';
 import { check, copy, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -22,8 +22,11 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
         this.feedbackDuration = 1600;
         this.from = '';
         this.label = 'Copy';
+        this.showLabel = false;
+        this.tooltipPlacement = 'top';
         this.value = '';
         this.namedBy = null;
+        this.showedResult = false;
         this.clipboard = new CopyController(this, { after: () => this.feedbackDuration });
         this.handleCopy = async (event) => {
             if (this.pending) {
@@ -62,6 +65,24 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
         this.toggleState('copied', this.copied);
         this.toggleState('failed', this.failed);
     }
+    updated(changed) {
+        super.updated(changed);
+        const result = this.copied || this.failed;
+        if (result === this.showedResult) {
+            return;
+        }
+        this.showedResult = result;
+        if (this.tooltip !== 'copy') {
+            return;
+        }
+        const tip = this.renderRoot.querySelector('[data-copy-tooltip]');
+        if (result) {
+            tip?.show();
+        }
+        else {
+            tip?.hide();
+        }
+    }
     get submitsForm() {
         return false;
     }
@@ -94,7 +115,7 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
       @keydown=${this.notePress}
       @pointerdown=${this.notePress}
     >
-      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}${this.renderSpinner()}
+      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}${this.renderSpinner()}${this.renderText()}
       </button>`)}${this.renderLive()}`;
     }
     renderCopyIcon() {
@@ -112,8 +133,24 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
       >${HelixHeadlessCopyButton_1.icon(x)}</slot
     >`;
     }
+    renderText() {
+        if (!this.showLabel) {
+            return nothing;
+        }
+        const resting = !this.copied && !this.failed;
+        return html `<span part="text" aria-hidden="true"
+      ><span ?hidden=${!resting}>${this.namedBy || this.label}</span
+      ><span ?hidden=${!this.copied}>${this.copiedLabel}</span
+      ><span ?hidden=${!this.failed}>${this.errorLabel}</span
+    ></span>`;
+    }
     renderTooltip(control) {
-        return html `<${this.tag('tooltip')} content=${this.says} persist
+        if (this.tooltip === 'none') {
+            return control;
+        }
+        const content = this.tooltip === 'copy' && !this.copied && !this.failed ? '' : this.says;
+        return html `<${this.tag('tooltip')} content=${content} persist
+    data-copy-tooltip placement=${this.tooltipPlacement}
     exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
       arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right,
       arrow-top: tooltip-arrow-top, tooltip, tooltip-bottom, tooltip-left, tooltip-right,
@@ -140,6 +177,15 @@ __decorate([
     words,
     property()
 ], HelixHeadlessCopyButton.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'show-label', reflect: true, type: Boolean })
+], HelixHeadlessCopyButton.prototype, "showLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCopyButton.prototype, "tooltip", void 0);
+__decorate([
+    property({ attribute: 'tooltip-placement' })
+], HelixHeadlessCopyButton.prototype, "tooltipPlacement", void 0);
 __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "value", void 0);

package/dist/element-events.generated.js

@@ -363,7 +363,9 @@ registerElementEvents({
     'helix-headless-virtual-list': [
         'change',
         'helix-before-change',
+        'helix-before-reorder',
         'helix-load-more',
         'helix-range-change',
+        'helix-reorder',
     ],
 });

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

@@ -44,6 +44,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @slot footer - Content below the graph.
  * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the graph.
+ * @slot loading - What the panel shows while `loading` is set and the list holds no notes. Defaults to `loading-label`.
  * @slot pan-down-icon - Replaces the glyph inside the pan down button.
  * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
  * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
@@ -80,6 +81,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart legend-swatch - The mark in a group's color, before its name.
  * @csspart list - The list of notes, which draws only the rows in view.
  * @csspart live - What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.
+ * @csspart loading - The box in place of the list while `loading` is set and it holds no notes, holding the `loading` slot.
  * @csspart note - One note in the list.
  * @csspart note-cursor - The note the keyboard is on in the list.
  * @csspart note-linked - A note linked to or from the selected one.
@@ -103,6 +105,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @cssstate empty - The list holds no notes: the graph has none, or a search or the groups hid them all.
  * @cssstate fullscreen - The graph fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate loading - While `loading` is set.
  * @cssstate local - The drawing shows the selected note's local graph, with `depth`.
  * @cssstate panel-open - A graph with `no-panel` has the search and the list open over the drawing.
  * @cssstate ready - The graph has been drawn whole, after `helix-graph-ready`.
@@ -169,6 +172,13 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     links: readonly GraphLink[];
     /** How a note that links to the selected one is described, with `{note}`. */
     linksToLabel: string;
+    /**
+     * Marks the graph as busy while its notes arrive: the list is `aria-busy`,
+     * and the panel says so where it holds no notes yet.
+     */
+    loading: boolean;
+    /** What the panel says while `loading` is set and the list holds no notes. */
+    loadingLabel: string;
     /** What screen readers hear once the drawing has moved down, after `moved()`. */
     movedDownLabel: string;
     /** What screen readers hear once the drawing has moved left, after `moved()`. */
@@ -185,6 +195,18 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * such as at the top of a page, where the drawing takes the whole frame.
      */
     noPanel: boolean;
+    /**
+     * What each note's row in the list shows in place of its name: a function
+     * given the note that returns text, an element or a Lit template.
+     *
+     * For an icon by its kind, or a date under its name, as React Aria's
+     * `ListBoxItem` takes children. The row is still named by the note's name,
+     * which typeahead and the search find it by, and described by how it stands
+     * to the selected note. Return the name with your content where it should
+     * still show. A property only, there being no way to write a function in
+     * markup.
+     */
+    noteContent?: ((node: GraphNode) => unknown) | undefined;
     /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
     notesLabel: string;
     /**

package/dist/graph/root/graph-root.js

@@ -27,6 +27,8 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.linkedFromLabel = 'Linked from {note}';
         this.links = [];
         this.linksToLabel = 'Links to {note}';
+        this.loading = false;
+        this.loadingLabel = 'Loading notes';
         this.movedDownLabel = 'Moved down';
         this.movedLeftLabel = 'Moved left';
         this.movedRightLabel = 'Moved right';
@@ -163,6 +165,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         super.willUpdate(changed);
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('loading', this.loading);
         this.toggleState('panel-open', this.noPanel && this.panelOpen);
         this.toggleState('searching', this.query.trim() !== '');
         this.toggleState('selected', this.active !== '');
@@ -389,14 +392,15 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         aria-selected=${chosen ? 'true' : 'false'}
         aria-posinset=${index + 1}
         aria-setsize=${total}
-        aria-description=${relation || nothing}
+        aria-describedby=${relation ? `note-${index}-relation` : nothing}
+        aria-label=${this.noteContent ? nameOf(entry.node) : nothing}
         @click=${() => {
                 this.cursor = index;
                 this.choose(index);
             }}
       >
-        <span part="note-name">${nameOf(entry.node)}</span>
-        ${relation ? html `<span part="note-relation" aria-hidden="true">${relation}</span>` : nothing}
+        <span part="note-name">${this.noteContent ? this.noteContent(entry.node) : nameOf(entry.node)}</span>
+        ${relation ? html `<span part="note-relation" id=${`note-${index}-relation`} aria-hidden="true">${relation}</span>` : nothing}
       </div>`;
         })}`;
     }
@@ -458,7 +462,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             data-scroller
             aria-label=${this.notesLabel}
             aria-activedescendant=${cursor}
-            aria-keyshortcuts="ArrowUp ArrowDown Home End PageUp PageDown Enter Space"
+            aria-busy=${this.loading ? 'true' : nothing}
             @keydown=${this.handleListKeydown}
             @scroll=${() => this.virtualize.measure()}
           >
@@ -467,7 +471,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             <div part="after" role="presentation" style="block-size: ${after}px"></div>
           </div>
           ${this.entries.length === 0
-            ? html `<div part="empty"><slot name="empty">${this.emptyLabel}</slot></div>`
+            ? this.loading
+                ? html `<div part="loading"><slot name="loading">${this.loadingLabel}</slot></div>`
+                : html `<div part="empty"><slot name="empty">${this.emptyLabel}</slot></div>`
             : nothing}
         </div>
       </div>
@@ -529,6 +535,13 @@ __decorate([
     words,
     property({ attribute: 'links-to-label' })
 ], HelixHeadlessGraph.prototype, "linksToLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessGraph.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-label' })
+], HelixHeadlessGraph.prototype, "loadingLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-down-label' })
@@ -551,6 +564,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-panel', reflect: true, type: Boolean })
 ], HelixHeadlessGraph.prototype, "noPanel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessGraph.prototype, "noteContent", void 0);
 __decorate([
     words,
     property({ attribute: 'notes-label' })

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

@@ -244,7 +244,8 @@ export declare class HelixHeadlessList extends HelixElement {
     /**
      * The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
      *
-     * Set it to start with rows selected. A row's value is its `value`, or its
+     * A press or a key writes it in row order, as Data Table does, whatever
+     * order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
      * words where it has none.
      */
     value: string;
@@ -328,6 +329,10 @@ export declare class HelixHeadlessList extends HelixElement {
     /**
      * Selects what a press or a key leaves, asking first. `helix-before-change`
      * carries the `value` it would leave, and `change` follows once it has moved.
+     *
+     * In row order, as Data Table and Table write theirs, whatever order the
+     * rows were chosen in: a press on the fourth row and then the first is
+     * `a,d`.
      */
     private choose;
     /** What `choiceValue` needs of this list for a row. */

package/dist/list/root/list-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, inRowOrder, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -262,7 +262,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (next === null) {
             return;
         }
-        requestValue(this, next, (value) => {
+        const ordered = inRowOrder(commaList(next), this.rows.map((row) => this.valueFor(row))).join(',');
+        requestValue(this, ordered, (value) => {
             this.value = value;
         });
     }