@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -16,13 +16,21 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the authors of a paper. The item then puts your `<dd>` elements after its
  * `<dt>` in place of its own, so a screen reader hears one term and each of
  * its descriptions, as in a native `<dl>`. A server cannot see your elements,
- * so the served item wraps them in its own `<dd>` until it runs.
+ * so set `several` as well, and the served item leaves them unwrapped too.
+ * Without it, the served item wraps them in its own `<dd>` until it runs.
+ *
+ * **Controls that act on the value**, such as a copy button, go in the
+ * `actions` slot, drawn after the value inside its `<dd>`, as Radix Themes'
+ * data list puts an icon button beside a value. A screen reader hears them as
+ * part of the description they act on. With several values, put each control
+ * inside the `<dd>` it acts on.
  *
  * @since 0.1.0
  * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
  *
  * @slot - The value, or several `<dd>` elements for several values.
+ * @slot actions - Controls that act on the value, such as a copy button, after it inside its `<dd>`.
  * @slot label - The label, when it is more than text. Falls back to `label`.
  *
  * @csspart label - The `<dt>`, holding the label.
@@ -37,12 +45,18 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      * that varies and is often more than text.
      */
     label: string;
+    /**
+     * Says the values are several `<dd>` elements of your own, so the item
+     * draws no `<dd>` of its own around them, on the server too. Without it the
+     * item finds them once it runs, and the served markup wraps them until then.
+     */
+    several: boolean;
     /**
      * Whether the values are the consumer's own `<dd>` elements, which the item
-     * then does not wrap. Unknown on a server and while hydrating, where the
-     * item draws its own.
+     * then does not wrap: `several`, or `<dd>` children found once it runs.
+     * Unknown on a server and while hydrating, where `several` decides.
      */
-    private get several();
+    private get ownValues();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /** A value arriving or leaving can change whether the item wraps them. */

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

@@ -11,12 +11,13 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
     constructor() {
         super(...arguments);
         this.label = '';
+        this.several = false;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
     }
-    get several() {
-        return this.knownChildren.some((child) => child.localName === 'dd');
+    get ownValues() {
+        return this.several || this.knownChildren.some((child) => child.localName === 'dd');
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -24,15 +25,18 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
     }
     render() {
         const label = html `<dt part="label"><slot name="label">${this.label}</slot></dt>`;
-        return this.several
+        return this.ownValues
             ? html `${label}<slot @slotchange=${this.handleSlotChange}></slot>`
             : html `${label}
-          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot></dd>`;
+          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot><slot name="actions"></slot></dd>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessDescriptionListItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDescriptionListItem.prototype, "several", void 0);
 HelixHeadlessDescriptionListItem = __decorate([
     customElement('helix-headless-description-list-item')
 ], HelixHeadlessDescriptionListItem);

package/dist/dialog/description.js

@@ -1,5 +1,19 @@
 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);
+const isControl = (element) => {
+    if (element.matches(CONTROL)) {
+        return true;
+    }
+    if (!element.localName.includes('-')) {
+        return false;
+    }
+    const definition = customElements.get(element.localName);
+    const root = element.shadowRoot;
+    return (definition === undefined ||
+        !(element instanceof definition) ||
+        definition.formAssociated === true ||
+        root?.delegatesFocus === true ||
+        root?.querySelector(CONTROL) != null);
+};
 export const wordsIn = (slot) => {
     const words = [];
     for (const one of slot?.assignedElements({ flatten: true }) ?? []) {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, CommandController, HelixElement, OpenPhaseController } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, FocusScopeController, 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;
 /**
@@ -13,6 +13,10 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * - an inert page behind the dialog, unreachable by pointer, keyboard, or
  *   virtual cursor
  *
+ * The dialog adds one thing to those: `Tab` from its last control goes to its
+ * first, and `Shift+Tab` from its first to its last. A native modal lets `Tab`
+ * past its last control out to the browser's own controls.
+ *
  * `open` calls `showModal()`, and every way the dialog closes goes through
  * `requestOpen`. A native dialog closes three ways: the property, Escape, and a
  * `<form method="dialog">` submit. Routing all three through `requestOpen`
@@ -25,7 +29,8 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  *
  * 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
+ * question above a form describes the dialog, and the form does not. A Helix
+ * component that draws words and no control, such as `Text`, counts as words. An
  * `aria-describedby` on the host replaces it.
  *
  * Set `alert` for a dialog that interrupts to ask for an answer, such as a
@@ -190,6 +195,7 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * either. A browser without element reflection keeps the fallback name.
      */
     private nameByHeader;
+    protected readonly scope: FocusScopeController;
     /** Whether the body's words are what currently describe the dialog. */
     private describedByBody;
     /**

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, HelixElement, headingsIn, hostAria, lockScroll, MixinControllerOpen, OpenPhaseController, reflectElements, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, FocusScopeController, 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';
@@ -60,6 +60,16 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             this.close(submitter?.hasAttribute('value') ? submitter.value : undefined);
         };
         this.namedByHeader = false;
+        this.scope = new FocusScopeController(this, {
+            contain: () => this.open,
+            contents: () => [
+                ...['icon', 'header', '', 'footer'].flatMap((name) => this.renderRoot
+                    ?.querySelector(name ? `slot[name="${name}"]` : 'slot:not([name])')
+                    ?.assignedElements({ flatten: true }) ?? []),
+                ...[...(this.dialog?.children ?? [])].filter((one) => !(one instanceof HTMLSlotElement)),
+            ],
+            surface: () => this.dialog,
+        });
         this.describedByBody = false;
         this.handleBackdrop = (event) => {
             const panel = this.dialog;
@@ -145,6 +155,11 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             return;
         }
         if (this.open && !dialog.open) {
+            auditName(this, () => null, 'Give it a `label`, or a heading in the `header` slot.', () => this.label !== '' ||
+                this.namedByHeader ||
+                headingsIn(this.renderRoot
+                    .querySelector('slot[name="header"]')
+                    ?.assignedElements({ flatten: true }) ?? []).length > 0);
             void this.openWhenSlotted(dialog);
         }
         else if (!this.open && dialog.open) {

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

@@ -9,6 +9,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * rendered element. The semantics are then in the server-rendered markup, with
  * no attribute written by script after the element connects.
  *
+ * Set `announced` for a line that divides one thing from another, and it is
+ * read as a separator, named by any content set into it.
+ *
  * Use `orientation="vertical"` between items on one line, such as inside a
  * toolbar. A vertical divider stretches to fit its flex parent and sets no
  * height of its own.

package/dist/divider/root/divider-root.js

@@ -23,9 +23,10 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
         return html `<div
       part="line"
       role=${this.announced ? 'separator' : 'presentation'}
+      aria-labelledby=${this.announced ? 'content' : nothing}
       aria-orientation=${this.announced ? (this.orientation ?? 'horizontal') : nothing}
     ></div>
-      <span part="content"><slot @slotchange=${() => this.markEmpty()}></slot></span>
+      <span id="content" part="content"><slot @slotchange=${() => this.markEmpty()}></slot></span>
       <div part="line" role="presentation"></div>`;
     }
 };

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

@@ -49,6 +49,7 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @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.
+ * @csspart slice-label - One slice's share, written on the slice under `slice-labels`. Placed with `left` and `top`, or `inset-inline-start` and `top` on a half ring, and carries its series color as `--chart-series`.
  * @csspart summary - The chart's name and each slice's share, written as a sentence for screen readers. Hide it visually.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
@@ -115,6 +116,16 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * because the styled sheet selects on it.
      */
     hole?: 'large' | 'none' | 'small';
+    /**
+     * Writes each slice's share on the slice, the `slice-label` part, so a
+     * reader sees the parts without a legend or a pointer: "29%" in the middle
+     * of the band.
+     *
+     * Absent writes none. A slice under a twentieth of the whole takes no
+     * label, there being no room on it for one. A screen reader hears every
+     * share in the summary, and the labels are hidden from it.
+     */
+    sliceLabels: boolean;
     /**
      * How much of the circle the whole occupies.
      *
@@ -175,6 +186,11 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * slice, so a key stepping by rows would land on a slice that is not there.
      */
     get readings(): number;
+    /**
+     * Whether the slice at this place is drawn, which a slice a legend hid is
+     * not. The keys pass over it, as the ring closes over it.
+     */
+    showsReading(at: number): boolean;
     protected render(): TemplateResult;
     /**
      * What a reader who cannot see the ring is told: the chart's name and each
@@ -194,6 +210,13 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * table does not hold.
      */
     protected renderPlot(shares: DonutShare[]): TemplateResult;
+    /**
+     * Each slice's share, written in the middle of its band at its mid-angle,
+     * as an element beside the drawing so the text is not stretched with it.
+     * Placed as the tooltip's point is placed: from the left on a whole ring,
+     * whose bearing is a clock's, and from the inline start on a half one.
+     */
+    protected renderSliceLabels(shares: DonutShare[]): TemplateResult;
     /**
      * The view box, cropped to what is actually drawn.
      *
@@ -238,6 +261,14 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * box, which is the ring's center for a circle and is not for a sector.
      */
     protected renderEdge(share: DonutShare, index: number): TemplateResult;
+    /**
+     * The rows the tooltip reads, with the slice's share of the whole after its
+     * amount, as `AreaChart` writes a part's share under `share`: "612 (24%)".
+     *
+     * The share is what the ring shows and the table does not, so a reading
+     * said by key gives it too, as the summary does.
+     */
+    private withShare;
     /**
      * What a pointer resting on a slice shows.
      *

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

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

package/dist/donut-chart/slice-label.d.ts

@@ -0,0 +1,35 @@
+/** A slice's place on the ring, as shares of the whole from 0 to 1. */
+export interface SliceShare {
+    /** How much of the ring the slice takes. */
+    fraction: number;
+    /** Where the slice starts, as the share of the ring before it. */
+    start: number;
+}
+/** The ring a slice label is placed on, in the drawing's own units. */
+export interface RingGeometry {
+    /** The center, on both axes. */
+    center: number;
+    /** Where the ring's turn starts, in radians: a quarter turn back is twelve o'clock. */
+    origin: number;
+    /** The radius of the band's middle, where a label sits. */
+    radius: number;
+    /** How much of a turn the ring takes: 1 for a ring, a half for an arc. */
+    span: number;
+    /** How tall the box the labels are placed in is. */
+    tall: number;
+    /** Where the top of that box is. */
+    top: number;
+    /** How wide the drawing is. */
+    width: number;
+}
+/** The smallest share that takes a label: a twentieth of the ring. */
+export declare const SMALLEST_LABELED = 0.05;
+/**
+ * Where a slice's label goes, as percentages of the box from the left and the
+ * top: the middle of its band at its mid-angle. Nothing for a slice under a
+ * twentieth, whose label would not fit on it.
+ */
+export declare const sliceLabelAt: (share: SliceShare, ring: RingGeometry) => {
+    x: number;
+    y: number;
+} | undefined;

package/dist/donut-chart/slice-label.js

@@ -0,0 +1,11 @@
+export const SMALLEST_LABELED = 0.05;
+export const sliceLabelAt = (share, ring) => {
+    if (share.fraction < SMALLEST_LABELED) {
+        return undefined;
+    }
+    const angle = (share.start + share.fraction / 2) * 2 * Math.PI * ring.span + ring.origin;
+    return {
+        x: ((ring.center + Math.cos(angle) * ring.radius) / ring.width) * 100,
+        y: ((ring.center + Math.sin(angle) * ring.radius - ring.top) / ring.tall) * 100,
+    };
+};

package/dist/drawer/reveal.d.ts

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

package/dist/drawer/reveal.js

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

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, CommandController, HelixElement, OpenPhaseController, SwipeController } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, FocusScopeController, 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;
 /**
@@ -11,7 +11,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  *
  * The drawer is modal by default, which means four things:
  *
- * - focus is trapped inside
+ * - focus is trapped inside: `Tab` from the last control goes to the first,
+ *   and `Shift+Tab` from the first to the last, as in `Dialog`
  * - Escape and a press outside close it
  * - the page behind is covered
  * - the page behind does not scroll
@@ -27,6 +28,16 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * the nearest. While a swipe moves the panel, the distance is written on it as
  * `--drawer-swipe-x` and `--drawer-swipe-y`. `swipe="false"` turns swiping off.
  *
+ * `snap` is the snap point the panel rests at, and `:state(snapped)` is on the
+ * host while that is less than the whole panel. `snapTo()` moves it to
+ * another. **Focus moving to a control past the
+ * window's edge opens the panel to its largest snap point**, so a reader
+ * moving through a half open sheet with `Tab` never lands on a control they
+ * cannot see.
+ *
+ * Set `dismissible` to draw a close control in the corner, labeled by
+ * `dismiss-label`, as `Dialog` draws one.
+ *
  * The panel's name is `label` when you set it. Otherwise it is the heading in
  * the `header` slot, or the elements an `aria-labelledby` on the host names.
  *
@@ -51,6 +62,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/drawer
  *
  * @slot - The drawer's content.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
  * @slot footer - Content pinned below the scrolling area, such as the drawer's actions.
  * @slot header - Content pinned above the scrolling area.
  *
@@ -60,6 +72,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @event {ToggleEvent} toggle - Sent when the drawer opens or closes, with `newState` and `oldState`.
  *
  * @csspart content - The scrolling content region.
+ * @csspart dismiss - The close control, drawn when the drawer is `dismissible`.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
  * @csspart footer - The footer region.
  * @csspart header - The header region.
  * @csspart panel - The sliding panel.
@@ -70,6 +84,7 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @cssstate entering - From the moment the drawer opens until its entrance has finished.
  * @cssstate exiting - From the moment the drawer closes until its exit has finished.
  * @cssstate open - While the drawer is open.
+ * @cssstate snapped - While the panel rests at a snap point that shows less than the whole panel.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly commands: CommandController;
@@ -86,6 +101,18 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * that a resting value is an attribute's absence.
      */
     closedBy?: 'any' | 'closerequest' | 'none';
+    /**
+     * Draws a control that closes the drawer, in the corner where the title is.
+     *
+     * Pressing it is `close()`, so it sends `helix-before-close` like every other
+     * way out.
+     */
+    dismissible: boolean;
+    /**
+     * The close control's accessible name. Translate it with the rest of your
+     * interface.
+     */
+    dismissLabel: string;
     /**
      * Accessible name for the panel. When it is empty, the heading in the
      * `header` slot names the panel.
@@ -153,6 +180,8 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly phases: OpenPhaseController;
     /** How far the panel rests toward its edge, in pixels, at the snap point it settled on. */
     private rest;
+    /** The fraction of the panel on screen at the snap point it rests at. */
+    private shown;
     /** The edge the panel leaves through, from its placement and the writing direction. */
     private get edge();
     /** The panel's size along the swipe, in pixels. */
@@ -165,6 +194,30 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     private place;
     /** Brings a released swipe to rest: at a snap point, or closed through the request. */
     private settle;
+    /**
+     * The fraction of the panel on screen at the snap point it rests at, such as
+     * `0.5`. It is `1`, the whole panel, while the drawer is closed or has no
+     * `snap-points`.
+     */
+    get snap(): number;
+    /**
+     * Puts the panel at rest at a snap point, and says on the host, as
+     * `:state(snapped)`, while that is short of the whole panel.
+     */
+    private restAt;
+    /** Says whether the panel rests short of the whole, and nothing while closed. */
+    private markSnap;
+    /**
+     * Moves the open panel to rest at the snap point nearest `point`, a fraction
+     * of the panel such as `1` for the whole of it.
+     */
+    snapTo(point: number): void;
+    /**
+     * Focus moving to a control past the window's edge, in a panel resting short
+     * of the whole: the panel opens to its largest snap point, so the control is
+     * on screen.
+     */
+    private readonly handleFocusIn;
     /** Opens the drawer. */
     show(): void;
     /**
@@ -181,6 +234,7 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * key is read here, and comes through the same request.
      */
     private readonly handleKeydown;
+    protected readonly scope: FocusScopeController;
     /** The panel, which is a real `<dialog>`. */
     private get panel();
     /**
@@ -216,9 +270,16 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * reflection keeps the fallback name.
      */
     private nameByHeader;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The glyph on the close control, behind a seam: slot fallback, so a
+     * consumer replaces it by slotting, and a method, so a tier above replaces it
+     * by overriding. As `Dialog` draws it.
+     */
+    protected renderDismissIcon(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {