@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/dialog/root/dialog-root.js

@@ -4,13 +4,25 @@ 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, HelixElement, hostAria, lockScroll, MixinControllerOpen, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, HelixElement, headingsIn, hostAria, lockScroll, MixinControllerOpen, OpenPhaseController, reflectElements, unlockScroll, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { wordsIn } from '../description.js';
 let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
+        this.alert = false;
+        this.dismissible = false;
+        this.dismissLabel = 'Close';
         this.label = '';
+        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.aria = new AriaForwardController(this, { target: () => this.dialog });
         this.commands = new CommandController(this, {
             commands: {
@@ -48,6 +60,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             this.close(submitter?.hasAttribute('value') ? submitter.value : undefined);
         };
         this.namedByHeader = false;
+        this.describedByBody = false;
         this.handleBackdrop = (event) => {
             const panel = this.dialog;
             if (!panel || event.target !== panel) {
@@ -93,20 +106,16 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
         }
     }
     nameByHeader() {
-        const dialog = this.dialog;
-        if (!dialog || !('ariaLabelledByElements' in dialog)) {
-            return;
-        }
         const slot = this.renderRoot.querySelector('slot[name="header"]');
-        const heading = this.label || this.hasAttribute('aria-labelledby') ? [] : headingsIn(slot);
-        if (heading.length > 0) {
-            dialog.ariaLabelledByElements = heading;
-            this.namedByHeader = true;
-        }
-        else if (this.namedByHeader) {
-            dialog.ariaLabelledByElements = null;
-            this.namedByHeader = false;
-        }
+        const heading = this.label || this.hasAttribute('aria-labelledby')
+            ? []
+            : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
+        this.namedByHeader = reflectElements(this.dialog, 'ariaLabelledByElements', heading, this.namedByHeader);
+    }
+    describeByBody() {
+        const slot = this.renderRoot.querySelector('slot:not([name])');
+        const words = this.hasAttribute('aria-describedby') ? [] : wordsIn(slot);
+        this.describedByBody = reflectElements(this.dialog, 'ariaDescribedByElements', words, this.describedByBody);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -124,6 +133,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
     updated(changed) {
         super.updated(changed);
         this.nameByHeader();
+        this.describeByBody();
         if (this.open) {
             lockScroll(this);
         }
@@ -169,9 +179,15 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             signal: this.refusal.signal,
         });
     }
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      ${drawDismissGlyph()}
+    </slot>`;
+    }
     render() {
         return html `<dialog
       part="dialog"
+      role=${this.alert ? 'alertdialog' : nothing}
       closedby=${this.closedBy ?? nothing}
       aria-label=${this.label || 'Dialog'}
       @cancel=${this.handleCancel}
@@ -179,15 +195,31 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
       @close=${this.handleClose}
     >
       <slot name="icon"></slot>
-      <slot name="header" @slotchange=${this.nameByHeader}></slot>
-      <slot></slot>
-      <slot name="footer"></slot>
+      <slot name="header" part="header" @slotchange=${this.nameByHeader}></slot>
+      <slot part="body" @slotchange=${this.describeByBody}></slot>
+      <slot name="footer" part="footer"></slot>
+      ${this.dismissible
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.close(),
+            })
+            : nothing}
     </dialog>`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDialog.prototype, "alert", void 0);
 __decorate([
     property({ attribute: 'closedby', reflect: true })
 ], HelixHeadlessDialog.prototype, "closedBy", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDialog.prototype, "dismissible", void 0);
+__decorate([
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessDialog.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDialog.prototype, "label", void 0);
@@ -198,9 +230,3 @@ HelixHeadlessDialog = __decorate([
     customElement('helix-headless-dialog')
 ], HelixHeadlessDialog);
 export { HelixHeadlessDialog };
-const headingsIn = (slot) => {
-    const assigned = slot?.assignedElements({ flatten: true }) ?? [];
-    const heading = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
-    const found = assigned.flatMap((one) => one.matches(heading) ? [one] : [...one.querySelectorAll(heading)].slice(0, 1));
-    return found.length > 0 ? found.slice(0, 1) : assigned;
-};

package/dist/donut-chart/root/donut-chart-root.d.ts

@@ -24,9 +24,15 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * **Negative values are skipped.** An arc cannot show a negative number, so
  * those rows are left out and the total is the sum of the remaining rows.
  *
- * The ring is `aria-hidden`. The `summary` part names the chart, from `label`
- * or the table's caption, and gives each slice's share, and the table beside
- * the chart has every amount.
+ * The ring is hidden from screen readers. The `summary` part names the chart,
+ * from `label` or the table's caption, and gives each slice's share, and the
+ * table beside the chart has every amount.
+ *
+ * **The ring is read by key.** The plot takes focus, named by `label` or the
+ * caption. Every arrow moves from slice to slice, the right and down arrows to
+ * the next, and Home and End go to the first and the last. The tooltip
+ * follows, the `live` part says the slice in words, and Escape puts the
+ * tooltip away.
  *
  * @since 0.1.0
  * @status stable
@@ -37,8 +43,9 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @slot - Content in the middle of the ring, usually a total. It is read by screen readers, while the ring itself is hidden from them.
  *
  * @csspart center - The middle of the ring, holding whatever is slotted.
+ * @csspart live - The readout: a polite live region that says the slice the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
- * @csspart plot - The drawing.
+ * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart segment - One slice.
  * @csspart segment-active - The slice under the pointer. Set alongside `segment`.
  * @csspart segment-edge - One slice as a closed shape, used to draw its outline.
@@ -52,6 +59,7 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the series keys rest on, in the charts whose readings hold several series. A ring draws one, so it is never set here.
  * @csspart tooltip-label - The slice's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -154,6 +162,19 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * the table's rows named the row before the one under the pointer.
      */
     private get shares();
+    /**
+     * The palette slot for a cell, which a ring gives its first plotted column
+     * alone: it draws that column and no other, so a second numeric column is
+     * no series the keys could move to.
+     */
+    seriesOf(cell: number): number | undefined;
+    /**
+     * The number of slices, which the keys walk.
+     *
+     * The mixin counts the table's rows, and a row with no amount draws no
+     * slice, so a key stepping by rows would land on a slice that is not there.
+     */
+    get readings(): number;
     protected render(): TemplateResult;
     /**
      * What a reader who cannot see the ring is told: the chart's name and each

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

@@ -49,7 +49,9 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     get shares() {
         const series = this.series;
         const points = series[0]?.points ?? [];
-        const values = points.map((point) => Number.isFinite(point.value) && point.value > 0 ? point.value : 0);
+        const values = points.map((point) => Number.isFinite(point.value) && point.value > 0 && this.showsSeries(point.label)
+            ? point.value
+            : 0);
         const total = values.reduce((sum, one) => sum + one, 0);
         if (total === 0) {
             return [];
@@ -62,21 +64,34 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
             return { fraction, row: points[index]?.at ?? index, start: at };
         });
     }
+    seriesOf(cell) {
+        return cell === this.plottedColumns[0] ? seriesIndex(0) : undefined;
+    }
+    get readings() {
+        return this.shares.length;
+    }
     render() {
         const shares = this.shares;
         return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}`;
     }
     renderSummary(shares) {
         const rows = this.sourceRows;
-        const parts = shares.map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(this.locale).format(share.fraction)}`);
+        const parts = shares
+            .filter((share) => this.showsSeries(rows[share.row]?.label ?? ''))
+            .map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(this.locale).format(share.fraction)}`);
         const named = this.named ? `${this.named}: ` : '';
-        return html `<p part="summary">${named}${parts.join(', ')}.</p>`;
+        return html `<p id="helix-chart-summary" part="summary">${named}${parts.join(', ')}.</p>`;
     }
     renderPlot(shares) {
         return html `<div
+      aria-describedby=${this.named ? `helix-chart-summary${this.hole === 'none' ? '' : ' helix-chart-center'}` : nothing}
+      aria-label=${this.named || nothing}
+      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
       id=${CHART_PLOT}
       part="plot"
+      role="application"
       style="--donut-chart-stroke: ${this.thickness}"
+      tabindex="0"
     >
       <svg
         aria-hidden="true"
@@ -95,7 +110,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         />
         ${shares.map((share, index) => this.renderSegment(share, index))}
       </svg>
-      ${this.hole === 'none' ? nothing : html `<div part="center"><slot></slot></div>`}
+      ${this.hole === 'none' ? nothing : html `<div id="helix-chart-center" part="center"><slot></slot></div>`}
       ${this.renderTooltip()}
     </div>`;
     }
@@ -163,7 +178,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         const at = this.pointer.at;
         const share = this.shares[at];
         if (!share) {
-            return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const angle = (share.start + share.fraction / 2) * 2 * Math.PI * this.span + this.origin;
         const edge = EDGE;
@@ -184,7 +199,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
                     : 'top',
             x: `${x}%`,
             y: `${y}%`,
-        }, () => seriesIndex(at));
+        }, () => seriesIndex(at), this.pointer);
     }
 };
 __decorate([

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, 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;
 /**
@@ -17,7 +17,15 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * - the page behind does not scroll
  *
  * A drawer with `modal="false"` leaves the page usable and still closes on
- * Escape.
+ * 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.
@@ -43,6 +51,7 @@ 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.
@@ -51,9 +60,15 @@ 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 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 {
@@ -100,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.
      *
@@ -120,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();
     /**

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, HelixElement, lockScroll, MixinControllerOpen, onUnlessFalse, unlockScroll, } 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);
@@ -20,7 +21,36 @@ 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);
@@ -57,25 +87,62 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             panel.returnValue = value;
         }
     }
-    get panel() {
-        return this.partNamed('panel');
+    get edge() {
+        return swipeEdge(this.placement ?? 'end', isRtl(this));
     }
-    nameByHeader() {
+    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 || !('ariaLabelledByElements' in panel)) {
+        if (!panel) {
             return;
         }
-        const slot = this.renderRoot.querySelector('slot[name="header"]');
-        const heading = this.label || this.hasAttribute('aria-labelledby') ? [] : headingsIn(slot);
-        if (heading.length > 0) {
-            panel.ariaLabelledByElements = heading;
-            this.namedByHeader = true;
+        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;
         }
-        else if (this.namedByHeader) {
-            panel.ariaLabelledByElements = null;
-            this.namedByHeader = false;
+        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);
@@ -83,6 +150,10 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
     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);
         }
@@ -100,6 +171,8 @@ 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();
@@ -114,9 +187,11 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
+      @keydown=${this.handleKeydown}
     >
       <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>`;
     }
 };
@@ -132,13 +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 headingsIn = (slot) => {
-    const assigned = slot?.assignedElements({ flatten: true }) ?? [];
-    const heading = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
-    const found = assigned.flatMap((one) => one.matches(heading) ? [one] : [...one.querySelectorAll(heading)].slice(0, 1));
-    return found.length > 0 ? found.slice(0, 1) : assigned;
-};
+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/element-events.generated.js

@@ -4,6 +4,7 @@ registerElementEvents({
     'helix-headless-announcement': ['helix-dismiss'],
     'helix-headless-app-header': ['helix-scrolled'],
     'helix-headless-avatar': ['error', 'load'],
+    'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',
         'helix-before-reconnect',
@@ -58,7 +59,7 @@ registerElementEvents({
         'helix-select',
         'toggle',
     ],
-    'helix-headless-copy-button': ['helix-copy'],
+    'helix-headless-copy-button': ['helix-copy', 'helix-copy-error'],
     'helix-headless-data-table': [
         'helix-activate',
         'helix-filter',
@@ -84,7 +85,7 @@ registerElementEvents({
     'helix-headless-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-drilldown': ['helix-select'],
     'helix-headless-drilldown-item': ['helix-select'],
-    'helix-headless-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-headless-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-headless-filter-chip': ['helix-dismiss'],
     'helix-headless-filter-input': [
         'change',
@@ -110,10 +111,11 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-headless-heatmap': ['helix-resize'],
-    'helix-headless-icon': ['error'],
+    'helix-headless-icon': ['error', 'load'],
     'helix-headless-image': ['error', 'load'],
-    'helix-headless-input': ['change', 'helix-before-change', 'input'],
+    'helix-headless-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-kbd': ['helix-shortcut'],
+    'helix-headless-legend': ['change', 'helix-before-change'],
     'helix-headless-lightbox': [
         'close',
         'helix-activate',
@@ -163,7 +165,7 @@ registerElementEvents({
     'helix-headless-qr-code': ['error'],
     'helix-headless-radio': ['helix-select'],
     'helix-headless-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
-    'helix-headless-rating': ['change', 'helix-before-change', 'input'],
+    'helix-headless-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-headless-select': [
         'change',
         'helix-before-change',
@@ -195,6 +197,7 @@ registerElementEvents({
     'helix-headless-table-column': ['helix-before-resize'],
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-tag': ['helix-dismiss'],
+    'helix-headless-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
     'helix-headless-textarea': ['change', 'helix-before-change', 'input'],
     'helix-headless-time-input': [
         'change',

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

@@ -25,7 +25,7 @@ import { type TemplateResult } from 'lit';
  *
  * @slot - The message: why the region is empty, and what to do about it.
  * @slot actions - The action that would put something in the region.
- * @slot heading - The heading, which names what is missing.
+ * @slot heading - The heading, which names what is missing. Slot a heading element, such as an `<h3>`, so a reader can find it in the page's outline.
  * @slot icon - An icon above the heading.
  *
  * @csspart live - A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.