@fusion.dev/helix-headless 0.153.0 → 0.155.0

package/dist/color-picker/root/color-picker-root.js

@@ -15,7 +15,7 @@ import { areaAt, hueAt } from '../wheel.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
-const FORMATS = ['hex', 'rgb', 'hsl'];
+const FORMATS = ['hex', 'rgb', 'hsl', 'oklch'];
 const START = { alpha: 100, brightness: 100, hue: 0, saturation: 100 };
 let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
@@ -26,13 +26,16 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.blueLabel = 'Blue';
         this.brightnessLabel = 'Brightness';
         this.channelFields = false;
+        this.chromaLabel = 'Chroma';
         this.colorWords = {};
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
         this.formatLabel = 'Syntax: {format}. Change it.';
         this.greenLabel = 'Green';
+        this.hint = '';
         this.hueLabel = 'Hue';
+        this.label = '';
         this.lightnessLabel = 'Lightness';
         this.noEyedropper = false;
         this.noFormat = false;
@@ -50,6 +53,11 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.valueMissingMessage = 'Choose a color.';
         this.wheel = false;
         this.sampling = false;
+        this.handleNamingSlot = () => {
+            this.requestUpdate();
+        };
+        this.dragging = false;
+        this.picking = false;
         this.owned = false;
         this.announcesInput = true;
         this.unsettled = false;
@@ -132,6 +140,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 return;
             }
             this.dispatchEvent(new HelixSampleStartEvent());
+            this.picking = true;
             try {
                 const { sRGBHex } = await new Dropper().open();
                 const parsed = parseColor(sRGBHex);
@@ -142,6 +151,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             }
             catch {
             }
+            this.picking = false;
             this.dispatchEvent(new HelixSampleEndEvent());
         };
         this.handleGridPointer = (event) => {
@@ -150,12 +160,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             }
             const grid = event.currentTarget;
             if (event.type === 'pointerup' || event.type === 'pointercancel') {
+                this.dragging = false;
                 this.settle();
                 return;
             }
             if (event.type === 'pointerdown') {
+                this.dragging = true;
                 capturePointer(grid, event.pointerId);
-                this.partNamed('grid-saturation')?.focus();
+                this.partNamed('grid-saturation')?.focus({ preventScroll: true });
             }
             else if (!grid.hasPointerCapture(event.pointerId)) {
                 return;
@@ -181,7 +193,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             }
             if (event.type === 'pointerdown') {
                 capturePointer(wheel, event.pointerId);
-                this.partNamed('wheel-hue')?.focus();
+                this.partNamed('wheel-hue')?.focus({ preventScroll: true });
             }
             else if (!wheel.hasPointerCapture(event.pointerId)) {
                 return;
@@ -232,6 +244,23 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         };
     }
     static { this.words = 'helix-color-picker'; }
+    slottedIn(name) {
+        return this.knownChildren.filter((child) => child.slot === name);
+    }
+    get named() {
+        return (this.label ||
+            this.slottedIn('label')
+                .map((child) => child.textContent ?? '')
+                .join(' ')
+                .trim());
+    }
+    get hinted() {
+        return this.hint !== '' || this.slottedIn('hint').length > 0;
+    }
+    get describedBy() {
+        const ids = [this.hinted ? 'hint' : '', this.feedback === '' ? '' : 'feedback'].filter(Boolean);
+        return ids.length > 0 ? ids.join(' ') : nothing;
+    }
     settle() {
         if (this.unsettled) {
             this.unsettled = false;
@@ -299,6 +328,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         return {
             alpha: this.opacityLabel,
             blue: this.blueLabel,
+            brightness: this.brightnessLabel,
+            chroma: this.chromaLabel,
             green: this.greenLabel,
             hue: this.hueLabel,
             lightness: this.lightnessLabel,
@@ -327,10 +358,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           <input
             part="field-input"
             type="number"
-            inputmode="numeric"
+            inputmode=${field.step < 1 ? 'decimal' : 'numeric'}
             min=${field.min}
             max=${field.max}
-            step="1"
+            step=${field.step}
             .value=${live(String(field.value))}
             ?disabled=${this.isDisabled}
             ?readonly=${this.readOnly}
@@ -350,7 +381,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
       exportparts="control: channel-control, feedback: channel-feedback, field: channel-field,
         hint: channel-hint, label: channel-label, marker: channel-marker,
         marker-label: channel-marker-label, markers: channel-markers, output: channel-output,
-        tooltip: channel-tooltip, tooltips: channel-tooltips"
+        thumb: channel-thumb, thumbs: channel-thumbs, tooltip: channel-tooltip,
+        tooltips: channel-tooltips"
       data-channel=${channel}
       aria-invalid=${this.marked ? 'true' : nothing}
       label=${label}
@@ -391,10 +423,18 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     willUpdate(changed) {
         super.willUpdate(changed);
         const outside = [...(this.internals.labels ?? [])];
-        hostAria(this.internals, { labelledBy: outside, role: outside.length > 0 ? 'group' : '' });
+        const named = this.named;
+        hostAria(this.internals, {
+            label: outside.length > 0 ? '' : named,
+            labelledBy: outside,
+            role: outside.length > 0 || named !== '' ? 'group' : '',
+        });
         if (!this.hydrating) {
             this.sampling = 'EyeDropper' in globalThis;
         }
+        this.toggleState('copied', this.copier.copied);
+        this.toggleState('dragging', this.dragging);
+        this.toggleState('sampling', this.picking);
     }
     renderTools() {
         return html `<${this.tag('button-group')} part="actions" label=${this.toolsLabel}>
@@ -471,7 +511,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         const reversed = square('brightness');
         const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, locale);
         const hueSaid = (value) => new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format([String(value), hue]);
-        const owner = this.getAttribute('aria-label')?.trim();
+        const owner = this.getAttribute('aria-label')?.trim() || this.named;
         const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         const area = html `<div
         part="grid"
@@ -488,7 +528,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           min="0"
           max="100"
           aria-label=${axisName(this.saturationLabel)}
-          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+          aria-describedby=${this.describedBy}
           aria-valuetext=${both}
           aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.saturation)}
@@ -505,7 +545,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           tabindex="-1"
           style="writing-mode: vertical-lr; direction: rtl"
           aria-label=${axisName(this.brightnessLabel)}
-          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+          aria-describedby=${this.describedBy}
           aria-valuetext=${reversed}
           aria-invalid=${this.marked ? 'true' : nothing}
           .value=${String(color.brightness)}
@@ -514,7 +554,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           @change=${() => this.settle()}
         />
       </div>`;
-        return html `${this.wheel
+        return html `<div part="label" ?hidden=${this.named === ''}>
+        <slot name="label" @slotchange=${this.handleNamingSlot}>${this.label}</slot>
+      </div>
+      ${this.wheel
             ? html `<div
             part="wheel"
             style="--color-picker-hue: ${color.hue}"
@@ -531,7 +574,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
               max="360"
               dir="ltr"
               aria-label=${axisName(this.hueLabel)}
-              aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+              aria-describedby=${this.describedBy}
               aria-valuetext=${hueSaid(color.hue)}
               aria-invalid=${this.marked ? 'true' : nothing}
               .value=${String(color.hue)}
@@ -574,7 +617,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 part="value"
                 type="text"
                 aria-label=${this.valueLabel}
-                aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+                aria-describedby=${this.describedBy}
                 aria-invalid=${this.marked ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
@@ -591,6 +634,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
       </div>
 
       ${this.presets.length === 0 ? nothing : this.renderSwatches(painted)}
+      <div part="hint" id="hint" ?hidden=${!this.hinted}>
+        <slot name="hint" @slotchange=${this.handleNamingSlot}>${this.hint}</slot>
+      </div>
       ${this.renderPickerFeedback()}`;
     }
 };
@@ -615,6 +661,10 @@ __decorate([
 __decorate([
     property({ attribute: 'channel-fields', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "channelFields", void 0);
+__decorate([
+    words,
+    property({ attribute: 'chroma-label' })
+], HelixHeadlessColorPicker.prototype, "chromaLabel", void 0);
 __decorate([
     property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
@@ -641,10 +691,16 @@ __decorate([
     words,
     property({ attribute: 'green-label' })
 ], HelixHeadlessColorPicker.prototype, "greenLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "hint", void 0);
 __decorate([
     words,
     property({ attribute: 'hue-label' })
 ], HelixHeadlessColorPicker.prototype, "hueLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "label", void 0);
 __decorate([
     words,
     property({ attribute: 'lightness-label' })
@@ -711,6 +767,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "swatchAt", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "dragging", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "picking", void 0);
 HelixHeadlessColorPicker = __decorate([
     customElement('helix-headless-color-picker')
 ], HelixHeadlessColorPicker);

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

@@ -72,6 +72,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-day-outside - A day from a neighboring month. Applied with `picker-day`.
  * @csspart picker-day-selected - The chosen day, or either end of a chosen range. Applied with `picker-day`.
  * @csspart picker-day-today - Today. Applied with `picker-day`.
+ * @csspart picker-day-weekend - A day of the weekend where the calendar's language is spoken, beside `picker-day`.
  * @csspart picker-feedback - The calendar's own message, under it, while the calendar's `feedback` is set.
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.

package/dist/date-input/root/date-input-root.js

@@ -218,7 +218,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
       exportparts="cell: picker-cell, cell-range-end: picker-cell-range-end,
         cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
         day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
-        day-selected: picker-day-selected, day-today: picker-day-today, feedback: picker-feedback, grid: picker-grid,
+        day-selected: picker-day-selected, day-today: picker-day-today, day-weekend: picker-day-weekend,
+        feedback: picker-feedback, grid: picker-grid,
         header: picker-header, heading: picker-heading, heading-button: picker-heading-button,
         month: picker-month, months: picker-months, next: picker-next,
         next-mark: picker-next-mark, period: picker-period, period-current: picker-period-current,

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' })