@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -4,35 +4,41 @@ 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, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+const isSection = (element) => 'isMenuSection' in element && element.isMenuSection === true;
 let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
         this.backLabel = 'Back';
+        this.context = false;
         this.label = '';
         this.offset = 4;
         this.placement = 'bottom-start';
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isMenuItem' in element && element.isMenuItem === true,
-            root: () => [...this.children].filter((child) => child.slot !== 'trigger'),
+            root: () => [...this.children]
+                .filter((child) => child.slot !== 'trigger')
+                .flatMap((child) => (isSection(child) ? [...child.children] : [child])),
             slot: 'submenu',
         });
         this.keys = new KeyboardNavigationController(this, {
             items: () => (this.open ? this.items : []),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
-            typeahead: (item) => slottedWords(item, ['']),
+            typeahead: typeaheadBy((item) => slottedWords(item, [''])),
         });
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('surface'),
         });
         this.panel = new PopoverController(this, {
-            anchor: () => this.trigger,
+            anchor: () => this.context && this.point
+                ? this.renderRoot?.querySelector('#point')
+                : this.trigger,
             boundary: () => this,
             offset: () => this.offset,
             onDismiss: () => this.hide(),
@@ -40,6 +46,28 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             placement: () => this.placement,
             surface: () => this.partNamed('surface'),
         });
+        this.handleContextMenu = (event) => {
+            if (!this.context) {
+                return;
+            }
+            const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
+            const areas = slot?.assignedElements({ flatten: true }) ?? [];
+            if (!event.composedPath().some((node) => areas.includes(node))) {
+                return;
+            }
+            event.preventDefault();
+            const box = this.trigger.getBoundingClientRect();
+            const keyed = event.clientX === 0 && event.clientY === 0;
+            this.point = keyed ? { x: box.left, y: box.top } : { x: event.clientX, y: event.clientY };
+            if (this.open) {
+                this.requestUpdate();
+                this.updateComplete.then(() => this.panel.reposition());
+                return;
+            }
+            const active = deepActiveElement();
+            this.returnTo = active instanceof HTMLElement ? active : undefined;
+            this.show();
+        };
         this.handleSelect = (event) => {
             const item = event.target;
             if (!this.items.includes(item)) {
@@ -93,6 +121,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             event.preventDefault();
         };
         this.handleTriggerClick = () => {
+            if (this.context) {
+                return;
+            }
             if (this.open) {
                 this.hide();
             }
@@ -130,8 +161,11 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.panel.hide();
         this.drilldown.reset();
         if (deepContains(this, deepActiveElement())) {
-            this.trigger.focus();
+            ;
+            (this.context ? (this.returnTo ?? this.trigger) : this.trigger).focus();
         }
+        this.point = undefined;
+        this.returnTo = undefined;
     }
     enter(item) {
         if (!this.drilldown.enter(item)) {
@@ -149,7 +183,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.updateComplete.then(() => leaving?.focus());
     }
     handleClosedKeydown(event) {
-        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+        if (this.context || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) {
             return;
         }
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
@@ -165,17 +199,30 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('helix-select', this.handleSelect, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('contextmenu', this.handleContextMenu);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelect, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('contextmenu', this.handleContextMenu);
     }
     updated(changed) {
         super.updated(changed);
-        this.tellTrigger();
+        if (!this.context) {
+            this.tellTrigger();
+        }
         for (const child of this.children) {
+            if (isSection(child)) {
+                child.onPage = this.drilldown.atRoot;
+                for (const row of child.children) {
+                    if (row.isMenuItem === true) {
+                        this.mark(row, this.drilldown.atRoot);
+                    }
+                }
+                continue;
+            }
             const item = child;
             if (item.isMenuItem !== true) {
                 continue;
@@ -217,7 +264,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
     }
     render() {
-        return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>
+        const point = this.context && this.point;
+        return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>${point
+            ? html `<span
+            id="point"
+            aria-hidden="true"
+            style="position: fixed; left: 0; top: 0; translate: ${point.x}px ${point.y}px"
+          ></span>`
+            : nothing}
       <div
         part="surface"
         popover="manual"
@@ -250,6 +304,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
 __decorate([
     property({ attribute: 'back-label' })
 ], HelixHeadlessMenu.prototype, "backLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessMenu.prototype, "context", void 0);
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "label", void 0);

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

@@ -0,0 +1,55 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A group of rows in a menu, under a heading.
+ *
+ * @description
+ * The rows inside it are the menu's rows: the arrow keys and typed letters move
+ * through them with the rest, and a set of `exclusive` rows is still the run
+ * of them next to each other. The section is a `group` named by its heading,
+ * as React Aria's menu section is, so a screen reader says which group a row
+ * is in as it arrives.
+ *
+ * A section goes on the menu's first page. A submenu's page takes rows and
+ * dividers.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Menu group, Menu heading
+ * @documentation https://fusion.dev/helix/components/menu
+ *
+ * @slot - The rows.
+ * @slot heading - The heading, for content richer than `label`.
+ *
+ * @csspart heading - The words that name the section.
+ * @csspart section - The group that holds the heading and the rows.
+ */
+export declare class HelixHeadlessMenuSection extends HelixElement {
+    /**
+     * The heading's words, when they are plain text. Content in the `heading`
+     * slot replaces it.
+     */
+    label: string;
+    /**
+     * @internal Set by the menu: whether the section is on the page showing. A
+     * property, because the menu writes it after the section upgrades.
+     */
+    onPage: boolean;
+    /** @internal What a menu reads to tell a section from a row. */
+    readonly isMenuSection = true;
+    /**
+     * Whether anything is slotted as the heading, read from the children before
+     * each render and from the slot after. A section with neither this nor a
+     * `label` draws no heading.
+     */
+    private heading;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    private readonly readHeading;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-menu-section': HelixHeadlessMenuSection;
+    }
+}

package/dist/menu/section/menu-section.js

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+let HelixHeadlessMenuSection = class HelixHeadlessMenuSection extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.onPage = true;
+        this.isMenuSection = true;
+        this.heading = false;
+        this.readHeading = (event) => {
+            this.heading = event.target.assignedNodes().length > 0;
+        };
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.heading = this.knownChildren.some((child) => child.slot === 'heading');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    render() {
+        if (!this.onPage) {
+            return nothing;
+        }
+        return html `<div part="section" role="group" aria-labelledby="heading">
+      <div
+        id="heading"
+        part="heading"
+        role="presentation"
+        ?hidden=${this.label === '' && !this.heading}
+      >
+        <slot name="heading" @slotchange=${this.readHeading}>${this.label}</slot>
+      </div>
+      <slot></slot>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMenuSection.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessMenuSection.prototype, "onPage", void 0);
+__decorate([
+    state()
+], HelixHeadlessMenuSection.prototype, "heading", void 0);
+HelixHeadlessMenuSection = __decorate([
+    customElement('helix-headless-menu-section')
+], HelixHeadlessMenuSection);
+export { HelixHeadlessMenuSection };

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

@@ -71,6 +71,21 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * no reader.
      */
     band?: MeterBand;
+    /**
+     * `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
+     * decimals. Written as JSON in the attribute.
+     *
+     * ```html
+     * <helix-meter value="18" max="32" format-options='{"style":"unit","unit":"gigabyte"}'></helix-meter>
+     * ```
+     *
+     * A `percent` style writes the share of the range, and any other the value
+     * itself, so the example says "18 GB", and a value past an end as it is.
+     * Absent is a whole percentage. The words are announced as well as shown.
+     * `value-text` still wins.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
     /**
      * Bottom of the high band.
      *
@@ -199,7 +214,11 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * keeps an unbanded meter from being painted as good news.
      */
     private get computedBand();
-    /** What the reading says, which is the consumer's words or a percentage. */
+    /**
+     * What the reading says: the consumer's words, or the reading in
+     * `format-options`, a share of the range for a percent and the value for
+     * anything else.
+     */
     private get text();
     protected willUpdate(changed: PropertyValues): void;
     /**

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

@@ -4,21 +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 { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
+import { customElement, formatNumber, HelixElement, hostAria, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-const percents = new Map();
-const percent = (share, locale) => {
-    let format = percents.get(locale);
-    if (!format) {
-        format = new Intl.NumberFormat(locale || undefined, {
-            maximumFractionDigits: 0,
-            style: 'percent',
-        });
-        percents.set(locale, format);
-    }
-    return format.format(share);
-};
+const WHOLE_PERCENT = { maximumFractionDigits: 0, style: 'percent' };
 let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     constructor() {
         super(...arguments);
@@ -80,7 +69,11 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         return distance === 0 ? 'good' : distance === 1 ? 'fair' : 'poor';
     }
     get text() {
-        return this.valueText || percent(this.ratio, this.locale);
+        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)));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -90,7 +83,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = String(this.reading);
         this.internals.ariaValueText =
-            this.valueText || (this.beyond ? percent(this.ratio, this.locale) : null);
+            this.valueText || this.formatOptions !== undefined || this.beyond ? this.text : null;
     }
     renderRound() {
         const bounds = this.thresholds;
@@ -144,6 +137,9 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "band", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessMeter.prototype, "formatOptions", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMeter.prototype, "high", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A set of destinations, with a marker on the current one.
@@ -22,6 +22,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Set `orientation="vertical"` to stack the destinations in a column, for a
  * sidebar.
  *
+ * Set `arrows` and the arrow keys move focus between the destinations, as
+ * Radix's navigation menu does: left and right along a row, up and down a
+ * column, Home and End to the ends. A `Megamenu` among them is reached at its
+ * trigger. Tab still stops at every link, since a navigation is a list of
+ * links and not a single control, and the keys across the other axis are
+ * left to the page and to an open panel.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -29,12 +36,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/navigation
  *
  * @slot - The destinations, as your own links.
+ * @slot indicator - A marker of your own, drawn inside the `indicator` part, where the current destination's place and size reach it.
  *
- * @csspart indicator - The marker that moves to the current destination.
+ * @csspart indicator - The marker that moves to the current destination. It carries the destination's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed.
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessNavigation extends HelixElement {
     private readonly indicator;
+    /**
+     * Whether the arrow keys move focus between the destinations.
+     *
+     * Off by default, so a page whose readers scroll with the arrow keys while
+     * a link has focus keeps doing so.
+     */
+    arrows: boolean;
     /**
      * The landmark's name, read by screen readers.
      *
@@ -43,6 +58,7 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      * second "Main".
      */
     label: string;
+    protected readonly keys: KeyboardNavigationController;
     /** Carries a host `aria-label` and `aria-labelledby` to the `<nav>`. */
     protected readonly aria: AriaForwardController;
     /**

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

@@ -4,9 +4,24 @@ 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, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, 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) => {
+            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() {
         super(...arguments);
@@ -23,14 +38,22 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             observe: () => this.items,
             surface: () => this.partNamed('nav'),
         });
+        this.arrows = false;
         this.label = 'Main';
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => (this.arrows ? this.items.map(navigable) : []),
+            origin: 'focus',
+            reserved: () => this.orientation === 'vertical' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowDown', 'ArrowUp'],
+            selects: () => false,
+            wrap: false,
+        });
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('nav'),
         });
     }
     get items() {
-        const slot = this.renderRoot.querySelector('slot');
+        const slot = this.renderRoot.querySelector('slot:not([name])');
         return (slot?.assignedElements() ?? []);
     }
     watch() {
@@ -57,11 +80,14 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     }
     render() {
         return html `<nav part="nav" aria-label=${this.label}>
-      <div part="indicator" aria-hidden="true"></div>
+      <div part="indicator" aria-hidden="true"><slot name="indicator"></slot></div>
       <slot @slotchange=${() => this.watch()}></slot>
     </nav>`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNavigation.prototype, "arrows", void 0);
 __decorate([
     property()
 ], HelixHeadlessNavigation.prototype, "label", void 0);

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

@@ -29,6 +29,12 @@ 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.
  *
+ * **`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
+ * nothing more. While the feed is loading the button stays, so focus stays on
+ * it, and it is `aria-disabled` and sends nothing.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -40,6 +46,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @slot header - Above the list, for a title and the mark-all control.
  *
  * @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.
@@ -49,6 +56,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @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 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 media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
@@ -67,6 +75,15 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * The feed's name, read by screen readers.
      */
     label: string;
+    /**
+     * 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.
+     */
+    loadMore: boolean;
+    /**
+     * The text of the `load-more` button.
+     */
+    loadMoreLabel: string;
     /**
      * Whether to draw a control that marks everything read.
      */
@@ -244,6 +261,14 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * Asks for the next page, for the `load-more` button, unless a page is
+     * already on its way.
+     *
+     * The button stays while the feed is loading, marked `aria-disabled`, so
+     * focus stays on it: removed, it took focus with it to the body.
+     */
+    private readonly askForMore;
     /**
      * Marks everything read, and keeps focus in the feed.
      *

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, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
+import { 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,8 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loadMore = false;
+        this.loadMoreLabel = 'Load more';
         this.markAll = false;
         this.markAllLabel = 'Mark all as read';
         this.handleSlotChange = () => {
@@ -51,6 +53,11 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
                 rowBox(next)?.focus();
             }
         };
+        this.askForMore = () => {
+            if (!this.loading) {
+                this.dispatchEvent(new HelixLoadMoreEvent());
+            }
+        };
         this.handleMarkAll = (event) => {
             const button = event.currentTarget;
             const focused = this.shadowRoot?.activeElement === button;
@@ -146,9 +153,9 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     rove() {
         const rows = this.reachable;
         const stop = rovingStop(rows, this.stopRow);
-        const direct = this.rows;
-        for (const row of this.items) {
-            const position = direct.indexOf(row) + 1;
+        const items = this.items;
+        for (const row of items) {
+            const position = items.indexOf(row) + 1;
             whenHydrated(row, () => {
                 row.stop = row === stop;
                 row.position = this.total === undefined ? 0 : position;
@@ -205,17 +212,38 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             </button>`
             : nothing}
       </div>
-      <div part="list" role="list" aria-busy=${this.loading ? 'true' : nothing}>
+      <div
+        part="list"
+        role="list"
+        aria-busy=${this.loading ? 'true' : nothing}
+        aria-label=${this.label || nothing}
+      >
         <slot name="items" @slotchange=${this.handleSlotChange}></slot>
         ${this.renderStatus(hasItems)}
       </div>
       ${this.renderLive(hasItems)}
+      ${this.loadMore
+            ? html `<button
+              part="more"
+              type="button"
+              aria-disabled=${this.loading ? 'true' : nothing}
+              @click=${this.askForMore}
+            >
+              ${this.loadMoreLabel}
+            </button>`
+            : nothing}
       <div part="footer"><slot name="footer"></slot></div>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessNotifications.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-more', type: Boolean })
+], HelixHeadlessNotifications.prototype, "loadMore", void 0);
+__decorate([
+    property({ attribute: 'load-more-label' })
+], HelixHeadlessNotifications.prototype, "loadMoreLabel", void 0);
 __decorate([
     property({ attribute: 'mark-all', type: Boolean })
 ], HelixHeadlessNotifications.prototype, "markAll", void 0);