@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -24,10 +24,18 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * letters move it to the next option whose words start with them. In a
  * single-choice list the highlight is the choice unless `manual` is set; then
  * Enter, Space or a click chooses. With `multiple`, Space toggles the
- * highlighted option, Shift with an arrow adds the option it moves to, and
+ * highlighted option, Shift with an arrow adds the option it moves to, Shift
+ * with Home or End adds every option from the highlight to that end, and
  * Control+A or Command+A chooses every option, or none where all are chosen.
  * In a filter field, Space, Home, End and letters edit the text.
  *
+ * An option with `href` is a link: Enter or a press follows it and selects
+ * nothing, and moving onto it with the arrows does not follow it.
+ *
+ * As a filter narrows the list, a screen reader hears how many options are
+ * left, such as "3 results", from `result-label` and `results-label`. A filter
+ * that leaves none says `empty-text`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -35,10 +43,12 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @documentation https://fusion.dev/helix/components/listbox
  *
  * @slot - The options, and any groups of them.
+ * @slot empty - What the list shows when it has no options to show, for content richer than `empty-text`.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot filter-icon - The icon in the filter field. Defaults to a magnifying glass.
  * @slot hint - The hint, for content richer than plain text.
  * @slot label - The label, for content richer than plain text.
+ * @slot loading - What the list shows while its options load, for content richer than `loading-text`.
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
@@ -52,12 +62,14 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart hint - Help under the list.
  * @csspart items - The list of options.
  * @csspart label - The label above the list.
- * @csspart live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty and loading text, and how many options a filter left, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the options load.
  * @csspart search - The region that holds the filter field.
  * @csspart search-field - The filter field.
  *
+ * @cssstate empty - The list has no options to show: none were given, or the filter hid every one.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;
@@ -104,6 +116,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * own search boxes would be three copies of one field.
      */
     filterable: boolean;
+    /**
+     * How long typing in the filter field rests before the list is filtered, in
+     * milliseconds. `0` filters on every keystroke.
+     *
+     * For a list filtered on a server, where `helix-filter` starts a request: a
+     * reader typing a word sends one request for the word, not one for each
+     * letter. Enter and the arrow keys filter at once on what is typed, so they
+     * act on the list the reader expects.
+     */
+    filterDelay: number;
     /**
      * Placeholder text for the filter field.
      */
@@ -121,6 +143,20 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Whether more than one option can be chosen.
      */
     multiple: boolean;
+    /**
+     * What a screen reader hears when a filter leaves one option. `{count}` is
+     * the count.
+     */
+    resultLabel: string;
+    /**
+     * What a screen reader hears when a filter leaves any other number of
+     * options. `{count}` is the count.
+     *
+     * **Two sentences, chosen by `Intl.PluralRules`**, which is Data Table's
+     * pair: a language with more forms than two picks the one for its `one` and
+     * writes the rest here.
+     */
+    resultsLabel: string;
     /**
      * Which option the keyboard is on, which is not what is chosen.
      */
@@ -189,6 +225,18 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * ArrowUp, and Combobox moves the highlight off the list onto its create row.
      */
     highlight(where: 'first' | 'last' | 'none' | 'selected'): void;
+    /**
+     * Says how many options a filter left, in the live region.
+     *
+     * **A reader typing into a filter cannot see the list narrow**, and React
+     * Aria and Web Awesome both say the count as it changes. Only "No matches"
+     * was said here, so a query that left forty options and one that left one
+     * sounded the same. Said when the filter changes and the count with it, so
+     * a keystroke that leaves the same options says nothing new. An empty filter
+     * says nothing, being the list as it was given; no matches is `empty-text`,
+     * which the region says in place of this.
+     */
+    private tell;
     /**
      * @internal Moves the highlight to the option whose words start with the
      * letters typed, and returns its value, or nothing where none matches.
@@ -376,6 +424,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * their answer moved when it did not is worse than telling them nothing.
      */
     private readonly handleFilter;
+    /** The filter waiting out `filterDelay`, if any. */
+    private readonly filtering;
+    /** Filters on what the field holds, and puts the field back where that was refused. */
+    private takeFilter;
+    /** Filters at once on a filter still waiting out `filterDelay`. */
+    private flushFilter;
     /** Requests a new filter, and returns whether the request went through. */
     requestFilter(next: string): boolean;
     /**
@@ -414,6 +468,23 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * cannot change.
      */
     protected renderFilterIcon(): TemplateResult;
+    /**
+     * Whether there is anything to show.
+     *
+     * Showing nothing is not the same as empty. A filter that hides every option
+     * is empty, and one with no filter and no options is empty too, but a list
+     * still waiting on its options is neither.
+     */
+    private get showsOptions();
+    /**
+     * The empty or loading line, with a slot for each so either can be richer
+     * than its text.
+     *
+     * **The text is the slot's fallback**, which is this library's rule for a
+     * content property, so `empty-text` still shows where nothing is slotted and
+     * the live region still says it.
+     */
+    protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/listbox/root/listbox-root.js

@@ -4,13 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, countLabel, customElement, DelayController, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessOptionGroup } from '../../option/group/option-group.js';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
+import { rangeAdd } from '../range.js';
 const MOVES = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp']);
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 const PAGE = 10;
@@ -68,9 +69,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.emptyText = 'No matches';
         this.filterState = undefined;
         this.filterable = false;
+        this.filterDelay = 0;
         this.filterLabel = 'Filter';
         this.manual = false;
         this.multiple = false;
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.activeValue = '';
         this.parked = false;
         this.typeahead = new Typeahead();
@@ -82,6 +86,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             items: () => this.options,
         });
         this.handleSelection = (event) => {
+            if (event.detail.href !== undefined) {
+                return;
+            }
             event.stopPropagation();
             if (event.defaultPrevented) {
                 return;
@@ -96,7 +103,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             }
             const typing = this.forwarded || event.composedPath()[0] === this.partNamed('search-field');
             if (event.key === 'Enter' || (event.key === ' ' && !typing && !this.typeahead.typing())) {
-                if (this.activeValue !== '') {
+                const link = shown.find((option) => option.value === this.activeValue && Boolean(option.href));
+                if (link !== undefined) {
+                    event.preventDefault();
+                    if (event.key === 'Enter') {
+                        link.select(event);
+                    }
+                }
+                else if (this.activeValue !== '') {
                     event.preventDefault();
                     this.choose(this.activeValue);
                 }
@@ -155,6 +169,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             const target = shown[next];
             if (target) {
                 this.arrive(target.value);
+                const ranged = event.key === 'Home' || event.key === 'End';
+                if (this.multiple && !typing && event.shiftKey && ranged) {
+                    const taken = rangeAdd(this.values, shown.map((option) => option.value), at, next);
+                    if (taken) {
+                        this.requestValue(taken.join(','));
+                    }
+                    return;
+                }
                 if (this.multiple && !typing && event.shiftKey && !this.values.includes(target.value)) {
                     this.choose(target.value);
                 }
@@ -163,16 +185,27 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.handleFilter = (event) => {
             event.stopPropagation();
             const control = event.target;
-            this.requestFilter(control.value);
-            if (control.value !== this.filter) {
-                control.value = this.filter;
+            this.filtering.cancel();
+            if (this.filterDelay > 0) {
+                this.filtering.start(this.filterDelay, () => this.takeFilter(control));
+                return;
             }
+            this.takeFilter(control);
         };
+        this.filtering = new DelayController(this, { renders: false });
         this.handleFilterKeydown = (event) => {
-            if (event.key === 'Escape' && this.filter !== '') {
+            if (event.key === 'Enter' || FIELD_MOVES.has(event.key)) {
+                this.flushFilter();
+            }
+            if (event.key === 'Escape' && (this.filter !== '' || this.filtering.pending)) {
                 event.stopPropagation();
                 event.preventDefault();
+                this.filtering.cancel();
                 this.requestFilter('');
+                const control = this.partNamed('search-field');
+                if (control && control.value !== this.filter) {
+                    control.value = this.filter;
+                }
                 return;
             }
             if (!FIELD_MOVES.has(event.key)) {
@@ -218,6 +251,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             this.place();
         }
     }
+    tell(changed) {
+        if (!changed.has('filter') || !this.hasUpdated) {
+            return;
+        }
+        const count = this.shown.length;
+        if (this.filter.trim() === '' || count === 0) {
+            this.announced = '';
+            return;
+        }
+        this.announced = countLabel(count, this.resultLabel, this.resultsLabel, this.lang);
+    }
     typeaheadTo(key) {
         const shown = this.shown.filter((option) => !option.disabled);
         const from = shown.findIndex((option) => option.value === this.currentValue);
@@ -294,7 +338,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     arrive(value) {
         this.parked = false;
         this.activeValue = value;
-        if (!this.multiple && !this.manual && !this.forwarded) {
+        const link = this.options.some((option) => option.value === value && Boolean(option.href));
+        if (!this.multiple && !this.manual && !this.forwarded && !link) {
             this.choose(value);
         }
     }
@@ -423,7 +468,10 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         if (this.childrenKnown) {
             this.place();
+            this.tell(changed);
         }
+        this.toggleState('empty', !this.showsOptions);
+        this.toggleState('loading', this.loading);
     }
     seedDeclared() {
         if (this.owned || this.defaultValue !== '' || this.hasAttribute('default-value')) {
@@ -453,6 +501,16 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.sync();
         this.linkActive();
     }
+    takeFilter(control) {
+        this.filtering.cancel();
+        this.requestFilter(control.value);
+        if (control.value !== this.filter) {
+            control.value = this.filter;
+        }
+    }
+    flushFilter() {
+        this.filtering.flush();
+    }
     requestFilter(next) {
         if (next === this.filter) {
             return true;
@@ -480,12 +538,23 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
       </svg>
     </slot>`;
     }
-    render() {
-        const shown = this.counted && !this.loading
+    get showsOptions() {
+        return this.counted && !this.loading
             ? this.filter === ''
                 ? this.options.length > 0
                 : this.hasMatches
             : true;
+    }
+    renderStatus(hasContent) {
+        if (!this.loading && hasContent) {
+            return nothing;
+        }
+        return this.loading
+            ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
+            : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
+    }
+    render() {
+        const shown = this.showsOptions;
         return html `${this.renderGroupLabel()}
       ${this.filterable
             ? html `<div part="search">
@@ -542,6 +611,9 @@ __decorate([
 __decorate([
     property({ attribute: 'filterable', reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: 'filter-delay', type: Number })
+], HelixHeadlessListbox.prototype, "filterDelay", void 0);
 __decorate([
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
@@ -551,6 +623,12 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessListbox.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessListbox.prototype, "resultsLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessListbox.prototype, "activeValue", void 0);

package/dist/loader/busy.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Marks a region busy for as long as something is loading into it, and
+ * counts, so two loaders in one region do not clear each other.
+ *
+ * Beside the family's `index.ts`, because which element is busy and how many
+ * claims it holds is bookkeeping about elements, not about a loader's
+ * template.
+ */
+/**
+ * Adds a claim on the region, setting `aria-busy="true"` on the first.
+ *
+ * Only an `aria-busy` this file wrote is ever taken off again: a region the
+ * page marked busy itself keeps its own attribute.
+ */
+export declare const claimBusy: (region: Element) => void;
+/** Takes a claim back, and the attribute with the last one. */
+export declare const releaseBusy: (region: Element) => void;

package/dist/loader/busy.js

@@ -0,0 +1,24 @@
+const CLAIMS = new WeakMap();
+export const claimBusy = (region) => {
+    const held = CLAIMS.get(region) ?? 0;
+    if (held === 0 && region.getAttribute('aria-busy') === 'true') {
+        return;
+    }
+    CLAIMS.set(region, held + 1);
+    if (held === 0) {
+        region.setAttribute('aria-busy', 'true');
+    }
+};
+export const releaseBusy = (region) => {
+    const held = CLAIMS.get(region);
+    if (held === undefined) {
+        return;
+    }
+    if (held <= 1) {
+        CLAIMS.delete(region);
+        region.removeAttribute('aria-busy');
+    }
+    else {
+        CLAIMS.set(region, held - 1);
+    }
+};

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

@@ -19,6 +19,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * a `role` attribute on the host would be missing from React server-rendered
  * markup.
  *
+ * **`for` names the region being loaded**, and the loader sets
+ * `aria-busy="true"` on it for as long as the loader is on the page, so a
+ * screen reader waits for the region rather than reading it half filled. Two
+ * loaders in one region hold it busy until the last one leaves.
+ *
+ * **`delay` keeps a quick load from flashing a loader.** The loader stays
+ * hidden, and silent, for that many milliseconds, and appears only if the work
+ * is still going.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -33,11 +42,39 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart track - The full circle behind the indicator.
  */
 export declare class HelixHeadlessLoader extends HelixElement {
+    /**
+     * How long the loader waits before it shows, in milliseconds, so work that
+     * finishes quickly never flashes one.
+     *
+     * Absent shows it at once. Hidden in the served markup too, so a page that
+     * loads quickly never draws it.
+     */
+    delay: number;
+    /**
+     * The id of the region being loaded, which is marked `aria-busy` while the
+     * loader is on the page.
+     *
+     * Names an element in the same tree. In React it arrives as a property, the
+     * way `Tooltip.for` does.
+     */
+    for: string;
     /**
      * The loader's name, announced by screen readers while the work is in
      * progress.
      */
     label: string;
+    /** The wait `delay` asks for, and whether it has run out. */
+    private readonly due;
+    /** The region this loader marked busy, so it is the one released. */
+    private region;
+    /** Whether the loader is still waiting out its `delay`. */
+    private get waiting();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Marks the region `for` names busy, releasing one it named before. */
+    private mark;
+    private release;
+    protected updated(changed: PropertyValues<this>): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/loader/root/loader-root.js

@@ -4,27 +4,76 @@ 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, hostAria } from '@fusion.dev/helix-core';
+import { customElement, DelayController, elementById, HelixElement, hostAria, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { claimBusy, releaseBusy } from '../busy.js';
 let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     constructor() {
         super(...arguments);
+        this.delay = 0;
+        this.for = '';
         this.label = 'Loading';
+        this.due = new DelayController(this);
+        this.region = null;
+    }
+    get waiting() {
+        return this.delay > 0 && !this.due.elapsed;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.delay > 0 && !this.due.elapsed) {
+            this.due.start(this.delay);
+        }
+        requestAnimationFrame(() => this.mark());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.release();
+    }
+    mark() {
+        const region = this.isConnected && this.for !== '' ? elementById(this, this.for) : null;
+        if (region === this.region) {
+            return;
+        }
+        this.release();
+        if (region) {
+            claimBusy(region);
+            this.region = region;
+        }
+    }
+    release() {
+        if (this.region) {
+            releaseBusy(this.region);
+            this.region = null;
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('for') && changed.get('for') !== undefined) {
+            this.mark();
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'progressbar' });
         this.internals.ariaBusy = 'true';
+        this.internals.ariaHidden = this.waiting ? 'true' : null;
     }
     render() {
-        return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true">
+        return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true" ?hidden=${this.waiting}>
         <circle part="track" cx="12" cy="12" r="10" fill="none" />
         <circle part="indicator" cx="12" cy="12" r="10" fill="none" />
       </svg>
-      <span part="mark" aria-hidden="true"><slot></slot></span>`;
+      <span part="mark" aria-hidden="true" ?hidden=${this.waiting}><slot></slot></span>`;
     }
 };
+__decorate([
+    property({ type: Number })
+], HelixHeadlessLoader.prototype, "delay", void 0);
+__decorate([
+    property()
+], HelixHeadlessLoader.prototype, "for", void 0);
 __decorate([
     property()
 ], HelixHeadlessLoader.prototype, "label", void 0);

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

@@ -22,6 +22,8 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
+ * @slot label - A visible label. Its words name the meter in place of `label`.
+ *
  * @csspart groove - The unfilled circle, in `ring` and `arc`.
  * @csspart indicator - The part of the track the value fills.
  * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
@@ -77,6 +79,9 @@ export declare class HelixHeadlessMeter extends HelixElement {
     high?: number;
     /**
      * Accessible name for the reading.
+     *
+     * A visible label in the `label` slot names it instead, with the words it
+     * shows, so the name and the label cannot disagree.
      */
     label: string;
     /**
@@ -218,6 +223,8 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * where the arc starts.
      */
     private renderRound;
+    /** A label's words changed, so the name is written again. */
+    private readonly renamed;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/meter/root/meter-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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 const percents = new Map();
@@ -29,6 +29,9 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.renamed = () => {
+            this.requestUpdate();
+        };
     }
     get span() {
         const min = Number.isFinite(this.min) ? this.min : 0;
@@ -82,7 +85,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         const { max, min } = this.span;
-        hostAria(this.internals, { label: this.label, role: 'meter' });
+        hostAria(this.internals, { label: slottedWords(this, ['label']) || this.label, role: 'meter' });
         this.internals.ariaValueMin = String(min);
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = String(this.reading);
@@ -121,7 +124,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         const beyond = this.beyond;
         const { max, min } = this.span;
         const at = (value) => `${((value - min) / (max - min)) * 100}%`;
-        return html `${this.shape
+        return html `<slot name="label" @slotchange=${this.renamed}></slot>${this.shape
             ? this.renderRound()
             : html `<div part="track">
             ${bounds

package/dist/notifications/feed-keys.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Where a key moves focus in a feed of `count` rows, from the row at `at`, or
+ * `undefined` for a key the feed does not take.
+ *
+ * `onRow` says whether focus is on the row's own box. The arrows and `Home` and
+ * `End` move only from there, so a control inside a row keeps its keys.
+ * `PageDown` and `PageUp` move from anywhere in a row, which is how the APG feed
+ * pattern moves on from inside an article. The answer stays inside the feed.
+ */
+export declare const feedStep: (key: string, at: number, count: number, onRow: boolean) => number | undefined;

package/dist/notifications/feed-keys.js

@@ -0,0 +1,14 @@
+export const feedStep = (key, at, count, onRow) => {
+    if (count <= 0) {
+        return undefined;
+    }
+    const anywhere = { PageDown: at + 1, PageUp: at - 1 };
+    const fromRow = {
+        ArrowDown: at + 1,
+        ArrowUp: at - 1,
+        End: count - 1,
+        Home: 0,
+    };
+    const to = anywhere[key] ?? (onRow ? fromRow[key] : undefined);
+    return to === undefined ? undefined : Math.max(0, Math.min(to, count - 1));
+};

package/dist/notifications/notification/notification.d.ts

@@ -79,6 +79,12 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * Empty is the runtime's own.
      */
     locale: string;
+    /**
+     * @internal Set by the feed: this row's place in it, counting from one, read
+     * as `aria-posinset`. Zero leaves the place to the browser, which counts the
+     * rows it can see.
+     */
+    position: number;
     /**
      * Whether the notification has been read.
      *
@@ -96,6 +102,17 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      */
     get read(): boolean;
     set read(next: boolean);
+    /**
+     * @internal Set by the feed: how many rows the feed holds in all, read as
+     * `aria-setsize`, and `-1` when nobody knows. Zero leaves it to the browser.
+     */
+    setSize: number;
+    /**
+     * @internal Set by the feed: whether `Tab` stops on this row. Every row is a
+     * stop until the feed has chosen one, which is also what a server sends, so
+     * the first render on the client is the server's.
+     */
+    stop: boolean;
     /**
      * What a screen reader hears before an unread notification's text.
      *