@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/data-table/tree.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Rows that hold rows, arranged for a tree grid: filtered, sorted within each
+ * parent, and laid out flat in reading order with the open rows' children under
+ * them.
+ *
+ * Pure and beside the family's `index.ts`, because which rows show and at what
+ * depth is a fact about the data, and a spec can hold it without a page.
+ *
+ * **Filtered by descent.** A row stays when it matches the query or any row
+ * under it does, so a match deep in the tree is shown with the rows that lead to
+ * it, and while a query is on every row with a match under it is open.
+ *
+ * **Sorted among siblings.** A sort orders each parent's rows and leaves every
+ * row under its parent, which is the only order a tree can be read in.
+ */
+import { type Axis, type DataRow } from '@fusion.dev/helix-core';
+/** Where a row sits in the tree. */
+export interface Placement {
+    /** Whether it has children to show. */
+    branch: boolean;
+    /** How deep the row is, from 1 for a row with no parent. */
+    level: number;
+    /** Whether its children are shown. */
+    open: boolean;
+    /** The row it sits under, if any. */
+    parent: DataRow | undefined;
+    /** Its place among its siblings, from 1. */
+    position: number;
+    /** How many siblings it has, itself included. */
+    siblings: number;
+}
+/** The rows a tree shows, and the counts around them. */
+export interface Grown {
+    /** Every row in the tree, shown or not, for a selection of every row. */
+    every: DataRow[];
+    /** Where each shown row sits. */
+    placed: Map<DataRow, Placement>;
+    /** The rows shown, in reading order. */
+    rows: DataRow[];
+    /** How many rows the tree holds before filtering. */
+    total: number;
+}
+/** The rows under `row`, read from `field`: an array, or none. */
+export declare const childrenOf: (row: DataRow, field: string) => DataRow[];
+/**
+ * The tree laid out flat: each shown row followed by its children where it is
+ * open, which `isOpen` says. While `query` is set, a row with a match under it
+ * is open whatever `isOpen` says.
+ */
+export declare const grow: (rows: readonly DataRow[], axes: readonly Axis[], { field, isOpen, query, spec, }: {
+    field: string;
+    isOpen: (row: DataRow) => boolean;
+    query: string;
+    spec: string;
+}) => Grown;

package/dist/data-table/tree.js

@@ -0,0 +1,54 @@
+import { filter, parse, sort, valueAt } from '@fusion.dev/helix-core';
+export const childrenOf = (row, field) => {
+    const value = valueAt(row, field);
+    return Array.isArray(value) ? value : [];
+};
+export const grow = (rows, axes, { field, isOpen, query, spec, }) => {
+    const searching = query.trim() !== '';
+    const order = parse(spec);
+    const every = [];
+    const kept = new Set();
+    const seen = new Set();
+    const keep = (row) => {
+        if (seen.has(row)) {
+            return kept.has(row);
+        }
+        seen.add(row);
+        every.push(row);
+        let below = false;
+        for (const child of childrenOf(row, field)) {
+            below = keep(child) || below;
+        }
+        const stays = below || !searching || filter([row], query, axes).length > 0;
+        if (stays) {
+            kept.add(row);
+        }
+        return stays;
+    };
+    for (const row of rows) {
+        keep(row);
+    }
+    const placed = new Map();
+    const shown = [];
+    const lay = (level, depth, parent) => {
+        const siblings = sort(level.filter((row) => kept.has(row) && !placed.has(row)), order, axes);
+        for (const [index, row] of siblings.entries()) {
+            const children = childrenOf(row, field).filter((child) => kept.has(child));
+            const open = children.length > 0 && (searching || isOpen(row));
+            placed.set(row, {
+                branch: children.length > 0,
+                level: depth,
+                open,
+                parent,
+                position: index + 1,
+                siblings: siblings.length,
+            });
+            shown.push(row);
+            if (open) {
+                lay(children, depth + 1, row);
+            }
+        }
+    };
+    lay(rows, 1, undefined);
+    return { every, placed, rows: shown, total: every.length };
+};

package/dist/date-input/root/date-input-root.d.ts

@@ -36,6 +36,8 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
  * @slot next-icon - The icon on the calendar's next month control.
+ * @slot panel-footer - Content in the panel under the calendar, such as a note or an action.
+ * @slot panel-header - Content in the panel above the calendar, such as a heading or a shortcut.
  * @slot previous-icon - The icon on the calendar's previous month control.
  * @slot trigger - The icon on the button that opens the calendar.
  *
@@ -355,7 +357,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** Each date, where `mode` holds several, sent one entry each. */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */
-    protected validate(): string;
+    protected validate(): string | readonly [keyof ValidityStateFlags, string];
     /**
      * The message shown when `disable-dates` or `disable-days` bars a date.
      */

package/dist/date-input/root/date-input-root.js

@@ -176,14 +176,20 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
                     : 'Enter dates as YYYY-MM-DD, separated by commas.'));
         }
         if (this.min !== '' && held.some((one) => one < this.min)) {
-            return fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
-                min: this.written(this.min),
-            });
+            return [
+                'rangeUnderflow',
+                fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
+                    min: this.written(this.min),
+                }),
+            ];
         }
         if (this.max !== '' && held.some((one) => one > this.max)) {
-            return fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
-                max: this.written(this.max),
-            });
+            return [
+                'rangeOverflow',
+                fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
+                    max: this.written(this.max),
+                }),
+            ];
         }
         const why = held.map((one) => {
             const date = asDate(one);
@@ -193,7 +199,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             return this.unavailableMessage || 'Choose a date that is available.';
         }
         if (why.includes('step')) {
-            return this.stepMismatchMessage || 'Choose one of the dates the calendar offers.';
+            return [
+                'stepMismatch',
+                this.stepMismatchMessage || 'Choose one of the dates the calendar offers.',
+            ];
         }
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage || 'A range is two dates.';
@@ -327,7 +336,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         popover="manual"
         ?hidden=${!this.open}
       >
+        <slot name="panel-header"></slot>
         ${this.renderPicker()}
+        <slot name="panel-footer"></slot>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }

package/dist/date-picker/root/date-picker-root.js

@@ -21,6 +21,7 @@ const KEYS = new Set([
     'PageUp',
     ' ',
 ]);
+const firstOf = (year, month) => addMonths(asDate('2000-01-01'), (year - 2000) * 12 + month);
 let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -139,13 +140,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     get shown() {
         const explicit = /^(\d{4})-(\d{2})$/.exec(this.monthState ?? this.defaultMonth);
         if (explicit) {
-            return new Date(Date.UTC(Number(explicit[1]), Number(explicit[2]) - 1, 1));
+            return firstOf(Number(explicit[1]), Number(explicit[2]) - 1);
         }
         return this.derivedMonth;
     }
     get derivedMonth() {
         const from = asDate(this.selected[0] ?? '') ?? new Date();
-        return new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), 1));
+        return firstOf(from.getUTCFullYear(), from.getUTCMonth());
     }
     get anchor() {
         const shown = this.shown;
@@ -268,11 +269,16 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 return;
             }
             this.pageYear = at;
-            this.periodFocus = at === this.shown.getUTCFullYear() ? this.shown.getUTCMonth() : 0;
+            const month = this.shown.getUTCMonth();
+            const open = Array.from({ length: 12 }, (_, index) => index).filter((index) => !this.monthOut(firstOf(at, index)));
+            this.periodFocus = open.includes(month)
+                ? month
+                : ([...open].sort((left, right) => Math.abs(left - month) - Math.abs(right - month))[0] ??
+                    month);
             this.zoom('month');
             return;
         }
-        const first = new Date(Date.UTC(this.periodYear, at, 1));
+        const first = firstOf(this.periodYear, at);
         if (this.monthOut(first)) {
             return;
         }
@@ -558,8 +564,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         const years = this.view === 'year';
         const page = years ? yearPageOf(this.periodYear) : this.periodYear;
         const heading = years
-            ? `${yearName.format(new Date(Date.UTC(page, 0, 1)))} – ${yearName.format(new Date(Date.UTC(page + YEARS_SHOWN - 1, 0, 1)))}`
-            : yearName.format(new Date(Date.UTC(page, 0, 1)));
+            ? `${yearName.format(firstOf(page, 0))} – ${yearName.format(firstOf(page + YEARS_SHOWN - 1, 0))}`
+            : yearName.format(firstOf(page, 0));
         const stop = this.periodStop;
         const cells = periodCells({
             max: this.max,

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One label and its value.
  *
@@ -12,11 +12,17 @@ import { type TemplateResult } from 'lit';
  * such as a tag, an avatar, or a link. The label is almost always text, so it
  * is also a property.
  *
+ * **For a label with several values, write each value as a `<dd>`**, such as
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
  *
- * @slot - The value.
+ * @slot - The value, or several `<dd>` elements for several values.
  * @slot label - The label, when it is more than text. Falls back to `label`.
  *
  * @csspart label - The `<dt>`, holding the label.
@@ -31,7 +37,16 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      * that varies and is often more than text.
      */
     label: string;
+    /**
+     * 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.
+     */
+    private get several();
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /** A value arriving or leaving can change whether the item wraps them. */
+    private readonly handleSlotChange;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

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

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

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

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

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

package/dist/dialog/description.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.
      *