@fusion.dev/helix-headless 0.146.0 → 0.148.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, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, inRowOrder, isRtl, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, rangeAdd, reportRuntime, requestChange, scrollRoom, 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]',
@@ -165,9 +165,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 return;
             }
             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;
@@ -180,43 +178,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 }
                 return;
             }
-            let { column, row } = place;
-            switch (event.key) {
-                case 'ArrowUp':
-                    row = Math.max(-1, row - 1);
-                    break;
-                case 'ArrowDown':
-                    row = Math.min(last, row + 1);
-                    break;
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    if (this.treeKey(event, place)) {
-                        return;
-                    }
-                    column = Math.max(0, Math.min(edge, column + inlineStep(this, event.key)));
-                    break;
-                case 'Home':
-                    row = control ? -1 : row;
-                    column = 0;
-                    break;
-                case 'End':
-                    row = control ? Math.max(row, last) : row;
-                    column = edge;
-                    break;
-                case 'PageUp':
-                    row = Math.max(-1, row - this.pageStep(place.cell));
-                    break;
-                case 'PageDown':
-                    row = Math.min(last, row + this.pageStep(place.cell));
-                    break;
-                case 'Enter':
-                case ' ':
-                case 'F2':
-                    this.activate(event, place);
-                    return;
-                default:
-                    return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
+                this.activate(event, place);
+                return;
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && this.treeKey(event, place)) {
+                return;
+            }
+            const to = gridMove(event.key, place, { last, top: -1, width: this.width }, {
+                control: event.ctrlKey || event.metaKey,
+                page: event.key.startsWith('Page') ? this.pageStep(place.cell) : 1,
+                step: inlineStep(this, event.key),
+            });
+            if (!to) {
+                return;
             }
+            const { column, row } = to;
             event.preventDefault();
             if (event.shiftKey &&
                 this.selectable &&
@@ -887,6 +864,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 +875,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 +998,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) {
@@ -1198,11 +1181,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.focusWanted = true;
     }
     pageStep(cell) {
-        const box = this.partNamed('table');
-        const tall = cell.getBoundingClientRect().height || this.estimate;
-        const scrolls = box !== null && box.scrollHeight > box.clientHeight + 1;
-        const room = scrolls ? box.clientHeight - this.headHeight() : window.innerHeight;
-        return Math.max(1, Math.floor(room / tall) - 1);
+        return pageRows(scrollRoom(this.partNamed('table'), { covered: this.headHeight() }), cell.getBoundingClientRect().height || this.estimate);
     }
     headHeight() {
         return this.cellAt(-1, 0)?.getBoundingClientRect().height ?? 0;

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,17 +16,28 @@ 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 actions - The box after the value inside its `<dd>`, holding the `actions` slot.
  * @csspart label - The `<dt>`, holding the label.
  * @csspart value - The `<dd>`, holding the value.
+ *
+ * @cssstate several - The values are several `<dd>` elements of your own, so the item draws no `value` part.
  */
 export declare class HelixHeadlessDescriptionListItem extends HelixElement {
     /**
@@ -37,13 +48,20 @@ 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 updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /** A value arriving or leaving can change whether the item wraps them. */
     private readonly handleSlotChange;

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

@@ -11,28 +11,38 @@ 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);
         this.finishHydration();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.toggleState('several', this.ownValues);
+    }
     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><span part="actions"
+              ><slot name="actions"></slot></span
+          ></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/divider/root/divider-root.d.ts

@@ -9,12 +9,22 @@ 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.
+ * **The line is a separator**, as `<hr>` is, and as Radix Separator, React
+ * Aria Separator, and Web Awesome's divider are. It is named by any content
+ * set into it, so a screen reader says "Or, separator" where you wrote "Or" on
+ * the line. Set `decorative` on a rule that separates nothing, such as one
+ * under a heading or between the facts of a byline, and it leaves the
+ * accessibility tree.
  *
- * 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.
+ * Use `orientation="vertical"` between items on one line. A vertical divider
+ * stretches to fit its flex parent and sets no height of its own.
+ *
+ * **Inside a toolbar it runs across the toolbar** without being told: vertical
+ * in a horizontal toolbar and horizontal in a vertical one, with
+ * `aria-orientation` to match, as React Aria's separator does inside a
+ * toolbar. Inside means a child of Toolbar or of the page's own
+ * `role="toolbar"`. An `orientation` you write still wins. A server cannot see
+ * the toolbar, so the turn arrives with hydration, inside the shadow root.
  *
  * @since 0.1.0
  * @status stable
@@ -26,27 +36,44 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart content - The content set into the line.
  * @csspart line - The line, or each half of it when content is set into it.
+ *
+ * @cssstate vertical - The line runs vertically: `orientation="vertical"`, or no `orientation` inside a horizontal toolbar.
  */
 export declare class HelixHeadlessDivider extends HelixElement {
     /**
-     * Whether screen readers announce the line as a separator.
-     *
-     * Off by default, and out of the accessibility tree. Most rules on a page
-     * separate nothing: they underline a heading or close a section that space
-     * had already closed, and announcing every one as a separator is noise a
-     * screen-reader user has to walk past.
+     * Whether screen readers announce the line as a separator, which they now do
+     * by default.
      *
-     * An opt-in, not a `decorative` opt-out, because a boolean attribute cannot
-     * be turned off: `decorative="false"` parses as `true`, which would put the
-     * quiet default out of reach from HTML and leave it settable only as a
-     * property. An opt-in is absent by default, which every reflected property
-     * here has to be.
+     * It dates from when the line was decorative by default. It is still read,
+     * and it wins over `decorative`, so a divider written with it stays a
+     * separator.
      */
     announced: boolean;
+    /**
+     * Takes the line out of the accessibility tree, for a rule that separates
+     * nothing: one under a heading, or between the facts of a byline.
+     *
+     * Absent, the line is a separator, as `<hr>` is. Radix Separator's opt-out
+     * has the same name. It turns the role off because a boolean attribute that
+     * is on by default cannot be turned off from HTML.
+     */
+    decorative: boolean;
     /**
      * The direction the line runs: `horizontal` or `vertical`.
+     *
+     * Unset is horizontal, or across the toolbar the divider sits in.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * The direction the line is drawn and announced in: `orientation`, else
+     * across the toolbar around it, else horizontal.
+     *
+     * The toolbar is read only where the tree is known, never while hydrating
+     * what a server sent, whose render has to be the server's.
+     */
+    private get drawn();
+    /** Reads the toolbar again when the divider moves into or out of one. */
+    connectedCallback(): void;
     /**
      * Marks the middle region when nothing has been set into it.
      *
@@ -59,6 +86,8 @@ export declare class HelixHeadlessDivider extends HelixElement {
      * attribute written onto the host is a change to markup the consumer rendered.
      */
     private markEmpty;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }