@fusion.dev/helix-headless 0.158.0 → 0.159.0

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 { 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 { auditName, CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FocusScopeController, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, OpenPhaseController, 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';
@@ -63,6 +63,14 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             ],
             surface: () => this.dialog,
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.dialog,
+        });
         this.zoomer = new ZoomController(this, {
             max: () => (this.open ? this.maxZoom : 1),
             onChange: (scale, pan) => this.drawZoom(scale, pan),

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

@@ -12,10 +12,12 @@ export interface ZoomOptions {
  * Pinch, double press and drag to zoom into the item a viewer shows, and to
  * move about it once zoomed.
  *
- * Two fingers scale the item about the point between them. A double press, a
- * double click or a double tap, zooms all the way in about the point pressed,
- * and back out again. One pointer dragged across a zoomed item moves it, never
- * so far that an edge comes inside the box. What it reports is a scale and an
+ * Two fingers scale the item about the point between them. A trackpad pinch,
+ * which the browser sends as a wheel with Ctrl held, and the wheel with Ctrl
+ * held scale it about the pointer. A double press, a double click or a double
+ * tap, zooms all the way in about the point pressed, and back out again. One
+ * pointer dragged across a zoomed item moves it, never so far that an edge
+ * comes inside the box, and so does the wheel without Ctrl. What it reports is a scale and an
  * offset from the middle of the box; drawing them is the caller's.
  */
 export declare class ZoomController implements ReactiveController {
@@ -58,6 +60,13 @@ export declare class ZoomController implements ReactiveController {
     private readonly handleDown;
     private readonly handleMove;
     private readonly handleUp;
+    /**
+     * A wheel with Ctrl held, which is also how the browser sends a trackpad
+     * pinch, scales the item about the pointer. Without Ctrl, a wheel over a
+     * zoomed item moves it. Over an item at its own size, a plain wheel is left
+     * to the page.
+     */
+    private readonly handleWheel;
     /** A double press zooms all the way in about the point, or back out. */
     private readonly handleDouble;
     private release;

package/dist/lightbox/zoom-controller.js

@@ -48,6 +48,21 @@ export class ZoomController {
             }
             this.begin();
         };
+        this.handleWheel = (event) => {
+            if (this.options.max() <= 1 || !this.inside(event)) {
+                return;
+            }
+            const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;
+            if (event.ctrlKey) {
+                event.preventDefault();
+                this.zoomTo(this.scale * Math.exp((-event.deltaY * unit) / 250), this.offset(event));
+                return;
+            }
+            if (this.scale > 1) {
+                event.preventDefault();
+                this.panBy({ x: -event.deltaX * unit, y: -event.deltaY * unit });
+            }
+        };
         this.handleDouble = (event) => {
             if (this.options.max() <= 1 || !this.inside(event)) {
                 return;
@@ -69,10 +84,12 @@ export class ZoomController {
     hostConnected() {
         this.host.addEventListener('pointerdown', this.handleDown);
         this.host.addEventListener('dblclick', this.handleDouble);
+        this.host.addEventListener('wheel', this.handleWheel, { passive: false });
     }
     hostDisconnected() {
         this.host.removeEventListener('pointerdown', this.handleDown);
         this.host.removeEventListener('dblclick', this.handleDouble);
+        this.host.removeEventListener('wheel', this.handleWheel);
         this.release();
     }
     zoomTo(scale, at = { x: 0, y: 0 }) {

package/dist/steps/root/steps-root.js

@@ -34,14 +34,16 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             wrap: false,
         });
         this.handleSelection = (event) => {
-            if (event.defaultPrevented || !this.steps.includes(event.target)) {
+            if (!this.steps.includes(event.target)) {
                 return;
             }
-            const index = this.steps.indexOf(event.target);
-            if (!this.reachable(index) || !this.valid(index)) {
-                return;
-            }
-            this.requestActive(event.detail.value);
+            queueMicrotask(() => {
+                const index = this.steps.indexOf(event.target);
+                if (event.defaultPrevented || !this.reachable(index) || !this.valid(index)) {
+                    return;
+                }
+                this.requestActive(event.detail.value);
+            });
         };
         this.handleSlotChange = () => {
             this.sync();

package/dist/steps/step/step.d.ts

@@ -27,6 +27,10 @@ import '../../button/index.js';
  * region. The current stage's button carries `aria-current="step"`, and only
  * the button, so the state is said once, on the control.
  *
+ * A stage's `content`, while it holds anything, is a group named by the
+ * stage's name, so a screen reader moving into it hears which stage it
+ * belongs to.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage
@@ -105,6 +109,11 @@ export declare class HelixHeadlessStep extends HelixElement {
      * The value the step sends in `helix-select`.
      */
     value: string;
+    /** Whether anything is slotted into `content`, which makes it a named group. */
+    private holding;
+    /** Reads whether the `content` slot holds anything. */
+    private readonly readContent;
+    protected firstUpdated(changed: PropertyValues): void;
     /** Says a stage was finished, from the first time one is. */
     private readonly status;
     /**

package/dist/steps/step/step.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, drawStatus, formatWords, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, words, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
@@ -23,9 +23,18 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.locked = false;
         this.optional = false;
         this.value = '';
+        this.holding = false;
+        this.readContent = () => {
+            const slot = this.renderRoot.querySelector('slot[name="content"]');
+            this.holding = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+        };
         this.status = new StatusController(this);
     }
     static { this.words = 'helix-step'; }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readContent();
+    }
     focus(options) {
         this.partNamed('label')?.focus(options);
     }
@@ -60,6 +69,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     }
     renderLabel() {
         return html `<${this.tag('button')}
+      id="label"
       part="label"
       exportparts="button: label-button, live: label-live, spinner: label-spinner, text: label-text"
       emphasis="ghost"
@@ -79,7 +89,11 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         ${this.renderLabel()}
         <span part="description"><slot name="description"></slot></span>
       </span>
-      <div part="content"><slot name="content"></slot></div>${drawStatus(this.status)}`;
+      <div
+        part="content"
+        role=${this.holding ? 'group' : nothing}
+        aria-labelledby=${this.holding ? 'label' : nothing}
+      ><slot name="content" @slotchange=${this.readContent}></slot></div>${drawStatus(this.status)}`;
     }
 };
 __decorate([
@@ -111,6 +125,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessStep.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessStep.prototype, "holding", void 0);
 HelixHeadlessStep = __decorate([
     customElement('helix-headless-step')
 ], HelixHeadlessStep);

package/dist/tabs/panel/tab-panel.d.ts

@@ -15,15 +15,24 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the tab list lands on the panel's first link or control where there is one,
  * and on the panel itself where there is none.
  *
+ * **Set `lazy` for a panel that is expensive to draw.** Its content waits in a
+ * `<template>` inside it, and goes into the panel the first time the panel is
+ * shown, so it costs nothing until a reader opens that tab. Once in, it stays.
+ * The panel sends `helix-load` at the same moment, for content your code
+ * renders itself.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TabPanel
  * @documentation https://fusion.dev/helix/components/tabs
  *
- * @slot - The panel's content.
+ * @slot - The panel's content. Under `lazy`, a `<template>` holding it.
+ *
+ * @event {HelixLoadEvent} helix-load - Fired the first time a `lazy` panel is shown, once its template's content is in.
  *
  * @csspart panel - The panel container, which takes the focus while it holds nothing focusable.
  *
+ * @cssstate loaded - Once a `lazy` panel has been shown and its content is in.
  * @cssstate selected - While its tab is the one selected.
  */
 export declare class HelixHeadlessTabPanel extends HelixElement {
@@ -40,6 +49,18 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * the pattern names one anyway.
      */
     label: string;
+    /**
+     * Whether the panel's content waits in a `<template>` until the panel is
+     * first shown.
+     */
+    lazy: boolean;
+    /** Whether a `lazy` panel has put its content in. */
+    private loaded;
+    /**
+     * Puts a `lazy` panel's content in the first time the panel is shown: the
+     * content of each `<template>` it holds, in place of the template.
+     */
+    private load;
     /**
      * Whether this panel is the visible one.
      */

package/dist/tabs/panel/tab-panel.js

@@ -4,13 +4,15 @@ 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, focusableElements, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, focusableElements, HelixElement, HelixLoadEvent, hostAria, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.lazy = false;
+        this.loaded = false;
         this.selected = false;
         this.value = '';
         this.holdsStop = false;
@@ -21,6 +23,19 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
             this.holdsStop = this.selected && focusableElements(this).length > 0;
         };
     }
+    load() {
+        if (!this.lazy || !this.selected || this.loaded) {
+            return;
+        }
+        this.loaded = true;
+        for (const template of [...this.children]) {
+            if (template instanceof HTMLTemplateElement) {
+                template.replaceWith(document.importNode(template.content, true));
+            }
+        }
+        this.toggleState('loaded', true);
+        this.dispatchEvent(new HelixLoadEvent());
+    }
     connectedCallback() {
         super.connectedCallback();
         this.watcher?.observe(this, {
@@ -36,6 +51,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('selected') || changed.has('lazy')) {
+            this.load();
+        }
         if (changed.has('selected')) {
             this.readStops();
         }
@@ -58,6 +76,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTabPanel.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTabPanel.prototype, "lazy", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTabPanel.prototype, "selected", void 0);

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

@@ -46,9 +46,9 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * | Enter, Space | Selects the tab with focus, or follows its link. |
  * | Tab | Leaves the list for the selected panel. |
  *
- * Removing the selected tab selects the first enabled tab that is left, and
- * `active` says so, with `helix-activate`. Where the removed tab had focus,
- * focus moves to the tab now selected.
+ * Removing the selected tab selects the enabled tab beside it, the next one
+ * or else the one before, and `active` says so, with `helix-activate`. Where
+ * the removed tab had focus, focus moves to the tab now selected.
  *
  * **More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a
  * button at each end it can scroll toward, as Web Awesome's tab group does,
@@ -74,6 +74,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @slot - The tabs, as direct children of this element.
  * @slot indicator - A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
+ * @slot scroll-end-icon - Replaces the glyph on the button that scrolls the strip toward its end.
+ * @slot scroll-start-icon - Replaces the glyph on the button that scrolls the strip toward its start.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the active tab changes, so the element already holds the new value.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active tab changes, and cancelable. Canceling it is the only way to block a change.
@@ -85,7 +87,9 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *   and animate yourself.
  * @csspart panels - The panel container.
  * @csspart scroll-end - The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-end-mark - The glyph on that button, where none is slotted.
  * @csspart scroll-start - The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-start-mark - The glyph on that button, where none is slotted.
  * @csspart tabs - The tab list.
  */
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
@@ -169,6 +173,12 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private scrollStrip;
     /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
     private held;
+    /**
+     * The enabled tab nearest to where a removed one stood: the next ones
+     * nearest first, then the ones before it nearest first. The same order a
+     * dismissed tab hands focus in.
+     */
+    private beside;
     /** Pushes the current value down to whichever tab and panel own it. */
     private sync;
     /** The tab that last had focus, so its removal can hand focus on. */
@@ -205,10 +215,16 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private readonly handleSlotChange;
     protected updated(changed: PropertyValues): void;
     /**
-     * One of the two scroll buttons, pointing the way it scrolls. A caret along
-     * the line is mirrored on a right-to-left page, and one down a column is not.
+     * One of the two scroll buttons, with the glyph pointing the way it scrolls.
      */
     private renderScroll;
+    /**
+     * The glyph on a scroll button, behind a seam: slot fallback, so a consumer
+     * replaces it by slotting, and a method, so a tier above replaces it by
+     * overriding. A caret along the line is mirrored on a right-to-left page, and
+     * one down a column is not.
+     */
+    protected renderScrollIcon(toward: 1 | -1): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tabs/root/tabs-root.js

@@ -33,10 +33,14 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.manual = false;
         this.scrollControls = false;
         this.handleSelection = (event) => {
-            if (event.defaultPrevented || !this.tabs.includes(event.target)) {
+            if (!this.tabs.includes(event.target)) {
                 return;
             }
-            this.requestActive(event.detail.value);
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    this.requestActive(event.detail.value);
+                }
+            });
         };
         this.more = { end: false, start: false };
         this.measure = () => {
@@ -89,12 +93,19 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const behavior = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
         strip.scrollBy(down ? { behavior, top: by } : { behavior, left: isRtl(this) ? -by : by });
     }
+    beside(gone, tabs) {
+        const at = this.held.indexOf(gone);
+        const by = new Map(tabs.map((tab) => [tab.value, tab]));
+        const order = [...this.held.slice(at + 1), ...this.held.slice(0, at).reverse()];
+        return order.map((value) => by.get(value)).find((tab) => tab !== undefined && !tab.disabled);
+    }
     sync() {
         const tabs = this.tabs;
         const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
-        const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
         const previous = this.active;
         const gone = this.held.includes(previous) && !tabs.some((tab) => tab.value === previous);
+        const value = (declared ?? (gone ? this.beside(previous, tabs) : undefined) ?? this.resolveActive(tabs))
+            ?.value ?? '';
         this.held = tabs.map((tab) => tab.value);
         if (gone && value !== '') {
             this.active = value;
@@ -192,19 +203,19 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         if (!this.scrollControls) {
             return nothing;
         }
-        const down = this.orientation === 'vertical';
-        const icon = down ? (toward > 0 ? caretDown : caretUp) : toward > 0 ? caretRight : caretLeft;
-        const glyph = html `<svg
-      data-mirror=${down ? nothing : ''}
-      aria-hidden="true"
-      fill="currentColor"
-      viewBox=${icon.viewBox}
-    >${unsafeSVG(icon.content)}</svg>`;
         const shown = toward > 0 ? this.more.end : this.more.start;
         const keepFocus = (event) => event.preventDefault();
         return toward > 0
-            ? html `<button part="scroll-end" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(1)}>${glyph}</button>`
-            : html `<button part="scroll-start" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(-1)}>${glyph}</button>`;
+            ? html `<button part="scroll-end" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(1)}>${this.renderScrollIcon(1)}</button>`
+            : html `<button part="scroll-start" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(-1)}>${this.renderScrollIcon(-1)}</button>`;
+    }
+    renderScrollIcon(toward) {
+        const down = this.orientation === 'vertical';
+        const icon = down ? (toward > 0 ? caretDown : caretUp) : toward > 0 ? caretRight : caretLeft;
+        const mirror = down ? nothing : '';
+        return toward > 0
+            ? html `<slot name="scroll-end-icon"><svg part="scroll-end-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}>${unsafeSVG(icon.content)}</svg></slot>`
+            : html `<slot name="scroll-start-icon"><svg part="scroll-start-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}>${unsafeSVG(icon.content)}</svg></slot>`;
     }
     render() {
         return html `<div

package/dist/tabs/tab/tab.d.ts

@@ -16,8 +16,8 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * can: a press on its `dismiss` mark, or Delete or Backspace while the tab
  * has focus, sends `helix-dismiss`. The tab does not remove itself, because
  * your code owns the set, so remove the tab and its panel in your handler.
- * Focus moves to the tab beside it, and the tab set selects a tab that is
- * left.
+ * Focus moves to the tab beside it, and where the tab was selected, the tab
+ * set selects that same tab.
  * The tab says the key through `aria-keyshortcuts`, and the mark is for the
  * pointer, hidden from screen readers.
  *
@@ -27,11 +27,13 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tab's label.
+ * @slot dismiss-icon - Replaces the glyph on the mark that closes a `dismissible` tab.
  *
  * @event {HelixDismissEvent} helix-dismiss - A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable.
  * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
  * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
+ * @csspart dismiss-mark - The glyph on that mark, where none is slotted.
  * @csspart tab - The tab itself.
  *
  * @cssstate selected - While it is the tab selected.

package/dist/tabs/tab/tab.js

@@ -53,7 +53,9 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
             return nothing;
         }
         return html `<span part="dismiss" aria-hidden="true" title=${this.dismissLabel} @click=${this.handleDismissPress}
-      ><svg fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">${unsafeSVG(x.content)}</svg></span
+      ><slot name="dismiss-icon"
+        ><svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">${unsafeSVG(x.content)}</svg></slot
+      ></span
     >`;
     }
     updated(changed) {

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

@@ -10,8 +10,9 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * **Each item runs its own timer.** A timer held by the region would restart
  * with each new message, and the last of three messages would stay for nine
- * seconds. It pauses while the pointer or focus is on the message, and while
- * the page is hidden, so a message is not spent in a background tab.
+ * seconds. It pauses while the pointer or focus is on the message or anywhere
+ * in the region's stack, and while the page is hidden, so a message is not
+ * spent in a background tab.
  *
  * **Each message is an `alertdialog` named by its words**, which is how a reader
  * who moves into the stack hears which message they are on. Give it a
@@ -20,10 +21,11 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * says each message once as it arrives, a `danger` one assertively, so a
  * message is never a live region of its own.
  *
- * A touch or a pen swipes a message toward the end of the line, and past
- * halfway, or quickly, dismisses it through the same `helix-dismiss` as its
- * control. While it moves, the distance is on the `item` part as
- * `--toast-swipe-x`.
+ * A touch or a pen swipes a message toward the end of the line, or toward the
+ * edge the region's `swipe-direction` names, and past halfway, or quickly,
+ * dismisses it through the same `helix-dismiss` as its control. While it
+ * moves, the distance is on the `item` part as `--toast-swipe-x` or
+ * `--toast-swipe-y`.
  *
  * **Escape dismisses the message holding focus**, through the same
  * `helix-dismiss`, and focus moves to the next message.
@@ -60,9 +62,10 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * @cssproperty --toast-duration - How long this message stays, in milliseconds, for a progress hint.
  * @cssproperty --toast-swipe-x - How far a swipe has moved the message across, in pixels, toward the right.
+ * @cssproperty --toast-swipe-y - How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`.
  *
  * @cssstate closed - The message has been dismissed and is hidden, or leaving.
- * @cssstate paused - The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.
+ * @cssstate paused - The dismiss timer is paused, while a pointer or focus is on the message or in the stack, or while the page is hidden.
  * @cssstate waiting - The region holds the message back, past its `max-visible`, until a message before it goes.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
@@ -96,8 +99,24 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      */
     get open(): boolean;
     set open(next: boolean);
+    /**
+     * @internal Set by the region: whether a pointer or focus in the stack holds
+     * this message's timer.
+     */
+    regionHeld: boolean;
+    /**
+     * @internal Set by the region: the edge a swipe dismisses toward, from its
+     * `swipe-direction`.
+     */
+    swipeToward: 'bottom' | 'end' | 'start' | 'top';
+    /** Whether the timer is held for `regionHeld`, so the hold is let go once. */
+    private regionHolding;
+    /** Holds the timer while the region asks, and lets it go once. */
+    private holdForRegion;
+    /** The physical edge a swipe dismisses toward. */
+    private get swipeTo();
     protected readonly swipes: SwipeController;
-    /** Writes how far a swipe has moved the message toward the end of the line. */
+    /** Writes how far a swipe has moved the message toward its edge. */
     private slide;
     /**
      * The dismiss timer, which pauses while a reader is on the message, and

package/dist/toast/item/toast-item.js

@@ -4,30 +4,34 @@ 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 { CountdownController, customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
+import { CountdownController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeAxis, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
+        this.regionHeld = false;
+        this.swipeToward = 'end';
+        this.regionHolding = false;
         this.swipes = new SwipeController(this, {
-            axis: () => (this.open ? 'x' : undefined),
-            end: (dx, _dy, vx) => {
-                const edge = swipeEdge('end', isRtl(this));
-                const width = this.partNamed('item')?.getBoundingClientRect().width ?? 0;
+            axis: () => (this.open ? swipeAxis(this.swipeTo) : undefined),
+            end: (dx, dy, vx, vy) => {
+                const edge = this.swipeTo;
+                const box = this.partNamed('item')?.getBoundingClientRect();
+                const across = swipeAxis(edge) === 'x';
                 const shown = settleSwipe({
                     points: [1],
-                    size: width,
-                    travel: Math.max(0, towardEdge(edge, dx, 0)),
-                    velocity: towardEdge(edge, vx, 0),
+                    size: (across ? box?.width : box?.height) ?? 0,
+                    travel: Math.max(0, towardEdge(edge, dx, dy)),
+                    velocity: towardEdge(edge, vx, vy),
                 });
                 if (shown === 0 && this.dismiss()) {
                     return;
                 }
                 this.slide(0);
             },
-            move: (dx) => this.slide(Math.max(0, towardEdge(swipeEdge('end', isRtl(this)), dx, 0))),
+            move: (dx, dy) => this.slide(Math.max(0, towardEdge(this.swipeTo, dx, dy))),
             start: (_target, event) => event.pointerType !== 'mouse',
             surface: () => this.partNamed('item'),
         });
@@ -81,9 +85,27 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         this.openState = next;
         this.requestUpdate('open', previous);
     }
+    holdForRegion() {
+        const want = this.regionHeld && this.isConnected;
+        if (want === this.regionHolding) {
+            return;
+        }
+        this.regionHolding = want;
+        if (want) {
+            this.countdown.hold();
+        }
+        else {
+            this.countdown.release();
+        }
+    }
+    get swipeTo() {
+        return swipeEdge(this.swipeToward, isRtl(this));
+    }
     slide(travel) {
-        const physical = isRtl(this) ? -travel : travel;
-        this.partNamed('item')?.style.setProperty('--toast-swipe-x', travel === 0 ? '' : `${Math.round(physical)}px`);
+        const item = this.partNamed('item');
+        const { x, y } = edgeOffset(this.swipeTo, travel);
+        item?.style.setProperty('--toast-swipe-x', x === 0 ? '' : `${Math.round(x)}px`);
+        item?.style.setProperty('--toast-swipe-y', y === 0 ? '' : `${Math.round(y)}px`);
     }
     wait(waiting) {
         if (waiting) {
@@ -133,12 +155,14 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             else {
                 this.resume();
             }
+            this.holdForRegion();
         }
         this.addEventListener('keydown', this.handleKeydown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.holding = false;
+        this.regionHolding = false;
         this.removeEventListener('keydown', this.handleKeydown);
     }
     willUpdate(changed) {
@@ -156,6 +180,12 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         if (changed.has('waiting')) {
             this.wait(this.waiting);
         }
+        if (changed.has('regionHeld')) {
+            this.holdForRegion();
+        }
+        if (changed.has('swipeToward')) {
+            this.partNamed('item')?.style.setProperty('touch-action', swipeAxis(this.swipeTo) === 'y' ? 'pan-x' : '');
+        }
     }
     assigned(name) {
         return (this.renderRoot
@@ -229,6 +259,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessToastItem.prototype, "open", null);
+__decorate([
+    property({ attribute: false, type: Boolean })
+], HelixHeadlessToastItem.prototype, "regionHeld", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToastItem.prototype, "swipeToward", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToastItem.prototype, "tone", void 0);