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

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 export abstract class DatePickerDay extends LitElement {
   /**

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

@@ -7,9 +7,9 @@ import { c as closestElementCrossShadowBoundary } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.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{position:relative;display:flex;cursor:pointer;outline:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-wrapper{position:relative;display:flex;inline-size:100%;flex-direction:column;align-items:center;justify-content:center}.day{position:relative;display:flex;inline-size:100%;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);line-height: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;line-height:var(--calcite-font-line-height-fixed-base);block-size:var(--calcite-internal-day-size);outline-color:var(--calcite-color-transparent);background-color:var(--calcite-date-picker-day-background-color);color:var(--calcite-date-picker-day-text-color, var(--calcite-color-text-1))}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size: 32px}:host([scale=s]) .day{font-size:var(--calcite-font-size-relative-sm)}:host([scale=m]){--calcite-internal-day-size: 40px}:host([scale=m]) .day{font-size:var(--calcite-font-size-relative-base)}:host([scale=l]){--calcite-internal-day-size: 44px}:host([scale=l]) .day{font-size:var(--calcite-font-size-relative-md)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-full);color:var(--calcite-color-text-3)}:host(:focus:not([disabled]):not([selected]):not([current-month])) .day{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .day{background-color:var(--calcite-date-picker-day-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-date-picker-day-text-color-hover, var(--calcite-color-text-1))}:host(:not([range]):not([selected]).current-day) .day{color:var(--calcite-date-picker-current-day-text-color, var(--calcite-color-brand));font-weight:var(--calcite-font-weight-bold)}:host(:focus[selected]) .day{z-index:var(--calcite-z-index);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host(:focus:not([disabled]):not([selected])) .day{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(:hover:not([disabled]):not([selected])) .day{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([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-date-picker-day-background-color-selected, var(--calcite-color-brand));color:var(--calcite-date-picker-day-text-color-selected, var(--calcite-color-text-inverse))}:host([range-hover]:not([selected])) .day{background-color:var(--calcite-date-picker-day-outside-range-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-date-picker-day-outside-range-text-color-hover, var(--calcite-color-text-1))}:host([highlighted]:not([selected])) .day,:host(:hover[highlighted]:not([selected])) .day{color:var(--calcite-date-picker-day-range-text-color, var(--calcite-color-text-highlight));background-color:var(--calcite-date-picker-day-range-background-color, var(--calcite-color-surface-highlight))}:host([disabled]) .day{color:var(--calcite-color-text-2);text-decoration-line:line-through;opacity:var(--calcite-opacity-disabled)}@media(forced-colors:active){.day{border-radius:0}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day,:host([highlighted]) .day,:host([range-hover]:not([selected])) .day{background-color:highlight}:host([range-hover]) .day,:host([range][selected][start-of-range]) .day,:host([range][selected][end-of-range]) .day{background-color:canvas}}: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{position:relative;display:flex;cursor:pointer;outline:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-wrapper{position:relative;display:flex;inline-size:100%;flex-direction:column;align-items:center;justify-content:center}.day{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;position:relative;display:flex;inline-size:100%;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);line-height:1;line-height:var(--calcite-font-line-height-fixed-base);block-size:var(--calcite-internal-day-size);outline-color:var(--calcite-color-transparent);background-color:var(--calcite-date-picker-day-background-color);color:var(--calcite-date-picker-day-text-color, var(--calcite-color-text-1))}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size: 32px}:host([scale=s]) .day{font-size:var(--calcite-font-size-relative-sm)}:host([scale=m]){--calcite-internal-day-size: 40px}:host([scale=m]) .day{font-size:var(--calcite-font-size-relative-base)}:host([scale=l]){--calcite-internal-day-size: 44px}:host([scale=l]) .day{font-size:var(--calcite-font-size-relative-md)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-full);color:var(--calcite-color-text-3)}:host(:focus:not([disabled]):not([selected]):not([current-month])) .day{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .day{background-color:var(--calcite-date-picker-day-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));color:var(--calcite-date-picker-day-text-color-hover, var(--calcite-color-text-1))}:host(:not([range]):not([selected]).current-day) .day{color:var(--calcite-date-picker-current-day-text-color, var(--calcite-color-brand));font-weight:var(--calcite-font-weight-bold)}:host(:focus[selected]) .day{z-index:var(--calcite-z-index);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));box-shadow:0 0 0 2px var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))}:host(:focus:not([disabled]):not([selected])) .day{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(:hover:not([disabled]):not([selected])) .day{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([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-date-picker-day-background-color-selected, var(--calcite-color-brand));color:var(--calcite-date-picker-day-text-color-selected, var(--calcite-color-text-inverse))}:host([range-hover]:not([selected])) .day{background-color:var(--calcite-date-picker-day-outside-range-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));color:var(--calcite-date-picker-day-outside-range-text-color-hover, var(--calcite-color-text-1))}:host([highlighted]:not([selected])) .day,:host(:hover[highlighted]:not([selected])) .day{color:var(--calcite-date-picker-day-range-text-color, var(--calcite-color-text-highlight));background-color:var(--calcite-date-picker-day-range-background-color, var(--calcite-color-surface-highlight))}:host([disabled]) .day{color:var(--calcite-color-text-2);text-decoration-line:line-through;opacity:var(--calcite-opacity-disabled)}@media(forced-colors:active){.day{border-radius:0}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day,:host([highlighted]) .day,:host([range-hover]:not([selected])) .day{background-color:highlight}:host([range-hover]) .day,:host([range][selected][start-of-range]) .day,:host([range][selected][end-of-range]) .day{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   dayWrapper: "day-wrapper",
   day: "day",
@@ -18,7 +18,7 @@ const CSS = {
 class DatePickerDay extends LitElement {
   constructor() {
     super();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.active = false;
     this.currentMonth = false;
@@ -45,7 +45,7 @@ class DatePickerDay extends LitElement {
     return this.focusSetter(() => this.el, options);
   }
   load() {
-    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
+    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker") ?? void 0;
   }
   onClick() {
     if (this.disabled) {
@@ -78,11 +78,11 @@ class DatePickerDay extends LitElement {
       };
     }
     const formattedDay = numberStringFormatter.localize(String(this.day));
-    const dayLabel = this.dateTimeFormat.format(this.value);
+    const dayLabel = this.dateTimeFormat.format(this.value) ?? null;
     this.el.ariaLabel = dayLabel;
     this.el.ariaSelected = toAriaBoolean(this.active);
     setAttribute(this.el, "id", dayId);
-    this.el.role = "button";
+    this.el.role = "gridcell";
     setAttribute(this.el, "tabIndex", this.active && !this.disabled ? 0 : -1);
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div aria-hidden=true class=${safeClassMap(CSS.dayWrapper)}><span class=${safeClassMap(CSS.day)}><span class=${safeClassMap(CSS.text)}>${formattedDay}</span></span></div>` });
   }

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HoverRange } from "../../utils/date.js";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
 export abstract class DatePickerMonth extends LitElement {
@@ -18,11 +18,11 @@ export abstract class DatePickerMonth extends LitElement {
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
   accessor headingLevel: HeadingLevel;
   /** The range of dates currently being hovered. */
-  accessor hoverRange: HoverRange;
+  accessor hoverRange: HoverRange | undefined;
   /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
-  accessor max: Date;
+  accessor max: Date | undefined;
   /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
-  accessor min: Date;
+  accessor min: Date | undefined;
   /** Specifies the monthStyle used by the component. */
   accessor monthStyle: "abbreviated" | "wide";
   /**
@@ -34,7 +34,7 @@ export abstract class DatePickerMonth extends LitElement {
   /** Specifies the size of the component. */
   accessor scale: Scale;
   /** Already selected date. */
-  accessor selectedDate: Date;
+  accessor selectedDate: Date | undefined;
   /** Start date currently active. */
   accessor startDate: Date | undefined;
 }

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

@@ -4,7 +4,7 @@ import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { i as inRange, b as dateFromRange, s as sameDate, h as hasSameMonthAndYear, c as getFirstValidDateInMonth, n as nextMonth } from "../../chunks/date.js";
+import { i as inRange, b as dateFromRange, s as sameDate, h as hasSameMonthAndYear, j as getFirstValidDateInMonth, n as nextMonth } from "../../chunks/date.js";
 const CSS = {
   calendar: "calendar",
   calendarContainer: "calendar-container",
@@ -17,13 +17,14 @@ const CSS = {
   weekHeader: "week-header",
   weekHeaderContainer: "week-header-container"
 };
-const styles = css`:host([hidden]){display:none}[hidden]{display:none}.calendar-container{display:flex;inline-size:100%}:host([range][layout=vertical]) .calendar-container{flex-direction:column}.calendar{inline-size:100%}.week-header-container{display:flex;block-size:16px;padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-md)}.week-header{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-bold);inline-size:14.2857142857%;color:var(--calcite-date-picker-week-header-text-color, var(--calcite-color-text-2))}.day-container{display:flex;inline-size:100%;min-inline-size:0px;justify-content:center}.day-container calcite-date-picker-day{inline-size:100%}.week-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;padding-inline:var(--calcite-spacing-sm);padding-block-end:var(--calcite-spacing-sm)}.month-header{display:flex;inline-size:100%;justify-content:space-between}.month{display:flex;inline-size:100%;flex-direction:column;justify-content:space-between}.day{font-size:var(--calcite-font-size)}:host([scale=s]) .week-days{padding-inline:var(--calcite-spacing-xs);padding-block-end:var(--calcite-spacing-xs)}:host([scale=s]) .week-header-container{padding-inline:var(--calcite-spacing-xs);padding-block:var(--calcite-spacing-sm)}:host([scale=s]) .day{font-size:var(--calcite-font-size-sm)}:host([scale=l]) .week-header{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .week-days{padding-inline:var(--calcite-spacing-md);padding-block-end:var(--calcite-spacing-md)}:host([scale=l]) .week-header-container{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-md-plus)}:host([scale=l]) .day{font-size:var(--calcite-font-size-md)}.calendar--start{border-width:0px;border-style:solid;border-color:var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1))}:host([range][layout=horizontal][calendars="2"]) .calendar--start{border-inline-end-width:var(--calcite-border-width-sm)}:host([range][layout=vertical][calendars="2"]) .calendar--start{border-block-end-width:var(--calcite-border-width-sm)}.noncurrent{pointer-events:none;opacity:0}`;
+const styles = css`:host([hidden]){display:none}[hidden]{display:none}.calendar-container{display:flex;inline-size:100%}:host([range][layout=vertical]) .calendar-container{flex-direction:column}.calendar{inline-size:100%}.week-header-container{display:flex;block-size:16px;padding-inline:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));padding-block:var(--calcite-theme-space-md, var(--calcite-spacing-md))}.week-header{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-bold);inline-size:14.2857142857%;color:var(--calcite-date-picker-week-header-text-color, var(--calcite-color-text-2))}.day-container{display:flex;inline-size:100%;min-inline-size:0px;justify-content:center}.day-container calcite-date-picker-day{inline-size:100%}.week-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;padding-inline:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));padding-block-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}.month-header{display:flex;inline-size:100%;justify-content:space-between}.month{display:flex;inline-size:100%;flex-direction:column;justify-content:space-between}.day{font-size:var(--calcite-font-size)}:host([scale=s]) .week-days{padding-inline:var(--calcite-theme-space-xs, var(--calcite-spacing-xs));padding-block-end:var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}:host([scale=s]) .week-header-container{padding-inline:var(--calcite-theme-space-xs, var(--calcite-spacing-xs));padding-block:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .day{font-size:var(--calcite-font-size-sm)}:host([scale=l]) .week-header{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .week-days{padding-inline:var(--calcite-theme-space-md, var(--calcite-spacing-md));padding-block-end:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([scale=l]) .week-header-container{padding-inline:var(--calcite-theme-space-md, var(--calcite-spacing-md));padding-block:var(--calcite-theme-space-md-plus, var(--calcite-spacing-md-plus))}:host([scale=l]) .day{font-size:var(--calcite-font-size-md)}.calendar--start{border-width:0px;border-style:solid;border-color:var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1))}:host([range][layout=horizontal][calendars="2"]) .calendar--start{border-inline-end-width:var(--calcite-border-width-sm)}:host([range][layout=vertical][calendars="2"]) .calendar--start{border-block-end-width:var(--calcite-border-width-sm)}.noncurrent{pointer-events:none;opacity:0}`;
 const DAYS_PER_WEEK = 7;
 const DAYS_MAXIMUM_INDEX = 6;
 const NUM_DAYS_TO_DISPLAY = 42;
 class DatePickerMonth extends LitElement {
   constructor() {
     super();
+    this.activeFocus = false;
     this.storeDayRef = (el) => {
       if (el?.active && this.activeFocus) {
         el.setFocus();
@@ -204,13 +205,13 @@ class DatePickerMonth extends LitElement {
     }
     const { start, end } = this.hoverRange;
     const isStartFocused = this.isFocusedOnStart();
-    const isEndAfterStart = this.startDate && end > this.startDate;
-    const isEndBeforeEnd = this.endDate && end < this.endDate;
-    const isStartAfterStart = this.startDate && start > this.startDate;
-    const isStartBeforeEnd = this.endDate && start < this.endDate;
+    const isEndAfterStart = this.startDate && end && end > this.startDate;
+    const isEndBeforeEnd = this.endDate && end && end < this.endDate;
+    const isStartAfterStart = this.startDate && start && start > this.startDate;
+    const isStartBeforeEnd = this.endDate && start && start < this.endDate;
     const isEndDateAfterStartAndBeforeEnd = !isStartFocused && this.startDate && isEndAfterStart && (!this.endDate || isEndBeforeEnd);
     const isStartDateBeforeEndAndAfterStart = isStartFocused && this.startDate && isStartAfterStart && isStartBeforeEnd;
-    return isEndDateAfterStartAndBeforeEnd || isStartDateBeforeEndAndAfterStart;
+    return !!(isEndDateAfterStartAndBeforeEnd || isStartDateBeforeEndAndAfterStart);
   }
   isRangeHover(date) {
     if (!this.hoverRange) {
@@ -219,16 +220,16 @@ class DatePickerMonth extends LitElement {
     const { start, end } = this.hoverRange;
     const isStartFocused = this.isFocusedOnStart();
     const insideRange = this.isHoverInRange();
-    const isDateBeforeStartDateAndAfterStart = date > start && date < this.startDate;
-    const isDateAfterEndDateAndBeforeEnd = date < end && date > this.endDate;
-    const isDateBeforeEndDateAndAfterEnd = date > end && date < this.endDate;
-    const isDateAfterStartDateAndBeforeStart = date < start && date > this.startDate;
-    const isDateAfterStartDateAndBeforeEnd = date < end && date > this.startDate;
-    const isDateBeforeEndDateAndAfterStart = date > start && date < this.endDate;
+    const isDateBeforeStartDateAndAfterStart = !!(start && date > start && this.startDate && date < this.startDate);
+    const isDateAfterEndDateAndBeforeEnd = !!(end && date < end && this.endDate && date > this.endDate);
+    const isDateBeforeEndDateAndAfterEnd = !!(end && date > end && this.endDate && date < this.endDate);
+    const isDateAfterStartDateAndBeforeStart = !!(start && date < start && this.startDate && date > this.startDate);
+    const isDateAfterStartDateAndBeforeEnd = !!(end && date < end && this.startDate && date > this.startDate);
+    const isDateBeforeEndDateAndAfterStart = !!(start && date > start && this.endDate && date < this.endDate);
     const hasBothStartAndEndDate = this.startDate && this.endDate;
     if (insideRange) {
       if (hasBothStartAndEndDate) {
-        return isStartFocused ? date < this.endDate && (isDateAfterStartDateAndBeforeStart || isDateBeforeStartDateAndAfterStart) : isDateBeforeEndDateAndAfterEnd || isDateAfterEndDateAndBeforeEnd;
+        return isStartFocused ? !!(this.endDate && date < this.endDate) && (isDateAfterStartDateAndBeforeStart || isDateBeforeStartDateAndAfterStart) : isDateBeforeEndDateAndAfterEnd || isDateAfterEndDateAndBeforeEnd;
       } else if (this.startDate && !this.endDate) {
         return isStartFocused ? isDateBeforeStartDateAndAfterStart : isDateAfterStartDateAndBeforeEnd;
       } else if (!this.startDate && this.endDate) {
@@ -239,6 +240,7 @@ class DatePickerMonth extends LitElement {
         return isStartFocused ? isDateBeforeStartDateAndAfterStart : isDateAfterEndDateAndBeforeEnd;
       }
     }
+    return false;
   }
   getDays(prevMonthDays, currMonthDays, nextMonthDays, position = "start") {
     let month = this.activeDate.getMonth();
@@ -300,7 +302,10 @@ class DatePickerMonth extends LitElement {
     const startOfWeek = this.localeData.weekStart % 7;
     const { abbreviated, short, narrow } = this.localeData.days;
     const weekDays = this.scale === "s" ? narrow || short || abbreviated : short || abbreviated || narrow;
-    const adjustedWeekDays = [...weekDays.slice(startOfWeek, 7), ...weekDays.slice(0, startOfWeek)];
+    const adjustedWeekDays = [
+      ...weekDays.slice(startOfWeek, 7),
+      ...weekDays.slice(0, startOfWeek)
+    ];
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPreviousMonthDays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
@@ -317,11 +322,11 @@ class DatePickerMonth extends LitElement {
     const endCalendarNextMonDays = this.getNextMonthDays(nextMonth2, year, startOfWeek);
     const days = this.getDays(prevMonDays, curMonDays, nextMonDays);
     const nextMonthDays = this.getDays(endCalendarPrevMonDays, endCalendarCurrMonDays, endCalendarNextMonDays, "end");
-    return html`<div class=${safeClassMap({ [CSS.calendarContainer]: true })} role=grid>${this.renderCalendar(adjustedWeekDays, days)}${this.range && this.calendars === 2 && this.renderCalendar(adjustedWeekDays, nextMonthDays, true) || ""}</div>`;
+    return html`<div class=${safeClassMap({ [CSS.calendarContainer]: true })}>${this.renderCalendar(adjustedWeekDays, days)}${this.range && this.calendars === 2 && this.renderCalendar(adjustedWeekDays, nextMonthDays, true) || ""}</div>`;
   }
   renderDateDay({ active, currentMonth, currentDay, date, day }, key) {
     const isDateInRange = inRange(date, this.min, this.max);
-    return keyed(key, html`<div class=${safeClassMap({ [CSS.dayContainer]: true })} role=gridcell><calcite-date-picker-day .active=${active} class=${safeClassMap({
+    return keyed(key, html`<div class=${safeClassMap({ [CSS.dayContainer]: true })}><calcite-date-picker-day .active=${active} class=${safeClassMap({
       [CSS.currentDay]: currentDay,
       [CSS.noncurrent]: this.range && this.calendars === 2 && !currentMonth
     })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
@@ -330,11 +335,11 @@ class DatePickerMonth extends LitElement {
     return html`<div class=${safeClassMap({
       [CSS.calendar]: true,
       [CSS.calendarStart]: !isEndCalendar
-    })}><calcite-date-picker-month-header .activeDate=${isEndCalendar ? nextMonth(this.activeDate) : this.activeDate} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : null} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(weekDays, days, isEndCalendar)}</div>`;
+    })}><calcite-date-picker-month-header .activeDate=${isEndCalendar ? nextMonth(this.activeDate) : this.activeDate} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : void 0} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(weekDays, days, isEndCalendar)}</div>`;
   }
   renderMonthCalendar(weekDays, days, isEndCalendar = false) {
     const endCalendarStartIndex = 50;
-    return html`<div class=${safeClassMap({ [CSS.month]: true })} @keydown=${this.keyDownHandler}><div class=${safeClassMap({ [CSS.weekHeaderContainer]: true })} role=row>${weekDays.map((weekday) => html`<span class=${safeClassMap({ [CSS.weekHeader]: true })} role=columnheader>${weekday}</span>`)}</div><div class=${safeClassMap({ [CSS.weekDays]: true })} role=row>${days.map((day, index) => this.renderDateDay(day, isEndCalendar ? endCalendarStartIndex + index : index))}</div></div>`;
+    return html`<div class=${safeClassMap({ [CSS.month]: true })} @keydown=${this.keyDownHandler} role=grid><div class=${safeClassMap({ [CSS.weekHeaderContainer]: true })} role=row>${weekDays.map((weekday) => html`<span class=${safeClassMap({ [CSS.weekHeader]: true })} role=columnheader>${weekday}</span>`)}</div><div class=${safeClassMap({ [CSS.weekDays]: true })} role=row>${days.map((day, index) => this.renderDateDay(day, isEndCalendar ? endCalendarStartIndex + index : index))}</div></div>`;
   }
 }
 customElement("calcite-date-picker-month", DatePickerMonth);

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

@@ -1,15 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
-import { h as calciteSpacingXxs, i as calciteSpacingBase, j as calciteSpacingSm } from "../../chunks/global.js";
+import { calciteSpacingXxs, calciteSpacingBase, calciteSpacingSm } from "@esri/calcite-design-tokens/dist/es6/global.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
-import { c as closestElementCrossShadowBoundary, l as getTextWidth } from "../../chunks/dom.js";
+import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, c as parseCalendarYear, g as getDateInMonth, i as inRange, h as hasSameMonthAndYear, e as getOrder } from "../../chunks/date.js";
+import { c as closestElementCrossShadowBoundary, k as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;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;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{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))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{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))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-theme-space-xs, var(--calcite-spacing-xs));margin-inline-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));margin-inline-start:var(--calcite-theme-space-sm-plus, var(--calcite-spacing-sm-plus))}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=l]){block-size:44px;margin:var(--calcite-theme-space-xs, var(--calcite-spacing-xs));margin-inline-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-theme-space-sm-plus, var(--calcite-spacing-sm-plus))}.chevron{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;box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{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))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{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))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-spacing-inline: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-select-icon-container-padding-inline: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-theme-space-base, var(--calcite-spacing-base));--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-theme-space-base, var(--calcite-spacing-base));--calcite-internal-select-icon-container-padding-inline: var( --calcite-theme-space-base, var(--calcite-spacing-base) );--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-theme-space-sm, var(--calcite-spacing-sm));--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-theme-space-sm, var(--calcite-spacing-sm));--calcite-internal-select-icon-container-padding-inline: var(--calcite-theme-space-sm, var(--calcite-spacing-sm));--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   header: "header",
   chevron: "chevron",
@@ -33,6 +33,7 @@ class DatePickerMonthHeader extends LitElement {
     this.nextMonthActionRef = createRef();
     this.prevMonthActionRef = createRef();
     this.yearInputRef = createRef();
+    this.scale = "m";
     this.calciteInternalDatePickerMonthHeaderSelectChange = createEvent({ cancelable: false });
   }
   static {
@@ -46,7 +47,7 @@ class DatePickerMonthHeader extends LitElement {
     this.setNextPrevMonthDates();
   }
   load() {
-    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
+    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker") ?? void 0;
   }
   willUpdate(changes) {
     if (this.hasUpdated && (changes.has("activeDate") || changes.has("localeData"))) {
@@ -100,7 +101,9 @@ class DatePickerMonthHeader extends LitElement {
     });
   }
   prevMonthClick(event) {
-    this.handleArrowClick(event, this.prevMonthDate);
+    if (this.prevMonthDate) {
+      this.handleArrowClick(event, this.prevMonthDate);
+    }
   }
   prevMonthKeydown(event) {
     if (isActivationKey(event.key)) {
@@ -108,7 +111,9 @@ class DatePickerMonthHeader extends LitElement {
     }
   }
   nextMonthClick(event) {
-    this.handleArrowClick(event, this.nextMonthDate);
+    if (this.nextMonthDate) {
+      this.handleArrowClick(event, this.nextMonthDate);
+    }
   }
   nextMonthKeydown(event) {
     if (isActivationKey(event.key)) {
@@ -143,6 +148,7 @@ class DatePickerMonthHeader extends LitElement {
       nextDate.setFullYear(year);
       return dateFromRange(nextDate, min, max);
     }
+    return void 0;
   }
   setYear({ localizedYear, commit = true, offset = 0 }) {
     const { yearInputRef, activeDate } = this;
@@ -150,12 +156,12 @@ class DatePickerMonthHeader extends LitElement {
     if (inRangeDate) {
       this.calciteInternalDatePickerMonthHeaderSelectChange.emit(inRangeDate);
     }
-    if (commit) {
+    if (commit && yearInputRef.value) {
       yearInputRef.value.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear());
     }
   }
   setYearSelectWidthOffset() {
-    this.yearSelectWidthOffset = ICON_WIDTH_M + 3 * parseInt(this.getYearSelectPadding());
+    this.yearSelectWidthOffset = ICON_WIDTH_M + 3 * parseInt(this.getYearSelectPadding(), 10);
     this.setYearSelectMenuWidth();
   }
   setYearSelectMenuWidth() {
@@ -177,19 +183,19 @@ class DatePickerMonthHeader extends LitElement {
     if (!this.min && !this.max || inRange(newActiveDate, this.min, this.max)) {
       return true;
     }
-    return hasSameMonthAndYear(newActiveDate, this.max) || hasSameMonthAndYear(newActiveDate, this.min);
+    return !!(this.max && hasSameMonthAndYear(newActiveDate, this.max) || this.min && hasSameMonthAndYear(newActiveDate, this.min));
   }
   async handlePenultimateValidMonth(event) {
     const target = event.target;
     const direction = target.getAttribute("data-direction");
     const isDirectionLeft = direction === "left";
-    let isTargetLastValidMonth;
+    let isTargetLastValidMonth = false;
     if (isDirectionLeft && this.min) {
       const prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
-      isTargetLastValidMonth = hasSameMonthAndYear(prevMonthDate, this.min);
+      isTargetLastValidMonth = prevMonthDate ? hasSameMonthAndYear(prevMonthDate, this.min) : false;
     } else if (this.max) {
       const nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
-      isTargetLastValidMonth = hasSameMonthAndYear(nextMonthDate, this.max);
+      isTargetLastValidMonth = nextMonthDate ? hasSameMonthAndYear(nextMonthDate, this.max) : false;
     }
     if (isTargetLastValidMonth) {
       if (!this.position) {

package/dist/components/calcite-dialog/customElement.d.ts

@@ -1,43 +1,80 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Kind, Scale, Width } from "../interfaces.js";
+import type { Kind, Scale, Width } from "../types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
 import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
-import type { DialogPlacement } from "./interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
+import type { DialogPlacement } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the background color of the component's scrim. */
+  "--calcite-dialog-scrim-background-color": "*";
+  /** When `placement` is `"cover"`, specifies the component's width, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width. */
+  "--calcite-dialog-size-x": "*";
+  /** Specifies the component's minimum width, using `px`, `em`, `rem`, `vw`, or `%`. */
+  "--calcite-dialog-min-size-x": "*";
+  /** Specifies the component's maximum width, using `px`, `em`, `rem`, `vw`, or `%`. */
+  "--calcite-dialog-max-size-x": "*";
+  /** When `placement` is `"cover"`, specifies the component's height, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height. */
+  "--calcite-dialog-size-y": "*";
+  /** Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`. */
+  "--calcite-dialog-min-size-y": "*";
+  /** Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`. */
+  "--calcite-dialog-max-size-y": "*";
+  /** Specifies the padding of the component's content. */
+  "--calcite-dialog-content-space": "*";
+  /** Specifies the padding of the component's `content-top` slot. */
+  "--calcite-dialog-content-top-space": "*";
+  /** Specifies the padding of the component's `content-bottom` slot. */
+  "--calcite-dialog-content-bottom-space": "*";
+  /** Specifies the padding of the component's `header-top` slot. */
+  "--calcite-dialog-header-top-space": "*";
+  /** Specifies the padding of the component's footer. */
+  "--calcite-dialog-footer-space": "*";
+  /** Specifies the component's border color. */
+  "--calcite-dialog-border-color": "*";
+  /** Specifies the component's horizontal offset. */
+  "--calcite-dialog-offset-x": "*";
+  /** Specifies the component's vertical offset. */
+  "--calcite-dialog-offset-y": "*";
+  /** Specifies the component's background color. */
+  "--calcite-dialog-background-color": "*";
+  /** Specifies the color of the component's icon. */
+  "--calcite-dialog-icon-color": "*";
+  /** When `kind` is specified, specifies the component's accent color. */
+  "--calcite-dialog-accent-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-dialog-corner-radius": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-dialog-heading-text-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-dialog-description-text-color": "*";
+  /** Specifies the background color of the component's header. */
+  "--calcite-dialog-header-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s. */
+  "--calcite-dialog-header-action-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when hovered. */
+  "--calcite-dialog-header-action-background-color-hover": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed. */
+  "--calcite-dialog-header-action-background-color-press": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s. */
+  "--calcite-dialog-header-action-text-color": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed or hovered. */
+  "--calcite-dialog-header-action-text-color-press": "*";
+  /** Specifies the background color of the component's footer. */
+  "--calcite-dialog-footer-background-color": "*";
+  /** Specifies the padding of the component's `unnamed (default)` slot. */
+  "--calcite-dialog-space": "*";
+  /** Specifies the padding of the component's `header-content` slot. */
+  "--calcite-dialog-header-content-space": "*";
+  /** Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. */
+  "--calcite-dialog-action-menu-border-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-dialog-scrim-background-color] - Specifies the background color of the component's scrim.
- * @cssproperty [--calcite-dialog-size-x] - When `placement` is `"cover"`, specifies the component's width, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width.
- * @cssproperty [--calcite-dialog-min-size-x] - Specifies the component's minimum width, using `px`, `em`, `rem`, `vw`, or `%`.
- * @cssproperty [--calcite-dialog-max-size-x] - Specifies the component's maximum width, using `px`, `em`, `rem`, `vw`, or `%`.
- * @cssproperty [--calcite-dialog-size-y] - When `placement` is `"cover"`, specifies the component's height, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height.
- * @cssproperty [--calcite-dialog-min-size-y] - Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`.
- * @cssproperty [--calcite-dialog-max-size-y] - Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`.
- * @cssproperty [--calcite-dialog-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-dialog-content-top-space] - Specifies the padding of the component's `content-top` slot.
- * @cssproperty [--calcite-dialog-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
- * @cssproperty [--calcite-dialog-footer-space] - Specifies the padding of the component's footer.
- * @cssproperty [--calcite-dialog-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-dialog-offset-x] - Specifies the component's horizontal offset.
- * @cssproperty [--calcite-dialog-offset-y] - Specifies the component's vertical offset.
- * @cssproperty [--calcite-dialog-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-dialog-icon-color] - Specifies the color of the component's icon.
- * @cssproperty [--calcite-dialog-accent-color] - When `kind` is specified, specifies the component's accent color.
- * @cssproperty [--calcite-dialog-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-dialog-heading-text-color] - Specifies the text color of the component's `heading`.
- * @cssproperty [--calcite-dialog-description-text-color] - Specifies the text color of the component's `description`.
- * @cssproperty [--calcite-dialog-header-background-color] - Specifies the background color of the component's header.
- * @cssproperty [--calcite-dialog-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s.
- * @cssproperty [--calcite-dialog-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when hovered.
- * @cssproperty [--calcite-dialog-header-action-background-color-press] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed.
- * @cssproperty [--calcite-dialog-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s.
- * @cssproperty [--calcite-dialog-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed or hovered.
- * @cssproperty [--calcite-dialog-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-dialog-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-dialog-header-content-space] - Specifies the padding of the component's `header-content` slot.
- * @cssproperty [--calcite-dialog-action-menu-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
  * @slot  - A slot for adding content.
  * @slot [custom-content] - A slot for displaying custom content. Will prevent the rendering of any default component UI, except for `box-shadow` and `corner-radius`.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
@@ -47,6 +84,7 @@ import type { DialogPlacement } from "./interfaces.js";
  * @slot [header-actions-start] - A slot for adding actions or content to the starting side of the component's header.
  * @slot [header-actions-end] - A slot for adding actions or content to the ending side of the component's header.
  * @slot [header-content] - A slot for adding custom content to the component's header.
+ * @slot [header-top] - A slot for adding custom content above the header actions and content.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot [heading] - A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
  * @slot [description] - A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
@@ -57,15 +95,15 @@ import type { DialogPlacement } from "./interfaces.js";
  */
 export abstract class Dialog extends LitElement {
   /** Specifies a function to run before the component closes. */
-  accessor beforeClose: () => Promise<void>;
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, disables the component's close button.
    *
    * @default false
    */
   accessor closeDisabled: boolean;
-  /** Specifies the component's description. */
-  accessor description: string;
+  /** Specifies a description for the component. */
+  accessor description: string | undefined;
   /**
    * When `true`, the component is draggable.
    *
@@ -88,15 +126,15 @@ export abstract class Dialog extends LitElement {
    */
   accessor focusTrapDisabled: boolean;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"allowOutsideClick`" allows outside clicks,
-   * `"initialFocus"` enables initial focus,
-   * `"returnFocusOnDeactivate"` returns focus when not active,
-   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
-   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
+   * - `"allowOutsideClick`" allows outside clicks.
+   * - `"initialFocus"` enables initial focus.
+   * - `"returnFocusOnDeactivate"` returns focus when not active.
+   * - `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.
+   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /**
    * When `true`, the component will not display at fullscreen, which may be desired in limited display areas, such as mobile devices.
    *
@@ -104,19 +142,19 @@ export abstract class Dialog extends LitElement {
    */
   accessor fullscreenDisabled: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an 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`.
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
    *
    * @default false
    */
   accessor iconFlipRtl: boolean;
   /** Specifies the component's kind, which determines the top border styling. */
-  accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
+  accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind> | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -129,11 +167,15 @@ export abstract class Dialog extends LitElement {
    * @default false
    */
   accessor menuOpen: boolean;
-  /** 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: {
-      close?: string;
-      resizeEnabled?: string;
-      dragEnabled?: string;
+      close?: string | undefined;
+      resizeEnabled?: string | undefined;
+      dragEnabled?: string | undefined;
   };
   /**
    * When `true`, displays a scrim blocking interaction underneath the component.
@@ -154,11 +196,11 @@ export abstract class Dialog extends LitElement {
    */
   accessor outsideCloseDisabled: 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"
    */
@@ -182,16 +224,14 @@ export abstract class Dialog extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * Specifies the component's width.
    *