@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/qr-code/root/qr-code-root.js

@@ -4,10 +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, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, rgbOf } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
+import { qrSvg } from '../export.js';
+const QUIET = 4;
 const isFinder = (x, y, size) => {
     const near = (a, b) => a < 8 && b < 8;
     return near(x, y) || near(size - 1 - x, y) || near(x, size - 1 - y);
@@ -104,6 +106,51 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
             this.overflowed = '';
         }
     }
+    toSvg(size = 512) {
+        const code = this.renderRoot?.querySelector('svg[part="code"]');
+        const modules = code?.querySelector('[part="modules"]');
+        const finders = code?.querySelector('[part="finders"]');
+        if (!code || !modules || !finders) {
+            return '';
+        }
+        const ground = getComputedStyle(this).backgroundColor;
+        const clear = ground === '' || ground === 'transparent' || /^rgba\(.*,\s*0\)$/.test(ground);
+        return qrSvg({
+            background: clear ? '#ffffff' : rgbOf(ground),
+            box: Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0),
+            finderColor: rgbOf(getComputedStyle(finders).fill || '#000000'),
+            finders: finders.getAttribute('d') ?? '',
+            moduleColor: rgbOf(getComputedStyle(modules).fill || '#000000'),
+            modules: modules.getAttribute('d') ?? '',
+            quiet: QUIET,
+        }, size);
+    }
+    async toPng(size = 512) {
+        const markup = this.toSvg(size);
+        if (markup === '') {
+            return null;
+        }
+        const image = new Image();
+        image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+        await image.decode();
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        canvas.getContext('2d')?.drawImage(image, 0, 0, size, size);
+        return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+    }
+    async download(filename = 'qr-code.png', size = 512) {
+        const png = await this.toPng(size);
+        if (!png) {
+            return;
+        }
+        const url = URL.createObjectURL(png);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url));
+    }
     renderCode() {
         if (this.value === '') {
             return nothing;
@@ -113,7 +160,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
             return nothing;
         }
         const size = result.size;
-        const quiet = 4;
+        const quiet = QUIET;
         const box = size + quiet * 2;
         const finders = pathFor(result.data, 'square', 'finders');
         return svg `<svg

package/dist/radio/group/radio-group.d.ts

@@ -23,6 +23,13 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * the value until something is chosen, and where a reset returns. The two work
  * like `checked` and `defaultChecked`.
  *
+ * A choice sends its events in this order: `helix-select` from the radio, then,
+ * a microtask later and only if nobody refused it, `helix-before-change` from
+ * the group, and once the value has moved, `input` and `change`. The microtask
+ * is what lets a listener you add to the group after it connected refuse the
+ * `helix-select`. A native radio sends `input` and `change` in the same task as
+ * the click.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases RadioButtons, Choice group
@@ -69,6 +76,22 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * only `horizontal` has to be named.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether a reader can see and focus the answer and cannot change it. A
+     * read-only group still submits its value.
+     *
+     * React Aria's `isReadOnly`. A press on a radio is refused, and the arrow
+     * keys, Home and End leave focus on the answer, so Tab still reaches it and
+     * a reader hears it with the group's name. The group says `aria-readonly`.
+     * A script can still set `value`.
+     */
+    readOnly: boolean;
+    /**
+     * Keeps the keys that would move the answer from the keyboard controller
+     * while the group is read-only. A capture listener on the host runs ahead of
+     * the controller's own on the same target.
+     */
+    private readonly holdKeys;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     /** The radios, in light-DOM order. Client only: the server has no tree. */

package/dist/radio/group/radio-group.js

@@ -8,16 +8,28 @@ import { customElement, DisabledCascadeController, HelixFormElement, hostAria, K
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
+const MOVING_KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);
 let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.focusable = true;
+        this.readOnly = false;
+        this.holdKeys = (event) => {
+            if (this.readOnly && MOVING_KEYS.has(event.key)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+            }
+        };
         this.keys = new KeyboardNavigationController(this, { items: () => this.items });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
         this.handleSelection = (event) => {
             event.stopPropagation();
+            if (this.readOnly) {
+                event.preventDefault();
+                return;
+            }
             queueMicrotask(() => {
                 if (event.defaultPrevented) {
                     return;
@@ -80,16 +92,19 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('keydown', this.holdKeys, { capture: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('keydown', this.holdKeys, { capture: true });
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.adopt();
         hostAria(this.internals, { label: this.label, role: 'radiogroup' });
         this.internals.ariaRequired = this.required ? 'true' : null;
+        this.internals.ariaReadOnly = this.readOnly ? 'true' : null;
     }
     updated(changed) {
         super.updated(changed);
@@ -111,6 +126,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessRadioGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessRadioGroup.prototype, "readOnly", void 0);
 HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);

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

@@ -15,6 +15,9 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * A read-only rating displays a score, which is the most common use. It is
  * announced as a displayed value and does not look disabled.
  *
+ * With `clearable`, pressing the chosen score again, or Backspace or Delete on
+ * the marks, takes the rating back to unrated and sends `helix-clear`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -28,6 +31,7 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  *
  * @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
  * @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
+ * @event {Event} helix-clear - The rating went back to unrated, under `clearable`. Sent after `input` and `change`.
  * @event {Event} input - The score changed.
  *
  * @csspart feedback - The message that says what is wrong.
@@ -50,6 +54,12 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  */
 export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     protected readonly announcesInput = false;
+    /**
+     * Whether a reader can take the rating back to unrated: by pressing the
+     * chosen score again, or with Backspace or Delete. Zag's rating group
+     * clears the same way.
+     */
+    clearable: boolean;
     /**
      * How many marks there are.
      */
@@ -142,6 +152,8 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      */
     valueText: string;
     protected readonly aria: AriaForwardController;
+    /** @internal The element a missing name is checked on: the set of stars, so the name of one star does not count as the name of the rating. */
+    protected get namedControl(): HTMLElement | null;
     /**
      * The shape a consumer slotted, if they slotted one.
      *
@@ -236,8 +248,17 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * or off the element entirely, has asked for nothing.
      */
     private readonly handleDragStart;
+    /** The score a press began on, so releasing on the chosen one can clear it. */
+    private pressedOn;
+    /**
+     * Whether a drag has just chosen, so the click a browser may send after it
+     * does not choose again. Cleared a task later, since the click may not come.
+     */
+    private dragChose;
     private readonly handleDragMove;
     private readonly handleDragEnd;
+    /** Whether a press on `score` takes a clearable rating back to unrated. */
+    private clearsAt;
     private readonly handleDragCancel;
     /**
      * Reports the value, and whether the form may go without one.
@@ -260,6 +281,10 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      */
     private sync;
     private readonly handleOptionClick;
+    /** Backspace and Delete take a clearable rating back to unrated. */
+    private readonly handleClearKey;
+    /** Back to unrated, through the same cancelable request as a score, and said. */
+    private clear;
     private readonly handleOptionEnter;
     private readonly handleLeave;
     connectedCallback(): void;

package/dist/rating/root/rating-root.js

@@ -11,6 +11,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     constructor() {
         super(...arguments);
         this.announcesInput = false;
+        this.clearable = false;
         this.max = 5;
         this.min = 0;
         this.optionLabel = '{score} out of {max}';
@@ -50,8 +51,11 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             catch {
             }
             this.dragging = event.pointerId;
+            this.pressedOn = score;
             this.previewing = Number.parseFloat(score);
         };
+        this.pressedOn = undefined;
+        this.dragChose = false;
         this.handleDragMove = (event) => {
             if (this.dragging !== event.pointerId) {
                 return;
@@ -68,9 +72,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             this.dragging = undefined;
             this.previewing = undefined;
             const score = this.scoreAt(event.clientX);
-            if (score !== undefined) {
-                this.requestValue(score);
+            if (score === undefined) {
+                return;
+            }
+            this.dragChose = true;
+            setTimeout(() => {
+                this.dragChose = false;
+            }, 0);
+            if (this.clearsAt(score) && score === this.pressedOn) {
+                this.clear();
+                return;
             }
+            this.requestValue(score);
         };
         this.handleDragCancel = (event) => {
             if (this.dragging !== event.pointerId) {
@@ -80,8 +93,22 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             this.previewing = undefined;
         };
         this.handleOptionClick = (event) => {
+            if (this.dragChose) {
+                return;
+            }
             const option = event.currentTarget;
-            this.requestValue(option.dataset.score ?? '');
+            const score = option.dataset.score ?? '';
+            if (this.clearsAt(score)) {
+                this.clear();
+                return;
+            }
+            this.requestValue(score);
+        };
+        this.handleClearKey = (event) => {
+            if (this.clearable && (event.key === 'Backspace' || event.key === 'Delete')) {
+                event.preventDefault();
+                this.clear();
+            }
         };
         this.handleOptionEnter = (event) => {
             if (this.isDisabled) {
@@ -95,6 +122,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         };
         this.warned = false;
     }
+    get namedControl() {
+        return this.partNamed('marks');
+    }
     get floor() {
         if (!Number.isFinite(this.min)) {
             return 0;
@@ -156,10 +186,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         }
         return nearest;
     }
+    clearsAt(score) {
+        return this.clearable && this.value !== '' && Number(score) === Number(this.value);
+    }
     sync() {
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired(this.value === '', 'Choose a rating to continue.', 'marks');
     }
+    clear() {
+        if (this.value !== '' && !this.readOnly && !this.isDisabled && this.requestValue('')) {
+            this.dispatchEvent(new Event('helix-clear', { bubbles: true, composed: true }));
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('pointerleave', this.handleLeave);
@@ -226,6 +264,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
       data-slotted=${this.markSource ? '' : nothing}
       style=${`--rating-full: ${Math.floor(showing)}; --rating-part: ${showing - Math.floor(showing)}; --rating-steps: ${this.positions.length}`}
       @pointercancel=${this.handleDragCancel}
+      @keydown=${this.handleClearKey}
       @pointerdown=${this.handleDragStart}
       @pointermove=${this.handleDragMove}
       @pointerup=${this.handleDragEnd}
@@ -283,6 +322,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.value = fromNumber(count);
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessRating.prototype, "clearable", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "max", void 0);

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -33,7 +33,14 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * round numbers, and the range extends to them.
  *
  * The summary gives each series' correlation coefficient and its number of
- * points. The table has every number, and the drawing is `aria-hidden`.
+ * points. The table has every number, and the drawing is hidden from screen
+ * readers.
+ *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The left and right arrows move from row to row in the table's order, Home
+ * and End go to the first and the last, and the up and down arrows move among
+ * the series of a row. The tooltip sits on that point, the `live` part says the
+ * row in words, and Escape puts the tooltip away.
  *
  * Each point is a `<span>` placed by percentage over the drawing, as
  * `LineChart` places its end points, so points stay round when the drawing
@@ -52,9 +59,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @documentation https://fusion.dev/helix/components/scatter-chart
  *
  * @csspart gridline - One line across the plot, drawn when `gridlines` is set.
+ * @csspart live - The readout: a polite live region that says the row the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
- * @csspart plot - The drawing.
+ * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart point - One row, as a point.
  * @csspart point-active - A point in the row under the pointer. Set alongside `point`.
  * @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
@@ -68,6 +76,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the up and down arrows rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The row's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -149,7 +158,12 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * absent where there are fewer than three points or no spread to measure.
      */
     protected renderSummary(field: ScatterField): TemplateResult;
-    /** The row a pointer is resting on, over the point it is nearest. */
+    /**
+     * The row a pointer is resting on, over the point it is nearest.
+     *
+     * A row reached by key has no nearest point, so the bubble sits on the
+     * point of the series the keys rest on, or on the row's first point.
+     */
     protected renderTooltip(): TemplateResult | typeof nothing;
     /**
      * The point a pointer is nearest, within reach.

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -116,14 +116,17 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             const y = row.cells[column]?.value;
             return x === undefined || y === undefined ? [] : [[x, y, index]];
         }));
-        const all = pairs.flat();
+        const shown = ups.map((column) => this.showsSeries(name(column)));
+        const all = pairs.filter((_, depth) => shown[depth]).flat();
         const x = nice(extent(all.length > 0 ? all.map(([one]) => one) : [0]));
         const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
         const along = linear(x, [0, PLOT_WIDTH]);
         const up = linear(y, [PLOT_HEIGHT, 0]);
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
-            points: pairs.flatMap((series, depth) => series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))),
+            points: pairs.flatMap((series, depth) => shown[depth]
+                ? series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))
+                : []),
             x,
             xName: name(across),
             y,
@@ -156,8 +159,17 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
     renderPlot(field, along, up) {
         const at = this.pointer.at;
-        return html `<div aria-hidden="true" id=${CHART_PLOT} part="plot">
+        return html `<div
+      aria-describedby=${this.named ? 'helix-chart-summary' : nothing}
+      aria-label=${this.named || nothing}
+      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
+      id=${CHART_PLOT}
+      part="plot"
+      role="application"
+      tabindex="0"
+    >
       <svg part="svg"
+        aria-hidden="true"
         preserveAspectRatio="none"
         viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
         xmlns="http://www.w3.org/2000/svg"
@@ -172,6 +184,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
       ${field.points.map((point) => {
             const index = seriesIndex(point.depth);
             return html `<span
+          aria-hidden="true"
           data-series=${index}
           ?data-active=${point.row === at}
           part="point${point.row === at ? ' point-active' : ''}"
@@ -189,13 +202,18 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             return `${name} / ${field.xName}: ${pairs.length} ${this.pointsLabel}${strength}`;
         });
         const named = this.named ? `${this.named}. ` : '';
-        return html `<p part="summary">${named}${clauses.join('; ')}.</p>`;
+        return html `<p id="helix-chart-summary" part="summary">${named}${clauses.join('; ')}.</p>`;
     }
     renderTooltip() {
         const at = this.pointer.at;
-        const point = this.nearest;
+        const column = this.pointer.column;
+        const depth = column === undefined ? -1 : this.plottedColumns.indexOf(column) - 1;
+        const point = this.nearest?.row === at && !this.pointer.keyed
+            ? this.nearest
+            : (this.drawn.find((one) => one.row === at && one.depth === depth) ??
+                this.drawn.find((one) => one.row === at));
         if (at < 0 || !point) {
-            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'));
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
             dir: isRtl(this) ? 'rtl' : 'ltr',
@@ -203,7 +221,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             placement: 'top',
             x: `${point.x}%`,
             y: `${point.y}%`,
-        }, (cell) => this.seriesOf(cell));
+        }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
 __decorate([

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

@@ -1,5 +1,6 @@
 import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { type HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
 declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -17,6 +18,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * `Select` owns the value, passes it down to the listbox, and takes changes
  * back, so the value lives in one place.
  *
+ * Set `valueContent` to draw the trigger's content from the chosen options,
+ * and several chosen options are written as a list in the reader's language.
+ *
  * In the open list the arrow keys, Home, End, PageUp, PageDown and typed
  * letters move the highlight, and Enter, Space or a click chooses it and
  * closes the list. Tab closes the list and moves on. On the closed trigger,
@@ -103,6 +107,17 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Shown on the trigger while nothing is chosen.
      */
     placeholder: string;
+    /**
+     * What the trigger shows for the chosen options: a function given them, in
+     * the order they appear, that returns text, an element or a Lit template.
+     *
+     * For a trigger that shows more than the words, an avatar beside a name or a
+     * count of a long set, as React Aria's `SelectValue` takes children. The
+     * trigger is named by what this draws, so keep the words in it. Nothing
+     * chosen still shows `placeholder`. A property only, there being no way to
+     * write a function in markup.
+     */
+    valueContent?: ((chosen: readonly HelixHeadlessOption[]) => unknown) | undefined;
     /**
      * Which option is chosen, as an index, or `-1` where none is.
      *
@@ -168,6 +183,13 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * the commit creates the text node it needs.
      */
     private get display();
+    /** The chosen options, in the order they appear. None on a server or while hydrating. */
+    private get chosenOptions();
+    /**
+     * What the trigger shows, behind a seam: what `value-content` draws for the
+     * chosen options, or their words, or the placeholder.
+     */
+    protected renderValue(): unknown;
     /** Where the highlight goes when the list opens, set by the key that opened it. */
     private opening;
     /**
@@ -187,6 +209,8 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Made on connection, there being no `MutationObserver` on a server.
      */
     private watchers;
+    /** A link option, once followed, closes the panel as a choice does. */
+    private readonly handleLinkFollowed;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Opens the list with the highlight where the opening key says. */

package/dist/select/root/select-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -43,6 +43,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.opening = 'selected';
         this.seen = new Set();
         this.watchers = [];
+        this.handleLinkFollowed = (event) => {
+            afterLinkFollowed(event, () => this.requestOpen(false));
+        };
         this.handleChange = (event) => {
             const next = event.detail.value;
             if (!this.requestValue(next)) {
@@ -105,16 +108,23 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     get display() {
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
-        const words = optionsAmong(this.knownChildren)
-            .filter((option) => chosen.has(option.value))
-            .map((option) => option.text);
+        const words = this.chosenOptions.map((option) => option.text);
         if (words.length > 0) {
-            return words.join(', ');
+            return new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(words);
         }
         return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
     }
+    get chosenOptions() {
+        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        return optionsAmong(this.knownChildren).filter((option) => chosen.has(option.value));
+    }
+    renderValue() {
+        const chosen = this.chosenOptions;
+        return this.valueContent && chosen.length > 0 ? this.valueContent(chosen) : this.display;
+    }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('helix-select', this.handleLinkFollowed);
         const words = new MutationObserver(() => this.requestUpdate());
         words.observe(this, {
             attributeFilter: ['label', 'value'],
@@ -128,6 +138,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleLinkFollowed);
         for (const watcher of this.watchers) {
             watcher.disconnect();
         }
@@ -252,7 +263,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         @keydown=${this.handleTriggerKeydown}
       >
         <slot name="start"></slot>
-        <span part="value" id="value">${this.display}</span>
+        <span part="value" id="value">${this.renderValue()}</span>
         ${''}
         <slot name="end"></slot>
         ${''}
@@ -283,6 +294,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSelect.prototype, "valueContent", void 0);
 HelixHeadlessSelect = __decorate([
     customElement('helix-headless-select')
 ], HelixHeadlessSelect);

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

@@ -15,12 +15,22 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * There is no `shape` property. Whether a placeholder is a line, a block, or a
  * circle is presentation, which belongs to the styled tier.
  *
+ * **Put the real content inside and set `loading`, and the skeleton takes its
+ * size.** While `loading` is set the content is inert, the host is
+ * `aria-busy`, and the styled tier hides the content and paints the
+ * placeholder over its box, so nothing moves when the content arrives. Take
+ * `loading` off and the content is shown as it is. An empty skeleton is a
+ * placeholder of its own size, as before.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
  * @aliases Placeholder, Shimmer, Ghost
  * @documentation https://fusion.dev/helix/components/skeleton
  *
+ * @slot - The content the skeleton stands in for, which sizes it. Optional.
+ *
+ * @csspart content - The box around the content, inert while `loading`.
  * @csspart skeleton - The placeholder shape.
  */
 export declare class HelixHeadlessSkeleton extends HelixElement {
@@ -31,7 +41,22 @@ export declare class HelixHeadlessSkeleton extends HelixElement {
      * Absent hides the placeholder from screen readers.
      */
     label: string;
+    /**
+     * Whether the content inside is still loading, which keeps it inert and
+     * draws the placeholder over it.
+     *
+     * Absent shows the content. An empty skeleton is a placeholder whatever
+     * this says. Reflected, because the styled tier hides the content on it.
+     */
+    loading: boolean;
+    /**
+     * Whether the skeleton holds content, read off its children where they can
+     * be known. Not on a server, where an unlabeled skeleton is taken for an
+     * empty one until the page has its children.
+     */
+    private get wraps();
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {