@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/donut-chart/root/donut-chart-root.js

@@ -30,6 +30,10 @@ const THICKNESS = {
     small: 26,
 };
 let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSource(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.sliceLabels = false;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
@@ -70,6 +74,9 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     get readings() {
         return this.shares.length;
     }
+    showsReading(at) {
+        return (this.shares[at]?.fraction ?? 0) > 0;
+    }
     render() {
         const shares = this.shares;
         return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}`;
@@ -111,9 +118,31 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         ${shares.map((share, index) => this.renderSegment(share, index))}
       </svg>
       ${this.hole === 'none' ? nothing : html `<div id="helix-chart-center" part="center"><slot></slot></div>`}
+      ${this.sliceLabels ? this.renderSliceLabels(shares) : nothing}
       ${this.renderTooltip()}
     </div>`;
     }
+    renderSliceLabels(shares) {
+        const half = this.sweep === 'half';
+        const top = half ? CENTER - EDGE : 0;
+        const tall = half ? EDGE + this.thickness / 2 : PLOT_HEIGHT;
+        const format = percentIn(this.locale);
+        return html `${shares.map((share, index) => {
+            if (share.fraction < 0.05) {
+                return nothing;
+            }
+            const angle = (share.start + share.fraction / 2) * 2 * Math.PI * this.span + this.origin;
+            const x = ((CENTER + Math.cos(angle) * this.radius) / PLOT_WIDTH) * 100;
+            const y = ((CENTER + Math.sin(angle) * this.radius - top) / tall) * 100;
+            return html `<span
+        aria-hidden="true"
+        data-series=${seriesIndex(index)}
+        part="slice-label"
+        style=${`--chart-series: var(--chart-series-${seriesIndex(index)}); ${half ? 'inset-inline-start' : 'left'}: ${x}%; top: ${y}%`}
+        >${format.format(share.fraction)}</span
+      >`;
+        })}`;
+    }
     get frame() {
         if (this.sweep !== 'half') {
             return `0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}`;
@@ -174,6 +203,21 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
       style="--chart-series: var(--chart-series-${seriesIndex(index)})"
     />`;
     }
+    withShare(share) {
+        const rows = this.sourceRows;
+        const column = this.plottedColumns[0];
+        const row = rows[share.row];
+        const cell = column === undefined ? undefined : row?.cells[column];
+        if (!row || !cell || column === undefined) {
+            return rows;
+        }
+        const cells = [...row.cells];
+        cells[column] = {
+            ...cell,
+            text: `${cell.text} (${percentIn(this.locale).format(share.fraction)})`,
+        };
+        return rows.map((one, index) => (index === share.row ? { ...row, cells } : one));
+    }
     renderTooltip() {
         const at = this.pointer.at;
         const share = this.shares[at];
@@ -188,7 +232,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         const y = ((CENTER + Math.sin(angle) * edge - top) / tall) * 100;
         const turned = this.sweep === 'half' && this.pointer.mirrored;
         const across = Math.cos(angle) > 0 !== turned;
-        return drawTooltip(this.sourceRows, share.row, this.tag('tooltip'), {
+        return drawTooltip(this.withShare(share), share.row, this.tag('tooltip'), {
             fixed: this.sweep !== 'half',
             placement: Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))
                 ? across
@@ -205,6 +249,9 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
 __decorate([
     property()
 ], HelixHeadlessDonutChart.prototype, "hole", void 0);
+__decorate([
+    property({ attribute: 'slice-labels', reflect: true, type: Boolean })
+], HelixHeadlessDonutChart.prototype, "sliceLabels", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDonutChart.prototype, "sweep", void 0);

package/dist/drawer/reveal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether a box reaches past the window's edges, by more than a pixel.
+ *
+ * What a drawer resting at a snap point asks of the element focus has just
+ * moved to: the part of the panel past the window's edge is off screen, and a
+ * control there has focus where the reader cannot see it.
+ */
+export declare const beyondWindow: (box: Pick<DOMRectReadOnly, 'bottom' | 'left' | 'right' | 'top'>, width: number, height: number) => boolean;

package/dist/drawer/reveal.js

@@ -0,0 +1 @@
+export const beyondWindow = (box, width, height) => box.top < -1 || box.left < -1 || box.bottom > height + 1 || box.right > width + 1;

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

@@ -27,6 +27,16 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * 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.
  *
+ * `snap` is the snap point the panel rests at, and `:state(snapped)` is on the
+ * host while that is less than the whole panel. `snapTo()` moves it to
+ * another. **Focus moving to a control past the
+ * window's edge opens the panel to its largest snap point**, so a reader
+ * moving through a half open sheet with `Tab` never lands on a control they
+ * cannot see.
+ *
+ * Set `dismissible` to draw a close control in the corner, labeled by
+ * `dismiss-label`, as `Dialog` draws one.
+ *
  * 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.
  *
@@ -51,6 +61,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/drawer
  *
  * @slot - The drawer's content.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - Content pinned below the scrolling area, such as the drawer's actions.
  * @slot header - Content pinned above the scrolling area.
  *
@@ -60,6 +71,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @event {ToggleEvent} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
  *
  * @csspart content - The scrolling content region.
+ * @csspart dismiss - The close control, drawn when the drawer is `dismissible`.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
  * @csspart footer - The footer region.
  * @csspart header - The header region.
  * @csspart panel - The sliding panel.
@@ -70,6 +83,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @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.
+ * @cssstate snapped - While the panel rests at a snap point that shows less than the whole panel.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly commands: CommandController;
@@ -86,6 +100,18 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * that a resting value is an attribute's absence.
      */
     closedBy?: 'any' | 'closerequest' | 'none';
+    /**
+     * Draws a control that closes the drawer, in the corner where the title is.
+     *
+     * Pressing it is `close()`, so it sends `helix-before-close` like every other
+     * way out.
+     */
+    dismissible: boolean;
+    /**
+     * The close control's accessible name. Translate it with the rest of your
+     * interface.
+     */
+    dismissLabel: string;
     /**
      * Accessible name for the panel. When it is empty, the heading in the
      * `header` slot names the panel.
@@ -153,6 +179,8 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly phases: OpenPhaseController;
     /** How far the panel rests toward its edge, in pixels, at the snap point it settled on. */
     private rest;
+    /** The fraction of the panel on screen at the snap point it rests at. */
+    private shown;
     /** 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. */
@@ -165,6 +193,30 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     private place;
     /** Brings a released swipe to rest: at a snap point, or closed through the request. */
     private settle;
+    /**
+     * The fraction of the panel on screen at the snap point it rests at, such as
+     * `0.5`. It is `1`, the whole panel, while the drawer is closed or has no
+     * `snap-points`.
+     */
+    get snap(): number;
+    /**
+     * Puts the panel at rest at a snap point, and says on the host, as
+     * `:state(snapped)`, while that is short of the whole panel.
+     */
+    private restAt;
+    /** Says whether the panel rests short of the whole, and nothing while closed. */
+    private markSnap;
+    /**
+     * Moves the open panel to rest at the snap point nearest `point`, a fraction
+     * of the panel such as `1` for the whole of it.
+     */
+    snapTo(point: number): void;
+    /**
+     * Focus moving to a control past the window's edge, in a panel resting short
+     * of the whole: the panel opens to its largest snap point, so the control is
+     * on screen.
+     */
+    private readonly handleFocusIn;
     /** Opens the drawer. */
     show(): void;
     /**
@@ -216,9 +268,16 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * reflection keeps the fallback name.
      */
     private nameByHeader;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The glyph on the close control, behind a seam: slot fallback, so a
+     * consumer replaces it by slotting, and a method, so a tier above replaces it
+     * by overriding. As `Dialog` draws it.
+     */
+    protected renderDismissIcon(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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, edgeOffset, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, 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 { beyondWindow } from '../reveal.js';
 import { startsSwipe } from '../swipe-start.js';
 let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(HelixElement) {
     constructor() {
@@ -18,6 +19,8 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
                 '--toggle': () => this.toggleOpen(),
             },
         });
+        this.dismissible = false;
+        this.dismissLabel = 'Close';
         this.label = '';
         this.aria = new AriaForwardController(this, { target: () => this.panel });
         this.modal = true;
@@ -33,6 +36,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             surface: () => this.panel,
         });
         this.rest = 0;
+        this.shown = 1;
         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),
@@ -40,6 +44,15 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             start: (target, event) => startsSwipe(target, event.pointerType, swipeAxis(this.edge), this.partNamed('content')),
             surface: () => this.panel,
         });
+        this.handleFocusIn = (event) => {
+            const target = event.composedPath()[0];
+            if (this.shown >= 1 || !(target instanceof Element) || typeof window === 'undefined') {
+                return;
+            }
+            if (beyondWindow(target.getBoundingClientRect(), window.innerWidth, window.innerHeight)) {
+                this.snapTo(1);
+            }
+        };
         this.handleKeydown = (event) => {
             if (event.key !== 'Escape' ||
                 event.defaultPrevented ||
@@ -117,9 +130,31 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             return;
         }
         if (shown !== 0) {
-            this.rest = snapTravel(size, shown);
+            this.restAt(shown);
         }
+        else {
+            this.place(this.rest);
+        }
+    }
+    get snap() {
+        return this.open ? this.shown : 1;
+    }
+    restAt(shown) {
+        this.shown = shown;
+        this.rest = snapTravel(this.extent, shown);
         this.place(this.rest);
+        this.markSnap();
+    }
+    markSnap() {
+        this.toggleState('snapped', this.open && this.shown < 1);
+    }
+    snapTo(point) {
+        if (!this.open) {
+            return;
+        }
+        const points = parseSnapPoints(this.snapPoints);
+        const nearest = points.reduce((best, one) => Math.abs(one - point) < Math.abs(best - point) ? one : best);
+        this.restAt(nearest);
     }
     show() {
         this.requestOpen(true);
@@ -143,8 +178,13 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
         this.namedByHeader = reflectElements(this.panel, 'ariaLabelledByElements', heading, this.namedByHeader);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusin', this.handleFocusIn);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('focusin', this.handleFocusIn);
         unlockScroll(this);
     }
     updated(changed) {
@@ -152,7 +192,9 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         this.nameByHeader();
         if (changed.has('open') && !this.open) {
             this.rest = 0;
+            this.shown = 1;
             this.place(0);
+            this.markSnap();
         }
         if (this.open && this.modal) {
             lockScroll(this);
@@ -171,8 +213,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             else {
                 panel.show();
             }
-            this.rest = snapTravel(this.extent, parseSnapPoints(this.snapPoints)[0] ?? 1);
-            this.place(this.rest);
+            this.restAt(parseSnapPoints(this.snapPoints)[0] ?? 1);
         }
         else if (!this.open && panel.open) {
             panel.close();
@@ -192,12 +233,30 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
       <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>
+      ${this.dismissible
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.close(),
+            })
+            : nothing}
     </dialog>`;
     }
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      ${drawDismissGlyph()}
+    </slot>`;
+    }
 };
 __decorate([
     property({ attribute: 'closedby', reflect: true })
 ], HelixHeadlessDrawer.prototype, "closedBy", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDrawer.prototype, "dismissible", void 0);
+__decorate([
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessDrawer.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDrawer.prototype, "label", void 0);

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

@@ -29,6 +29,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/drilldown
  *
  * @slot - The row's label.
+ * @slot chevron - Replaces the caret of a row that opens a page, such as with your own icon.
  * @slot end - Content after the label, usually an icon or a count.
  * @slot page - The rows of the page this row opens.
  * @slot start - Content before the label, usually an icon.
@@ -65,15 +66,14 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      */
     readonly isDrilldownItem = true;
     /**
-     * Whether the page showing is the one this row is on.
-     *
-     * Written by the stack.
+     * @internal Whether the page showing is the one this row is on. Written by
+     * the stack, and not a consumer's to set: a framework reading `onPage` as an
+     * event handler is why it is kept off the typings.
      */
     onPage: boolean;
     /**
-     * Whether this row's own page is the one showing.
-     *
-     * Written by the stack.
+     * @internal Whether this row's own page is the one showing. Written by the
+     * stack.
      */
     showingPage: boolean;
     /**
@@ -134,6 +134,11 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     get selected(): boolean;
     /** Fires `helix-select` for this row. */
     select(): void;
+    /**
+     * The caret of a row that opens a page, as the `chevron` slot's fallback, so
+     * an icon of your own replaces it by being slotted.
+     */
+    protected renderMark(): TemplateResult;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

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

@@ -50,6 +50,13 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         }
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
+    renderMark() {
+        return html `<slot name="chevron" aria-hidden="true"
+      ><svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretRight.content)}
+      </svg></slot
+    >`;
+    }
     render() {
         if (this.showingPage) {
             return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
@@ -69,11 +76,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>
-      ${this.page
-            ? html `<svg part="mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
-              ${unsafeSVG(caretRight.content)}
-            </svg>`
-            : nothing}
+      ${this.page ? this.renderMark() : nothing}
     </button>
     <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }

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

@@ -20,6 +20,18 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * and reads the rest from the DOM. The behavior lives in `DrilldownController`,
  * which `Menu` shares.
  *
+ * After each move the host carries `data-direction`, `forward` into a page or
+ * `back` out of one, and records `:state(forward)` or `:state(back)`, so a
+ * stylesheet can slide the new page in from the side the reader is going. Both
+ * are written again on every move, so an animation keyed on them runs for each
+ * page, two moves the same way included. The styled tier slides the page and
+ * swaps it at once under `prefers-reduced-motion`.
+ *
+ * Keys, on a row: Up and Down Arrow move between the rows, Home and End go to
+ * the first and the last, and a typed letter moves to the next row whose name
+ * starts with it. Enter, Space, or Right Arrow opens a row's page, and Left
+ * Arrow or Escape goes back, the two arrows swapping on a right-to-left page.
+ *
  * 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
@@ -32,6 +44,7 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/drilldown
  *
  * @slot - The rows of the top page.
+ * @slot back-icon - Replaces the icon on the back button.
  *
  * @event {HelixSelectEvent} helix-select - Fired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
@@ -44,7 +57,9 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @csspart page - The menu the rows are in.
  * @csspart title - The name of the page showing.
  *
+ * @cssstate back - The last move went back out of a page.
  * @cssstate drilled - A row's page is showing, so a frame around the drilldown can style itself for that depth.
+ * @cssstate forward - The last move went into a page.
  */
 export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base {
     /**
@@ -74,6 +89,8 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * not suppress it.
      */
     private direction?;
+    /** Whether a move happened since the last update, so its marks are written again. */
+    private moved;
     private readonly drilldown;
     /**
      * The rows on the page showing, which is what the keys move over.
@@ -133,8 +150,20 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Writes which way the last move went. After a move, the marks come off and
+     * the page's style is read before they go back on, so an animation keyed on
+     * them starts again for the new page: two moves the same way would otherwise
+     * leave the same rule in force and the second page would arrive still.
+     */
+    private markDirection;
     /** Walks the tree marking which rows are on the page showing. */
     private mark;
+    /**
+     * The back button's icon, as the `back-icon` slot's fallback, so an icon of
+     * your own replaces it by being slotted.
+     */
+    protected renderBackIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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 { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadBy, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -15,6 +15,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         super(...arguments);
         this.label = 'Navigation';
         this.backLabel = 'Back';
+        this.moved = false;
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isDrilldownItem' in element && element.isDrilldownItem === true,
             root: () => [...this.children],
@@ -37,7 +38,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             })),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
-            typeahead: (item) => item.words,
+            typeahead: typeaheadBy((item) => item.words),
         });
         this.handleFocusIn = (event) => {
             const item = this.drilldown.rows.find((row) => row.contains(event.target));
@@ -100,6 +101,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             return;
         }
         this.direction = 'forward';
+        this.moved = true;
         this.updateComplete.then(() => this.items[0]?.focusItem());
     }
     back() {
@@ -108,6 +110,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             return false;
         }
         this.direction = 'back';
+        this.moved = true;
         this.updateComplete.then(() => leaving?.focusItem());
         return true;
     }
@@ -134,12 +137,27 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         }
         this.placeTabStop();
         this.toggleState('drilled', !this.drilldown.atRoot);
+        this.markDirection();
+    }
+    markDirection() {
+        if (this.moved) {
+            this.moved = false;
+            this.removeAttribute('data-direction');
+            this.toggleState('back', false);
+            this.toggleState('forward', false);
+            const page = this.partNamed('page');
+            if (page && typeof getComputedStyle === 'function') {
+                getComputedStyle(page).animationName;
+            }
+        }
         if (this.direction === undefined) {
             this.removeAttribute('data-direction');
         }
         else {
             this.setAttribute('data-direction', this.direction);
         }
+        this.toggleState('back', this.direction === 'back');
+        this.toggleState('forward', this.direction === 'forward');
     }
     mark(item, page, onPage) {
         item.onPage = onPage;
@@ -150,14 +168,19 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             }
         }
     }
+    renderBackIcon() {
+        return html `<slot name="back-icon" aria-hidden="true"
+      ><svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretLeft.content)}
+      </svg></slot
+    >`;
+    }
     render() {
         return html `${this.drilldown.atRoot
             ? ''
             : html `<div part="header">
             <button part="back" type="button" aria-label=${this.backLabel} @click=${() => this.back()}>
-              <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-                ${unsafeSVG(caretLeft.content)}
-              </svg>
+              ${this.renderBackIcon()}
             </button>
             <span id="title" part="title">${this.drilldown.label}</span>
           </div>`}