@fusion.dev/helix-headless 0.151.0 → 0.152.0

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

@@ -20,6 +20,11 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * A drawer with `modal="false"` leaves the page usable and still closes on
  * Escape, in a browser without `closedby` as well.
  *
+ * Set `persistent` for a drawer that has to be answered: Escape, a press
+ * outside, and a swipe leave it open, and the close control and `close()`
+ * still close it. `closedby="none"` keeps it open on all three as well, and
+ * `closedby="closerequest"` keeps it open on a press outside.
+ *
  * **A touch or a pen swipes it away**, toward the edge it came from, resolved
  * against the writing direction. A swipe past halfway, or a quick one, closes
  * it through the same request as every other way out. `snap-points` lists the
@@ -40,7 +45,20 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  *
  * The panel's name is `label` when you set it. Otherwise it is the heading in
  * the `header` slot, or the elements an `aria-labelledby` on the host names,
- * and `fallback-label` where nothing names it.
+ * and `fallback-label` where nothing names it. A development build warns
+ * when a drawer opens with nothing but `fallback-label` to name it.
+ *
+ * The panel is described by the words at the start of its body, as `Dialog`
+ * is: the elements in the default slot before the first one that is or holds
+ * a control. An `aria-describedby` on the host replaces it.
+ *
+ * **Keyboard.** Opening moves focus to the first control in the panel.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. |
+ * | Escape | Asks to close the drawer. A `helix-before-close` listener can refuse, and `persistent` or `closedby="none"` keeps it open. |
+ * | Enter, Space | On the close control, closes the drawer. |
  *
  * Content stays mounted when the drawer is closed, so it is in the server
  * markup and can animate. A closed `<dialog>` is already out of the tab order
@@ -114,6 +132,8 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * way out.
      */
     dismissible: boolean;
+    /** Whether a request to dismiss the drawer, by Escape or a swipe, is refused. */
+    private get refusesDismissal();
     /**
      * The close control's accessible name. Translate it with the rest of your
      * interface.
@@ -129,7 +149,6 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * `header` slot names the panel.
      */
     label: string;
-    protected readonly aria: AriaForwardController;
     /**
      * Whether the drawer blocks the page behind it.
      *
@@ -144,6 +163,15 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * not, rather than shown or hidden by CSS.
      */
     modal: boolean;
+    protected readonly aria: AriaForwardController;
+    /**
+     * Stops Escape, a press outside, and a swipe from closing the drawer, for a
+     * drawer that has to be answered.
+     *
+     * The close control and `close()` still close it, as on `Dialog`: a panel
+     * with no way out at all is a trap.
+     */
+    persistent: boolean;
     /**
      * Which edge the drawer comes from.
      *
@@ -281,6 +309,14 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * reflection keeps the fallback name.
      */
     private nameByHeader;
+    /** Whether the body's words are what currently describe the panel. */
+    private describedByBody;
+    /**
+     * Describes the panel by the words at the start of its body, where nothing
+     * else describes it, as `Dialog` does. An `aria-describedby` on the host
+     * comes first.
+     */
+    private describeByBody;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;

package/dist/drawer/root/drawer-root.js

@@ -4,9 +4,10 @@ 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, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { wordsIn } from '../../dialog/description.js';
 import { beyondWindow } from '../reveal.js';
 import { startsSwipe } from '../swipe-start.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
@@ -23,8 +24,9 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         this.dismissLabel = 'Close';
         this.fallbackLabel = 'Drawer';
         this.label = '';
-        this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
+        this.aria = new AriaForwardController(this, { target: () => this.panel });
+        this.persistent = false;
         this.snapPoints = '';
         this.swipe = true;
         this.returned = '';
@@ -63,7 +65,9 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
                 return;
             }
             event.preventDefault();
-            this.requestOpen(false);
+            if (!this.refusesDismissal) {
+                this.requestOpen(false);
+            }
         };
         this.scope = new FocusScopeController(this, {
             contain: () => this.open && this.modal,
@@ -77,7 +81,9 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         });
         this.handleCancel = (event) => {
             event.preventDefault();
-            this.requestOpen(false);
+            if (!this.refusesDismissal) {
+                this.requestOpen(false);
+            }
         };
         this.handleClose = (event) => {
             if (this.open) {
@@ -97,11 +103,18 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
                 event.clientY <= box.bottom) {
                 return;
             }
+            if (this.refusesDismissal || this.closedBy === 'closerequest') {
+                return;
+            }
             this.requestOpen(false);
         };
         this.namedByHeader = false;
+        this.describedByBody = false;
     }
     static { this.words = 'helix-drawer'; }
+    get refusesDismissal() {
+        return this.persistent || this.closedBy === 'none';
+    }
     get returnValue() {
         return this.panel?.returnValue ?? this.returned;
     }
@@ -138,7 +151,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             travel: Math.max(0, this.rest + towardEdge(edge, dx, dy)),
             velocity: towardEdge(edge, vx, vy),
         });
-        if (shown === 0 && this.requestOpen(false)) {
+        if (shown === 0 && !this.refusesDismissal && this.requestOpen(false)) {
             return;
         }
         if (shown !== 0) {
@@ -192,6 +205,11 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
         this.namedByHeader = reflectElements(this.panel, 'ariaLabelledByElements', heading, this.namedByHeader);
     }
+    describeByBody() {
+        const slot = this.renderRoot.querySelector('slot:not([name])');
+        const said = this.hasAttribute('aria-describedby') ? [] : wordsIn(slot);
+        this.describedByBody = reflectElements(this.panel, 'ariaDescribedByElements', said, this.describedByBody);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('focusin', this.handleFocusIn);
@@ -204,6 +222,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
     updated(changed) {
         super.updated(changed);
         this.nameByHeader();
+        this.describeByBody();
         if (changed.has('open') && !this.open) {
             this.rest = 0;
             this.shown = 1;
@@ -221,6 +240,11 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             return;
         }
         if (this.open && !panel.open) {
+            auditName(this, () => null, 'Give it a `label`, or a heading in the `header` slot.', () => this.label !== '' ||
+                this.namedByHeader ||
+                headingsIn(this.renderRoot
+                    .querySelector('slot[name="header"]')
+                    ?.assignedElements({ flatten: true }) ?? []).length > 0);
             if (this.modal) {
                 panel.showModal();
             }
@@ -245,7 +269,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
       @keydown=${this.handleKeydown}
     >
       <div part="header"><slot name="header" @slotchange=${this.nameByHeader}></slot></div>
-      <div part="content"><slot></slot></div>
+      <div part="content"><slot @slotchange=${this.describeByBody}></slot></div>
       <div part="footer"><slot name="footer"></slot></div>
       ${this.dismissible
             ? drawDismiss({
@@ -282,6 +306,9 @@ __decorate([
 __decorate([
     property({ converter: onUnlessFalse })
 ], HelixHeadlessDrawer.prototype, "modal", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDrawer.prototype, "persistent", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDrawer.prototype, "placement", void 0);

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

@@ -1,4 +1,4 @@
-import { CommandController, HelixElement, SwipeController } from '@fusion.dev/helix-core';
+import { CommandController, FocusScopeController, HelixElement, SwipeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -41,6 +41,25 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * swiped across the picture shows the next or the previous item, the way the
  * line of text runs.
  *
+ * A press on the empty area around the item closes the viewer, as a press on
+ * the backdrop does. Under `max-zoom`, a press beside the item zooms on a
+ * double press and closes nothing, and only the space outside the viewport
+ * closes the viewer. A press that dragged closes nothing.
+ *
+ * **Keyboard.** Opening moves focus to the viewer itself, which a screen
+ * reader names.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. |
+ * | Left, Up | Shows the previous item. |
+ * | Home, End | Shows the first or the last item. |
+ * | `+`, `-`, `0` | Zooms in, zooms out, and puts the item back at its own size, where `max-zoom` allows zooming. |
+ * | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. |
+ * | Escape | Closes the viewer. A `helix-before-close` listener can refuse. |
+ *
+ * A development build warns when a viewer opens with no `label`.
+ *
  * The chrome hides when there is no input, through `IdleController`, and comes
  * back on a pointer move, a key press, or a focus. It stays while focus is on a
  * control in the header or the footer, so a keyboard reader is never left on
@@ -205,6 +224,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /** Whether the zoom is being put back because the item changed, which says nothing. */
     private quietZoom;
     protected readonly swipes: SwipeController;
+    protected readonly scope: FocusScopeController;
     private readonly zoomer;
     /** Writes the zoom on the viewport, and nothing at the item's own size. */
     private drawZoom;
@@ -287,6 +307,11 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private readonly handleKeydown;
     /** `+` and `-` zoom in and out by half again, and `0` puts the item back. Returns whether it was one. */
     private zoomKey;
+    /**
+     * The arrow keys on a zoomed item, which move about it rather than to
+     * another item. Returns whether it was one.
+     */
+    private panKey;
     /** Zooms in by half again, as `+` and the zoom-in control do. */
     private zoomIn;
     /** Zooms out by as much, as `-` and the zoom-out control do. */
@@ -296,14 +321,27 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /** The item on screen: the one `active` names, or the first where it names none. */
     private get shown();
     /**
-     * A press on the backdrop, which lands on the dialog element itself.
+     * A press on the backdrop or on the empty area around the item.
      *
-     * The point is compared against the panel's box rather than trusting the
-     * target alone, for the reason `Dialog` gives: a modal `<dialog>` attributes
-     * backdrop presses to itself, so any padding the styled tier gives the panel
-     * is a strip where a press on the panel looks like a press outside it.
+     * A modal `<dialog>` attributes backdrop presses to itself, and the styled
+     * tier draws the viewer over the whole screen, so a press beside the item
+     * lands on the dialog, the viewport, or the item's own box. Any of those is
+     * a reader done with the viewer, as a press on a dark room around a picture
+     * is. Not a press that dragged, which was a swipe or a pan.
      */
     private readonly handleBackdrop;
+    /** Where the last press began, so a press that dragged closes nothing. */
+    private pressedAt;
+    private readonly handlePointerDown;
+    /** Whether the press moved further than a click does, as a swipe or a pan does. */
+    private dragged;
+    /**
+     * Whether a press landed on the empty area around the item: the viewer's
+     * own surface, the viewport, or an item's box beside what it holds. The
+     * last two not where `max-zoom` lets a reader zoom, since a double press
+     * there zooms.
+     */
+    private onEmptyArea;
     protected willUpdate(changed: PropertyValues): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;

package/dist/lightbox/root/lightbox-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 { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FocusScopeController, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -53,6 +53,16 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             start: (_target, event) => event.pointerType !== 'mouse',
             surface: () => this.dialog,
         });
+        this.scope = new FocusScopeController(this, {
+            contain: () => this.open,
+            contents: () => [
+                ...['header', '', 'footer'].flatMap((name) => this.renderRoot
+                    ?.querySelector(name ? `slot[name="${name}"]` : 'slot:not([name])')
+                    ?.assignedElements({ flatten: true }) ?? []),
+                ...[...(this.dialog?.children ?? [])].filter((one) => one.localName === 'button'),
+            ],
+            surface: () => this.dialog,
+        });
         this.zoomer = new ZoomController(this, {
             max: () => (this.open ? this.maxZoom : 1),
             onChange: (scale, pan) => this.drawZoom(scale, pan),
@@ -89,7 +99,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             if (keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
                 return;
             }
-            if (this.zoomKey(event.key)) {
+            if (this.zoomKey(event.key) || this.panKey(event.key)) {
                 event.preventDefault();
                 return;
             }
@@ -112,19 +122,14 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             }
         };
         this.handleBackdrop = (event) => {
-            const panel = this.dialog;
-            if (!panel || event.target !== panel) {
-                return;
-            }
-            const box = panel.getBoundingClientRect();
-            if (event.clientX >= box.left &&
-                event.clientX <= box.right &&
-                event.clientY >= box.top &&
-                event.clientY <= box.bottom) {
+            if (this.dragged(event) || !this.onEmptyArea(event)) {
                 return;
             }
             this.requestOpen(false);
         };
+        this.handlePointerDown = (event) => {
+            this.pressedAt = { x: event.clientX, y: event.clientY };
+        };
     }
     static { this.words = 'helix-lightbox'; }
     drawZoom(scale, pan) {
@@ -217,6 +222,25 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         }
         return true;
     }
+    panKey(key) {
+        if (this.zoomer.scale <= 1) {
+            return false;
+        }
+        const box = this.partNamed('viewport')?.getBoundingClientRect();
+        const across = Math.max(40, (box?.width ?? 0) / 10);
+        const down = Math.max(40, (box?.height ?? 0) / 10);
+        const by = {
+            ArrowDown: { x: 0, y: -down },
+            ArrowLeft: { x: across, y: 0 },
+            ArrowRight: { x: -across, y: 0 },
+            ArrowUp: { x: 0, y: down },
+        }[key];
+        if (!by) {
+            return false;
+        }
+        this.zoomer.panBy(by);
+        return true;
+    }
     zoomIn() {
         this.zoomer.zoomTo(this.zoomer.scale * 1.5);
     }
@@ -232,6 +256,28 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     get shown() {
         return resolveActiveItem(this.active ?? '', this.items);
     }
+    dragged(event) {
+        const from = this.pressedAt;
+        this.pressedAt = undefined;
+        return from !== undefined && Math.hypot(event.clientX - from.x, event.clientY - from.y) > 8;
+    }
+    onEmptyArea(event) {
+        const pressed = event.composedPath()[0];
+        if (!(pressed instanceof Element)) {
+            return false;
+        }
+        if (pressed === this.dialog) {
+            return true;
+        }
+        if (this.maxZoom > 1) {
+            return false;
+        }
+        const root = pressed.getRootNode();
+        const inItem = root instanceof ShadowRoot &&
+            root.host instanceof HelixHeadlessLightboxItem &&
+            pressed.getAttribute('part') === 'item';
+        return inItem || pressed === this.partNamed('viewport');
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
@@ -263,6 +309,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             return;
         }
         if (this.open && !dialog.open) {
+            auditName(this, () => null, 'Give it a `label`, such as "Project photos".', () => this.label !== '');
             dialog.showModal();
             dialog.focus({ preventScroll: true });
             this.idle.stir();
@@ -334,6 +381,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       @close=${this.handleClose}
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
+      @pointerdown=${this.handlePointerDown}
       @pointerleave=${this.idle.leave}
       @pointermove=${this.idle.stir}
     >

package/dist/lightbox/zoom-controller.d.ts

@@ -41,6 +41,11 @@ export declare class ZoomController implements ReactiveController {
     hostDisconnected(): void;
     /** Zooms to `scale` about the middle of the box, held to the range. */
     zoomTo(scale: number, at?: Offset): void;
+    /**
+     * Moves a zoomed item by `by`, in pixels, never so far that an edge comes
+     * inside the box. Returns whether it moved.
+     */
+    panBy(by: Offset): boolean;
     /** Back to the item at its own size, in the middle. */
     reset(): void;
     private set;

package/dist/lightbox/zoom-controller.js

@@ -79,6 +79,14 @@ export class ZoomController {
         const next = clampScale(scale, this.options.max());
         this.set(next, zoomAt(at, this.scale, next, this.pan));
     }
+    panBy(by) {
+        if (this.scale <= 1) {
+            return false;
+        }
+        const before = this.pan;
+        this.set(this.scale, { x: before.x + by.x, y: before.y + by.y });
+        return this.pan.x !== before.x || this.pan.y !== before.y;
+    }
     reset() {
         if (this.scale !== 1 || this.pan.x !== 0 || this.pan.y !== 0) {
             this.set(1, { x: 0, y: 0 });

package/dist/menu/root/menu-root.js

@@ -288,6 +288,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 <button
                   part="back"
                   type="button"
+                  role="menuitem"
+                  tabindex="-1"
                   aria-label=${this.backLabel}
                   @click=${() => this.leave()}
                 >

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

@@ -19,6 +19,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * one page can mark the section in view with `aria-current="location"`. Where
  * several are marked, `page` wins.
  *
+ * **The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`
+ * elements, each holding a link, and a screen reader says how many there are
+ * and where each one is, as in Radix's `NavigationMenu.List`. The marker and
+ * the arrow keys work on the list items as they do on bare links. Give the
+ * list `role="list"` as well, since Safari drops the semantics of a list drawn
+ * without bullets.
+ *
  * Set `orientation="vertical"` to stack the destinations in a column, for a
  * sidebar.
  *
@@ -73,7 +80,10 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      */
     orientation?: 'vertical';
     private current;
-    /** The destinations the consumer slotted. */
+    /**
+     * The destinations the consumer slotted, and the items of a slotted list in
+     * place of the list.
+     */
     private get items();
     /** Re-measures when the links change or hand over the current page. */
     private watch;

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

@@ -8,6 +8,10 @@ import { AriaForwardController, customElement, focusableElements, focusItemOf, H
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const isList = (element) => element.localName === 'ul' ||
+    element.localName === 'ol' ||
+    element.getAttribute('role') === 'list';
+const markOf = (item) => item.hasAttribute('aria-current') ? item : item.querySelector('[aria-current]');
 const navigable = (item) => {
     const control = () => item.navigationControl ??
         (item.matches(FOCUSABLE) ? item : focusableElements(item)[0]);
@@ -26,10 +30,11 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             active: () => {
                 const items = this.items;
                 const marked = (item) => {
-                    const current = item.getAttribute('aria-current');
-                    return current !== null && current !== 'false';
+                    const current = markOf(item)?.getAttribute('aria-current');
+                    return current !== null && current !== undefined && current !== 'false';
                 };
-                return (items.find((item) => item.getAttribute('aria-current') === 'page') ?? items.find(marked));
+                return (items.find((item) => markOf(item)?.getAttribute('aria-current') === 'page') ??
+                    items.find(marked));
             },
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
@@ -52,14 +57,14 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     static { this.words = 'helix-navigation'; }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
-        return (slot?.assignedElements() ?? []);
+        return (slot?.assignedElements() ?? []).flatMap((one) => isList(one) ? [...one.children] : [one]);
     }
     watch() {
         this.current?.disconnect();
         this.indicator.place();
         this.current = new MutationObserver(() => this.indicator.place());
         for (const item of this.items) {
-            this.current.observe(item, { attributeFilter: ['aria-current'] });
+            this.current.observe(item, { attributeFilter: ['aria-current'], subtree: true });
         }
     }
     connectedCallback() {

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

@@ -29,6 +29,17 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * the feed holds one page of a longer list, and each row says its place in the
  * whole of it.
  *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | On a row, moves to the next or the previous row. |
+ * | Home, End | On a row, moves to the first or the last row. |
+ * | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |
+ * | Control+End | From anywhere in the feed, moves to the first control after it on the page. |
+ * | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |
+ * | Tab | Moves through the controls in a row, and on out of the feed. |
+ *
  * **`load-more` adds a button after the list** that sends `helix-load-more`,
  * for a feed that holds one page of a longer list. Append the next page, set
  * `loading` while it is on its way, and take `load-more` off once there is
@@ -246,6 +257,12 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * is how the APG feed pattern moves on from inside an article.
      */
     private readonly handleKeydown;
+    /**
+     * `Control+End` and `Control+Home`, which leave the feed for the first
+     * control after it or the nearest one before it, as the APG feed pattern
+     * does. A feed of many rows is otherwise a long walk to get past.
+     */
+    private leave;
     /**
      * Tells each row whether it is the stop, and where it sits in the feed.
      *

package/dist/notifications/root/notifications-root.js

@@ -34,7 +34,11 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
         };
         this.handleKeydown = (event) => {
-            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+            if (event.defaultPrevented || event.altKey || event.metaKey) {
+                return;
+            }
+            if (event.ctrlKey) {
+                this.leave(event);
                 return;
             }
             const rows = this.reachable;
@@ -151,6 +155,22 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     rowFocused(target) {
         return this.reachable.find((row) => rowBox(row) === target);
     }
+    leave(event) {
+        if (event.key !== 'End' && event.key !== 'Home') {
+            return;
+        }
+        const after = event.key === 'End';
+        const outside = focusableElements(document.body).filter((one) => one.tabIndex >= 0 &&
+            !deepContains(this, one) &&
+            (this.compareDocumentPosition(one) &
+                (after ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING)) !==
+                0);
+        const next = after ? outside[0] : outside.at(-1);
+        if (next) {
+            event.preventDefault();
+            next.focus();
+        }
+    }
     rove() {
         const rows = this.reachable;
         const stop = rovingStop(rows, this.stopRow);

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

@@ -11,9 +11,10 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * The trigger is slotted and stays your own element. A Helix trigger is told
  * whether the popover is open inside its own shadow root. On a plain element,
- * such as a `<button>`, the popover writes `aria-expanded` only once a reader
- * has pressed it, which is after any hydration, and never where you wrote
- * `aria-expanded` yourself. It writes nothing else onto your markup.
+ * such as a `<button>`, the popover writes `aria-expanded`, from a frame after
+ * its own first render, or from the first press where that comes sooner. It
+ * never writes it where you wrote `aria-expanded` yourself, and writes nothing
+ * else onto your markup.
  *
  * The panel is in the top layer through the popover API, so it needs no
  * `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
@@ -36,6 +37,17 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * The panel's name is `label` when you set it. Otherwise it is the first
  * heading in the panel, or the elements an `aria-labelledby` on the host names.
+ * A development build warns when a popover opens with nothing but
+ * `fallback-label` to name it.
+ *
+ * **Keyboard.** Opening moves focus to the first control in the panel, or to
+ * the panel where it holds none.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter, Space | On the trigger, opens the panel, or closes it while it is open. |
+ * | Escape | Closes the panel and puts focus back on the trigger. |
+ * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
  *
  * `arrow` draws a point on the panel's edge facing the trigger. The side the
  * panel landed on is on the host as `:state(placed-top)` and its kin, and the
@@ -198,7 +210,7 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     private readonly notePress;
     disconnectedCallback(): void;
     private readonly handleTriggerClick;
-    /** Whether a reader has pressed the trigger, which is after any hydration. */
+    /** Whether the trigger may be told, from a frame after the first render or a reader's press. */
     private pressed;
     /** The plain trigger this popover writes `aria-expanded` on, once it may. */
     private told;
@@ -207,9 +219,8 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      *
      * A Helix trigger by property, through `tellDisclosure`. A plain element,
      * which has no shadow root to keep the state out of the markup, by
-     * `aria-expanded`, and only from a reader's first press on: by then a server
-     * or a framework has long finished writing the element, so the write cannot
-     * be a hydration mismatch. One that already carries `aria-expanded` is the
+     * `aria-expanded`, from a frame after the first render or a reader's first
+     * press on, so a closed panel is said to be closed before anyone presses. One that already carries `aria-expanded` is the
      * consumer's to keep, and is left alone.
      */
     private tellTrigger;