@esri/calcite-components 3.2.0-next.8 → 3.2.0

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { html, nothing } from "lit";
@@ -26,16 +26,23 @@ const CSS = {
   textContainer: "text-container",
   heading: "heading"
 };
+const ICONS = {
+  checked: "check-square-f",
+  circle: "circle",
+  indeterminate: "minus-square-f",
+  selectedSingle: "circle-inset-large",
+  unchecked: "square"
+};
 const SLOTS = {
   contentEnd: "content-end",
   contentStart: "content-start"
 };
-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--2);line-height:1rem;--calcite-combobox-item-spacing-unit-s: .25rem;--calcite-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--1);line-height:1rem;--calcite-combobox-item-spacing-unit-s: .375rem;--calcite-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-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-s: .625rem;--calcite-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-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-combobox-item-spacing-unit-l);padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .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)}: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--2);line-height:1rem;--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--1);line-height:1rem;--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-0);line-height:1.25rem;--calcite-internal-combobox-item-spacing-unit-s: .625rem;--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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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-duration:.15s;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)}: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);
-    this.hasContent = false;
     this._selected = false;
+    this.hasContent = false;
     this.active = false;
     this.disabled = false;
     this.guid = guid();
@@ -43,16 +50,16 @@ class ComboboxItem extends LitElement {
     this.scale = "m";
     this.selectionMode = "multiple";
     this.itemHidden = false;
+    this.indeterminate = false;
     this.calciteComboboxItemChange = createEvent({ cancelable: false });
     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: [2, { reflect: true, attribute: false }], 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 }], shortHeading: 1, textLabel: [3, { reflect: true }], value: 1, itemHidden: [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: [2, {}, { reflect: true, attribute: false }], 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 }], shortHeading: 1, textLabel: [3, {}, { reflect: true }], value: 1, itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  /** When `true`, the component is selected. */
   get selected() {
     return this._selected;
   }
@@ -63,8 +70,6 @@ class ComboboxItem extends LitElement {
       this.emitItemChange();
     }
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.ancestors = getAncestors(this.el);
@@ -80,8 +85,6 @@ class ComboboxItem extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   emitItemChange() {
     this.calciteInternalComboboxItemChange.emit();
   }
@@ -99,8 +102,6 @@ class ComboboxItem extends LitElement {
   itemClickHandler() {
     this.toggleSelected();
   }
-  // #endregion
-  // #region Rendering
   renderIcon(iconPath) {
     return this.icon ? keyed("icon", html`<calcite-icon class=${safeClassMap({
       [CSS.iconCustom]: !!this.icon
@@ -117,8 +118,8 @@ class ComboboxItem extends LitElement {
   render() {
     const { disabled, heading, label, textLabel, value, filterTextMatchPattern, description, shortHeading } = this;
     const isSingleSelect = isSingleLike(this.selectionMode);
-    const icon = disabled || isSingleSelect ? void 0 : "check-square-f";
-    const selectionIcon = isSingleSelect ? this.selected ? "circle-inset-large" : "circle" : this.selected ? "check-square-f" : "square";
+    const icon = disabled || isSingleSelect ? void 0 : ICONS.checked;
+    const selectionIcon = isSingleSelect ? this.selected ? ICONS.selectedSingle : ICONS.circle : this.indeterminate ? ICONS.indeterminate : this.selected ? ICONS.checked : ICONS.unchecked;
     const headingText = heading || textLabel;
     const itemLabel = label || value;
     const classes = {

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

@@ -13,6 +13,13 @@ export declare const CSS: {
     textContainer: string;
     heading: string;
 };
+export declare const ICONS: {
+    checked: string;
+    circle: string;
+    indeterminate: string;
+    selectedSingle: string;
+    unchecked: string;
+};
 export declare const SLOTS: {
     contentEnd: string;
     contentStart: string;

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

@@ -3,7 +3,7 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 import { ComboboxChildElement } from '../calcite-combobox/interfaces';
 import { Scale } from '../interfaces';
 
-/** @slot - A slot for adding `calcite-combobox-item`s. */
+/** @slot  - A slot for adding `calcite-combobox-item`s. */
 export declare class ComboboxItemGroup extends LitElement {
     /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
     ancestors: ComboboxChildElement[];

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";
@@ -22,19 +22,15 @@ class ComboboxItemGroup extends LitElement {
     this.itemHidden = false;
   }
   static {
-    this.properties = { afterEmptyGroup: [7, { reflect: true, type: Boolean }], ancestors: [0, { attribute: false }], label: 1, scale: 1, itemHidden: [7, { reflect: true, type: Boolean }] };
+    this.properties = { afterEmptyGroup: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], label: 1, scale: 1, itemHidden: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.ancestors = getAncestors(this.el);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { el, scale } = this;
     const depth = getDepth(el);

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

@@ -11,7 +11,11 @@ export declare class DatePicker extends LitElement {
     activeRange: "start" | "end";
     /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
     headingLevel: HeadingLevel;
-    /** Defines the layout of the component. */
+    /**
+     * Defines the layout of the component.
+     *
+     * @default "horizontal"
+     */
     layout: "horizontal" | "vertical";
     /**
      * When the component resides in a form,
@@ -22,24 +26,6 @@ export declare class DatePicker extends LitElement {
     maxAsDate: Date;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: {
-        nextMonth: string;
-        prevMonth: string;
-        monthMenu: string;
-        yearMenu: string;
-        year: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
-        nextMonth: string;
-        prevMonth: string;
-        monthMenu: string;
-        yearMenu: string;
-        year: string;
-    }>;
     /**
      * When the component resides in a form,
      * specifies the earliest allowed date (`"yyyy-mm-dd"`).
@@ -47,15 +33,31 @@ export declare class DatePicker extends LitElement {
     min: string;
     /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
     minAsDate: Date;
-    /** Specifies the monthStyle used by the component. */
+    /**
+     * Specifies the monthStyle used by the component.
+     *
+     * @default "wide"
+     */
     monthStyle: "abbreviated" | "wide";
     /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
     numberingSystem: NumberingSystem;
-    /** When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. */
+    /**
+     * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
+     *
+     * @default false
+     */
     proximitySelectionDisabled: boolean;
-    /** When `true`, activates the component's range mode to allow a start and end date. */
+    /**
+     * When `true`, activates the component's range mode to allow a start and end date.
+     *
+     * @default false
+     */
     range: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     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"]`). */
     value: string | string[];
@@ -64,7 +66,20 @@ export declare class DatePicker extends LitElement {
     /** Sets focus on the component's first focusable element. */
     setFocus(): Promise<void>;
     /** Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. */
-    readonly calciteDatePickerChange: TargetedEvent<this, undefined>;
+    readonly calciteDatePickerChange: TargetedEvent<this, void>;
     /** Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. */
-    readonly calciteDatePickerRangeChange: TargetedEvent<this, undefined>;
+    readonly calciteDatePickerRangeChange: TargetedEvent<this, void>;
+    private messages: {
+        nextMonth: string;
+        prevMonth: string;
+        monthMenu: string;
+        yearMenu: string;
+        year: string;
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        nextMonth: string;
+        prevMonth: string;
+        monthMenu: string;
+        yearMenu: string;
+        year: string;
+    }>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { isServer, html } from "lit";
 import { LitElement, createEvent } from "@arcgis/lumina";
@@ -15,13 +15,11 @@ const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 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-1));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]){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][range][layout=horizontal]){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][range][layout=horizontal]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}:host([hidden]){display:none}[hidden]{display:none}`;
 class DatePicker extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.rangeValueChangedByUser = false;
-    this.layout = "horizontal";
     this.messages = useT9n({ blocking: true });
+    this.layout = "horizontal";
     this.monthStyle = "wide";
     this.proximitySelectionDisabled = false;
     this.range = false;
@@ -31,7 +29,7 @@ class DatePicker extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { activeEndDate: [16, { state: true }], activeStartDate: [16, { state: true }], dateTimeFormat: [16, { state: true }], endAsDate: [16, { state: true }], hoverRange: [16, { state: true }], localeData: [16, { state: true }], startAsDate: [16, { state: true }], activeDate: [0, { attribute: false }], activeRange: [3, { reflect: true }], headingLevel: [11, { type: Number, reflect: true }], layout: [3, { reflect: true }], max: [3, { reflect: true }], maxAsDate: [0, { attribute: false }], messageOverrides: [0, { attribute: false }], min: [3, { reflect: true }], minAsDate: [0, { attribute: false }], monthStyle: 1, numberingSystem: [3, { reflect: true }], proximitySelectionDisabled: [7, { reflect: true, type: Boolean }], range: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], value: 1, valueAsDate: [0, { attribute: false }] };
+    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], endAsDate: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], startAsDate: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -39,18 +37,10 @@ class DatePicker extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Resets active date state.
-   *
-   * @private
-   */
   async reset() {
     this.resetActiveDates();
     this.rangeValueChangedByUser = false;
   }
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
@@ -95,8 +85,6 @@ class DatePicker extends LitElement {
       this.loadLocaleData().catch(console.error);
     }
   }
-  // #endregion
-  // #region Private Methods
   activeDateWatcher(newValue) {
     if (!this.range) {
       return;
@@ -307,11 +295,6 @@ class DatePicker extends LitElement {
     this.valueAsDate = [date, endDate];
     this.calciteDatePickerRangeChange.emit();
   }
-  /**
-   * Event handler for when the selected date changes
-   *
-   * @param event
-   */
   monthDateChange(event) {
     const date = new Date(event.detail);
     const isoDate = dateToISO(date);
@@ -371,13 +354,6 @@ class DatePicker extends LitElement {
     event.stopPropagation();
     this.calciteDatePickerChange.emit();
   }
-  /**
-   * Get an active date using the value, or current date as default
-   *
-   * @param value
-   * @param min
-   * @param max
-   */
   getActiveDate(value, min, max) {
     const activeDate = dateFromRange(/* @__PURE__ */ new Date(), min, max);
     return dateFromRange(this.activeDate, min, max) || value || (sameDate(max, activeDate) && !this.range ? getFirstValidDateInMonth(activeDate, min, max) : activeDate);
@@ -402,8 +378,6 @@ class DatePicker extends LitElement {
       }
     }
   }
-  // #endregion
-  // #region Rendering
   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);
@@ -412,15 +386,6 @@ class DatePicker extends LitElement {
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
     return this.renderMonth(startCalendarActiveDate, this.maxAsDate, minDate, date, endDate);
   }
-  /**
-   * Render calcite-date-picker-month-header and calcite-date-picker-month
-   *
-   * @param activeDate
-   * @param maxDate
-   * @param minDate
-   * @param date
-   * @param endDate
-   */
   renderMonth(activeDate, maxDate, minDate, date, endDate) {
     return this.localeData && html`<calcite-date-picker-month .activeDate=${activeDate} .dateTimeFormat=${this.dateTimeFormat} .endDate=${this.range ? endDate : void 0} .headingLevel=${this.headingLevel || HEADING_LEVEL} .hoverRange=${this.hoverRange} .layout=${this.layout} .localeData=${this.localeData} .max=${maxDate} .messages=${this.messages} .min=${minDate} .monthStyle=${this.monthStyle} @calciteInternalDatePickerDayHover=${this.monthHoverChange} @calciteInternalDatePickerDaySelect=${this.monthDateChange} @calciteInternalDatePickerMonthActiveDateChange=${this.monthActiveDateChange} @calciteInternalDatePickerMonthChange=${this.monthHeaderSelectChange} @calciteInternalDatePickerMonthMouseOut=${this.monthMouseOutChange} .range=${this.range} .scale=${this.scale} .selectedDate=${this.activeRange === "end" ? endDate : date} .startDate=${this.range ? date : void 0}></calcite-date-picker-month>` || "";
   }

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

@@ -4,9 +4,17 @@ import { InteractiveComponent } from '../../utils/interactive';
 import { Scale } from '../interfaces';
 
 export declare class DatePickerDay extends LitElement {
-    /** When `true`, the component is active. */
+    /**
+     * When `true`, the component is active.
+     *
+     * @default false
+     */
     active: boolean;
-    /** Date is in the current month. */
+    /**
+     * Date is in the current month.
+     *
+     * @default false
+     */
     currentMonth: boolean;
     /**
      * Day of the month to be shown.
@@ -14,21 +22,49 @@ export declare class DatePickerDay extends LitElement {
      * @required
      */
     day: number;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
-    /** Date is the end of date range. */
+    /**
+     * Date is the end of date range.
+     *
+     * @default false
+     */
     endOfRange: boolean;
-    /** Date is currently highlighted as part of the range, */
+    /**
+     * Date is currently highlighted as part of the range,
+     *
+     * @default false
+     */
     highlighted: boolean;
-    /** When `true`, activates the component's range mode to allow a start and end date. */
+    /**
+     * When `true`, activates the component's range mode to allow a start and end date.
+     *
+     * @default false
+     */
     range: boolean;
-    /** Date is being hovered and within the set range. */
+    /**
+     * Date is being hovered and within the set range.
+     *
+     * @default false
+     */
     rangeHover: boolean;
     /** Specifies the size of the component. */
     scale: Scale;
-    /** When `true`, the component is selected. */
+    /**
+     * When `true`, the component is selected.
+     *
+     * @default false
+     */
     selected: boolean;
-    /** Date is the start of date range. */
+    /**
+     * Date is the start of date range.
+     *
+     * @default false
+     */
     startOfRange: boolean;
     /** The component's value. */
     value: Date;

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

@@ -1,11 +1,11 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
 import { c as dateToISO } from "../../chunks/date.js";
-import { k as closestElementCrossShadowBoundary, t as toAriaBoolean } from "../../chunks/dom.js";
+import { l as closestElementCrossShadowBoundary, t as toAriaBoolean } from "../../chunks/dom.js";
 import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
@@ -13,8 +13,6 @@ import { c as componentFocusable } from "../../chunks/component.js";
 import { css } from "@lit/reactive-element/css-tag.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--2);line-height:1rem;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-3))}.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--2)}:host([scale=m]){--calcite-internal-day-size: 40px}:host([scale=m]) .day{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-day-size: 44px}:host([scale=l]) .day{font-size:var(--calcite-font-size-0)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-disabled)}: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-text-1));font-weight:var(--calcite-font-weight-medium)}:host(:focus[selected]) .day{z-index:var(--calcite-z-index);outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:hover:not([disabled]):not([selected])) .day{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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-foreground-1))}: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-brand));background-color:var(--calcite-date-picker-day-range-background-color, var(--calcite-color-foreground-current))}@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}`;
 class DatePickerDay extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.active = false;
@@ -33,14 +31,11 @@ class DatePickerDay extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { active: [7, { reflect: true, type: Boolean }], currentMonth: [7, { reflect: true, type: Boolean }], dateTimeFormat: [0, { attribute: false }], day: [9, { type: Number }], disabled: [7, { reflect: true, type: Boolean }], endOfRange: [7, { reflect: true, type: Boolean }], highlighted: [7, { reflect: true, type: Boolean }], range: [7, { reflect: true, type: Boolean }], rangeEdge: [3, { reflect: true }], rangeHover: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], selected: [7, { reflect: true, type: Boolean }], startOfRange: [7, { reflect: true, type: Boolean }], value: [0, { attribute: false }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeEdge: [3, {}, { reflect: true }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.el.focus();
@@ -51,8 +46,6 @@ class DatePickerDay extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   onClick() {
     if (this.disabled) {
       return;
@@ -73,8 +66,6 @@ class DatePickerDay extends LitElement {
     }
     this.calciteInternalDayHover.emit();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const dayId = dateToISO(this.value).replaceAll("-", "");
     if (this.parentDatePickerEl) {

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

@@ -22,7 +22,11 @@ export declare class DatePickerMonth extends LitElement {
     min: Date;
     /** Specifies the monthStyle used by the component. */
     monthStyle: "abbreviated" | "wide";
-    /** When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates. */
+    /**
+     * When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.
+     *
+     * @default false
+     */
     range: boolean;
     /** Specifies the size of the component. */
     scale: Scale;