@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.30

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

@@ -7,7 +7,6 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { S as SLOTS$1 } from "../../chunks/resources8.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   backButton: "back-button"
@@ -40,7 +39,6 @@ class FlowItem extends LitElement {
     this.containerRef = createRef();
     this.direction = useDirection();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.closable = false;
     this.closed = false;
@@ -50,6 +48,7 @@ class FlowItem extends LitElement {
     this.disabled = false;
     this.iconFlipRtl = false;
     this.loading = false;
+    this.focusTrapEnabled = false;
     this.menuOpen = false;
     this.overlayPositioning = "absolute";
     this.scale = "m";
@@ -65,7 +64,7 @@ class FlowItem extends LitElement {
     this.calciteInternalFlowItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], focusTrapEnabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -74,7 +73,10 @@ class FlowItem extends LitElement {
     await this.containerRef.value?.scrollContentTo(options);
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.backButtonRef.value || this.containerRef.value, options);
+    return this.containerRef.value?.setFocus(options);
+  }
+  async updateFocusTrapElements(extraContainers) {
+    this.containerRef.value?.updateFocusTrapElements(extraContainers);
   }
   willUpdate(changes) {
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
@@ -119,11 +121,11 @@ class FlowItem extends LitElement {
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-    return showBackButton ? keyed("flow-back-button", html`<calcite-action .ariaLabel=${label} class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
+    return showBackButton ? keyed("flow-back-button", html`<calcite-action class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
   }
   render() {
-    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapsed=${collapsed} .collapseDirection=${collapseDirection} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl, focusTrapEnabled, focusTrapOptions } = this;
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapsed=${collapsed} .collapseDirection=${collapseDirection} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .focusTrapEnabled=${focusTrapEnabled} .focusTrapOptions=${focusTrapOptions} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

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

@@ -8,16 +8,16 @@ export abstract class Graph extends LitElement {
    * Array of values describing a single color stop ([offset, color, opacity])
    * These color stops should be sorted by offset value.
    */
-  accessor colorStops: ColorStop[];
+  accessor colorStops: ColorStop[] | undefined;
   /**
    * Array of tuples describing a single data point ([x, y])
    * These data points should be sorted by x-axis value.
    */
   accessor data: DataSeries;
   /** End of highlight color if highlighting range. */
-  accessor highlightMax: number;
+  accessor highlightMax: number | undefined;
   /** Start of highlight color if highlighting range. */
-  accessor highlightMin: number;
+  accessor highlightMin: number | undefined;
   /**
    * Highest point of the range.
    *

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

@@ -9,8 +9,8 @@ function slope(p0, p1, p2) {
   const dx1 = p2[0] - p1[0];
   const dy = p1[1] - p0[1];
   const dy1 = p2[1] - p1[1];
-  const m = dy / (dx || dx1 < 0 && 0);
-  const m1 = dy1 / (dx1 || dx < 0 && 0);
+  const m = dy / Number(dx || dx1 < 0 && 0);
+  const m1 = dy1 / Number(dx1 || dx < 0 && 0);
   const p = (m * dx1 + m1 * dx) / (dx + dx1);
   return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
 }
@@ -125,36 +125,32 @@ class Graph extends LitElement {
       currentMax = [max, rangeMax[1]];
     }
     const t = translate({ min: currentMin, max: currentMax, width, height });
-    const [hMinX] = t([highlightMin, currentMax[1]]);
-    const [hMaxX] = t([highlightMax, currentMax[1]]);
     const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#${IDS.linearGradient(id)})` : void 0;
-    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}${highlightMin !== void 0 ? [
-      svg`<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
+    if (highlightMin !== void 0 && highlightMax !== void 0) {
+      const [hMinX] = t([highlightMin, currentMax[1]]);
+      const [hMaxX] = t([highlightMax, currentMax[1]]);
+      return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
             M 0,0
             L ${hMinX - 1},0
             L ${hMinX - 1},${height}
             L 0,${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
             M ${hMinX + 1},0
             L ${hMaxX - 1},0
             L ${hMaxX - 1},${height}
             L ${hMinX + 1}, ${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
                 M ${hMaxX + 1},0
                 L ${width},0
                 L ${width},${height}
                 L ${hMaxX + 1}, ${height}
                 Z
-              `} fill=white /></mask>`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`
-    ] : svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
+              `} fill=white /></mask><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} /><path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} /><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`}</svg>`;
+    }
+    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
   }
 }
 customElement("calcite-graph", Graph);

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

@@ -19,15 +19,15 @@ export abstract class Handle extends LitElement {
    */
   accessor disabled: boolean;
   /** Value for the button title attribute. */
-  accessor dragHandle: string;
+  accessor dragHandle: string | undefined;
   /** Overrides individual strings used by the component. */
   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

@@ -77,7 +77,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 +120,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

@@ -19,7 +19,7 @@ export abstract class Icon extends LitElement {
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
-  accessor icon: IconName;
+  accessor icon: IconName | null;
   /**
    * When `true`, preloads the `icon` data.
    *
@@ -37,5 +37,5 @@ export abstract class Icon extends LitElement {
    *
    * It is recommended to set this value if your icon is semantic.
    */
-  accessor textLabel: string;
+  accessor textLabel: string | undefined;
 }

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

@@ -103,7 +103,7 @@ class Icon extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.intersectionObserver?.disconnect();
-    this.intersectionObserver = null;
+    this.intersectionObserver = void 0;
   }
   async loadIconPathData() {
     const { icon, scale, visible } = this;
@@ -121,8 +121,8 @@ class Icon extends LitElement {
     this.intersectionObserver = createObserver("intersection", (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.intersectionObserver.disconnect();
-          this.intersectionObserver = null;
+          this.intersectionObserver?.disconnect();
+          this.intersectionObserver = void 0;
           callback();
         }
       });
@@ -138,7 +138,7 @@ class Icon extends LitElement {
     const dir = this.direction;
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
-    const paths = [].concat(pathData || "");
+    const paths = Array.isArray(pathData) ? pathData : [pathData ?? ""];
     this.el.ariaHidden = toAriaBoolean(!semantic);
     this.el.ariaLabel = semantic ? textLabel : null;
     this.el.role = semantic ? "img" : null;

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

@@ -5,6 +5,6 @@ export type IconName = KebabCaseIcons | CamelCaseIcons;
 
 export type CamelCaseIcons = ExtractBaseIcon<keyof typeof icons>;
 
-export type KebabCaseIcons = KebabCase<CamelCaseIcons>;
+export type KebabCaseIcons = KebabCase<CamelCaseIcons, { splitOnNumbers: true; }>;
 
 export type ExtractBaseIcon<T> = T extends `${infer Base}${"16" | "24" | "32"}F` ? `${Base}F` : T extends `${infer Base}F` ? `${Base}F` : T extends `${infer Base}${"16" | "24" | "32"}` ? Base : never;

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

@@ -3,17 +3,21 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../interfaces.js";
 
 /**
- * @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 editable (`inline-editable` and `inline-editable-controls` props) instead.
+ * @cssproperty [--calcite-inline-editable-background-color-hover] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the component's background color when hovered.
+ * @cssproperty [--calcite-inline-editable-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 editable tokens instead. Specifies the component's background color.
+ * @cssproperty [--calcite-inline-editable-button-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 editable tokens instead. Specifies the background color of the component's button element.
+ * @cssproperty [--calcite-inline-editable-button-background-color-hover] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the background color of the component's button element when hovered.
+ * @cssproperty [--calcite-inline-editable-button-background-color-press] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the background color of the component's button element when pressed.
+ * @cssproperty [--calcite-inline-editable-button-corner-radius] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the corner radius of the component's button element.
+ * @cssproperty [--calcite-inline-editable-button-loader-color] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the loader color of the component's button element.
+ * @cssproperty [--calcite-inline-editable-button-text-color] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the text color of the component's button element.
+ * @cssproperty [--calcite-inline-editable-button-text-color-press] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `calcite-input`, `calcite-input-number`, or `calcite-input-text` built-in inline editable tokens instead. Specifies the text color of the component's button element when hovered or pressed.
  * @slot  - A slot for adding a `calcite-input`.
  */
 export abstract class InlineEditable extends LitElement {
   /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */
-  accessor afterConfirm: () => Promise<void>;
+  accessor afterConfirm: (() => Promise<void>) | undefined;
   /**
    * When `true` and `editingEnabled` is `true`, displays save and cancel controls.
    *
@@ -40,9 +44,9 @@ export abstract class InlineEditable extends LitElement {
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
   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 { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { a 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 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{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}.enable-editing-button--hidden{pointer-events:none;opacity:0;inline-size: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)}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,11 +29,15 @@ 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.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.controls = false;
     this.disabled = false;
     this.loading = false;
@@ -41,6 +46,9 @@ class InlineEditable extends LitElement {
     this.calciteInlineEditableEditConfirm = createEvent({ cancelable: false });
     this.calciteInternalInlineEditableEnableEditingChange = createEvent({ cancelable: false });
     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 }] };
@@ -67,14 +75,6 @@ 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;
@@ -89,7 +89,7 @@ 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;
@@ -102,7 +102,7 @@ class InlineEditable extends LitElement {
     this.setFocus();
   }
   enableEditing() {
-    this.valuePriorToEditing = this.inputEl?.value;
+    this.valuePriorToEditing = this.inputEl?.value ?? "";
     this.editingEnabled = true;
     this.inputEl?.setFocus();
     this.calciteInternalInlineEditableEnableEditingChange.emit();
@@ -129,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();
       }
@@ -168,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";