@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -9,11 +9,19 @@ import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 const REACH = 24;
-const coefficient = new Intl.NumberFormat(undefined, {
-    maximumFractionDigits: 2,
-    minimumFractionDigits: 2,
-    signDisplay: 'exceptZero',
-});
+const COEFFICIENTS = new Map();
+const coefficientIn = (locale) => {
+    let found = COEFFICIENTS.get(locale);
+    if (!found) {
+        found = new Intl.NumberFormat(locale || undefined, {
+            maximumFractionDigits: 2,
+            minimumFractionDigits: 2,
+            signDisplay: 'exceptZero',
+        });
+        COEFFICIENTS.set(locale, found);
+    }
+    return found;
+};
 const nice = ([low, high]) => {
     if (low === high) {
         return [low - 1, high + 1];
@@ -108,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,
@@ -130,7 +141,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         <div id=${CHART_PLOT} part="plot"></div>
       </div>`;
         }
-        const format = formatNumbers('');
+        const format = formatNumbers(this.locale);
         const along = linear(field.x, [0, PLOT_WIDTH]);
         const up = linear(field.y, [PLOT_HEIGHT, 0]);
         return html `<div dir="ltr" part="plane">
@@ -148,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"
@@ -164,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' : ''}"
@@ -177,17 +198,22 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const clauses = field.yNames.map((name, depth) => {
             const pairs = field.pairs[depth] ?? [];
             const r = correlation(pairs);
-            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficient.format(r)}`;
+            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficientIn(this.locale).format(r)}`;
             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',
@@ -195,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,17 @@ 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,
+ * ArrowDown, Enter and Space open the list on the chosen option, ArrowUp opens
+ * it on the chosen or last option, Home and End open it on the first or last,
+ * and typed letters choose the option whose words start with them, as a native
+ * `<select>` does.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -25,6 +37,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  *
  * @slot - The options, and any groups of them.
  * @slot end - Content after the chosen value, such as a count, a unit, or a clear button.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - The hint, for content richer than plain text.
  * @slot indicator - The icon on the trigger that shows it opens, usually a caret.
  * @slot label - The label, for content richer than plain text.
@@ -34,8 +47,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @event {HelixBeforeChangeEvent} helix-before-change - Relayed from the listbox when the value is about to change. Cancelable: canceling it stops the change and leaves the decision to you.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
+ * @event {HelixFilterEvent} helix-filter - Fired as the user types in the filter field of a `filterable` select, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and filter the options yourself.
  * @event {Event} input - Fired after the value changes.
- * @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
  *
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart hint - Help under the trigger.
@@ -93,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.
      *
@@ -158,10 +183,73 @@ 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;
+    /**
+     * The values of the options seen on the last update, so an option that
+     * leaves can be told apart from one that has not arrived yet.
+     */
+    private seen;
+    /**
+     * Hears an option's words change, which no slot reports, and the host's
+     * `aria-labelledby` change, which `triggerNames` reads.
+     *
+     * The trigger shows the chosen option's words, read at render time. A slot
+     * reports an option arriving or leaving and says nothing when the text of
+     * one already there changes, so a relabeled option left the old words on the
+     * trigger. `label` and `value` are attributes that change the words too.
+     *
+     * 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. */
+    private openAt;
     /** Closes the list and puts focus back where it came from. */
     private close;
     private readonly handleChange;
+    /**
+     * The keys of the closed trigger.
+     *
+     * Letters choose without opening, the way a native `<select>` and React
+     * Aria's Select do, so a reader who knows the answer types it. A Space in the
+     * middle of those letters is one of them. With `multiple`, a letter opens the
+     * list on the match instead, because adding to a set is a choice the reader
+     * makes in the list.
+     */
     private readonly handleTriggerKeydown;
+    /**
+     * Tab closes the list and lets focus move on, as a native `<select>` does.
+     *
+     * Measured before this: Tab moved focus to the next control and left the
+     * panel open over the page, because the panel closes on a press outside or
+     * on Escape and nothing closed it when focus left.
+     */
+    private readonly handleListKeydown;
+    /**
+     * Takes `<helix-option selected>` as the default value, and an option that
+     * has left out of the value.
+     *
+     * The first is what a native `<select>` does with `<option selected>`, and
+     * what `Option.defaultSelected` says: a form reset returns to it. A
+     * `default-value` on the select wins.
+     *
+     * The second keeps the trigger and the form in agreement. Measured before
+     * this: removing the chosen option made the trigger say "Choose" while the
+     * form still submitted the removed value. Only an option seen before is
+     * dropped, so a value set ahead of options that load later is kept.
+     */
+    private reconcileOptions;
     /** Reports the answer and the verdict on it. */
     private sync;
     protected willUpdate(changed: PropertyValues): void;
@@ -198,8 +286,10 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * native `<select>` says both, and this names the trigger by both, the label
      * and then the value, in that order.
      *
-     * A consumer's own `aria-labelledby` on the host wins, carried to the trigger
-     * by `AriaForwardController`, so nothing is written here to fight it.
+     * A consumer's own `aria-labelledby` on the host wins, and so does a
+     * `<label>` that names the host where there is no `label`. Both are carried
+     * to the trigger by `AriaForwardController`, which reads the value after
+     * them, so nothing is written here to fight it.
      */
     private get triggerNames();
     protected render(): TemplateResult;

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, } 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';
@@ -16,6 +16,10 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
+            labelledByAfter: () => {
+                const value = this.partNamed('value');
+                return value ? [value] : [];
+            },
             target: () => this.partNamed('trigger'),
         });
         this.emptyText = 'No matches';
@@ -36,6 +40,12 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
+        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)) {
@@ -48,9 +58,39 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             event.stopPropagation();
         };
         this.handleTriggerKeydown = (event) => {
-            if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            const listbox = this.listbox;
+            if (typesCharacter(event) && (event.key !== ' ' || listbox?.typing)) {
+                event.preventDefault();
+                const match = listbox?.typeaheadTo(event.key);
+                if (match === undefined) {
+                    return;
+                }
+                if (this.multiple) {
+                    this.opening = 'selected';
+                    this.requestOpen(true);
+                }
+                else {
+                    this.requestValue(match);
+                }
+                return;
+            }
+            const opens = {
+                ' ': 'selected',
+                ArrowDown: 'selected',
+                ArrowUp: 'last',
+                End: 'last',
+                Enter: 'selected',
+                Home: 'first',
+            };
+            const where = opens[event.key];
+            if (where !== undefined) {
                 event.preventDefault();
-                this.requestOpen(true);
+                this.openAt(where === 'last' && event.key === 'ArrowUp' && this.value !== '' ? 'selected' : where);
+            }
+        };
+        this.handleListKeydown = (event) => {
+            if (event.key === 'Tab' && this.open) {
+                this.requestOpen(false);
             }
         };
     }
@@ -58,10 +98,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.listbox?.selectedIndex ?? -1;
     }
     set selectedIndex(at) {
-        const listbox = this.listbox;
-        if (listbox) {
-            listbox.selectedIndex = at;
-        }
+        this.value = this.listbox?.options[at]?.value ?? '';
     }
     get type() {
         return this.multiple ? 'select-multiple' : 'select-one';
@@ -71,14 +108,46 @@ 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'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        const naming = new MutationObserver(() => this.requestUpdate());
+        naming.observe(this, { attributeFilter: ['aria-labelledby'] });
+        this.watchers = [words, naming];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleLinkFollowed);
+        for (const watcher of this.watchers) {
+            watcher.disconnect();
+        }
+        this.watchers = [];
+    }
+    openAt(where) {
+        this.opening = where;
+        this.requestOpen(true);
+    }
     close() {
         if (!this.open) {
             return;
@@ -86,6 +155,24 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.requestOpen(false);
         this.partNamed('trigger')?.focus();
     }
+    reconcileOptions() {
+        const options = optionsAmong(this.knownChildren);
+        if (this.defaultValue === '' && !this.hasAttribute('default-value')) {
+            const declared = options
+                .filter((option) => option.defaultSelected)
+                .map((option) => option.value);
+            if (declared.length > 0) {
+                this.defaultValue = this.multiple ? declared.join(',') : (declared.at(-1) ?? '');
+            }
+        }
+        const present = new Set(options.map((option) => option.value));
+        const held = this.value === '' ? [] : this.value.split(',');
+        const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
+        this.seen = present;
+        if (gone.length > 0) {
+            this.value = held.filter((value) => !gone.includes(value)).join(',');
+        }
+    }
     sync() {
         if (this.multiple) {
             reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
@@ -98,6 +185,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
+        if (this.childrenKnown) {
+            this.reconcileOptions();
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -109,6 +199,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.linkHost();
         if (this.open) {
             if (changed.has('open')) {
+                this.listbox?.highlight(this.opening);
+                this.opening = 'selected';
                 this.listbox?.focus();
             }
         }
@@ -129,7 +221,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       .value=${this.value}
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
+      manual
       aria-label=${this.label || nothing}
+      @keydown=${this.handleListKeydown}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
@@ -147,7 +241,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     </slot>`;
     }
     get triggerNames() {
-        if (this.hasAttribute('aria-labelledby')) {
+        const outside = (this.internals.labels?.length ?? 0) > 0 && !this.labeled;
+        if (this.hasAttribute('aria-labelledby') || outside) {
             return nothing;
         }
         return this.labeled ? `${this.labelId} value` : 'value';
@@ -168,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>
         ${''}
@@ -199,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

@@ -4,23 +4,59 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary A placeholder shown in place of content that is still loading.
  *
  * @description
- * Sets `aria-busy` and a polite live region, so a screen reader announces that
- * the region is loading. Both are set through `ElementInternals`, which writes
- * no attributes.
+ * A skeleton is hidden from screen readers unless it has a `label`. An empty
+ * placeholder has nothing to say, and a page of them would be a page of
+ * unnamed shapes. Tell a screen reader that a region is loading on the region
+ * itself: set `aria-busy="true"` on it while it loads, and put a `Loader` or a
+ * status message in it. Set `label` on one skeleton to have it read out by
+ * name, such as "Loading profile", when a reader reaches it. The role and the
+ * name are set through `ElementInternals`, which writes no attributes.
  *
  * 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 {
+    /**
+     * What is loading, read out as the placeholder's name, such as "Loading
+     * profile".
+     *
+     * 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 {

package/dist/skeleton/root/skeleton-root.js

@@ -4,18 +4,47 @@ 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, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.loading = false;
+    }
+    get wraps() {
+        return (this.childrenKnown &&
+            [...this.childNodes].some((node) => node.nodeType === 1 || (node.textContent ?? '').trim() !== ''));
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.internals.ariaBusy = 'true';
-        this.internals.ariaLive = 'polite';
+        this.internals.ariaBusy = this.loading ? 'true' : null;
+        if (this.label) {
+            hostAria(this.internals, { label: this.label, role: 'progressbar' });
+            this.internals.ariaHidden = null;
+        }
+        else {
+            hostAria(this.internals, { label: '', role: '' });
+            this.internals.ariaHidden = this.wraps ? null : 'true';
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     render() {
-        return html `<span part="skeleton"></span>`;
+        return html `<span part="content" ?inert=${this.loading}
+        ><slot @slotchange=${() => this.requestUpdate()}></slot></span
+      ><span part="skeleton"></span>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessSkeleton.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSkeleton.prototype, "loading", void 0);
 HelixHeadlessSkeleton = __decorate([
     customElement('helix-headless-skeleton')
 ], HelixHeadlessSkeleton);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -75,6 +75,16 @@ export declare class HelixHeadlessSkipLink extends HelixElement {
      * region.
      */
     private readonly skip;
+    /** The `href` the last warning was for, so a page hears once per target. */
+    private missed;
+    /**
+     * Says so when an in-page `href` names nothing.
+     *
+     * Asked on a press and not on connection: the link is first in the
+     * document, so its target is usually parsed or rendered after it, and an
+     * early check would warn about a page that is still arriving.
+     */
+    private reportMissing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/skip-link/root/skip-link-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 { customElement, elementById, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
@@ -18,6 +18,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
             }
             const target = this.target;
             if (!target) {
+                this.reportMissing();
                 return;
             }
             event.preventDefault();
@@ -29,6 +30,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
             target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
             target.focus();
         };
+        this.missed = '';
     }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
@@ -40,6 +42,18 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
         }
         return elementById(this, decodeURIComponent(this.href.slice(1)), { orDocument: true });
     }
+    reportMissing() {
+        if (!this.href.startsWith('#') || this.href.length < 2 || this.missed === this.href) {
+            return;
+        }
+        this.missed = this.href;
+        reportRuntime({
+            kind: 'missing-target',
+            message: `<${this.localName} href="${this.href}"> names no element in its tree, so the press ` +
+                'moves focus nowhere. Give the main content that id, or point `href` at the id it has.',
+            tag: this.localName,
+        });
+    }
     render() {
         return html `<a part="link" href=${this.href} @click=${this.skip}><slot>${this.label}</slot></a>`;
     }