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

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.85 */
+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.85 */
+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";

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

@@ -13,33 +13,33 @@ import type { DatePicker } from "../calcite-date-picker/customElement.js";
  * @cssproperty [--calcite-input-date-picker-actions-icon-color-hover] - Specifies the component's actions icon color on hover.
  * @cssproperty [--calcite-input-date-picker-background-color] - Specifies the component's input background color.
  * @cssproperty [--calcite-input-date-picker-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color] - Specifies the background color of actions of the calendar.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-hover] - Specifies the background color of actions of the calendar when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-press] - Specifies the background color of actions of the calendar when pressed.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color] - Specifies the background color of the component's calendar actions.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-hover] - Specifies the background color of the component's calendar actions when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-press] - Specifies the background color of the component's calendar actions when pressed.
  * @cssproperty [--calcite-input-date-picker-calendar-actions-text-color] - Specifies the text color of the component's calendar actions.
  * @cssproperty [--calcite-input-date-picker-calendar-actions-text-color-press] - Specifies the text color of the component's calendar actions when pressed.
- * @cssproperty [--calcite-input-date-picker-calendar-border-color] - Specifies the component's calendar border color.
- * @cssproperty [--calcite-input-date-picker-calendar-corner-radius] - Specifies the component's calendar corner radius.
- * @cssproperty [--calcite-input-date-picker-calendar-current-day-text-color] - Specifies the text color of current day of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-day-background-color] - Specifies the background color of day of the calendar.
- * @cssproperty [--calcite-input-date-picker-calendar-day-background-color-hover] - Specifies the background color of day of the calendar when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-border-color] - Specifies the border color of the component's calendar.
+ * @cssproperty [--calcite-input-date-picker-calendar-corner-radius] - Specifies the corner radius of the component's calendar.
+ * @cssproperty [--calcite-input-date-picker-calendar-current-day-text-color] - Specifies the text color of the component's calendar current day element.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-background-color] - Specifies the background color of the component's calendar day elements.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-background-color-hover] - Specifies the background color of the component's calendar day elements when hovered.
  * @cssproperty [--calcite-input-date-picker-calendar-day-current-text-color] - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-day-range-text-color] - Specifies the text color of select day range of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-selected] - Specifies the text color of selected day of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-background-color-hover] - Specifies the background color of day's outside current range of the component's date-picker when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-text-color-hover] - Specifies the text color of day's outside current range of the component's date-picker when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-day-text-color] - Specifies the text color of day of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-hover] - Specifies the text color of day of the component's date-picker when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-selected-background-color] - Specifies the background color of selected day and day range of the calendar.
- * @cssproperty [--calcite-input-date-picker-calendar-shadow] - the component's calendar shadow.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-range-text-color] - Specifies the text color of the component's calendar selected day range.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-selected] - Specifies the text color of component's calendar selected day.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-background-color-hover] - Specifies the background color of the component's calendar day elements outside the current range when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-text-color-hover] - Specifies the text color of the component's calendar day elements outside the current range when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-text-color] - Specifies the text color of the component's calendar day elements.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-hover] - Specifies the text color of the component's calendar day elements when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-selected-background-color] - Specifies the background color of the component's calendar selected day and day range.
+ * @cssproperty [--calcite-input-date-picker-calendar-shadow] - Specifies the component's calendar shadow.
  * @cssproperty [--calcite-input-date-picker-calendar-icon-color] - Specifies the component's calendar icon color.
- * @cssproperty [--calcite-input-date-picker-calendar-icon-color-hover] - Specifies the component's calendar icon color.
- * @cssproperty [--calcite-input-date-picker-calendar-month-select-text-color] - Specifies the text color of month select of the component's date-picker.
- * @cssproperty [--calcite-input-date-picker-calendar-range-divider-color] - Specifies the divider color between the component's date-picker.
+ * @cssproperty [--calcite-input-date-picker-calendar-icon-color-hover] - Specifies the component's calendar icon color when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-month-select-text-color] - Specifies the text color of the component's calendar selected month.
+ * @cssproperty [--calcite-input-date-picker-calendar-range-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
  * @cssproperty [--calcite-input-date-picker-calendar-text-color] - Specifies the text color of the component's calendar week, year & suffix.
  * @cssproperty [--calcite-input-date-picker-corner-radius] - Specifies the component's input corner radius.
- * @cssproperty [--calcite-input-date-picker-divider-color] - Specifies the component's divider color between two inputs when in range mode.
- * @cssproperty [--calcite-input-date-picker-icon-color] - Specifies the component's in-field input icon color.
+ * @cssproperty [--calcite-input-date-picker-divider-color] - When `range` is `true`, specifies the component's divider color between two inputs.
+ * @cssproperty [--calcite-input-date-picker-icon-color] - Specifies the component's input icon color.
  * @cssproperty [--calcite-input-date-picker-placeholder-text-color] - Specifies the component's input placeholder text color.
  * @cssproperty [--calcite-input-date-picker-shadow] - Specifies the component's input shadow.
  * @cssproperty [--calcite-input-date-picker-text-color] - Specifies the component's input text color.
@@ -47,13 +47,13 @@ import type { DatePicker } from "../calcite-date-picker/customElement.js";
  */
 export abstract class InputDatePicker extends LitElement {
   /**
-   * Specifies the number of calendars displayed when `range` is `true`.
+   * When `range` is `true`, specifies the number of calendars displayed.
    *
    * @default 2
    */
   accessor calendars: 1 | 2;
   /**
-   * 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
    */
@@ -79,7 +79,7 @@ export abstract class InputDatePicker extends LitElement {
   /** Specifies the component's label text. */
   accessor labelText: string;
   /**
-   * Defines the layout of the component.
+   * Defines the component's layout.
    *
    * @default "horizontal"
    */
@@ -108,7 +108,7 @@ export abstract class InputDatePicker extends LitElement {
   /** Specifies the earliest allowed date as a full date object. */
   accessor minAsDate: Date;
   /**
-   * Specifies the monthStyle used by the component.
+   * Specifies the component's month style.
    *
    * @default "wide"
    */
@@ -134,7 +134,7 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /**
-   * Specifies the placement of the `calcite-date-picker` relative to the component.
+   * Determines the `calcite-date-picker`'s placement relative to the input.
    *
    * @default "bottom-start"
    */
@@ -153,7 +153,7 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor range: boolean;
   /**
-   * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+   * When `true`, the component's `value` can be read, but controls are not accessible and the `value` cannot be modified.
    *
    * @default false
    * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
@@ -161,7 +161,7 @@ export abstract class InputDatePicker 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
    */
@@ -173,7 +173,7 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor scale: "s" | "m" | "l";
   /**
-   * 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"
    */
@@ -199,10 +199,10 @@ export abstract class InputDatePicker extends LitElement {
   get validity(): MutableValidityState;
   /** Selected date as a string in ISO format (`"yyyy-mm-dd"`). */
   accessor value: string | string[];
-  /** The component's value as a full date object. */
+  /** The component's `value` as a full date object. */
   accessor valueAsDate: Date | Date[];
   /**
-   * Updates the position of the component.
+   * Updates the component's position.
    *
    * @param delayed - If true, the repositioning is delayed.
    * @returns void
@@ -223,7 +223,7 @@ export abstract class InputDatePicker extends LitElement {
   readonly calciteInputDatePickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component is closed and animation is complete. */
   readonly calciteInputDatePickerClose: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when the component is open and animation is complete. */
+  /** Fires when the component is opened and animation is complete. */
   readonly calciteInputDatePickerOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputDatePickerBeforeClose: InputDatePicker["calciteInputDatePickerBeforeClose"]["detail"];

package/dist/components/calcite-input-date-picker/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.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -6,7 +6,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
 /**
  * @deprecated in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance="transparent"` instead.
  * @cssproperty [--calcite-input-message-spacing-value] - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component.
- * @cssproperty [--calcite-input-message-spacing] - Specifies the margin spacing at the top of the component.
+ * @cssproperty [--calcite-input-message-spacing] - Specifies the component's top margin spacing.
  * @cssproperty [--calcite-input-message-icon-color] - Specifies the component's icon color.
  * @slot  - A slot for adding text.
  */
@@ -14,7 +14,7 @@ export abstract class InputMessage extends LitElement {
   /** Specifies an icon to display. */
   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
    */
@@ -26,7 +26,7 @@ export abstract class InputMessage 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"
    */

package/dist/components/calcite-input-message/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.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";

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

@@ -13,26 +13,26 @@ import type { IconName } from "../calcite-icon/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.
- * @cssproperty [--calcite-input-loading-fill-color] - Specifies the fill color of the `loading` element.
- * @cssproperty [--calcite-input-number-background-color] - Specifies the background color of the component.
- * @cssproperty [--calcite-input-number-border-color] - Specifies the border color of the component.
- * @cssproperty [--calcite-input-number-corner-radius] - Specifies the border radius of 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.
+ * @cssproperty [--calcite-input-number-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-input-number-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-input-number-corner-radius] - Specifies the component's border radius.
  * @cssproperty [--calcite-input-number-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-input-number-height] - Specifies the height of the component.
- * @cssproperty [--calcite-input-number-placeholder-text-color] - Specifies the text color of the placeholder in the component.
- * @cssproperty [--calcite-input-number-text-color] - Specifies the text color of the component.
- * @cssproperty [--calcite-input-number-text-color-focus] - Specifies the text color of the component when focused.
- * @cssproperty [--calcite-input-prefix-size] - Specifies the width of the prefix element.
- * @cssproperty [--calcite-input-prefix-text-color] - Specifies the text color of the prefix element.
- * @cssproperty [--calcite-input-suffix-size] - Specifies the width of the suffix element.
- * @cssproperty [--calcite-input-suffix-text-color] - Specifies the text color of the suffix element.
- * @slot [action] - A slot for positioning a `calcite-action` or other interactive content.
+ * @cssproperty [--calcite-input-number-height] - Specifies the component's height.
+ * @cssproperty [--calcite-input-number-placeholder-text-color] - Specifies the text color of the component's placeholder.
+ * @cssproperty [--calcite-input-number-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-input-number-text-color-focus] - Specifies the component's text color when focused.
+ * @cssproperty [--calcite-input-prefix-size] - When `prefixText` is provided, specifies the width of the component's prefix 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-size] - When `suffixText` is provided, specifies the width of the component's suffix element.
+ * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the text color of the component's suffix 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 InputNumber extends LitElement {
   /**
-   * Specifies the text alignment of the component's value.
+   * Specifies the text alignment of the component's `value`.
    *
    * @default "start"
    */
@@ -45,13 +45,13 @@ export abstract class InputNumber extends LitElement {
    */
   accessor autocomplete: AutoFill;
   /**
-   * When `true`, a clear button is displayed when the component has a value.
+   * When `true` and the component has a `value`, a clear button is displayed.
    *
    * @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)
@@ -76,7 +76,7 @@ export abstract class InputNumber extends LitElement {
    */
   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
    */
@@ -92,21 +92,21 @@ export abstract class InputNumber extends LitElement {
   /** Specifies the component's label text. */
   accessor labelText: string;
   /**
-   * When `true`, the component is in the loading state and `calcite-progress` is displayed.
+   * When `true`, displays a busy indicator.
    *
    * @default false
    */
   accessor loading: boolean;
   /**
    * When the component resides in a form,
-   * specifies the maximum value.
+   * specifies the maximum `value`.
    *
    * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
    */
   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`.
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - This property has no effect on the component.
    * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
@@ -120,14 +120,14 @@ export abstract class InputNumber extends LitElement {
   };
   /**
    * When the component resides in a form,
-   * specifies the minimum value.
+   * specifies the minimum `value`.
    *
    * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
    */
   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`.
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - This property has no effect on the component.
    * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
@@ -150,15 +150,15 @@ export abstract class InputNumber extends LitElement {
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem;
   /**
-   * 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)
@@ -166,7 +166,7 @@ export abstract class InputNumber 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
    */
@@ -178,18 +178,18 @@ export abstract class InputNumber 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"
    */
   accessor status: Status;
   /**
-   * Specifies the granularity that the component's value must adhere to.
+   * Specifies the granularity that the component's `value` must adhere to.
    *
    * @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 validation icon to display under the component. */
   accessor validationIcon: IconName | boolean;
@@ -212,9 +212,9 @@ export abstract class InputNumber extends LitElement {
    * @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 typed and committed. */
   readonly calciteInputNumberChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires each time a new value is typed. */
+  /** Fires each time a new `value` is typed. */
   readonly calciteInputNumberInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputNumberChange: InputNumber["calciteInputNumberChange"]["detail"];

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

@@ -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.85 */
+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";