@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/data-table/root/data-table-root.js

@@ -5,18 +5,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { countLabel, customElement, deepActiveElement, deepContains, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, rangeAdd, reportRuntime, requestChange, Typeahead, typesCharacter, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, fillTemplate, format, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, ordered, parse, rangeAdd, reportRuntime, requestChange, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { at, edgeOf } from '../../table/column/table-column.js';
+import { edgeOf } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
+import { anchorAt, inRowOrder, toggledOpen } from '../keys.js';
 import { grow } from '../tree.js';
-import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
 const CONTROL = [
     'a[href]',
     'button:not([disabled])',
@@ -79,7 +79,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.typeahead = new Typeahead();
         this.anchorKey = undefined;
         this.shiftPressed = false;
-        this.askedAt = -1;
         this.counts = {
             columns: undefined,
             rows: undefined,
@@ -427,7 +426,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return value;
     }
     get opened() {
-        return new Set(writtenList(this.expanded.replaceAll(',', ' ')));
+        return new Set(commaList(this.expanded));
     }
     flat() {
         if (this.childField) {
@@ -472,7 +471,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (!this.rowKey) {
             return String(index);
         }
-        const value = at(row, this.rowKey);
+        const value = valueAt(row, this.rowKey);
         return value === undefined || value === null ? String(index) : String(value);
     }
     currentRow(rows) {
@@ -648,18 +647,15 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             },
             event: (value) => new HelixSelectEvent({ value }),
             host: this,
-            next: [...keys].join(','),
+            next: inRowOrder(keys, this.everyKey).join(','),
         });
     }
     get chosen() {
-        return new Set(this.selected
-            .split(',')
-            .map((key) => key.trim())
-            .filter(Boolean));
+        return new Set(commaList(this.selected));
     }
     keyOf(row, place) {
         if (this.rowKey) {
-            const value = at(row, this.rowKey);
+            const value = valueAt(row, this.rowKey);
             return value === undefined || value === null ? String(place) : String(value);
         }
         if (this.selectable && !this.warnedAboutKey && typeof window !== 'undefined') {
@@ -684,11 +680,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     selectRange(to, from = to) {
         const keys = this.pageKeys;
-        let anchor = this.anchorKey === undefined ? -1 : keys.indexOf(this.anchorKey);
-        if (anchor < 0) {
-            anchor = from;
-            this.anchorKey = keys[from];
-        }
+        const { anchor, anchorKey } = anchorAt(keys, this.anchorKey, from);
+        this.anchorKey = anchorKey;
         const next = rangeAdd([...this.chosen], keys, anchor, to);
         if (next) {
             this.requestSelected(new Set(next));
@@ -712,13 +705,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (!this.windowed || !this.loadMore || this.loading) {
             return;
         }
-        const screen = this.partNamed('table')?.clientHeight ?? 0;
-        const count = this.rows.length;
-        if (screen > 0 &&
-            count > 0 &&
-            this.askedAt !== count &&
-            this.virtualize.remaining() <= screen) {
-            this.askedAt = count;
+        if (this.virtualize.endInSight(this.rows.length)) {
             this.askForMore();
         }
     }
@@ -734,19 +721,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.requestSelected(keys);
     }
     chooseAll() {
-        const every = this.everyKey;
-        const keys = this.chosen;
-        if (every.length > 0 && every.every((key) => keys.has(key))) {
-            for (const key of every) {
-                keys.delete(key);
-            }
-        }
-        else {
-            for (const key of every) {
-                keys.add(key);
-            }
-        }
-        this.requestSelected(keys);
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
     }
     moveColumn(field, by) {
         const drawn = this.shownColumns.filter((column) => column.field !== '');
@@ -776,7 +751,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             return /[",\r\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
         };
         const head = columns.map((column) => quote(column.textContent?.trim() || column.field));
-        const body = rows.map((row) => columns.map((column) => quote(at(row, column.field))));
+        const body = rows.map((row) => columns.map((column) => quote(valueAt(row, column.field))));
         return [head, ...body].map((line) => line.join(',')).join('\r\n');
     }
     requestFilter(next) {
@@ -951,18 +926,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     ><svg part="toggle-mark" ?data-mirror=${!open} fill="currentColor" viewBox=${glyph.viewBox}>${unsafeSVG(glyph.content)}</svg></span>`;
     }
     toggleOpen(row, open) {
-        const key = this.rowKeyOf(row, -1);
-        const keys = this.opened;
-        if (keys.has(key) === open) {
+        const next = toggledOpen(this.expanded, this.rowKeyOf(row, -1), open, this.everyKey);
+        if (next === undefined) {
             return false;
         }
-        if (open) {
-            keys.add(key);
-        }
-        else {
-            keys.delete(key);
-        }
-        this.expanded = [...keys].join(',');
+        this.expanded = next;
         this.dispatchEvent(new HelixExpandEvent({ value: this.expanded }));
         return true;
     }
@@ -1300,14 +1268,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             return false;
         }
         const placed = this.tree().placed.get(row);
-        const forward = inlineStep(this, event.key) > 0;
-        if (placed?.branch && placed.open !== forward) {
+        const arrow = treeArrow({ branch: placed?.branch ?? false, open: placed?.open ?? false }, inlineStep(this, event.key) > 0 ? 1 : -1);
+        if (arrow === 'open' || arrow === 'close') {
             event.preventDefault();
-            this.toggleOpen(row, forward);
+            this.toggleOpen(row, arrow === 'open');
             return true;
         }
         const parent = placed?.parent ? this.drawnPage.indexOf(placed.parent) : -1;
-        if (!forward && parent >= 0) {
+        if (arrow === 'parent' && parent >= 0) {
             event.preventDefault();
             this.moveTo(parent, place.column);
             return true;

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

@@ -1,4 +1,19 @@
-import { type Axis, type DataRow } from './root/order.js';
+/**
+ * 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. */

package/dist/data-table/tree.js

@@ -1,7 +1,6 @@
-import { at } from '../table/column/table-column.js';
-import { filter, parse, sort } from './root/order.js';
+import { filter, parse, sort, valueAt } from '@fusion.dev/helix-core';
 export const childrenOf = (row, field) => {
-    const value = at(row, field);
+    const value = valueAt(row, field);
     return Array.isArray(value) ? value : [];
 };
 export const grow = (rows, axes, { field, isOpen, query, spec, }) => {

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/dialog/description.js

@@ -1,5 +1,19 @@
 const CONTROL = 'a[href], audio[controls], button, details, form, iframe, input, select, textarea, video[controls], [contenteditable], [tabindex]';
-const isControl = (element) => element.localName.includes('-') || element.matches(CONTROL);
+const isControl = (element) => {
+    if (element.matches(CONTROL)) {
+        return true;
+    }
+    if (!element.localName.includes('-')) {
+        return false;
+    }
+    const definition = customElements.get(element.localName);
+    const root = element.shadowRoot;
+    return (definition === undefined ||
+        !(element instanceof definition) ||
+        definition.formAssociated === true ||
+        root?.delegatesFocus === true ||
+        root?.querySelector(CONTROL) != null);
+};
 export const wordsIn = (slot) => {
     const words = [];
     for (const one of slot?.assignedElements({ flatten: true }) ?? []) {

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/drawer/reveal.d.ts

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

package/dist/drawer/reveal.js

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