@esri/calcite-components 5.0.0-next.86 → 5.0.0-next.87

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

@@ -1,9 +1,9 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { b as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -71,8 +71,17 @@ class Dialog extends LitElement {
     this.panelRef = createRef();
     this.popoverRef = createRef();
     this.resizePosition = { ...initialResizePosition };
+    this.transitionEl = null;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.sizeOverride = useSizeOverride({
+      targetElement: () => ({ value: this.transitionEl }),
+      getBounds: () => ({
+        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
+        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+      }),
+      fullscreenDisabled: () => this.fullscreenDisabled
+    });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
       target: this.popoverRef
@@ -82,6 +91,14 @@ class Dialog extends LitElement {
     this.hasContentTop = false;
     this.hasFooter = true;
     this.opened = false;
+    this.resizeValues = {
+      inlineSize: null,
+      blockSize: null,
+      minInlineSize: null,
+      minBlockSize: null,
+      maxInlineSize: null,
+      maxBlockSize: null
+    };
     this.closeDisabled = false;
     this.dragEnabled = false;
     this.embedded = false;
@@ -106,7 +123,7 @@ class Dialog extends LitElement {
     this.calciteDialogScroll = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { 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 }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { 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 }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -133,6 +150,9 @@ class Dialog extends LitElement {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
+  async updateSize(size) {
+    this.updateSizeInternal(size);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -215,7 +235,7 @@ class Dialog extends LitElement {
       name: "resize"
     });
   }
-  getTransitionElDOMRect() {
+  getTransitionRefDOMRect() {
     return this.transitionEl.getBoundingClientRect();
   }
   handleKeyDown(event) {
@@ -230,13 +250,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minBlockSize } = window.getComputedStyle(transitionEl);
           const minHeight = getStylePixelValue(minBlockSize);
-          const height = this.getTransitionElDOMRect().height;
+          const height = this.getTransitionRefDOMRect().height;
           if (height <= minHeight) {
             return;
           }
-          this.updateSize({
-            size: height - resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: height - resizeShiftStep
           });
           resizePosition.bottom -= resizeShiftStep;
           this.updateTransform();
@@ -251,9 +270,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowDown":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().height + resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: this.getTransitionRefDOMRect().height + resizeShiftStep
           });
           resizePosition.bottom += resizeShiftStep;
           this.updateTransform();
@@ -270,13 +288,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minInlineSize } = window.getComputedStyle(transitionEl);
           const minWidth = getStylePixelValue(minInlineSize);
-          const width = this.getTransitionElDOMRect().width;
+          const width = this.getTransitionRefDOMRect().width;
           if (width <= minWidth) {
             return;
           }
-          this.updateSize({
-            size: width - resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: width - resizeShiftStep
           });
           resizePosition.right -= resizeShiftStep;
           this.updateTransform();
@@ -291,9 +308,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowRight":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().width + resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: this.getTransitionRefDOMRect().width + resizeShiftStep
           });
           resizePosition.right += resizeShiftStep;
           this.updateTransform();
@@ -320,19 +336,14 @@ class Dialog extends LitElement {
     const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
     const translateX = Math.round(x + left + right);
     const translateY = Math.round(y + top + bottom);
-    transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
-  }
-  updateSize({ type, size }) {
-    const { transitionEl } = this;
-    if (!transitionEl) {
-      return;
-    }
-    transitionEl.style[type] = size !== null ? `${Math.round(size)}px` : null;
+    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
   cleanupInteractions() {
     this.interaction?.unset();
-    this.updateSize({ size: null, type: "inlineSize" });
-    this.updateSize({ size: null, type: "blockSize" });
+    this.updateSizeInternal({
+      inline: null,
+      block: null
+    });
     this.dragPosition = { ...initialDragPosition };
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
@@ -348,7 +359,7 @@ class Dialog extends LitElement {
     }
     if (resizable) {
       await this.el.componentOnReady();
-      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(transitionEl);
+      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(this.transitionEl);
       this.interaction.resizable({
         edges: {
           top: true,
@@ -379,8 +390,10 @@ class Dialog extends LitElement {
               resizePosition.bottom += deltaRect.bottom;
               resizePosition.left += deltaRect.left;
             }
-            this.updateSize({ size: rect.width, type: "inlineSize" });
-            this.updateSize({ size: rect.height, type: "blockSize" });
+            this.updateSizeInternal({
+              inline: rect.width,
+              block: rect.height
+            });
             this.updateTransform();
           }
         }
@@ -468,6 +481,22 @@ class Dialog extends LitElement {
   handleMutationObserver() {
     this.focusTrap.updateContainerElements();
   }
+  updateSizeInternal(size) {
+    const dialogElement = this.transitionEl;
+    if (!dialogElement) {
+      return;
+    }
+    const appliedSize = this.sizeOverride.resize(size);
+    this.resizeValues = {
+      ...this.resizeValues,
+      ...appliedSize.inline !== void 0 && {
+        inlineSize: appliedSize.inline
+      },
+      ...appliedSize.block !== void 0 && {
+        blockSize: appliedSize.block
+      }
+    };
+  }
   render() {
     const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;
     return html`<div .ariaDescription=${description} .ariaLabel=${heading} .ariaModal=${this.modal} class=${safeClassMap({

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";

package/dist/components/calcite-dropdown-group/customElement.js

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html, svg } from "lit";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -9,19 +9,19 @@ import type { IconName } from "./interfaces.js";
  */
 export abstract class Icon extends LitElement {
   /**
-   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
    *
    * @default false
    */
   accessor flipRtl: boolean;
   /**
-   * Displays a specific icon.
+   * Specifies an icon to display.
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
   accessor icon: IconName;
   /**
-   * When `true`, it preloads the icon data.
+   * When `true`, preloads the `icon` data.
    *
    * @default false
    */
@@ -33,7 +33,7 @@ export abstract class Icon extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Accessible name for the component.
+   * Specifies the component's accessible name.
    *
    * It is recommended to set this value if your icon is semantic.
    */

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

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

@@ -5,29 +5,29 @@ 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] - Specifies the button element's background color when appearance="solid" or appearance="outline-fill".
- * @cssproperty [--calcite-inline-editable-button-corner-radius] - Specifies the button element's corner radius.
- * @cssproperty [--calcite-inline-editable-button-loader-color] - Specifies the button element's loader color.
- * @cssproperty [--calcite-inline-editable-button-text-color] - Specifies the button element's text 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 components's button element.
+ * @cssproperty [--calcite-inline-editable-button-text-color] - Specifies the text color of the component's button element.
  * @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>;
   /**
-   * When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.
+   * When `true` and `editingEnabled` is `true`, displays save and cancel controls.
    *
    * @default false
    */
   accessor controls: boolean;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
   accessor disabled: boolean;
   /**
-   * When `true`, inline editing is enabled on the component.
+   * When `true`, inline editing is enabled.
    *
    * @default false
    */
@@ -57,9 +57,9 @@ export abstract class InlineEditable extends LitElement {
    * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Emits when the component's "cancel editing" button is pressed. */
+  /** Fires when the component's "cancel editing" button is pressed. */
   readonly calciteInlineEditableEditCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Emits when the component's "confirm edits" button is pressed. */
+  /** Fires when the component's "confirm edits" button is pressed. */
   readonly calciteInlineEditableEditConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInlineEditableEditCancel: InlineEditable["calciteInlineEditableEditCancel"]["detail"];

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -7,13 +7,15 @@ import type { IconName } from "../calcite-icon/interfaces.js";
 import type { InputPlacement } from "./interfaces.js";
 
 /**
- * @cssproperty [--calcite-input-prefix-size] - Specifies the component's prefix width, when present.
- * @cssproperty [--calcite-input-suffix-size] - Specifies the component's suffix width, when present.
+ * @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 shadow around the component.
- * @cssproperty [--calcite-input-icon-color] - Specifies the component's icon color.
+ * @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.
@@ -22,24 +24,21 @@ import type { InputPlacement } from "./interfaces.js";
  * @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] - Specifies the background color of the `loading` element, when present.
- * @cssproperty [--calcite-input-loading-fill-color] - Specifies the fill color of the `loading` element, when present.
- * @cssproperty [--calcite-input-prefix-text-color] - Specifies the component's prefix text color, when present.
- * @cssproperty [--calcite-input-suffix-text-color] - Specifies the component's suffix text color, when present.
- * @slot [action] - A slot for positioning a `calcite-button` next to the component.
+ * @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`.
  */
 export abstract class Input extends LitElement {
   /**
-   * Specifies a comma separated list of unique file type specifiers for limiting accepted file types.
-   * This property only has an effect when `type` is "file".
+   * When `type` is `"file"`, specifies a comma separated list of unique file type specifiers for limiting accepted file types.
    * Read the native attribute's documentation on MDN for more info.
    *
    * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
   accessor accept: string;
   /**
-   * Specifies the text alignment of the component's value.
+   * Specifies the text alignment of the component's `value`.
    *
    * @default "start"
    */
@@ -52,13 +51,13 @@ export abstract class Input extends LitElement {
    */
   accessor autocomplete: AutoFill;
   /**
-   * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
+   * When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
    *
    * @default false
    */
   accessor clearable: boolean;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
@@ -82,10 +81,10 @@ export abstract class Input extends LitElement {
    * @default false
    */
   accessor groupSeparator: boolean;
-  /** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
+  /** When `true`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
   accessor icon: IconName | boolean;
   /**
-   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
    * @default false
    */
@@ -109,7 +108,7 @@ export abstract class Input extends LitElement {
   accessor max: number;
   /**
    * When the component resides in a form,
-   * specifies the maximum length of text for the component's value.
+   * specifies the maximum length of text for the component's `value`.
    *
    * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
@@ -129,14 +128,13 @@ export abstract class Input extends LitElement {
   accessor min: number;
   /**
    * When the component resides in a form,
-   * specifies the minimum length of text for the component's value.
+   * specifies the minimum length of text for the component's `value`.
    *
    * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
   accessor minLength: number;
   /**
-   * When `true`, the component can accept more than one value.
-   * This property only has an effect when `type` is "email" or "file".
+   * When `true` and `type` is `"email"` or `"file"`, the component can accept more than one value.
    * Read the native attribute's documentation on MDN for more info.
    *
    * @default false
@@ -152,7 +150,7 @@ export abstract class Input extends LitElement {
    */
   accessor name: string;
   /**
-   * Specifies the placement of the buttons for `type="number"`.
+   * When `type="number"`, specifies the placement of the buttons.
    *
    * @default "vertical"
    */
@@ -168,15 +166,15 @@ export abstract class Input extends LitElement {
    */
   accessor pattern: string;
   /**
-   * Specifies placeholder text for the component.
+   * Specifies the component's placeholder text.
    *
    * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
   accessor placeholder: string;
-  /** Adds text to the start of the component. */
+  /** Specifies text to display at the start of the component. */
   accessor prefixText: string;
   /**
-   * When `true`, the component's value can be read, but cannot be modified.
+   * When `true`, the component's `value` can be read, but cannot be modified.
    *
    * @default false
    * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
@@ -184,7 +182,7 @@ export abstract class Input extends LitElement {
   accessor readOnly: boolean;
   /**
    * When `true` and the component resides in a form,
-   * the component must have a value in order for the form to submit.
+   * the component must have a `value` in order for the form to submit.
    *
    * @default false
    */
@@ -196,7 +194,7 @@ export abstract class Input extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Specifies the status of the input field, which determines message and icons.
+   * Specifies the input field's status, which determines message and icons.
    *
    * @default "idle"
    */
@@ -207,7 +205,7 @@ export abstract class Input extends LitElement {
    * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
    */
   accessor step: number | "any";
-  /** Adds text to the end of the component. */
+  /** Specifies text to display at the end of the component. */
   accessor suffixText: string;
   /**
    * Specifies the component type.

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { keyed } from "lit/directives/keyed.js";