@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-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 { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, fillTemplate, format, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, inRowOrder, isRtl, MixinCollection, markRegion, onAndroid, ordered, parse, rangeAdd, reportRuntime, requestChange, selectsAll, 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';
@@ -15,7 +15,7 @@ import { html } from 'lit/static-html.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 { toggledOpen } from '../keys.js';
 import { grow } from '../tree.js';
 const CONTROL = [
     'a[href]',
@@ -167,7 +167,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             const last = this.drawnPage.length - 1 + (this.moreDrawn ? 1 : 0);
             const edge = this.width - 1;
             const control = event.ctrlKey || event.metaKey;
-            if (control && !event.shiftKey && event.key.toLowerCase() === 'a' && this.selectable) {
+            if (!event.shiftKey && selectsAll(event) && this.selectable) {
                 event.preventDefault();
                 this.requestSelected(new Set([...this.chosen, ...this.everyKey]));
                 return;
@@ -887,6 +887,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const stop = this.currentRow(this.drawnPage) === -1 ? this.currentColumn : -1;
         const offset = this.selectable ? 1 : 0;
         const shown = this.shownColumns;
+        const android = onAndroid();
         for (const column of this.tableColumns) {
             column.movable = this.reorderable && column.field !== '';
             column.gridCell = true;
@@ -897,6 +898,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                         ? 'ascending'
                         : 'descending'
                     : undefined;
+            column.sortWords =
+                android && column.sorted
+                    ? fillTemplate(this.sortedLabel, {
+                        column: column.textContent?.trim() || column.field,
+                        order: column.sorted === 'ascending' ? this.ascendingLabel : this.descendingLabel,
+                    })
+                    : '';
         }
     }
     renderCell(column, row, picked, place, stop, header) {
@@ -1013,15 +1021,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
     }
     renderSelectAll(stop) {
-        const every = this.everyKey;
-        const keys = this.chosen;
-        const count = every.filter((key) => keys.has(key)).length;
+        const { checked, indeterminate } = everyState(this.chosen, this.everyKey);
         return html `<span
       part="select-all"
       role="columnheader"
       tabindex=${stop ? '0' : '-1'}
       data-column="0"
-    >${this.renderCheckbox(this.selectAllLabel, every.length > 0 && count === every.length, count > 0 && count < every.length, this.toggleAll)}</span>`;
+    >${this.renderCheckbox(this.selectAllLabel, checked, indeterminate, this.toggleAll)}</span>`;
     }
     renderMore(page) {
         if (!this.moreDrawn) {

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

@@ -71,6 +71,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-day-outside - A day from a neighboring month. Applied with `picker-day`.
  * @csspart picker-day-selected - The chosen day, or either end of a chosen range. Applied with `picker-day`.
  * @csspart picker-day-today - Today. Applied with `picker-day`.
+ * @csspart picker-feedback - The calendar's own message, under it, while the calendar's `feedback` is set.
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.
  * @csspart picker-heading - The month and year being shown.
@@ -173,9 +174,15 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     isDateUnavailable?: ((date: string) => boolean) | undefined;
     /**
-     * The language tag for the names of months and days in the calendar.
+     * The language tag for the field's order and words, and for the names of
+     * months and days in the calendar.
+     *
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
+    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    private get language();
     /**
      * The latest date that can be chosen, as `YYYY-MM-DD`.
      */

package/dist/date-input/root/date-input-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, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -100,6 +100,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             this.requestUpdate();
         };
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     placed(room) {
         const all = Math.max(1, Math.floor(this.months) || 1);
         const surface = this.partNamed('surface');
@@ -132,7 +135,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         return 'date';
     }
     get segmentLocale() {
-        return this.locale;
+        return this.language;
     }
     written(date) {
         if (this.dateStyle === 'iso' || !isDateValue(date)) {
@@ -141,7 +144,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         const at = new Date(`${date}T00:00:00Z`);
         return Number.isNaN(at.getTime())
             ? date
-            : new Intl.DateTimeFormat(this.locale || undefined, {
+            : new Intl.DateTimeFormat(this.language || undefined, {
                 dateStyle: this.dateStyle,
                 timeZone: 'UTC',
             }).format(at);
@@ -215,7 +218,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       exportparts="cell: picker-cell, cell-range-end: picker-cell-range-end,
         cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
         day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
-        day-selected: picker-day-selected, day-today: picker-day-today, grid: picker-grid,
+        day-selected: picker-day-selected, day-today: picker-day-today, feedback: picker-feedback, grid: picker-grid,
         header: picker-header, heading: picker-heading, heading-button: picker-heading-button,
         month: picker-month, months: picker-months, next: picker-next,
         next-mark: picker-next-mark, period: picker-period, period-current: picker-period-current,
@@ -231,7 +234,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       disable-days=${this.disableDays || nothing}
       first-day-of-week=${this.firstDayOfWeek ?? nothing}
       label=${this.calendarLabel}
-      locale=${this.locale || nothing}
+      locale=${this.language || nothing}
       max=${this.max || nothing}
       max-view=${this.maxView ?? nothing}
       min=${this.min || nothing}

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

@@ -1,6 +1,6 @@
 import { type CalendarView, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
+declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A month calendar for choosing one or more dates.
  *
@@ -60,6 +60,7 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @csspart day-outside - A day from a neighboring month, filling the grid out, beside `day`.
  * @csspart day-selected - The chosen day, or either end of a chosen range, beside `day`.
  * @csspart day-today - Today, beside `day`.
+ * @csspart feedback - The message under the calendar, while `feedback` is set.
  * @csspart grid - The grid of days.
  * @csspart header - The month name and its controls.
  * @csspart heading - The month and year being shown.
@@ -80,6 +81,8 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @csspart weekday - A column header naming a day of the week.
  *
  * @cssproperty --date-picker-column-count - How many month columns are drawn, capped at two. `--date-picker-columns` overrides it.
+ *
+ * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_base {
     /**
@@ -123,10 +126,6 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * (Firefox does not), and is Sunday otherwise.
      */
     firstDayOfWeek?: number;
-    /**
-     * Whether the current selection fails validation.
-     */
-    invalid: boolean;
     /**
      * A rule for which dates cannot be chosen: a function given the date as
      * `YYYY-MM-DD` that returns `true` to bar it.
@@ -142,11 +141,14 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      */
     label: string;
     /**
-     * Locale for month and day names.
+     * Locale for month and day names, and the day a week starts on.
      *
-     * Absent uses the runtime's own.
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
+    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    private get language();
     /**
      * Latest selectable date, as `YYYY-MM-DD`.
      */
@@ -267,8 +269,11 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      *
      * Each candidate is tested in turn rather than the first one winning
      * outright. Where the last date focused is in some other month, the selected
-     * date still holds the stop, and only with neither in view does it fall to
-     * the first of the month.
+     * date still holds the stop, then today, as the APG date picker and React
+     * Aria's calendar put it, and only with none of them in view does it fall
+     * to the first of the month. Measured before today was a candidate: a
+     * calendar with no value opened on October 5 with its stop on "Thursday,
+     * October 1".
      */
     private get anchor();
     /** Six weeks of dates, so a grid does not change height between months. */

package/dist/date-picker/root/date-picker-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 { addDays, addMonths, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, commaList as list, localToday, MixinControllerValue, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, commaList as list, localeOf, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -22,13 +22,12 @@ const KEYS = new Set([
     ' ',
 ]);
 const firstOf = (year, month) => addMonths(asDate('2000-01-01'), (year - 2000) * 12 + month);
-let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControllerValue(HelixFormElement) {
+let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.defaultMonth = '';
         this.disableDates = '';
         this.disableDays = '';
-        this.invalid = false;
         this.label = 'Date Picker';
         this.locale = '';
         this.max = '';
@@ -105,6 +104,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.view = 'day';
         this.yearViewLabel = '{heading}. Choose a year';
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     get month() {
         return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
     }
@@ -120,7 +122,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
             return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
         }
-        return this.locale === '' ? 0 : weekStartOf(this.locale);
+        const language = this.language;
+        return language === '' ? 0 : weekStartOf(language);
     }
     get range() {
         const dates = this.selected;
@@ -145,12 +148,16 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return this.derivedMonth;
     }
     get derivedMonth() {
-        const from = asDate(this.selected[0] ?? '') ?? new Date();
+        const from = asDate(this.selected[0] ?? '') ?? asDate(localToday()) ?? new Date();
         return firstOf(from.getUTCFullYear(), from.getUTCMonth());
     }
     get anchor() {
         const shown = this.shown;
-        for (const candidate of [asDate(this.focused), asDate(this.selected[0] ?? '')]) {
+        for (const candidate of [
+            asDate(this.focused),
+            asDate(this.selected[0] ?? ''),
+            asDate(localToday()),
+        ]) {
             if (candidate && sameMonth(candidate, shown)) {
                 return candidate;
             }
@@ -414,7 +421,6 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             role: 'group',
         });
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
-        this.internals.ariaInvalid = this.invalid ? 'true' : null;
         this.report();
     }
     updated(changed) {
@@ -432,14 +438,15 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        if (this.cachedFormats?.locale === this.locale) {
+        const language = this.language;
+        if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
-        const locale = this.locale || undefined;
+        const locale = language || undefined;
         const built = {
             full: new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' }),
             heading: new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC', year: 'numeric' }),
-            locale: this.locale,
+            locale: language,
             long: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }),
             monthName: new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' }),
             weekday: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', weekday: 'short' }),
@@ -619,14 +626,15 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     render() {
         if (this.view !== 'day') {
             return html `<div part="months" style="--date-picker-column-count: 1">
-        ${this.renderPeriods()}
-      </div>`;
+          ${this.renderPeriods()}
+        </div>
+        ${this.renderPickerFeedback()}`;
         }
         const shown = this.shown;
         const count = this.monthCount;
         return html `<div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
       ${Array.from({ length: count }, (_, index) => this.renderMonth(addMonths(shown, index), index))}
-    </div>`;
+    </div>${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         return asDate(this.value);
@@ -659,9 +667,6 @@ __decorate([
 __decorate([
     property({ attribute: 'first-day-of-week', type: Number })
 ], HelixHeadlessDatePicker.prototype, "firstDayOfWeek", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessDatePicker.prototype, "invalid", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDatePicker.prototype, "isDateUnavailable", void 0);

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

@@ -16,13 +16,21 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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.
+ * so set `several` as well, and the served item leaves them unwrapped too.
+ * Without it, the served item wraps them in its own `<dd>` until it runs.
+ *
+ * **Controls that act on the value**, such as a copy button, go in the
+ * `actions` slot, drawn after the value inside its `<dd>`, as Radix Themes'
+ * data list puts an icon button beside a value. A screen reader hears them as
+ * part of the description they act on. With several values, put each control
+ * inside the `<dd>` it acts on.
  *
  * @since 0.1.0
  * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
  *
  * @slot - The value, or several `<dd>` elements for several values.
+ * @slot actions - Controls that act on the value, such as a copy button, after it inside its `<dd>`.
  * @slot label - The label, when it is more than text. Falls back to `label`.
  *
  * @csspart label - The `<dt>`, holding the label.
@@ -37,12 +45,18 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      * that varies and is often more than text.
      */
     label: string;
+    /**
+     * Says the values are several `<dd>` elements of your own, so the item
+     * draws no `<dd>` of its own around them, on the server too. Without it the
+     * item finds them once it runs, and the served markup wraps them until then.
+     */
+    several: boolean;
     /**
      * 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.
+     * then does not wrap: `several`, or `<dd>` children found once it runs.
+     * Unknown on a server and while hydrating, where `several` decides.
      */
-    private get several();
+    private get ownValues();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /** A value arriving or leaving can change whether the item wraps them. */

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

@@ -11,12 +11,13 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
     constructor() {
         super(...arguments);
         this.label = '';
+        this.several = false;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
     }
-    get several() {
-        return this.knownChildren.some((child) => child.localName === 'dd');
+    get ownValues() {
+        return this.several || this.knownChildren.some((child) => child.localName === 'dd');
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -24,15 +25,18 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
     }
     render() {
         const label = html `<dt part="label"><slot name="label">${this.label}</slot></dt>`;
-        return this.several
+        return this.ownValues
             ? html `${label}<slot @slotchange=${this.handleSlotChange}></slot>`
             : html `${label}
-          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot></dd>`;
+          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot><slot name="actions"></slot></dd>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessDescriptionListItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDescriptionListItem.prototype, "several", void 0);
 HelixHeadlessDescriptionListItem = __decorate([
     customElement('helix-headless-description-list-item')
 ], HelixHeadlessDescriptionListItem);

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

@@ -8,6 +8,7 @@ import { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource,
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
+import { sliceLabelAt } from '../slice-label.js';
 const PERCENTS = new Map();
 const percentIn = (locale) => {
     let found = PERCENTS.get(locale);
@@ -124,16 +125,22 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     renderSliceLabels(shares) {
         const half = this.sweep === 'half';
-        const top = half ? CENTER - EDGE : 0;
-        const tall = half ? EDGE + this.thickness / 2 : PLOT_HEIGHT;
+        const ring = {
+            center: CENTER,
+            origin: this.origin,
+            radius: this.radius,
+            span: this.span,
+            tall: half ? EDGE + this.thickness / 2 : PLOT_HEIGHT,
+            top: half ? CENTER - EDGE : 0,
+            width: PLOT_WIDTH,
+        };
         const format = percentIn(this.locale);
         return html `${shares.map((share, index) => {
-            if (share.fraction < 0.05) {
+            const place = sliceLabelAt(share, ring);
+            if (!place) {
                 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;
+            const { x, y } = place;
             return html `<span
         aria-hidden="true"
         data-series=${seriesIndex(index)}

package/dist/donut-chart/slice-label.d.ts

@@ -0,0 +1,35 @@
+/** A slice's place on the ring, as shares of the whole from 0 to 1. */
+export interface SliceShare {
+    /** How much of the ring the slice takes. */
+    fraction: number;
+    /** Where the slice starts, as the share of the ring before it. */
+    start: number;
+}
+/** The ring a slice label is placed on, in the drawing's own units. */
+export interface RingGeometry {
+    /** The center, on both axes. */
+    center: number;
+    /** Where the ring's turn starts, in radians: a quarter turn back is twelve o'clock. */
+    origin: number;
+    /** The radius of the band's middle, where a label sits. */
+    radius: number;
+    /** How much of a turn the ring takes: 1 for a ring, a half for an arc. */
+    span: number;
+    /** How tall the box the labels are placed in is. */
+    tall: number;
+    /** Where the top of that box is. */
+    top: number;
+    /** How wide the drawing is. */
+    width: number;
+}
+/** The smallest share that takes a label: a twentieth of the ring. */
+export declare const SMALLEST_LABELED = 0.05;
+/**
+ * Where a slice's label goes, as percentages of the box from the left and the
+ * top: the middle of its band at its mid-angle. Nothing for a slice under a
+ * twentieth, whose label would not fit on it.
+ */
+export declare const sliceLabelAt: (share: SliceShare, ring: RingGeometry) => {
+    x: number;
+    y: number;
+} | undefined;

package/dist/donut-chart/slice-label.js

@@ -0,0 +1,11 @@
+export const SMALLEST_LABELED = 0.05;
+export const sliceLabelAt = (share, ring) => {
+    if (share.fraction < SMALLEST_LABELED) {
+        return undefined;
+    }
+    const angle = (share.start + share.fraction / 2) * 2 * Math.PI * ring.span + ring.origin;
+    return {
+        x: ((ring.center + Math.cos(angle) * ring.radius) / ring.width) * 100,
+        y: ((ring.center + Math.sin(angle) * ring.radius - ring.top) / ring.tall) * 100,
+    };
+};

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, CommandController, HelixElement, OpenPhaseController, SwipeController } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, FocusScopeController, HelixElement, OpenPhaseController, SwipeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -11,7 +11,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  *
  * The drawer is modal by default, which means four things:
  *
- * - focus is trapped inside
+ * - focus is trapped inside: `Tab` from the last control goes to the first,
+ *   and `Shift+Tab` from the first to the last, as in `Dialog`
  * - Escape and a press outside close it
  * - the page behind is covered
  * - the page behind does not scroll
@@ -233,6 +234,7 @@ export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
      * key is read here, and comes through the same request.
      */
     private readonly handleKeydown;
+    protected readonly scope: FocusScopeController;
     /** The panel, which is a real `<dialog>`. */
     private get panel();
     /**

package/dist/drawer/root/drawer-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, edgeOffset, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CommandController, customElement, drawDismiss, drawDismissGlyph, edgeOffset, FocusScopeController, HelixElement, headingsIn, isRtl, lockScroll, MixinControllerOpen, nearest, OpenPhaseController, onUnlessFalse, parseSnapPoints, reflectElements, SwipeController, settleSwipe, snapTravel, swipeAxis, swipeEdge, towardEdge, unlockScroll, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { beyondWindow } from '../reveal.js';
@@ -64,6 +64,16 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             event.preventDefault();
             this.requestOpen(false);
         };
+        this.scope = new FocusScopeController(this, {
+            contain: () => this.open && this.modal,
+            contents: () => [
+                ...['header', '', 'footer'].flatMap((name) => this.renderRoot
+                    ?.querySelector(name ? `slot[name="${name}"]` : 'slot:not([name])')
+                    ?.assignedElements({ flatten: true }) ?? []),
+                ...[...(this.panel?.children ?? [])].filter((one) => one.localName === 'button'),
+            ],
+            surface: () => this.panel,
+        });
         this.handleCancel = (event) => {
             event.preventDefault();
             this.requestOpen(false);
@@ -153,8 +163,10 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
             return;
         }
         const points = parseSnapPoints(this.snapPoints);
-        const nearest = points.reduce((best, one) => Math.abs(one - point) < Math.abs(best - point) ? one : best);
-        this.restAt(nearest);
+        const at = nearest(points, point);
+        if (at !== undefined) {
+            this.restAt(at);
+        }
     }
     show() {
         this.requestOpen(true);

package/dist/drilldown/item/drilldown-item.d.ts

@@ -13,6 +13,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * - On the page that is showing, it renders its row.
  * - When its own page is showing, it renders only that page's rows. Its row
  *   belongs to the page above.
+ * - When a page further down its own is showing, it renders its page's slot
+ *   alone, so the rows below reach the page.
  * - Otherwise it renders nothing. The rows stay in the light DOM untouched, so
  *   there is no state to keep.
  *
@@ -23,6 +25,10 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * `aria-haspopup`, the same way `Menu` marks a row with a submenu. The server
  * render leaves both out, because the server cannot see the children.
  *
+ * The row is named by its label alone. Words in `description`, a line under
+ * the label, and in `end` describe it instead, through `aria-describedby`, as
+ * `Menu.Item` does: a reader hears "Theme", then "Dark".
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Panel item, Drill row
@@ -30,7 +36,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The row's label.
  * @slot chevron - Replaces the caret of a row that opens a page, such as with your own icon.
- * @slot end - Content after the label, usually an icon or a count.
+ * @slot description - A line under the label that describes the row. It describes the row to a screen reader and is not part of its name.
+ * @slot end - Content after the label, such as the setting a page holds or a count. It describes the row and is not part of its name.
  * @slot page - The rows of the page this row opens.
  * @slot start - Content before the label, usually an icon.
  *
@@ -71,6 +78,11 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * event handler is why it is kept off the typings.
      */
     onPage: boolean;
+    /**
+     * @internal Whether the page showing is below this row's own, deeper than one
+     * level. Written by the stack.
+     */
+    onPath: boolean;
     /**
      * @internal Whether this row's own page is the one showing. Written by the
      * stack.
@@ -89,6 +101,10 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * render would open with no caret on the row that leads to it.
      */
     private page;
+    /** Whether anything is slotted under the label, read the way `page` is. */
+    private description;
+    /** Whether anything is slotted after the label, read the way `page` is. */
+    private end;
     /**
      * Reads the children before each render, where they can be known.
      *
@@ -109,6 +125,10 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * the same note.
      */
     private readonly readPage;
+    /** Re-reads whether the line under the label or the words after it are filled. */
+    private readonly readWords;
+    /** What describes the row: the line under its label and the words after it. */
+    private get describedBy();
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /**