@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/date-picker/date-input.styles.js

@@ -6,8 +6,8 @@ export const styles = css `
   [part='form-control-label'] {
     display: block;
     margin-block-end: var(--lyra-space-xs);
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-md-sm);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   /* :empty never matches here -- the part always contains a literal slot
      child element regardless of assigned/text content -- so real emptiness
@@ -28,7 +28,7 @@ export const styles = css `
     gap: var(--lyra-space-xs);
     inline-size: 100%;
     padding: var(--lyra-space-xs) var(--lyra-space-s);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
   }
@@ -66,8 +66,8 @@ export const styles = css `
        [part=combobox]), so it can grow to fit the full touch target. */
     min-inline-size: var(--lyra-icon-button-size);
     min-block-size: var(--lyra-icon-button-size);
-    line-height: 1;
-    font-size: 1rem;
+    line-height: var(--lyra-line-height-none);
+    font-size: var(--lyra-font-size-md);
   }
   [part='clear-button']:focus-visible,
   [part='expand-button']:focus-visible {
@@ -76,11 +76,11 @@ export const styles = css `
   }
   [part='popup'] {
     position: fixed;
-    z-index: 900;
-    max-inline-size: min(92vw, 28rem);
+    z-index: var(--lyra-layer-dropdown);
+    max-inline-size: min(92vw, var(--lyra-size-28rem));
     visibility: hidden;
     opacity: 0;
-    transform: translateY(-0.25rem);
+    transform: translateY(var(--lyra-size-neg-0-25rem));
     transition:
       opacity var(--lyra-transition-fast),
       transform var(--lyra-transition-fast),
@@ -98,7 +98,7 @@ export const styles = css `
   }
   [part='hint'] {
     margin-block-start: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   /* :empty never matches here -- the part always contains a literal
@@ -110,10 +110,11 @@ export const styles = css `
   }
   [part='error'] {
     margin-block-start: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-danger);
   }
   [part='error'][hidden] {
     display: none;
   }
 `;
+//# sourceMappingURL=date-input.styles.js.map

package/dist/components/date-picker/date-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.styles.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHxB,CAAC"}

package/dist/components/date-picker/date-picker.class.d.ts

@@ -0,0 +1,121 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { type CalendarMode, type WeekdayFormat } from './calendar-core.js';
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+/**
+ * `<lyra-date-picker>` — an inline month-grid calendar for picking a single date
+ * or a date range. Mirrors the core `<wa-date-picker>` API under `lyra-`.
+ *
+ * Value is ISO 8601: `YYYY-MM-DD` (single) or `YYYY-MM-DD/YYYY-MM-DD` (range).
+ *
+ * @customElement lyra-date-picker
+ * @event change - The user committed a value.
+ * @event input - The value changed during interaction (range: after the first click).
+ * @csspart base - The date-picker wrapper.
+ * @csspart month - A visible month wrapper.
+ * @csspart header - The month header.
+ * @csspart title - The month title.
+ * @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-placeholder - A non-day grid placeholder.
+ */
+export interface LyraDatePickerEventMap {
+    input: CustomEvent<undefined>;
+    change: CustomEvent<undefined>;
+}
+export declare class LyraDatePicker extends LyraElement<LyraDatePickerEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** 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;
+    locale: string;
+    firstDayOfWeek: string;
+    weekdayFormat: WeekdayFormat;
+    disablePast: boolean;
+    disableFuture: boolean;
+    withOutsideDays: boolean;
+    /** Accessible label for the previous-month button. Override for a non-English `locale`. */
+    previousLabel: string;
+    /** Accessible label for the next-month button. Override for a non-English `locale`. */
+    nextLabel: string;
+    private viewDate;
+    private focusedDate;
+    private focusPending;
+    private readonly titleIds;
+    private suppressViewSync;
+    private get effectiveMode();
+    private get visibleMonths();
+    private get effectiveWeekdayFormat();
+    get selection(): DateRange;
+    /** Read-only Date view of a single-mode value. */
+    get valueAsDate(): Date | null;
+    protected willUpdate(changed: PropertyValues): void;
+    private get fdow();
+    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;
+    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 nav;
+    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(): void;
+    private renderDay;
+    private renderMonth;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-date-picker': LyraDatePicker;
+    }
+}
+//# sourceMappingURL=date-picker.class.d.ts.map

package/dist/components/date-picker/date-picker.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.class.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,OAAO,EAeL,KAAK,YAAY,EACjB,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC;CACjB;AAiBD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAChC;AACD,qBAAa,cAAe,SAAQ,WAAW,CAAC,sBAAsB,CAAC;IACrE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,0DAA0D;IAC9C,KAAK,SAAM;IACiB,IAAI,EAAE,YAAY,CAAY;IAC1D,GAAG,SAAM;IACT,GAAG,SAAM;IACuB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACnB,MAAM,EAAE,CAAC,GAAG,CAAC,CAAK;IAChD,MAAM,SAAM;IACsB,cAAc,SAAU;IACQ,aAAa,EAAE,aAAa,CAAW;IAC7D,WAAW,UAAS;IAClB,aAAa,UAAS;IACnB,eAAe,UAAS;IACrF,2FAA2F;IAChD,aAAa,SAAoB;IAC5E,uFAAuF;IAChD,SAAS,SAAgB;IAEvD,OAAO,CAAC,QAAQ,CAAgE;IAChF,OAAO,CAAC,WAAW,CAAqB;IACjD,OAAO,CAAC,YAAY,CAAS;IAI7B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA8D;IAMvF,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,sBAAsB,GAEjC;IAED,IAAI,SAAS,IAAI,SAAS,CAGzB;IAED,kDAAkD;IAClD,IAAI,WAAW,IAAI,IAAI,GAAG,IAAI,CAE7B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAelD;IAED,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,CAAC,UAAU;IASlB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAmB5B;;;;;2BAKuB;IACvB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,MAAM;IAoBd,OAAO,CAAC,UAAU;IAsBlB,mDAAmD;IACnD,KAAK,IAAI,IAAI,CAEZ;IAED,sCAAsC;IACtC,SAAS,IAAI,IAAI,CAEhB;IAED,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAOlC;IAED,OAAO,CAAC,GAAG;IAIX,OAAO,CAAC,SAAS,CA+Df;IAEF;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IASxB,SAAS,CAAC,OAAO,IAAI,IAAI,CAOxB;IAED,OAAO,CAAC,SAAS;IAsEjB,OAAO,CAAC,WAAW;IAyDnB,MAAM,IAAI,cAAc,CA8BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}