@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/description-list/item/description-list-item.js

@@ -11,10 +11,23 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
     constructor() {
         super(...arguments);
         this.label = '';
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    get several() {
+        return this.knownChildren.some((child) => child.localName === 'dd');
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     render() {
-        return html `<dt part="label"><slot name="label">${this.label}</slot></dt>
-      <dd part="value"><slot></slot></dd>`;
+        const label = html `<dt part="label"><slot name="label">${this.label}</slot></dt>`;
+        return this.several
+            ? html `${label}<slot @slotchange=${this.handleSlotChange}></slot>`
+            : html `${label}
+          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot></dd>`;
     }
 };
 __decorate([

package/dist/description-list/root/description-list-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A list of labels and their values, such as a details panel.
  *
@@ -15,6 +15,11 @@ import { type TemplateResult } from 'lit';
  * matches a plain `<dl>` with the same content node for node, both with a
  * slotted label and with an item set to `display: contents`.
  *
+ * **A named list is a named group.** A `<dl>` takes no name in ARIA 1.2, so
+ * the list becomes a group around it when it has `label`, `aria-label` or
+ * `aria-labelledby`, and the name lands on the group. Unnamed, the host adds
+ * nothing to the tree.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -42,6 +47,27 @@ export declare class HelixHeadlessDescriptionList extends HelixElement {
      * and React reports that as a hydration mismatch.
      */
     direction?: 'row';
+    /**
+     * The list's name, read by screen readers, such as "Server details". It
+     * makes the list a named group.
+     */
+    label: string;
+    /**
+     * Hears a name written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * and `ariaLabelledByElements` belong to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A name written
+     * or taken off asks for an update, because it decides whether the list is a
+     * group.
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** Whether anything names the list. */
+    private get named();
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/description-list/root/description-list-root.js

@@ -4,10 +4,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDescriptionList = class HelixHeadlessDescriptionList extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label', 'aria-labelledby'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label' || name === 'aria-labelledby') {
+            this.requestUpdate();
+        }
+    }
+    get named() {
+        return (this.label !== '' ||
+            Boolean(this.getAttribute?.('aria-label')) ||
+            Boolean(this.getAttribute?.('aria-labelledby')));
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { label: this.label, role: this.named ? 'group' : '' });
+    }
     render() {
         return html `<dl part="list"><slot></slot></dl>`;
     }
@@ -15,6 +37,9 @@ let HelixHeadlessDescriptionList = class HelixHeadlessDescriptionList extends He
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDescriptionList.prototype, "direction", void 0);
+__decorate([
+    property()
+], HelixHeadlessDescriptionList.prototype, "label", void 0);
 HelixHeadlessDescriptionList = __decorate([
     customElement('helix-headless-description-list')
 ], HelixHeadlessDescriptionList);

package/dist/dialog/description.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The elements at the start of a slot that hold words and no control, up to the
+ * first one that is or holds a control.
+ *
+ * What a dialog is described by. A question above a form describes the dialog,
+ * and the form does not: a description that read out every field label would
+ * repeat what a reader hears again as they reach each field.
+ */
+export declare const wordsIn: (slot: HTMLSlotElement | null) => Element[];

package/dist/dialog/description.js

@@ -0,0 +1,14 @@
+const CONTROL = 'a[href], audio[controls], button, details, form, iframe, input, select, textarea, video[controls], [contenteditable], [tabindex]';
+const isControl = (element) => element.localName.includes('-') || element.matches(CONTROL);
+export const wordsIn = (slot) => {
+    const words = [];
+    for (const one of slot?.assignedElements({ flatten: true }) ?? []) {
+        if (isControl(one) || [...one.querySelectorAll('*')].some(isControl)) {
+            break;
+        }
+        if ((one.textContent ?? '').trim() !== '') {
+            words.push(one);
+        }
+    }
+    return words;
+};

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, CommandController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, HelixElement, OpenPhaseController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -23,6 +23,16 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * the `header` slot, or the elements an `aria-labelledby` on the host names.
  * While it is open, the page behind it does not scroll.
  *
+ * The dialog is described by the words at the start of its body: the elements
+ * in the default slot before the first one that is or holds a control. A
+ * question above a form describes the dialog, and the form does not. An
+ * `aria-describedby` on the host replaces it.
+ *
+ * Set `alert` for a dialog that interrupts to ask for an answer, such as a
+ * confirmation before a deletion. It is an `alertdialog`, which a screen reader
+ * announces with its description as it opens. Set `dismissible` to draw a
+ * close control, labeled by `dismiss-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -30,6 +40,7 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/dialog
  *
  * @slot - The dialog's content.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - The dialog's actions.
  * @slot header - The title, and anything beside it.
  * @slot icon - An icon above the title, for a warning dialog.
@@ -39,11 +50,30 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
  * @event {ToggleEvent} toggle - Sent when the dialog opens or closes, with `newState` and `oldState`.
  *
+ * @csspart body - The slot the content is in. It draws no box until you give it one.
  * @csspart dialog - The native dialog element.
+ * @csspart dismiss - The close control, drawn when the dialog is `dismissible`.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
+ * @csspart footer - The slot the actions are in. It draws no box until you give it one.
+ * @csspart header - The slot the title is in. It draws no box until you give it one.
  *
+ * @cssstate entering - From the moment the dialog opens until its entrance has finished.
+ * @cssstate exiting - From the moment the dialog closes until its exit has finished.
  * @cssstate open - While the dialog is open.
  */
 export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
+    /**
+     * Makes the dialog an alert dialog, for a message that interrupts to ask for
+     * an answer, such as a confirmation before something is deleted.
+     *
+     * The `<dialog>` takes `role="alertdialog"`, so a screen reader announces the
+     * dialog and its description as it opens. Everything else stays the same:
+     * the dialog is modal, Escape asks to close it, and `persistent` still
+     * refuses that.
+     *
+     * Not reflected, because no stylesheet selects on it.
+     */
+    alert: boolean;
     /**
      * Which close requests the browser handles on its own.
      *
@@ -57,11 +87,24 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * that a resting value is an attribute's absence.
      */
     closedBy?: 'any' | 'closerequest' | 'none';
+    /**
+     * Draws a control that closes the dialog, in the corner where the title is.
+     *
+     * Pressing it is `close()`, so it sends `helix-before-close` like every other
+     * way out, and `persistent` does not disable it.
+     */
+    dismissible: boolean;
+    /**
+     * The close control's accessible name. Translate it with the rest of your
+     * interface.
+     */
+    dismissLabel: string;
     /**
      * Accessible name for the dialog. When it is empty, the heading in the
      * `header` slot names the dialog.
      */
     label: string;
+    protected readonly phases: OpenPhaseController;
     protected readonly aria: AriaForwardController;
     protected readonly commands: CommandController;
     /**
@@ -147,6 +190,19 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * either. A browser without element reflection keeps the fallback name.
      */
     private nameByHeader;
+    /** Whether the body's words are what currently describe the dialog. */
+    private describedByBody;
+    /**
+     * Describes the dialog by the words at the start of its body, where nothing
+     * else describes it.
+     *
+     * An element reference, for the reason `nameByHeader` gives. Only the leading
+     * run of elements that hold no control, so a dialog asking a question above a
+     * form is described by the question: a description that read out every field
+     * label would repeat what a reader hears again as they reach each field. An
+     * `aria-describedby` on the host comes first.
+     */
+    private describeByBody;
     protected willUpdate(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -203,6 +259,13 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
     private refuse;
     /** Bounds the refusal listener to one, whether or not it ever fires. */
     private refusal;
+    /**
+     * 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. The same pair `Toast.Item` draws.
+     */
+    protected renderDismissIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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();
     /**