@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/megamenu/root/megamenu-root.js

@@ -5,17 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessMegamenu_1;
-import { anchorElement, customElement, deepContains, focusableElements, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, deepContains, focusableElements, focusItemOf, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-let showing;
-const connected = new Set();
-let pressed;
-const release = () => {
-    setTimeout(() => {
-        pressed = undefined;
-    });
-};
+import { HandOver } from '../hand-over.js';
 let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -28,13 +21,24 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         };
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
-            boundary: () => [...connected],
+            boundary: () => [...HelixHeadlessMegamenu_1.bar.connected],
             onDismiss: () => this.close(),
             open: () => this.open,
             place: () => !this.banded,
             placement: () => 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => !this.parentElement?.shadowRoot
+                ? HelixHeadlessMegamenu_1.bar
+                    .alongside(this)
+                    .map((megamenu) => focusItemOf(megamenu.trigger))
+                : [],
+            origin: 'focus',
+            reserved: () => ['ArrowDown', 'ArrowUp'],
+            selects: () => false,
+            wrap: false,
+        });
         this.handleKeyDown = (event) => {
             if (event.key !== 'ArrowDown' || !this.open || event.defaultPrevented) {
                 return;
@@ -61,14 +65,13 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         };
         this.handlePointerDown = (event) => {
             this.pointer = event.pointerType;
-            pressed = this;
-            window.addEventListener('pointerup', release, { capture: true, once: true });
-            window.addEventListener('pointercancel', release, { capture: true, once: true });
+            HelixHeadlessMegamenu_1.bar.press(this);
         };
         this.handlePointerEnter = (event) => {
             if (this.openOn !== 'hover' || event.pointerType !== 'mouse') {
                 return;
             }
+            const showing = HelixHeadlessMegamenu_1.bar.showing;
             this.schedule(showing && showing !== this ? 0 : HelixHeadlessMegamenu_1.OPEN_DELAY, () => {
                 this.requestOpen(true);
             });
@@ -86,6 +89,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             if (!this.open || next === null || deepContains(this, next)) {
                 return;
             }
+            const pressed = HelixHeadlessMegamenu_1.bar.pressed;
             if (pressed !== undefined && pressed !== this && deepContains(pressed, next)) {
                 return;
             }
@@ -119,9 +123,9 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             }
             this.requestOpen(false);
         };
-        this.handedOver = false;
     }
     static { HelixHeadlessMegamenu_1 = this; }
+    static { this.bar = new HandOver((megamenu, to) => megamenu.motion(to)); }
     get banded() {
         return this.variant === 'band' || this.narrow;
     }
@@ -191,7 +195,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     connectedCallback() {
         super.connectedCallback();
         this.watchWidth();
-        connected.add(this);
+        HelixHeadlessMegamenu_1.bar.add(this);
         window.addEventListener('scroll', this.handleScroll, { capture: true, passive: true });
         this.addEventListener('pointerdown', this.handlePointerDown);
         this.addEventListener('click', this.handleContentClick);
@@ -211,11 +215,8 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.removeEventListener('pointerleave', this.handlePointerLeave);
         this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('keydown', this.handleKeyDown);
-        connected.delete(this);
+        HelixHeadlessMegamenu_1.bar.remove(this);
         this.stop();
-        if (showing === this) {
-            showing = undefined;
-        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -223,37 +224,10 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             return;
         }
         if (this.open) {
-            const previous = showing && showing !== this ? showing : undefined;
-            const forward = previous !== undefined &&
-                (previous.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
-            this.motion(previous ? (forward ? 'from-end' : 'from-start') : undefined);
-            this.from = previous?.size;
-            HelixHeadlessMegamenu_1.settle(this, previous);
-            if (previous) {
-                previous.motion(forward ? 'to-start' : 'to-end');
-                previous.handedOver = true;
-                if (!previous.requestOpen(false)) {
-                    previous.handedOver = false;
-                    previous.motion(undefined);
-                }
-            }
-            showing = this;
+            this.from = HelixHeadlessMegamenu_1.bar.open(this)?.size;
             return;
         }
-        if (showing === this) {
-            showing = undefined;
-        }
-        if (!this.handedOver) {
-            HelixHeadlessMegamenu_1.settle();
-        }
-        this.handedOver = false;
-    }
-    static settle(...moving) {
-        for (const megamenu of connected) {
-            if (!moving.includes(megamenu)) {
-                megamenu.motion(undefined);
-            }
-        }
+        HelixHeadlessMegamenu_1.bar.close(this);
     }
     measure() {
         const surface = this.partNamed('surface');
@@ -301,8 +275,13 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
       </button>
     </slot>`;
     }
+    renderIndicator() {
+        return this.open
+            ? html `<slot name="indicator" part="indicator" aria-hidden="true"></slot>`
+            : nothing;
+    }
     render() {
-        return html `${this.renderTrigger()}
+        return html `${this.renderTrigger()}${this.renderIndicator()}
       <div
         part="surface"
         id="panel"
@@ -311,7 +290,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         role="group"
         ?hidden=${!this.open}
       >
-        <slot></slot>
+        <slot part="columns"></slot>
       </div>`;
     }
 };

package/dist/menu/item/menu-item.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 { ariaChord, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, onApple, requestChange, } from '@fusion.dev/helix-core';
+import { ariaChord, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, onApple, requestChange, slotFilled, } from '@fusion.dev/helix-core';
 import { caretRight, check } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -33,15 +33,15 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         this.description = false;
         this.readStart = () => {
             const slot = this.renderRoot.querySelector('slot[name="start"]');
-            this.start = (slot?.assignedNodes().length ?? 0) > 0;
+            this.start = slotFilled(slot);
         };
         this.readEnd = () => {
             const slot = this.renderRoot.querySelector('slot[name="end"]');
-            this.end = (slot?.assignedNodes().length ?? 0) > 0;
+            this.end = slotFilled(slot);
         };
         this.readDescription = () => {
             const slot = this.renderRoot.querySelector('slot[name="description"]');
-            this.description = (slot?.assignedNodes().length ?? 0) > 0;
+            this.description = slotFilled(slot);
         };
         this.readSubmenu = () => {
             const slot = this.renderRoot.querySelector('slot[name="submenu"]');

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

@@ -25,8 +25,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * onto your element after it upgrades causes a hydration mismatch.
  *
  * Group rows under a heading with `Menu.Section`, which is a `group` named by
- * its heading. Between runs of rows, a `<helix-divider announced>` is a
- * separator a screen reader announces.
+ * its heading. Between runs of rows, a `<helix-divider>` is a separator a
+ * screen reader announces.
  *
  * Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first
  * row, and Up Arrow on its last. In the menu, Up and Down Arrow move between
@@ -71,6 +71,9 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @csspart surface - The floating panel the menu is drawn on.
  * @csspart title - The name of the submenu that is showing.
  *
+ * @cssproperty --floating-anchor-inline-size - The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
+ * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
+ *
  * @cssstate drilled - A submenu's page is showing, so content that is not a row can hide with the top page.
  * @cssstate mark - A row on the current page has a checkbox or a link, so every row keeps the trailing column.
  * @cssstate open - While the menu is open.

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

@@ -16,6 +16,15 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * band. `optimum` sets the preferred band. The band next to it is fair, and the
  * band two away is poor.
  *
+ * The band is a custom state on the meter, `good`, `fair` or `poor`, beside
+ * `over` and `under` for a value past an end, so a page styles the meter
+ * around the fill as well as the fill.
+ *
+ * **`live` says the reading when it moves into another band**, such as "92%,
+ * Poor", in a polite region, for a meter whose value changes while a reader is
+ * on the page: a disk filling or a battery draining. The band's word comes from
+ * `band-labels`.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -24,6 +33,8 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  *
  * @slot label - A visible label. Its words name the meter in place of `label`.
  *
+ * @event {HelixBandEvent} helix-band - Fired when the reading moves into another band, with the band it is in now, or `''` where it is in none. Not sent on the first render, since a meter that arrives in a band has not moved.
+ *
  * @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`.
@@ -31,6 +42,7 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @csspart indicator-over - The fill while the value is above `max`. Set alongside `indicator`.
  * @csspart indicator-poor - The fill while the reading is two bands from the good band. Set alongside `indicator`.
  * @csspart indicator-under - The fill while the value is below `min`. Set alongside `indicator`.
+ * @csspart live - A polite region that says the reading as it moves into another band, under `live`, rendered from the first time it does. Hide it visually.
  * @csspart tick - A mark at `low` or at `high`.
  * @csspart track - The whole range, or the drawing in `ring` and `arc`.
  * @csspart value - The reading as text, shown when `show-value` is set.
@@ -39,6 +51,12 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @cssproperty --meter-at - Where a bound sits on a linear track, as a percentage.
  * @cssproperty --meter-fraction - The value as a fraction of the range, 0 to 1.
  * @cssproperty --meter-sweep - How much of the circle the arc covers, as a path length.
+ *
+ * @cssstate fair - The reading is in a band next to the good band.
+ * @cssstate good - The reading is in the good band.
+ * @cssstate over - The value is above `max`.
+ * @cssstate poor - The reading is two bands from the good band.
+ * @cssstate under - The value is below `min`.
  */
 export declare class HelixHeadlessMeter extends HelixElement {
     /**
@@ -71,6 +89,13 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * no reader.
      */
     band?: MeterBand;
+    /**
+     * The words each band is said with under `live`, by its name, written as
+     * JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
+     *
+     * A band left out keeps its default: "Good", "Fair" or "Poor".
+     */
+    bandLabels: Partial<Record<MeterBand, string>>;
     /**
      * `Intl.NumberFormat` options the reading is written with, as React Aria's
      * Meter and ProgressBar take them: a unit, a currency, or a number of
@@ -99,6 +124,15 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * shows, so the name and the label cannot disagree.
      */
     label: string;
+    /**
+     * Says the reading in a polite `live` region each time it moves into
+     * another band, with the band's word, such as "92%, Poor".
+     *
+     * For a meter whose value changes while it is on screen. Off by default,
+     * because a meter that reads a fixed level has nothing new to say. A meter
+     * with no bands says nothing.
+     */
+    live: boolean;
     /**
      * The locale the percentage is written in, such as `fr` for `72 %`.
      *
@@ -171,6 +205,13 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * fair summary of a task and a poor one of a quantity.
      */
     valueText: string;
+    /** The region `live` speaks in, rendered from the first time it does. */
+    private readonly status;
+    /**
+     * The band at the last update, so a move into another one is heard once:
+     * an empty string for none, and undefined before the first update.
+     */
+    private lastBand;
     /** The range, clamped so `max` is never at or below `min`. */
     private get span();
     /** The reading, pulled into the range. */
@@ -221,6 +262,7 @@ export declare class HelixHeadlessMeter extends HelixElement {
      */
     private get text();
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     /**
      * The same reading, drawn round.
      *

package/dist/meter/root/meter-root.js

@@ -4,20 +4,23 @@ 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, formatNumber, HelixElement, hostAria, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixBandEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-const WHOLE_PERCENT = { maximumFractionDigits: 0, style: 'percent' };
+const BAND_WORDS = { fair: 'Fair', good: 'Good', poor: 'Poor' };
 let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     constructor() {
         super(...arguments);
+        this.bandLabels = {};
         this.label = 'Meter';
+        this.live = false;
         this.locale = '';
         this.max = 100;
         this.min = 0;
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.status = new StatusController(this);
         this.renamed = () => {
             this.requestUpdate();
         };
@@ -69,11 +72,8 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         return distance === 0 ? 'good' : distance === 1 ? 'fair' : 'poor';
     }
     get text() {
-        const options = this.formatOptions;
         return (this.valueText ||
-            (options && options.style !== 'percent'
-                ? formatNumber(Number.isFinite(this.value) ? this.value : this.span.min, this.locale, options)
-                : formatNumber(this.ratio, this.locale, options ?? WHOLE_PERCENT)));
+            readingText(Number.isFinite(this.value) ? this.value : this.span.min, this.ratio, this.locale, this.formatOptions));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -84,6 +84,26 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         this.internals.ariaValueNow = String(this.reading);
         this.internals.ariaValueText =
             this.valueText || this.formatOptions !== undefined || this.beyond ? this.text : null;
+        const band = this.computedBand;
+        const beyond = this.beyond;
+        this.toggleState('fair', band === 'fair');
+        this.toggleState('good', band === 'good');
+        this.toggleState('poor', band === 'poor');
+        this.toggleState('over', beyond === 'over');
+        this.toggleState('under', beyond === 'under');
+    }
+    updated(changed) {
+        super.updated(changed);
+        const band = this.computedBand;
+        const moved = this.lastBand !== undefined && (band ?? '') !== this.lastBand;
+        this.lastBand = band ?? '';
+        if (!moved) {
+            return;
+        }
+        this.dispatchEvent(new HelixBandEvent({ band: band ?? '' }));
+        if (band && this.live) {
+            this.status.say(`${this.text}, ${this.bandLabels[band] ?? BAND_WORDS[band]}`);
+        }
     }
     renderRound() {
         const bounds = this.thresholds;
@@ -131,12 +151,15 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
               style="--meter-fraction: ${this.fraction}"
             ></div>
           </div>`}
-      ${this.showValue ? html `<span part="value">${this.text}</span>` : nothing}`;
+      ${this.showValue ? html `<span part="value">${this.text}</span>` : nothing}${drawStatus(this.status)}`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "band", void 0);
+__decorate([
+    property({ attribute: 'band-labels', converter: wordsConverter })
+], HelixHeadlessMeter.prototype, "bandLabels", void 0);
 __decorate([
     property({ attribute: 'format-options', type: Object })
 ], HelixHeadlessMeter.prototype, "formatOptions", void 0);
@@ -146,6 +169,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMeter.prototype, "live", void 0);
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "locale", void 0);

package/dist/navigation/root/navigation-root.js

@@ -4,23 +4,20 @@ 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, focusableElements, HelixElement, IndicatorController, KeyboardNavigationController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const navigable = (item) => {
     const control = () => item.navigationControl ??
         (item.matches(FOCUSABLE) ? item : focusableElements(item)[0]);
-    return {
-        contains: (node) => {
+    return focusItemOf(item, {
+        focus: () => control()?.focus(),
+        owns: (node) => {
             const target = control();
             return target !== undefined && node !== null && (node === target || target.contains(node));
         },
-        disabled: false,
-        focusItem: () => control()?.focus(),
-        select: () => { },
-        selected: false,
-    };
+    });
 };
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
 declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
@@ -134,6 +134,13 @@ export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotific
      * is anything behind it. The one row is the evidence.
      */
     private assign;
+    /**
+     * Hears a row arrive after the render. The slot is assigned by hand, so a
+     * new row is in no slot and sends no `slotchange` to say it came. The feed
+     * the group is in is asked to update as well, since it counts the group's
+     * rows and does not watch inside the group.
+     */
+    protected readonly childWatch: ChildrenController;
     private readonly handleToggle;
     protected render(): TemplateResult;
 }

package/dist/notifications/group/notification-group.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, MixinControllerOpen } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, HelixElement, hostAria, MixinControllerOpen, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const TRIGGER_ID = 'trigger';
@@ -16,6 +16,10 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
         this.collapsible = false;
         this.label = '';
         this.isNotificationGroup = true;
+        this.childWatch = new ChildrenController(this, () => {
+            this.requestUpdate();
+            this.parentElement?.requestUpdate?.();
+        });
         this.handleToggle = () => {
             this.toggleOpen();
         };
@@ -58,11 +62,13 @@ let HelixHeadlessNotificationGroup = class HelixHeadlessNotificationGroup extend
             }
             return;
         }
-        slot.assign(...showing);
-        const action = this.renderRoot?.querySelector?.('slot[name="actions"]');
-        action?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === 'actions'));
-        const label = this.renderRoot?.querySelector?.('slot[name="label"]');
-        label?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === 'label'));
+        assignSlots(this.renderRoot, this.children, (child) => {
+            const row = child;
+            if (showing.includes(row)) {
+                return '';
+            }
+            return items.includes(row) || !child.hasAttribute('slot') ? 'folded' : undefined;
+        });
     }
     render() {
         const counted = this.counted;

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

@@ -53,6 +53,16 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
  * @csspart label - What happened, on the first line.
  * @csspart media - The leading slot's box.
  * @csspart time - When it happened, formatted for people to read.
+ * @csspart time-day - Format Date's `day`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-day-period - Format Date's `day-period`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-era - Format Date's `era`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-hour - Format Date's `hour`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-minute - Format Date's `minute`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-month - Format Date's `month`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-second - Format Date's `second`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-time-zone-name - Format Date's `time-zone-name`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-weekday - Format Date's `weekday`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-year - Format Date's `year`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart trailing - The column holding the time and the controls.
  *
  * @cssstate actions - While the actions slot holds something, so the words above make room for it.
@@ -210,7 +220,8 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * already named for its role: the child publishes `time`, the role here is
      * `time`, and naming both would leave `::part(time)` matching two elements.
      * What a consumer wants to reach is the `<time>`, so that is what the name
-     * reaches.
+     * reaches. Format Date's field parts go on under `time-`, as every composed
+     * child's do, though an elapsed time draws no fields.
      */
     private renderTime;
     protected render(): TemplateResult;

package/dist/notifications/notification/notification.js

@@ -103,7 +103,9 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     renderTime() {
         const stamp = this.tag('format-date');
         return html `<${stamp}
-      exportparts="time"
+      exportparts="time, day: time-day, day-period: time-day-period, era: time-era, hour: time-hour,
+        minute: time-minute, month: time-month, second: time-second,
+        time-zone-name: time-time-zone-name, weekday: time-weekday, year: time-year"
       elapsed
       date=${this.at}
       locale=${this.locale}

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

@@ -1,5 +1,5 @@
-import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotificationGroup } from '../group/notification-group.js';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
 declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
@@ -35,6 +35,11 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * nothing more. While the feed is loading the button stays, so focus stays on
  * it, and it is `aria-disabled` and sends nothing.
  *
+ * **`load-error` says a page could not be fetched**, such as "Could not load
+ * notifications": it shows under the rows there are, in the `error` part, in
+ * place of the empty and loading lines, and a screen reader hears it. Clear it
+ * when you ask again.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -42,22 +47,29 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @documentation https://fusion.dev/helix/components/notifications
  *
  * @slot - The notifications.
+ * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own. The live region still says `empty-text`.
+ * @slot error - Replaces the words of `load-error` in the `error` part, such as a line with a retry button. The live region still says `load-error`.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
+ * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader. The live region still says `loading-text`.
  *
  * @event {HelixDismissEvent} helix-dismiss - Fired when the user dismisses a row. The row dispatches it, and you can listen for it on the feed. Cancelable: cancel it to keep the row.
  * @event {HelixLoadMoreEvent} helix-load-more - Fired when a reader presses the `load-more` button, asking for the next page of the feed.
  * @event {HelixReadEvent} helix-read - Fired by an item when it is marked read or unread, and by the feed when everything is marked read. Cancelable.
  *
  * @csspart empty - Shown when there is nothing in the feed.
+ * @csspart error - Shown while `load-error` is set, under any rows there are, in place of the empty and loading lines.
  * @csspart footer - The region below the list.
  * @csspart header - The region above the list.
  * @csspart list - The list itself.
- * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty, loading and error messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is loading.
  * @csspart mark-all - The control that marks everything read.
  * @csspart more - The button after the list that asks for more, while `load-more` is set. It is `aria-disabled` while the feed is loading.
  *
+ * @cssstate empty - While the feed holds no notification and is not loading, and `load-error` is not set. Never on the server, which cannot count the rows.
+ * @cssstate error - While `load-error` is set.
+ * @cssstate loading - While `loading` is set.
  * @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
 export declare class HelixHeadlessNotifications extends HelixHeadlessNotifications_base {
@@ -75,6 +87,15 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * The feed's name, read by screen readers.
      */
     label: string;
+    /**
+     * What the feed says when a page of it could not be loaded, such as after a
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it.
+     *
+     * Set, it shows under the rows there are, in place of `empty-text` and
+     * `loading-text`, and a screen reader hears it. Clear it when you ask again.
+     */
+    loadError: string | null;
     /**
      * Whether to draw a button after the list that asks for the next page, by
      * sending `helix-load-more`. Take it off once there is nothing more.
@@ -182,6 +203,13 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     markEveryoneRead(): number;
     /** Items arrive from the light DOM, which changes no property here. */
     private readonly handleSlotChange;
+    /**
+     * Hears a row arrive after the render. The list slot is assigned by hand, so
+     * a new row is in no slot and sends no `slotchange`: without this it was
+     * drawn nowhere and an emptied feed kept saying it was empty. A row added to
+     * a group is the group's to hear, and the group asks the feed to count again.
+     */
+    protected readonly childWatch: ChildrenController;
     /**
      * An item's own read event, heard on the way past, so the count follows.
      *
@@ -220,6 +248,23 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The error, the empty or the loading line, each around a slot of the same
+     * name whose fallback is the words, so a page can put its own in. The error
+     * shows under the rows there are, since a page that failed is news even to
+     * a feed that holds some.
+     */
+    protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
+    /**
+     * The error before the shared words, which it wins over.
+     *
+     * **One region whose words change**, as the shared one is. The error was a
+     * second template, so setting it put a new region in the tree with its
+     * words already in it, which a reader may not hear.
+     */
+    protected renderLive(hasContent: boolean): TemplateResult;
+    /** Whether `load-error` holds words, which a removed attribute does not. */
+    private get failed();
     /**
      * Says whether anything in the feed has media, so every item can hold the
      * column open whether or not it has one of its own.