@esri/calcite-components 5.2.0-next.70 → 5.2.0-next.72

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

@@ -3,14 +3,6 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Appearance, Kind, Scale } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-fab-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-fab-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-fab-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-fab-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-fab-loader-color] - Specifies the component's loader color.
- * @cssproperty [--calcite-fab-shadow] - Specifies the component's shadow.
- */
 export abstract class Fab extends LitElement {
   /**
    * Specifies the component's appearance style.

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

@@ -2,22 +2,6 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 
-/**
- * @cssproperty [--calcite-filter-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-filter-input-background-color] - Specifies the component's input background color.
- * @cssproperty [--calcite-filter-input-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-filter-input-corner-radius] - Specifies the component's input corner radius.
- * @cssproperty [--calcite-filter-input-shadow] - Specifies the component's input shadow.
- * @cssproperty [--calcite-filter-input-icon-color] - Specifies the component's input icon color.
- * @cssproperty [--calcite-filter-input-text-color] - Specifies the component's input text color.
- * @cssproperty [--calcite-filter-input-placeholder-text-color] - Specifies the component's input placeholder text color.
- * @cssproperty [--calcite-filter-input-actions-background-color] - Specifies the background color of the component's input `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-background-color-hover] - Specifies the background color of the component's input `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-background-color-press] - Specifies the background color of the component's input `clearable` element when pressed.
- * @cssproperty [--calcite-filter-input-actions-icon-color] - Specifies the icon color of the component's input `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-icon-color-hover] - Specifies the icon color of the component's input `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-icon-color-press] - Specifies the icon color of the component's input `clearable` element when pressed.
- */
 export abstract class Filter extends LitElement {
   /**
    * When `true`, prevents interaction and decreases the component's opacity.

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

@@ -3,10 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlowItem } from "../calcite-flow-item/customElement.js";
 import type { FlowItemLikeElement } from "./types.js";
 
-/**
- * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @slot  - A slot for adding `calcite-flow-item`s to the component.
- */
+/** @slot  - A slot for adding `calcite-flow-item`s to the component. */
 export abstract class Flow extends LitElement {
   /**
    * Removes selection of the currently active `calcite-flow-item`.

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

@@ -7,34 +7,6 @@ import type { Panel } from "../calcite-panel/customElement.js";
 import type { IconName } from "../calcite-icon/types.js";
 
 /**
- * @cssproperty [--calcite-flow-item-footer-padding] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
- * @cssproperty [--calcite-flow-item-header-border-block-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
- * @cssproperty [--calcite-flow-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-flow-heading-text-color] - Specifies the text color of the component's `heading`.
- * @cssproperty [--calcite-flow-icon-color] - Specifies the color of the component's `icon`.
- * @cssproperty [--calcite-flow-description-text-color] - Specifies the text color of the component's `description`.
- * @cssproperty [--calcite-flow-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-flow-content-top-space] - Specifies the padding of the component's `content-top` slot.
- * @cssproperty [--calcite-flow-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
- * @cssproperty [--calcite-flow-header-top-space] - Specifies the padding of the component's `header-top` slot.
- * @cssproperty [--calcite-flow-header-background-color] - Specifies the background color of the component's header.
- * @cssproperty [--calcite-flow-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-flow-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the component's `header-content` slot.
- * @cssproperty [--calcite-flow-footer-space] - Specifies the padding of the component's footer.
- * @cssproperty [--calcite-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-background-color-pressed] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-text-color-hover] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-text-color-pressed] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
- * @cssproperty [--calcite-flow-header-action-background-color-hover] - Specifies the background color of any `calcite-action`s in the component's header when hovered.
- * @cssproperty [--calcite-flow-header-action-background-color-press] - Specifies the background color of any `calcite-action`s in the component's header when pressed.
- * @cssproperty [--calcite-flow-header-action-background-color] - Specifies the background color of any `calcite-action`s in the component's header.
- * @cssproperty [--calcite-flow-header-action-indicator-color] - Specifies the color of any `calcite-action`s indicator in the component's header.
- * @cssproperty [--calcite-flow-header-action-text-color-press] - Specifies the text color of any `calcite-action`s in the component's header when pressed.
- * @cssproperty [--calcite-flow-header-action-text-color] - Specifies the text color of any `calcite-action`s in the component's header.
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  * @slot [alerts] - A slot for adding `calcite-alert`s to the component.

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

@@ -2,7 +2,6 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ColorStop, DataSeries } from "./types.js";
 
-/** @cssproperty [--calcite-graph-highlight-fill-color] - Specifies the fill color of the `highlight` element, when present. */
 export abstract class Graph extends LitElement {
   /**
    * Array of values describing a single color stop ([offset, color, opacity])

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

@@ -2,15 +2,7 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 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.
- */
+/** @deprecated 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.

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

@@ -3,10 +3,6 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 import type { IconName } from "./types.js";
 
-/**
- * @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`.

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

@@ -3,16 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 
 /**
- * @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.
+ * @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 {

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

@@ -77,7 +77,7 @@ class InlineEditable extends LitElement {
   }
   editingEnabledWatcher(newValue, oldValue) {
     if (this.inputEl) {
-      this.inputEl.editingEnabled = newValue;
+      this.inputEl.inlineEditing = newValue;
     }
     if (!newValue && !!oldValue) {
       this.shouldEmitCancel = true;
@@ -95,7 +95,7 @@ class InlineEditable extends LitElement {
       return;
     }
     await inputElement.componentOnReady();
-    inputElement.editingEnabled = this.editingEnabled;
+    inputElement.inlineEditing = this.editingEnabled;
     inputElement.label = inputElement.label || getLabelText(this);
   }
   onLabelClick() {

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

@@ -6,33 +6,6 @@ import type { IconName } from "../calcite-icon/types.js";
 import type { InputPlacement } from "./types.js";
 
 /**
- * @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.
- * @cssproperty [--calcite-input-inline-editable-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component, its inline editable elements and slotted `calcite-action` wrappers, when hovered.
- * @cssproperty [--calcite-input-inline-editable-control-background-color] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls.
- * @cssproperty [--calcite-input-inline-editable-control-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when hovered.
- * @cssproperty [--calcite-input-inline-editable-control-background-color-press] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when pressed.
- * @cssproperty [--calcite-input-inline-editable-control-corner-radius] - When `inline-editable` is enabled, specifies the corner radius of the component's inline editable controls.
- * @cssproperty [--calcite-input-inline-editable-control-loader-color] - When `inline-editable` is enabled, specifies the loader color of the component's inline editable controls.
- * @cssproperty [--calcite-input-inline-editable-control-text-color] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls.
- * @cssproperty [--calcite-input-inline-editable-control-text-color-press] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls, when pressed or hovered.
  * @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`.
  */
@@ -93,19 +66,19 @@ export abstract class Input extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /**
-   * When `true`, enables the component's built-in inline editable behavior.
+   * Enables built-in inline editing. Set to `"controls-disabled"` to hide save and cancel controls.
    *
    * @default false
    */
-  accessor inlineEditable: boolean;
-  /** Specifies a callback to be executed when saving inline editable changes */
-  accessor inlineEditableAfterConfirm: () => Promise<void>;
+  accessor inlineEdit: boolean | "controls-disabled";
   /**
-   * When `true` and `inlineEditable` is `true`, displays the component's built-in inline editable save and cancel controls.
+   * When `true`, the component displays its inline editing mode.
    *
    * @default false
    */
-  accessor inlineEditableControls: boolean;
+  accessor inlineEditing: boolean;
+  /** Specifies an optional callback to be executed when saving inline editing changes, inline edit controls must be present */
+  accessor inlineEditingBeforeConfirm: (() => Promise<void>) | undefined;
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
   /** Specifies the component's label text. */
@@ -262,19 +235,19 @@ export abstract class Input extends LitElement {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires each time a new `value` is typed and committed. */
   readonly calciteInputChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editable is cancelled. */
-  readonly calciteInputInlineEditableCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editable is enabled. */
-  readonly calciteInputInlineEditableChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editable is confirmed. */
-  readonly calciteInputInlineEditableConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editing is cancelled. */
+  readonly calciteInputInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editing is enabled or disabled. */
+  readonly calciteInputInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires after built-in inline editing confirmation completes. */
+  readonly calciteInputInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires each time a new `value` is typed. */
   readonly calciteInputInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputChange: Input["calciteInputChange"]["detail"];
-    calciteInputInlineEditableCancel: Input["calciteInputInlineEditableCancel"]["detail"];
-    calciteInputInlineEditableChange: Input["calciteInputInlineEditableChange"]["detail"];
-    calciteInputInlineEditableConfirm: Input["calciteInputInlineEditableConfirm"]["detail"];
+    calciteInputInlineEditingCancel: Input["calciteInputInlineEditingCancel"]["detail"];
+    calciteInputInlineEditingChange: Input["calciteInputInlineEditingChange"]["detail"];
+    calciteInputInlineEditingConfirm: Input["calciteInputInlineEditingConfirm"]["detail"];
     calciteInputInput: Input["calciteInputInput"]["detail"];
   };
 }