@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/calcite-input-date-picker/customElement.d.ts

@@ -3,48 +3,102 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HeadingLevel } from "../functional/Heading.js";
-import type { Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { DatePicker } from "../calcite-date-picker/customElement.js";
 
-/**
- * @cssproperty [--calcite-input-date-picker-actions-icon-color] - Specifies the component's actions icon color.
- * @cssproperty [--calcite-input-date-picker-actions-icon-color-hover] - Specifies the component's actions icon color on hover.
- * @cssproperty [--calcite-input-date-picker-background-color] - Specifies the component's input background color.
- * @cssproperty [--calcite-input-date-picker-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color] - Specifies the background color of the component's calendar actions.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-hover] - Specifies the background color of the component's calendar actions when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-press] - Specifies the background color of the component's calendar actions when pressed.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-text-color] - Specifies the text color of the component's calendar actions.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-text-color-press] - Specifies the text color of the component's calendar actions when pressed.
- * @cssproperty [--calcite-input-date-picker-calendar-border-color] - Specifies the border color of the component's calendar.
- * @cssproperty [--calcite-input-date-picker-calendar-corner-radius] - Specifies the corner radius of the component's calendar.
- * @cssproperty [--calcite-input-date-picker-calendar-current-day-text-color] - Specifies the text color of the component's calendar current day element.
- * @cssproperty [--calcite-input-date-picker-calendar-day-background-color] - Specifies the background color of the component's calendar day elements.
- * @cssproperty [--calcite-input-date-picker-calendar-day-background-color-hover] - Specifies the background color of the component's calendar day elements when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-day-current-text-color] - [Deprecated] in v3.3.1, removal target v6.0.0 - Use `--calcite-input-date-picker-calendar-current-day-text-color` instead. Specifies the text color of current day of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-day-range-background-color] - Specifies the background color of the component's calendar selected day range.
- * @cssproperty [--calcite-input-date-picker-calendar-day-range-text-color] - Specifies the text color of the component's calendar selected day range.
- * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-selected] - Specifies the text color of component's calendar selected day.
- * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-background-color-hover] - Specifies the background color of the component's calendar day elements outside the current range when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-text-color-hover] - Specifies the text color of the component's calendar day elements outside the current range when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-day-text-color] - Specifies the text color of the component's calendar day elements.
- * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-hover] - Specifies the text color of the component's calendar day elements when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-selected-background-color] - Specifies the background color of the component's calendar selected day.
- * @cssproperty [--calcite-input-date-picker-calendar-shadow] - Specifies the component's calendar shadow.
- * @cssproperty [--calcite-input-date-picker-calendar-icon-color] - Specifies the component's calendar icon color.
- * @cssproperty [--calcite-input-date-picker-calendar-icon-color-hover] - Specifies the component's calendar icon color when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-month-select-text-color] - Specifies the text color of the component's calendar selected month.
- * @cssproperty [--calcite-input-date-picker-calendar-range-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
- * @cssproperty [--calcite-input-date-picker-calendar-text-color] - Specifies the text color of the component's calendar week, year & suffix.
- * @cssproperty [--calcite-input-date-picker-corner-radius] - Specifies the component's input corner radius.
- * @cssproperty [--calcite-input-date-picker-divider-color] - When `range` is `true`, specifies the component's divider color between two inputs.
- * @cssproperty [--calcite-input-date-picker-icon-color] - Specifies the component's input icon color.
- * @cssproperty [--calcite-input-date-picker-placeholder-text-color] - Specifies the component's input placeholder text color.
- * @cssproperty [--calcite-input-date-picker-shadow] - Specifies the component's input shadow.
- * @cssproperty [--calcite-input-date-picker-text-color] - Specifies the component's input text color.
- * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's actions icon color. */
+  "--calcite-input-date-picker-actions-icon-color": "*";
+  /** Specifies the component's actions icon color on hover. */
+  "--calcite-input-date-picker-actions-icon-color-hover": "*";
+  /** Specifies the component's input background color. */
+  "--calcite-input-date-picker-background-color": "*";
+  /** Specifies the component's input border color. */
+  "--calcite-input-date-picker-border-color": "*";
+  /** Specifies the background color of the component's calendar actions. */
+  "--calcite-input-date-picker-calendar-actions-background-color": "*";
+  /** Specifies the background color of the component's calendar actions when hovered. */
+  "--calcite-input-date-picker-calendar-actions-background-color-hover": "*";
+  /** Specifies the background color of the component's calendar actions when pressed. */
+  "--calcite-input-date-picker-calendar-actions-background-color-press": "*";
+  /** Specifies the text color of the component's calendar actions. */
+  "--calcite-input-date-picker-calendar-actions-text-color": "*";
+  /** Specifies the text color of the component's calendar actions when pressed. */
+  "--calcite-input-date-picker-calendar-actions-text-color-press": "*";
+  /** Specifies the border color of the component's calendar. */
+  "--calcite-input-date-picker-calendar-border-color": "*";
+  /** Specifies the corner radius of the component's calendar. */
+  "--calcite-input-date-picker-calendar-corner-radius": "*";
+  /** Specifies the text color of the component's calendar current day element. */
+  "--calcite-input-date-picker-calendar-current-day-text-color": "*";
+  /** Specifies the background color of the component's calendar day elements. */
+  "--calcite-input-date-picker-calendar-day-background-color": "*";
+  /** Specifies the background color of the component's calendar day elements when hovered. */
+  "--calcite-input-date-picker-calendar-day-background-color-hover": "*";
+  /**
+   * Specifies the text color of current day of the component's date-picker.
+   *
+   * @deprecated in v3.3.1, removal target v6.0.0 - Use `--calcite-input-date-picker-calendar-current-day-text-color` instead.
+   */
+  "--calcite-input-date-picker-calendar-day-current-text-color": "*";
+  /** Specifies the background color of the component's calendar selected day range. */
+  "--calcite-input-date-picker-calendar-day-range-background-color": "*";
+  /** Specifies the text color of the component's calendar selected day range. */
+  "--calcite-input-date-picker-calendar-day-range-text-color": "*";
+  /** Specifies the text color of component's calendar selected day. */
+  "--calcite-input-date-picker-calendar-day-text-color-selected": "*";
+  /** Specifies the background color of the component's calendar day elements outside the current range when hovered. */
+  "--calcite-input-date-picker-calendar-day-outside-range-background-color-hover": "*";
+  /** Specifies the text color of the component's calendar day elements outside the current range when hovered. */
+  "--calcite-input-date-picker-calendar-day-outside-range-text-color-hover": "*";
+  /** Specifies the text color of the component's calendar day elements. */
+  "--calcite-input-date-picker-calendar-day-text-color": "*";
+  /** Specifies the text color of the component's calendar day elements when hovered. */
+  "--calcite-input-date-picker-calendar-day-text-color-hover": "*";
+  /** Specifies the background color of the component's calendar selected day. */
+  "--calcite-input-date-picker-calendar-selected-background-color": "*";
+  /** Specifies the component's calendar shadow. */
+  "--calcite-input-date-picker-calendar-shadow": "*";
+  /** Specifies the component's calendar icon color. */
+  "--calcite-input-date-picker-calendar-icon-color": "*";
+  /** Specifies the component's calendar icon color when hovered. */
+  "--calcite-input-date-picker-calendar-icon-color-hover": "*";
+  /** Specifies the text color of the component's calendar selected month. */
+  "--calcite-input-date-picker-calendar-month-select-text-color": "*";
+  /** When `range` is `true`, specifies the divider color between the component's calendars. */
+  "--calcite-input-date-picker-calendar-range-divider-color": "*";
+  /** Specifies the text color of the component's calendar week, year & suffix. */
+  "--calcite-input-date-picker-calendar-text-color": "*";
+  /** Specifies the component's input corner radius. */
+  "--calcite-input-date-picker-corner-radius": "*";
+  /** When `range` is `true`, specifies the component's divider color between two inputs. */
+  "--calcite-input-date-picker-divider-color": "*";
+  /** Specifies the component's input icon color. */
+  "--calcite-input-date-picker-icon-color": "*";
+  /** Specifies the component's input placeholder text color. */
+  "--calcite-input-date-picker-placeholder-text-color": "*";
+  /** Specifies the component's input shadow. */
+  "--calcite-input-date-picker-shadow": "*";
+  /** Specifies the component's input text color. */
+  "--calcite-input-date-picker-text-color": "*";
+  /** Specifies the background color of the input's `clearable` element. */
+  "--calcite-input-date-picker-input-action-background-color": "*";
+  /** Specifies the background color of the input's `clearable` element when hovered. */
+  "--calcite-input-date-picker-input-action-background-color-hover": "*";
+  /** Specifies the background color of the input's `clearable` element when pressed. */
+  "--calcite-input-date-picker-input-action-background-color-press": "*";
+  /** Specifies the icon color of the input's `clearable` and toggle elements. */
+  "--calcite-input-date-picker-input-action-icon-color": "*";
+  /** Specifies the icon color of the input's `clearable` and toggle elements when hovered. */
+  "--calcite-input-date-picker-input-action-icon-color-hover": "*";
+  /** Specifies the icon color of the input's `clearable` and toggle elements when pressed. */
+  "--calcite-input-date-picker-input-action-icon-color-press": "*";
+}
+}
+
+/** @slot [label-content] - A slot for rendering content next to the component's `labelText`. */
 export abstract class InputDatePicker extends LitElement {
   /**
    * When `range` is `true`, specifies the number of calendars displayed.
@@ -52,32 +106,34 @@ export abstract class InputDatePicker extends LitElement {
    * @default 2
    */
   accessor calendars: 1 | 2;
+  /**
+   * When `true`, displays a clear button when the component has a value.
+   *
+   * @default false
+   */
+  accessor clearable: boolean;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
    *
    * @default false
    */
   accessor focusTrapDisabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Defines the component's layout.
    *
@@ -88,35 +144,44 @@ export abstract class InputDatePicker extends LitElement {
    * When the component resides in a form,
    * specifies the latest allowed date ("yyyy-mm-dd").
    */
-  accessor max: string;
+  accessor max: string | undefined;
   /** Specifies the latest allowed date as a full date object. */
-  accessor maxAsDate: Date;
-  /** Overrides individual strings used by the component. */
+  accessor maxAsDate: Date | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      chooseDate?: string;
-      date?: string;
-      dateFormat?: string;
-      endDate?: string;
-      required?: string;
-      startDate?: string;
+      chooseDate?: string | undefined;
+      clear?: string | undefined;
+      date?: string | undefined;
+      dateFormat?: string | undefined;
+      endDate?: string | undefined;
+      required?: string | undefined;
+      startDate?: string | undefined;
   } & DatePicker["messageOverrides"];
   /**
    * When the component resides in a form,
    * specifies the earliest allowed date ("yyyy-mm-dd").
    */
-  accessor min: string;
+  accessor min: string | undefined;
   /** Specifies the earliest allowed date as a full date object. */
-  accessor minAsDate: Date;
+  accessor minAsDate: Date | undefined;
   /**
    * Specifies the component's month style.
    *
    * @default "wide"
    */
   accessor monthStyle: "abbreviated" | "wide";
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, displays the `calcite-date-picker` component.
    *
@@ -124,15 +189,21 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
   accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Specifies placeholder text for the component.
+   *
+   * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  accessor placeholder: string | undefined;
   /**
    * Determines the `calcite-date-picker`'s placement relative to the input.
    *
@@ -179,18 +250,16 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor status: Status;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -200,7 +269,7 @@ export abstract class InputDatePicker extends LitElement {
   /** Selected date as a string in ISO format (`"yyyy-mm-dd"`). */
   accessor value: string | string[];
   /** The component's `value` as a full date object. */
-  accessor valueAsDate: Date | Date[];
+  accessor valueAsDate: Date | Date[] | undefined;
   /**
    * Updates the component's position.
    *