@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

package/dist/collection/components/input-number/input-number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -28,27 +28,27 @@ export class InputNumber {
     /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
     /**
-     * When true, the component is focused on page load.
+     * When `true`, the component is focused on page load.
      *
      * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
      */
     this.autofocus = false;
     /**
-     * When true, a clear button is displayed when the component has a value.
+     * When `true`, a clear button is displayed when the component has a value.
      */
     this.clearable = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      *
      * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
      */
     this.disabled = false;
     /**
-     * When true, number values are displayed with the locale's group separator.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
     /**
-     * When true, the component will not be visible.
+     * When `true`, the component will not be visible.
      *
      * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
      */
@@ -59,9 +59,9 @@ export class InputNumber {
      * @default "Loading"
      */
     this.intlLoading = COMMON_TEXT.loading;
-    /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
     this.iconFlipRtl = false;
-    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+    /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
     this.loading = false;
     /**
      * Toggles locale formatting for numbers.
@@ -72,12 +72,12 @@ export class InputNumber {
     /** Specifies the placement of the buttons. */
     this.numberButtonType = "vertical";
     /**
-     * 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.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
-    /** When true, the component must have a value in order for the form to submit. */
+    /** When `true`, the component must have a value in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -147,11 +147,11 @@ export class InputNumber {
         return;
       }
       const value = nativeEvent.target.value;
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
         if (!isValidNumber(delocalizedValue)) {
@@ -206,11 +206,11 @@ export class InputNumber {
         }
         return;
       }
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
           return;
@@ -294,11 +294,11 @@ export class InputNumber {
       this.previousValue = isValidNumber(newPreviousValue) ? newPreviousValue : "";
     };
     this.setNumberValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       const sanitizedValue = sanitizeNumberString((this.numberingSystem && this.numberingSystem !== "latn") || defaultNumberingSystem !== "latn"
         ? numberStringFormatter.delocalize(value)
         : value);
@@ -571,7 +571,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
             }],
-          "text": "When true, the component is focused on page load."
+          "text": "When `true`, the component is focused on page load."
         },
         "attribute": "autofocus",
         "reflect": true,
@@ -589,7 +589,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a clear button is displayed when the component has a value."
+          "text": "When `true`, a clear button is displayed when the component has a value."
         },
         "attribute": "clearable",
         "reflect": true,
@@ -610,7 +610,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
             }],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -628,7 +628,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, number values are displayed with the locale's group separator."
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
         },
         "attribute": "group-separator",
         "reflect": true,
@@ -649,7 +649,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
             }],
-          "text": "When true, the component will not be visible."
+          "text": "When `true`, the component will not be visible."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -667,7 +667,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+          "text": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
         },
         "attribute": "icon",
         "reflect": true
@@ -722,7 +722,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "icon-flip-rtl",
         "reflect": true,
@@ -757,7 +757,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is in the loading state and `calcite-progress` is displayed."
+          "text": "When `true`, the component is in the loading state and `calcite-progress` is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -1004,7 +1004,7 @@ export class InputNumber {
               "name": "mdn",
               "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
             }],
-          "text": "When true, the component's value can be read, but cannot be modified."
+          "text": "When `true`, the component's value can be read, but cannot be modified."
         },
         "attribute": "read-only",
         "reflect": true,
@@ -1022,7 +1022,7 @@ export class InputNumber {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,

package/dist/collection/components/input-number/input-number.stories.js

@@ -0,0 +1,124 @@
+import { select, text, number } from "@storybook/addon-knobs";
+import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Controls/Input Number",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-number
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
+      alignment="${select("alignment", ["start", "end"], "start")}"
+      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
+      min="${number("min", 0)}"
+      max="${number("max", 100)}"
+      step="${number("step", 1)}"
+      prefix-text="${text("prefix-text", "")}"
+      suffix-text="${text("suffix-text", "")}"
+      ${boolean("loading", false)}
+      ${boolean("clearable", false)}
+      ${boolean("disabled", false)}
+      value="${text("value", "")}"
+      placeholder="${text("placeholder", "Placeholder text")}"
+    >
+    </calcite-input-number>
+  </div>
+`;
+export const withInputMessage = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-number
+      id="input-with-label-and-input-message"
+      status="${select("status", ["idle", "invalid", "valid"], "idle", "Input")}"
+      alignment="${select("alignment", ["start", "end"], "start", "Input")}"
+      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal", "Input")}"
+      min="${number("min", 0)}"
+      max="${number("max", 100)}"
+      step="${number("step", 1)}"
+      prefix-text="${text("prefix-text", "", "Input")}"
+      suffix-text="${text("suffix-text", "", "Input")}"
+      ${boolean("loading", false)}
+      ${boolean("autofocus", false)}
+      ${boolean("required", false)}
+      value="${text("value", "", "Input")}"
+      placeholder="${text("placeholder", "Placeholder text", "Input")}"
+    >
+    </calcite-input-number>
+    <calcite-input-message
+      ${boolean("active", true)}
+      ${boolean("icon", false)}
+      icon="${select("icon", iconNames, "", "Input Message")}"
+      >${text("input message text", "My great input message", "Input Message")}</calcite-input-message
+    >
+  </div>
+`;
+export const withSlottedAction = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-number
+      id="input-with-slotted-action"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
+      alignment="${select("alignment", ["start", "end"], "start")}"
+      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
+      min="${number("min", 0)}"
+      max="${number("max", 100)}"
+      step="${number("step", 1)}"
+      prefix-text="${text("prefix-text", "")}"
+      suffix-text="${text("suffix-text", "")}"
+      ${boolean("loading", false)}
+      ${boolean("clearable", false)}
+      ${boolean("disabled", false)}
+      value="${text("value", "")}"
+      placeholder="${text("placeholder", "Placeholder text")}"
+    >
+      <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
+    </calcite-input-number>
+    <calcite-input-message
+      ${boolean("input-message-active", false)}
+      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+      >${text("input message text", "My great input message")}</calcite-input-message
+    >
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div dir="rtl" style="width:300px;max-width:100%;text-align:center;">
+    <calcite-label
+      class="calcite-theme-dark"
+      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
+      for="input-dark-theme"
+    >
+      ${text("label text", "My great label")}
+      <calcite-input-number
+        id="input-dark-theme"
+        status="${select("status", ["idle", "invalid", "valid"], "idle")}"
+        alignment="${select("alignment", ["start", "end"], "start")}"
+        number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
+        min="${number("min", 0)}"
+        max="${number("max", 100)}"
+        step="${number("step", 1)}"
+        prefix-text="${text("prefix-text", "")}"
+        suffix-text="${text("suffix-text", "")}"
+        ${boolean("loading", false)}
+        ${boolean("clearable", false)}
+        ${boolean("disabled", false)}
+        value="${text("value", "")}"
+        placeholder="${text("placeholder", "Placeholder text")}"
+      >
+      </calcite-input-number>
+      <calcite-input-message
+        ${boolean("calcite-input-message-active", true)}
+        status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+        >${text("input message text", "My great input message")}</calcite-input-message
+      >
+    </calcite-label>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const hebrewNumberingSystem_TestOnly = () => html `<calcite-input-number lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input-number>`;
+export const arabicLocaleWithLatinNumberingSystem_TestOnly = () => html `<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;

package/dist/collection/components/input-number/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.css

@@ -238,6 +238,7 @@ input:focus {
 .icon {
   pointer-events: none;
   position: absolute;
+  z-index: 1;
   display: block;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
@@ -347,26 +348,6 @@ input[type=text]::-ms-reveal {
   align-items: center;
 }
 
-.resize-icon-wrapper {
-  inset-block-end: 2px;
-  inset-inline-end: 2px;
-  pointer-events: none;
-  position: absolute;
-  block-size: 0.75rem;
-  inline-size: 0.75rem;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-3);
-}
-.resize-icon-wrapper calcite-icon {
-  inset-block-end: 0.25rem;
-  inset-inline-end: 0.25rem;
-  transform: rotate(-45deg);
-}
-
-.calcite--rtl .resize-icon-wrapper calcite-icon {
-  transform: rotate(45deg);
-}
-
 :host(.no-bottom-border) input {
   border-block-end-width: 0px;
 }

package/dist/collection/components/input-text/input-text.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -24,23 +24,23 @@ export class InputText {
     /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
     /**
-     * When true, the component is focused on page load.
+     * When `true`, the component is focused on page load.
      *
      * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
      */
     this.autofocus = false;
     /**
-     * When true, a clear button is displayed when the component has a value.
+     * When `true`, a clear button is displayed when the component has a value.
      */
     this.clearable = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      *
      * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
      */
     this.disabled = false;
     /**
-     * When true, the component will not be visible.
+     * When `true`, the component will not be visible.
      *
      * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
      */
@@ -51,17 +51,17 @@ export class InputText {
      * @default "Loading"
      */
     this.intlLoading = COMMON_TEXT.loading;
-    /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
     this.iconFlipRtl = false;
-    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+    /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
     this.loading = false;
     /**
-     * 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.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
-    /** When true, the component must have a value in order for the form to submit. */
+    /** When `true`, the component must have a value in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -355,7 +355,7 @@ export class InputText {
               "name": "mdn",
               "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
             }],
-          "text": "When true, the component is focused on page load."
+          "text": "When `true`, the component is focused on page load."
         },
         "attribute": "autofocus",
         "reflect": true,
@@ -373,7 +373,7 @@ export class InputText {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a clear button is displayed when the component has a value."
+          "text": "When `true`, a clear button is displayed when the component has a value."
         },
         "attribute": "clearable",
         "reflect": true,
@@ -394,7 +394,7 @@ export class InputText {
               "name": "mdn",
               "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
             }],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -415,7 +415,7 @@ export class InputText {
               "name": "mdn",
               "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
             }],
-          "text": "When true, the component will not be visible."
+          "text": "When `true`, the component will not be visible."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -433,7 +433,7 @@ export class InputText {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+          "text": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
         },
         "attribute": "icon",
         "reflect": true
@@ -488,7 +488,7 @@ export class InputText {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "icon-flip-rtl",
         "reflect": true,
@@ -523,7 +523,7 @@ export class InputText {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is in the loading state and `calcite-progress` is displayed."
+          "text": "When `true`, the component is in the loading state and `calcite-progress` is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -641,7 +641,7 @@ export class InputText {
               "name": "mdn",
               "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
             }],
-          "text": "When true, the component's value can be read, but cannot be modified."
+          "text": "When `true`, the component's value can be read, but cannot be modified."
         },
         "attribute": "read-only",
         "reflect": true,
@@ -659,7 +659,7 @@ export class InputText {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,

package/dist/collection/components/input-text/input-text.stories.js

@@ -0,0 +1,99 @@
+import { select, text } from "@storybook/addon-knobs";
+import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Controls/Input Text",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-text
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
+      alignment="${select("alignment", ["start", "end"], "start")}"
+      prefix-text="${text("prefix-text", "")}"
+      suffix-text="${text("suffix-text", "")}"
+      ${boolean("loading", false)}
+      ${boolean("clearable", false)}
+      ${boolean("disabled", false)}
+      value="${text("value", "")}"
+      placeholder="${text("placeholder", "Placeholder text")}"
+    >
+    </calcite-input-text>
+  </div>
+`;
+export const withInputMessage = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-text
+      id="input-with-label-and-input-message"
+      status="${select("status", ["idle", "invalid", "valid"], "idle", "Input")}"
+      alignment="${select("alignment", ["start", "end"], "start", "Input")}"
+      prefix-text="${text("prefix-text", "", "Input")}"
+      suffix-text="${text("suffix-text", "", "Input")}"
+      ${boolean("loading", false)}
+      ${boolean("autofocus", false)}
+      ${boolean("required", false)}
+      value="${text("value", "", "Input")}"
+      placeholder="${text("placeholder", "Placeholder text", "Input")}"
+    >
+    </calcite-input-text>
+    <calcite-input-message
+      ${boolean("active", true)}
+      ${boolean("icon", false)}
+      icon="${select("icon", iconNames, "", "Input Message")}"
+      >${text("input message text", "My great input message", "Input Message")}</calcite-input-message
+    >
+  </div>
+`;
+export const withSlottedAction = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-text
+      id="input-with-slotted-action"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
+      alignment="${select("alignment", ["start", "end"], "start")}"
+      prefix-text="${text("prefix-text", "")}"
+      suffix-text="${text("suffix-text", "")}"
+      ${boolean("loading", false)}
+      ${boolean("clearable", false)}
+      ${boolean("disabled", false)}
+      value="${text("value", "")}"
+      placeholder="${text("placeholder", "Placeholder text")}"
+    >
+      <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
+    </calcite-input-text>
+    <calcite-input-message
+      ${boolean("input-message-active", false)}
+      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+      >${text("input message text", "My great input message")}</calcite-input-message
+    >
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input-text
+      id="input-dark-theme"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
+      alignment="${select("alignment", ["start", "end"], "start")}"
+      prefix-text="${text("prefix-text", "")}"
+      suffix-text="${text("suffix-text", "")}"
+      ${boolean("loading", false)}
+      ${boolean("clearable", false)}
+      ${boolean("disabled", false)}
+      value="${text("value", "")}"
+      placeholder="${text("placeholder", "Placeholder text")}"
+    >
+    </calcite-input-text>
+    <calcite-input-message
+      ${boolean("calcite-input-message-active", true)}
+      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
+      >${text("input message text", "My great input message")}</calcite-input-message
+    >
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/input-text/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   loader: "loader",