@fusion.dev/helix-headless 0.0.0-dev

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

@@ -0,0 +1,395 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, drawTooltip, HelixElement, MixinChartSource, seriesIndex, } from '@fusion.dev/helix-core';
+import { html, nothing, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../tooltip/index.js';
+/** The drawing's own coordinates, square because the shape has to stay round. */
+const BOX = 100;
+const CENTER = BOX / 2;
+/** The outer edge of the ring, whatever its thickness. */
+const EDGE = 40;
+/**
+ * The dash gap, long enough that the pattern cannot repeat.
+ *
+ * A dash array tiles. Set to `circumference - length` the pattern fills the
+ * circle exactly once and is right at rest, and wrong the moment it animates:
+ * both numbers interpolate, and while the gap is shorter than the path still to
+ * cover, a second and third copy of the slice sweep round the ring and vanish
+ * inside one transition. A constant far larger than any circumference has no
+ * second tile to draw at any point in the interpolation. It is the number
+ * `@starting-style` already uses for the same reason.
+ */
+const GAP = 9999;
+/**
+ * How much of the radius the ring takes, by name.
+ *
+ * **The outer edge is fixed and the radius follows the thickness**, which is
+ * what makes `none` a pie and makes clipping impossible. The stroke sits astride
+ * its own radius, so a ring drawn at a fixed `r` grows outward as well as
+ * inward: measured against a 100 box, the old fixed `r=40` had an unstated
+ * ceiling at a thickness of 20, and anything past it crossed the view box and
+ * was cut with nothing to say so. Closing the hole that way would have needed a
+ * thickness of 80, spanning `r=0` to `r=80` in a box whose half is 50.
+ *
+ * Derived instead, `r = EDGE - thickness / 2`, the outer edge lands on `EDGE`
+ * for every value and the inner edge is `EDGE - thickness`. A pie is where the
+ * inner edge reaches the center, which solves to `thickness = EDGE`: the ring
+ * is then drawn at `r = EDGE / 2` and its stroke spans the whole radius.
+ *
+ * `EDGE * 2` was the first answer and is the trap in this arithmetic. It gives
+ * `r = 0`, and a circle of radius zero draws nothing at all, so a pie came out
+ * as an empty box. The stroke reaches `thickness / 2` either side of `r`, not
+ * `thickness`.
+ */
+const THICKNESS = {
+    large: 8,
+    medium: 16,
+    none: EDGE,
+    small: 26,
+};
+/**
+ * @summary Parts of a whole as a ring, read from a table.
+ *
+ * @description
+ * The chart with the narrowest honest use, so the component is narrow too.
+ *
+ * **It reads one column and treats the rows as the parts.** Every other chart
+ * here takes a column per series; a ring has one whole to divide, and a second
+ * ring inside the first is two charts sharing a picture in the most literal
+ * way. So the first column of numbers is the series and each row is a slice.
+ *
+ * **It refuses negative values rather than drawing them.** A share of a whole
+ * cannot be less than nothing, and an arc for a negative number either runs
+ * backwards over its neighbours or is silently dropped. Those rows are skipped
+ * and the total is of what is left, which is the only reading that stays true.
+ *
+ * **The shape is drawn with a dashed stroke, not with arc commands.** One
+ * `<circle>` per slice, its dash set to the slice's share of the circumference
+ * and its offset to where the slice begins. Arc paths need the sweep flag and a
+ * large-arc flag, both of which flip at values a reader never sees coming, and
+ * a slice of exactly one whole becomes a path with no length at all.
+ *
+ * **And it keeps its aspect ratio**, alone among the charts here. The others
+ * set `preserveAspectRatio="none"` so one drawing fills any box and rescue
+ * their strokes with `vector-effect`; that rescues strokes and not geometry, so
+ * a ring drawn the same way is an ellipse in anything but a square.
+ *
+ * The table is the accessible representation and this drawing is `aria-hidden`.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @aliases Pie Chart, Ring Chart, Share Chart
+ * @documentation https://helix.fusion.dev/components/donut-chart
+ *
+ * @slot - Goes in the middle of the ring. A total, usually.
+ *
+ * @csspart center - The middle of the ring, holding whatever is slotted.
+ * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart plot - The drawing.
+ * @csspart segment - One slice.
+ * @csspart segment-edge - One slice as a closed shape, for a boundary to trace.
+ * @csspart tooltip - The bubble, forwarded from `Tooltip`.
+ * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-label - The slice's own name inside the tooltip.
+ * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-value - A column's value inside the tooltip.
+ * @csspart track - The ring the slices are drawn on.
+ *
+ * @cssproperty --donut-chart-stroke - How thick the ring is drawn, derived from `hole`.
+ */
+let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSource(HelixElement) {
+    /* The slices, in table order, with anything negative dropped. */
+    /**
+     * The pointer is not mapped across this one.
+     *
+     * Every other chart lays its readings out left to right, so the nearest is
+     * arithmetic on x. A ring's slices are real elements at every angle, and x
+     * alone would answer with whichever slice shared a horizontal position with
+     * the pointer: at three o'clock and at nine o'clock it would give the same
+     * reading for opposite sides of the chart. So the slices say which one they
+     * are and this only holds the answer.
+     *
+     * Set here rather than in a constructor, and that is not a style choice. The
+     * analyzer reads `this.pointer.axis = 'none'` in a constructor body as a
+     * declaration of a public field called `axis`, and failed the build with
+     * `HelixHeadlessDonutChart.tracks has no description` for a member that does not
+     * exist on this class at all.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.axis = 'none';
+    }
+    /** The fraction of the circle the shares are spread over. */
+    get span() {
+        return this.sweep === 'half' ? 0.5 : 1;
+    }
+    /** How thick the ring is drawn, in the drawing's own units. */
+    get thickness() {
+        return THICKNESS[this.hole ?? 'medium'] ?? THICKNESS.medium ?? 0;
+    }
+    /** The ring's radius, which follows its thickness so the outer edge holds. */
+    get radius() {
+        return EDGE - this.thickness / 2;
+    }
+    get shares() {
+        const series = this.series;
+        const values = (series[0]?.points ?? [])
+            .map((point) => point.value)
+            .map((value) => (Number.isFinite(value) && value > 0 ? value : 0));
+        const total = values.reduce((sum, one) => sum + one, 0);
+        if (total === 0) {
+            return [];
+        }
+        let start = 0;
+        return values.map((value) => {
+            const fraction = value / total;
+            const at = start;
+            start += fraction;
+            return { fraction, start: at };
+        });
+    }
+    render() {
+        const shares = this.shares;
+        /* No middle where there is no hole. A `center` part over a pie would put
+           slotted content on top of the slices, and a slot nobody can see is worse
+           than one that is not there: a consumer fills it and nothing happens. */
+        return html `${this.renderPlot(shares)}
+`;
+    }
+    /**
+     * The ring itself, behind a seam the styled tier can move.
+     *
+     * `aria-hidden`, because the table it was read from is the readable version
+     * and a screen reader hearing both hears the same numbers twice.
+     */
+    renderPlot(shares) {
+        /* The thickness is declared here, on the box that holds both the ring and
+           the middle, and not on the slices.
+         *
+         * It was on each `<circle>`, and `[part="center"]` read it to size the hole
+         * it fills. A custom property inherits down and never sideways, so the
+         * middle, being a sibling, always got the fallback: the hole was sized as if
+         * every ring were the resting thickness. At `hole="large"` that made the
+         * middle smaller than the actual hole and the total fitted with room to
+         * spare, and at the default the two matched exactly and the total overflowed
+         * onto the slices. One reads as fine and the other as a bug, from one
+         * mistake. */
+        return html `<div
+      aria-hidden="true"
+      id="helix-chart-plot"
+      part="plot"
+      style="--donut-chart-stroke: ${this.thickness}"
+    >
+      <svg viewBox=${this.frame} xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx=${CENTER}
+          cy=${CENTER}
+          fill="none"
+          part="track"
+          r=${this.radius}
+          stroke-dasharray="${2 * Math.PI * this.radius * this.span} ${GAP}"
+          stroke-width=${this.thickness}
+        />
+        ${shares.map((share, index) => this.renderSegment(share, index))}
+      </svg>
+      ${this.hole === 'none' ? nothing : html `<div part="center"><slot></slot></div>`}
+      ${this.renderTooltip()}
+    </div>`;
+    }
+    /**
+     * The view box, cropped to what is actually drawn.
+     *
+     * A full turn uses the square. A half arc uses the band from the top of the
+     * ring down to the center line, plus the half stroke its flat ends hang
+     * below that, and cropping to it is the difference between a semi-donut and a
+     * semi-donut with an empty quarter of the box under it. The outer edge is
+     * `EDGE` from the center whatever the thickness, which is what makes this two
+     * numbers rather than a measurement.
+     */
+    get frame() {
+        if (this.sweep !== 'half') {
+            return `0 0 ${BOX} ${BOX}`;
+        }
+        return `0 ${CENTER - EDGE} ${BOX} ${EDGE + this.thickness / 2}`;
+    }
+    /** One slice, as a dash the length of its share. */
+    renderSegment(share, index) {
+        const circumference = 2 * Math.PI * this.radius;
+        const length = share.fraction * circumference * this.span;
+        /* Negative, because `stroke-dashoffset` counts backwards along the path:
+           a positive offset would run the slices anticlockwise from twelve. The
+           rotation that puts zero at the top is the stylesheet's, since it is a
+           fact about how the picture is presented rather than about the numbers. */
+        return svg `<circle
+      cx=${CENTER}
+      cy=${CENTER}
+      data-active=${this.pointer.at === index ? '' : nothing}
+      data-series=${seriesIndex(index)}
+      fill="none"
+      style="--chart-series: var(--chart-series-${seriesIndex(index)})"
+      @pointerenter=${() => this.pointer.set(index)}
+      part="segment"
+      r=${this.radius}
+      stroke-dasharray="${length} ${GAP}"
+      stroke-dashoffset=${-share.start * circumference * this.span}
+    />
+    ${this.renderEdge(share, index)}`;
+    }
+    /**
+     * The same slice again, as a shape with an inside.
+     *
+     * **A stroked arc has no boundary to draw, which is why this exists.** The
+     * segment above is a dash on a circle: the mark *is* the edge, so there is
+     * nothing for an outline to trace and nothing within it to fade. Anything
+     * wanting those two separately needs the slice as a closed path, and this is
+     * it: the outer arc, a step inward, the inner arc back, closed.
+     *
+     * **Rendered always and painted only sometimes**, which is what keeps this on
+     * this tier. Whether a boundary is drawn is a styled question and the answer
+     * lives in a stylesheet; whether the geometry a boundary would need exists at
+     * all is structural, and a component cannot conjure a shape from CSS. So the
+     * path is here for every donut and is `fill: none; stroke: none` until
+     * something asks for it.
+     *
+     * **Not a replacement for the dash, which was the first plan.** The dash
+     * carries three jobs and only one of them is the shape: a share growing is a
+     * `stroke-dasharray` interpolating with no reflow, and `@starting-style` on
+     * that same property is the whole reason the ring sweeps in rather than
+     * appearing. A `d` cannot do either. CSS interpolates one only between paths
+     * of identical command structure, and the large-arc flag flips the moment a
+     * slice crosses a half turn, so a growing slice would pop partway through the
+     * transition it was meant to smooth. Both animations stay on the dash and this
+     * path follows it.
+     *
+     * The turn to twelve o'clock is arithmetic here rather than the rotation the
+     * stylesheet gives the circles. That rule uses `transform-box: fill-box`, so
+     * it spins each element about its own bounding box, which is the ring's center
+     * for a circle and is not for a sector.
+     */
+    renderEdge(share, index) {
+        const turn = 2 * Math.PI * this.span;
+        const from = share.start * turn - Math.PI / 2;
+        const to = (share.start + share.fraction) * turn - Math.PI / 2;
+        const outer = EDGE;
+        const inner = EDGE - this.thickness;
+        const at = (radius, angle) => `${(CENTER + Math.cos(angle) * radius).toFixed(3)} ${(CENTER + Math.sin(angle) * radius).toFixed(3)}`;
+        const wide = to - from > Math.PI ? 1 : 0;
+        /* A slice that is the whole ring starts and ends at one point, and an arc
+           between a point and itself draws nothing. Split at the halfway angle so
+           each half is a real arc. */
+        const full = to - from >= 2 * Math.PI - 1e-6;
+        const mid = from + (to - from) / 2;
+        const outward = full
+            ? `A ${outer} ${outer} 0 0 1 ${at(outer, mid)} A ${outer} ${outer} 0 0 1 ${at(outer, to)}`
+            : `A ${outer} ${outer} 0 ${wide} 1 ${at(outer, to)}`;
+        /* A pie has no inner arc: the radius solves to zero and the two ends meet at
+           the middle, so the step back is a line to the center and not an arc of no
+           size. */
+        const homeward = inner <= 0
+            ? `L ${CENTER} ${CENTER}`
+            : full
+                ? `L ${at(inner, to)} A ${inner} ${inner} 0 0 0 ${at(inner, mid)} A ${inner} ${inner} 0 0 0 ${at(inner, from)}`
+                : `L ${at(inner, to)} A ${inner} ${inner} 0 ${wide} 0 ${at(inner, from)}`;
+        const shape = `M ${at(outer, from)} ${outward} ${homeward} Z`;
+        /* **Clipped to itself, because a stroke straddles the line it is drawn on.**
+           Half of it falls outside the wedge: past the fill on both arcs, and across
+           the seam into the neighbor on both radial sides, where that neighbor is
+           drawing the same line from the other direction and the two overlap. Seen
+           as a doubled edge at every join and a halo around the ring.
+    
+           Clipping to the same path keeps the inner half and drops the outer, so an
+           edge stays inside the slice it belongs to and two adjacent edges meet
+           exactly. The clip is the shape itself, so it costs no second geometry and
+           cannot drift from it.
+    
+           Ids are scoped to the shadow root, so an index is enough to keep them
+           apart, and two donuts on a page cannot collide. */
+        /* **`fill="none"` as an attribute, not a rule, because this tier has
+             no rules.** An SVG path fills black by default and the styled tier
+             says `fill: none` in its own stylesheet, so the shape was invisible
+             there and four black slices covering the ring everywhere else. Caught
+             by retaking the visual baselines: the headless donut lost two of its
+             four greys to a closed shape nobody had told to stop filling.
+    
+             A presentation attribute loses to any CSS rule, so the styled tier
+             still decides and a consumer can still fill this if they want one.
+             What it cannot do any more is fill by accident on the tier whose
+             whole premise is that it ships no CSS. */
+        const clip = `helix-donut-edge-${index}`;
+        return svg `<clipPath id=${clip}><path d=${shape} /></clipPath>
+    <path
+      clip-path="url(#${clip})"
+      d=${shape}
+      data-active=${this.pointer.at === index ? '' : nothing}
+      data-series=${seriesIndex(index)}
+        fill="none"
+      part="segment-edge"
+      style="--chart-series: var(--chart-series-${seriesIndex(index)})"
+    />`;
+    }
+    /**
+     * What a pointer resting on a slice shows.
+     *
+     * Placed in the middle rather than along an axis, a ring having none, and the
+     * middle is where a reader is already looking: the hole usually holds a
+     * total, so a tooltip over it replaces one figure with the one being asked
+     * about rather than covering something else.
+     */
+    renderTooltip() {
+        const at = this.pointer.at;
+        const share = this.shares[at];
+        if (!share) {
+            return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
+        }
+        /* **Outside the ring, on the slice's own bearing.** Centered in the hole was
+           the first version: harmless over a donut, since the hole is empty, and it
+           covers the data on a pie, and in neither case does it say *which* slice it
+           means. Out here it does, and one rule serves both.
+         *
+         * The mid-angle, less a quarter turn because the ring is rotated to start
+         * at twelve o'clock and this arithmetic starts at three. The point is the
+         * outer edge, and the box is pushed a little further along the same bearing
+         * so its arrow rests on the ring rather than in it. */
+        const angle = (share.start + share.fraction / 2) * 2 * Math.PI - Math.PI / 2;
+        const edge = EDGE;
+        const x = CENTER + Math.cos(angle) * edge;
+        const y = CENTER + Math.sin(angle) * edge;
+        return drawTooltip(this.sourceRows, at, this.tag('tooltip'), {
+            /* The preferred side from the bearing's dominant axis, and
+               `FloatingController` moves it if that side does not fit. Four fixed
+               sides could not express a bearing at all, which is what made the arrow
+               miss the ring; a preference plus flipping can. */
+            placement: Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))
+                ? Math.cos(angle) > 0
+                    ? 'right'
+                    : 'left'
+                : Math.sin(angle) > 0
+                    ? 'bottom'
+                    : 'top',
+            x: `${x}%`,
+            y: `${y}%`,
+        });
+    }
+};
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessDonutChart.prototype, "hole", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessDonutChart.prototype, "sweep", void 0);
+HelixHeadlessDonutChart = __decorate([
+    customElement('helix-headless-donut-chart')
+], HelixHeadlessDonutChart);
+export { HelixHeadlessDonutChart };

package/dist/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './root/drawer-root.js';

package/dist/drawer/index.js

@@ -0,0 +1 @@
+export * from './root/drawer-root.js';

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

@@ -0,0 +1,144 @@
+import { CommandController, HelixElement } 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;
+/**
+ * @summary A panel that slides in from an edge.
+ *
+ * @description
+ * Takes `MixinControllerOpen`, so `open`, `defaultOpen`, and `OpenChange` behave exactly
+ * as they do on an accordion item, and a consumer already knows the API.
+ *
+ * Modal by default, which is three things together and not one: focus is
+ * trapped inside, Escape and an outside press close it, and the page behind is
+ * covered. A panel with the look of a modal and none of its behavior is worse
+ * than an inline one, because it invites the reader to treat it as blocking.
+ *
+ * Content stays mounted when closed, so it is in the server's markup and can
+ * animate. A closed `<dialog>` is already out of the tab order and out of the
+ * accessibility tree, so nothing here writes `inert`.
+ *
+ * **This described a hand-written `inert` until 21 Aug 2026, and had done since
+ * the panel became a `<dialog>`.** The rewrite took the `role`, the
+ * `aria-modal`, the scrim and the `inert` with it, because the element brings
+ * all four, and the comments at the two call sites say so. The class doc did
+ * not, and `drawer-root.ssr.spec.ts` has asserted the panel carries no `inert`
+ * the whole time: a spec three files away existing to contradict the prose is
+ * the same shape as `Stat`'s `detail` slot, which is what `check:references`
+ * was written after and is the half it cannot see.
+ *
+ * Opened declaratively with the platform's invoker attributes:
+ *
+ * ```html
+ * <helix-button commandfor="nav" command="--toggle">Menu</helix-button>
+ * <helix-drawer id="nav">…</helix-drawer>
+ * ```
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Sheet, Sidebar, Panel, Off-canvas
+ * @documentation https://helix.fusion.dev/components/drawer
+ *
+ * @slot - The drawer's content.
+ * @slot header - Content pinned above the scrolling area.
+ *
+ * @event {Event} close - Relayed, because the platform's own does not escape.
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the panel closes, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart content - The scrolling content region.
+ * @csspart header - The header region.
+ * @csspart panel - The sliding panel.
+ */
+export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
+    protected readonly commands: CommandController;
+    /**
+     * Which edge the drawer comes from.
+     *
+     * Unset is `end`, which the styled tier reads as `:host(:not([placement]))`
+     * beside `:host([placement="end"])` rather than as a value written here: a
+     * default assigned to the property would reflect onto every host and put a
+     * `placement="end"` into markup no consumer wrote.
+     */
+    placement?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * Accessible name for the panel.
+     */
+    label: string;
+    /**
+     * Whether the drawer blocks the page behind it.
+     *
+     * Turning this off removes the focus trap and the scrim together, because
+     * they are one decision: a panel that traps focus without covering the page
+     * strands the reader, and one that covers without trapping lets them tab
+     * behind the cover.
+     *
+     * Not reflected. It stays `true` by default, since a drawer that silently
+     * lost its focus trap because a consumer forgot a word would be worse than an
+     * attribute on the host, and nothing selects on it: the scrim is rendered or
+     * not, rather than shown or hidden by CSS.
+     */
+    modal: boolean;
+    /**
+     * Which close requests the browser answers on its own.
+     *
+     * `<dialog closedby>`, forwarded, and safe to forward because every path it
+     * opens still comes back through this element: a close request fires `cancel`
+     * first, `handleCancel` prevents it, and `requestOpen` decides. So
+     * `closedby="any"` gains light dismiss without giving up the refusal, which is
+     * the property this component exists to keep.
+     *
+     * Absent by default, which is the platform's `auto` and this library's rule
+     * that a resting value is an attribute's absence.
+     */
+    closedBy?: 'any' | 'closerequest' | 'none';
+    /**
+     * What the dialog closed with, the way `<dialog>` reports it.
+     *
+     * **The whole point of a `<dialog>` returning a value is lost behind a shadow
+     * boundary**, which is where this one is: `querySelector` does not reach the
+     * element, so a consumer could neither set the value nor read it back. A
+     * drawer asking which of its actions dismissed it is the ordinary case and had
+     * no answer.
+     *
+     * Written before `open` is set to false rather than passed to a `close(value)`
+     * call, because this component has no such method: it is driven by `open`
+     * alone, and `Dialog`'s `close()` is the one that takes the value directly.
+     *
+     * Held here as well as on the element, so a value set before the first render
+     * survives to it and a consumer reading one back gets what they wrote.
+     */
+    get returnValue(): string;
+    set returnValue(value: string);
+    /** What a value set before the element existed is kept in. */
+    private returned;
+    /** The panel, which is a real `<dialog>`. */
+    private get panel();
+    /**
+     * Escape, routed through the request so a listener can refuse it.
+     *
+     * A native dialog closes itself on Escape, which would shut the drawer while
+     * the consumer's state still said open: the bug that makes a modal impossible
+     * to reopen. `Dialog` intercepts it for the same reason.
+     */
+    private readonly handleCancel;
+    /** A close that happened anyway is reflected back rather than argued with. */
+    private readonly handleClose;
+    /**
+     * A press on the backdrop, which lands on the dialog element itself.
+     *
+     * The panel fills only part of the dialog's box, so a press beside it hits
+     * the dialog and not a child. A native `<dialog>` does not close on that, and
+     * it is the gesture that most obviously means close.
+     */
+    private readonly handleBackdrop;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-drawer': HelixHeadlessDrawer;
+    }
+}
+export {};