@esri/calcite-components 3.3.1-next.3 → 3.3.2

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

@@ -8,13 +8,13 @@ import { Label } from '../calcite-label/customElement.js';
 
 export declare class Checkbox extends LitElement {
     /**
-     * When present, the component is checked.
+     * When `true`, the component is checked.
      *
      * @default false
      */
     checked: boolean;
     /**
-     * When present, 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
      */
@@ -26,7 +26,7 @@ export declare class Checkbox extends LitElement {
      */
     form: string;
     /**
-     * When present, the component is initially indeterminate, which is independent from its `checked` value.
+     * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
      *
      * The state is visual only, and can look different across browsers.
      *
@@ -47,7 +47,7 @@ export declare class Checkbox extends LitElement {
      */
     name: string;
     /**
-     * When present and the component resides in a form,
+     * When `true` and the component resides in a form,
      * the component must have a value in order for the form to submit.
      *
      * @default false

package/dist/components/calcite-checkbox/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.3.1-next.3 */
+v3.3.2 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, svg, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -26,7 +26,7 @@ class Checkbox extends LitElement {
     this.onLabelClick = () => {
       this.toggle();
     };
-    this.toggleRef = createRef();
+    this.toggleEl = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.checked = false;
@@ -62,7 +62,9 @@ class Checkbox extends LitElement {
     this.styles = styles;
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.toggleRef.value, options);
+    return this.focusSetter(() => {
+      return this.toggleEl.value;
+    }, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -111,7 +113,7 @@ class Checkbox extends LitElement {
     return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} class=${safeClassMap({
       [CSS.toggle]: true,
       [CSS_UTILITY.rtl]: rtl
-    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${this.disabled ? void 0 : 0} ${ref(this.toggleRef)}><svg aria-hidden=true class=${safeClassMap(CSS.check)} viewBox="0 0 16 16">${svg`<path d=${this.getPath() ?? nothing} />`}</svg><slot></slot></div>${this.labelText && InternalLabel({ bottomSpacingDisabled: true, labelText: this.labelText, required: this.required, spacingInlineStart: true, tooltipText: this.messages.required }) || ""}${HiddenFormInputSlot({ component: this })}` });
+    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${this.disabled ? void 0 : 0} ${ref(this.toggleEl)}><svg aria-hidden=true class=${safeClassMap(CSS.check)} viewBox="0 0 16 16">${svg`<path d=${this.getPath() ?? nothing} />`}</svg><slot></slot></div>${this.labelText && InternalLabel({ bottomSpacingDisabled: true, labelText: this.labelText, required: this.required, spacingInlineStart: true, tooltipText: this.messages.required }) || ""}${HiddenFormInputSlot({ component: this })}` });
   }
 }
 customElement("calcite-checkbox", Checkbox);

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

@@ -18,25 +18,25 @@ export declare class Chip extends LitElement {
      */
     appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
     /**
-     * When present, a close button is added to the component.
+     * When `true`, a close button is added to the component.
      *
      * @default false
      */
     closable: boolean;
     /**
-     * When present, hides the component.
+     * When `true`, hides the component.
      *
      * @default false
      */
     closed: boolean;
     /**
-     * When present, the component closes when the Delete or Backspace key is pressed while focused.
+     * When `true`, the component closes when the Delete or Backspace key is pressed while focused.
      *
      * @default false
      */
     closeOnDelete: boolean;
     /**
-     * When present, 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
      */
@@ -44,7 +44,7 @@ export declare class Chip extends LitElement {
     /** Specifies an icon to display. */
     icon: IconNameOrString;
     /**
-     * When present, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
      *
      * @default false
      */
@@ -70,7 +70,7 @@ export declare class Chip extends LitElement {
      */
     scale: Scale;
     /**
-     * When present, the component is selected.
+     * When `true`, the component is selected.
      *
      * @default false
      */

package/dist/components/calcite-chip/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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

package/dist/components/calcite-chip-group/customElement.d.ts

@@ -8,7 +8,7 @@ import { Chip } from '../calcite-chip/customElement.js';
 /** @slot  - A slot for adding one or more `calcite-chip`s. */
 export declare class ChipGroup extends LitElement {
     /**
-     * When present, 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
      */

package/dist/components/calcite-chip-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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -13,7 +13,7 @@ class ChipGroup extends LitElement {
   constructor() {
     super();
     this.items = [];
-    this.slotRef = createRef();
+    this.slotRefEl = createRef();
     this.focusSetter = useSetFocus()(this);
     this.disabled = false;
     this.scale = "m";
@@ -33,7 +33,9 @@ class ChipGroup extends LitElement {
     this.styles = styles;
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.selectedItems[0] || this.items[0], options);
+    return this.focusSetter(() => {
+      return this.selectedItems[0] || this.items[0];
+    }, options);
   }
   willUpdate(changes) {
     if (changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none")) {
@@ -95,7 +97,7 @@ class ChipGroup extends LitElement {
     event.stopPropagation();
   }
   updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip"));
+    const itemsFromSlot = this.slotRefEl.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip"));
     this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
     if (this.items?.length < 1) {
       return;
@@ -138,7 +140,7 @@ class ChipGroup extends LitElement {
   render() {
     const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
     const { disabled } = this;
-    return InteractiveContainer({ disabled, children: html`<div .ariaLabel=${this.label} class="container" .role=${role}><slot @slotchange=${this.updateItems} ${ref(this.slotRef)}></slot></div>` });
+    return InteractiveContainer({ disabled, children: html`<div .ariaLabel=${this.label} class="container" .role=${role}><slot @slotchange=${this.updateItems} ${ref(this.slotRefEl)}></slot></div>` });
   }
 }
 customElement("calcite-chip-group", ChipGroup);

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

@@ -9,42 +9,42 @@ import { Channels, ColorMode, ColorValue, InternalColor } from './interfaces';
 
 export declare class ColorPicker extends LitElement {
     /**
-     * When present, an empty color (`null`) will be allowed as a `value`.
+     * When `true`, an empty color (`null`) will be allowed as a `value`.
      *
-     * When not present, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+     * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
      *
      * @deprecated Use `clearable` instead
      * @default false
      */
     allowEmpty: boolean;
     /**
-     * When present, the component will allow updates to the color's alpha value.
+     * When `true`, the component will allow updates to the color's alpha value.
      *
      * @default false
      */
     alphaChannel: boolean;
     /**
-     * When present, hides the RGB/HSV channel inputs.
+     * When `true`, hides the RGB/HSV channel inputs.
      *
      * @default false
      */
     channelsDisabled: boolean;
     /**
-     * When present, an empty color (`null`) will be allowed as a `value`.
+     * When `true`, an empty color (`null`) will be allowed as a `value`.
      *
-     * When not present, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+     * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
      *
      * @default false
      */
     clearable: boolean;
     /**
-     * When present, 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;
     /**
-     * When present, hides the color field.
+     * When `true`, hides the color field.
      *
      * @default false
      */
@@ -58,7 +58,7 @@ export declare class ColorPicker extends LitElement {
      */
     format: Format;
     /**
-     * When present, hides the hex input.
+     * When `true`, hides the hex input.
      *
      * @default false
      */
@@ -68,7 +68,7 @@ export declare class ColorPicker extends LitElement {
     /** Specifies the Unicode numeral system used by the component for localization. */
     numberingSystem: NumberingSystem;
     /**
-     * When present, hides the saved colors section.
+     * When `true`, hides the saved colors section.
      *
      * @default false
      */

package/dist/components/calcite-color-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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { keyed } from "lit/directives/keyed.js";

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

@@ -8,15 +8,15 @@ import { ColorPicker } from '../calcite-color-picker/customElement.js';
 
 export declare class ColorPickerHexInput extends LitElement {
     /**
-     * When present, the component will allow updates to the color's alpha value.
+     * When `true`, the component will allow updates to the color's alpha value.
      *
      * @default false
      */
     alphaChannel: boolean;
     /**
-     * When present, an empty color (`undefined`) will be allowed as a `value`.
+     * When `true`, an empty color (`undefined`) will be allowed as a `value`.
      *
-     * When not present, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+     * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
      *
      * @default false
      */

package/dist/components/calcite-color-picker-hex-input/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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import Color from "color";

package/dist/components/calcite-color-picker-swatch/customElement.d.ts

@@ -6,7 +6,7 @@ import { Scale } from '../interfaces';
 /** @deprecated Use the `calcite-swatch-group` and `calcite-swatch` components instead. */
 export declare class ColorPickerSwatch extends LitElement {
     /**
-     * When present, the component is active.
+     * When `true`, the component is active.
      *
      * @default false
      */

package/dist/components/calcite-color-picker-swatch/customElement.js

@@ -1,12 +1,12 @@
 /*! 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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
 import { css, html, svg, nothing } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { B as getModeName } from "../../chunks/dom.js";
+import { C as getModeName } from "../../chunks/dom.js";
 import { h as hexify } from "../../chunks/utils.js";
 const CSS = {
   swatch: "swatch",

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

@@ -18,19 +18,19 @@ import { SelectionDisplay } from './interfaces';
  */
 export declare class Combobox extends LitElement {
     /**
-     * When present, allows entry of custom values, which are not in the original set of items.
+     * When `true`, allows entry of custom values, which are not in the original set of items.
      *
      * @default false
      */
     allowCustomValues: boolean;
     /**
-     * When present, the value-clearing will be disabled.
+     * When `true`, the value-clearing will be disabled.
      *
      * @default false
      */
     clearDisabled: boolean;
     /**
-     * When present, 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
      */
@@ -73,7 +73,7 @@ export declare class Combobox extends LitElement {
      */
     name: string;
     /**
-     * When present, displays and positions the component.
+     * When `true`, displays and positions the component.
      *
      * @default false
      */
@@ -93,19 +93,19 @@ export declare class Combobox extends LitElement {
     /** Specifies the placeholder icon for the input. */
     placeholderIcon: IconNameOrString;
     /**
-     * When present, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
      *
      * @default false
      */
     placeholderIconFlipRtl: boolean;
     /**
-     * When present, the component's value can be read, but controls are not accessible and the value cannot be modified.
+     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
      *
      * @default false
      */
     readOnly: boolean;
     /**
-     * When present and the component resides in a form,
+     * When `true` and the component resides in a form,
      * the component must have a value in order for the form to submit.
      *
      * @default false
@@ -118,7 +118,7 @@ export declare class Combobox extends LitElement {
      */
     scale: Scale;
     /**
-     * When present and `selectionMode` is `"multiple"` or `"ancestors"`, provides a checkbox for selecting all `calcite-combobox-item`s.
+     * When `true` and `selectionMode` is `"multiple"` or `"ancestors"`, provides a checkbox for selecting all `calcite-combobox-item`s.
      *
      * @default false
      */

package/dist/components/calcite-combobox/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.3.1-next.3 */
+v3.3.2 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { live } from "lit/directives/live.js";
@@ -11,7 +11,7 @@ import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { f as filter } from "../../chunks/filter.js";
-import { A as getElementWidth, z as getTextWidth, b as focusElement } from "../../chunks/dom.js";
+import { B as getElementWidth, A as getTextWidth, b as focusElement } from "../../chunks/dom.js";
 import { b as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { g as guid } from "../../chunks/guid.js";

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

@@ -13,7 +13,7 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
  */
 export declare class ComboboxItem extends LitElement {
     /**
-     * When present, the component is active.
+     * When `true`, the component is active.
      *
      * @default false
      */
@@ -23,13 +23,13 @@ export declare class ComboboxItem extends LitElement {
     /** A description for the component, which displays below the heading. */
     description: string;
     /**
-     * When present, 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;
     /**
-     * When present, omits the component from the `calcite-combobox` filtered search results.
+     * When `true`, omits the component from the `calcite-combobox` filtered search results.
      *
      * @default false
      */
@@ -41,7 +41,7 @@ export declare class ComboboxItem extends LitElement {
     /** Specifies an icon to display. */
     icon: IconNameOrString;
     /**
-     * When present, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
      *
      * @default false
      */
@@ -51,7 +51,7 @@ export declare class ComboboxItem extends LitElement {
     /** Provides additional metadata to the component used in filtering. */
     metadata: Record<string, unknown>;
     /**
-     * When present, the component is selected.
+     * When `true`, the component is selected.
      *
      * @default false
      */

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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";

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

@@ -48,13 +48,13 @@ export declare class DatePicker extends LitElement {
     /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
     numberingSystem: NumberingSystem;
     /**
-     * When present, 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 present, 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
      */

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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -42,7 +42,9 @@ class DatePicker extends LitElement {
     this.rangeValueChangedByUser = false;
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.el, options);
+    return this.focusSetter(() => {
+      return this.el;
+    }, options);
   }
   async load() {
     await this.loadLocaleData();

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

@@ -5,7 +5,7 @@ import { Scale } from '../interfaces';
 
 export declare class DatePickerDay extends LitElement {
     /**
-     * When present, the component is active.
+     * When `true`, the component is active.
      *
      * @default false
      */
@@ -23,7 +23,7 @@ export declare class DatePickerDay extends LitElement {
      */
     day: number;
     /**
-     * When present, 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
      */
@@ -41,7 +41,7 @@ export declare class DatePickerDay extends LitElement {
      */
     highlighted: boolean;
     /**
-     * When present, 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
      */
@@ -55,7 +55,7 @@ export declare class DatePickerDay extends LitElement {
     /** Specifies the size of the component. */
     scale: Scale;
     /**
-     * When present, the component is selected.
+     * When `true`, the component is selected.
      *
      * @default false
      */

package/dist/components/calcite-date-picker-day/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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
@@ -10,7 +10,7 @@ import { u as updateHostInteraction, I as InteractiveContainer } from "../../chu
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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-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--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-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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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-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-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{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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-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--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-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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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-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))}: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",
@@ -42,7 +42,9 @@ class DatePickerDay extends LitElement {
     this.styles = styles;
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.el, options);
+    return this.focusSetter(() => {
+      return this.el;
+    }, options);
   }
   load() {
     this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");

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

@@ -29,7 +29,7 @@ export declare class DatePickerMonth extends LitElement {
     /** Specifies the monthStyle used by the component. */
     monthStyle: "abbreviated" | "wide";
     /**
-     * When present, 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
      */

package/dist/components/calcite-date-picker-month/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.3.1-next.3 */
+v3.3.2 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";

package/dist/components/calcite-date-picker-month-header/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.3.1-next.3 */
+v3.3.2 */
 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";
@@ -8,7 +8,7 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { b as dateFromRange, n as nextMonth, p as prevMonth, g as formatCalendarYear, h as parseCalendarYear, j as getDateInMonth, i as inRange, k as hasSameMonthAndYear, l as getOrder } from "../../chunks/date.js";
-import { l as closestElementCrossShadowBoundary, z as getTextWidth } from "../../chunks/dom.js";
+import { l as closestElementCrossShadowBoundary, A 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{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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;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;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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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-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-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-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}`;