import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type CalendarMode,type WeekdayFormat}from'./calendar-core.js';export interface DateRange{from:Date|null;to:Date|null;}export type LyraDatePickerPageBy='months'|'single';export type LyraDatePickerView='days'|'months'|'years'|'decades';export type LyraDatePickerFirstDayOfWeek='auto'|'sun'|'mon'|'tue'|'wed'|'thu'|'fri'|'sat';export type LyraDatePickerDisabledDates=string|string[]|Date[];export type LyraDatePickerDayContent=(date:Date)=>unknown;export interface LyraDatePickerEventMap{input:InputEvent;change:Event;'lr-focus-day':CustomEvent<{date:Date;}>;'lr-view-change':CustomEvent<{view:LyraDatePickerView;date:Date;}>;} /** * One quick-range option for `presets`. * * Deliberately the same shape as ``'s `TimeRangePreset` (`label`/`start`/`end`/`id`, * rendered as an `aria-pressed` button row) so the library has one preset vocabulary rather than * two. The only difference is the unit: ISO `YYYY-MM-DD` dates instead of numbers, because this * control's domain is dates. */ export interface LyraDateRangePreset{readonly label:string; /** * Inclusive range start, ISO `YYYY-MM-DD`. Omit (or leave empty) for an OPEN start, which * resolves to the picker's `min`. An open bound with no corresponding `min`/`max` cannot be * resolved, so its button renders disabled rather than doing nothing when pressed. */ readonly start?:string; /** Inclusive range end, ISO `YYYY-MM-DD`. Omit for an OPEN end, resolving to `max`. */ readonly end?:string; /** * Caller-owned stable identity, echoed verbatim on `appliedPreset` -- never read, compared, or * otherwise interpreted by this component. Exists so a consumer can persist WHICH preset is * active (`appliedPreset.id`) without a downcast or a side `WeakMap`, which is exactly the * mapping table `presets` exists to delete. Optional: an untagged preset still round-trips by * object identity alone, as it always has. */ readonly id?:string;} /** * `` — an inline month-grid calendar for picking a single date * or a date range. Mirrors the core `` API under `lr-`. * * Value is ISO 8601: `YYYY-MM-DD` (single) or `YYYY-MM-DD/YYYY-MM-DD` (range). * Calendar arithmetic and formatting are explicitly proleptic Gregorian, including ISO years * 0000–0099; visible day/week digits still follow the effective locale's numbering system. * * Deliberately does **not** perform implicit form submission on Enter (unlike its `` * wrapper, which routes through `internal/submit-on-enter.ts`): Enter selects the focused day in * the calendar grid — the grid's own commit key, the same carve-out `` has for a * newline. This element is also not form-associated; the wrapping `` is what * participates in a `
`. * * Month, year, and decade selection views retain one enabled roving Tab stop. Arrow keys follow * their visual four-column grid (mirroring horizontally under RTL), Home and End move to the * first and last enabled periods, and Enter or Space drills into the focused period. * A period is enabled only when it contains a date selectable under the current bounds, * past/future, date-list, weekday, predicate, and pending-range constraints. * * An authored host aria-label names an enclosing group while each grid retains its own period * name. Live constraints repair roving state without moving unrelated focus. Day and period * navigation stay within the supported ISO years 0000–9999. * * @customElement lr-date-picker * @event {Event} change - The user committed a value. Bubbling, composed, and non-cancelable. * @event {InputEvent} input - The value changed during interaction (range: after the first * click). Bubbling, composed, and non-cancelable. * @event lr-focus-day - Keyboard or pointer focus moved to a day; detail is `{ date }`. * @event lr-view-change - The user changed the calendar view; detail is `{ view, date }`. * @slot header - Replaces the built-in navigation header. * @slot previous-icon - Replaces the previous-page icon. * @slot next-icon - Replaces the next-page icon. * @slot footer - Content below the calendar grids. * @slot day-YYYY-MM-DD - Lyra extension for replacing an individual ISO calendar day's content. * @csspart date-picker - The visible date-picker shell. * @csspart base - Permanent compatibility name on the same visible shell as `date-picker`. * @csspart months - The visible-month collection. * @csspart month - A visible month wrapper. * @csspart header - The month header. * @csspart nav - The navigation controls. * @csspart title - The month title. * @csspart month-label - The interactive month label. * @csspart previous - The previous-month button. * @csspart next - The next-month button. * @csspart weekdays - The weekday header row. * @csspart weekday - A weekday label. * @csspart grid - A month date grid. * @csspart week - A calendar week row. * @csspart day - A calendar day button. * @csspart day-today - A day representing today. * @csspart day-outside - A day outside the active month. * @csspart day-selected - A selected day. * @csspart day-range-start - The start of a selected range. * @csspart day-range-end - The end of a selected range. * @csspart day-range-inner - An interior day in a selected range. * @csspart day-range-preview - A day in the pending range preview. * @csspart day-disabled - A disabled day. * @csspart day-label - The visible day label. * @csspart day-weekend - A Saturday or Sunday. * @csspart day-placeholder - A non-day grid placeholder. * @csspart presets - The quick-range button row, rendered only in range mode with `presets` set. * @csspart preset-button - One quick-range button; carries `data-active` while its range is the * current value. * @cssprop [--lr-date-picker-preset-hover-bg=var(--lr-color-brand-quiet)] - Hover background of a * quick-range button. * @cssprop --lr-date-picker-preset-active-bg - Pressed background of a quick-range button; * defaults to a mix of the hover background with the shared active mix partner. * @cssprop [--lr-date-picker-preset-selected-bg=var(--lr-color-brand)] - Background of the * quick-range button whose range is currently selected. * @cssprop [--lr-date-picker-preset-selected-border=var(--lr-color-brand)] - Border color of the * selected quick-range button. * @cssprop [--lr-date-picker-preset-selected-color=var(--lr-color-on-brand)] - Foreground color * of the selected quick-range button. * @csspart weeknumbers - The week-number column. * @csspart weeknumber - One week number. * @csspart footer - The footer region. * @csspart view-grid - A month/year/decade selection grid. * @csspart view-row - A row in a selection grid. * @csspart view-cell - A cell in a selection grid. * @csspart view-item - A month/year/decade selection button. * @csspart view-item-disabled - A disabled selection item. * @csspart view-item-selected - The item containing the selected date. * @csspart view-item-today - The item containing today. * @cssprop [--lr-cell-size=var(--lr-size-2-25rem)] - Inline and block size of each day cell and * the matching calendar grid track. * @cssprop [--lr-date-picker-month-gap=var(--lr-space-l)] - Gap between visible months. * @cssprop [--lr-date-picker-header-gap=var(--lr-space-s)] - Month-header child gap. * @cssprop [--lr-date-picker-radius=var(--lr-radius)] - Calendar and control corner radius. * @cssprop [--lr-date-picker-nav-hover-bg=var(--lr-color-brand-quiet)] - Hover background of the * `[part="previous"]`/`[part="next"]` month-navigation buttons. * @cssprop [--lr-date-picker-nav-active-bg=color-mix(in oklab, var(--lr-date-picker-nav-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - Pressed month-navigation background. * @cssprop [--lr-date-picker-title-hover-color=var(--lr-color-brand)] - Hovered title color. * @cssprop [--lr-date-picker-title-active-color=var(--lr-color-brand)] - Pressed title color. * @cssprop [--lr-date-picker-title-active-bg=var(--lr-color-brand-quiet)] - Pressed title background. * @cssprop [--lr-date-picker-title-active-radius=var(--lr-date-picker-radius)] - Pressed title corner radius. * @cssprop [--lr-date-picker-day-hover-bg=var(--lr-color-brand-quiet)] - Day hover background. * @cssprop [--lr-date-picker-day-active-bg=color-mix(in oklab, var(--lr-date-picker-day-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - Day pressed background. * @cssprop [--lr-date-picker-day-outside-color=var(--lr-color-text-quiet)] - Adjacent-month day color. * @cssprop [--lr-date-picker-today-outline=var(--lr-color-brand)] - Today outline color. * @cssprop [--lr-date-picker-range-bg=var(--lr-color-brand-quiet)] - Selected-range interior background. * @cssprop [--lr-date-picker-range-preview-bg=var(--lr-date-picker-range-bg, var(--lr-color-brand-quiet))] - Pending-range preview background. * @cssprop [--lr-date-picker-range-color=var(--lr-color-text)] - Adjacent-month range text color. * @cssprop [--lr-date-picker-selected-bg=var(--lr-color-brand)] - Selected day/range-endpoint background. * @cssprop [--lr-date-picker-selected-color=var(--lr-color-on-brand)] - Selected day/range-endpoint text color. * @cssprop [--lr-date-picker-disabled-color=var(--lr-color-text-quiet)] - Disabled day text color. * @cssprop [--lr-date-picker-disabled-opacity=var(--lr-opacity-disabled)] - Disabled day opacity. * @cssprop [--lr-date-picker-view-hover-bg=var(--lr-color-brand-quiet)] - Selection-view item hover background. * @cssprop [--lr-date-picker-view-active-bg=color-mix(in oklab, var(--lr-date-picker-view-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))] - Selection-view item pressed background. * @cssprop [--lr-date-picker-view-selected-bg=var(--lr-color-brand)] - Selected selection-view item background. * @cssprop [--lr-date-picker-view-selected-color=var(--lr-color-on-brand)] - Selected selection-view item text color. * @cssprop [--lr-date-picker-view-today-outline=var(--lr-color-brand)] - Current-period selection-view outline. * @cssprop [--lr-date-picker-view-disabled-opacity=var(--lr-opacity-disabled)] - Disabled selection-view item opacity. * @cssstate disabled - Matches while date selection and navigation are disabled. * @cssstate range - Matches while `mode="range"` is active. * @cssstate readonly - Matches while selection is read-only. * @status experimental * @since 4.0.0 */ export declare class LyraDatePicker extends LyraElement{static styles:import("lit").CSSResultGroup[]; /** The sequence is bounded/detached/frozen while applying a preset still reports its exact * caller-owned source identity through `appliedPreset`. */ protected static readonly ownedCollectionProperties:readonly string[];protected static readonly identityCollectionProperties:readonly string[]; /** ISO value: `YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`. */ value:string;mode:CalendarMode;min:string;max:string;disabled:boolean;readonly:boolean;months:1|2; /** Visual size — scales the private default behind `--lr-cell-size` proportionally; not pixel-matched to * `lr-input`'s row-height scale (a calendar cell isn't a text row). The Web Awesome / Shoelace spellings * `small`/`medium`/`large` are accepted for `s`/`m`/`l`, so a migration is a tag rename with no * attribute rewrite. */ size:LyraSize;locale:string;firstDayOfWeek:LyraDatePickerFirstDayOfWeek;weekdayFormat:WeekdayFormat;disablePast:boolean;disableFuture:boolean;withOutsideDays:boolean;withWeekNumbers:boolean;disabledDates:LyraDatePickerDisabledDates;disabledDaysOfWeek:string; /** Optional JavaScript predicate that disables matching calendar dates. */ isDateDisabled?:(date:Date)=>boolean; /** Optional JavaScript renderer for individual calendar-day content. */ dayContent?:LyraDatePickerDayContent; /** * Quick-range options rendered as a `[part="presets"]` button row above the calendar, for the * dashboard time-filter shape (Today / Last 7 days / Last 30 days / This month / All time). * * Range mode only — a preset names two dates, so it has no meaning for a single-date picker and * is ignored there rather than rendering a row that cannot do anything. Unset renders nothing at * all, so an existing picker is unchanged. Non-array runtime assignments normalize to the same * empty collection instead of reaching the render path. Blank labels are omitted; inadmissible * ranges render disabled. Interior days do not all need to be enabled. * * Applying one commits the range exactly as a two-click selection would (clamped to `min`/`max`, * then admitted against endpoint and inclusive `minRange`/`maxRange` constraints before * `input` followed by `change`), so a consumer's existing change handling needs no special * case. The active preset carries `aria-pressed="true"` and `data-active`, mirroring * ``'s already-shipped preset row. */ private _presets;get presets():readonly LyraDateRangePreset[];set presets(next:readonly LyraDateRangePreset[]);private _appliedPreset?; /** * The preset whose button produced the current `value`, or `undefined` when the range was picked * by hand, cleared, or changed externally. Clearing removes identity before value events; * external changes clear it silently. Read it inside your own `change`/`input` handler. * * Exists because a dashboard filter has to persist WHICH preset is active, not the pair it froze * to: "Last 7 days" must still mean the last 7 days after tomorrow's reload. That fact is not * recoverable from `value` -- re-deriving it by string-matching is the mapping table `presets` * exists to delete, and it is ambiguous anyway (Today and This month coincide on the 1st of a * month, and a hand-picked range can equal a preset's pair by construction). * * A property rather than an event detail: `input`/`change` are NATIVE events here, deliberately * indistinguishable from a manual selection so existing handlers need no special case, and a * native Event cannot carry a detail without changing its type. */ get appliedPreset():LyraDateRangePreset|undefined; /** * Resolves a preset's bounds, treating an omitted/empty `start` or `end` as open and falling back * to `min`/`max`. Returns null when an open bound has no corresponding limit -- there is simply no * date to use, and `value`'s `YYYY-MM-DD/YYYY-MM-DD` form has no unbounded spelling. */ private resolvePresetRange;minRange:number;maxRange:number;pageBy:LyraDatePickerPageBy;today:string;focusedDate:string;view:LyraDatePickerView; /** Accessible label for the previous-month button. Omitted copy localizes; explicit text, * including the built-in English label or an empty string, wins verbatim. * @default 'Previous month' */ previousLabel:string;private previousLabelAuthored; /** Accessible label for the next-month button. Omitted copy localizes; explicit text, * including the built-in English label or an empty string, wins verbatim. * @default 'Next month' */ nextLabel:string;private nextLabelAuthored;private viewDate;private rangePreview;private focusedViewStart;private focusPending;private viewFocusPending;private restoringViewFocus;private readonly internals;private disabledDatesCacheSource?;private disabledDatesCache;private disabledWeekdaysCacheSource?;private disabledWeekdaysCache;private viewPeriodAvailabilityCache;private readonly titleIds;private committedValue;private constraintFocusOwner;static get observedAttributes():string[];constructor();private get effectiveMode();private get visibleMonths();private get effectiveWeekdayFormat();private get effectiveView(); /** Parsed range view of `value`. Writes share `valueAsRange` normalization and stay silent. */ get selection():DateRange;set selection(next:DateRange); /** Date view of a single-mode value. Writes serialize to local ISO and are silent. */ get valueAsDate():Date|null;set valueAsDate(next:Date|null); /** Date-range view of a range-mode value. Reversed endpoints are normalized. */ get valueAsRange():DateRange;set valueAsRange(next:DateRange);private get focusedDateValue();private setFocusedDate;private resolvedToday;private syncCustomStates;protected willUpdate(changed:PropertyValues):void;private get fdow();private get disabledDateKeys();private get disabledWeekdays();private rangeLength;private isDisabled; /** * Finds the closest enabled date around an invalid roving-focus anchor. * Constraints can move the first valid date outside the current month, so * the search deliberately isn't limited to the visible grid. */ private nearestEnabledDate;private isVisibleDate; /** * Keeps the grid's single `tabindex="0"` cell usable when a selected or * previously focused date becomes disabled through a live constraint * update. An all-disabled calendar intentionally has no focusable day. */ private normalizeFocusedDate; /** The first enabled day at/after the first visible month's start, scanning * forward across all visible months -- used as the sole focusable day when * there's no selection and no prior keyboard focus, so the empty-grid case * never defaults to a possibly-disabled day 1. Returns null if every * visible day is disabled (pathological but possible with a very narrow * min/max window). */ private firstEnabledDate; /** Completed ranges admit endpoints and inclusive length independently of a pending start. */ private admitsRange;private commit;private selectDate; /** Clear the selection and emit input + change. */ clear():void; /** Navigate to today and focus it. */ goToToday():void; /** Navigate the view to a date and focus it, clamped to `min`/`max`. */ goToDate(date:string|Date):void;private clampViewAnchor;private nav; /** The current roving-tabindex target: the day cell (day view) or view-item (years/decades * view) currently reachable via Tab -- the actual focusable/clickable surface, since the host * itself never takes focus. Shared by `focus()`/`blur()`/`click()` so the three forward to the * same element. */ private get rovingTarget(); /** Focus the current roving day (or the first item in a non-day view). */ focus(options?:FocusOptions):void; /** Blur the current roving day/view-item -- mirrors `focus()`: the host itself is never the * actual focus target. */ blur():void; /** Activate the current roving day/view-item, mirroring `focus()`/`blur()`'s forwarding to the * same actual interactive target instead of the (never-interactive) host. */ click():void;private viewPeriodMonths;private viewPeriodStart;private viewPageStart;private viewPeriods; /** Keeps an all-disabled selection page on a page with an enabled period. */ private clampViewDateToEnabledPeriod;private resolveViewFocus;private setFocusedViewStart;private onViewItemFocus;private firstEnabledViewPeriod;private focusViewPeriod;private onViewGridKey;private setView;private advanceView;private onDayFocus;private onGridKey; /** * The anchor month for a newly-focused date, sliding the view by the * minimum amount needed to bring it into view. With `months` > 1, a date * that's already visible in a later grid must not discard an earlier grid * that's already on-screen. */ private viewDateForFocus;protected updated(changed:PropertyValues):void;private renderDay;private renderMonth; /** Returns whether a selection period contains at least one selectable day. */ private viewPeriodHasEnabledDate;private viewPeriodDisabled;private renderViewItem;private pickViewItem;private navView;private renderView; /** The quick-range row. Range mode only -- see `presets`. */ private renderPresets; /** * Commits a preset through the same `commit()` path a two-click range selection uses, so the * event pair, the ISO serialization and the min/max clamping are identical -- a consumer's * change handler cannot tell the two apart, which is the point. */ private applyPreset;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-date-picker':LyraDatePicker;}}