@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/map/root/map-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, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, focusItemOf, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } from '@fusion.dev/helix-core';
 import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -89,15 +89,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         };
         this.stop = 0;
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.markers.map((marker, at) => ({
-                contains: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
+            items: () => this.markers.map((marker, at) => focusItemOf(marker, {
                 disabled: marker.gatheredBy !== undefined || !placed(marker),
-                focusItem: () => {
+                focus: () => {
                     this.stop = at;
                     marker.focus();
                 },
-                select: () => { },
-                selected: false,
+                owns: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
             })),
             origin: 'focus',
             selects: () => false,
@@ -105,10 +103,26 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.handleFocusIn = (event) => {
             const marker = this.markerOf(event);
             const at = marker ? this.markers.indexOf(marker) : -1;
+            this.focused = at === -1 ? undefined : marker;
             if (at !== -1) {
                 this.stop = at;
             }
         };
+        this.handleFocusOut = (event) => {
+            const marker = this.markerOf(event);
+            if (!marker || marker !== this.focused) {
+                return;
+            }
+            if (event.relatedTarget) {
+                this.focused = undefined;
+                return;
+            }
+            queueMicrotask(() => {
+                if (marker.isConnected && this.focused === marker) {
+                    this.focused = undefined;
+                }
+            });
+        };
         this.handleClick = (event) => {
             const marker = this.markerOf(event);
             if (marker) {
@@ -267,6 +281,23 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             .composedPath()
             .find((one) => one.isMapMarker === true);
     }
+    refocus(stop) {
+        const gone = this.focused;
+        if (!gone || this.markers.includes(gone)) {
+            return;
+        }
+        this.focused = undefined;
+        const active = document.activeElement;
+        if (active !== null && active !== document.body) {
+            return;
+        }
+        if (stop) {
+            stop.focus();
+        }
+        else {
+            this.partNamed('region')?.focus();
+        }
+    }
     activate(marker) {
         if (marker.gathered.length > 1) {
             marker.dispatchEvent(new HelixMapClusterEvent({ labels: [...marker.gathered] }));
@@ -290,6 +321,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.addEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('keydown', this.handleMarkerKeydown);
         this.addEventListener('keyup', this.handleMarkerKeyup);
         this.hiding = new MutationObserver(() => this.requestUpdate());
@@ -304,6 +336,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.removeEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('keydown', this.handleMarkerKeydown);
         this.removeEventListener('keyup', this.handleMarkerKeyup);
     }
@@ -331,6 +364,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         for (const marker of markers) {
             marker.current = marker === stop;
         }
+        this.refocus(stop);
         if (changed.has('cluster')) {
             this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'place' }));
         }
@@ -371,9 +405,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }}
         @keydown=${this.handleMenuKeydown}
       >
-        <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
-          ${unsafeSVG(stack.content)}
-        </svg>
+        <slot name="layers-icon">
+          <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
+            ${unsafeSVG(stack.content)}
+          </svg>
+        </slot>
       </button>
       <div
         part="layers-menu"
@@ -431,38 +467,40 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         return html `<div part="compass">
       ${rotate
             ? html `<button part="rotate-left" aria-label=${this.rotateLeftLabel} type="button" @click=${() => this.rotate(-ROTATE_STEP)}>
-              ↺
+              <slot name="rotate-left-icon">↺</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
-              ${this.panGlyph('up')}
+              <slot name="pan-up-icon">${this.panGlyph('up')}</slot>
             </button>`
             : nothing}
       ${rotate
             ? html `<button part="rotate-right" aria-label=${this.rotateRightLabel} type="button" @click=${() => this.rotate(ROTATE_STEP)}>
-              ↻
+              <slot name="rotate-right-icon">↻</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
-              ${this.panGlyph('start')}
+              <slot name="pan-start-icon">${this.panGlyph('start')}</slot>
             </button>`
             : nothing}
       <button part="face-north" aria-label=${this.faceNorthLabel} type="button" style=${`--map-needle-turn: ${-this.bearing}deg`} @click=${() => this.faceNorth()}>
-        <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
-          <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
-          <path data-end="south" d="M8 14.5 5.5 8h5Z" />
-        </svg>
+        <slot name="face-north-icon">
+          <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
+            <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
+            <path data-end="south" d="M8 14.5 5.5 8h5Z" />
+          </svg>
+        </slot>
       </button>
       ${pan
             ? html `<button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
-              ${this.panGlyph('end')}
+              <slot name="pan-end-icon">${this.panGlyph('end')}</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
-              ${this.panGlyph('down')}
+              <slot name="pan-down-icon">${this.panGlyph('down')}</slot>
             </button>`
             : nothing}
     </div>`;
@@ -486,7 +524,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               type="button"
               @click=${this.toggleFullscreen}
             >
-              ⤢
+              <slot name="fullscreen-icon">⤢</slot>
             </button>`
             : nothing}
       ${menu}
@@ -498,15 +536,15 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               type="button"
               @click=${() => this.tiltTo(this.pitch > 0 ? 0 : TILTED)}
             >
-              3D
+              <slot name="tilt-icon">3D</slot>
             </button>`
             : nothing}
       ${zoom
             ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-                +
+                <slot name="zoom-in-icon">+</slot>
               </button>
               <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-                −
+                <slot name="zoom-out-icon">−</slot>
               </button>`
             : nothing}
       ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
@@ -558,6 +596,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         hostAria(this.internals, { label: this.label });
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('layers-open', this.layersOpen);
+        this.toggleState('rotated', Math.round(this.bearing) % 360 !== 0);
+        this.toggleState('tilted', Math.round(this.pitch) !== 0);
     }
     renderLayers() {
         const layers = this.layers.filter((layer) => this.shown(layer));

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessMegamenu_1;
-import { anchorElement, customElement, deepContains, focusableElements, HelixElement, KeyboardNavigationController, 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';
 import { HandOver } from '../hand-over.js';
@@ -30,16 +30,9 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         });
         this.keys = new KeyboardNavigationController(this, {
             items: () => !this.parentElement?.shadowRoot
-                ? HelixHeadlessMegamenu_1.bar.alongside(this).map((megamenu) => ({
-                    contains: (node) => {
-                        const control = megamenu.trigger;
-                        return node === control || control.contains(node);
-                    },
-                    disabled: false,
-                    focusItem: () => megamenu.trigger.focus(),
-                    select: () => { },
-                    selected: false,
-                }))
+                ? HelixHeadlessMegamenu_1.bar
+                    .alongside(this)
+                    .map((megamenu) => focusItemOf(megamenu.trigger))
                 : [],
             origin: 'focus',
             reserved: () => ['ArrowDown', 'ArrowUp'],

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

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,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+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';
@@ -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
@@ -43,6 +48,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  *
  * @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`.
@@ -52,15 +58,17 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @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. Never on the server, which cannot count the rows.
+ * @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.
  */
@@ -79,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.
@@ -186,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.
      *
@@ -225,10 +249,22 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
-     * 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, 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.

package/dist/notifications/root/notifications-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, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { feedStep } from '../feed-keys.js';
@@ -12,6 +12,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loadError = '';
         this.loadMore = false;
         this.loadMoreLabel = 'Load more';
         this.markAll = false;
@@ -20,6 +21,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             this.assign();
             this.requestUpdate();
         };
+        this.childWatch = new ChildrenController(this, this.handleSlotChange);
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };
@@ -138,11 +140,8 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
             return;
         }
-        list.assign(...this.rows);
-        for (const name of ['header', 'footer', 'empty', 'loading']) {
-            const slot = root?.querySelector?.(`slot[name="${name}"]`);
-            slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
-        }
+        const rows = this.rows;
+        assignSlots(root, this.children, (child) => rows.includes(child) ? 'items' : child.getAttribute('slot') === 'items' ? '' : undefined);
     }
     get reachable() {
         return this.items.filter((row) => !('assignedSlot' in row) || row.assignedSlot !== null);
@@ -178,10 +177,15 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Notifications', role: 'region' });
+        const failed = this.failed;
+        this.toggleState('error', failed);
         this.toggleState('loading', this.loading);
-        this.toggleState('empty', !this.loading && this.childrenKnown && this.items.length === 0);
+        this.toggleState('empty', !this.loading && !failed && this.childrenKnown && this.items.length === 0);
     }
     renderStatus(hasContent) {
+        if (this.failed) {
+            return html `<p part="error"><slot name="error">${this.loadError}</slot></p>`;
+        }
         if (!this.loading && hasContent) {
             return nothing;
         }
@@ -189,6 +193,19 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
             : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
     }
+    renderLive(hasContent) {
+        const said = this.failed
+            ? this.loadError
+            : this.loading
+                ? this.loadingText
+                : hasContent
+                    ? this.announced
+                    : this.emptyText;
+        return html `<span part="live" role="status">${said}</span>`;
+    }
+    get failed() {
+        return Boolean(this.loadError);
+    }
     markMedia() {
         this.toggleState('media', this.items.some((item) => item.querySelector(':scope > [slot="media"]') !== null));
     }
@@ -248,6 +265,9 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
 __decorate([
     property()
 ], HelixHeadlessNotifications.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-error' })
+], HelixHeadlessNotifications.prototype, "loadError", void 0);
 __decorate([
     property({ attribute: 'load-more', type: Boolean })
 ], HelixHeadlessNotifications.prototype, "loadMore", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -351,7 +351,7 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * box, or in the window where the box does not scroll, less one, so the row
      * at one edge lands at the other.
      */
-    private pageRows;
+    private pageStep;
     /** A press opens or closes the row it lands on, once that row is the active one. */
     private handleRowClick;
     /** Text typed in the filter field, asked for before the tree narrows to it. */
@@ -380,6 +380,10 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private renderRow;
     /** Whether a row of the tree holds focus. */
     private hasFocusedRow;
+    /** Where the row holding focus is among the visible rows, or nothing while none does. */
+    private focusedIndex;
+    /** Focus on the tree itself, its stop while the active row is not drawn, goes on to that row. */
+    private readonly handleTreeFocus;
     /**
      * A row that takes focus some other way than the keys, from a script or a
      * screen reader, becomes the active row, so focus and the keys agree.