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

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

@@ -1,16 +1,25 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { HandleNudge } from "./interfaces.js";
+import type { HandleNudge } from "./types.js";
 
-/**
- * @deprecated Use the `calcite-sort-handle` component instead.
- * @cssproperty [--calcite-handle-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-handle-background-color-hover] - Specifies the component's background color on hover.
- * @cssproperty [--calcite-handle-background-color-selected] - Specifies the component's background color when selected.
- * @cssproperty [--calcite-handle-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-handle-icon-color-hover] - Specifies the component's icon color on hover.
- * @cssproperty [--calcite-handle-icon-color-selected] - Specifies the component's icon color when selected.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-handle-background-color": "*";
+  /** Specifies the component's background color on hover. */
+  "--calcite-handle-background-color-hover": "*";
+  /** Specifies the component's background color when selected. */
+  "--calcite-handle-background-color-selected": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-handle-icon-color": "*";
+  /** Specifies the component's icon color on hover. */
+  "--calcite-handle-icon-color-hover": "*";
+  /** Specifies the component's icon color when selected. */
+  "--calcite-handle-icon-color-selected": "*";
+}
+}
+
+/** @deprecated in v3.0.0, removal target v6.0.0. Use the `calcite-sort-handle` component instead. */
 export abstract class Handle extends LitElement {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -19,15 +28,19 @@ export abstract class Handle extends LitElement {
    */
   accessor disabled: boolean;
   /** Value for the button title attribute. */
-  accessor dragHandle: string;
-  /** Overrides individual strings used by the component. */
+  accessor dragHandle: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      dragHandle?: string;
-      dragHandleUntitled?: string;
-      dragHandleActive?: string;
-      dragHandleChange?: string;
-      dragHandleCommit?: string;
-      dragHandleIdle?: string;
+      dragHandle?: string | undefined;
+      dragHandleUntitled?: string | undefined;
+      dragHandleActive?: string | undefined;
+      dragHandleChange?: string | undefined;
+      dragHandleCommit?: string | undefined;
+      dragHandleIdle?: string | undefined;
   };
   /**
    * When `true`, the component is selected.

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

@@ -1,11 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { l as logger } from "../../chunks/logger.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   handle: "handle",
@@ -19,13 +18,13 @@ const SUBSTITUTIONS = {
   position: "{position}",
   total: "{total}"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-handle-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-handle-background-color, transparent);padding-block:.75rem;padding-inline:.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([disabled])) .handle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1))}:host(:not([disabled])) .handle--selected{color:var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-selected, var(--calcite-color-foreground-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-handle-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-handle-background-color, transparent);padding-block:.75rem;padding-inline:.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}:host(:not([disabled])) .handle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1))}:host(:not([disabled])) .handle--selected{color:var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-selected, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Handle extends LitElement {
   constructor() {
     super(...arguments);
     this.handleButtonRef = createRef();
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.blurUnselectDisabled = false;
     this.disabled = false;
@@ -77,7 +76,7 @@ class Handle extends LitElement {
   getAriaText(type) {
     const { setPosition, setSize, label, messages, selected } = this;
     if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") {
-      return null;
+      return void 0;
     }
     const text = type === "label" ? selected ? messages.dragHandleChange : messages.dragHandleIdle : selected ? messages.dragHandleActive : messages.dragHandleCommit;
     const replacePosition = text.replace(SUBSTITUTIONS.position, setPosition.toString());
@@ -120,7 +119,7 @@ class Handle extends LitElement {
     }
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<span .ariaChecked=${this.disabled ? null : this.selected} .ariaDisabled=${this.disabled ? this.disabled : null} .ariaLabel=${this.disabled ? null : this.getAriaText("label")} class=${safeClassMap({ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected })} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled ? null : 0) ?? nothing} title=${this.getTooltip() ?? nothing} ${ref(this.handleButtonRef)}><calcite-icon .icon=${ICONS.drag} scale=s></calcite-icon></span>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<span .ariaChecked=${this.disabled ? void 0 : this.selected} .ariaDisabled=${this.disabled ? this.disabled : void 0} .ariaLabel=${this.disabled ? void 0 : this.getAriaText("label")} class=${safeClassMap({ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected })} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled ? void 0 : 0) ?? nothing} title=${this.getTooltip() ?? nothing} ${ref(this.handleButtonRef)}><calcite-icon .icon=${ICONS.drag} scale=s></calcite-icon></span>` });
   }
 }
 customElement("calcite-handle", Handle);

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

@@ -1,12 +1,21 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
-import type { IconName } from "./interfaces.js";
+import type { Scale } from "../types.js";
+import type { IconName } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's color. Defaults to current color.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-icon-color` instead.
+   */
+  "--calcite-ui-icon-color": "*";
+  /** Specifies the component's color. Defaults to current color. */
+  "--calcite-icon-color": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-ui-icon-color] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's color. Defaults to current color.
- * @cssproperty [--calcite-icon-color] - Specifies the component's color. Defaults to current color.
- */
 export abstract class Icon extends LitElement {
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
@@ -19,7 +28,7 @@ export abstract class Icon extends LitElement {
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
-  accessor icon: IconName | null;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, preloads the `icon` data.
    *

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

@@ -1,11 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
+import { g as getAssetPath, l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { l as logger } from "../../chunks/logger.js";
 const CSS = {
   flipRtl: "flip-rtl",
   svg: "svg"
@@ -71,12 +70,11 @@ class Icon extends LitElement {
     this.direction = useDirection();
     this.visible = false;
     this.flipRtl = false;
-    this.icon = null;
     this.preload = false;
     this.scale = "m";
   }
   static {
-    this.properties = { pathData: [16, {}, { state: true }], visible: [16, {}, { state: true }], flipRtl: [7, {}, { reflect: true, type: Boolean }], icon: [3, { type: String }, { reflect: true }], preload: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], textLabel: 1 };
+    this.properties = { pathData: [16, {}, { state: true }], visible: [16, {}, { state: true }], flipRtl: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], preload: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], textLabel: 1 };
   }
   static {
     this.styles = styles;
@@ -96,7 +94,7 @@ class Icon extends LitElement {
     }
   }
   willUpdate(changes) {
-    if (changes.has("icon") && (this.hasUpdated || this.icon !== null) || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+    if (changes.has("icon") && (this.hasUpdated || this.icon !== void 0) || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
       this.loadIconPathData();
     }
   }

package/dist/components/calcite-icon/types.d.ts

@@ -0,0 +1,15 @@
+import type { CamelCaseIcon, KebabCaseIcon } from "@esri/calcite-ui-icons";
+import type { KebabCase } from "type-fest";
+
+export type IconName = LegacyKebabCaseIcon | KebabCaseIcon | CamelCaseIcon;
+
+/**
+ * This redundant type avoids breaking change from invalid icon names generated by the previous type that worked at runtime
+ *
+ * @deprecated in v5.2.0, removal target v7.0.0. Use the `KebabCaseIcon` or `CamelCaseIcon` types instead.
+ */
+export type LegacyKebabCaseIcon = KebabCase<ContainsNumber<CamelCaseIcon>>;
+
+export type ContainsNumber<T extends string> = Extract<T, `${string}${Digit}${string}`>;
+
+export type Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

package/dist/components/calcite-inline-editable/customElement.d.ts

@@ -1,14 +1,68 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's background color when hovered.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-background-color-hover": "*";
+  /**
+   * Specifies the component's background color.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-background-color": "*";
+  /**
+   * Specifies the background color of the component's button element.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-background-color": "*";
+  /**
+   * Specifies the background color of the component's button element when hovered.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-background-color-hover": "*";
+  /**
+   * Specifies the background color of the component's button element when pressed.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-background-color-press": "*";
+  /**
+   * Specifies the corner radius of the component's button element.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-corner-radius": "*";
+  /**
+   * Specifies the loader color of the component's button element.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-loader-color": "*";
+  /**
+   * Specifies the text color of the component's button element.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-text-color": "*";
+  /**
+   * Specifies the text color of the component's button element when hovered or pressed.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline edit tokens instead.
+   */
+  "--calcite-inline-editable-button-text-color-press": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-inline-editable-background-color-hover] - Specifies the component's background color when hovered.
- * @cssproperty [--calcite-inline-editable-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-inline-editable-button-background-color] - When `appearance="solid"` or `appearance="outline-fill"`, specifies the background color of the component's button element.
- * @cssproperty [--calcite-inline-editable-button-corner-radius] - Specifies the corner radius of the component's button element.
- * @cssproperty [--calcite-inline-editable-button-loader-color] - Specifies the loader color of the component's button element.
- * @cssproperty [--calcite-inline-editable-button-text-color] - Specifies the text color of the component's button element.
+ * @deprecated in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` with built-in inline edit (`inline-edit` and `inline-edit="controls-disabled"` prop) instead.
  * @slot  - A slot for adding a `calcite-input`.
  */
 export abstract class InlineEditable extends LitElement {
@@ -38,11 +92,15 @@ export abstract class InlineEditable extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      enableEditing?: string;
-      cancelEditing?: string;
-      confirmChanges?: string;
+      enableEditing?: string | undefined;
+      cancelEditing?: string | undefined;
+      confirmChanges?: string | undefined;
   };
   /**
    * Specifies the size of the component.

package/dist/components/calcite-inline-editable/customElement.js

@@ -3,12 +3,13 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
-import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
+import { b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-inline-editable-background-color, var(--calcite-color-foreground-1))}.wrapper .input-wrapper{flex:1 1 0%}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-inline-editable-background-color-hover, var(--calcite-color-foreground-2))}.controls-wrapper{display:flex}.cancel-editing-button[appearance=transparent][kind=neutral]{--calcite-internal-button-text-color: var(--calcite-color-text-3);--calcite-internal-button-border-block-start-color: var(--calcite-color-border-input);--calcite-internal-button-border-block-end-color: var(--calcite-color-border-input)}.cancel-editing-button[appearance=transparent][kind=neutral]:hover{--calcite-internal-button-text-color: var(--calcite-color-text-1)}.enable-editing-button--hidden{pointer-events:none;opacity:0;inline-size:0}.enable-editing-button[appearance=transparent][kind=neutral]{--calcite-internal-button-background-color: transparent}calcite-button{--calcite-button-background-color: var(--calcite-inline-editable-button-background-color);--calcite-button-corner-radius: var(--calcite-inline-editable-button-corner-radius);--calcite-button-loader-color: var(--calcite-inline-editable-button-loader-color);--calcite-button-text-color: var(--calcite-inline-editable-button-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}.wrapper{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--calcite-inline-editable-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}.wrapper .input-wrapper{flex:1 1 0%}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-inline-editable-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.controls-wrapper{display:flex}.enable-editing-button--hidden{pointer-events:none;opacity:0;inline-size:0;margin-inline-start:0}.enable-editing-button{--calcite-action-text-color: var(--calcite-inline-editable-button-text-color, var(--calcite-color-text-1))}.enable-editing-button,.confirm-changes-button,.cancel-editing-button{margin-inline-start:var(--calcite-space-2xs)}:host([editing-enabled]) .confirm-changes-button{margin-inline-start:0}:host([editing-enabled]:not([controls])) .controls-wrapper{display:none}calcite-action{--calcite-action-background-color: var(--calcite-inline-editable-button-background-color);--calcite-action-corner-radius: var(--calcite-inline-editable-button-corner-radius);--calcite-action-loader-color: var(--calcite-inline-editable-button-loader-color);--calcite-action-text-color: var(--calcite-inline-editable-button-text-color)}calcite-action:hover{--calcite-action-background-color-hover: var( --calcite-inline-editable-button-background-color-hover, var(--calcite-inline-editable-button-background-color) );--calcite-action-text-color-press: var( --calcite-inline-editable-button-text-color-press, var(--calcite-inline-editable-button-text-color) )}calcite-action:active{--calcite-action-background-color-press: var( --calcite-inline-editable-button-background-color-press, var(--calcite-inline-editable-button-background-color) );--calcite-action-text-color-press: var( --calcite-inline-editable-button-text-color-press, var(--calcite-inline-editable-button-text-color) )}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   wrapper: "wrapper",
   confirmChangesButton: "confirm-changes-button",
@@ -28,12 +29,13 @@ class InlineEditable extends LitElement {
   constructor() {
     super();
     this.cancelEditingButtonRef = createRef();
+    this.confirmChangesButtonRef = createRef();
     this._editingEnabled = false;
     this.enableEditingButtonRef = createRef();
     this.shouldEmitCancel = false;
     this.valuePriorToEditing = "";
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.controls = false;
     this.disabled = false;
@@ -42,7 +44,11 @@ class InlineEditable extends LitElement {
     this.calciteInlineEditableEditCancel = createEvent({ cancelable: false });
     this.calciteInlineEditableEditConfirm = createEvent({ cancelable: false });
     this.calciteInternalInlineEditableEnableEditingChange = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("calciteInternalInputBlur", this.blurHandler);
+    this.listen("calciteInternalInputNumberBlur", this.blurHandler);
+    this.listen("calciteInternalInputTextBlur", this.blurHandler);
+    this.listen("keydown", this.escapeKeyHandler);
   }
   static {
     this.properties = { afterConfirm: [0, {}, { attribute: false }], controls: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }] };
@@ -69,17 +75,9 @@ class InlineEditable extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.inputEl, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   editingEnabledWatcher(newValue, oldValue) {
     if (this.inputEl) {
-      this.inputEl.editingEnabled = newValue;
+      this.inputEl.inlineEditing = newValue;
     }
     if (!newValue && !!oldValue) {
       this.shouldEmitCancel = true;
@@ -91,13 +89,13 @@ class InlineEditable extends LitElement {
     }
   }
   async handleDefaultSlotChange(event) {
-    const inputElement = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-input"))[0];
+    const inputElement = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-input, calcite-input-number, calcite-input-text"))[0];
     this.inputEl = inputElement;
     if (!inputElement) {
       return;
     }
     await inputElement.componentOnReady();
-    inputElement.editingEnabled = this.editingEnabled;
+    inputElement.inlineEditing = this.editingEnabled;
     inputElement.label = inputElement.label || getLabelText(this);
   }
   onLabelClick() {
@@ -131,11 +129,25 @@ class InlineEditable extends LitElement {
       this.cancelEditing();
     }
     if (event.key === "Tab" && this.shouldShowControls) {
-      if (!event.shiftKey && event.target === this.inputEl) {
+      const confirmChangesButton = this.confirmChangesButtonRef.value;
+      const cancelEditingButton = this.cancelEditingButtonRef.value;
+      const composedPath = event.composedPath();
+      const tabFromInput = this.inputEl ? composedPath.includes(this.inputEl) : false;
+      const tabFromConfirm = confirmChangesButton ? composedPath.includes(confirmChangesButton) : false;
+      const tabFromCancel = cancelEditingButton ? composedPath.includes(cancelEditingButton) : false;
+      if (!event.shiftKey && tabFromConfirm) {
+        event.preventDefault();
+        cancelEditingButton?.setFocus();
+      }
+      if (!event.shiftKey && (tabFromInput || !tabFromConfirm && !tabFromCancel)) {
+        event.preventDefault();
+        confirmChangesButton?.setFocus();
+      }
+      if (!!event.shiftKey && tabFromCancel) {
         event.preventDefault();
-        this.cancelEditingButtonRef.value?.setFocus();
+        confirmChangesButton?.setFocus();
       }
-      if (!!event.shiftKey && event.target === this.cancelEditingButtonRef.value) {
+      if (!!event.shiftKey && tabFromConfirm) {
         event.preventDefault();
         this.inputEl?.setFocus();
       }
@@ -170,12 +182,12 @@ class InlineEditable extends LitElement {
     }
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)} @click=${this.enableEditingHandler} @keydown=${this.escapeKeyHandler}><div class=${safeClassMap(CSS.inputWrapper)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div><div class=${safeClassMap(CSS.controlsWrapper)}><calcite-button appearance=transparent class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)} @click=${this.enableEditingHandler}><div class=${safeClassMap(CSS.inputWrapper)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div><div class=${safeClassMap(CSS.controlsWrapper)}><calcite-action .ariaLabel=${this.messages.enableEditing} class=${safeClassMap({
       [CSS.enableEditingButton]: true,
       [CSS.enableEditingButtonHidden]: this.editingEnabled
-    })} .iconStart=${ICONS.pencil} kind=neutral .label=${this.messages.enableEditing} @click=${this.enableEditingHandler} .scale=${this.scale} title=${this.messages.enableEditing ?? nothing} type=button ${ref(this.enableEditingButtonRef)}></calcite-button>${this.shouldShowControls && [
-      html`<div class=${safeClassMap(CSS.cancelEditingButtonWrapper)}><calcite-button appearance=transparent class=${safeClassMap(CSS.cancelEditingButton)} .iconStart=${ICONS.close} kind=neutral .label=${this.messages.cancelEditing} @click=${this.cancelEditingHandler} .scale=${this.scale} title=${this.messages.cancelEditing ?? nothing} type=button ${ref(this.cancelEditingButtonRef)}></calcite-button></div>`,
-      html`<calcite-button appearance=solid class=${safeClassMap(CSS.confirmChangesButton)} .iconStart=${ICONS.check} kind=brand .label=${this.messages.confirmChanges} .loading=${this.loading} @click=${this.confirmChangesHandler} .scale=${this.scale} title=${this.messages.confirmChanges ?? nothing} type=button></calcite-button>`
+    })} .icon=${ICONS.pencil} @click=${this.enableEditingHandler} .scale=${this.scale} .text=${this.messages.enableEditing} title=${this.messages.enableEditing ?? nothing} type=button ${ref(this.enableEditingButtonRef)}></calcite-action>${this.shouldShowControls && [
+      html`<calcite-action .ariaLabel=${this.messages.confirmChanges} class=${safeClassMap(CSS.confirmChangesButton)} .icon=${ICONS.check} .loading=${this.loading} @click=${this.confirmChangesHandler} .scale=${this.scale} .text=${this.messages.confirmChanges} title=${this.messages.confirmChanges ?? nothing} type=button ${ref(this.confirmChangesButtonRef)}></calcite-action>`,
+      html`<div class=${safeClassMap(CSS.cancelEditingButtonWrapper)}><calcite-action .ariaLabel=${this.messages.cancelEditing} class=${safeClassMap(CSS.cancelEditingButton)} .icon=${ICONS.close} @click=${this.cancelEditingHandler} .scale=${this.scale} .text=${this.messages.cancelEditing} title=${this.messages.cancelEditing ?? nothing} type=button ${ref(this.cancelEditingButtonRef)}></calcite-action></div>`
     ] || ""}</div></div>` });
   }
 }

package/dist/components/calcite-inline-editable/index.js

@@ -1,2 +1,2 @@
-import "../calcite-button/index.js";
+import "../calcite-action/index.js";
 export * from "./customElement.js";

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

@@ -1,30 +1,70 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Scale, Status } from "../interfaces.js";
+import type { Alignment, Scale, Status } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
-import type { InputPlacement } from "./interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
+import type { InputPlacement } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** When `prefixText` is provided, specifies the width of the component's prefix element. */
+  "--calcite-input-prefix-size": "*";
+  /** When `suffixText` is provided, specifies the width of the component's suffix element. */
+  "--calcite-input-suffix-size": "*";
+  /** When `prefixText` is provided, specifies the text color of the component's prefix element. */
+  "--calcite-input-prefix-text-color": "*";
+  /** When `suffixText` is provided, specifies the text color of the component's suffix element. */
+  "--calcite-input-suffix-text-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-input-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-input-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-input-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-input-shadow": "*";
+  /** Specifies the component's `icon` color. */
+  "--calcite-input-icon-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-input-text-color": "*";
+  /** Specifies the component's placeholder text color. */
+  "--calcite-input-placeholder-text-color": "*";
+  /** Specifies the background color of the component's `clearable` and `number-button-type` elements. */
+  "--calcite-input-actions-background-color": "*";
+  /** Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. */
+  "--calcite-input-actions-background-color-hover": "*";
+  /** Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. */
+  "--calcite-input-actions-background-color-press": "*";
+  /** Specifies the icon color of the component's `clearable` and `number-button-type` elements. */
+  "--calcite-input-actions-icon-color": "*";
+  /** Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. */
+  "--calcite-input-actions-icon-color-hover": "*";
+  /** Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. */
+  "--calcite-input-actions-icon-color-press": "*";
+  /** When `loading`, specifies the background color of the component's `loading` element. */
+  "--calcite-input-loading-background-color": "*";
+  /** When `loading`, specifies the fill color of the component's `loading` element. */
+  "--calcite-input-loading-fill-color": "*";
+  /** 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 `inlineEdit` is defined, specifies the background color of the component's editing controls. */
+  "--calcite-input-inline-edit-control-background-color": "*";
+  /** 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 `inlineEdit` is defined, specifies the background color of the component's editing controls when pressed. */
+  "--calcite-input-inline-edit-control-background-color-press": "*";
+  /** When `inlineEdit` is defined, specifies the corner radius of the component's editing controls. */
+  "--calcite-input-inline-edit-control-corner-radius": "*";
+  /** When `inlineEdit` is `true`, specifies the loader color of the component's confirm control. */
+  "--calcite-input-inline-edit-control-loader-color": "*";
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls. */
+  "--calcite-input-inline-edit-control-text-color": "*";
+  /** 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": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-input-prefix-size] - When `prefixText` is provided, specifies the width of the component's prefix element.
- * @cssproperty [--calcite-input-suffix-size] - When `suffixText` is provided, specifies the width of the component's suffix element.
- * @cssproperty [--calcite-input-prefix-text-color] - When `prefixText` is provided, specifies the text color of the component's prefix element.
- * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the text color of the component's suffix element.
- * @cssproperty [--calcite-input-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-input-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-input-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-input-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-input-icon-color] - Specifies the component's `icon` color.
- * @cssproperty [--calcite-input-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-input-placeholder-text-color] - Specifies the component's placeholder text color.
- * @cssproperty [--calcite-input-actions-background-color] - Specifies the background color of the component's `clearable` and `number-button-type` elements.
- * @cssproperty [--calcite-input-actions-background-color-hover] - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
- * @cssproperty [--calcite-input-actions-background-color-press] - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
- * @cssproperty [--calcite-input-actions-icon-color] - Specifies the icon color of the component's `clearable` and `number-button-type` elements.
- * @cssproperty [--calcite-input-actions-icon-color-hover] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
- * @cssproperty [--calcite-input-actions-icon-color-press] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
- * @cssproperty [--calcite-input-loading-background-color] - When `loading`, specifies the background color of the component's `loading` element.
- * @cssproperty [--calcite-input-loading-fill-color] - When `loading`, specifies the fill color of the component's `loading` element.
  * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -84,6 +124,22 @@ export abstract class Input extends LitElement {
    * @default false
    */
   accessor iconFlipRtl: boolean;
+  /**
+   * 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` and `inlineEdit` is defined, the component is editable.
+   *
+   * @default false
+   */
+  accessor inlineEditing: boolean;
+  /** 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;
   /** Specifies the component's label text. */
@@ -108,14 +164,18 @@ export abstract class Input extends LitElement {
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
   accessor maxLength: number | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      cancelInlineEditing?: string;
-      clear?: string;
-      confirmInlineEditingChanges?: string;
-      enableInlineEditing?: string;
-      loading?: string;
-      required?: string;
+      cancelInlineEditing?: string | undefined;
+      clear?: string | undefined;
+      confirmInlineEditingChanges?: string | undefined;
+      enableInlineEditing?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -234,12 +294,21 @@ 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 each time a new `value` is typed. */
+  /** When `inlineEdit` is defined, fires when editing is cancelled. */
+  readonly calciteInputInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** When `inlineEdit` is defined, fires when `inlineEditing` is enabled or disabled. */
+  readonly calciteInputInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** When `inlineEdit` is `true`, fires after editing is confirmed. */
+  readonly calciteInputInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** 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"];
+    calciteInputInlineEditingCancel: Input["calciteInputInlineEditingCancel"]["detail"];
+    calciteInputInlineEditingChange: Input["calciteInputInlineEditingChange"]["detail"];
+    calciteInputInlineEditingConfirm: Input["calciteInputInlineEditingConfirm"]["detail"];
     calciteInputInput: Input["calciteInputInput"]["detail"];
   };
 }