@aurodesignsystem-dev/auro-formkit 0.0.0-pr1594.2 → 0.0.0-pr1595.1

package/components/datepicker/dist/auro-calendar-cell.d.ts

@@ -1,55 +1,108 @@
+/**
+ * The `auro-calendar-cell` component renders a single selectable day button within a calendar month grid.
+ *
+ * @event calendar-cell-activate - Notifies that this cell has been activated via click or tap.
+ * @event date-is-hovered - Notifies that this cell's date is being hovered.
+ * @event calendar-cell-focused - Notifies that this cell's button has received focus.
+ * @csspart dateSlot - Use for customizing the style of the date slot content container.
+ */
 export class AuroCalendarCell extends LitElement {
     static get properties(): {
+        /**
+         * The day object for this cell, containing its Unix timestamp (`date`) and day-of-month title.
+         */
         day: {
             type: ObjectConstructor;
         };
+        /**
+         * Whether this cell's date is currently selected.
+         */
         selected: {
             type: BooleanConstructor;
         };
+        /**
+         * The end (return) date of the selected range as a Unix-timestamp string.
+         */
         dateTo: {
             type: StringConstructor;
+            attribute: string;
         };
+        /**
+         * The start (depart) date of the selected range as a Unix-timestamp string.
+         */
         dateFrom: {
             type: StringConstructor;
+            attribute: string;
         };
+        /**
+         * The month this cell belongs to.
+         */
         month: {
             type: StringConstructor;
         };
+        /**
+         * The minimum selectable date as a Unix timestamp.
+         */
         min: {
             type: NumberConstructor;
         };
+        /**
+         * The maximum selectable date as a Unix timestamp.
+         */
         max: {
             type: NumberConstructor;
         };
+        /**
+         * Whether this cell is disabled because its date falls outside the min/max range.
+         */
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
         /**
+         * Legacy array of Unix-timestamp dates that cannot be selected.
          * @deprecated Propagated from the legacy `auro-calendar.disabledDays`
          * Unix-timestamp array. The cell honors it for backward compatibility
          * (see the divergence-check fallback inside `isBlackout`), but
          * consumers should migrate to `auro-datepicker.blackoutDates`
          * (YYYY-MM-DD ISO strings). The calendar emits a one-time
          * deprecation warning the first time a non-empty value is observed.
+         * @type {number[]}
+         */
+        disabledDays: number[];
+        /**
+         * Whether this cell represents the current date (today).
          */
-        disabledDays: {
-            type: ArrayConstructor;
-        };
         isCurrentDate: {
             type: BooleanConstructor;
+            attribute: string;
         };
+        /**
+         * The BCP 47 locale tag used to format the cell's date.
+         */
         locale: {
             type: StringConstructor;
         };
+        /**
+         * The cell's date formatted as a `YYYY_MM_DD` slot-name string.
+         */
         dateStr: {
             type: StringConstructor;
+            attribute: string;
         };
+        /**
+         * Whether to render the numerical date off-center to leave room below for date slot content.
+         */
         renderForDateSlot: {
             type: BooleanConstructor;
+            attribute: string;
         };
+        /**
+         * Whether this cell has popover slot content to display.
+         */
         hasPopoverContent: {
             type: BooleanConstructor;
+            attribute: string;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -61,7 +114,8 @@ export class AuroCalendarCell extends LitElement {
     min: any;
     max: any;
     disabled: boolean;
-    disabledDays: any[];
+    /** @type {number[]} */
+    disabledDays: number[];
     isCurrentDate: boolean;
     _locale: any;
     dateStr: string | null;

package/components/datepicker/dist/auro-calendar-month.d.ts

@@ -1,11 +1,17 @@
+/**
+ * The `auro-calendar-month` component renders a single localized month grid of selectable day cells within the calendar.
+ * @event hovered-date-changed - Notifies that the date currently hovered within the month grid has changed.
+ * @event calendar-month-mouseleave - Notifies that the mouse has left the month's date grid so the range hover preview can be cleared.
+ */
 export class AuroCalendarMonth extends RangeDatepickerCalendar {
     static get styles(): import("lit").CSSResult[];
     static get properties(): {
         /**
-         * @private
+         * When set, the month name is displayed before the year in the header.
          */
         monthFirst: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -14,13 +20,13 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
          */
         localeCode: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Names of all 12 months. When omitted, names are derived from `localeCode`.
+         * @type {string[]}
          */
-        monthNames: {
-            type: ArrayConstructor;
-        };
+        monthNames: string[];
     };
     /**
      * Returns month name to be rendered in the calendar header.

package/components/datepicker/dist/auro-calendar.d.ts

@@ -1,6 +1,8 @@
 /**
+ * The `auro-calendar` component renders the calendar month(s) shown inside the datepicker dropdown and manages date selection, range preview, and keyboard navigation.
  * @event auroCalendar-dateSelected - Notifies that a date has been selected in the calendar.
  * @event auroCalendar-monthChanged - Notifies that the visible calendar month(s) have changed.
+ * @event narrow-changedProperties - Notifies that the calendar's narrow (mobile) layout state has changed.
  */
 export class AuroCalendar extends RangeDatepicker {
     static get styles(): import("lit").CSSResult[];
@@ -10,6 +12,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         calendarEndMonth: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -17,6 +20,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         calendarStartMonth: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -24,6 +28,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         centralDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -31,25 +36,27 @@ export class AuroCalendar extends RangeDatepicker {
          */
         dateFrom: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * The ending date of the selected range.
          */
         dateTo: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Dropdown element that contains the calendar.
          * @private
+         * @type {HTMLElement}
          */
-        dropdown: {
-            type: ObjectConstructor;
-        };
+        dropdown: HTMLElement;
         /**
          * Flag indicating if the calendar is in fullscreen mode.
          */
         isFullscreen: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -58,6 +65,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         largeFullscreenHeadline: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -65,6 +73,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         maxDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -72,6 +81,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         minDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -80,6 +90,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         mobileBreakpoint: {
             type: NumberConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -89,6 +100,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         monthFirst: {
             type: BooleanConstructor;
+            attribute: string;
         };
         /**
          * Number of calendars to render.
@@ -96,6 +108,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         numCalendars: {
             type: NumberConstructor;
+            attribute: string;
         };
         /**
          * Flag indicating if the calendar is visible.
@@ -110,13 +123,13 @@ export class AuroCalendar extends RangeDatepicker {
          */
         localeCode: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Names of all 12 months. When omitted, names are derived from `localeCode`.
+         * @type {string[]}
          */
-        monthNames: {
-            type: ArrayConstructor;
-        };
+        monthNames: string[];
     };
     /**
      * Per-class flag that gates the `disabledDays` deprecation warning so it
@@ -181,13 +194,19 @@ export class AuroCalendar extends RangeDatepicker {
      * Support will be removed in a future major release.
      * @private
      */
+    /**
+     * @private
+     * @type {number[]}
+     */
     private _disabledDays;
     /**
      * @private
      */
     private numCalendars;
     /**
+     * Captured light-DOM slot nodes, keyed by slot name, forwarded into the bib.
      * @private
+     * @type {Record<string, Node[]>}
      */
     private slots;
     /**

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -18,6 +18,10 @@
  * @slot popover_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell popover for the specified date.
  * @csspart dropdown - Use for customizing the style of the dropdown.
  * @csspart trigger - Use for customizing the style of the datepicker trigger.
+ * @csspart wrapper - Use for customizing the style of the trigger content wrapper.
+ * @csspart mainLabel - Use for customizing the style of the main label in the snowflake layout.
+ * @csspart inputSection - Use for customizing the style of the input section within the trigger.
+ * @csspart accentIcon - Use for customizing the style of the leading calendar accent icon.
  * @csspart input - Use for customizing the style of the datepicker inputs.
  * @csspart calendarWrapper - Use for customizing the style of the calendar container.
  * @csspart calendar - Use for customizing the style of the calendar.
@@ -27,6 +31,7 @@
  * @event auroDatePicker-monthChanged - Notifies that the visible calendar month(s) have changed.
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
  * @event auroDatePicker-newSlotContent - Notifies that new slot content has been added to the datepicker.
+ * @event input - Notifies that the datepicker's value has changed.
  */
 export class AuroDatePicker extends AuroElement {
     static get shadowRootOptions(): {
@@ -50,6 +55,7 @@ export class AuroDatePicker extends AuroElement {
          */
         autoPlacement: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -62,17 +68,16 @@ export class AuroDatePicker extends AuroElement {
          * `blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not
          * invalidate the cache and the new entries will be silently ignored.
          * To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.
+         * @type {string[]}
          */
-        blackoutDates: {
-            type: ArrayConstructor;
-            reflect: boolean;
-        };
+        blackoutDates: string[];
         /**
          * Label announced for blackout (disabled but in-range) date cells.
          * @default 'unavailable'
          */
         blackoutLabel: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -80,6 +85,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarEndDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -88,6 +94,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarGridLabel: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -95,6 +102,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarFocusDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -102,6 +110,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarStartDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -109,6 +118,7 @@ export class AuroDatePicker extends AuroElement {
          */
         centralDate: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * If set, disables the datepicker.
@@ -122,6 +132,7 @@ export class AuroDatePicker extends AuroElement {
          */
         dvInputOnly: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -159,10 +170,12 @@ export class AuroDatePicker extends AuroElement {
          */
         hasAllValues: {
             type: BooleanConstructor;
+            attribute: boolean;
             reflect: boolean;
         };
         hasFocus: {
             type: BooleanConstructor;
+            attribute: boolean;
             reflect: boolean;
         };
         /**
@@ -170,20 +183,21 @@ export class AuroDatePicker extends AuroElement {
          */
         hasValue: {
             type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /** Exposes inputmode attribute for input. */
-        inputmode: {
-            type: StringConstructor;
             attribute: boolean;
             reflect: boolean;
         };
+        /**
+         * Sets the `inputmode` attribute on the underlying input, hinting at the virtual keyboard to display.
+         * @type {'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
+         */
+        inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
         /**
          * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600.
          */
         largeFullscreenHeadline: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -192,11 +206,24 @@ export class AuroDatePicker extends AuroElement {
          * @default 'classic'
          */
         layout: "classic" | "snowflake";
+        /**
+         * Sets the shape of the datepicker.
+         * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+         * @default 'classic'
+         */
+        shape: "box" | "classic" | "pill" | "pill-left" | "pill-right" | "rounded" | "snowflake";
+        /**
+         * Sets the size of the datepicker.
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+         * @default 'lg'
+         */
+        size: "xs" | "sm" | "md" | "lg" | "xl";
         /**
          * Maximum date. All dates after will be disabled.
          */
         maxDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -204,27 +231,29 @@ export class AuroDatePicker extends AuroElement {
          */
         minDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
-         * @private
+         * When set, the calendar displays the month before the year in the header.
          */
         monthFirst: {
             type: BooleanConstructor;
+            attribute: string;
         };
         /**
          * Names of all 12 months to render in the calendar.
          * When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`).
+         * @type {string[]}
          */
-        monthNames: {
-            type: ArrayConstructor;
-        };
+        monthNames: string[];
         /**
          * Accessible label for the next month navigation button.
          * @default 'Next month'
          */
         navLabelNextMonth: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -233,6 +262,7 @@ export class AuroDatePicker extends AuroElement {
          */
         navLabelPrevMonth: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -241,6 +271,7 @@ export class AuroDatePicker extends AuroElement {
          */
         noFlip: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -248,6 +279,7 @@ export class AuroDatePicker extends AuroElement {
          */
         noValidate: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -263,6 +295,7 @@ export class AuroDatePicker extends AuroElement {
          */
         onDark: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -279,6 +312,7 @@ export class AuroDatePicker extends AuroElement {
          */
         placeholderEndDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -303,6 +337,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelAfterRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -311,6 +346,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelBeforeRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -319,6 +355,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelEnd: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -329,6 +366,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelEndPreview: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -337,6 +375,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelInRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -345,16 +384,15 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelStart: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
          * Dates that the user should have for reference as part of their decision-making when selecting a date.
          * This should be a JSON string array of ISO date strings (`YYYY-MM-DD`).
+         * @type {string[]}
          */
-        referenceDates: {
-            type: ArrayConstructor;
-            reflect: boolean;
-        };
+        referenceDates: string[];
         /**
          * Populates the `required` attribute on the input. Used for client-side validation.
          */
@@ -367,6 +405,7 @@ export class AuroDatePicker extends AuroElement {
          */
         setCustomValidity: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `customError`.
@@ -374,24 +413,28 @@ export class AuroDatePicker extends AuroElement {
          */
         setCustomValidityCustomError: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `rangeOverflow`.
          */
         setCustomValidityRangeOverflow: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `rangeUnderflow`.
          */
         setCustomValidityRangeUnderflow: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `valueMissing`.
          */
         setCustomValidityValueMissing: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
@@ -434,6 +477,7 @@ export class AuroDatePicker extends AuroElement {
          */
         valueEnd: {
             type: StringConstructor;
+            attribute: string;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -467,7 +511,8 @@ export class AuroDatePicker extends AuroElement {
      *  @private
      */
     private domHandler;
-    appearance: string;
+    /** @type {'default' | 'inverse'} */
+    appearance: "default" | "inverse";
     touched: boolean;
     disabled: boolean;
     dvInputOnly: boolean;
@@ -480,7 +525,8 @@ export class AuroDatePicker extends AuroElement {
     rangeLabelInRange: string;
     rangeLabelAfterRange: string;
     rangeLabelEndPreview: string;
-    blackoutDates: any[];
+    /** @type {string[]} */
+    blackoutDates: string[];
     blackoutLabel: string;
     navLabelPrevMonth: string;
     navLabelNextMonth: string;
@@ -503,6 +549,7 @@ export class AuroDatePicker extends AuroElement {
     largeFullscreenHeadline: boolean;
     /**
      * @private
+     * @type {HTMLElement[]}
      */
     private dateSlotContent;
     /**
@@ -582,9 +629,10 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private handleClearClick;
-    layout: string;
-    shape: string;
-    size: string;
+    initializeArchitectureDefaults(): void;
+    layout: string | undefined;
+    shape: string | undefined;
+    size: string | undefined;
     /**
      * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
      * @returns {string[]}