@fusion.dev/helix-headless 0.154.0 → 0.155.0

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

@@ -1,4 +1,4 @@
-import { type CalendarView, type DateCalendar, HelixFormElement } from '@fusion.dev/helix-core';
+import { type CalendarView, type DateCalendar, HelixFormElement, type MonthCalendar } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
@@ -47,6 +47,8 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @aliases Calendar, Date grid, Month view
  * @documentation https://fusion.dev/helix/components/date-picker
  *
+ * @slot footer - Content under the calendar, such as buttons for today or a common range.
+ * @slot header - Content above the calendar, such as a note on what the date is for.
  * @slot next-icon - The glyph on the control that moves forward a month, usually a caret.
  * @slot previous-icon - The glyph on the control that moves back a month, usually a caret.
  *
@@ -64,6 +66,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 day-weekend - A day of the weekend where the calendar's language is spoken, beside `day`: Saturday and Sunday in `en-US`, Friday and Saturday in `ar-EG`.
  * @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.
@@ -82,7 +85,7 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @csspart previous - The control that moves to the previous month.
  * @csspart previous-mark - The glyph on the previous month control, where none is slotted.
  * @csspart week - One row of days.
- * @csspart weekday - A column header naming a day of the week.
+ * @csspart weekday - A column header naming a day of the week. It shows the short name and says the full one.
  *
  * @cssproperty --date-picker-column-count - How many month columns are drawn, capped at two. `--date-picker-columns` overrides it.
  *
@@ -105,17 +108,24 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      */
     badInputMessage: string;
     /**
-     * The calendar the heading, the days, and the months are written in:
-     * `gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose
-     * months are the Gregorian months.
+     * The calendar the heading, the days, and the months are written in.
      *
-     * Absent is the locale's own where it is one of the five, such as
-     * `buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and
-     * `gregory` for every other, such as `persian` for `fa-IR`, so the heading
-     * names the Gregorian month the grid shows. The value is `YYYY-MM-DD` in
-     * every calendar.
+     * `gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five
+     * whose months are the Gregorian months. Absent is the locale's own where
+     * it is one of the five, such as `buddhist` for `th-TH` or `japanese` for
+     * `ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`
+     * for `fa-IR`.
+     *
+     * `persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,
+     * `coptic`, and `indian` draw a calendar with months of its own, as React
+     * Aria's calendars do: each grid is one of that calendar's months, the
+     * Hebrew leap month and Ethiopia's five-day thirteenth month included, and
+     * Previous, Next and the page keys move by those months. `month` and
+     * `helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The
+     * heading stays text, as the months and years views are drawn in Gregorian
+     * months only. The value is `YYYY-MM-DD` in every calendar.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * What each day shows, in place of its number: a function given the date as
      * `YYYY-MM-DD` that returns text, an element or a Lit template.
@@ -198,8 +208,9 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     /** The month on show, whoever set it, and `undefined` until somebody has. */
     private monthState;
     /**
-     * The month shown, as `YYYY-MM`. When it is not set, it follows `value`,
-     * then the current month.
+     * The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a
+     * `calendar` with months of its own. When it is not set, it follows
+     * `value`, then the current month.
      *
      * Separate from `value` on purpose, so paging selects nothing and a consumer
      * can drive the view. Reading gives the month on show; writing sets it, and
@@ -258,6 +269,8 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     private focused;
     /** The selected dates, in order. */
     private get selected();
+    /** The days of the weekend, `0` for Sunday: the locale's, or Saturday and Sunday where none is named. */
+    private get weekend();
     /** The day the week starts on: `firstDayOfWeek`, or the locale's. */
     private get weekStart();
     /**
@@ -274,6 +287,13 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
     private isSelected;
     /** The month being shown, resolved from `month`, then `value`, then today. */
     private get shown();
+    /**
+     * The months the calendar pages through: its own under a `calendar` with
+     * months of its own, and the Gregorian months otherwise.
+     */
+    private get system();
+    /** Whether `calendar` names a calendar with months of its own. */
+    private get ownMonths();
     /**
      * The month to open on when nothing has declared one.
      *
@@ -432,6 +452,16 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * The validation message for a date that `step` skips.
      */
     stepMismatchMessage: string;
+    /**
+     * The time zone today is read in, such as `America/New_York`, as React
+     * Aria's `today(timeZone)` reads it. Empty is the reader's own.
+     *
+     * Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+     * the day marked `aria-current` and `day-today`, and the month a picker
+     * with no value opens on. A desk in Tokyo booking for an office in New York
+     * sets `America/New_York`, and today is the office's.
+     */
+    timeZone: string;
     /**
      * The validation message for a date that `disable-dates` or `disable-days`
      * bars.

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, 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 { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, MixinControllerValue, MixinPickerFeedback, MONTH_CALENDARS, monthOf, monthOut, monthSystem, periodCells, periodKey, reportValues, requestChange, todayIn, weekendOf, 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';
@@ -46,7 +46,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.focused = '';
         this.choosing = false;
         this.handleKeydown = (event) => {
-            if (this.view !== 'day') {
+            if (this.view !== 'day' && !this.ownMonths) {
                 this.handlePeriodKeydown(event);
                 return;
             }
@@ -80,7 +80,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             }
             else {
                 const step = event.key === 'PageUp' ? -1 : 1;
-                this.moveTo(addMonths(from, event.shiftKey ? step * 12 : step));
+                this.moveTo(this.system.add(from, event.shiftKey ? step * 12 : step));
             }
             event.preventDefault();
         };
@@ -105,6 +105,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.required = false;
         this.step = 1;
         this.stepMismatchMessage = 'Choose one of the dates the calendar offers.';
+        this.timeZone = '';
         this.unavailableMessage = 'Choose a date that is available.';
         this.valueMissingMessage = 'Choose a date.';
         this.view = 'day';
@@ -115,7 +116,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return wordsLocale(this);
     }
     get month() {
-        return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
+        return this.monthState ?? (this.defaultMonth || this.system.key(this.derivedMonth));
     }
     set month(next) {
         const previous = this.month;
@@ -125,6 +126,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     get selected() {
         return list(this.value);
     }
+    get weekend() {
+        return handedLocale(this) === '' ? [0, 6] : weekendOf(this.language);
+    }
     get weekStart() {
         if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
             return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
@@ -147,24 +151,31 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return this.selected.includes(iso);
     }
     get shown() {
-        const explicit = /^(\d{4})-(\d{2})$/.exec(this.monthState ?? this.defaultMonth);
+        const explicit = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(this.monthState ?? this.defaultMonth);
         if (explicit) {
-            return firstOf(Number(explicit[1]), Number(explicit[2]) - 1);
+            const first = firstOf(Number(explicit[1]), Number(explicit[2]) - 1);
+            return this.system.start(explicit[3] ? addDays(first, Number(explicit[3]) - 1) : first);
         }
         return this.derivedMonth;
     }
+    get system() {
+        return monthSystem(this.calendar);
+    }
+    get ownMonths() {
+        return MONTH_CALENDARS.includes(this.calendar ?? '');
+    }
     get derivedMonth() {
-        const from = asDate(this.selected[0] ?? '') ?? asDate(localToday()) ?? new Date();
-        return firstOf(from.getUTCFullYear(), from.getUTCMonth());
+        const from = asDate(this.selected[0] ?? '') ?? asDate(todayIn(this.timeZone)) ?? new Date();
+        return this.system.start(from);
     }
     get anchor() {
         const shown = this.shown;
         for (const candidate of [
             asDate(this.focused),
             asDate(this.selected[0] ?? ''),
-            asDate(localToday()),
+            asDate(todayIn(this.timeZone)),
         ]) {
-            if (candidate && sameMonth(candidate, shown)) {
+            if (candidate && this.system.same(candidate, shown)) {
                 return candidate;
             }
         }
@@ -198,17 +209,17 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return date;
     }
     get atStart() {
-        return asDate(this.min) !== null && monthOf(addMonths(this.shown, -1)) < this.min.slice(0, 7);
+        return asDate(this.min) !== null && fromDate(addDays(this.shown, -1)) < this.min;
     }
     get atEnd() {
         return (asDate(this.max) !== null &&
-            monthOf(addMonths(this.shown, this.monthCount)) > this.max.slice(0, 7));
+            fromDate(this.system.start(this.system.add(this.shown, this.monthCount))) > this.max);
     }
     show(date) {
         if (this.isDisabled) {
             return;
         }
-        const next = monthOf(date);
+        const next = this.system.key(date);
         if (next === this.month) {
             return;
         }
@@ -437,7 +448,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        const language = calendarLocale(this.language, this.calendar);
+        const language = this.ownMonths
+            ? `${new Intl.Locale(this.language || new Intl.DateTimeFormat().resolvedOptions().locale, { calendar: this.calendar ?? 'gregory' })}`
+            : calendarLocale(this.language, this.calendar);
         if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
@@ -450,6 +463,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             monthName: utc({ month: 'short' }),
             monthYear: utc({ month: 'short', year: 'numeric' }),
             weekday: utc({ weekday: 'short' }),
+            weekdayName: utc({ weekday: 'long' }),
             year: utc({ year: 'numeric' }),
         };
         this.cachedFormats = built;
@@ -470,12 +484,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </slot>`;
     }
     renderMonth(month, index) {
-        const { full, heading: named, weekday } = this.formats;
+        const { full, heading: named, weekday, weekdayName } = this.formats;
         const heading = named.format(month);
         const weeks = this.weeksOf(month);
         const anchor = fromDate(this.anchor);
-        const today = localToday();
+        const today = todayIn(this.timeZone);
         const range = this.range;
+        const weekend = this.weekend;
         const first = index === 0;
         const last = index === this.monthCount - 1;
         return html `<div part="month">
@@ -486,7 +501,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 type="button"
                 aria-label=${this.previousLabel}
                 ?disabled=${this.isDisabled || this.atStart}
-                @click=${() => this.show(addMonths(this.shown, -1))}
+                @click=${() => this.show(this.system.add(this.shown, -1))}
               >
                 ${this.renderPreviousMark()}
               </button>`
@@ -501,7 +516,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 type="button"
                 aria-label=${this.nextLabel}
                 ?disabled=${this.isDisabled || this.atEnd}
-                @click=${() => this.show(addMonths(this.shown, 1))}
+                @click=${() => this.show(this.system.add(this.shown, 1))}
               >
                 ${this.renderNextMark()}
               </button>`
@@ -515,14 +530,16 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         data-unset=${this.value === '' ? '' : nothing}
       >
         <div part="week" role="row">
-          ${weeks[0]?.map((date) => html `<span part="weekday" role="columnheader">${weekday.format(date)}</span>`)}
+          ${weeks[0]?.map((date) => html `<span part="weekday" role="columnheader" aria-label=${weekdayName.format(date)}
+                >${weekday.format(date)}</span
+              >`)}
         </div>
         ${weeks.map((week) => html `<div part="week" role="row">
             ${week.map((date) => {
             const iso = fromDate(date);
             const disabled = this.barred(date);
             const selected = this.isSelected(iso);
-            const outside = !sameMonth(date, month);
+            const outside = !this.system.same(date, month);
             const start = !outside && range !== null && iso === range[0];
             const end = !outside && range !== null && iso === range[1];
             const middle = !outside && range !== null && iso > range[0] && iso < range[1];
@@ -538,10 +555,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 data-range-middle=${middle ? '' : nothing}
                 data-range-start=${start ? '' : nothing}
                 data-today=${iso === today ? '' : nothing}
+                data-weekend=${weekend.includes(date.getUTCDay()) ? '' : nothing}
                 tabindex=${!outside && iso === anchor && !this.isDisabled ? '0' : '-1'}
                 @click=${outside ? nothing : () => this.select(date)}
                 ><span
-                  part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}"
+                  part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}${weekend.includes(date.getUTCDay()) ? ' day-weekend' : ''}"
                   >${this.renderDay(date, outside)}</span
                 ></span
               >`;
@@ -551,10 +569,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </div>`;
     }
     renderDay(date, outside) {
-        return this.dayContent && !outside ? this.dayContent(fromDate(date)) : date.getUTCDate();
+        return this.dayContent && !outside ? this.dayContent(fromDate(date)) : this.system.day(date);
     }
     renderHeadingText(text, label) {
         const steps = this.maxView !== undefined &&
+            !this.ownMonths &&
             (this.view === 'day' || (this.view === 'month' && this.maxView === 'year'));
         if (!steps) {
             return text;
@@ -580,7 +599,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             min: this.min,
             page: this.periodYear,
             shown: this.shown,
-            today: localToday(),
+            today: todayIn(this.timeZone),
             view: years ? 'year' : 'month',
         }).map(({ at, chosen, current, first, out }) => {
             const words = years ? yearName.format(first) : monthName.format(first);
@@ -625,17 +644,18 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </div>`;
     }
     render() {
-        if (this.view !== 'day') {
-            return html `<div part="months" style="--date-picker-column-count: 1">
-          ${this.renderPeriods()}
-        </div>
-        ${this.renderPickerFeedback()}`;
+        if (this.view !== 'day' && !this.ownMonths) {
+            return html `<slot name="header"></slot>
+        <div part="months" style="--date-picker-column-count: 1">${this.renderPeriods()}</div>
+        <slot name="footer"></slot>${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>${this.renderPickerFeedback()}`;
+        return html `<slot name="header"></slot>
+      <div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
+        ${Array.from({ length: count }, (_, index) => this.renderMonth(this.system.add(shown, index), index))}
+      </div>
+      <slot name="footer"></slot>${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         return asDate(this.value);
@@ -758,6 +778,9 @@ __decorate([
     words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessDatePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'time-zone' })
+], HelixHeadlessDatePicker.prototype, "timeZone", void 0);
 __decorate([
     words,
     property({ attribute: 'unavailable-message' })

package/dist/element-events.generated.js

@@ -6,6 +6,7 @@ registerElementEvents({
     'helix-headless-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-avatar': ['error', 'load'],
     'helix-headless-bar-chart': ['helix-reading-change', 'helix-reading-press'],
+    'helix-headless-breadcrumb': ['helix-select'],
     'helix-headless-button': ['helix-press'],
     'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
@@ -241,7 +242,7 @@ registerElementEvents({
     'helix-headless-step': ['helix-select'],
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
-    'helix-headless-tab': ['helix-select'],
+    'helix-headless-tab': ['helix-dismiss', 'helix-select'],
     'helix-headless-table': [
         'helix-before-reorder',
         'helix-reorder',

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

@@ -36,6 +36,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * links and not a single control, and the keys across the other axis are
  * left to the page and to an open panel.
  *
+ * While a `Megamenu`, or another disclosure among the destinations, is open,
+ * the navigation is `:state(open)`, so a page can dim what lies under the
+ * panel, as Radix's navigation menu marks its open state.
+ *
+ * A screen reader lists the page's navigation landmarks by name, so two named
+ * alike cannot be told apart. Where another navigation in the same document
+ * has the same name, "Main" for two with no `label`, the later one warns once
+ * with the kind `duplicate-name`.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -47,6 +56,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart indicator - The marker that moves to the current destination. It carries the destination's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed.
  * @csspart nav - The navigation landmark.
+ *
+ * @cssstate open - While a megamenu or another disclosure among the destinations is open.
  */
 export declare class HelixHeadlessNavigation extends HelixElement {
     /**
@@ -80,6 +91,21 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      */
     orientation?: 'vertical';
     private current;
+    /** The disclosures among the destinations that are open. */
+    private readonly opened;
+    /**
+     * Hears a disclosure among the destinations open or close. In capture,
+     * because `toggle` does not bubble.
+     */
+    private readonly handleToggle;
+    /** The landmark's name as a screen reader lists it. */
+    private get landmarkName();
+    /**
+     * Warns once where another navigation in the same document has the same
+     * name, a task after the first render, so the page's other landmarks have
+     * rendered too.
+     */
+    private auditTwin;
     /**
      * The destinations the consumer slotted, and the items of a slotted list in
      * place of the list.

package/dist/navigation/root/navigation-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, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, reportRuntime, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -23,6 +23,8 @@ const navigable = (item) => {
         },
     });
 };
+const connected = new Set();
+const warned = new WeakSet();
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {
         super(...arguments);
@@ -53,8 +55,56 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             label: true,
             target: () => this.partNamed('nav'),
         });
+        this.opened = new Set();
+        this.handleToggle = (event) => {
+            const target = event.target;
+            if (target === this || target === null) {
+                return;
+            }
+            if (event.newState === 'open') {
+                this.opened.add(target);
+            }
+            else {
+                this.opened.delete(target);
+            }
+            this.toggleState('open', this.opened.size > 0);
+        };
     }
     static { this.words = 'helix-navigation'; }
+    get landmarkName() {
+        const labeled = this.getAttribute('aria-labelledby');
+        if (labeled) {
+            const root = this.getRootNode();
+            return labeled
+                .split(/\s+/)
+                .map((id) => root.getElementById?.(id)?.textContent?.trim() ?? '')
+                .join(' ')
+                .trim();
+        }
+        return (this.getAttribute('aria-label') ?? this.label).trim();
+    }
+    auditTwin() {
+        setTimeout(() => {
+            if (!this.isConnected || warned.has(this)) {
+                return;
+            }
+            const name = this.landmarkName;
+            const root = this.getRootNode();
+            const twin = [...connected].some((other) => other !== this &&
+                other.isConnected &&
+                (other.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 &&
+                other.getRootNode() === root &&
+                other.landmarkName === name);
+            if (twin) {
+                warned.add(this);
+                reportRuntime({
+                    kind: 'duplicate-name',
+                    message: `<${this.localName}> has the name "${name}", which another navigation on the page has too, so a screen reader lists the two alike. Give each a \`label\` that says what it holds, such as "Footer".`,
+                    tag: this.localName,
+                });
+            }
+        });
+    }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
         return (slot?.assignedElements() ?? []).flatMap((one) => isList(one) ? [...one.children] : [one]);
@@ -69,17 +119,24 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     }
     connectedCallback() {
         super.connectedCallback();
+        connected.add(this);
+        this.addEventListener('toggle', this.handleToggle, true);
         if (this.hasUpdated) {
             this.watch();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        connected.delete(this);
+        this.removeEventListener('toggle', this.handleToggle, true);
+        this.opened.clear();
+        this.toggleState('open', false);
         this.current?.disconnect();
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watch();
+        this.auditTwin();
     }
     render() {
         return html `<nav part="nav" aria-label=${this.label}>

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { type HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
@@ -13,7 +13,10 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * place for focus to return to when the list closes.
  *
  * Your options stay in your light DOM and are slotted through into the listbox,
- * so the listbox looks through slots to find them.
+ * so the listbox looks through slots to find them. For a list too long to draw
+ * whole, set `items` instead: the list draws only the options in sight, as
+ * Listbox's `items` does, and the trigger, its keys and the form read the
+ * whole set.
  *
  * `Select` owns the value, passes it down to the listbox, and takes changes
  * back, so the value lives in one place.
@@ -102,6 +105,8 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate open - While the list is open.
+ * @cssstate placed-bottom - While the open list sits below the trigger.
+ * @cssstate placed-top - While the open list sits above the trigger, where there was no room below.
  */
 export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     /**
@@ -145,6 +150,20 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * anything a consumer sets.
      */
     focusable: boolean;
+    /**
+     * The options as data, for a list too long to draw whole: each a value,
+     * which is also its words, or a record with a `value`, a `label` and
+     * `disabled`. Passed to the list, which draws only the options in sight,
+     * as Listbox's `items` does. Set, the options you write as children are
+     * not read.
+     *
+     * The trigger shows the chosen options' labels, the letters and the Left
+     * and Right keys on the closed trigger choose over the whole set, and a
+     * chosen value whose option leaves `items` drops out of `value`.
+     * `value-content` is not called for `items`. Import the Option family as
+     * well, whose elements are drawn.
+     */
+    items: readonly DataOptionItem[] | undefined;
     /**
      * The open list's name where nothing names the Select, read by screen
      * readers. The list has no visible name.
@@ -270,8 +289,15 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * the commit creates the text node it needs.
      */
     private get display();
-    /** The chosen options, in the order they appear. None on a server or while hydrating. */
+    /** The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`. */
     private get chosenOptions();
+    /** `items` as the list reads them, built once per array. */
+    private data;
+    /**
+     * Every option the select reads, in order: the records of `items`, or the
+     * option elements among its children.
+     */
+    private get entries();
     /**
      * What the trigger shows, behind a seam: what `value-content` draws for the
      * chosen options, or their words, or the placeholder.