material 1.0.4 → 3.0.0-next.1

package/dist/components/datepicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as createDatePicker } from "./datepicker.js";
+export type { DatePickerConfig, DatePickerComponent, DatePickerEvents, DatePickerValue, DatePickerValueOf, DatePickerInput, DatePickerChangePayload, DatePickerVisibilityPayload, DatePickerTapPayload, DatePickerSwipePayload, DatePickerVariant, DatePickerView, DatePickerSelectionMode, CalendarAPI, } from "./types.js";

package/dist/components/datepicker/index.js

@@ -0,0 +1 @@
+export { default, default as createDatePicker } from "./datepicker.js";

package/dist/components/datepicker/render.d.ts

@@ -0,0 +1,3 @@
+import { type DatePickerState } from "./types.js";
+/** Rendering is passive: one delegated listener owns each picker, including rerenders. */
+export declare function renderCalendar(state: DatePickerState): HTMLElement;

package/dist/components/datepicker/render.js

@@ -0,0 +1,160 @@
+import { DATEPICKER_ICONS } from "./constants.js";
+import { setHTML } from "../../core/dom/html.js";
+import { createElement } from "../../core/dom/create.js";
+import { MONTH_NAMES, MONTH_NAMES_SHORT } from "./types.js";
+import { formatDate, generateCalendarDates, isSameDay, parseDate } from "./utils.js";
+export function renderCalendar(state) {
+    const cls = (name) => `${state.prefix}-datepicker__${name}`;
+    const make = (tag, name, text, attributes) => createElement({ tag, className: cls(name), text, attributes });
+    const button = (name, text, action, label = text) => {
+        const element = make("button", name, text, { type: "button", "data-action": action, "aria-label": label });
+        const icon = name === "close" ? DATEPICKER_ICONS.close : action === "toggle-mode" ? (state.inputMode ? DATEPICKER_ICONS.calendar : DATEPICKER_ICONS.edit) : action === "prev" ? DATEPICKER_ICONS.previous : action === "next" ? DATEPICKER_ICONS.next : null;
+        if (icon)
+            setHTML(element, icon);
+        return element;
+    };
+    const monthGrid = (year, month, current, list = false) => {
+        const grid = make("div", "days", undefined, { role: "grid", "aria-label": `${MONTH_NAMES[month]} ${year}`, "aria-describedby": `${state.id}-keyboard` });
+        const weekdays = make("div", "weekdays", undefined, { role: "row" });
+        if (list)
+            weekdays.classList.add(cls("sr-only"));
+        for (const name of ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"])
+            weekdays.append(make("span", "weekday", name[0], { role: "columnheader", "aria-label": name }));
+        grid.append(weekdays);
+        const dates = generateCalendarDates(year, month, state.selectedDate, state.rangeEndDate, state.minDate, state.maxDate);
+        const focus = dates.find(item => isSameDay(item.date, state.focusedDate) && state.isAllowed(item.date)) ?? dates.find(item => item.isCurrentMonth && state.isAllowed(item.date));
+        for (let week = 0; week < 6; week++) {
+            const row = make("div", "week", undefined, { role: "row" });
+            for (const item of dates.slice(week * 7, week * 7 + 7)) {
+                const selected = !!state.selectedDate && (isSameDay(item.date, state.selectedDate) || !!state.rangeEndDate && isSameDay(item.date, state.rangeEndDate));
+                const inRange = item.isCurrentMonth && !!state.selectedDate && !!state.rangeEndDate && item.date >= state.selectedDate && item.date <= state.rangeEndDate;
+                if (list && !item.isCurrentMonth) {
+                    row.append(make("div", "cell", undefined, { role: "gridcell" }));
+                    continue;
+                }
+                const cell = make("div", "cell", undefined, { role: "gridcell", "aria-selected": String(selected || inRange) });
+                if (inRange)
+                    cell.classList.add(cls("cell--range"));
+                if (item.isCurrentMonth && state.selectedDate && isSameDay(item.date, state.selectedDate))
+                    cell.classList.add(cls("cell--range-start"));
+                if (item.isCurrentMonth && state.rangeEndDate && isSameDay(item.date, state.rangeEndDate))
+                    cell.classList.add(cls("cell--range-end"));
+                const special = state.specialDates.find(special => { const date = parseDate(special.date); return date && isSameDay(date, item.date); });
+                const day = make("button", "day", String(item.day), {
+                    type: "button", "data-date": formatDate(item.date, "YYYY-MM-DD"), "aria-label": item.date.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }),
+                    "aria-pressed": String(selected), disabled: !state.isAllowed(item.date), tabindex: current && item === focus ? "0" : "-1",
+                });
+                if (!state.isAllowed(item.date))
+                    day.classList.add(cls("day--disabled"));
+                if (item.isToday) {
+                    day.classList.add(cls("day--today"));
+                    day.setAttribute("aria-current", "date");
+                }
+                if (!item.isCurrentMonth)
+                    day.classList.add(cls("day--outside"));
+                if (selected)
+                    day.classList.add(cls("day--selected"));
+                if (special?.highlight)
+                    day.classList.add(cls("day--highlight"));
+                if (special?.tooltip)
+                    day.title = special.tooltip;
+                cell.append(day);
+                row.append(cell);
+            }
+            grid.append(row);
+        }
+        return grid;
+    };
+    const content = make("div", "content");
+    const modal = state.variant !== "docked";
+    const fullscreen = state.variant === "fullscreen";
+    const confirmDisabled = !state.selectedDate || !state.isAllowed(state.selectedDate) || state.selectionMode === "range" && (!state.rangeEndDate || !state.isAllowed(state.rangeEndDate));
+    if (modal) {
+        const header = make("div", "modal-header");
+        if (fullscreen) {
+            const save = button("save", "Save", "confirm");
+            save.disabled = confirmDisabled;
+            header.append(button("close", "", "cancel", "Close"), save);
+        }
+        header.append(make("div", "title", state.label, { id: `${state.id}-title` }));
+        const pattern = fullscreen ? "MMM D" : "MMM D, YYYY";
+        const headline = state.selectedDate ? formatDate(state.selectedDate, pattern) : state.selectionMode === "range" ? "Select range" : "Select date";
+        header.append(make("div", "headline", state.selectionMode === "range" && state.rangeEndDate ? `${headline} – ${formatDate(state.rangeEndDate, pattern)}` : headline));
+        header.append(button("mode-toggle", state.inputMode ? "▦" : "✎", "toggle-mode", state.inputMode ? "Switch to calendar" : "Switch to date input"));
+        content.append(header);
+    }
+    if (state.inputMode) {
+        const fields = make("div", "fields");
+        for (const endpoint of state.selectionMode === "range" ? ["start", "end"] : ["start"]) {
+            const wrapper = make("div", "field");
+            const id = `${state.id}-${endpoint}`;
+            wrapper.append(make("label", "label", state.selectionMode === "range" ? (endpoint === "start" ? "Start date" : "End date") : "Date", { for: id }));
+            const input = make("input", "input", undefined, { id, type: "text", autocomplete: "off", placeholder: state.dateFormat, "data-entry": endpoint, "aria-describedby": `${id}-help ${id}-error` });
+            input.value = formatDate(endpoint === "start" ? state.selectedDate : state.rangeEndDate, state.dateFormat);
+            wrapper.append(input, make("div", "help", state.dateFormat, { id: `${id}-help` }), make("div", "error", "", { id: `${id}-error`, "aria-live": "polite" }));
+            fields.append(wrapper);
+        }
+        content.append(fields);
+    }
+    else if (fullscreen) {
+        const weekdays = make("div", "weekdays", undefined, { "aria-hidden": "true" });
+        for (const name of ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"])
+            weekdays.append(make("span", "weekday", name[0]));
+        const list = make("div", "list");
+        const start = state.listStart ?? new Date(state.currentYear, state.currentMonth, 1);
+        for (let index = 0; index < (state.listLength ?? 1); index++) {
+            const first = new Date(start.getFullYear(), start.getMonth() + index, 1);
+            const section = make("section", "month-section", undefined, { "data-month-key": `${first.getFullYear()}-${first.getMonth()}` });
+            section.append(make("div", "subhead", `${MONTH_NAMES[first.getMonth()]} ${first.getFullYear()}`, { "aria-hidden": "true" }));
+            section.append(monthGrid(first.getFullYear(), first.getMonth(), first.getFullYear() === state.focusedDate.getFullYear() && first.getMonth() === state.focusedDate.getMonth(), true));
+            list.append(section);
+        }
+        content.append(weekdays, list, make("div", "sr-only", "Use arrow keys for days, Home and End for the week, Page Up and Page Down for months, with Shift for years.", { id: `${state.id}-keyboard` }));
+    }
+    else {
+        const header = make("div", "header");
+        const nav = make("div", "navigation");
+        nav.append(button("month-selector", MONTH_NAMES[state.currentMonth], "month", "Select month"), button("year-selector", String(state.currentYear), "year", "Select year"));
+        header.append(nav);
+        if (state.currentView !== "year") {
+            const span = state.currentView === "day" ? "month" : "year";
+            header.append(button("prev", "‹", "prev", `Previous ${span}`), button("next", "›", "next", `Next ${span}`));
+        }
+        content.append(header);
+        if (state.currentView === "day") {
+            const track = make("div", "track");
+            for (const offset of [-1, 0, 1]) {
+                const first = new Date(state.currentYear, state.currentMonth + offset, 1);
+                const grid = monthGrid(first.getFullYear(), first.getMonth(), offset === 0);
+                if (offset) {
+                    grid.setAttribute("aria-hidden", "true");
+                    grid.inert = true;
+                    grid.querySelectorAll("[data-date]").forEach(day => day.removeAttribute("data-date"));
+                }
+                track.append(grid);
+            }
+            content.append(track);
+        }
+        else {
+            const months = state.currentView === "month";
+            const grid = make("div", months ? "months" : "years", undefined, { role: "group", "aria-label": months ? "Choose month" : "Choose year" });
+            const first = state.minDate?.getFullYear() ?? 1900, last = state.maxDate?.getFullYear() ?? 2100;
+            for (const value of months ? Array.from({ length: 12 }, (_, i) => i) : Array.from({ length: last - first + 1 }, (_, i) => first + i)) {
+                const selected = value === (months ? state.currentMonth : state.currentYear);
+                grid.append(make("button", months ? "month" : "year", months ? MONTH_NAMES_SHORT[value] : String(value), {
+                    type: "button", [months ? "data-month" : "data-year"]: String(value), "aria-pressed": String(selected), tabindex: selected ? "0" : "-1",
+                }));
+            }
+            content.append(grid);
+        }
+        content.append(make("div", "sr-only", "Use arrow keys for days, Home and End for the week, Page Up and Page Down for months, with Shift for years.", { id: `${state.id}-keyboard` }));
+    }
+    if (modal && !fullscreen) {
+        const footer = make("div", "footer");
+        const confirm = button("confirm", "OK", "confirm");
+        confirm.disabled = confirmDisabled;
+        footer.append(button("cancel", "Cancel", "cancel"), confirm);
+        content.append(footer);
+    }
+    return content;
+}

package/dist/components/datepicker/types.d.ts

@@ -0,0 +1,401 @@
+import type { ForwardedEventPayload } from "../../core/dom/index.js";
+import type { NormalizedEvent } from "../../core/utils/mobile.js";
+/** Value returned by the API, including complete ranges and empty selections. */
+export type DatePickerValue = Date | [Date, Date] | null;
+/**
+ * The value as the selection mode shapes it (FLO-295): a range is a pair, a
+ * single date a date; an unknown mode, either.
+ */
+export type DatePickerValueOf<M> = M extends "range" ? [Date, Date] | null : M extends "single" ? Date | null : DatePickerValue;
+/** What setValue and `value` take: a date, a range as a pair, or as { start, end } (FLO-289). */
+export type DatePickerInput = Date | string | [Date | string, Date | string] | {
+    start: Date | string;
+    end: Date | string;
+};
+/**
+ * One shape whatever committed the value (FLO-295): a range's `value` is the
+ * pair, and `rangeEndDate` its end, kept for compatibility (null otherwise).
+ * The docked calendar sent the start as the value and the end apart.
+ */
+export interface DatePickerChangePayload<V = DatePickerValue> {
+    value: V;
+    rangeEndDate: Date | null;
+    formattedValue: string;
+    /**
+     * The value as ISO 8601 text, the `value` of the `<m-datepicker>` element's
+     * `change`: a date (`2026-09-10`), a `start/end` interval, or "" (FLO-320)
+     */
+    iso: string;
+}
+/** Visibility events carry the committed value, including complete ranges. */
+export interface DatePickerVisibilityPayload<V = DatePickerValue> {
+    value: V;
+}
+/** Normalized touch-end event emitted by the interactive root. */
+export type DatePickerTapPayload = NormalizedEvent;
+/** Horizontal swipe emitted by the interactive root. */
+export interface DatePickerSwipePayload {
+    direction: "left" | "right";
+    deltaX: number;
+    deltaY: number;
+}
+/** Events emitted by the picker API, calendar selections and interactive root. */
+export interface DatePickerEvents<V = DatePickerValue> {
+    change: (payload: DatePickerChangePayload<V>) => void;
+    open: (payload: DatePickerVisibilityPayload<V>) => void;
+    close: (payload: DatePickerVisibilityPayload<V>) => void;
+    click: (payload: ForwardedEventPayload<MouseEvent, HTMLElement>) => void;
+    keydown: (payload: ForwardedEventPayload<KeyboardEvent, HTMLElement>) => void;
+    tap: (payload: DatePickerTapPayload) => void;
+    swipe: (payload: DatePickerSwipePayload) => void;
+}
+/**
+ * DatePicker variant types
+ * @category Components
+ */
+export type DatePickerVariant = 'docked' | 'modal' | 'modal-input' | 'fullscreen';
+/**
+ * DatePicker view types
+ * @category Components
+ */
+export type DatePickerView = 'day' | 'month' | 'year';
+/**
+ * DatePicker selection mode types
+ * @category Components
+ */
+export type DatePickerSelectionMode = 'single' | 'range';
+/**
+ * Day names for the calendar
+ * @internal
+ */
+export declare const DAY_NAMES: string[];
+/**
+ * Month names for the calendar
+ * @internal
+ */
+export declare const MONTH_NAMES: string[];
+/**
+ * Month names abbreviated
+ * @internal
+ */
+export declare const MONTH_NAMES_SHORT: string[];
+/**
+ * CSS class name for today's date
+ * @internal
+ */
+export declare const TODAY_CLASS = "datepicker__day--today";
+/**
+ * CSS class name for selected date
+ * @internal
+ */
+export declare const SELECTED_CLASS = "datepicker__day--selected";
+/**
+ * CSS class name for dates outside the current month
+ * @internal
+ */
+export declare const OUTSIDE_MONTH_CLASS = "datepicker__day--outside";
+/**
+ * CSS class for the first date in a range
+ * @internal
+ */
+export declare const RANGE_START_CLASS = "datepicker__cell--range-start";
+/**
+ * CSS class for the last date in a range
+ * @internal
+ */
+export declare const RANGE_END_CLASS = "datepicker__cell--range-end";
+/**
+ * CSS class for dates between start and end in a range
+ * @internal
+ */
+export declare const RANGE_MIDDLE_CLASS = "datepicker__cell--range";
+/**
+ * Configuration interface for the DatePicker component
+ * @category Components
+ */
+export interface DatePickerConfig {
+    /** Name of the committed form input. */
+    name?: string;
+    /**
+     * DatePicker variant that determines display style
+     * @default 'docked'
+     */
+    variant?: DatePickerVariant | string;
+    /**
+     * Whether the datepicker is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Initial view to display (day, month, year)
+     * @default 'day'
+     */
+    initialView?: DatePickerView | string;
+    /**
+     * Selection mode for the datepicker (single or range)
+     * @default 'single'
+     */
+    selectionMode?: DatePickerSelectionMode | string;
+    /**
+     * Initial selected date(s)
+     * Accepts a Date object, Date string, or two dates for range selection
+     */
+    value?: DatePickerInput;
+    /** The value shows and cannot change: no typing, no calendar (FLO-289). */
+    readOnly?: boolean;
+    /** A date is required: on the input for forms, and checkValidity() (FLO-289). */
+    required?: boolean;
+    /** The supporting text under the field. Default: the date format (FLO-289). */
+    supportingText?: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date | string;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date | string;
+    /**
+     * Format for displaying dates
+     * @default 'MM/DD/YYYY'
+     */
+    dateFormat?: string;
+    /**
+     * Label text for the datepicker
+     * @example 'Select Date'
+     */
+    label?: string;
+    /**
+     * Placeholder text for the input field
+     * @example 'MM/DD/YYYY'
+     */
+    placeholder?: string;
+    /**
+     * Additional CSS classes to add to the datepicker
+     * @example 'form-field event-date'
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Whether to enable animation effects
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Whether to close the picker when a date is selected
+     * @default false (modal selections are drafts until OK; true commits on selection)
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Array of dates to highlight or disable
+     */
+    specialDates?: Array<{
+        date: Date | string;
+        highlight?: boolean;
+        disabled?: boolean;
+        tooltip?: string;
+    }>;
+}
+/**
+ * Date object with additional properties for rendering
+ * @internal
+ */
+export interface CalendarDate {
+    /** JavaScript Date object */
+    date: Date;
+    /** Day of the month (1-31) */
+    day: number;
+    /** Whether the date is in the current month being displayed */
+    isCurrentMonth: boolean;
+    /** Whether the date is today */
+    isToday: boolean;
+    /** Whether the date is selected */
+    isSelected: boolean;
+    /** Whether the date is disabled */
+    isDisabled: boolean;
+    /** Whether the date is the first date in a range */
+    isRangeStart?: boolean;
+    /** Whether the date is the last date in a range */
+    isRangeEnd?: boolean;
+    /** Whether the date is between start and end in a range */
+    isRangeMiddle?: boolean;
+}
+/**
+ * Calendar API interface for managing calendar navigation
+ * @category Components
+ */
+export interface CalendarAPI {
+    /** Updates the calendar view to display a specific month/year */
+    goToDate: (date: Date) => void;
+    /** Moves to the next month */
+    nextMonth: () => void;
+    /** Moves to the previous month */
+    prevMonth: () => void;
+    /** Moves to the next year */
+    nextYear: () => void;
+    /** Moves to the previous year */
+    prevYear: () => void;
+    /** Switches to day selection view */
+    showDayView: () => void;
+    /** Switches to month selection view */
+    showMonthView: () => void;
+    /** Switches to year selection view */
+    showYearView: () => void;
+    /** Gets the current calendar view */
+    getCurrentView: () => string;
+}
+/**
+ * DatePicker component interface
+ * @category Components
+ */
+export interface DatePickerComponent<V = DatePickerValue> {
+    /** The datepicker's main DOM element */
+    element: HTMLElement;
+    /** The input field DOM element */
+    input: HTMLInputElement;
+    /** API for managing calendar and selected dates */
+    calendar: CalendarAPI;
+    /** API for managing disabled state */
+    disabled: {
+        /** Enables the datepicker */
+        enable: () => void;
+        /** Disables the datepicker */
+        disable: () => void;
+        /** Checks if the datepicker is disabled */
+        isDisabled: () => boolean;
+    };
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Opens the datepicker dropdown/modal. When it returns, `isOpen()` is true
+     * and `open` has been emitted; the surface may be painted after `open()`
+     * returns. On an open, disabled or read-only picker it does nothing. The
+     * click that called it does not count as a click outside.
+     * @returns The datepicker component for chaining
+     */
+    open: () => DatePickerComponent<V>;
+    /**
+     * Closes the datepicker dropdown/modal. When it returns, `isOpen()` is false
+     * and `close` has been emitted. On a closed picker it does nothing.
+     * @returns The datepicker component for chaining
+     */
+    close: () => DatePickerComponent<V>;
+    /** Whether the dropdown or modal is open */
+    isOpen: () => boolean;
+    /**
+     * Gets the selected date(s)
+     * @returns Date object, array of two Date objects for range, or null if none selected
+     */
+    getValue: () => V;
+    /**
+     * Sets the selected date(s). Silent: only the user's choice emits `change`
+     * @param value - Date, string, or array of dates for range selection
+     * @returns The datepicker component for chaining
+     */
+    setValue: (value: DatePickerInput) => DatePickerComponent<V>;
+    /** Read-only: the value shows and cannot change (FLO-289) */
+    setReadOnly: (readOnly: boolean) => DatePickerComponent<V>;
+    /** Whether the picker is read-only */
+    isReadOnly: () => boolean;
+    /** Whether a date is required (FLO-289) */
+    setRequired: (required: boolean) => DatePickerComponent<V>;
+    /**
+     * False when a date is required and missing. A dialog variant's input is
+     * read-only, which forms do not validate.
+     */
+    checkValidity: () => boolean;
+    /** As checkValidity(), and shows the error on the field when false */
+    reportValidity: () => boolean;
+    /** The supporting text; empty or null shows the date format (FLO-289) */
+    setSupportingText: (text: string | null) => DatePickerComponent<V>;
+    /**
+     * Gets the formatted date string based on the selected date(s)
+     * @returns Formatted date string or empty string if none selected
+     */
+    getFormattedValue: () => string;
+    /**
+     * Clears the selected date(s). Silent
+     * @returns The datepicker component for chaining
+     */
+    clear: () => DatePickerComponent<V>;
+    /**
+     * Enables the datepicker
+     * @returns The datepicker component for chaining
+     */
+    enable: () => DatePickerComponent<V>;
+    /**
+     * Disables the datepicker
+     * @returns The datepicker component for chaining
+     */
+    disable: () => DatePickerComponent<V>;
+    /**
+     * Sets the minimum selectable date
+     * @param date - Date object or string
+     * @returns The datepicker component for chaining
+     */
+    setMinDate: (date: Date | string) => DatePickerComponent<V>;
+    /**
+     * Sets the maximum selectable date
+     * @param date - Date object or string
+     * @returns The datepicker component for chaining
+     */
+    setMaxDate: (date: Date | string) => DatePickerComponent<V>;
+    /**
+     * Destroys the datepicker component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the datepicker
+     * @param event - Event name ('change', 'open', 'close', etc.)
+     * @param handler - Event handler function
+     * @returns The datepicker component for chaining
+     */
+    on: <K extends keyof DatePickerEvents<V>>(event: K, handler: DatePickerEvents<V>[K]) => DatePickerComponent<V>;
+    /**
+     * Removes an event listener from the datepicker
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The datepicker component for chaining
+     */
+    off: <K extends keyof DatePickerEvents<V>>(event: K, handler: DatePickerEvents<V>[K]) => DatePickerComponent<V>;
+}
+/** Internal calendar view model. Dates are local civil dates, without a time. */
+export interface DatePickerState {
+    selectedDate: Date | null;
+    rangeEndDate: Date | null;
+    currentView: DatePickerView;
+    currentMonth: number;
+    currentYear: number;
+    focusedDate: Date;
+    minDate: Date | null;
+    maxDate: Date | null;
+    dateFormat: string;
+    variant: DatePickerVariant;
+    selectionMode: DatePickerSelectionMode;
+    inputMode: boolean;
+    prefix: string;
+    id: string;
+    label: string;
+    specialDates: NonNullable<DatePickerConfig["specialDates"]>;
+    isAllowed(date: Date): boolean;
+    /** Full screen: the first month of the rendered list, and how many follow. FLO-276. */
+    listStart?: Date;
+    listLength?: number;
+}

package/dist/components/datepicker/types.js

@@ -0,0 +1,17 @@
+export const DAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+export const MONTH_NAMES = [
+    'January', 'February', 'March', 'April',
+    'May', 'June', 'July', 'August',
+    'September', 'October', 'November', 'December'
+];
+export const MONTH_NAMES_SHORT = [
+    'Jan', 'Feb', 'Mar', 'Apr',
+    'May', 'Jun', 'Jul', 'Aug',
+    'Sep', 'Oct', 'Nov', 'Dec'
+];
+export const TODAY_CLASS = 'datepicker__day--today';
+export const SELECTED_CLASS = 'datepicker__day--selected';
+export const OUTSIDE_MONTH_CLASS = 'datepicker__day--outside';
+export const RANGE_START_CLASS = 'datepicker__cell--range-start';
+export const RANGE_END_CLASS = 'datepicker__cell--range-end';
+export const RANGE_MIDDLE_CLASS = 'datepicker__cell--range';

package/dist/components/datepicker/utils.d.ts

@@ -0,0 +1,84 @@
+import { CalendarDate } from "./types.js";
+/**
+ * Parses a date from various input types
+ * @param date - Date string, Date object, or null
+ * @returns Valid Date object or null if invalid
+ */
+export declare const parseDate: (date: Date | string | null) => Date | null;
+/** Strict inverse of formatDate: never let Date roll February 30 into March. */
+export declare const parseInputDate: (text: string, format: string) => Date | null;
+/**
+ * Formats a date according to the specified format using a parser-based approach
+ * This avoids string replacement issues by building the output string from scratch
+ *
+ * @param date - Date to format
+ * @param format - Format string (MM/DD/YYYY, etc.)
+ * @returns Formatted date string
+ */
+export declare const formatDate: (date: Date | null, format?: string) => string;
+/**
+ * Gets the days in a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Number of days in the month
+ */
+export declare const getDaysInMonth: (year: number, month: number) => number;
+/**
+ * Gets the first day of the month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Day of the week (0-6, where 0 is Sunday)
+ */
+export declare const getFirstDayOfMonth: (year: number, month: number) => number;
+/**
+ * Checks if two dates are the same day
+ * @param date1 - First date
+ * @param date2 - Second date
+ * @returns True if same day, false otherwise
+ */
+export declare const isSameDay: (date1: Date, date2: Date) => boolean;
+/**
+ * Checks if a date is between two other dates (inclusive)
+ * @param date - Date to check
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @returns True if date is between start and end, false otherwise
+ */
+export declare const isDateInRange: (date: Date, startDate: Date, endDate: Date) => boolean;
+/**
+ * Generates calendar dates for a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @param selectedDate - Currently selected date
+ * @param rangeEndDate - End date if range selection
+ * @param minDate - Minimum selectable date
+ * @param maxDate - Maximum selectable date
+ * @returns Array of calendar dates
+ */
+export declare const generateCalendarDates: (year: number, month: number, selectedDate?: Date | null, rangeEndDate?: Date | null, minDate?: Date | null, maxDate?: Date | null) => CalendarDate[];
+/**
+ * Adds days to a date
+ * @param date - Base date
+ * @param days - Number of days to add
+ * @returns New date with days added
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+/**
+ * Adds months to a date
+ * @param date - Base date
+ * @param months - Number of months to add
+ * @returns New date with months added
+ */
+export declare const addMonths: (date: Date, months: number) => Date;
+/**
+ * Adds years to a date
+ * @param date - Base date
+ * @param years - Number of years to add
+ * @returns New date with years added
+ */
+export declare const addYears: (date: Date, years: number) => Date;
+/**
+ * A value as ISO 8601 text, the `<m-datepicker>` element's value: a date
+ * (`2026-09-10`), a `start/end` interval, or "" (FLO-320).
+ */
+export declare const toIsoValue: (value: Date | [Date, Date] | null, end?: Date | null) => string;