@esri/calcite-components 5.2.0-next.98 → 5.2.0

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-menu-item/customElement.js

@@ -10,7 +10,7 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { C as CSS, I as ICONS, S as SLOTS } from "../../chunks/resources20.js";
-const styles = css`:host{--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: 0;--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-xl);--calcite-internal-menu-item-dropdown-action-block-size: auto;--calcite-internal-menu-item-dropdown-action-divider-inset-block: var( --calcite-theme-space-2xs, var(--calcite-spacing-xxs) );--calcite-internal-menu-item-dropdown-action-flex: initial;--calcite-internal-menu-item-font-size: var(--calcite-font-size-relative-md);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-md);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg);--calcite-internal-menu-item-border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([layout=vertical]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: auto;--calcite-internal-menu-item-padding-block: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-md);inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.item-content{background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:var(--calcite-space-base);border-block-end:var(--calcite-space-base) solid var(--calcite-color-transparent);font-size:var(--calcite-internal-menu-item-font-size);line-height:var(--calcite-internal-menu-item-line-height, inherit);padding-inline:var(--calcite-internal-menu-item-padding-inline);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{--calcite-internal-menu-background-color: var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2))}.content:focus{border-block-end-width:4px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));padding-block-start:var(--calcite-space-2xs);border-block-end-width:var(--calcite-space-2xs)}.content:active{--calcite-internal-menu-background-color: var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3));--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:var(--calcite-internal-menu-item-padding-block);border-block-end:0;border-inline-end:var(--calcite-space-2xs) solid var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-menu-item-content-min-block-size: 2.25rem;--calcite-internal-menu-item-font-size: var(--calcite-font-size);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-sm);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-sm);--calcite-internal-menu-item-line-height: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-md);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=s]:not([layout=vertical])){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-space-2xl);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base)}:host([scale=s]:not([layout=vertical])) .icon--dropdown{padding-inline-start:var(--calcite-space-xs)}:host([scale=s]:not([layout=vertical])) .dropdown-action{padding-block:0;padding-inline:0}:host([scale=s][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-sm);--calcite-internal-menu-item-padding-inline: var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-sm);padding-inline-start:var(--calcite-space-xs)}:host([breadcrumb][scale=s]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-xs)}:host([breadcrumb][scale=s]:not([layout=vertical])) .content{padding-inline-start:var(--calcite-space-md);padding-inline-end:var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .content:not([href]){--calcite-internal-menu-item-content-min-block-size: 2.25rem}:host([scale=s][layout=vertical]):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base)}:host([scale=s][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-2xs)}:host([scale=m][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-sm)}:host([scale=l]){--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-2xl);--calcite-internal-menu-item-font-size: var(--calcite-font-size-lg);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-lg);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-lg);--calcite-internal-menu-item-line-height: var(--calcite-space-2xl);--calcite-internal-menu-item-padding-inline: var(--calcite-space-xl);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=l]:not([layout=vertical])){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-sm-plus)}:host([scale=l]:not([layout=vertical])) .container,:host([scale=l]:not([layout=vertical])) .item-content,:host([scale=l]:not([layout=vertical])) .content{min-block-size:var(--calcite-size-2xl)}:host([scale=l]:not([layout=vertical])) .icon--dropdown{margin-inline-start:var(--calcite-space-sm-plus);padding-inline-start:0}:host([scale=l]:not([layout=vertical])) .dropdown-action{margin-inline-start:var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}:host([scale=l][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg)}:host([scale=l][layout=vertical]) .content:has(.icon--end):has(.icon--dropdown) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-lg);padding-inline-start:var(--calcite-space-sm-plus)}:host([scale=l][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-md)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-size-lg);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .content{padding-inline-end:var(--calcite-space-xl)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .dropdown-action{box-sizing:border-box}:host([breadcrumb][scale=l]:not([layout=vertical])) .content{padding-inline-start:var(--calcite-space-xl);padding-inline-end:var(--calcite-space-lg)}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var( --calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand)) )}:host([active][scale=l][layout=vertical]) .content{border-inline-end-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([slot=submenu-item][layout=vertical][scale=s]) .parent--vertical{padding-inline-start:var(--calcite-space-xl)}:host([slot=submenu-item][layout=vertical][scale=m]) .parent--vertical{padding-inline-start:var(--calcite-space-2xl)}:host([slot=submenu-item][layout=vertical][scale=l]) .parent--vertical{padding-inline-start:var(--calcite-space-3xl)}:host([layout=vertical]) .text-container{flex:1}:host([scale=m][layout=vertical]) .text-container{flex:0 1 auto}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)))))}.icon--start{margin-inline-end:var(--calcite-internal-menu-item-icon-spacing-start)}.icon--end{margin-inline-start:var(--calcite-internal-menu-item-icon-spacing-end)}:host([layout=vertical]) .icon--end{padding-inline-start:0;--calcite-internal-menu-item-icon-spacing-end: auto}:host([layout=vertical][scale=s]) .icon--end{padding-inline-start:var(--calcite-space-sm)}:host([layout=vertical][scale=m]) .icon--end{padding-inline-start:var(--calcite-space-md)}:host([layout=vertical][scale=l]) .icon--end{padding-inline-start:var(--calcite-space-lg)}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-start:var(--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start);padding-inline-start:0;margin-inline-end:0px}:host([scale=m]) .icon--breadcrumb{padding-inline-start:.5rem}:host([breadcrumb][scale=l][layout=vertical]) .icon--breadcrumb{margin-inline-start:var(--calcite-space-sm-plus)}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}.dropdown-action{position:relative;align-self:center;--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color);block-size:var(--calcite-internal-menu-item-dropdown-action-block-size);flex:var(--calcite-internal-menu-item-dropdown-action-flex);margin-inline-start:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.dropdown-action:after{position:absolute;display:block;inline-size:1px;content:"";inset-inline-start:calc(-1 * var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs)));inset-block:var(--calcite-internal-menu-item-dropdown-action-divider-inset-block);background-color:var(--calcite-color-border-3)}.dropdown-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}:host([layout=vertical]) .dropdown-action{margin-inline-end:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=l][layout=vertical]) .dropdown-action{margin-inline:var(--calcite-space-xs)}:host([scale=l][layout=vertical]) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;box-shadow:var(--calcite-shadow-md);border:var(--calcite-internal-menu-item-border);border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items{border:none}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items:after{content:"";border-block-start:var(--calcite-internal-menu-item-border);position:absolute;inset-block-start:0;inset-inline:var(--calcite-internal-menu-item-padding-inline) 0}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: 0;--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-xl);--calcite-internal-menu-item-dropdown-action-block-size: auto;--calcite-internal-menu-item-dropdown-action-divider-inset-block: var( --calcite-theme-space-2xs, var(--calcite-spacing-xxs) );--calcite-internal-menu-item-dropdown-action-flex: initial;--calcite-internal-menu-item-font-size: var(--calcite-font-size-relative-md);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-md);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg);--calcite-internal-menu-item-border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([layout=vertical]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: auto;--calcite-internal-menu-item-padding-block: var(--calcite-space-md);--calcite-internal-menu-item-padding-inline: var(--calcite-space-md);inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.item-content{background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:var(--calcite-space-base);border-block-end:var(--calcite-space-base) solid var(--calcite-color-transparent);font-size:var(--calcite-internal-menu-item-font-size);line-height:var(--calcite-internal-menu-item-line-height, inherit);padding-inline:var(--calcite-internal-menu-item-padding-inline);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{--calcite-internal-menu-background-color: var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2))}.content:focus{border-block-end-width:4px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));padding-block-start:var(--calcite-space-2xs);border-block-end-width:var(--calcite-space-2xs)}.content:active{--calcite-internal-menu-background-color: var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3));--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:var(--calcite-internal-menu-item-padding-block);border-block-end:0;border-inline-end:var(--calcite-space-2xs) solid var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-menu-item-content-min-block-size: 2.25rem;--calcite-internal-menu-item-font-size: var(--calcite-font-size);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-sm);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-sm);--calcite-internal-menu-item-line-height: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-md);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=s]:not([layout=vertical])){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-space-2xl);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base)}:host([scale=s]:not([layout=vertical])) .icon--dropdown{padding-inline-start:var(--calcite-space-xs)}:host([scale=s]:not([layout=vertical])) .dropdown-action{padding-block:0;padding-inline:0}:host([scale=s][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-sm);--calcite-internal-menu-item-padding-inline: var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-sm);padding-inline-start:var(--calcite-space-xs)}:host([breadcrumb][scale=s]){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-xs)}:host([breadcrumb][scale=s]:not([layout=vertical])) .content{padding-inline-start:var(--calcite-space-md);padding-inline-end:var(--calcite-space-sm)}:host([scale=s][layout=vertical]) .content:not([href]){--calcite-internal-menu-item-content-min-block-size: 2.25rem}:host([scale=s][layout=vertical]):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-base)}:host([scale=s][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-2xs)}:host([scale=m][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-sm)}:host([scale=l]){--calcite-internal-menu-item-content-min-block-size: var(--calcite-size-2xl);--calcite-internal-menu-item-font-size: var(--calcite-font-size-lg);--calcite-internal-menu-item-icon-spacing-start: var(--calcite-space-lg);--calcite-internal-menu-item-icon-spacing-end: var(--calcite-space-lg);--calcite-internal-menu-item-line-height: var(--calcite-space-2xl);--calcite-internal-menu-item-padding-inline: var(--calcite-space-xl);min-block-size:var(--calcite-internal-menu-item-content-min-block-size)}:host([scale=l]:not([layout=vertical])){--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start: var(--calcite-space-sm-plus)}:host([scale=l]:not([layout=vertical])) .container,:host([scale=l]:not([layout=vertical])) .item-content,:host([scale=l]:not([layout=vertical])) .content{min-block-size:var(--calcite-size-2xl)}:host([scale=l]:not([layout=vertical])) .icon--dropdown{margin-inline-start:var(--calcite-space-sm-plus);padding-inline-start:0}:host([scale=l]:not([layout=vertical])) .dropdown-action{margin-inline-start:var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}:host([scale=l][layout=vertical]){--calcite-internal-menu-item-padding-block: var(--calcite-space-lg);--calcite-internal-menu-item-padding-inline: var(--calcite-space-lg)}:host([scale=l][layout=vertical]) .content:has(.icon--end):has(.icon--dropdown) .icon--end~.icon--dropdown{margin-inline-start:var(--calcite-space-lg);padding-inline-start:var(--calcite-space-sm-plus)}:host([scale=l][layout=vertical]) .content:not([href]){padding-inline-end:var(--calcite-space-md)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action){--calcite-internal-menu-item-dropdown-action-block-size: var(--calcite-size-lg);--calcite-internal-menu-item-dropdown-action-divider-inset-block: var(--calcite-space-xs)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .content{padding-inline-end:var(--calcite-space-xl)}:host([scale=l]:not([layout=vertical])):has(.dropdown-action) .dropdown-action{box-sizing:border-box}:host([breadcrumb][scale=l]:not([layout=vertical])) .content{padding-inline-start:var(--calcite-space-xl);padding-inline-end:var(--calcite-space-lg)}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var( --calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand)) )}:host([active][scale=l][layout=vertical]) .content{border-inline-end-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([slot=submenu-item][layout=vertical][scale=s]) .parent--vertical{padding-inline-start:var(--calcite-space-xl)}:host([slot=submenu-item][layout=vertical][scale=m]) .parent--vertical{padding-inline-start:var(--calcite-space-2xl)}:host([slot=submenu-item][layout=vertical][scale=l]) .parent--vertical{padding-inline-start:var(--calcite-space-3xl)}:host([layout=vertical]) .text-container{flex:1}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)))))}.icon--start{margin-inline-end:var(--calcite-internal-menu-item-icon-spacing-start)}.icon--end{margin-inline-start:var(--calcite-internal-menu-item-icon-spacing-end)}:host([layout=vertical]) .icon--end{padding-inline-start:0;--calcite-internal-menu-item-icon-spacing-end: auto}:host([layout=vertical][scale=s]) .icon--end{padding-inline-start:var(--calcite-space-sm)}:host([layout=vertical][scale=m]) .icon--end{padding-inline-start:var(--calcite-space-md)}:host([layout=vertical][scale=l]) .icon--end{padding-inline-start:var(--calcite-space-lg)}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-start:var(--calcite-internal-menu-item-breadcrumb-icon-margin-inline-start);padding-inline-start:0;margin-inline-end:0px}:host([scale=m]) .icon--breadcrumb{padding-inline-start:.5rem}:host([breadcrumb][scale=l][layout=vertical]) .icon--breadcrumb{margin-inline-start:var(--calcite-space-sm-plus)}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}.dropdown-action{position:relative;align-self:center;--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color);block-size:var(--calcite-internal-menu-item-dropdown-action-block-size);flex:var(--calcite-internal-menu-item-dropdown-action-flex);margin-inline-start:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.dropdown-action:after{position:absolute;display:block;inline-size:1px;content:"";inset-inline-start:calc(-1 * var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs)));inset-block:var(--calcite-internal-menu-item-dropdown-action-divider-inset-block);background-color:var(--calcite-color-border-3)}.dropdown-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}:host([layout=vertical]) .dropdown-action{margin-inline-end:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=l][layout=vertical]) .dropdown-action{margin-inline:var(--calcite-space-xs)}:host([scale=l][layout=vertical]) .dropdown-action:after{inset-inline-start:calc(-1 * var(--calcite-space-xs))}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;box-shadow:var(--calcite-shadow-md);border:var(--calcite-internal-menu-item-border);border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items{border:none}:host([layout=vertical]) .dropdown--vertical.dropdown-menu-items:after{content:"";border-block-start:var(--calcite-internal-menu-item-border);position:absolute;inset-block-start:0;inset-inline:var(--calcite-internal-menu-item-padding-inline) 0}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
 class MenuItem extends LitElement {
   constructor() {
     super();