@esri/calcite-components 5.2.0-next.99 → 5.2.1-next.0

package/dist/chunks/useInlineEdit.js

@@ -12,19 +12,31 @@ const InlineEditControls = ({ cancelEditingLabel, confirmChangesLabel, inlineEdi
   html`<calcite-action .ariaLabel=${confirmChangesLabel} class=${safeClassMap(CSS.confirmChanges)} .disabled=${loading} icon=check .loading=${loading} @click=${onConfirmChanges} .scale=${scale} .text=${confirmChangesLabel} title=${confirmChangesLabel ?? nothing} type=button></calcite-action>`,
   html`<calcite-action .ariaLabel=${cancelEditingLabel} class=${safeClassMap(CSS.cancelEditing)} .disabled=${loading} icon=x @click=${onCancelEditing} .scale=${scale} .text=${cancelEditingLabel} title=${cancelEditingLabel ?? nothing} type=button></calcite-action>`
 ] || ""}</div>`;
+const INLINE_EDIT_ACTIVATION_SOURCE = {
+  editButton: "edit-button",
+  input: "input"
+};
 class UseInlineEdit {
   constructor(options) {
     this.options = options;
     this.valuePriorToEditing = "";
   }
-  enable() {
-    this.valuePriorToEditing = this.options.getValue();
+  enable(source = INLINE_EDIT_ACTIVATION_SOURCE.input) {
+    this.captureValuePriorToEditing();
     this.options.setInlineEditing(true);
     requestAnimationFrame(() => {
-      this.options.setFocus();
+      this.options.setFocus(source);
     });
     this.options.emitEnableEditingChange();
   }
+  setCaretPosition(input, source) {
+    if (source === INLINE_EDIT_ACTIVATION_SOURCE.editButton && input && input.selectionStart !== null) {
+      input.setSelectionRange(input.value.length, input.value.length);
+    }
+  }
+  captureValuePriorToEditing() {
+    this.valuePriorToEditing = this.options.getValue();
+  }
   disable() {
     this.options.setInlineEditing(false);
   }
@@ -61,5 +73,6 @@ export {
   CSS as C,
   InlineEditControls as I,
   UseInlineEdit as U,
+  INLINE_EDIT_ACTIVATION_SOURCE as a,
   inlineEditConverter as i
 };

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

@@ -73,10 +73,6 @@ export abstract class Action extends LitElement {
   /**
    * Specifies the appearance of the component.
    *
-   * @deprecated
-   * in v5.0.0, removal target v7.0.0 - No longer necessary for `"transparent"`.
-   *
-   * For a `"solid"` appearance, use the component's background color tokens instead.
    * @default "transparent"
    */
   accessor appearance: Extract<"solid" | "transparent", Appearance>;

package/dist/components/calcite-action-bar/customElement.js

@@ -190,12 +190,6 @@ class ActionBar extends LitElement {
         return;
       }
       const { width, height } = entry.contentRect;
-      const axis = this.layout === "horizontal" ? "width" : "height";
-      const size = axis === "width" ? width : height;
-      if (this.lastOverflowAxisSize?.axis === axis && this.lastOverflowAxisSize.size === size) {
-        return;
-      }
-      this.lastOverflowAxisSize = { axis, size };
       this.resize({ width, height });
     };
     this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));

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

@@ -22,13 +22,13 @@ export abstract class BlockGroup extends LitElement {
    */
   accessor dragEnabled: boolean;
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the expansion mode of the component, where:
    *
-   * `"multiple"` allows any number of selections,
+   * `"multiple"` allows any number of `calcite-block`s to be expanded,
    *
-   * `"single"` allows only one selection, and
+   * `"single"` allows only one `calcite-block` to be expanded, and
    *
-   * `"single-persist"` allows one selection and prevents de-selection.
+   * `"single-persist"` allows one `calcite-block` to be expanded and prevents collapsing.
    *
    * @default "multiple"
    */

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

@@ -3,7 +3,7 @@ import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { isEqual } from "es-toolkit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { d as dateFromISO, a as dateToISO, n as nextMonth, p as prevMonth, k as getDaysDiff, b as dateFromRange, s as sameDate, j as getFirstValidDateInMonth, i as inRange } from "../../chunks/date.js";
+import { d as dateFromISO, a as dateToISO, n as nextMonth, p as prevMonth, k as getDaysDiff, b as dateFromRange, s as sameDate, j as getFirstValidDateInMonth, i as inRange, h as hasSameMonthAndYear } from "../../chunks/date.js";
 import { n as numberStringFormatter, g as getDateTimeFormat } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusable } from "../../chunks/useFocusable.js";
@@ -380,12 +380,15 @@ class DatePicker extends LitElement {
       this.activeStartDate = this.getActiveDate(startDate, this.minAsDate, this.maxAsDate);
       this.activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
       if (sameDate(this.activeStartDate, this.activeEndDate)) {
-        const previousMonthActiveDate = getFirstValidDateInMonth(this.activeEndDate ? prevMonth(this.activeEndDate) : void 0, this.minAsDate, this.maxAsDate);
-        const nextMonthActiveDate = this.activeEndDate ? nextMonth(this.activeEndDate) : void 0;
-        if (inRange(previousMonthActiveDate, this.minAsDate, this.maxAsDate)) {
-          this.activeStartDate = previousMonthActiveDate;
-        } else if (inRange(nextMonthActiveDate, this.minAsDate, this.maxAsDate)) {
+        const nextMonthDate = this.activeEndDate ? nextMonth(this.activeEndDate) : void 0;
+        const nextMonthActiveDate = inRange(nextMonthDate, this.minAsDate, this.maxAsDate) ? nextMonthDate : getFirstValidDateInMonth(nextMonthDate, this.minAsDate, this.maxAsDate);
+        if (hasSameMonthAndYear(nextMonthActiveDate, nextMonthDate) && inRange(nextMonthActiveDate, this.minAsDate, this.maxAsDate)) {
           this.activeEndDate = nextMonthActiveDate;
+        } else if (this.calendars === 2) {
+          const previousMonthActiveDate = getFirstValidDateInMonth(this.activeStartDate ? prevMonth(this.activeStartDate) : void 0, this.minAsDate, this.maxAsDate);
+          if (inRange(previousMonthActiveDate, this.minAsDate, this.maxAsDate)) {
+            this.activeStartDate = previousMonthActiveDate;
+          }
         }
       }
     }

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

@@ -45,21 +45,21 @@ export interface DeclareCssProperties {
   "--calcite-input-loading-background-color": "*";
   /** When `loading`, specifies the fill color of the component's `loading` element. */
   "--calcite-input-loading-fill-color": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component, its inline edit elements and slotted `calcite-action` wrappers, when hovered. */
+  /** When `inlineEdit` is defined and `inlineEditing` is not set, specifies the component's background color when hovered. */
   "--calcite-input-inline-edit-background-color-hover": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls. */
   "--calcite-input-inline-edit-control-background-color": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls, when hovered. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when hovered. */
   "--calcite-input-inline-edit-control-background-color-hover": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls, when pressed. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when pressed. */
   "--calcite-input-inline-edit-control-background-color-press": "*";
-  /** When `inline-edit` is enabled, specifies the corner radius of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the corner radius of the component's editing controls. */
   "--calcite-input-inline-edit-control-corner-radius": "*";
-  /** When `inline-edit` is enabled, specifies the loader color of the component's inline edit controls. */
+  /** When `inlineEdit` is `true`, specifies the loader color of the component's confirm control. */
   "--calcite-input-inline-edit-control-loader-color": "*";
-  /** When `inline-edit` is enabled, specifies the text color of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls. */
   "--calcite-input-inline-edit-control-text-color": "*";
-  /** When `inline-edit` is enabled, specifies the text color of the component's inline edit controls, when pressed or hovered. */
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls when pressed or hovered. */
   "--calcite-input-inline-edit-control-text-color-press": "*";
 }
 }
@@ -125,18 +125,20 @@ export abstract class Input extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /**
-   * Enables built-in inline editing. Set to `"controls-disabled"` to hide save and cancel controls.
+   * Enables inline editing. When not editing, the component displays without a border.
+   * When `true`, edits must be saved or cancelled via controls.
+   * When `"controls-disabled"` is specified, edits are saved on blur.
    *
    * @default false
    */
   accessor inlineEdit: boolean | "controls-disabled";
   /**
-   * When `true`, the component displays its inline editing mode.
+   * When `true` and `inlineEdit` is defined, the component is editable.
    *
    * @default false
    */
   accessor inlineEditing: boolean;
-  /** Specifies an optional callback to be executed when saving inline editing changes, inline edit controls must be present */
+  /** When `inlineEdit` is `true`, specifies a callback to be run when changes are saved. */
   accessor inlineEditingBeforeConfirm: (() => Promise<void>) | undefined;
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
@@ -292,15 +294,15 @@ export abstract class Input extends LitElement {
    * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Fires each time a new `value` is typed and committed. */
+  /** Fires each time a new `value` is committed. */
   readonly calciteInputChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editing is cancelled. */
+  /** When `inlineEdit` is defined, fires when editing is cancelled. */
   readonly calciteInputInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editing is enabled or disabled. */
+  /** When `inlineEdit` is defined, fires when `inlineEditing` is enabled or disabled. */
   readonly calciteInputInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires after built-in inline editing confirmation completes. */
+  /** When `inlineEdit` is `true`, fires after editing is confirmed. */
   readonly calciteInputInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires each time a new `value` is typed. */
+  /** When `inlineEdit` is `false`, fires each time a new `value` is typed. */
   readonly calciteInputInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputChange: Input["calciteInputChange"]["detail"];

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

@@ -13,7 +13,7 @@ import { i as isValidNumber, B as BigDecimal, n as numberStringFormatter, p as p
 import { u as useLabel } from "../../chunks/useLabel.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls } from "../../chunks/useInlineEdit.js";
+import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls, a as INLINE_EDIT_ACTIVATION_SOURCE } from "../../chunks/useInlineEdit.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusable } from "../../chunks/useFocusable.js";
@@ -94,8 +94,10 @@ class Input extends LitElement {
         this.restoreInlineEditingValue(value);
       },
       commitValue: () => this.commitInlineEditingValue(),
-      setFocus: () => {
-        void this.setFocus();
+      setFocus: async (source) => {
+        await this.setFocus();
+        const input = this.type === "number" ? this.childNumberRef.value : this.childRef.value;
+        this.inlineEditManager.setCaretPosition(input, source);
       },
       emitCancel: () => {
         this.calciteInputInlineEditingCancel.emit();
@@ -213,6 +215,9 @@ class Input extends LitElement {
     }
   }
   willUpdate(changes) {
+    if (changes.has("inlineEditing") && this.inlineEditing) {
+      this.inlineEditManager.captureValuePriorToEditing();
+    }
     if (changes.has("max")) {
       this.maxString = this.max?.toString() ?? void 0;
     }
@@ -695,7 +700,7 @@ class Input extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${localeNumberInput}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${localeNumberInput}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(INLINE_EDIT_ACTIVATION_SOURCE.editButton), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input", Input);

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

@@ -47,21 +47,21 @@ export interface DeclareCssProperties {
   "--calcite-input-suffix-size": "*";
   /** When `suffixText` is provided, specifies the text color of the component's suffix element. */
   "--calcite-input-suffix-text-color": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component, its inline edit elements and slotted `calcite-action` wrappers, when hovered. */
+  /** When `inlineEdit` is defined and `inlineEditing` is not set, specifies the component's background color when hovered. */
   "--calcite-input-number-inline-edit-background-color-hover": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls. */
   "--calcite-input-number-inline-edit-control-background-color": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls, when hovered. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when hovered. */
   "--calcite-input-number-inline-edit-control-background-color-hover": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls, when pressed. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when pressed. */
   "--calcite-input-number-inline-edit-control-background-color-press": "*";
-  /** When `inline-edit` is enabled, specifies the corner radius of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the corner radius of the component's editing controls. */
   "--calcite-input-number-inline-edit-control-corner-radius": "*";
-  /** When `inline-edit` is enabled, specifies the loader color of the component's inline edit controls. */
+  /** When `inlineEdit` is `true`, specifies the loader color of the component's confirm control. */
   "--calcite-input-number-inline-edit-control-loader-color": "*";
-  /** When `inline-edit` is enabled, specifies the text color of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls. */
   "--calcite-input-number-inline-edit-control-text-color": "*";
-  /** When `inline-edit` is enabled, specifies the text color of the component's inline edit controls, when pressed or hovered. */
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls when pressed or hovered. */
   "--calcite-input-number-inline-edit-control-text-color-press": "*";
 }
 }
@@ -118,18 +118,20 @@ export abstract class InputNumber extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /**
-   * Enables built-in inline editing. Set to `"controls-disabled"` to hide save and cancel controls.
+   * Enables inline editing. When not editing, the component displays without a border.
+   * When `true`, edits must be saved or cancelled via controls.
+   * When `"controls-disabled"` is specified, edits are saved on blur.
    *
    * @default false
    */
   accessor inlineEdit: boolean | "controls-disabled";
   /**
-   * When `true`, the component displays its inline editing mode.
+   * When `true` and `inlineEdit` is defined, the component is editable.
    *
    * @default false
    */
   accessor inlineEditing: boolean;
-  /** Specifies an optional callback to be executed when saving inline editing changes, inline editing controls must be present */
+  /** When `inlineEdit` is `true`, specifies a callback to be run when changes are saved. */
   accessor inlineEditingBeforeConfirm: (() => Promise<void>) | undefined;
   /**
    * When `true`, restricts the component to integer numbers only and disables exponential notation.
@@ -269,15 +271,15 @@ export abstract class InputNumber extends LitElement {
    * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Fires each time a new `value` is typed and committed. */
+  /** Fires each time a new `value` is committed. */
   readonly calciteInputNumberChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editing is cancelled. */
+  /** When `inlineEdit` is defined, fires when editing is cancelled. */
   readonly calciteInputNumberInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editing is enabled or disabled. */
+  /** When `inlineEdit` is defined, fires when `inlineEditing` is enabled or disabled. */
   readonly calciteInputNumberInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires after built-in inline editing confirmation completes. */
+  /** When `inlineEdit` is `true`, fires after editing is confirmed. */
   readonly calciteInputNumberInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires each time a new `value` is typed. */
+  /** When `inlineEdit` is `false`, fires each time a new `value` is typed. */
   readonly calciteInputNumberInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputNumberChange: InputNumber["calciteInputNumberChange"]["detail"];

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

@@ -14,7 +14,7 @@ import { i as isValidNumber, n as numberStringFormatter, B as BigDecimal, p as p
 import { g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls } from "../../chunks/useInlineEdit.js";
+import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls, a as INLINE_EDIT_ACTIVATION_SOURCE } from "../../chunks/useInlineEdit.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusable } from "../../chunks/useFocusable.js";
@@ -85,8 +85,9 @@ class InputNumber extends LitElement {
         this.restoreInlineEditingValue(value);
       },
       commitValue: () => this.commitInlineEditingValue(),
-      setFocus: () => {
-        void this.setFocus();
+      setFocus: async (source) => {
+        await this.setFocus();
+        this.inlineEditManager.setCaretPosition(this.childNumberRef.value, source);
       },
       emitCancel: () => {
         this.calciteInputNumberInlineEditingCancel.emit();
@@ -200,6 +201,9 @@ class InputNumber extends LitElement {
     }
   }
   willUpdate(changes) {
+    if (changes.has("inlineEditing") && this.inlineEditing) {
+      this.inlineEditManager.captureValuePriorToEditing();
+    }
     if (changes.has("max")) {
       this.maxString = this.max?.toString() || void 0;
     }
@@ -661,7 +665,7 @@ class InputNumber extends LitElement {
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText,
       [CSS.clearable]: this.isClearable
-    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(INLINE_EDIT_ACTIVATION_SOURCE.editButton), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-number", InputNumber);

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

@@ -21,21 +21,21 @@ export interface DeclareCssProperties {
   "--calcite-input-loading-background-color": "*";
   /** When `loading`, specifies the fill color of the component`s `loading` element. */
   "--calcite-input-loading-fill-color": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component, its inline edit elements and slotted `calcite-action` wrappers, when hovered. */
+  /** When `inlineEdit` is defined and `inlineEditing` is not set, specifies the component's background color when hovered. */
   "--calcite-input-text-inline-edit-background-color-hover": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls. */
   "--calcite-input-text-inline-edit-control-background-color": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls, when hovered. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when hovered. */
   "--calcite-input-text-inline-edit-control-background-color-hover": "*";
-  /** When `inline-edit` is enabled, specifies the background color of the component's inline edit controls, when pressed. */
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when pressed. */
   "--calcite-input-text-inline-edit-control-background-color-press": "*";
-  /** When `inline-edit` is enabled, specifies the corner radius of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the corner radius of the component's editing controls. */
   "--calcite-input-text-inline-edit-control-corner-radius": "*";
-  /** When `inline-edit` is enabled, specifies the loader color of the component's inline edit controls. */
+  /** When `inlineEdit` is `true`, specifies the loader color of the component's confirm control. */
   "--calcite-input-text-inline-edit-control-loader-color": "*";
-  /** When `inline-edit` is enabled, specifies the text color of the component's inline edit controls. */
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls. */
   "--calcite-input-text-inline-edit-control-text-color": "*";
-  /** When `inline-edit` is enabled, specifies the text color of the component's inline edit controls, when pressed or hovered. */
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls when pressed or hovered. */
   "--calcite-input-text-inline-edit-control-text-color-press": "*";
   /** When `prefixText` is provided, specifies the width of the component's prefix element. */
   "--calcite-input-prefix-size-x": "*";
@@ -108,18 +108,20 @@ export abstract class InputText extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /**
-   * Enables built-in inline editing. Set to `"controls-disabled"` to hide save and cancel controls.
+   * Enables inline editing. When not editing, the component displays without a border.
+   * When `true`, edits must be saved or cancelled via controls.
+   * When `"controls-disabled"` is specified, edits are saved on blur.
    *
    * @default false
    */
   accessor inlineEdit: boolean | "controls-disabled";
   /**
-   * When `true`, the component displays its inline editing mode.
+   * When `true` and `inlineEdit` is defined, the component is editable.
    *
    * @default false
    */
   accessor inlineEditing: boolean;
-  /** Specifies an optional callback to be executed when saving inline editing changes, inline edit controls must be present */
+  /** When `inlineEdit` is `true`, specifies a callback to be run when changes are saved. */
   accessor inlineEditingBeforeConfirm: (() => Promise<void>) | undefined;
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
@@ -231,15 +233,15 @@ export abstract class InputText extends LitElement {
    * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Fires each time a new `value` is typed and committed. */
+  /** Fires each time a new `value` is committed. */
   readonly calciteInputTextChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editing is cancelled. */
+  /** When `inlineEdit` is defined, fires when editing is cancelled. */
   readonly calciteInputTextInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editing is enabled or disabled. */
+  /** When `inlineEdit` is defined, fires when `inlineEditing` is enabled or disabled. */
   readonly calciteInputTextInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires after built-in inline editing confirmation completes. */
+  /** When `inlineEdit` is `true`, fires after editing is confirmed. */
   readonly calciteInputTextInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires each time a new `value` is typed. */
+  /** When `inlineEdit` is `false`, fires each time a new `value` is typed. */
   readonly calciteInputTextInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputTextChange: InputText["calciteInputTextChange"]["detail"];

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

@@ -12,7 +12,7 @@ import { u as useLabel } from "../../chunks/useLabel.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls } from "../../chunks/useInlineEdit.js";
+import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls, a as INLINE_EDIT_ACTIVATION_SOURCE } from "../../chunks/useInlineEdit.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusable } from "../../chunks/useFocusable.js";
@@ -70,8 +70,9 @@ class InputText extends LitElement {
         this.restoreInlineEditingValue(value);
       },
       commitValue: () => this.commitInlineEditingValue(),
-      setFocus: () => {
-        void this.setFocus();
+      setFocus: async (source) => {
+        await this.setFocus();
+        this.inlineEditManager.setCaretPosition(this.childRef.value, source);
       },
       emitCancel: () => {
         this.calciteInputTextInlineEditingCancel.emit();
@@ -163,6 +164,9 @@ class InputText extends LitElement {
     this.setPreviousValue(this.value);
   }
   willUpdate(changes) {
+    if (changes.has("inlineEditing") && this.inlineEditing) {
+      this.inlineEditManager.captureValuePriorToEditing();
+    }
     if (changes.has("icon")) {
       this.requestedIcon = setRequestedIcon({}, this.icon, "text");
     }
@@ -392,7 +396,7 @@ class InputText extends LitElement {
       [CSS.clearable]: this.isClearable,
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(INLINE_EDIT_ACTIVATION_SOURCE.editButton), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-text", InputText);

package/dist/components/calcite-input-time-zone/customElement.d.ts

@@ -30,6 +30,8 @@ export abstract class InputTimeZone extends LitElement {
   accessor disabled: boolean;
   /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
+  /** Specifies an accessible label for the component. */
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
   /**

package/dist/components/calcite-input-time-zone/customElement.js

@@ -233,7 +233,7 @@ class InputTimeZone extends LitElement {
     useLabel(this);
   }
   static {
-    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -404,7 +404,7 @@ class InputTimeZone extends LitElement {
     return !metadata.country || open || !selected ? label : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.placeholder || this.messages[`${this.mode}Placeholder`]} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.label || this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.placeholder || this.messages[`${this.mode}Placeholder`]} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
   }
   renderItems() {
     if (this.mode === "region") {

package/dist/components/calcite-loader/customElement.js

@@ -80,6 +80,7 @@ class Loader extends LitElement {
     const { el, inline, label, text, type, value } = this;
     const id = el.id || guid();
     const isDeterminate = type !== "indeterminate";
+    const hasValueLabel = type === "determinate-value";
     const valueNow = Math.floor(value);
     this.el.ariaLabel = label;
     this.el.ariaValueMax = isDeterminate ? "100" : null;
@@ -87,7 +88,7 @@ class Loader extends LitElement {
     this.el.ariaValueNow = isDeterminate ? valueNow.toString() : null;
     setAttribute(this.el, "id", id);
     this.el.role = "progressbar";
-    return html`<div class=${safeClassMap(CSS.rings)}>${this.renderRing("track")}${this.renderRing("progress")}${!inline && isDeterminate && html`<div class=${safeClassMap(CSS.percentage)}>${this.formatValue()}</div>` || ""}</div>${!inline && text && html`<div class=${safeClassMap(CSS.text)}>${text}</div>` || ""}`;
+    return html`<div class=${safeClassMap(CSS.rings)}>${this.renderRing("track")}${this.renderRing("progress")}${!inline && hasValueLabel && html`<div class=${safeClassMap(CSS.percentage)}>${this.formatValue()}</div>` || ""}</div>${!inline && text && html`<div class=${safeClassMap(CSS.text)}>${text}</div>` || ""}`;
   }
   renderRing(type) {
     const { inline, scale, value } = this;