@fusion.dev/helix-headless 0.0.0-dev

package/dist/sparkline/root/sparkline-root.js

@@ -0,0 +1,278 @@
+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, extent, HelixElement, linear, linePath, SourceController, } from '@fusion.dev/helix-core';
+import { html, nothing, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * The drawing's own coordinates, which the `viewBox` maps onto whatever box CSS
+ * gives it. Round numbers so a `d` attribute is readable in the inspector.
+ */
+const BOX = { height: 32, width: 100 };
+/** Splits on whitespace or commas, and keeps only what is a number. */
+const readValues = (input) => input
+    .split(/[\s,]+/)
+    .filter((one) => one !== '')
+    .map(Number)
+    .filter((one) => Number.isFinite(one));
+/**
+ * @summary A line with no axes, for the shape of a series beside the number it belongs to.
+ *
+ * @description
+ * The one chart here that takes its numbers from an attribute, and the reversal
+ * is deliberate. Every other chart reads a table because a reader might want to
+ * interrogate it; nobody interrogates the squiggle next to a figure. A
+ * fourteen-row table behind a bare trend line is fourteen dates read aloud in
+ * place of the one sentence that carries the meaning, so `values` is the list
+ * and `label` is the sentence.
+ *
+ * That is the library's own rule rather than a second data channel: a content
+ * property is its slot's fallback, which is why `Tooltip` takes `content` and
+ * `Avatar` takes `name`. `for` stays for the sparkline that genuinely has a
+ * table behind it, and it wins where both are given.
+ *
+ * **No label means decorative, and that is a choice rather than an oversight.**
+ * A sparkline beside a stat that already says "Sessions, 1,102" has nothing of
+ * its own to announce, and an unnamed `role="img"` announces "graphic" and
+ * stops. So an unlabelled sparkline is `aria-hidden`, and a labeled one is an
+ * image named by its sentence.
+ *
+ * It goes *beside* a `Stat` rather than inside one. The plan this was built
+ * from called for a `trend` slot on `Stat`; the spec already on `Stat` says the
+ * opposite, that a change beside a figure is a second fact, and the spec is
+ * right. `Trend` composes the same way.
+ *
+ * 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 Micro Chart, Trend Line, Inline Chart
+ * @documentation https://helix.fusion.dev/components/sparkline
+ *
+ * @csspart area - The region between the line and the bottom of its range.
+ * @csspart bar - One column, under `plot="bar"`.
+ * @csspart line - The path itself.
+ * @csspart svg - The drawing.
+ * @csspart terminus - The mark on the last value.
+ * @csspart wash-end - The far stop of the area's gradient.
+ * @csspart wash-start - The stop of the area's gradient that meets the line.
+ *
+ * @cssproperty --chart-terminus-x - Where the last point sits horizontally, as a percentage.
+ * @cssproperty --chart-terminus-y - Where the last point sits vertically, as a percentage.
+ */
+let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The id of a table to read instead, when there is one behind the line.
+         *
+         * The first column of numbers is the series drawn. This wins over `values`,
+         * because a table is the readable representation and a list of numbers in an
+         * attribute is not.
+         *
+         * **In React this arrives as a property and not as an attribute**, the way
+         * `Tooltip.for` does, so it does not reflect and nothing styles on it.
+         */
+        this.for = '';
+        /**
+         * What the line says, in a sentence.
+         *
+         * "Sessions rose from 1,240 to 1,318 and fell to 1,102 over fourteen days" is
+         * the accessible representation of a sparkline, and a list of the fourteen
+         * numbers is not. Absent, the drawing is hidden from a screen reader rather
+         * than announced without a name.
+         */
+        this.label = '';
+        /**
+         * The numbers, separated by whitespace or by commas.
+         *
+         * Both separators, so `values="1240 1318"` and an array assigned to the
+         * property both work: assigning `[1240, 1318]` stringifies to `1240,1318`,
+         * and a string is what survives React's hydration where an array property
+         * does not.
+         */
+        this.values = '';
+        /* One controller rather than the resolve-and-watch each chart had written
+           out for itself. Three copies had already drifted into two names for the
+           same lookup. */
+        this.source = new SourceController(this);
+    }
+    willUpdate(changed) {
+        if (changed.has('for')) {
+            this.source.watch();
+        }
+    }
+    /** The series to draw: the table if there is one, the attribute otherwise. */
+    #points() {
+        const series = this.source.series;
+        return series.length > 0
+            ? (series[0]?.points.map((point) => point.value) ?? [])
+            : readValues(this.values);
+    }
+    render() {
+        const points = this.#points();
+        /* Two points minimum, because one is not a trend and zero is not a line.
+           An `<svg>` given a `d` of `M NaN,NaN` draws nothing and reports nothing,
+           so the empty case is stated here rather than left to look like a bug. */
+        const x = linear([0, Math.max(points.length - 1, 1)], [0, BOX.width]);
+        /* **A bar measures from zero and a line measures from its own range**, and
+           that is a correctness difference rather than a preference.
+         *
+         * A line is a shape: what it says is where the readings sit relative to
+         * each other, so running the scale over the data's own extent uses the
+         * whole box and claims nothing about absolute size. A bar says something
+         * else. Its *length* is the value, so a baseline anywhere but zero makes
+         * the lengths proportional to nothing, which is the oldest misleading chart
+         * there is.
+         *
+         * Drawn over the data's extent, the smallest reading landed exactly on the
+         * floor and its column had no height at all: seven readings between 1,102
+         * and 1,408 came out as six columns and a gap, which looks like missing
+         * data and is really a scale saying the minimum is nothing.
+         *
+         * The zero is included at both ends, so a series that goes negative gets a
+         * baseline inside the box and its columns hang below it. */
+        const [low, high] = extent(points.length > 0 ? points : [0]);
+        const y = this.plot === 'bar'
+            ? linear([Math.min(0, low), Math.max(0, high)], [BOX.height, 0])
+            : linear([low, high], [BOX.height, 0]);
+        const coordinates = points.map((value, index) => [x(index), y(value)]);
+        const path = this.plot === 'bar' ? '' : linePath(coordinates, this.curve ?? 'smooth');
+        /* The same line closed down to the floor of its own range, which is where
+           the wash goes. Its own path rather than a fill on the line, because a
+           closed path strokes its closing edges too: filling the line itself would
+           draw a rule along the bottom of the box and up both sides.
+         *
+         * The floor is the smallest reading and not a true zero, because the scale
+         * runs over the data's own extent. That is the part a consumer would get
+         * wrong writing this themselves, and it is why the shape is built here. */
+        /* Asked negatively, because absent *is* an area here and the class doc
+           above says why. This is the one property in the family where the resting
+           arrangement is not the plainest thing, so the test has to answer true for
+           the value nobody set, and `=== 'area'` would answer false. */
+        const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
+            ? `${path}L${BOX.width},${BOX.height}L0,${BOX.height}Z`
+            : '';
+        /* One column per reading, inset so neighbours do not touch.
+         *
+         * A rect rather than a thick stroked line, because a bar has two ends and a
+         * stroke has a cap: `stroke-linecap` would round or square both ends of
+         * every column together, and the floor end should always be flat.
+         *
+         * The width is a share of the slot rather than a fixed number, so a series
+         * of seven and a series of forty both fill the box. Fourteen percent of the
+         * gap is the smallest separation that still reads as separate columns at
+         * the sizes a sparkline is drawn at, and it comes off the slot rather than
+         * off the bar so a two-reading series does not get two enormous slabs. */
+        const slot = BOX.width / Math.max(points.length, 1);
+        const floor = y(0);
+        const bars = this.plot === 'bar'
+            ? points.map((value, index) => ({
+                /* From the baseline to the reading, whichever of the two is
+                   higher up the box. A reading of exactly zero is a column of no
+                   height, which paints nothing, and that is the honest drawing of
+                   nothing rather than a hairline implying something. */
+                height: Math.abs(floor - y(value)),
+                width: slot * 0.72,
+                x: index * slot + slot * 0.14,
+                y: Math.min(floor, y(value)),
+            }))
+            : [];
+        /* Where the series ended, as percentages of the box.
+         *
+         * Read twice, by the mark and by the drawing, which is why it is a local
+         * rather than two literals. The mark sits on it; the drawing has the same
+         * disc taken out of it, so a `ring` is a hole rather than a lid. A custom
+         * property would be the tidier channel and there is nowhere to put one:
+         * they inherit down and never sideways, the two elements are siblings, and
+         * the host cannot be styled from a template without a wrapper element that
+         * carries nothing else. */
+        const end = points.length < 2
+            ? undefined
+            : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / BOX.height) * 100}%`;
+        return html `<svg
+        aria-hidden=${this.label === '' ? 'true' : nothing}
+        aria-label=${this.label === '' ? nothing : this.label}
+        part="svg"
+        preserveAspectRatio="none"
+        role=${this.label === '' ? nothing : 'img'}
+        style=${end ?? nothing}
+        viewBox="0 0 ${BOX.width} ${BOX.height}"
+      >
+        ${
+        /* The ramp the area is poured with, drawn here because a gradient is
+           an element and elements are this tier's business, and coloured
+           above because a color is not. Measured rather than assumed: a
+           fragment id inside a shadow root resolves within that root, so two
+           sparklines on a page carrying the same id stay independent, and CSS
+           `fill: url(#...)` reaches it as readily as the attribute does. */
+        svg `<defs>
+            <linearGradient id="sparkline-wash" x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0" part="wash-start" />
+              <stop offset="1" part="wash-end" />
+            </linearGradient>
+          </defs>`}
+        ${
+        /* `svg` and not `html`, because a nested template is parsed on its
+           own and this one has no `<svg>` around it to be parsed inside.
+           `<path>` read as standalone HTML becomes an unknown element in the
+           XHTML namespace: it takes the part, takes the `d`, inherits the
+           stroke, and draws nothing at all, because only an element in the
+           SVG namespace has geometry. Measured by `getBBox` throwing, which
+           is the shortest way to ask an element whether it is really SVG.
+
+           Every spec written against this passed while it drew nothing. They
+           asserted the `d` attribute, the part, the ARIA and the computed
+           `vector-effect`, and all of those are true of an HTML element
+           wearing the same name. */
+        path === '' ? nothing : svg `<path d=${path} part="line" />`}
+        ${area === '' ? nothing : svg `<path d=${area} part="area" />`}
+        ${bars.map((bar) => svg `<rect
+              height=${bar.height}
+              part="bar"
+              width=${bar.width}
+              x=${bar.x}
+              y=${bar.y}
+            />`)}
+      </svg>
+      ${
+        /* The mark on the last value, as an element beside the drawing rather
+           than a `<circle>` inside it. `preserveAspectRatio="none"` is what lets
+           the line fill any box, and it distorts everything in that coordinate
+           space with it: a circle in there is an ellipse whose squash depends on
+           how wide the consumer made it. Percentages of the host are the same
+           two numbers in a space nothing stretches. */
+        /* A line ends somewhere and a row of columns does not, so a bar plot
+           draws no terminus: the last column already is the last reading, and a
+           dot on top of it would be a second mark saying the same thing. */
+        points.length < 2 || this.plot === 'bar'
+            ? nothing
+            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSparkline.prototype, "plot", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSparkline.prototype, "curve", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "for", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "values", void 0);
+HelixHeadlessSparkline = __decorate([
+    customElement('helix-headless-sparkline')
+], HelixHeadlessSparkline);
+export { HelixHeadlessSparkline };

package/dist/speed-dial/index.d.ts

@@ -0,0 +1,2 @@
+export * from './item/speed-dial-item.js';
+export * from './root/speed-dial-root.js';

package/dist/speed-dial/index.js

@@ -0,0 +1,2 @@
+export * from './item/speed-dial-item.js';
+export * from './root/speed-dial-root.js';

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -0,0 +1,71 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary One action in a speed dial: a mark, and a name beside it.
+ *
+ * @description
+ * **A command, which is why this is a `menuitem` and a megamenu's rows are not.**
+ * The distinction is what the thing does, not what it looks like: a megamenu
+ * holds destinations, so it is a disclosure of links, and this holds actions a
+ * screen can take, which is exactly what `role="menu"` was written for. The
+ * roles follow the contents.
+ *
+ * **The name is text, not a title.** A dial's actions are icons, and an icon
+ * with a `title` is an action whose name only exists for whoever hovers it long
+ * enough. The label is rendered beside the mark and is the accessible name by
+ * being there, so it is read, searched and translated like anything else.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases Speed dial action, FAB action, Quick action
+ * @documentation https://helix.fusion.dev/components/speed-dial
+ *
+ * @slot - The action's name.
+ * @slot icon - The mark, which is what a dial is read by.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the action is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart icon - The mark's box.
+ * @csspart item - The control.
+ * @csspart label - The name beside it.
+ */
+export declare class HelixHeadlessSpeedDialItem extends HelixElement {
+    /**
+     * What this action stands for, carried in the event when it is chosen.
+     */
+    value: string;
+    /**
+     * Whether the action can be chosen.
+     */
+    disabled: boolean;
+    /**
+     * @internal Read by a parent to identify its children across the light DOM,
+     * which is cheaper than `instanceof` and is why this is public rather than
+     * protected. Not a consumer's to read or set.
+     */
+    readonly isSpeedDialItem = true;
+    /** Puts focus on the control inside, which is what a reader can reach. */
+    focus(): void;
+    /** `NavigableItem`, so the arrow keys are the shared controller's business. */
+    focusItem(): void;
+    /** Chooses the action, which is the same act as pressing it. */
+    select(): void;
+    /**
+     * Whether this is the row the set is on, which here is where focus is.
+     *
+     * Asked of the document rather than of the shadow root: focus lands on the
+     * control inside this element and the platform retargets it, so from outside
+     * `activeElement` already is this element. `Menu.Item` records the same, and
+     * the reading it replaced is one that does not survive happy-dom.
+     */
+    get selected(): boolean;
+    private choose;
+    private readonly handleClick;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-speed-dial-item': HelixHeadlessSpeedDialItem;
+    }
+}

package/dist/speed-dial/item/speed-dial-item.js

@@ -0,0 +1,113 @@
+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, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary One action in a speed dial: a mark, and a name beside it.
+ *
+ * @description
+ * **A command, which is why this is a `menuitem` and a megamenu's rows are not.**
+ * The distinction is what the thing does, not what it looks like: a megamenu
+ * holds destinations, so it is a disclosure of links, and this holds actions a
+ * screen can take, which is exactly what `role="menu"` was written for. The
+ * roles follow the contents.
+ *
+ * **The name is text, not a title.** A dial's actions are icons, and an icon
+ * with a `title` is an action whose name only exists for whoever hovers it long
+ * enough. The label is rendered beside the mark and is the accessible name by
+ * being there, so it is read, searched and translated like anything else.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases Speed dial action, FAB action, Quick action
+ * @documentation https://helix.fusion.dev/components/speed-dial
+ *
+ * @slot - The action's name.
+ * @slot icon - The mark, which is what a dial is read by.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the action is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart icon - The mark's box.
+ * @csspart item - The control.
+ * @csspart label - The name beside it.
+ */
+let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * What this action stands for, carried in the event when it is chosen.
+         */
+        this.value = '';
+        /**
+         * Whether the action can be chosen.
+         */
+        this.disabled = false;
+        /**
+         * @internal Read by a parent to identify its children across the light DOM,
+         * which is cheaper than `instanceof` and is why this is public rather than
+         * protected. Not a consumer's to read or set.
+         */
+        this.isSpeedDialItem = true;
+        this.handleClick = () => {
+            this.choose();
+        };
+    }
+    /** Puts focus on the control inside, which is what a reader can reach. */
+    focus() {
+        this.renderRoot?.querySelector('[part="item"]')?.focus();
+    }
+    /** `NavigableItem`, so the arrow keys are the shared controller's business. */
+    focusItem() {
+        this.focus();
+    }
+    /** Chooses the action, which is the same act as pressing it. */
+    select() {
+        this.choose();
+    }
+    /**
+     * Whether this is the row the set is on, which here is where focus is.
+     *
+     * Asked of the document rather than of the shadow root: focus lands on the
+     * control inside this element and the platform retargets it, so from outside
+     * `activeElement` already is this element. `Menu.Item` records the same, and
+     * the reading it replaced is one that does not survive happy-dom.
+     */
+    get selected() {
+        return this.ownerDocument.activeElement === this;
+    }
+    choose() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+    }
+    render() {
+        return html `<button
+      part="item"
+      role="menuitem"
+      type="button"
+      aria-disabled=${this.disabled ? 'true' : nothing}
+      ?disabled=${this.disabled}
+      @click=${this.handleClick}
+    >
+      <span part="icon"><slot name="icon"></slot></span>
+      <span part="label"><slot></slot></span>
+    </button>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSpeedDialItem.prototype, "disabled", void 0);
+HelixHeadlessSpeedDialItem = __decorate([
+    customElement('helix-headless-speed-dial-item')
+], HelixHeadlessSpeedDialItem);
+export { HelixHeadlessSpeedDialItem };

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -0,0 +1,122 @@
+import { HelixElement, KeyboardNavigationController, type Placement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
+/**
+ * @summary A button that fans out the few actions a screen is for.
+ *
+ * @description
+ * **A menu, and deliberately not a new one.** Its rows are commands, which is
+ * what `role="menu"` and `menuitem` exist for, so this takes them and takes the
+ * behavior with them: the arrow keys are `KeyboardNavigationController`, the
+ * panel is `PopoverController`, and open and closed is `MixinControllerOpen`.
+ * `Menu` is built from the same pieces. What is not shared is what actually
+ * differs: a dial has no submenus, no headers, no checkable rows and no long
+ * list to type ahead through, and shipping it as an appearance of `Menu` would
+ * have meant defining what a dial with a submenu in it does.
+ *
+ * **The trigger is a control the consumer slots**, and the floating action
+ * button is the usual one: `helix-icon-button` with `shape="circle"` and
+ * `raised`. There is no `helix-fab` here, and the reason is worth stating,
+ * because a component would have re-declared `emphasis`, `tone`, `label` and
+ * a size around a control that already has all four. A round raised button is a
+ * shape, and where it sits is `data-dock` in the base layer.
+ *
+ * **Nothing is reserved from the keyboard.** A menu that drills has to keep the
+ * horizontal pair for going in and coming back; a dial goes nowhere, so all four
+ * arrows move through the actions and a reader who guesses either axis is
+ * answered. That is the controller's own house position, and this is a component
+ * with no reason to argue with it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases FAB, Floating action button, Action button, Quick actions
+ * @documentation https://helix.fusion.dev/components/speed-dial
+ *
+ * @slot - The actions.
+ * @slot trigger - The control that opens it. Falls back to a button named by `label`.
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart actions - The region the actions are drawn in.
+ * @csspart icon - A glyph this component draws.
+ * @csspart trigger - The default trigger, where none was slotted.
+ */
+export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base {
+    /**
+     * Names the trigger and the set of actions it opens.
+     */
+    label: string;
+    /**
+     * Which way the actions fan out. They move if that side does not fit.
+     *
+     * Up by default, because the control this hangs off is usually docked to the
+     * bottom of the window and there is nothing below it to fan into.
+     */
+    placement: Placement;
+    /**
+     * Space between the trigger and the actions, in pixels.
+     */
+    offset: number;
+    protected readonly keys: KeyboardNavigationController;
+    private readonly panel;
+    /** Whatever the consumer slotted, or the button rendered in its place. */
+    private get trigger();
+    /** The actions, which are this element's own rows and nothing else slotted. */
+    private get items();
+    /** Shuts it and puts the reader back on the trigger. */
+    private close;
+    private readonly handleTriggerClick;
+    private readonly handleSelect;
+    private readonly handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Tells a slotted trigger what it is doing, since it cannot know.
+     *
+     * The fallback button is rendered by this element and says so in its own
+     * template. A trigger the consumer slotted is their markup, and the state it
+     * needs to announce is state only this element holds: without this, the
+     * arrangement this component recommends, an icon button slotted as the
+     * trigger, is a control that opens a menu and never says it has one. A
+     * consumer who has to mirror `open` back onto their own trigger is a consumer
+     * who will forget, and the failure is silent to everyone who can see the
+     * screen.
+     *
+     * **Every word of that survives; the mechanism does not.** This wrote
+     * `aria-expanded` and `aria-haspopup` onto the consumer's element with
+     * `setAttribute`, and measured against React 19.2.8 that is a hydration
+     * mismatch React reports and does not patch up. `tellDisclosure` carries the
+     * argument and the measurement: the state travels as a property now, into the
+     * trigger's own shadow root, where React neither looks nor compares.
+     *
+     * `aria-haspopup` goes with it rather than being written separately. It is a
+     * constant, so it could stay an attribute without changing on every open, and
+     * an attribute the consumer's server never sent is a mismatch whether or not
+     * it moves afterwards: that was measured too, both load orders. A trigger that
+     * says it is expanded is already saying it has something to expand.
+     */
+    private announce;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * The control that opens it, behind a seam the styled tier can move.
+     *
+     * **This is the case the tier rule blocks and a render method unblocks.** A
+     * bare `<button>` is what the headless tier can write: it must not reach for
+     * `helix-button`, which lives a tier above and would make `headless` depend
+     * on `web`. So the base draws the plain control and a tier that has buttons
+     * of its own overrides this to use one, which is the whole shape #76 exists
+     * for. Written inline the only way to change it was to reimplement the
+     * template, panel and all.
+     */
+    protected renderTrigger(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-speed-dial': HelixHeadlessSpeedDial;
+    }
+}
+export {};