@fusion.dev/helix-headless 0.147.0 → 0.149.0

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, localeOf, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, words, wordsLocale, 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';
@@ -25,6 +25,7 @@ const firstOf = (year, month) => addMonths(asDate('2000-01-01'), (year - 2000) *
 let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.badInputMessage = '{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}';
         this.defaultMonth = '';
         this.disableDates = '';
         this.disableDays = '';
@@ -41,6 +42,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.previousLabel = 'Previous month';
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
+        this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.focused = '';
         this.choosing = false;
         this.handleKeydown = (event) => {
@@ -98,14 +100,19 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 this.zoom('year');
             }
         };
+        this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.readOnly = false;
         this.required = false;
         this.step = 1;
+        this.stepMismatchMessage = 'Choose one of the dates the calendar offers.';
+        this.unavailableMessage = 'Choose a date that is available.';
+        this.valueMissingMessage = 'Choose a date.';
         this.view = 'day';
         this.yearViewLabel = '{heading}. Choose a year';
     }
+    static { this.words = 'helix-date-picker'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     get month() {
         return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
@@ -122,8 +129,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
             return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
         }
-        const language = this.language;
-        return language === '' ? 0 : weekStartOf(language);
+        return handedLocale(this) === '' ? 0 : weekStartOf(this.language);
     }
     get range() {
         const dates = this.selected;
@@ -363,17 +369,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         if (this.min !== '' && iso < this.min) {
             return [
                 'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
-                    min: this.spoken(this.min),
-                }),
+                formatWords(this, 'rangeUnderflowMessage', { min: this.spoken(this.min) }),
             ];
         }
         if (this.max !== '' && iso > this.max) {
             return [
                 'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
-                    max: this.spoken(this.max),
-                }),
+                formatWords(this, 'rangeOverflowMessage', { max: this.spoken(this.max) }),
             ];
         }
         const date = asDate(iso);
@@ -382,21 +384,18 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             return undefined;
         }
         return why === 'listed'
-            ? ['badInput', this.unavailableMessage || 'Choose a date that is available.']
-            : ['stepMismatch', this.stepMismatchMessage || 'Choose one of the dates the calendar offers.'];
+            ? ['badInput', this.unavailableMessage]
+            : ['stepMismatch', this.stepMismatchMessage];
     }
     reportRequired() {
         const anchor = this.partNamed('grid') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a date.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
             return;
         }
         const held = this.selected;
         if (held.length > 0 && held.some((one) => asDate(one) === null)) {
-            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
-                (this.mode === undefined
-                    ? 'Enter a date as YYYY-MM-DD.'
-                    : 'Enter dates as YYYY-MM-DD, separated by commas.'), anchor);
+            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', { mode: this.mode ?? 'single' }), anchor);
             return;
         }
         for (const one of held) {
@@ -414,7 +413,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             this.focused = '';
         }
         this.choosing = false;
-        const outside = this.label === 'Date Picker' ? [...(this.internals.labels ?? [])] : [];
+        const outside = this.hasAttribute('label') ? [] : [...(this.internals.labels ?? [])];
         hostAria(this.internals, {
             label: this.label,
             labelledBy: outside,
@@ -438,19 +437,20 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        const language = this.language;
+        const language = calendarLocale(this.language, this.calendar);
         if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
-        const locale = language || undefined;
+        const utc = (options) => new Intl.DateTimeFormat(language || undefined, { ...options, timeZone: 'UTC' });
         const built = {
-            full: new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' }),
-            heading: new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC', year: 'numeric' }),
+            full: utc({ dateStyle: 'full' }),
+            heading: utc({ month: 'long', year: 'numeric' }),
             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' }),
-            year: new Intl.DateTimeFormat(locale, { timeZone: 'UTC', year: 'numeric' }),
+            long: utc({ dateStyle: 'long' }),
+            monthName: utc({ month: 'short' }),
+            monthYear: utc({ month: 'short', year: 'numeric' }),
+            weekday: utc({ weekday: 'short' }),
+            year: utc({ year: 'numeric' }),
         };
         this.cachedFormats = built;
         return built;
@@ -470,7 +470,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </slot>`;
     }
     renderMonth(month, index) {
-        const { full, heading, weekday } = this.formats;
+        const { full, heading: named, weekday } = this.formats;
+        const heading = named.format(month);
         const weeks = this.weeksOf(month);
         const anchor = fromDate(this.anchor);
         const today = localToday();
@@ -492,7 +493,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             : nothing}
         ${''}
         <span part="heading" aria-live="polite"
-          >${this.renderHeadingText(heading.format(month), this.monthViewLabel)}</span
+          >${this.renderHeadingText(heading, 'monthViewLabel')}</span
         >
         ${last
             ? html `<button
@@ -509,7 +510,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
       <div
         part="grid"
         role="grid"
-        aria-label=${heading.format(month)}
+        aria-label=${heading}
         aria-readonly=${this.readOnly ? 'true' : nothing}
         data-unset=${this.value === '' ? '' : nothing}
       >
@@ -561,13 +562,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return html `<button
       part="heading-button"
       type="button"
-      aria-label=${fillTemplate(label, { heading: text })}
+      aria-label=${formatWords(this, label, { heading: text })}
       ?disabled=${this.isDisabled}
       @click=${this.handleHeading}
     >${text}</button>`;
     }
     renderPeriods() {
-        const { monthName, year: yearName } = this.formats;
+        const { monthName, monthYear, year: yearName } = this.formats;
         const years = this.view === 'year';
         const page = years ? yearPageOf(this.periodYear) : this.periodYear;
         const heading = years
@@ -588,7 +589,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         role="gridcell"
         aria-current=${current ? 'date' : nothing}
         aria-disabled=${out ? 'true' : nothing}
-        aria-label=${years ? words : `${words} ${yearName.format(first)}`}
+        aria-label=${years ? words : monthYear.format(first)}
         aria-selected=${chosen ? 'true' : nothing}
         tabindex=${at === stop && !this.isDisabled ? '0' : '-1'}
         @click=${() => this.choosePeriod(at)}
@@ -608,7 +609,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
           ${this.renderPreviousMark()}
         </button>
         <span part="heading" aria-live="polite"
-          >${this.renderHeadingText(heading, this.yearViewLabel)}</span
+          >${this.renderHeadingText(heading, 'yearViewLabel')}</span
         >
         <button
           part="next"
@@ -650,8 +651,12 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     }
 };
 __decorate([
+    words,
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessDatePicker.prototype, "badInputMessage", void 0);
+__decorate([
+    property()
+], HelixHeadlessDatePicker.prototype, "calendar", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDatePicker.prototype, "dayContent", void 0);
@@ -671,6 +676,7 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessDatePicker.prototype, "isDateUnavailable", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessDatePicker.prototype, "label", void 0);
 __decorate([
@@ -695,27 +701,35 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "months", void 0);
 __decorate([
+    words,
     property({ attribute: 'month-view-label' })
 ], HelixHeadlessDatePicker.prototype, "monthViewLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessDatePicker.prototype, "nextLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-year-label' })
 ], HelixHeadlessDatePicker.prototype, "nextYearLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-years-label' })
 ], HelixHeadlessDatePicker.prototype, "nextYearsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDatePicker.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-year-label' })
 ], HelixHeadlessDatePicker.prototype, "previousYearLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-years-label' })
 ], HelixHeadlessDatePicker.prototype, "previousYearsLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessDatePicker.prototype, "rangeOverflowMessage", void 0);
 __decorate([
@@ -728,6 +742,7 @@ __decorate([
     state()
 ], HelixHeadlessDatePicker.prototype, "periodFocus", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessDatePicker.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
@@ -740,18 +755,22 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "step", void 0);
 __decorate([
+    words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessDatePicker.prototype, "stepMismatchMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessDatePicker.prototype, "unavailableMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessDatePicker.prototype, "valueMissingMessage", void 0);
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "view", void 0);
 __decorate([
+    words,
     property({ attribute: 'year-view-label' })
 ], HelixHeadlessDatePicker.prototype, "yearViewLabel", void 0);
 HelixHeadlessDatePicker = __decorate([

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

@@ -33,8 +33,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @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 {
     /**
@@ -58,6 +61,7 @@ export declare class HelixHeadlessDescriptionListItem extends HelixElement {
      */
     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

@@ -23,12 +23,18 @@ let HelixHeadlessDescriptionListItem = class HelixHeadlessDescriptionListItem ex
         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.ownValues
             ? html `${label}<slot @slotchange=${this.handleSlotChange}></slot>`
             : html `${label}
-          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot><slot name="actions"></slot></dd>`;
+          <dd part="value"><slot @slotchange=${this.handleSlotChange}></slot><span part="actions"
+              ><slot name="actions"></slot></span
+          ></dd>`;
     }
 };
 __decorate([

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

@@ -24,7 +24,8 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * says it is open, which would leave it impossible to reopen.
  *
  * The dialog's name is `label` when you set it. Otherwise it is the heading in
- * the `header` slot, or the elements an `aria-labelledby` on the host names.
+ * the `header` slot, or the elements an `aria-labelledby` on the host names,
+ * and `fallback-label` where nothing names it.
  * While it is open, the page behind it does not scroll.
  *
  * The dialog is described by the words at the start of its body: the elements
@@ -67,6 +68,11 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @cssstate open - While the dialog is open.
  */
 export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-dialog': { dismissLabel: 'Schließen' } })`.
+     */
+    static words: string;
     /**
      * Makes the dialog an alert dialog, for a message that interrupts to ask for
      * an answer, such as a confirmation before something is deleted.
@@ -104,6 +110,11 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * interface.
      */
     dismissLabel: string;
+    /**
+     * The dialog's name where nothing names it: no `label`, no heading in the
+     * `header` slot, and no `aria-labelledby` on the host.
+     */
+    fallbackLabel: string;
     /**
      * Accessible name for the dialog. When it is empty, the heading in the
      * `header` slot names the dialog.

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, auditName, CommandController, customElement, drawDismiss, drawDismissGlyph, FocusScopeController, 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, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { wordsIn } from '../description.js';
@@ -14,6 +14,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
         this.alert = false;
         this.dismissible = false;
         this.dismissLabel = 'Close';
+        this.fallbackLabel = 'Dialog';
         this.label = '';
         this.phases = new OpenPhaseController(this, {
             mark: {
@@ -90,6 +91,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
             this.requestOpen(false);
         };
     }
+    static { this.words = 'helix-dialog'; }
     get returnValue() {
         return this.dialog?.returnValue ?? this.returned;
     }
@@ -124,8 +126,8 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
     }
     describeByBody() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
-        const words = this.hasAttribute('aria-describedby') ? [] : wordsIn(slot);
-        this.describedByBody = reflectElements(this.dialog, 'ariaDescribedByElements', words, this.describedByBody);
+        const said = this.hasAttribute('aria-describedby') ? [] : wordsIn(slot);
+        this.describedByBody = reflectElements(this.dialog, 'ariaDescribedByElements', said, this.describedByBody);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -204,7 +206,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
       part="dialog"
       role=${this.alert ? 'alertdialog' : nothing}
       closedby=${this.closedBy ?? nothing}
-      aria-label=${this.label || 'Dialog'}
+      aria-label=${this.label || this.fallbackLabel}
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}
@@ -233,8 +235,13 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDialog.prototype, "dismissible", void 0);
 __decorate([
+    words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessDialog.prototype, "dismissLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessDialog.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDialog.prototype, "label", void 0);

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;
 }

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

@@ -4,27 +4,48 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, markRegion } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, markRegion, toolbarAround, toolbarAxis, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
     constructor() {
         super(...arguments);
         this.announced = false;
+        this.decorative = false;
+    }
+    get drawn() {
+        const toolbar = this.orientation || this.hydrating ? null : toolbarAround(this);
+        if (toolbar) {
+            return toolbarAxis(toolbar) === 'vertical' ? 'horizontal' : 'vertical';
+        }
+        return this.orientation ?? 'horizontal';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.requestUpdate();
     }
     markEmpty() {
         markRegion(this.renderRoot, 'content', ['']);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('vertical', this.drawn === 'vertical');
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
     }
     render() {
+        const separator = this.announced || !this.decorative;
         return html `<div
       part="line"
-      role=${this.announced ? 'separator' : 'presentation'}
-      aria-labelledby=${this.announced ? 'content' : nothing}
-      aria-orientation=${this.announced ? (this.orientation ?? 'horizontal') : nothing}
+      role=${separator ? 'separator' : 'presentation'}
+      aria-labelledby=${separator ? 'content' : nothing}
+      aria-orientation=${separator ? this.drawn : nothing}
     ></div>
       <span id="content" part="content"><slot @slotchange=${() => this.markEmpty()}></slot></span>
       <div part="line" role="presentation"></div>`;
@@ -33,6 +54,9 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDivider.prototype, "announced", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDivider.prototype, "decorative", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDivider.prototype, "orientation", void 0);

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

@@ -72,6 +72,11 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @cssproperty --donut-chart-stroke - How thick the ring is drawn, derived from `hole`.
  */
 export declare class HelixHeadlessDonutChart extends HelixHeadlessDonutChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-donut-chart': { positionLabel: '{position} von {count}' } })`.
+     */
+    static words: string;
     /**
      * The pointer is not mapped across this one.
      *

package/dist/donut-chart/root/donut-chart-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 { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, HelixElement, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -35,6 +35,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         super(...arguments);
         this.sliceLabels = false;
     }
+    static { this.words = 'helix-donut-chart'; }
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
@@ -84,11 +85,13 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     }
     renderSummary(shares) {
         const rows = this.sourceRows;
+        const locale = wordsLocale(this);
         const parts = shares
             .filter((share) => this.showsSeries(rows[share.row]?.label ?? ''))
-            .map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(this.locale).format(share.fraction)}`);
+            .map((share) => `${rows[share.row]?.label ?? ''} ${percentIn(locale).format(share.fraction)}`);
         const named = this.named ? `${this.named}: ` : '';
-        return html `<p id="helix-chart-summary" part="summary">${named}${parts.join(', ')}.</p>`;
+        const listed = new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format(parts);
+        return html `<p id="helix-chart-summary" part="summary">${named}${listed}.</p>`;
     }
     renderPlot(shares) {
         return html `<div
@@ -134,7 +137,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
             top: half ? CENTER - EDGE : 0,
             width: PLOT_WIDTH,
         };
-        const format = percentIn(this.locale);
+        const format = percentIn(wordsLocale(this));
         return html `${shares.map((share, index) => {
             const place = sliceLabelAt(share, ring);
             if (!place) {
@@ -221,7 +224,7 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
         const cells = [...row.cells];
         cells[column] = {
             ...cell,
-            text: `${cell.text} (${percentIn(this.locale).format(share.fraction)})`,
+            text: `${cell.text} (${percentIn(wordsLocale(this)).format(share.fraction)})`,
         };
         return rows.map((one, index) => (index === share.row ? { ...row, cells } : one));
     }