@fusion.dev/helix-core 0.158.0 → 0.160.0

package/dist/index.d.ts

@@ -46,7 +46,7 @@ export { MixinControllerValue, type MixinControllerValueInterface, } from './mix
 export { type DismissibleElement, MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.js';
 export { MixinField, type MixinFieldInterface } from './mixins/mixin-field/mixin-field.js';
 export { MixinPickerEditing, type MixinPickerEditingInterface, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
-export { MixinPickerFeedback, type MixinPickerFeedbackInterface, } from './mixins/mixin-picker-feedback/mixin-picker-feedback.js';
+export { MixinPickerFeedback, type MixinPickerFeedbackInterface, type PickerFailure, } from './mixins/mixin-picker-feedback/mixin-picker-feedback.js';
 export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinSegmentedField, type MixinSegmentedFieldInterface, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
 export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
@@ -56,7 +56,7 @@ export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { assignSlots } from './utils/assign-slots/assign-slots.js';
 export { type DrawAutofillOptions, drawAutofill, } from './utils/autofill-select/autofill-select.js';
-export { addDays, addMonths, type Barring, barredBy, type CalendarView, calendarLocale, type DateCalendar, localToday, MONTH_CALENDARS, type MonthCalendar, type MonthSystem, monthOf, monthOut, monthSystem, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
+export { addDays, addMonths, type Barring, barredBy, type CalendarParts, type CalendarView, calendarLocale, type DateCalendar, localToday, MONTH_CALENDARS, type MonthCalendar, type MonthSystem, monthOf, monthOut, monthSystem, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
 export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
@@ -72,7 +72,7 @@ export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toOklch, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
 export { type DataOption, type DataOptionItem, dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
-export { segmentName } from './utils/date-segments/date-segments.js';
+export { readWrittenDate, readWrittenTime, segmentName, } from './utils/date-segments/date-segments.js';
 export { type DrawDismissOptions, drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip, type ReadingCursor } from './utils/draw-tooltip/draw-tooltip.js';

package/dist/index.js

@@ -72,7 +72,7 @@ export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { formatColor, parseColor, toCss, toHsl, toOklch, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
 export { dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
-export { segmentName } from './utils/date-segments/date-segments.js';
+export { readWrittenDate, readWrittenTime, segmentName, } from './utils/date-segments/date-segments.js';
 export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';

package/dist/mixins/mixin-field/mixin-field.js

@@ -151,7 +151,8 @@ export const MixinField = (Base) => {
             super.willUpdate(changed);
             this.shownFeedback = this.resolvedFeedback;
             this.toggleState('invalid', this.shownFeedback !== '');
-            this.internals.ariaInvalid = this.shownFeedback === '' ? null : 'true';
+            this.internals.ariaInvalid =
+                this.shownFeedback !== '' ? 'true' : this.validates ? 'false' : null;
         }
         formResetCallback() {
             ;

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.d.ts

@@ -19,11 +19,23 @@ export declare class MixinPickerFeedbackInterface {
      * picker and says why.
      */
     invalid: boolean;
-    /** Whether a reader is told the answer is wrong: `invalid`, or `feedback`. */
+    /**
+     * Whether a reader is told the answer is wrong: `invalid`, `feedback`, a
+     * held answer the picker refuses, or a missing answer once the reader has
+     * committed one or a form has refused the picker.
+     */
     protected get marked(): boolean;
+    /**
+     * What the picker's own validation finds: `missing` for a required picker
+     * with nothing chosen, `refused` for an answer it holds and refuses, or
+     * nothing. Read in `willUpdate`, so a picker answers it from its properties.
+     */
+    protected get failure(): PickerFailure | undefined;
     /** The `feedback` line, or nothing while there is none. */
     protected renderPickerFeedback(): TemplateResult | typeof nothing;
 }
+/** What a picker's own validation finds, which `marked` reads. */
+export type PickerFailure = 'missing' | 'refused';
 /**
  * `feedback` and `invalid` for a picker that stands on its own as a form
  * control: Color Picker, Date Picker and Time Picker.

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { hostAria } from '../../utils/host-aria/host-aria.js';
 export const MixinPickerFeedback = (Base) => {
     class PickerFeedbackElement extends Base {
@@ -13,16 +13,36 @@ export const MixinPickerFeedback = (Base) => {
             super(...arguments);
             this.feedback = '';
             this.invalid = false;
+            this.touched = false;
         }
         get marked() {
-            return this.invalid || this.feedback !== '';
+            if (this.invalid || this.feedback !== '') {
+                return true;
+            }
+            const failure = this.failure;
+            return failure === 'refused' || (failure === 'missing' && this.touched);
+        }
+        get failure() {
+            return undefined;
+        }
+        formResetCallback() {
+            super.formResetCallback();
+            this.touched = false;
+        }
+        firstUpdated(changed) {
+            super.firstUpdated(changed);
+            const touch = () => {
+                this.touched = true;
+            };
+            this.addEventListener('invalid', touch);
+            this.addEventListener('change', touch);
         }
         get validityFeedback() {
             return this.feedback;
         }
         willUpdate(changed) {
             super.willUpdate(changed);
-            this.internals.ariaInvalid = this.marked ? 'true' : null;
+            this.internals.ariaInvalid = this.marked ? 'true' : 'false';
             this.toggleState('invalid', this.marked);
         }
         updated(changed) {
@@ -42,5 +62,8 @@ export const MixinPickerFeedback = (Base) => {
     __decorate([
         property({ reflect: true, type: Boolean })
     ], PickerFeedbackElement.prototype, "invalid", void 0);
+    __decorate([
+        state()
+    ], PickerFeedbackElement.prototype, "touched", void 0);
     return PickerFeedbackElement;
 };

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.d.ts

@@ -1,5 +1,6 @@
 import { type TemplateResult } from 'lit';
 import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+import type { MonthSystem } from '../../utils/calendar/calendar.js';
 import { type SegmentedKind, type SegmentOptions } from '../../utils/date-segments/date-segments.js';
 import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
 import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
@@ -34,8 +35,17 @@ export declare class MixinSegmentedFieldInterface {
      * time, in place of a line of text.
      */
     segmented: boolean;
+    /**
+     * What a screen reader hears before the segments of a range's first date or
+     * time, after each segment's own name.
+     */
+    rangeStartLabel: string;
+    /** What a screen reader hears before the segments of a range's second date or time. */
+    rangeEndLabel: string;
     /** Whether the segments are drawn: `segmented`, where the family can hold them. */
     protected get segmentsShown(): boolean;
+    /** How many rows of segments the value takes: two for a range, one otherwise. */
+    protected get segmentGroups(): number;
     /** The row of segments, the group a description is carried to, or `null` while none is drawn. */
     protected get segmentGroup(): HTMLElement | null;
     /** Whether this family can show segments in its current shape. */
@@ -46,6 +56,8 @@ export declare class MixinSegmentedFieldInterface {
     protected get segmentLocale(): string;
     /** The clock and the seconds a time is laid out with. */
     protected get segmentOptions(): SegmentOptions;
+    /** The calendar a date's parts are counted in, or `undefined` for the Gregorian calendar. */
+    protected get segmentSystem(): MonthSystem | undefined;
     /** The row of segments, in the locale's order, with what it writes between them. */
     protected renderSegments(): TemplateResult;
 }

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.js

@@ -18,18 +18,23 @@ export const MixinSegmentedField = (Base) => {
             this.emptyMessage = '{kind, select, date {Enter a date.} other {Enter a time.}}';
             this.emptySegmentLabel = 'Empty';
             this.incompleteMessage = '{kind, select, date {Enter a whole date.} other {Enter a whole time.}}';
+            this.rangeEndLabel = 'End';
+            this.rangeStartLabel = 'Start';
             this.segmented = false;
-            this.parts = {};
+            this.parts = [{}];
             this.typed = '';
             this.own = false;
             this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
             this.entered = undefined;
+            this.opener = undefined;
             this.handleSegmentKeydown = (event) => {
                 const element = event.currentTarget;
                 const kind = element.dataset.segment;
+                const row = Number(element.dataset.row ?? 0);
                 const twelve = isTwelveHourLayout(this.layout);
                 if (event.key === 'ArrowDown' && event.altKey) {
                     event.preventDefault();
+                    this.opener = element;
                     this.handleTriggerClick();
                     return;
                 }
@@ -57,14 +62,15 @@ export const MixinSegmentedField = (Base) => {
                 const edit = segmentKey(event.key, {
                     kind,
                     locale: this.segmentLocale,
-                    segments: this.parts,
+                    segments: this.parts[row] ?? {},
+                    system: this.segmentSystem,
                     twelve,
                     typed: this.typed,
                 });
                 if (edit) {
                     event.preventDefault();
                     this.typed = edit.typed;
-                    this.take(edit.segments);
+                    this.take(row, edit.segments);
                     if (edit.advance) {
                         this.moveFocus(element, 1);
                     }
@@ -96,12 +102,34 @@ export const MixinSegmentedField = (Base) => {
             };
         }
         static { this.words = ''; }
+        returnFocus() {
+            const opener = this.opener;
+            this.opener = undefined;
+            if (opener?.isConnected && this.segmentsShown) {
+                this.returning = true;
+                opener.focus();
+                this.returning = false;
+                return;
+            }
+            super.returnFocus();
+        }
         get segmentable() {
             return true;
         }
         get segmentsShown() {
             return this.segmented && this.segmentable;
         }
+        get segmentGroups() {
+            return 1;
+        }
+        joined(rows) {
+            const values = rows.map((one) => segmentsValue(this.segmentedKind, one, this.layout, this.segmentSystem));
+            return values.some((one) => one === '') ? '' : values.join(',');
+        }
+        rowsOf(value) {
+            const values = this.segmentGroups > 1 ? value.split(',') : [value];
+            return Array.from({ length: this.segmentGroups }, (_, row) => segmentsOf(this.segmentedKind, (values[row] ?? '').trim(), this.segmentSystem));
+        }
         get segmentedKind() {
             return 'date';
         }
@@ -111,6 +139,9 @@ export const MixinSegmentedField = (Base) => {
         get segmentOptions() {
             return {};
         }
+        get segmentSystem() {
+            return undefined;
+        }
         get layout() {
             return segmentLayout(this.segmentedKind, this.segmentLocale, this.segmentOptions);
         }
@@ -126,9 +157,9 @@ export const MixinSegmentedField = (Base) => {
         get segmentElements() {
             return [...(this.renderRoot?.querySelectorAll('[part~="segment"]') ?? [])];
         }
-        take(next) {
-            this.parts = next;
-            const value = segmentsValue(this.segmentedKind, next, this.layout);
+        take(row, next) {
+            this.parts = this.parts.map((one, index) => (index === row ? next : one));
+            const value = this.joined(this.parts);
             if (value === this.value) {
                 this.sync();
                 return;
@@ -136,7 +167,7 @@ export const MixinSegmentedField = (Base) => {
             this.own = true;
             if (!this.requestValue(value)) {
                 this.own = false;
-                this.parts = segmentsOf(this.segmentedKind, this.value);
+                this.parts = this.rowsOf(this.value);
             }
         }
         moveFocus(from, by) {
@@ -149,13 +180,13 @@ export const MixinSegmentedField = (Base) => {
             this.own = false;
             if (!own &&
                 this.segmentsShown &&
-                segmentsValue(this.segmentedKind, this.parts, this.layout) !== this.value) {
-                this.parts = segmentsOf(this.segmentedKind, this.value);
+                (this.parts.length !== this.segmentGroups || this.joined(this.parts) !== this.value)) {
+                this.parts = this.rowsOf(this.value);
             }
         }
         formResetCallback() {
             super.formResetCallback();
-            this.parts = {};
+            this.parts = this.rowsOf('');
             this.typed = '';
         }
         connectedCallback() {
@@ -175,7 +206,9 @@ export const MixinSegmentedField = (Base) => {
                 return;
             }
             const anchor = this.anchor ?? undefined;
-            const partial = isPartial(this.segmentedKind, this.parts, this.layout);
+            const partial = this.parts.some((one) => isPartial(this.segmentedKind, one, this.layout, this.segmentSystem)) ||
+                (this.value === '' &&
+                    this.parts.some((one) => Object.values(one).some((part) => part !== undefined)));
             const fault = verdictFlags(this.validate());
             if (partial) {
                 this.internals.setValidity({ badInput: true }, this.badInputMessage ||
@@ -197,51 +230,67 @@ export const MixinSegmentedField = (Base) => {
             const layout = this.layout;
             const twelve = isTwelveHourLayout(layout);
             const locale = this.segmentLocale;
-            return html `<div
-        part="segments"
-        id=${this.controlId}
-        role="group"
-        aria-labelledby=${this.labeled ? this.labelId : nothing}
-        aria-describedby=${this.describedBy ?? nothing}
-        aria-invalid=${this.invalidity ?? nothing}
-        @focusin=${this.handleSegmentsFocusIn}
-        @focusout=${this.handleSegmentsFocusOut}
-        @keypress=${this.handleKeypress}
-      >
-        ${layout.map((slot) => {
-                if ('literal' in slot) {
-                    return html `<span part="literal" aria-hidden="true">${slot.literal}</span>`;
-                }
-                const kind = slot.kind;
-                const shown = shownValue(kind, this.parts, twelve);
-                const { max, min } = segmentRange(kind, this.parts, twelve);
-                const text = segmentText(kind, this.parts, twelve, locale);
-                const empty = shown === undefined;
-                const id = `${this.controlId}-${kind}`;
-                const editable = !this.isDisabled && !this.readOnly;
-                const spin = !this.touchApple;
-                return html `<span
+            const system = this.segmentSystem;
+            const rows = this.segmentGroups;
+            const row = (index) => {
+                const parts = this.parts[index] ?? {};
+                const prefix = index === 0 ? this.controlId : `${this.controlId}-end`;
+                const rowName = rows > 1 ? `${prefix}-row` : '';
+                return html `${rows > 1
+                    ? html `<span id=${rowName} hidden
+                >${index === 0 ? this.rangeStartLabel : this.rangeEndLabel}</span
+              >`
+                    : nothing}${layout.map((slot) => {
+                    if ('literal' in slot) {
+                        return html `<span part="literal" aria-hidden="true">${slot.literal}</span>`;
+                    }
+                    const kind = slot.kind;
+                    const shown = shownValue(kind, parts, twelve);
+                    const { max, min } = segmentRange(kind, parts, twelve, system);
+                    const text = segmentText(kind, parts, twelve, locale);
+                    const empty = shown === undefined;
+                    const id = `${prefix}-${kind}`;
+                    const editable = !this.isDisabled && !this.readOnly;
+                    const spin = !this.touchApple;
+                    const named = [id, rowName, this.labeled ? this.labelId : ''].filter(Boolean).join(' ');
+                    return html `<span
             part="segment${empty ? ' segment-placeholder' : ''}"
             id=${id}
+            data-row=${rows > 1 ? index : nothing}
             data-segment=${kind}
             role=${spin ? 'spinbutton' : 'textbox'}
             tabindex=${this.isDisabled ? '-1' : '0'}
             inputmode=${kind === 'dayPeriod' ? nothing : 'numeric'}
             enterkeyhint=${editable ? 'next' : nothing}
-            aria-label=${this.labeled ? `${segmentName(kind, locale)},` : segmentName(kind, locale)}
-            aria-labelledby=${this.labeled ? `${id} ${this.labelId}` : nothing}
+            aria-label=${named === id ? segmentName(kind, locale) : `${segmentName(kind, locale)},`}
+            aria-labelledby=${named === id ? nothing : named}
             aria-invalid=${this.invalidity ?? nothing}
             aria-valuemin=${spin ? min : nothing}
             aria-valuemax=${spin ? max : nothing}
             aria-valuenow=${spin ? (shown ?? nothing) : nothing}
-            aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, this.parts, twelve, locale)) : nothing}
+            aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, parts, twelve, locale, system)) : nothing}
             aria-disabled=${this.isDisabled ? 'true' : nothing}
             aria-required=${this.required ? 'true' : nothing}
             aria-readonly=${this.readOnly ? 'true' : nothing}
             @keydown=${this.handleSegmentKeydown}
             >${text}</span
           >`;
-            })}
+                })}`;
+            };
+            return html `<div
+        part="segments"
+        id=${this.controlId}
+        role="group"
+        aria-labelledby=${this.labeled ? this.labelId : nothing}
+        aria-describedby=${this.describedBy ?? nothing}
+        aria-invalid=${this.invalidity ?? nothing}
+        @focusin=${this.handleSegmentsFocusIn}
+        @focusout=${this.handleSegmentsFocusOut}
+        @keypress=${this.handleKeypress}
+      >
+        ${Array.from({ length: rows }, (_, index) => index === 0
+                ? row(0)
+                : html `<span part="literal range-separator" aria-hidden="true"> – </span>${row(index)}`)}
       </div>`;
         }
     }
@@ -257,6 +306,14 @@ export const MixinSegmentedField = (Base) => {
         words,
         property({ attribute: 'incomplete-message' })
     ], SegmentedFieldElement.prototype, "incompleteMessage", void 0);
+    __decorate([
+        words,
+        property({ attribute: 'range-end-label' })
+    ], SegmentedFieldElement.prototype, "rangeEndLabel", void 0);
+    __decorate([
+        words,
+        property({ attribute: 'range-start-label' })
+    ], SegmentedFieldElement.prototype, "rangeStartLabel", void 0);
     __decorate([
         property({ type: Boolean })
     ], SegmentedFieldElement.prototype, "segmented", void 0);

package/dist/utils/calendar/calendar.d.ts

@@ -44,11 +44,13 @@ export type DateCalendar = 'buddhist' | 'gregory' | 'iso8601' | 'japanese' | 'ro
  * The language tag a date family formats with: `locale`, with the calendar it
  * writes dates in.
  *
- * That is `calendar` where it is one of the five `DateCalendar` names, then
- * the locale's own calendar where its months are the Gregorian months, then
- * `gregory`. **A calendar with months of its own, such as `persian` for `fa-IR`
- * or `islamic-umalqura` for `ar-SA` in some engines, is written as `gregory`.**
- * The arithmetic is Gregorian, so a heading in Mehr 1405 over the days of
+ * That is `calendar` where it names a `DateCalendar` or a `MonthCalendar`,
+ * then the locale's own calendar where its months are the Gregorian months,
+ * then `gregory`. **A calendar with months of its own that only the locale
+ * names, such as `persian` for `fa-IR` or `islamic-umalqura` for `ar-SA` in
+ * some engines, is written as `gregory`**, so a page that asked for no other
+ * calendar keeps the Gregorian dates it had. Before the date families drew
+ * such a calendar's own months, a heading in Mehr 1405 over the days of
  * October 2026 named a month the grid did not show.
  *
  * `locale` unchanged where nothing moves, so a page in a Gregorian locale
@@ -69,34 +71,55 @@ export declare const sameMonth: (left: Date, right: Date) => boolean;
  */
 export declare const addMonths: (date: Date, months: number) => Date;
 /**
- * The calendars Date Picker draws with months of their own, when `calendar`
- * names one: the months of the year in Iran, Israel, Saudi Arabia, Ethiopia,
- * Egypt's Coptic church, and India's national calendar. React Aria's
- * `createCalendar` offers the same set.
+ * The calendars the date families draw with months of their own, when
+ * `calendar` names one: the months of the year in Iran, Israel, the Islamic
+ * calendars, Ethiopia, Egypt's Coptic church, India's national calendar, and
+ * the Chinese and Korean lunisolar calendars. Every calendar `Intl` knows
+ * whose months are not the Gregorian months.
  */
-export type MonthCalendar = 'coptic' | 'ethiopic' | 'hebrew' | 'indian' | 'islamic-civil' | 'islamic-umalqura' | 'persian';
+export type MonthCalendar = 'chinese' | 'coptic' | 'dangi' | 'ethioaa' | 'ethiopic' | 'hebrew' | 'indian' | 'islamic' | 'islamic-civil' | 'islamic-rgsa' | 'islamic-tbla' | 'islamic-umalqura' | 'persian';
 /** The `MonthCalendar` names, for a check at run time. */
 export declare const MONTH_CALENDARS: readonly string[];
+/** A date as a calendar counts it: its year, its month from 1, and its day from 1. */
+export interface CalendarParts {
+    day: number;
+    month: number;
+    year: number;
+}
 /**
- * The months of a calendar, as Date Picker pages through them. Every date is
- * still a Gregorian `Date` at midnight UTC, and a month is the run of days
- * from its first.
+ * The days, months, and years of a calendar, as the date families page and
+ * edit them. Every date is still a Gregorian `Date` at midnight UTC, and a
+ * month is the run of days from its first.
  */
 export interface MonthSystem {
     /** A date some months away, its day kept where the month is long enough. */
     add(date: Date, months: number): Date;
+    /**
+     * A date some years away: the month of the same name where the year has
+     * one, so Nisan stays Nisan across a Hebrew leap year, and the day kept
+     * where the month is long enough.
+     */
+    addYears(date: Date, years: number): Date;
     /** The day of its month, from 1. */
     day(date: Date): number;
+    /** How many days a month of a year has. */
+    days(year: number, month: number): number;
+    /** The date of a year, month, and day, the month and the day kept inside the year and the month. */
+    from(year: number, month: number, day: number): Date;
     /** The month a date is in, as `month` writes it: `YYYY-MM`, or its first day where the months are the calendar's own. */
     key(date: Date): string;
+    /** How many months a year has: 12, or 13 in a Hebrew leap year, in Ethiopia, and in a Chinese leap year. */
+    months(year: number): number;
+    /** A date's year, month, and day, as the calendar counts them. */
+    parts(date: Date): CalendarParts;
     /** Whether two dates fall in one month. */
     same(left: Date, right: Date): boolean;
     /** The first day of the month a date is in. */
     start(date: Date): Date;
 }
 /**
- * The months a calendar pages through: its own for a `MonthCalendar` name,
- * and the Gregorian months for every other.
+ * The days, months, and years a calendar pages through: its own for a
+ * `MonthCalendar` name, and the Gregorian months for every other.
  */
 export declare const monthSystem: (calendar?: string) => MonthSystem;
 /** What bars a date, besides `min` and `max`. */
@@ -138,9 +161,9 @@ export declare const yearPageOf: (year: number) => number;
  */
 export declare const periodMove: (key: string, at: number, along: number) => number | null;
 /** Whether a month, as its first day, lies wholly outside `min` and `max`, either of which may be empty. */
-export declare const monthOut: (first: Date, min: string, max: string) => boolean;
+export declare const monthOut: (first: Date, min: string, max: string, system?: MonthSystem) => boolean;
 /** Whether a year lies wholly outside `min` and `max`, either of which may be empty. */
-export declare const yearOut: (year: number, min: string, max: string) => boolean;
+export declare const yearOut: (year: number, min: string, max: string, system?: MonthSystem) => boolean;
 /** One month or year in the months or the years view. */
 export interface PeriodCell {
     /** The month's index in its year, or the year. */
@@ -164,16 +187,19 @@ export interface PeriodPage {
     page: number;
     /** The first of the month the calendar shows. */
     shown: Date;
+    /** The calendar the months and the years are counted in, Gregorian where none is given. */
+    system?: MonthSystem | undefined;
     /** Today, as `YYYY-MM-DD`. */
     today: string;
     /** Which view: `month` for the months of a year, `year` for a page of years. */
     view: 'month' | 'year';
 }
 /**
- * The twelve cells of the months or the years view, in reading order: the
- * months of `page`, or the page of years that holds it.
+ * The cells of the months or the years view, in reading order: the months of
+ * `page`, twelve or the thirteen a calendar's year may have, or the twelve
+ * years on the page that holds it.
  */
-export declare const periodCells: ({ max, min, page, shown, today, view }: PeriodPage) => PeriodCell[];
+export declare const periodCells: ({ max, min, page, shown, system, today, view, }: PeriodPage) => PeriodCell[];
 /**
  * Where a key takes the tab stop in the months or the years, or `null` for a
  * key the grid leaves alone.
@@ -181,9 +207,11 @@ export declare const periodCells: ({ max, min, page, shown, today, view }: Perio
  * `stop` is the month's index or the year the stop is on, `year` the year the
  * months view shows, and `along` which way the inline keys go, as
  * `periodMove` takes it. A move off the months of one year lands in the next
- * or the last, and a move off a page of years turns the page.
+ * or the last, and a move off a page of years turns the page. `months` says
+ * how many months a year has, twelve where it is not given. The page keys
+ * move the months a year, to the month in the same place.
  */
-export declare const periodKey: (view: 'month' | 'year', stop: number, year: number, key: string, along: number) => {
+export declare const periodKey: (view: 'month' | 'year', stop: number, year: number, key: string, along: number, months?: (year: number) => number) => {
     focus: number;
     pageYear: number;
 } | null;