@aurodesignsystem/auro-formkit 6.1.0 → 6.2.0

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;
         };
         /**
@@ -260,9 +292,11 @@ export class AuroDatePicker extends AuroElement {
         };
         /**
          * DEPRECATED - use `appearance="inverse"` instead.
+         * @deprecated Use `appearance="inverse"` instead.
          */
         onDark: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -279,6 +313,7 @@ export class AuroDatePicker extends AuroElement {
          */
         placeholderEndDate: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -303,6 +338,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelAfterRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -311,6 +347,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelBeforeRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -319,6 +356,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelEnd: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -329,6 +367,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelEndPreview: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -337,6 +376,7 @@ export class AuroDatePicker extends AuroElement {
          */
         rangeLabelInRange: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -345,16 +385,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 +406,7 @@ export class AuroDatePicker extends AuroElement {
          */
         setCustomValidity: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `customError`.
@@ -374,24 +414,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 +478,7 @@ export class AuroDatePicker extends AuroElement {
          */
         valueEnd: {
             type: StringConstructor;
+            attribute: string;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -467,7 +512,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 +526,8 @@ export class AuroDatePicker extends AuroElement {
     rangeLabelInRange: string;
     rangeLabelAfterRange: string;
     rangeLabelEndPreview: string;
-    blackoutDates: any[];
+    /** @type {string[]} */
+    blackoutDates: string[];
     blackoutLabel: string;
     navLabelPrevMonth: string;
     navLabelNextMonth: string;
@@ -493,9 +540,11 @@ export class AuroDatePicker extends AuroElement {
     calendarStartDate: any;
     calendarEndDate: any;
     calendarFocusDate: any;
-    fullscreenBreakpoint: string;
+    /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
+    fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
     _validLocale: string;
-    placement: string;
+    /** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
+    placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
     offset: number;
     noFlip: boolean;
     shift: boolean;
@@ -503,6 +552,7 @@ export class AuroDatePicker extends AuroElement {
     largeFullscreenHeadline: boolean;
     /**
      * @private
+     * @type {HTMLElement[]}
      */
     private dateSlotContent;
     /**
@@ -582,9 +632,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[]}