@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -1,4 +1,4 @@
-import { CommandController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, HelixElement, OpenPhaseController, SwipeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -9,11 +9,26 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * `helix-before-open` and `helix-before-close` events work the same way as on
  * an accordion item.
  *
- * The drawer is modal by default, which means three things:
+ * The drawer is modal by default, which means four things:
  *
  * - focus is trapped inside
  * - Escape and a press outside close it
  * - the page behind is covered
+ * - the page behind does not scroll
+ *
+ * A drawer with `modal="false"` leaves the page usable and still closes on
+ * Escape, in a browser without `closedby` as well.
+ *
+ * **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
+ * fractions of the panel a reader can leave on screen, such as `0.5 1` for a
+ * sheet that rests half open: it opens at the smallest, and a swipe settles at
+ * the nearest. While a swipe moves the panel, the distance is written on it as
+ * `--drawer-swipe-x` and `--drawer-swipe-y`. `swipe="false"` turns swiping off.
+ *
+ * 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.
  *
  * 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
@@ -36,17 +51,24 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/drawer
  *
  * @slot - The drawer's content.
+ * @slot footer - Content pinned below the scrolling area, such as the drawer's actions.
  * @slot header - Content pinned above the scrolling area.
  *
  * @event {Event} close - Sent from the host after the drawer closes, because the native `close` event does not leave the shadow root.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the panel closes, and cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the panel opens, and cancelable. Canceling it keeps the panel closed.
- * @event {Event} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
  *
  * @csspart content - The scrolling content region.
+ * @csspart footer - The footer region.
  * @csspart header - The header region.
  * @csspart panel - The sliding panel.
  *
+ * @cssproperty --drawer-swipe-x - How far a swipe, or a snap point, has moved the panel across, in pixels, toward the right.
+ * @cssproperty --drawer-swipe-y - How far a swipe, or a snap point, has moved the panel down, in pixels.
+ *
+ * @cssstate entering - From the moment the drawer opens until its entrance has finished.
+ * @cssstate exiting - From the moment the drawer closes until its exit has finished.
  * @cssstate open - While the drawer is open.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
@@ -65,9 +87,11 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      */
     closedBy?: 'any' | 'closerequest' | 'none';
     /**
-     * Accessible name for the panel.
+     * Accessible name for the panel. When it is empty, the heading in the
+     * `header` slot names the panel.
      */
     label: string;
+    protected readonly aria: AriaForwardController;
     /**
      * Whether the drawer blocks the page behind it.
      *
@@ -91,6 +115,21 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * guarantees is the absence, and a sheet selects on it.
      */
     placement?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * The fractions of the panel a reader can leave on screen, as a list such as
+     * `0.5 1`. The drawer opens at the smallest, and a swipe comes to rest at the
+     * nearest, or closes the drawer below the smallest.
+     *
+     * Empty is `1`: the whole panel, and a swipe either closes it or puts it
+     * back.
+     */
+    snapPoints: string;
+    /**
+     * Whether a touch or a pen can swipe the drawer away. `swipe="false"` turns
+     * it off, for a panel whose content has its own use for the gesture, such as
+     * a map.
+     */
+    swipe: boolean;
     /**
      * What the dialog closed with, the way `<dialog>` reports it.
      *
@@ -111,6 +150,37 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     set returnValue(value: string);
     /** What a value set before the element existed is kept in. */
     private returned;
+    protected readonly phases: OpenPhaseController;
+    /** How far the panel rests toward its edge, in pixels, at the snap point it settled on. */
+    private rest;
+    /** The edge the panel leaves through, from its placement and the writing direction. */
+    private get edge();
+    /** The panel's size along the swipe, in pixels. */
+    private get extent();
+    protected readonly swipes: SwipeController;
+    /**
+     * Writes how far the panel sits toward its edge, as the two properties the
+     * styled tier translates it by. Nothing is written at rest.
+     */
+    private place;
+    /** Brings a released swipe to rest: at a snap point, or closed through the request. */
+    private settle;
+    /** Opens the drawer. */
+    show(): void;
+    /**
+     * Requests that the drawer close, and takes what it closed with, the way
+     * `Dialog.close(value)` does. A `helix-before-close` listener can refuse it,
+     * and then the value is not kept.
+     */
+    close(returnValue?: string): void;
+    /**
+     * Escape on a drawer that is not modal, in a browser without `closedby`.
+     *
+     * `show()` gives a `<dialog>` no close watcher, and `closedby="closerequest"`
+     * is what asks for one. Where the browser does not know the attribute, the
+     * key is read here, and comes through the same request.
+     */
+    private readonly handleKeydown;
     /** The panel, which is a real `<dialog>`. */
     private get panel();
     /**
@@ -126,11 +196,27 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     /**
      * A press on the backdrop, which lands on the dialog element itself.
      *
-     * The panel fills only part of the dialog's box, so a press beside it hits
-     * the dialog and not a child. A native `<dialog>` does not close on that, and
-     * it is the gesture that most obviously means close.
+     * A native `<dialog>` does not close on that, and it is the gesture that most
+     * obviously means close.
+     *
+     * **The target alone is not enough.** The panel is the `<dialog>`, and a
+     * press in its own padding has the dialog as its target too, the same as a
+     * press on the backdrop. So the point is compared against the panel's box,
+     * as `Dialog` does.
      */
     private readonly handleBackdrop;
+    /** Whether the `header` slot's heading is what currently names the panel. */
+    private namedByHeader;
+    /**
+     * Names the panel by its heading, where nothing else names it.
+     *
+     * An element reference, because the heading is in the light DOM and the
+     * `<dialog>` is in this shadow root, which an IDREF cannot cross. `label` and
+     * an `aria-labelledby` on the host come first. A browser without element
+     * reflection keeps the fallback name.
+     */
+    private nameByHeader;
+    disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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 { CommandController, customElement, HelixElement, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, edgeOffset, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { startsSwipe } from '../swipe-start.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
@@ -18,8 +19,38 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             },
         });
         this.label = '';
+        this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
+        this.snapPoints = '';
+        this.swipe = true;
         this.returned = '';
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.panel,
+        });
+        this.rest = 0;
+        this.swipes = new SwipeController(this, {
+            axis: () => (this.open && this.swipe ? swipeAxis(this.edge) : undefined),
+            end: (dx, dy, vx, vy) => this.settle(dx, dy, vx, vy),
+            move: (dx, dy) => this.place(Math.max(0, this.rest + towardEdge(this.edge, dx, dy))),
+            start: (target, event) => startsSwipe(target, event.pointerType, swipeAxis(this.edge), this.partNamed('content')),
+            surface: () => this.panel,
+        });
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape' ||
+                event.defaultPrevented ||
+                this.modal ||
+                !this.open ||
+                closedByKnown()) {
+                return;
+            }
+            event.preventDefault();
+            this.requestOpen(false);
+        };
         this.handleCancel = (event) => {
             event.preventDefault();
             this.requestOpen(false);
@@ -31,10 +62,20 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             this.relayNativeEvent(event);
         };
         this.handleBackdrop = (event) => {
-            if (event.target === this.panel && this.modal) {
-                this.requestOpen(false);
+            const panel = this.panel;
+            if (!panel || event.target !== panel || !this.modal) {
+                return;
+            }
+            const box = panel.getBoundingClientRect();
+            if (event.clientX >= box.left &&
+                event.clientX <= box.right &&
+                event.clientY >= box.top &&
+                event.clientY <= box.bottom) {
+                return;
             }
+            this.requestOpen(false);
         };
+        this.namedByHeader = false;
     }
     get returnValue() {
         return this.panel?.returnValue ?? this.returned;
@@ -46,11 +87,79 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             panel.returnValue = value;
         }
     }
+    get edge() {
+        return swipeEdge(this.placement ?? 'end', isRtl(this));
+    }
+    get extent() {
+        const box = this.panel?.getBoundingClientRect();
+        return (swipeAxis(this.edge) === 'x' ? box?.width : box?.height) ?? 0;
+    }
+    place(travel) {
+        const panel = this.panel;
+        if (!panel) {
+            return;
+        }
+        const { x, y } = edgeOffset(this.edge, travel);
+        const px = (value) => (value === 0 ? '' : `${Math.round(value)}px`);
+        panel.style.setProperty('--drawer-swipe-x', px(x));
+        panel.style.setProperty('--drawer-swipe-y', px(y));
+    }
+    settle(dx, dy, vx, vy) {
+        const edge = this.edge;
+        const size = this.extent;
+        const shown = settleSwipe({
+            points: parseSnapPoints(this.snapPoints),
+            size,
+            travel: Math.max(0, this.rest + towardEdge(edge, dx, dy)),
+            velocity: towardEdge(edge, vx, vy),
+        });
+        if (shown === 0 && this.requestOpen(false)) {
+            return;
+        }
+        if (shown !== 0) {
+            this.rest = snapTravel(size, shown);
+        }
+        this.place(this.rest);
+    }
+    show() {
+        this.requestOpen(true);
+    }
+    close(returnValue) {
+        const previous = this.returnValue;
+        if (returnValue !== undefined) {
+            this.returnValue = returnValue;
+        }
+        if (!this.requestOpen(false) && returnValue !== undefined) {
+            this.returnValue = previous;
+        }
+    }
     get panel() {
         return this.partNamed('panel');
     }
+    nameByHeader() {
+        const slot = this.renderRoot.querySelector('slot[name="header"]');
+        const heading = this.label || this.hasAttribute('aria-labelledby')
+            ? []
+            : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
+        this.namedByHeader = reflectElements(this.panel, 'ariaLabelledByElements', heading, this.namedByHeader);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockScroll(this);
+    }
     updated(changed) {
         super.updated(changed);
+        this.nameByHeader();
+        if (changed.has('open') && !this.open) {
+            this.rest = 0;
+            this.place(0);
+        }
+        if (this.open && this.modal) {
+            lockScroll(this);
+        }
+        else {
+            unlockScroll(this);
+        }
         const panel = this.panel;
         if (!panel) {
             return;
@@ -62,22 +171,27 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             else {
                 panel.show();
             }
+            this.rest = snapTravel(this.extent, parseSnapPoints(this.snapPoints)[0] ?? 1);
+            this.place(this.rest);
         }
         else if (!this.open && panel.open) {
             panel.close();
         }
     }
     render() {
+        const closedBy = this.closedBy ?? (this.modal ? undefined : 'closerequest');
         return html `<dialog
       part="panel"
-      closedby=${this.closedBy ?? nothing}
+      closedby=${closedBy ?? nothing}
       aria-label=${this.label || 'Drawer'}
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
+      @keydown=${this.handleKeydown}
     >
-      <div part="header"><slot name="header"></slot></div>
+      <div part="header"><slot name="header" @slotchange=${this.nameByHeader}></slot></div>
       <div part="content"><slot></slot></div>
+      <div part="footer"><slot name="footer"></slot></div>
     </dialog>`;
     }
 };
@@ -93,7 +207,14 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDrawer.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'snap-points' })
+], HelixHeadlessDrawer.prototype, "snapPoints", void 0);
+__decorate([
+    property({ converter: onUnlessFalse })
+], HelixHeadlessDrawer.prototype, "swipe", void 0);
 HelixHeadlessDrawer = __decorate([
     customElement('helix-headless-drawer')
 ], HelixHeadlessDrawer);
 export { HelixHeadlessDrawer };
+const closedByKnown = () => typeof HTMLDialogElement !== 'undefined' && 'closedBy' in HTMLDialogElement.prototype;

package/dist/drawer/swipe-start.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a press may start swiping a drawer away.
+ *
+ * Not a mouse, which drags to select text. Not a press on a field or on
+ * editable text, which drags to move its caret. And not a press inside a
+ * scroller that can scroll along the swipe, which drags to scroll, so a bottom
+ * sheet holding a long list scrolls the list.
+ */
+export declare const startsSwipe: (target: Element, pointerType: string, axis: 'x' | 'y', scroller: Element | null | undefined) => boolean;

package/dist/drawer/swipe-start.js

@@ -0,0 +1,12 @@
+const EDITABLE = 'input, select, textarea, [contenteditable]:not([contenteditable="false"])';
+export const startsSwipe = (target, pointerType, axis, scroller) => {
+    if (pointerType === 'mouse' || target.closest(EDITABLE)) {
+        return false;
+    }
+    if (!scroller || !(scroller === target || scroller.contains(target))) {
+        return true;
+    }
+    return axis === 'x'
+        ? scroller.scrollWidth <= scroller.clientWidth
+        : scroller.scrollHeight <= scroller.clientHeight;
+};

package/dist/drilldown/item/drilldown-item.d.ts

@@ -112,21 +112,24 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /**
-     * Whether this is the current row, which in a drill-down is the row with
-     * focus.
+     * Whether the row has focus, which makes it the row the keyboard is on.
      *
-     * A radio group's selection is an answer it holds; a page of rows has no
-     * answer, only the row a reader has walked to, so focus is the whole of what
-     * "the current one" can mean here. This is `Menu.Item`'s reading word for
-     * word, and the two are one pattern: a menu that drills and a drill-down are
-     * the same rows through the same controller.
+     * `Option` calls the same thing `active`. A page of rows holds no answer the
+     * way a radio group does, only the row a reader has walked to, so focus is
+     * the whole of what "the current one" can mean here. This is `Menu.Item`'s
+     * reading word for word, and the two are one pattern: a menu that drills and
+     * a drill-down are the same rows through the same controller.
      *
-     * Asked of the document rather than of the shadow root. `focusItem` puts
-     * focus on the control inside this row and the platform retargets it, so from
-     * outside the shadow tree `activeElement` is this element already and nothing
-     * has to walk a tree. `ShadowRoot.activeElement` is also the reading that does
-     * not survive happy-dom, which climbs `getRootNode()` to the top and then
-     * dereferences what it ran out of.
+     * The focused node is found through every shadow root and asked whether it
+     * is in this row's own, as `Menu.Item` does, so a drill-down inside another
+     * component's shadow root still knows its current row.
+     */
+    get active(): boolean;
+    /**
+     * Whether the row has focus, the same as `active`.
+     *
+     * @deprecated Read `active`. Everywhere else in the library `selected` means
+     * chosen out of a set, and a drill-down row is never chosen that way.
      */
     get selected(): boolean;
     /** Fires `helix-select` for this row. */

package/dist/drilldown/item/drilldown-item.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -37,8 +37,12 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     focusItem() {
         this.partNamed('item')?.focus();
     }
+    get active() {
+        const active = deepActiveElement();
+        return active !== null && active.getRootNode() === this.renderRoot;
+    }
     get selected() {
-        return this.ownerDocument.activeElement === this;
+        return this.active;
     }
     select() {
         if (this.disabled) {

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
@@ -20,6 +20,11 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * and reads the rest from the DOM. The behavior lives in `DrilldownController`,
  * which `Menu` shares.
  *
+ * The rows of the page showing are a `menu`, named by `label` on the top page
+ * and by the page's title below it. The back button and the title sit above
+ * the menu. Disabled rows stay reachable with the arrow keys, and typing a
+ * letter moves to the next row whose name starts with it.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -36,14 +41,18 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @csspart header - The bar above a page, which holds the back button and the page's name.
  * @csspart live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
  * @csspart loading - Shown while the entries load.
- * @csspart page - The region the rows are in.
+ * @csspart page - The menu the rows are in.
  * @csspart title - The name of the page showing.
  *
  * @cssstate drilled - A row's page is showing, so a frame around the drilldown can style itself for that depth.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
     /**
-     * The region's name, read by screen readers.
+     * The name of the top page's menu, read by screen readers. A page below it is
+     * named by its title.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the top page too,
+     * and wins over this.
      */
     label: string;
     /**
@@ -66,8 +75,16 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      */
     private direction?;
     private readonly drilldown;
-    /** The rows on the page showing, which is what the keys move over. */
+    /**
+     * The rows on the page showing, which is what the keys move over.
+     *
+     * Disabled rows included. A row renders `aria-disabled` and keeps its
+     * `tabindex` so a reader can reach it and hear why it cannot be chosen, and
+     * `select()` is what refuses it.
+     */
     private get items();
+    /** Carries a host `aria-label` and `aria-labelledby` to the menu. */
+    protected readonly aria: AriaForwardController;
     /**
      * Moving between rows, which is `Menu`'s arrangement and not a second one.
      *
@@ -115,7 +132,6 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
     private readonly handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** Walks the tree marking which rows are on the page showing. */
     private mark;

package/dist/drilldown/root/drilldown-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, DrilldownController, HelixElement, hostAria, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -20,14 +20,28 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             root: () => [...this.children],
             slot: 'page',
         });
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('page'),
+        });
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.items,
+            items: () => this.items.map((item) => ({
+                contains: (node) => item.contains(node),
+                disabled: false,
+                focusItem: () => item.focusItem(),
+                select: () => item.select(),
+                get selected() {
+                    return item.active;
+                },
+                words: slottedWords(item, ['']),
+            })),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
+            typeahead: (item) => item.words,
         });
         this.handleFocusIn = (event) => {
             const item = this.drilldown.rows.find((row) => row.contains(event.target));
-            if (item && !item.disabled) {
+            if (item) {
                 for (const row of this.drilldown.rows) {
                     row.focusable = row === item;
                 }
@@ -71,7 +85,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         };
     }
     get items() {
-        return this.drilldown.rows.filter((item) => !item.disabled);
+        return this.drilldown.rows;
     }
     placeTabStop() {
         const items = this.items;
@@ -109,10 +123,6 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('focusin', this.handleFocusIn);
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'menu' });
-    }
     updated(changed) {
         super.updated(changed);
         const page = this.drilldown.page;
@@ -149,9 +159,15 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
                 ${unsafeSVG(caretLeft.content)}
               </svg>
             </button>
-            <span part="title">${this.drilldown.label}</span>
+            <span id="title" part="title">${this.drilldown.label}</span>
           </div>`}
-      <div aria-busy=${this.loading ? 'true' : nothing} part="page">
+      <div
+        aria-busy=${this.loading ? 'true' : nothing}
+        aria-label=${this.drilldown.atRoot ? this.label || nothing : nothing}
+        aria-labelledby=${this.drilldown.atRoot ? nothing : 'title'}
+        part="page"
+        role="menu"
+      >
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
       </div>${this.renderLive(this.hasRows)}`;