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

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

@@ -1,31 +1,66 @@
+/**
+ * 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
@@ -35,21 +70,41 @@ export class AuroCalendarCell extends LitElement {
          */
         disabledDays: {
             type: ArrayConstructor;
+            attribute: string;
         };
+        /**
+         * Whether this cell represents the current date (today).
+         */
         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[];

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,12 +20,14 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar {
          */
         localeCode: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Names of all 12 months. When omitted, names are derived from `localeCode`.
          */
         monthNames: {
             type: ArrayConstructor;
+            attribute: string;
         };
     };
     /**

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,12 +36,14 @@ 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.
@@ -50,6 +57,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         isFullscreen: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -58,6 +66,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         largeFullscreenHeadline: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -65,6 +74,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         maxDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -72,6 +82,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         minDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -80,6 +91,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         mobileBreakpoint: {
             type: NumberConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -89,6 +101,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         monthFirst: {
             type: BooleanConstructor;
+            attribute: string;
         };
         /**
          * Number of calendars to render.
@@ -96,6 +109,7 @@ export class AuroCalendar extends RangeDatepicker {
          */
         numCalendars: {
             type: NumberConstructor;
+            attribute: string;
         };
         /**
          * Flag indicating if the calendar is visible.
@@ -110,12 +124,14 @@ export class AuroCalendar extends RangeDatepicker {
          */
         localeCode: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Names of all 12 months. When omitted, names are derived from `localeCode`.
          */
         monthNames: {
             type: ArrayConstructor;
+            attribute: string;
         };
     };
     /**

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;
         };
         /**
@@ -65,6 +71,7 @@ export class AuroDatePicker extends AuroElement {
          */
         blackoutDates: {
             type: ArrayConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -73,6 +80,7 @@ export class AuroDatePicker extends AuroElement {
          */
         blackoutLabel: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -80,6 +88,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarEndDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -88,6 +97,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarGridLabel: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -95,6 +105,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarFocusDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -102,6 +113,7 @@ export class AuroDatePicker extends AuroElement {
          */
         calendarStartDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -109,6 +121,7 @@ export class AuroDatePicker extends AuroElement {
          */
         centralDate: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * If set, disables the datepicker.
@@ -122,6 +135,7 @@ export class AuroDatePicker extends AuroElement {
          */
         dvInputOnly: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -159,10 +173,12 @@ export class AuroDatePicker extends AuroElement {
          */
         hasAllValues: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         hasFocus: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -170,20 +186,21 @@ export class AuroDatePicker extends AuroElement {
          */
         hasValue: {
             type: BooleanConstructor;
+            attribute: string;
             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 +209,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,13 +234,15 @@ 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.
@@ -218,6 +250,7 @@ export class AuroDatePicker extends AuroElement {
          */
         monthNames: {
             type: ArrayConstructor;
+            attribute: string;
         };
         /**
          * Accessible label for the next month navigation button.
@@ -225,6 +258,7 @@ export class AuroDatePicker extends AuroElement {
          */
         navLabelNextMonth: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -233,6 +267,7 @@ export class AuroDatePicker extends AuroElement {
          */
         navLabelPrevMonth: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -241,6 +276,7 @@ export class AuroDatePicker extends AuroElement {
          */
         noFlip: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -248,6 +284,7 @@ export class AuroDatePicker extends AuroElement {
          */
         noValidate: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -263,6 +300,7 @@ export class AuroDatePicker extends AuroElement {
          */
         onDark: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -279,6 +317,7 @@ export class AuroDatePicker extends AuroElement {
          */
         placeholderEndDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -303,6 +342,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelAfterRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -311,6 +351,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelBeforeRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -319,6 +360,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelEnd: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -329,6 +371,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelEndPreview: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -337,6 +380,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelInRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -345,6 +389,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelStart: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -353,6 +398,7 @@ export class AuroDatePicker extends AuroElement {
          */
         referenceDates: {
             type: ArrayConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -367,6 +413,7 @@ export class AuroDatePicker extends AuroElement {
          */
         setCustomValidity: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `customError`.
@@ -374,24 +421,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 +485,7 @@ export class AuroDatePicker extends AuroElement {
          */
         valueEnd: {
             type: StringConstructor;
+            attribute: string;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -582,9 +634,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[]}