@esri/calcite-components 5.2.0-next.4 → 5.2.0-next.40

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

@@ -43,6 +43,12 @@ import type { DatePicker } from "../calcite-date-picker/customElement.js";
  * @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.
+ * @cssproperty [--calcite-input-date-picker-input-action-background-color] - Specifies the background color of the input's `clearable` element.
+ * @cssproperty [--calcite-input-date-picker-input-action-background-color-hover] - Specifies the background color of the input's `clearable` element when hovered.
+ * @cssproperty [--calcite-input-date-picker-input-action-background-color-press] - Specifies the background color of the input's `clearable` element when pressed.
+ * @cssproperty [--calcite-input-date-picker-input-action-icon-color] - Specifies the icon color of the input's `clearable` and toggle elements.
+ * @cssproperty [--calcite-input-date-picker-input-action-icon-color-hover] - Specifies the icon color of the input's `clearable` and toggle elements when hovered.
+ * @cssproperty [--calcite-input-date-picker-input-action-icon-color-press] - Specifies the icon color of the input's `clearable` and toggle elements when pressed.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
 export abstract class InputDatePicker extends LitElement {
@@ -52,6 +58,12 @@ 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.
    *
@@ -87,14 +99,19 @@ export abstract class InputDatePicker extends LitElement {
   accessor max: string | undefined;
   /** Specifies the latest allowed date as a full date object. */
   accessor maxAsDate: Date | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * 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,
@@ -109,7 +126,11 @@ export abstract class InputDatePicker extends LitElement {
    * @default "wide"
    */
   accessor monthStyle: "abbreviated" | "wide";
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * 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 | undefined;
@@ -120,15 +141,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.
    *

package/dist/components/calcite-input-date-picker/customElement.js

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { css, isServer, nothing, html } from "lit";
+import { css, isServer, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
@@ -8,11 +8,13 @@ import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { l as datePartsFromISO, d as dateFromISO, a as dateToISO, b as dateFromRange, m as datePartsFromLocalizedString, o as dateFromLocalizedString, i as inRange } from "../../chunks/date.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { n as numberKeys } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { b as getSupportedNumberingSystem, c as getDateFormatSupportedLocale, n as numberStringFormatter } from "../../chunks/locale.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getMinMaxSource, a as getValueAsDateRange, b as applyLocaleOverride, c as getLocaleData } from "../../chunks/utils3.js";
+import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { g as guid } from "../../chunks/guid.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
@@ -21,21 +23,23 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useForm } from "../../chunks/useForm.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host .menu-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}:host .menu-container:popover-open{display:block}:host .menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;box-shadow:var(--calcite-input-date-picker-shadow, var(--calcite-shadow-none))}:host .menu-container .calcite-floating-ui-anim{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-md))}:host([scale=s]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-sm);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-lg))}:host([scale=m]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-md);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxl))}:host([scale=l]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-lg);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxxl))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-none));transform:translateZ(0)}.input-wrapper{position:relative}.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input-wrapper:focus-within~.input-wrapper .chevron-icon,.input-wrapper:active~.input-wrapper .chevron-icon,.input-wrapper:hover~.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-internal-date-picker-toggle-spacing)}:host([range]) .container{display:flex}:host([range]) .input-container{display:flex;flex:1 1 auto}:host([range]) .input-wrapper{flex:1 1 auto}.divider-container{display:flex;align-items:stretch;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}:host([layout=horizontal]) .divider-container{inline-size:var(--calcite-spacing-px)}.divider{display:inline-block;margin-block:var(--calcite-spacing-xxs);background-color:var(--calcite-input-date-picker-divider-color, var(--calcite-color-border-2));inline-size:var(--calcite-spacing-px)}:host([layout=vertical]) .divider-container{height:1px;width:100%;border-top-width:0px;border-bottom-width:0px;border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-none);padding-inline:var(--calcite-spacing-md)}:host([layout=vertical]) .divider-container .divider{margin-top:0;margin-bottom:0;height:1px;width:100%}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}.menu-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.menu-container{opacity:0;inset-block-start:0;left:0}}.menu-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.menu-container:popover-open{display:block}.menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.input .calcite-input__wrapper{margin-top:0}.vertical-chevron-container{display:flex;align-items:center;border-width:1px;border-style:solid;padding-inline:var(--calcite-spacing-md);background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input));border-inline-start-width:0}.vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.vertical-chevron-container calcite-icon:hover{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}:host([range][layout=vertical][scale=s]) .vertical-chevron-container,:host([range][layout=vertical][scale=s]) .divider-container{padding-inline:var(--calcite-spacing-sm)}:host([range][layout=vertical][scale=l]) .vertical-chevron-container,:host([range][layout=vertical][scale=l]) .divider-container{padding-inline:var(--calcite-spacing-lg)}.container:focus-within .vertical-chevron-container calcite-icon,.container:active .vertical-chevron-container calcite-icon,.container:hover .vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input{--calcite-input-text-background-color: var(--calcite-input-date-picker-background-color);--calcite-input-text-border-color: var(--calcite-input-date-picker-border-color);--calcite-input-text-corner-radius: var(--calcite-input-date-picker-corner-radius);--calcite-input-text-shadow: var(--calcite-input-date-picker-shadow);--calcite-input-text-icon-color: var(--calcite-input-date-picker-icon-color);--calcite-input-text-text-color: var(--calcite-input-date-picker-text-color);--calcite-input-text-placeholder-text-color: var(--calcite-input-date-picker-placeholder-text-color)}:host([range]) .input--start{--calcite-internal-input-text-input-border-inline-end-width: var(--calcite-border-width-none)}:host([layout=vertical][range]) .input--start{--calcite-internal-input-text-icon-border-block-end-width: var(--calcite-border-width-none);--calcite-internal-input-text-input-border-block-end-width: var(--calcite-border-width-none)}:host([layout=horizontal]) .input--end{--calcite-internal-input-text-icon-border-inline-start-width: var(--calcite-border-width-none)}:host([layout=vertical]) .input--end{--calcite-internal-input-text-input-border-inline-end-width: var(--calcite-border-width-none);--calcite-internal-input-text-input-border-block-start-width: var(--calcite-border-width-none);--calcite-internal-input-text-icon-border-block-start-width: var(--calcite-border-width-none)}calcite-date-picker{--calcite-date-picker-border-color: var(--calcite-input-date-picker-calendar-border-color);--calcite-date-picker-corner-radius: var(--calcite-input-date-picker-calendar-corner-radius);--calcite-date-picker-range-calendar-divider-color: var(--calcite-input-date-picker-calendar-range-divider-color);--calcite-date-picker-week-header-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-header-action-background-color: var( --calcite-input-date-picker-calendar-actions-background-color );--calcite-date-picker-header-action-background-color-hover: var( --calcite-input-date-picker-calendar-actions-background-color-hover );--calcite-date-picker-header-action-background-color-press: var( --calcite-input-date-picker-calendar-actions-background-color-press );--calcite-date-picker-header-action-text-color: var(--calcite-input-date-picker-calendar-actions-text-color);--calcite-date-picker-header-action-text-color-press: var( --calcite-input-date-picker-calendar-actions-text-color-press );--calcite-date-picker-year-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-month-select-text-color: var(--calcite-input-date-picker-calendar-month-select-text-color);--calcite-date-picker-month-select-icon-color: var(--calcite-input-date-picker-calendar-icon-color);--calcite-date-picker-month-select-icon-color-hover: var(--calcite-input-date-picker-calendar-icon-color-hover);--calcite-date-picker-day-background-color: var(--calcite-input-date-picker-calendar-day-background-color);--calcite-date-picker-day-background-color-hover: var( --calcite-input-date-picker-calendar-day-background-color-hover );--calcite-date-picker-day-background-color-selected: var( --calcite-input-date-picker-calendar-selected-background-color );--calcite-date-picker-day-text-color: var(--calcite-input-date-picker-calendar-day-text-color);--calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-calendar-day-text-color-hover);--calcite-date-picker-day-text-color-selected: var(--calcite-input-date-picker-calendar-day-text-color-selected);--calcite-date-picker-current-day-text-color: var( --calcite-input-date-picker-calendar-current-day-text-color, var(--calcite-input-date-picker-calendar-day-current-text-color) );--calcite-date-picker-day-range-text-color: var(--calcite-input-date-picker-calendar-day-range-text-color);--calcite-date-picker-day-range-background-color: var( --calcite-input-date-picker-calendar-day-range-background-color );--calcite-date-picker-day-outside-range-background-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-background-color-hover );--calcite-date-picker-day-outside-range-text-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-text-color-hover )}.assistive-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host .menu-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}:host .menu-container:popover-open{display:block}:host .menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;box-shadow:var(--calcite-input-date-picker-shadow, var(--calcite-shadow-none))}:host .menu-container .calcite-floating-ui-anim{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-md))}:host([scale=s]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-space-2xs);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-lg))}:host([scale=s]) .clear-button{block-size:var(--calcite-space-2xl)}:host([scale=m]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-space-sm);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxl))}:host([scale=m]) .clear-button{block-size:var(--calcite-space-3xl)}:host([scale=l]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-space-sm-plus);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxxl))}:host([scale=l]) .clear-button{block-size:var(--calcite-space-4xl)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-none));transform:translateZ(0)}.input-container,.input-wrapper{position:relative}.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-input-date-picker-input-action-icon-color, var(--calcite-color-text-3)))}.input-wrapper:is(:focus-within,:hover) .chevron-icon,.input-wrapper:is(:focus-within,:hover)~.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-input-date-picker-input-action-icon-color-hover, var(--calcite-color-text-1)))}.input-wrapper:is(:focus-within,:active) .chevron-icon,.input-wrapper:is(:focus-within,:active)~.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-input-date-picker-input-action-icon-color-press, var(--calcite-color-text-1)))}.horizontal-actions-container{position:absolute;display:flex;align-items:center;inset-inline-end:var(--calcite-border-width-sm);inset-block:var(--calcite-space-none)}.horizontal-actions-container .toggle-icon{position:relative;inset:unset;block-size:100%}.vertical-actions-container{display:flex;align-items:center;border-width:var(--calcite-border-width-sm);border-style:solid;background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-surface-2));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input));padding-inline:var(--calcite-space-md);padding-inline-start:var(--calcite-space-none);border-inline-start-width:var(--calcite-border-width-none)}.vertical-actions-container:hover{cursor:pointer}.vertical-actions-container .toggle-icon{position:relative;inset:unset}.vertical-actions-container .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-input-date-picker-input-action-icon-color, var(--calcite-color-text-3)))}.clear-button{display:flex}.toggle-icon{position:absolute;display:flex;align-items:center;cursor:pointer;inset-inline-end:var(--calcite-space-none);inset-block:var(--calcite-space-none);padding-inline:var(--calcite-internal-date-picker-toggle-spacing);padding-inline-start:var(--calcite-space-none)}:host([range]) .container{display:flex}:host([range]) .input-container{display:flex;flex:1 1 auto}:host([range]) .input-wrapper{flex:1 1 auto}.divider-container{display:flex;align-items:stretch;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}:host([layout=horizontal]) .divider-container{inline-size:var(--calcite-spacing-px)}.divider{display:inline-block;margin-block:var(--calcite-spacing-xxs);background-color:var(--calcite-input-date-picker-divider-color, var(--calcite-color-border-2));inline-size:var(--calcite-spacing-px)}:host([layout=vertical]) .divider-container{height:1px;border-top-width:0px;border-bottom-width:0px;border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-none);inline-size:calc(100% - var(--calcite-space-md));padding-inline:var(--calcite-space-md)}:host([layout=vertical]) .divider-container .divider{margin-top:0;margin-bottom:0;height:1px;width:100%}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}:host([range][layout=vertical]) .vertical-actions-container{padding-inline-end:var(--calcite-space-none)}:host([range][layout=vertical]) .vertical-actions-container .toggle-icon{cursor:default;pointer-events:none}:host([range][layout=vertical]) .vertical-actions-container:not(:has(.clear-button)) .toggle-icon{padding-inline-start:var(--calcite-space-md)}:host([range][layout=vertical]) .clear-button{margin-inline-start:var(--calcite-space-md)}.menu-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.menu-container{opacity:0;inset-block-start:0;left:0}}.menu-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.menu-container:popover-open{display:block}.menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.input .calcite-input__wrapper{margin-top:0}:host([range][layout=vertical][scale=s]) .vertical-actions-container{padding-inline-end:var(--calcite-space-none)}:host([range][layout=vertical][scale=s]) .vertical-actions-container:not(:has(.clear-button)) .toggle-icon{padding-inline-start:var(--calcite-space-sm)}:host([range][layout=vertical][scale=s]) .divider-container{inline-size:calc(100% - var(--calcite-space-sm));padding-inline:var(--calcite-space-sm)}:host([range][layout=vertical][scale=s]) .clear-button{margin-inline-start:var(--calcite-space-sm)}:host([range][layout=vertical][scale=l]) .vertical-actions-container{padding-inline-end:var(--calcite-space-none)}:host([range][layout=vertical][scale=l]) .vertical-actions-container:not(:has(.clear-button)) .toggle-icon{padding-inline-start:var(--calcite-space-lg)}:host([range][layout=vertical][scale=l]) .divider-container{inline-size:calc(100% - var(--calcite-space-lg));padding-inline:var(--calcite-space-lg)}:host([range][layout=vertical][scale=l]) .clear-button{margin-inline-start:var(--calcite-space-lg)}:host([range][layout=vertical]) .input-container:has(.input-wrapper:focus-within,.input-wrapper:hover)+.vertical-actions-container .chevron-icon,:host([range][layout=vertical]) .vertical-actions-container:hover .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-input-date-picker-input-action-icon-color-hover, var(--calcite-color-text-1)))}:host([range][layout=vertical]) .input-container:has(.input-wrapper:active)+.vertical-actions-container .chevron-icon,:host([range][layout=vertical]) .vertical-actions-container:active .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-input-date-picker-input-action-icon-color-press, var(--calcite-color-text-1)))}.input{--calcite-input-text-background-color: var(--calcite-input-date-picker-background-color);--calcite-input-text-border-color: var(--calcite-input-date-picker-border-color);--calcite-input-text-corner-radius: var(--calcite-input-date-picker-corner-radius);--calcite-input-text-shadow: var(--calcite-input-date-picker-shadow);--calcite-input-text-icon-color: var(--calcite-input-date-picker-icon-color);--calcite-input-text-text-color: var(--calcite-input-date-picker-text-color);--calcite-input-text-placeholder-text-color: var(--calcite-input-date-picker-placeholder-text-color)}:host([range]) .input--start{--calcite-internal-input-text-input-border-inline-end-width: var(--calcite-border-width-none)}:host([layout=vertical][range]) .input--start{--calcite-internal-input-text-icon-border-block-end-width: var(--calcite-border-width-none);--calcite-internal-input-text-input-border-block-end-width: var(--calcite-border-width-none)}:host([layout=horizontal]) .input--end{--calcite-internal-input-text-icon-border-inline-start-width: var(--calcite-border-width-none)}:host([range][layout=horizontal]) .container:has(.input-wrapper[data-position=end]:focus-within) .input-wrapper[data-position=end]{--calcite-input-date-picker-border-color: var(--calcite-color-brand);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([range][layout=horizontal]) .container:has(.input-wrapper[data-position=end]:focus-within) .input-wrapper[data-position=start] .input--start{--calcite-internal-input-text-focus-outline-color: transparent}:host([status=invalid][range][layout=horizontal]) .container:has(.input-wrapper[data-position=end]:focus-within) .input-wrapper[data-position=end]{--calcite-input-date-picker-border-color: var(--calcite-color-status-danger);outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([layout=vertical]) .input--end{--calcite-internal-input-text-input-border-inline-end-width: var(--calcite-border-width-none);--calcite-internal-input-text-input-border-block-start-width: var(--calcite-border-width-none);--calcite-internal-input-text-icon-border-block-start-width: var(--calcite-border-width-none)}calcite-date-picker{--calcite-date-picker-border-color: var(--calcite-input-date-picker-calendar-border-color);--calcite-date-picker-corner-radius: var(--calcite-input-date-picker-calendar-corner-radius);--calcite-date-picker-range-calendar-divider-color: var(--calcite-input-date-picker-calendar-range-divider-color);--calcite-date-picker-week-header-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-header-action-background-color: var( --calcite-input-date-picker-calendar-actions-background-color );--calcite-date-picker-header-action-background-color-hover: var( --calcite-input-date-picker-calendar-actions-background-color-hover );--calcite-date-picker-header-action-background-color-press: var( --calcite-input-date-picker-calendar-actions-background-color-press );--calcite-date-picker-header-action-text-color: var(--calcite-input-date-picker-calendar-actions-text-color);--calcite-date-picker-header-action-text-color-press: var( --calcite-input-date-picker-calendar-actions-text-color-press );--calcite-date-picker-year-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-month-select-text-color: var(--calcite-input-date-picker-calendar-month-select-text-color);--calcite-date-picker-month-select-icon-color: var(--calcite-input-date-picker-calendar-icon-color);--calcite-date-picker-month-select-icon-color-hover: var(--calcite-input-date-picker-calendar-icon-color-hover);--calcite-date-picker-day-background-color: var(--calcite-input-date-picker-calendar-day-background-color);--calcite-date-picker-day-background-color-hover: var( --calcite-input-date-picker-calendar-day-background-color-hover );--calcite-date-picker-day-background-color-selected: var( --calcite-input-date-picker-calendar-selected-background-color );--calcite-date-picker-day-text-color: var(--calcite-input-date-picker-calendar-day-text-color);--calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-calendar-day-text-color-hover);--calcite-date-picker-day-text-color-selected: var(--calcite-input-date-picker-calendar-day-text-color-selected);--calcite-date-picker-current-day-text-color: var( --calcite-input-date-picker-calendar-current-day-text-color, var(--calcite-input-date-picker-calendar-day-current-text-color) );--calcite-date-picker-day-range-text-color: var(--calcite-input-date-picker-calendar-day-range-text-color);--calcite-date-picker-day-range-background-color: var( --calcite-input-date-picker-calendar-day-range-background-color );--calcite-date-picker-day-outside-range-background-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-background-color-hover );--calcite-date-picker-day-outside-range-text-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-text-color-hover )}.assistive-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}.clear-button--container{display:flex;cursor:pointer;align-items:center}.clear-button--container:hover calcite-action{--calcite-action-background-color: var(--calcite-input-date-picker-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color: var(--calcite-input-date-picker-input-action-icon-color-hover, var(--calcite-color-text-1))}.clear-button--container:active calcite-action{--calcite-action-background-color: var(--calcite-input-date-picker-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color: var(--calcite-input-date-picker-input-action-icon-color-press, var(--calcite-color-text-1))}.clear-button--container calcite-action{--calcite-internal-action-height: 100%;--calcite-internal-action-padding-inline: var(--calcite-spacing-none);--calcite-internal-action-padding-block: var(--calcite-spacing-none);--calcite-action-background-color: var(--calcite-input-date-picker-input-action-background-color, var(--calcite-color-foreground-2));--calcite-action-text-color: var(--calcite-input-date-picker-input-action-icon-color)}.clear-button--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-input-date-picker-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color-press: var(--calcite-input-date-picker-input-action-icon-color-hover)}.clear-button--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-input-date-picker-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color-press: var(--calcite-input-date-picker-input-action-icon-color-press)}:host([scale=s]) .clear-button--container{padding:var(--calcite-space-2xs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-space-2xs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-space-sm-plus)}`;
 const CSS = {
   assistiveText: "assistive-text",
   calendarWrapper: "calendar-wrapper",
+  clearButton: "clear-button",
   container: "container",
   dividerContainer: "divider-container",
   divider: "divider",
   endInput: "input--end",
   inputContainer: "input-container",
+  horizontalActionsContainer: "horizontal-actions-container",
   inputWrapper: "input-wrapper",
   input: "input",
   menu: "menu-container",
   toggleIcon: "toggle-icon",
   startInput: "input--start",
-  verticalChevronContainer: "vertical-chevron-container",
+  verticalActionsContainer: "vertical-actions-container",
   chevronIcon: "chevron-icon"
 };
 const idPrefix = "calcite-input-date-picker";
@@ -95,6 +99,7 @@ class InputDatePicker extends LitElement {
     this.formSupport = useForm({
       inputType: "date"
     })(this);
+    this.labelable = useLabel(this);
     this.transitionProp = "opacity";
     this.placeholderTextId = IDS.placeholder(guid());
     this.rangeStartValueChangedByUser = false;
@@ -112,6 +117,7 @@ class InputDatePicker extends LitElement {
     this.focusedInput = "start";
     this.calendars = 2;
     this.disabled = false;
+    this.clearable = false;
     this.focusTrapDisabled = false;
     this.layout = "horizontal";
     this.monthStyle = "wide";
@@ -135,7 +141,7 @@ class InputDatePicker extends LitElement {
     this.handleDateTimeFormatChange();
   }
   static {
-    this.properties = { datePickerActiveDate: [16, {}, { state: true }], focusedInput: [16, {}, { state: true }], localeData: [16, {}, { state: true }], calendars: [11, {}, { type: Number, reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, labelText: 1, layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, name: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], proximitySelectionDisabled: [5, {}, { type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
+    this.properties = { datePickerActiveDate: [16, {}, { state: true }], focusedInput: [16, {}, { state: true }], localeData: [16, {}, { state: true }], calendars: [11, {}, { type: Number, reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], clearable: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, labelText: 1, layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, name: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placement: [3, {}, { reflect: true }], proximitySelectionDisabled: [5, {}, { type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
   static {
     this.formAssociated = true;
@@ -178,7 +184,6 @@ class InputDatePicker extends LitElement {
     if (open) {
       this.openHandler();
     }
-    connectLabel(this);
     this.setFilteredPlacements();
     connectFloatingUI(this);
   }
@@ -199,19 +204,19 @@ class InputDatePicker extends LitElement {
     const minSource = getMinMaxSource(changes, "min");
     const maxSource = getMinMaxSource(changes, "max");
     if (minSource === "min") {
-      this.minAsDate = dateFromISO(this.min) ?? void 0;
+      this.minAsDate = dateFromISO(this.min);
     } else if (minSource === "minAsDate") {
-      this.minAsDate = dateFromISO(dateToISO(this.minAsDate)) ?? void 0;
+      this.minAsDate = dateFromISO(dateToISO(this.minAsDate));
     }
     if (maxSource === "max") {
-      this.maxAsDate = dateFromISO(this.max) ?? void 0;
+      this.maxAsDate = dateFromISO(this.max);
     } else if (maxSource === "maxAsDate") {
-      this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate)) ?? void 0;
+      this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate));
     }
     if ((minSource || maxSource) && !Array.isArray(this.valueAsDate)) {
       const validValueAsDate = dateFromRange(this.valueAsDate, this.minAsDate, this.maxAsDate);
       if (validValueAsDate !== this.valueAsDate) {
-        this.valueAsDate = validValueAsDate ?? void 0;
+        this.valueAsDate = validValueAsDate;
       }
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
@@ -240,7 +245,6 @@ class InputDatePicker extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   handleDisabledAndReadOnlyChange(value) {
@@ -255,7 +259,7 @@ class InputDatePicker extends LitElement {
         if (Array.isArray(newValue)) {
           newValueAsDate = getValueAsDateRange(newValue);
         } else if (newValue) {
-          newValueAsDate = dateFromISO(newValue) ?? void 0;
+          newValueAsDate = dateFromISO(newValue);
         } else {
           newValueAsDate = void 0;
         }
@@ -326,19 +330,60 @@ class InputDatePicker extends LitElement {
     this.currentOpenInput = this.focusedInput;
   }
   onInputWrapperClick(event) {
-    const { range, endInputRef, startInputRef, currentOpenInput } = this;
-    const currentTarget = event.currentTarget;
-    const position = currentTarget.getAttribute("data-position");
-    const path = event.composedPath();
-    const wasToggleClicked = path.find((el) => el.classList?.contains(CSS.toggleIcon));
-    if (wasToggleClicked) {
-      const targetInput = position === "start" ? startInputRef : endInputRef;
-      targetInput.value?.setFocus();
+    const actionClicked = event.composedPath().some((node) => {
+      if (!(node instanceof HTMLElement)) {
+        return false;
+      }
+      return node.classList.contains(CSS.clearButton) || node.classList.contains(CSS.toggleIcon);
+    });
+    if (!actionClicked) {
+      const currentTarget = event.currentTarget;
+      const position = currentTarget.getAttribute("data-position");
+      this.toggleInputOpen(position);
     }
+  }
+  toggleInputOpen(position) {
+    const { range, currentOpenInput } = this;
     if (!range || !this.open || currentOpenInput === position) {
       this.open = !this.open;
     }
   }
+  toggleSingleOpenClickHandler() {
+    this.startInputRef.value?.setFocus();
+    this.open = !this.open;
+  }
+  toggleRangeOpenClickHandler(position) {
+    const nextFocusedInput = position ?? this.focusedInput;
+    const shouldToggle = !this.open || this.focusedInput === nextFocusedInput;
+    this.focusedInput = nextFocusedInput;
+    this.focusInput();
+    if (shouldToggle) {
+      this.open = !this.open;
+    }
+  }
+  onVerticalActionsContainerClick(event) {
+    if (this.disabled || this.readOnly) {
+      return;
+    }
+    const clearButtonClicked = event.composedPath().some((node) => {
+      if (!(node instanceof HTMLElement)) {
+        return false;
+      }
+      return node.classList.contains(CSS.clearButton);
+    });
+    if (clearButtonClicked) {
+      return;
+    }
+    this.toggleRangeOpenClickHandler();
+  }
+  clearValue() {
+    if (this.range) {
+      this.setRangeValue([void 0, void 0]);
+    } else {
+      this.setValue(void 0);
+    }
+    this.localizeInputValues();
+  }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
     this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
@@ -382,21 +427,21 @@ class InputDatePicker extends LitElement {
         }
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : dateFromISO(value[0]) ?? void 0,
-            focusedInput === "end" ? date : dateFromISO(value[1]) ?? void 0
+            focusedInput === "start" ? date : dateFromISO(value[0]),
+            focusedInput === "end" ? date : dateFromISO(value[1])
           ]);
           this.localizeInputValues();
         } else {
           this.setRangeValue([
-            focusedInput === "end" ? dateFromISO(value[0]) ?? void 0 : void 0,
-            focusedInput === "start" ? dateFromISO(value[1]) ?? void 0 : void 0
+            focusedInput === "end" ? dateFromISO(value[0]) : void 0,
+            focusedInput === "start" ? dateFromISO(value[1]) : void 0
           ]);
         }
       } else {
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : dateFromISO(value[0]) ?? void 0,
-            focusedInput === "end" ? date : dateFromISO(value[1]) ?? void 0
+            focusedInput === "start" ? date : dateFromISO(value[0]),
+            focusedInput === "end" ? date : dateFromISO(value[1])
           ]);
           this.localizeInputValues();
         }
@@ -446,10 +491,20 @@ class InputDatePicker extends LitElement {
       this.open = true;
       this.focusOnOpen = true;
       event.preventDefault();
-    } else if (this.open && key === "Escape") {
-      this.open = false;
-      event.preventDefault();
-      this.restoreInputFocus(true);
+    } else if (key === "Escape") {
+      const hadOpen = this.open;
+      const hasValue = this.range ? Array.isArray(this.value) && (!!this.value[0] || !!this.value[1]) : !!this.value;
+      const shouldClear = !this.disabled && !this.readOnly && this.clearable && hasValue;
+      if (shouldClear) {
+        this.clearValue();
+      }
+      if (hadOpen) {
+        this.open = false;
+        this.restoreInputFocus(true);
+      }
+      if (hadOpen || shouldClear) {
+        event.preventDefault();
+      }
     }
   }
   startInputFocus() {
@@ -533,15 +588,15 @@ class InputDatePicker extends LitElement {
     if (this.shouldFocusRangeStart() || this.rangeStartValueChangedByUser) {
       return;
     }
-    if (this.proximitySelectionDisabled && this.valueAsDate && this.valueAsDate[1] === null) {
+    if (this.proximitySelectionDisabled && Array.isArray(this.valueAsDate) && this.valueAsDate[1] === void 0) {
       return;
     }
     this.open = false;
     this.focusInput();
   }
   localizeInputValues() {
-    const date = dateFromRange(this.range ? Array.isArray(this.valueAsDate) && this.valueAsDate[0] || void 0 : this.valueAsDate, this.minAsDate, this.maxAsDate);
-    const endDate = this.range ? dateFromRange(Array.isArray(this.valueAsDate) && this.valueAsDate[1] || void 0, this.minAsDate, this.maxAsDate) : null;
+    const date = dateFromRange(this.range ? Array.isArray(this.valueAsDate) && this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    const endDate = this.range ? dateFromRange(Array.isArray(this.valueAsDate) && this.valueAsDate[1], this.minAsDate, this.maxAsDate) : void 0;
     this.setInputValue((date && this.dateTimeFormat?.format(date)) ?? "", "start");
     this.setInputValue(this.range && endDate && this.dateTimeFormat?.format(endDate) || "", "end");
   }
@@ -602,7 +657,7 @@ class InputDatePicker extends LitElement {
       return;
     }
     this.userChangedValue = true;
-    this.valueAsDate = newValue ? dateFromISO(newValue) ?? void 0 : void 0;
+    this.valueAsDate = newValue ? dateFromISO(newValue) : void 0;
     this.value = newValue || "";
     const changeEvent = this.calciteInputDatePickerChange.emit();
     if (changeEvent.defaultPrevented) {
@@ -641,20 +696,26 @@ class InputDatePicker extends LitElement {
       locale: effectiveLocale,
       useGrouping: false
     };
+    const hasStartValue = this.range ? Array.isArray(this.value) && !!this.value[0] : !!this.value;
+    const hasEndValue = this.range && Array.isArray(this.value) && !!this.value[1];
+    const isInteractive = !disabled && !readOnly;
+    const isClearableRange = this.range && this.clearable && isInteractive && (hasStartValue || hasEndValue);
+    const isClearableSingle = !this.range && this.clearable && isInteractive && hasStartValue;
+    const rangeClearButton = html`<div class=${safeClassMap(CSS.clearButton)} @click=${this.clearValue}>${ClearButton({ ariaLabel: this.messages.clear, scale: this.scale, title: this.messages.clear })}</div>`;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.container)}><div aria-label=${getLabelText(this) ?? nothing} .ariaRequired=${this.required} class=${safeClassMap(CSS.inputContainer)} role=group><div class=${safeClassMap(CSS.inputWrapper)} data-position=${POSITION.start} @click=${this.onInputWrapperClick} @pointerdown=${this.onInputWrapperPointerDown} ${ref(this.setStartWrapper)}><calcite-input-text aria-controls=${this.dialogId ?? nothing} aria-describedby=${this.placeholderTextId ?? nothing} aria-errormessage=${IDS.validationMessage} aria-autocomplete=none .ariaExpanded=${this.open} aria-haspopup=dialog .ariaInvalid=${this.status === "invalid"} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.startInput]: true
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.range ? this.messages.startDate : this.messages.date} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.startInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.startInputRef)}></calcite-input-text>${!this.readOnly && !this.range && this.renderToggleIcon(this.open && this.focusedInput === "start") || ""}<span aria-hidden=true class=${safeClassMap(CSS.assistiveText)} id=${this.placeholderTextId ?? nothing}>${messages.dateFormat.replace("{format}", this.localeData?.placeholder)}</span></div><div .ariaHidden=${!this.open} .ariaLabel=${messages.chooseDate} aria-live=polite class=${safeClassMap(CSS.menu)} id=${this.dialogId ?? nothing} popover=manual role=dialog ${ref(this.setFloatingEl)}><div class=${safeClassMap({
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.range ? this.messages.startDate : this.messages.date} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.startInputFocus} .placeholder=${this.placeholder || this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.startInputRef)}></calcite-input-text><span aria-hidden=true class=${safeClassMap(CSS.assistiveText)} id=${this.placeholderTextId ?? nothing}>${this.placeholder || messages.dateFormat.replace("{format}", this.localeData?.placeholder)}</span>${!this.range && !this.readOnly ? html`<div class=${safeClassMap(CSS.horizontalActionsContainer)}>${isClearableSingle ? html`<div class=${safeClassMap(CSS.clearButton)} @click=${this.clearValue}>${ClearButton({ ariaLabel: this.messages.clear, scale: this.scale, title: this.messages.clear })}</div>` : null}${this.renderToggleIcon(this.open && this.focusedInput === "start", this.toggleSingleOpenClickHandler)}</div>` : null}</div><div .ariaHidden=${!this.open} .ariaLabel=${messages.chooseDate} aria-live=polite class=${safeClassMap(CSS.menu)} id=${this.dialogId ?? nothing} popover=manual role=dialog ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [CSS.calendarWrapper]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: this.open
     })} ${ref(this.transitionRef)}><calcite-date-picker .activeDate=${this.datePickerActiveDate} .activeRange=${this.focusedInput} .calendars=${this.calendars} .headingLevel=${this.headingLevel} .layout=${this.layout} .max=${this.max} .maxAsDate=${this.maxAsDate} .messageOverrides=${this.messageOverrides} .min=${this.min} .minAsDate=${this.minAsDate} .monthStyle=${this.monthStyle} .numberingSystem=${numberingSystem} @calciteDatePickerChange=${this.handleDateChange} @calciteDatePickerRangeChange=${this.handleDateRangeChange} .proximitySelectionDisabled=${this.proximitySelectionDisabled} .range=${this.range} .scale=${this.scale} tabindex=${(this.open ? void 0 : -1) ?? nothing} .valueAsDate=${this.valueAsDate} ${ref(this.setDatePickerRef)}></calcite-date-picker></div></div>${this.range && html`<div class=${safeClassMap(CSS.dividerContainer)}><div class=${safeClassMap(CSS.divider)}></div></div>` || ""}${this.range && html`<div class=${safeClassMap(CSS.inputWrapper)} data-position=${POSITION.end} @click=${this.onInputWrapperClick} @pointerdown=${this.onInputWrapperPointerDown} ${ref(this.setEndWrapper)}><calcite-input-text aria-controls=${this.dialogId ?? nothing} aria-autocomplete=none .ariaExpanded=${this.open} aria-haspopup=dialog class=${safeClassMap({
       [CSS.input]: true,
       [CSS.endInput]: true
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.placeholder || this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${this.layout === "horizontal" && !this.readOnly ? html`<div class=${safeClassMap(CSS.horizontalActionsContainer)}>${isClearableRange ? rangeClearButton : null}${this.renderToggleIcon(this.open, () => this.toggleRangeOpenClickHandler("end"))}</div>` : null}</div>` || ""}</div>${this.range && this.layout === "vertical" ? html`<div class=${safeClassMap(CSS.verticalActionsContainer)} @click=${this.onVerticalActionsContainerClick}>${isClearableRange ? rangeClearButton : null}${this.renderToggleIcon(this.open, () => this.toggleRangeOpenClickHandler())}</div>` : null}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
-  renderToggleIcon(open) {
-    return html`<span class=${safeClassMap(CSS.toggleIcon)} tabindex=-1><calcite-icon class=${safeClassMap(CSS.chevronIcon)} .icon=${open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></span>`;
+  renderToggleIcon(open, onClick) {
+    return html`<span class=${safeClassMap(CSS.toggleIcon)} @click=${onClick} tabindex=-1><calcite-icon class=${safeClassMap(CSS.chevronIcon)} .icon=${open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></span>`;
   }
 }
 customElement("calcite-input-date-picker", InputDatePicker);

package/dist/components/calcite-input-date-picker/index.js

@@ -1,3 +1,4 @@
+import "../calcite-action/index.js";
 import "../calcite-input-message/index.js";
 import "../calcite-input-text/index.js";
 import "../calcite-date-picker/index.js";

package/dist/components/calcite-input-message/customElement.js

@@ -2,16 +2,16 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { b as setRequestedIcon } from "../../chunks/dom.js";
+import { d as setRequestedIcon } from "../../chunks/dom.js";
+const CSS = {
+  inputMessageIcon: "calcite-input-message-icon"
+};
 const StatusIconDefaults = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
   idle: "information"
 };
 const styles = css`:host{box-sizing:border-box;display:flex;block-size:auto;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);opacity:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-block-start:var(--calcite-input-message-spacing, var(--calcite-input-message-spacing-value, var(--calcite-spacing-xxs)))}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-inline-end:var(--calcite-spacing-sm)}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-danger))))}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-success))))}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand))))}:host([scale=s]){font-size:var(--calcite-font-size-relative-xs);line-height:var(--calcite-font-line-height-xs)}:host([scale=m]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=l]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([hidden]){display:none}[hidden]{display:none}`;
-const CSS = {
-  inputMessageIcon: "calcite-input-message-icon"
-};
 class InputMessage extends LitElement {
   constructor() {
     super(...arguments);
@@ -20,7 +20,7 @@ class InputMessage extends LitElement {
     this.status = "idle";
   }
   static {
-    this.properties = { icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }] };
+    this.properties = { icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -40,9 +40,7 @@ class InputMessage extends LitElement {
     return html`${this.renderIcon(this.requestedIcon)}<slot></slot>`;
   }
   renderIcon(iconName) {
-    if (iconName) {
-      return html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>`;
-    }
+    return iconName ? html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>` : iconName;
   }
 }
 customElement("calcite-input-message", InputMessage);

package/dist/components/calcite-input-number/customElement.d.ts

@@ -26,6 +26,14 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-input-prefix-text-color] - When `prefixText` is provided, specifies the text color of the component's prefix element.
  * @cssproperty [--calcite-input-suffix-size] - When `suffixText` is provided, specifies the width of the component's suffix element.
  * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the text color of the component's suffix element.
+ * @cssproperty [--calcite-input-number-inline-editable-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component, its inline editable elements and slotted `calcite-action` wrappers, when hovered.
+ * @cssproperty [--calcite-input-number-inline-editable-control-background-color] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls.
+ * @cssproperty [--calcite-input-number-inline-editable-control-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when hovered.
+ * @cssproperty [--calcite-input-number-inline-editable-control-background-color-press] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when pressed.
+ * @cssproperty [--calcite-input-number-inline-editable-control-corner-radius] - When `inline-editable` is enabled, specifies the corner radius of the component's inline editable controls.
+ * @cssproperty [--calcite-input-number-inline-editable-control-loader-color] - When `inline-editable` is enabled, specifies the loader color of the component's inline editable controls.
+ * @cssproperty [--calcite-input-number-inline-editable-control-text-color] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls.
+ * @cssproperty [--calcite-input-number-inline-editable-control-text-color-press] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls, when pressed or hovered.
  * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -76,13 +84,27 @@ export abstract class InputNumber extends LitElement {
    * @default false
    */
   accessor iconFlipRtl: boolean;
+  /**
+   * When `true`, enables the component's built-in inline editable behavior.
+   *
+   * @default false
+   */
+  accessor inlineEditable: boolean;
+  /** Specifies a callback to be executed when saving inline editable changes */
+  accessor inlineEditableAfterConfirm: () => Promise<void>;
+  /**
+   * When `true` and `inlineEditable` is `true`, displays the component's built-in inline editable save and cancel controls.
+   *
+   * @default false
+   */
+  accessor inlineEditableControls: boolean;
   /**
    * When `true`, restricts the component to integer numbers only and disables exponential notation.
    *
    * @default false
    */
   accessor integer: boolean;
-  /** Specifies an accessible label for the component's button or hyperlink. */
+  /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
@@ -107,14 +129,18 @@ export abstract class InputNumber extends LitElement {
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
   accessor maxLength: number | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      cancelInlineEditing?: string;
-      clear?: string;
-      confirmInlineEditingChanges?: string;
-      enableInlineEditing?: string;
-      loading?: string;
-      required?: string;
+      cancelInlineEditing?: string | undefined;
+      clear?: string | undefined;
+      confirmInlineEditingChanges?: string | undefined;
+      enableInlineEditing?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -132,7 +158,9 @@ export abstract class InputNumber extends LitElement {
    */
   accessor minLength: number | undefined;
   /**
-   * Specifies the name of the component. Required to pass the component's `value` on form submission.
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
@@ -210,10 +238,19 @@ export abstract class InputNumber extends LitElement {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires each time a new `value` is typed and committed. */
   readonly calciteInputNumberChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editable is cancelled. */
+  readonly calciteInputNumberInlineEditableCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editable is enabled. */
+  readonly calciteInputNumberInlineEditableChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editable is confirmed. */
+  readonly calciteInputNumberInlineEditableConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires each time a new `value` is typed. */
   readonly calciteInputNumberInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputNumberChange: InputNumber["calciteInputNumberChange"]["detail"];
+    calciteInputNumberInlineEditableCancel: InputNumber["calciteInputNumberInlineEditableCancel"]["detail"];
+    calciteInputNumberInlineEditableChange: InputNumber["calciteInputNumberInlineEditableChange"]["detail"];
+    calciteInputNumberInlineEditableConfirm: InputNumber["calciteInputNumberInlineEditableConfirm"]["detail"];
     calciteInputNumberInput: InputNumber["calciteInputNumberInput"]["detail"];
   };
 }