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

package/dist/components/calcite-combobox-item/customElement.d.ts

@@ -1,19 +1,38 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { ComboboxChildElement } from "../calcite-combobox/types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's border color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0.
+   */
+  "--calcite-combobox-item-border-color": "*";
+  /** Specifies the component's text and `icon` color. */
+  "--calcite-combobox-text-color": "*";
+  /** Specifies the component's text and `icon` color when hovered. */
+  "--calcite-combobox-text-color-hover": "*";
+  /** When `active`, specifies the component's background color. */
+  "--calcite-combobox-item-background-color-active": "*";
+  /** Specifies the component's background color when hovered. */
+  "--calcite-combobox-item-background-color-hover": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-combobox-item-shadow": "*";
+  /** Specifies the component's `selected` indicator icon color. */
+  "--calcite-combobox-selected-icon-color": "*";
+  /** Specifies the component's `description` and `shortHeading` text color. */
+  "--calcite-combobox-description-text-color": "*";
+  /** Specifies the component's `description` and `shortHeading` text color when hovered. */
+  "--calcite-combobox-description-text-color-press": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-combobox-heading-text-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-combobox-item-border-color] - [Deprecated] in v3.3.0, removal target v6.0.0 - Specifies the component's border color.
- * @cssproperty [--calcite-combobox-text-color] - Specifies the component's text and `icon` color.
- * @cssproperty [--calcite-combobox-text-color-hover] - Specifies the component's text and `icon` color when hovered.
- * @cssproperty [--calcite-combobox-item-background-color-active] - When `active`, specifies the component's background color.
- * @cssproperty [--calcite-combobox-item-background-color-hover] - Specifies the component's background color when hovered.
- * @cssproperty [--calcite-combobox-item-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-combobox-selected-icon-color] - Specifies the component's `selected` indicator icon color.
- * @cssproperty [--calcite-combobox-description-text-color] - Specifies the component's `description` and `shortHeading` text color.
- * @cssproperty [--calcite-combobox-description-text-color-press] - Specifies the component's `description` and `shortHeading` text color when hovered.
- * @cssproperty [--calcite-combobox-heading-text-color] - Specifies the component's `heading` text color.
  * @slot  - A slot for adding nested `calcite-combobox-item`s.
  * @slot [content-end] - A slot for adding non-actionable elements after the component's content.
  * @slot [content-start] - A slot for adding non-actionable elements before the component's content.
@@ -26,9 +45,9 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
-  /** Specifies a description for the component. Displays below the heading. */
-  accessor description: string;
+  accessor ancestors: ComboboxChildElement[] | undefined;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string | undefined;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -50,7 +69,7 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -60,7 +79,7 @@ export abstract class ComboboxItem extends LitElement {
   /** Specifies an accessible label for the component. */
   accessor label: any;
   /** Specifies additional metadata to the component for use in filtering. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -74,7 +93,7 @@ export abstract class ComboboxItem extends LitElement {
    *
    * It is recommended to use 5 characters or fewer.
    */
-  accessor shortHeading: string;
+  accessor shortHeading: string | undefined;
   /** The component's value. Falls back to `heading` if not provided. */
   accessor value: any;
   /** Fires whenever the component is selected or unselected. */

package/dist/components/calcite-combobox-item/customElement.js

@@ -4,9 +4,9 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { c as getAncestors, i as isSingleLike, d as getDepth } from "../../chunks/utils2.js";
+import { d as getAncestors, i as isSingleLike, e as getDepth } from "../../chunks/utils.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { m as slotChangeHasContent } from "../../chunks/dom.js";
+import { r as slotChangeHasContent } from "../../chunks/dom.js";
 import { h as highlightText } from "../../chunks/text.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
@@ -36,7 +36,7 @@ const SLOTS = {
   contentStart: "content-start"
 };
 const itemSpacingMultiplier = "--calcite-combobox-item-spacing-indent-multiplier";
-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([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-combobox-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:cubic-bezier(.4,0,.2,1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--active{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))))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`;
+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([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-combobox-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){box-shadow:var(--calcite-shadow-none)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:var(--calcite-border-width-md) solid transparent;outline-offset:var(--calcite-border-width-md)}.label{overflow-wrap:break-word;word-break:break-word;outline-color:transparent;position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:var(--calcite-animation-easing-function);justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--active{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-timing-function:var(--calcite-animation-easing-function);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`;
 class ComboboxItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -45,6 +45,7 @@ class ComboboxItem extends LitElement {
     this.hasContent = false;
     this.active = false;
     this.disabled = false;
+    this.filterDisabled = false;
     this.guid = guid();
     this.iconFlipRtl = false;
     this.scale = "m";
@@ -56,7 +57,7 @@ class ComboboxItem extends LitElement {
     this.calciteInternalComboboxItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasContent: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], filterDisabled: [7, {}, { reflect: true, type: Boolean }], filterTextMatchPattern: [3, {}, { reflect: true }], guid: [3, {}, { reflect: true }], heading: 1, icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, metadata: [0, {}, { attribute: false }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], shortHeading: 1, value: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasContent: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], filterDisabled: [7, {}, { reflect: true, type: Boolean }], filterTextMatchPattern: [3, {}, { reflect: true }], guid: [3, {}, { reflect: true }], heading: 1, icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, metadata: [0, {}, { attribute: false }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], shortHeading: 1, value: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;

package/dist/components/calcite-combobox-item-group/customElement.d.ts

@@ -1,15 +1,20 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
+import type { ComboboxChildElement } from "../calcite-combobox/types.js";
 
-/**
- * @cssproperty [--calcite-combobox-item-group-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-combobox-item-group-border-color] - Specifies the component's border color.
- * @slot  - A slot for adding `calcite-combobox-item`s.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-combobox-item-group-text-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-combobox-item-group-border-color": "*";
+}
+}
+
+/** @slot  - A slot for adding `calcite-combobox-item`s. */
 export abstract class ComboboxItemGroup extends LitElement {
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
+  accessor ancestors: ComboboxChildElement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *

package/dist/components/calcite-combobox-item-group/customElement.js

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap, nothing } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { c as getAncestors, d as getDepth } from "../../chunks/utils2.js";
+import { d as getAncestors, e as getDepth } from "../../chunks/utils.js";
 const CSS = {
   firstTitle: "first-title",
   list: "list",
@@ -12,7 +12,7 @@ const CSS = {
   title: "title",
   scale: (scale) => `scale--${scale}`
 };
-const styles = css`.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}:host,.list{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3))}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%}.title{--calcite-combobox-item-indent-value: calc( var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier) );border:0 solid;display:block;flex:1 1 0%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-vertical-spacing-unit);padding-inline-start:calc(var(--calcite-combobox-item-indent-value) + var(--calcite-combobox-item-horizontal-spacing-unit));padding-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit);color:var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
+const styles = css`.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-theme-space-sm, var(--calcite-spacing-sm));--calcite-combobox-item-vertical-spacing-unit: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.scale--s .first-title{padding-block-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}.scale--s .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-theme-space-md, var(--calcite-spacing-md));--calcite-combobox-item-vertical-spacing-unit: var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}.scale--m .first-title{padding-block-start:var(--calcite-theme-space-md, var(--calcite-spacing-md))}.scale--m .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-theme-space-lg, var(--calcite-spacing-lg));--calcite-combobox-item-vertical-spacing-unit: var(--calcite-theme-space-sm-plus, var(--calcite-spacing-sm-plus))}.scale--l .first-title{padding-block-start:var(--calcite-theme-space-xl, var(--calcite-spacing-xl))}.scale--l .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}:host,.list{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),.list:focus{outline:var(--calcite-border-width-md) solid transparent;outline-offset:var(--calcite-border-width-md)}.separator{block-size:var(--calcite-theme-space-px, var(--calcite-spacing-px));background-color:var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3))}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0;max-inline-size:100%}.title{overflow-wrap:break-word;word-break:break-word;--calcite-combobox-item-indent-value: calc( var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier) );border:0 solid;display:block;flex:1 1 0%;font-weight:var(--calcite-font-weight-bold);padding-block:var(--calcite-combobox-item-vertical-spacing-unit);padding-inline-start:calc(var(--calcite-combobox-item-indent-value) + var(--calcite-combobox-item-horizontal-spacing-unit));padding-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit);color:var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
 class ComboboxItemGroup extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -3,38 +3,66 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
-/**
- * @cssproperty [--calcite-date-picker-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-date-picker-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-date-picker-range-calendar-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
- * @cssproperty [--calcite-date-picker-week-header-text-color] - Specifies the text color of the component's week header.
- * @cssproperty [--calcite-date-picker-header-action-background-color] - Specifies the background color of component`s header actions.
- * @cssproperty [--calcite-date-picker-header-action-background-color-hover] - Specifies the background color of component`s header actions when hovered.
- * @cssproperty [--calcite-date-picker-header-action-background-color-press] - Specifies the background color of component`s header actions when pressed.
- * @cssproperty [--calcite-date-picker-header-action-text-color] - Specifies the text color of the component's header actions.
- * @cssproperty [--calcite-date-picker-header-action-text-color-press] - Specifies the text color of the component's header actions when pressed.
- * @cssproperty [--calcite-date-picker-year-text-color] - Specifies the text color of the component's year and suffix.
- * @cssproperty [--calcite-date-picker-month-select-font-size] - Specifies the font size of the component's month selector.
- * @cssproperty [--calcite-date-picker-month-select-text-color] - Specifies the text color of the component's month selector.
- * @cssproperty [--calcite-date-picker-month-select-icon-color] - Specifies the icon color of the component's month selector.
- * @cssproperty [--calcite-date-picker-month-select-icon-color-hover] - Specifies the icon color of the component's month selector when hovered.
- * @cssproperty [--calcite-date-picker-day-background-color] - Specifies the background color of the component's day elements.
- * @cssproperty [--calcite-date-picker-day-background-color-hover] - Specifies the background color of the component's day elements when hovered.
- * @cssproperty [--calcite-date-picker-day-text-color] - Specifies the text color of the component's day elements.
- * @cssproperty [--calcite-date-picker-day-text-color-hover] - Specifies the text color of the component's day elements when hovered.
- * @cssproperty [--calcite-date-picker-current-day-text-color] - Specifies the text color of the component's current day.
- * @cssproperty [--calcite-date-picker-day-background-color-selected] - Specifies the background color of the component's selected day.
- * @cssproperty [--calcite-date-picker-day-text-color-selected] - Specifies the text color of the component's selected day elements.
- * @cssproperty [--calcite-date-picker-day-range-text-color] - Specifies the text color of component's selected day range.
- * @cssproperty [--calcite-date-picker-day-range-background-color] - Specifies the background color the component's selected day range.
- * @cssproperty [--calcite-date-picker-day-outside-range-background-color-hover] - Specifies the background color of the component's day elements outside the current range when hovered.
- * @cssproperty [--calcite-date-picker-day-outside-range-text-color-hover] - Specifies the text color of the component's day elements outside the current range when hovered.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-date-picker-border-color": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-date-picker-corner-radius": "*";
+  /** When `range` is `true`, specifies the divider color between the component's calendars. */
+  "--calcite-date-picker-range-calendar-divider-color": "*";
+  /** Specifies the text color of the component's week header. */
+  "--calcite-date-picker-week-header-text-color": "*";
+  /** Specifies the background color of component`s header actions. */
+  "--calcite-date-picker-header-action-background-color": "*";
+  /** Specifies the background color of component`s header actions when hovered. */
+  "--calcite-date-picker-header-action-background-color-hover": "*";
+  /** Specifies the background color of component`s header actions when pressed. */
+  "--calcite-date-picker-header-action-background-color-press": "*";
+  /** Specifies the text color of the component's header actions. */
+  "--calcite-date-picker-header-action-text-color": "*";
+  /** Specifies the text color of the component's header actions when pressed. */
+  "--calcite-date-picker-header-action-text-color-press": "*";
+  /** Specifies the text color of the component's year and suffix. */
+  "--calcite-date-picker-year-text-color": "*";
+  /** Specifies the font size of the component's month selector. */
+  "--calcite-date-picker-month-select-font-size": "*";
+  /** Specifies the text color of the component's month selector. */
+  "--calcite-date-picker-month-select-text-color": "*";
+  /** Specifies the icon color of the component's month selector. */
+  "--calcite-date-picker-month-select-icon-color": "*";
+  /** Specifies the icon color of the component's month selector when hovered. */
+  "--calcite-date-picker-month-select-icon-color-hover": "*";
+  /** Specifies the background color of the component's day elements. */
+  "--calcite-date-picker-day-background-color": "*";
+  /** Specifies the background color of the component's day elements when hovered. */
+  "--calcite-date-picker-day-background-color-hover": "*";
+  /** Specifies the text color of the component's day elements. */
+  "--calcite-date-picker-day-text-color": "*";
+  /** Specifies the text color of the component's day elements when hovered. */
+  "--calcite-date-picker-day-text-color-hover": "*";
+  /** Specifies the text color of the component's current day. */
+  "--calcite-date-picker-current-day-text-color": "*";
+  /** Specifies the background color of the component's selected day. */
+  "--calcite-date-picker-day-background-color-selected": "*";
+  /** Specifies the text color of the component's selected day elements. */
+  "--calcite-date-picker-day-text-color-selected": "*";
+  /** Specifies the text color of component's selected day range. */
+  "--calcite-date-picker-day-range-text-color": "*";
+  /** Specifies the background color the component's selected day range. */
+  "--calcite-date-picker-day-range-background-color": "*";
+  /** Specifies the background color of the component's day elements outside the current range when hovered. */
+  "--calcite-date-picker-day-outside-range-background-color-hover": "*";
+  /** Specifies the text color of the component's day elements outside the current range when hovered. */
+  "--calcite-date-picker-day-outside-range-text-color-hover": "*";
+}
+}
+
 export abstract class DatePicker extends LitElement {
   /** Specifies the component's active date. */
-  accessor activeDate: Date;
+  accessor activeDate: Date | undefined;
   /** When `range` is `true`, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. */
-  accessor activeRange: "start" | "end";
+  accessor activeRange: "start" | "end" | undefined;
   /**
    * When `range` is `true`, specifies the number of calendars displayed.
    *
@@ -42,7 +70,7 @@ export abstract class DatePicker extends LitElement {
    */
   accessor calendars: 1 | 2;
   /** 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;
   /**
    * Defines the component's layout.
    *
@@ -53,24 +81,28 @@ export abstract class DatePicker 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 (`new Date("yyyy-mm-dd")`). */
-  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: {
-      nextMonth?: string;
-      prevMonth?: string;
-      monthMenu?: string;
-      yearMenu?: string;
-      year?: string;
+      nextMonth?: string | undefined;
+      prevMonth?: string | undefined;
+      monthMenu?: string | undefined;
+      yearMenu?: string | undefined;
+      year?: string | undefined;
   };
   /**
    * 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 (`new Date("yyyy-mm-dd")`). */
-  accessor minAsDate: Date;
+  accessor minAsDate: Date | undefined;
   /**
    * Specifies the component's month style.
    *
@@ -78,7 +110,7 @@ export abstract class DatePicker extends LitElement {
    */
   accessor monthStyle: "abbreviated" | "wide";
   /** 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`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
    *
@@ -97,10 +129,10 @@ export abstract class DatePicker extends LitElement {
    * @default "m"
    */
   accessor scale: "s" | "m" | "l";
-  /** Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). */
-  accessor value: string | string[];
+  /** Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). Set to `undefined` or an empty string (`""`) to clear the selection. */
+  accessor value: string | string[] | undefined;
   /** Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). */
-  accessor valueAsDate: Date | Date[];
+  accessor valueAsDate: Date | Date[] | undefined;
   /**
    * Sets focus on the component's first focusable element.
    *

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

@@ -1,24 +1,25 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
+import { isEqual } from "es-toolkit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { d as dateFromISO, a as dateToISO, n as nextMonth, p as prevMonth, g as getDaysDiff, b as dateFromRange, s as sameDate, c as getFirstValidDateInMonth, i as inRange } from "../../chunks/date.js";
+import { d as dateFromISO, a as dateToISO, n as nextMonth, p as prevMonth, k as getDaysDiff, b as dateFromRange, s as sameDate, j as getFirstValidDateInMonth, i as inRange, h as hasSameMonthAndYear } from "../../chunks/date.js";
 import { n as numberStringFormatter, g as getDateTimeFormat } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { g as getMinMaxSource, a as getValueAsDateRange, b as applyLocaleOverride, c as getLocaleData } from "../../chunks/utils3.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
+import { g as getMinMaxSource, a as getValueAsDateRange, b as applyLocaleOverride, c as getLocaleData } from "../../chunks/utils2.js";
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 const CSS = {
   container: "container"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-date-picker-corner-radius, 0)}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal][calendars="2"]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][layout=horizontal][range][calendars="2"]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][layout=horizontal][range][calendars="2"]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}.container{outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1));color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-date-picker-corner-radius, var(--calcite-corner-radius))}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal][calendars="2"]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][layout=horizontal][range][calendars="2"]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][layout=horizontal][range][calendars="2"]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}.container{outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
 class DatePicker extends LitElement {
   constructor() {
     super();
     this.rangeValueChangedByUser = false;
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.calendars = 2;
     this.layout = "horizontal";
     this.monthStyle = "wide";
@@ -46,21 +47,31 @@ class DatePicker extends LitElement {
     await this.loadLocaleData();
   }
   willUpdate(changes) {
+    const previousValueAsDate = changes.get("valueAsDate");
+    const valueAsDate = this.valueAsDate;
+    const isForwardedRangeValue = this.rangeValueChangedByUser && !changes.has("value") && this.range && isEqual(previousValueAsDate, valueAsDate);
+    const isUserRangeValueUpdate = changes.has("value") && changes.has("valueAsDate");
+    if (this.rangeValueChangedByUser && !isUserRangeValueUpdate && !isForwardedRangeValue) {
+      this.rangeValueChangedByUser = false;
+    }
     if (changes.has("value")) {
       this.valueHandler(this.value);
     }
     if (changes.has("valueAsDate")) {
       this.valueAsDateWatcher(this.valueAsDate);
     }
+    if (isForwardedRangeValue) {
+      this.rangeValueChangedByUser = false;
+    }
     const minSource = getMinMaxSource(changes, "min");
     const maxSource = getMinMaxSource(changes, "max");
     if (minSource === "min") {
-      this.minAsDate = dateFromISO(this.min);
+      this.minAsDate = this.min ? dateFromISO(this.min) : void 0;
     } else if (minSource === "minAsDate") {
       this.minAsDate = dateFromISO(dateToISO(this.minAsDate));
     }
     if (maxSource === "max") {
-      this.maxAsDate = dateFromISO(this.max);
+      this.maxAsDate = this.max ? dateFromISO(this.max) : void 0;
     } else if (maxSource === "maxAsDate") {
       this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate));
     }
@@ -71,7 +82,7 @@ class DatePicker extends LitElement {
       this.activeDateWatcher(this.activeDate);
     }
     if (changes.has("messages") && this.hasUpdated) {
-      this.loadLocaleData().catch(console.error);
+      this.loadLocaleData().catch(logger.error);
     }
   }
   activeDateWatcher(newValue) {
@@ -87,19 +98,26 @@ class DatePicker extends LitElement {
   }
   valueHandler(value) {
     if (Array.isArray(value)) {
-      this.valueAsDate = getValueAsDateRange(value);
+      this.valueAsDate = value.every((rangeValue) => rangeValue === "") ? void 0 : getValueAsDateRange(value);
       if (!this.rangeValueChangedByUser) {
         this.resetActiveDates();
       }
     } else if (value) {
       this.valueAsDate = dateFromISO(value);
+    } else {
+      this.valueAsDate = void 0;
+      this.resetActiveDates();
     }
   }
   valueAsDateWatcher(newValueAsDate) {
     if (this.range && Array.isArray(newValueAsDate) && !this.rangeValueChangedByUser) {
       this.setActiveStartAndEndDates();
-    } else if (!this.range && newValueAsDate && newValueAsDate !== this.activeDate) {
-      this.activeDate = newValueAsDate;
+    } else if (!this.range) {
+      if (newValueAsDate && newValueAsDate !== this.activeDate) {
+        this.activeDate = newValueAsDate;
+      } else if (!newValueAsDate) {
+        this.resetActiveDates();
+      }
     }
   }
   keyDownHandler(event) {
@@ -142,7 +160,7 @@ class DatePicker extends LitElement {
       this.activeDate = date;
     } else {
       const month = date.getMonth();
-      const isDateOutOfCurrentRange = month !== this.activeStartDate.getMonth() && (this.calendars === 1 || month !== nextMonth(this.activeStartDate).getMonth());
+      const isDateOutOfCurrentRange = month !== this.activeStartDate?.getMonth() && (this.calendars === 1 || (this.activeStartDate ? month !== nextMonth(this.activeStartDate).getMonth() : false));
       if (this.activeRange === "end") {
         if (!this.activeEndDate || this.activeStartDate && isDateOutOfCurrentRange) {
           this.activeEndDate = date;
@@ -163,8 +181,8 @@ class DatePicker extends LitElement {
       return;
     }
     const { valueAsDate } = this;
-    const start = Array.isArray(valueAsDate) && valueAsDate[0];
-    const end = Array.isArray(valueAsDate) && valueAsDate[1];
+    const start = Array.isArray(valueAsDate) ? valueAsDate[0] : void 0;
+    const end = Array.isArray(valueAsDate) ? valueAsDate[1] : void 0;
     const date = new Date(event.detail);
     this.hoverRange = {
       focused: this.activeRange || "start",
@@ -172,10 +190,10 @@ class DatePicker extends LitElement {
       end
     };
     if (this.proximitySelectionDisabled) {
-      if (end && start || !end && date >= start) {
+      if (end && start || !end && start && date >= start) {
         this.hoverRange.focused = "end";
         this.hoverRange.end = date;
-      } else if (!end && date < start) {
+      } else if (!end && start && date < start) {
         this.hoverRange = {
           focused: "start",
           start: date,
@@ -185,7 +203,7 @@ class DatePicker extends LitElement {
         this.hoverRange = void 0;
       }
     } else {
-      if (this.activeRange) {
+      if (this.activeRange && this.hoverRange) {
         if (this.activeRange === "end") {
           this.hoverRange.end = date;
           this.hoverRange.focused = "end";
@@ -236,15 +254,30 @@ class DatePicker extends LitElement {
   }
   resetActiveDates() {
     const { valueAsDate } = this;
-    if (!Array.isArray(valueAsDate) && valueAsDate && valueAsDate !== this.activeDate) {
-      this.activeDate = new Date(valueAsDate);
+    if (!Array.isArray(valueAsDate)) {
+      if (valueAsDate && valueAsDate !== this.activeDate) {
+        this.activeDate = new Date(valueAsDate);
+      } else if (!valueAsDate) {
+        this.activeDate = void 0;
+        const activeDate = this.getActiveDate(void 0, this.minAsDate, this.maxAsDate);
+        if (this.range) {
+          this.activeStartDate = activeDate;
+          this.activeEndDate = void 0;
+        } else {
+          this.activeDate = activeDate;
+        }
+      }
     }
     if (Array.isArray(valueAsDate)) {
       if (valueAsDate[0] && valueAsDate[0] !== this.activeStartDate) {
         this.activeStartDate = new Date(valueAsDate[0]);
+      } else if (!valueAsDate[0]) {
+        this.activeStartDate = this.getActiveDate(void 0, this.minAsDate, this.maxAsDate);
       }
       if (valueAsDate[1] && valueAsDate[1] !== this.activeEndDate) {
         this.activeEndDate = new Date(valueAsDate[1]);
+      } else if (!valueAsDate[1]) {
+        this.activeEndDate = void 0;
       }
     }
     this.hoverRange = void 0;
@@ -262,7 +295,7 @@ class DatePicker extends LitElement {
     }
   }
   getStartDate() {
-    return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+    return Array.isArray(this.valueAsDate) && this.valueAsDate[0] || void 0;
   }
   setStartDate(date, emit = true) {
     const endDate = this.getEndDate();
@@ -281,8 +314,8 @@ class DatePicker extends LitElement {
     }
     if (!this.range) {
       this.value = isoDate || "";
-      this.valueAsDate = date || null;
-      this.activeDate = date || null;
+      this.valueAsDate = date || void 0;
+      this.activeDate = date || void 0;
       this.calciteDatePickerChange.emit();
       return;
     }
@@ -302,7 +335,7 @@ class DatePicker extends LitElement {
     } else {
       if (this.proximitySelectionDisabled) {
         this.setStartDate(date, false);
-        this.setEndDate(null, false);
+        this.setEndDate(void 0, false);
         this.calciteDatePickerRangeChange.emit();
       } else {
         if (this.activeRange) {
@@ -310,8 +343,8 @@ class DatePicker extends LitElement {
             this.setEndDate(date);
           } else {
             if (date > end) {
-              this.setEndDate(null, false);
-              this.activeEndDate = null;
+              this.setEndDate(void 0, false);
+              this.activeEndDate = void 0;
             }
             this.setStartDate(date);
           }
@@ -343,16 +376,19 @@ class DatePicker extends LitElement {
   setActiveStartAndEndDates() {
     if (this.range) {
       const startDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
-      const endDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[1] : null, this.minAsDate, this.maxAsDate);
+      const endDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[1] : void 0, this.minAsDate, this.maxAsDate);
       this.activeStartDate = this.getActiveDate(startDate, this.minAsDate, this.maxAsDate);
       this.activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
       if (sameDate(this.activeStartDate, this.activeEndDate)) {
-        const previousMonthActiveDate = getFirstValidDateInMonth(prevMonth(this.activeEndDate), this.minAsDate, this.maxAsDate);
-        const nextMonthActiveDate = nextMonth(this.activeEndDate);
-        if (inRange(previousMonthActiveDate, this.minAsDate, this.maxAsDate)) {
-          this.activeStartDate = previousMonthActiveDate;
-        } else if (inRange(nextMonthActiveDate, this.minAsDate, this.maxAsDate)) {
+        const nextMonthDate = this.activeEndDate ? nextMonth(this.activeEndDate) : void 0;
+        const nextMonthActiveDate = inRange(nextMonthDate, this.minAsDate, this.maxAsDate) ? nextMonthDate : getFirstValidDateInMonth(nextMonthDate, this.minAsDate, this.maxAsDate);
+        if (hasSameMonthAndYear(nextMonthActiveDate, nextMonthDate) && inRange(nextMonthActiveDate, this.minAsDate, this.maxAsDate)) {
           this.activeEndDate = nextMonthActiveDate;
+        } else if (this.calendars === 2) {
+          const previousMonthActiveDate = getFirstValidDateInMonth(this.activeStartDate ? prevMonth(this.activeStartDate) : void 0, this.minAsDate, this.maxAsDate);
+          if (inRange(previousMonthActiveDate, this.minAsDate, this.maxAsDate)) {
+            this.activeStartDate = previousMonthActiveDate;
+          }
         }
       }
     }
@@ -360,7 +396,7 @@ class DatePicker extends LitElement {
   render() {
     const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-    const endDate = this.range && Array.isArray(this.valueAsDate) ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate) : null;
+    const endDate = this.range && Array.isArray(this.valueAsDate) ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate) : void 0;
     const minDate = this.range && this.activeRange ? this.activeRange === "start" ? this.minAsDate : date : this.minAsDate;
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
     return html`<div aria-hidden class=${safeClassMap(CSS.container)} tabindex=-1>${this.renderMonth(startCalendarActiveDate, this.maxAsDate, minDate, date, endDate)}</div>`;