@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -1,4 +1,4 @@
-import { 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;
 /**
@@ -19,6 +19,20 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * keeps your state in step, so the dialog never closes while your state still
  * says it is open, which would leave it impossible to reopen.
  *
+ * The dialog'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.
+ * 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
@@ -26,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.
@@ -33,13 +48,32 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @event {Event} close - Sent from the host after the dialog closes, because the native `close` event does not leave the shadow root.
  * @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 - Sent when the dialog opens or closes, with `newState` and `oldState`.
+ * @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.
      *
@@ -54,9 +88,24 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      */
     closedBy?: 'any' | 'closerequest' | 'none';
     /**
-     * Accessible name for the dialog.
+     * 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;
     /**
      * Stops Escape and a press on the backdrop from closing the dialog.
@@ -120,20 +169,55 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * saying otherwise would be a lie the next `showModal()` would trip over.
      */
     private readonly handleClose;
+    /**
+     * A `<form method="dialog">` slotted into the dialog, closed the way the
+     * platform closes its own.
+     *
+     * **The platform cannot find this dialog from the form.** A submit with the
+     * `dialog` method closes the nearest `<dialog>` ancestor, and a slotted form's
+     * ancestors are the light DOM, where there is none. So the submit is read
+     * here, and the submitter's `value` is the `returnValue`, as it would be.
+     */
+    private readonly handleSubmit;
+    /** Whether the `header` slot's heading is what currently names the dialog. */
+    private namedByHeader;
+    /**
+     * Names the dialog by its heading, where nothing else names it.
+     *
+     * An element reference, because the heading is in the light DOM and the
+     * `<dialog>` is in this shadow root, which an IDREF cannot cross. `label` and
+     * an `aria-labelledby` on the host come first, so this steps aside for
+     * 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;
     protected updated(changed: PropertyValues): void;
     /** Opens once anything slotted has had its first render. See `updated`. */
     private openWhenSlotted;
     /**
      * A press on the backdrop, which lands on the dialog element itself.
      *
-     * **The target alone is not enough here, where it is for `Drawer`.** A modal
-     * `<dialog>` attributes backdrop clicks to itself, which is the usual trick,
-     * and this panel also carries `--dialog-padding` of padding: a press in that
-     * padding has the same target as a press on the backdrop, so the trick alone
-     * closes a dialog when a reader clicks just inside its own edge. The drawer
-     * escapes that because its panel is flush against the window and its content
-     * fills it. So the point is compared against the panel's box.
+     * **The target alone is not enough.** A modal `<dialog>` attributes backdrop
+     * clicks to itself, which is the usual trick, and this panel also carries
+     * `--dialog-padding` of padding: a press in that padding has the same target
+     * as a press on the backdrop, so the trick alone closes a dialog when a reader
+     * clicks just inside its own edge. So the point is compared against the
+     * panel's box. `Drawer` does the same.
      */
     private readonly handleBackdrop;
     /**
@@ -175,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,26 @@ 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 { CommandController, customElement, HelixElement, hostAria, MixinControllerOpen, } 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: {
                 '--close': () => this.close(),
@@ -33,6 +46,21 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             }
             this.relayNativeEvent(event);
         };
+        this.handleSubmit = (event) => {
+            const form = event.target;
+            if (!(form instanceof HTMLFormElement) || form.closest('dialog')) {
+                return;
+            }
+            const submitter = event.submitter;
+            const method = submitter?.hasAttribute('formmethod') ? submitter.formMethod : form.method;
+            if (method !== 'dialog') {
+                return;
+            }
+            event.preventDefault();
+            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) {
@@ -77,12 +105,41 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             this.returnValue = previous;
         }
     }
+    nameByHeader() {
+        const slot = this.renderRoot.querySelector('slot[name="header"]');
+        const heading = this.label || this.hasAttribute('aria-labelledby')
+            ? []
+            : headingsIn(slot?.assignedElements({ flatten: true }) ?? []);
+        this.namedByHeader = reflectElements(this.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);
         hostAria(this.internals, { label: this.label });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('submit', this.handleSubmit);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('submit', this.handleSubmit);
+        unlockScroll(this);
+    }
     updated(changed) {
         super.updated(changed);
+        this.nameByHeader();
+        this.describeByBody();
+        if (this.open) {
+            lockScroll(this);
+        }
+        else {
+            unlockScroll(this);
+        }
         const dialog = this.dialog;
         if (!dialog) {
             return;
@@ -122,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}
@@ -132,15 +195,31 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
       @close=${this.handleClose}
     >
       <slot name="icon"></slot>
-      <slot name="header"></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);

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

@@ -1,6 +1,15 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
+/** One slice: its share of the whole, where it starts, and the row it was read from. */
+export interface DonutShare {
+    /** The slice's share of the whole, from 0 to 1. */
+    fraction: number;
+    /** The table row the slice was read from, counting from zero. */
+    row: number;
+    /** Where the slice starts, as a share of the whole. */
+    start: number;
+}
 declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
 /**
  * @summary A chart that shows parts of a whole as a ring, read from a table.
@@ -15,20 +24,32 @@ 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 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
  * @category charts
  * @aliases Pie Chart, Ring Chart, Share Chart
  * @documentation https://fusion.dev/helix/components/donut-chart
  *
- * @slot - Content in the middle of the ring, usually a total.
+ * @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.
+ * @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.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -38,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.
@@ -131,18 +153,47 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
     private get thickness();
     /** The ring's radius, which follows its thickness so the outer edge holds. */
     private get radius();
+    /**
+     * Each slice's share of the circle, where it starts, and the row it was read
+     * from.
+     *
+     * The row because a slice is not its row once a row is left out: a value
+     * that does not parse has no slice, and the tooltip counting slices against
+     * 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
+     * slice's share of the whole.
+     *
+     * The shares, because they are what the ring shows and the table does not:
+     * the table holds the amounts, and the percentages are this chart's
+     * arithmetic. In the ring's order, which is the table's and the legend's.
+     */
+    protected renderSummary(shares: DonutShare[]): TemplateResult;
     /**
      * 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.
+     * The drawing is `aria-hidden`, because the table it was read from is the
+     * readable version and a screen reader hearing both hears the same numbers
+     * twice. The middle is not: a total slotted there is usually a number the
+     * table does not hold.
      */
-    protected renderPlot(shares: {
-        fraction: number;
-        start: number;
-    }[]): TemplateResult;
+    protected renderPlot(shares: DonutShare[]): TemplateResult;
     /**
      * The view box, cropped to what is actually drawn.
      *
@@ -155,10 +206,7 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      */
     private get frame();
     /** One slice, as a dash the length of its share. */
-    protected renderSegment(share: {
-        fraction: number;
-        start: number;
-    }, index: number): TemplateResult;
+    protected renderSegment(share: DonutShare, index: number): TemplateResult;
     /**
      * The same slice again, as a shape with an inside.
      *
@@ -189,10 +237,7 @@ export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_bas
      * `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.
      */
-    protected renderEdge(share: {
-        fraction: number;
-        start: number;
-    }, index: number): TemplateResult;
+    protected renderEdge(share: DonutShare, index: number): TemplateResult;
     /**
      * What a pointer resting on a slice shows.
      *

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

@@ -8,6 +8,18 @@ import { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource,
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
+const PERCENTS = new Map();
+const percentIn = (locale) => {
+    let found = PERCENTS.get(locale);
+    if (!found) {
+        found = new Intl.NumberFormat(locale || undefined, {
+            maximumFractionDigits: 0,
+            style: 'percent',
+        });
+        PERCENTS.set(locale, found);
+    }
+    return found;
+};
 const CENTER = PLOT_WIDTH / 2;
 const EDGE = 40;
 const GAP = 9999;
@@ -36,34 +48,53 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     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 points = series[0]?.points ?? [];
+        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 [];
         }
         let start = 0;
-        return values.map((value) => {
+        return values.map((value, index) => {
             const fraction = value / total;
             const at = start;
             start += fraction;
-            return { fraction, start: at };
+            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)}
-`;
+        return html `${this.renderPlot(shares)}${shares.length === 0 ? nothing : this.renderSummary(shares)}`;
+    }
+    renderSummary(shares) {
+        const rows = this.sourceRows;
+        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 id="helix-chart-summary" part="summary">${named}${parts.join(', ')}.</p>`;
     }
     renderPlot(shares) {
         return html `<div
-      aria-hidden="true"
+      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"
         data-mirror=${this.sweep === 'half' ? '' : nothing}
         viewBox=${this.frame}
         xmlns="http://www.w3.org/2000/svg"
@@ -79,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>`;
     }
@@ -100,7 +131,11 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
       data-series=${seriesIndex(index)}
       fill="none"
       style="--chart-series: var(--chart-series-${seriesIndex(index)})"
-      @pointerenter=${() => this.pointer.set(index)}
+      @pointerenter=${(event) => {
+            if (this.pointer.accepts(event)) {
+                this.pointer.set(index);
+            }
+        }}
       part="segment${active ? ' segment-active' : ''}"
       r=${this.radius}
       stroke-dasharray="${length} ${GAP}"
@@ -143,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;
@@ -153,7 +188,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, at, this.tag('tooltip'), {
+        return drawTooltip(this.sourceRows, share.row, this.tag('tooltip'), {
             fixed: this.sweep !== 'half',
             placement: Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))
                 ? across
@@ -164,7 +199,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
                     : 'top',
             x: `${x}%`,
             y: `${y}%`,
-        }, () => seriesIndex(at));
+        }, () => seriesIndex(at), this.pointer);
     }
 };
 __decorate([