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

package/dist/collection/components/inline-editable/inline-editable.stories.js

@@ -0,0 +1,70 @@
+import readme from "./readme.md";
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Controls/Inline Editable",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:300px;max-width:100%;">
+    <calcite-inline-editable
+      scale="${select("scale", ["s", "m", "l"], "m", "InlineEditable")}"
+      ${boolean("controls", false, "InlineEditable") && "controls"}
+      ${boolean("editing-enabled", false, "InlineEditable") && "editing-enabled"}
+      ${boolean("loading", false, "InlineEditable") && "loading"}
+      ${boolean("disabled", false, "InlineEditable") && "disabled"}
+      intl-cancel-editing="${text("intl-cancel-editing", "Cancelar", "InlineEditable")}"
+      intl-enable-editing="${text("intl-enable-editing", "Haga clic para editar", "InlineEditable")}"
+      intl-confirm-changes="${text("intl-confirm-changes", "Guardar", "InlineEditable")}"
+    >
+      <calcite-input
+        alignment="${select("alignment", ["start", "end"], "start", "Input")}"
+        placeholder="${text("placeholder", "Placeholder text", "Input")}"
+      >
+      </calcite-input>
+    </calcite-inline-editable>
+  </div>
+`;
+export const disabled_TestOnly = () => html `<calcite-inline-editable disabled>
+  <calcite-input value="disabled"></calcite-input>
+</calcite-inline-editable>`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div dir="rtl" style="width:300px;max-width:100%;">
+    <calcite-label
+      class="calcite-theme-dark"
+      status="${select("status", ["idle", "valid", "invalid"], "idle", "Label")}"
+      scale="${select("scale", ["s", "m", "l"], "m", "Label")}"
+      layout="${select("layout", ["default", "inline", "inline-space-between"], "default", "Label")}"
+    >
+      ${text("label text", "My great label", "Label")}
+      <calcite-inline-editable
+        ${boolean("controls", false, "InlineEditable") && "controls"}
+        ${boolean("editing-enabled", false, "InlineEditable") && "editing-enabled"}
+        ${boolean("loading", false, "InlineEditable") && "loading"}
+        ${boolean("disabled", false, "InlineEditable") && "disabled"}
+        intl-cancel-editing="${text("intl-cancel-editing", "Cancelar", "InlineEditable")}"
+        intl-enable-editing="${text("intl-enable-editing", "Haga clic para editar", "InlineEditable")}"
+        intl-confirm-changes="${text("intl-confirm-changes", "Guardar", "InlineEditable")}"
+      >
+        <calcite-input
+          alignment="${select("alignment", ["start", "end"], "start", "Input")}"
+          placeholder="${text("placeholder", "Placeholder text", "Input")}"
+        >
+        </calcite-input>
+      </calcite-inline-editable>
+      <calcite-input-message
+        ${boolean("active", false, "InputMessage") && "active"}
+        ${boolean("icon", false, "InputMessage") && "icon"}
+        status="${select("status", ["idle", "valid", "invalid"], "idle", "InputMessage")}"
+      >
+        ${text("text", "My great input message", "InputMessage")}
+      </calcite-input-message>
+    </calcite-label>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/inline-editable/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 = {
   wrapper: "wrapper",

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

@@ -292,6 +292,11 @@
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
+.icon, 
+.resize-icon-wrapper {
+  z-index: 1;
+}
+
 input[type=text]::-ms-clear, 
 input[type=text]::-ms-reveal {
   display: none;

package/dist/collection/components/input/input.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 Input {
     /** 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. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
+     * 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, and will not display for the `"textarea"` type.
      */
     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,12 +59,12 @@ export class Input {
      * @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, a busy indicator is displayed. */
+    /** When `true`, a busy indicator is displayed. */
     this.loading = false;
     /**
-     * When true, uses locale formatting for numbers.
+     * When `true`, uses locale formatting for numbers.
      *
      * @internal
      */
@@ -72,12 +72,12 @@ export class Input {
     /** Specifies the placement of the buttons for `type="number"`. */
     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";
@@ -173,11 +173,11 @@ export class Input {
         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)) {
@@ -232,11 +232,11 @@ export class Input {
         }
         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;
@@ -340,11 +340,11 @@ export class Input {
           : newPreviousValue;
     };
     this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       if (this.type === "number") {
         const delocalizedValue = (this.numberingSystem && this.numberingSystem !== "latn") ||
           defaultNumberingSystem !== "latn"
@@ -669,7 +669,7 @@ export class Input {
               "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,
@@ -687,7 +687,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "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, and will not display for the `\"textarea\"` type."
+          "text": "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, and will not display for the `\"textarea\"` type."
         },
         "attribute": "clearable",
         "reflect": true,
@@ -708,7 +708,7 @@ export class Input {
               "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,
@@ -726,7 +726,7 @@ export class Input {
         "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,
@@ -747,7 +747,7 @@ export class Input {
               "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,
@@ -765,7 +765,7 @@ export class Input {
         "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
@@ -820,7 +820,7 @@ export class Input {
         "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,
@@ -855,7 +855,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -921,7 +921,7 @@ export class Input {
               "name": "internal",
               "text": undefined
             }],
-          "text": "When true, uses locale formatting for numbers."
+          "text": "When `true`, uses locale formatting for numbers."
         },
         "attribute": "locale-format",
         "reflect": false,
@@ -1122,7 +1122,7 @@ export class Input {
               "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,
@@ -1140,7 +1140,7 @@ export class Input {
         "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/input.stories.js

@@ -0,0 +1,146 @@
+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",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input
+      id="input-with-label"
+      type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text")}"
+      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>
+  </div>
+`;
+export const withInputMessage = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input
+      id="input-with-label-and-input-message"
+      type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text", "Input")}"
+      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>
+    <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
+      id="input-with-slotted-action"
+      type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text")}"
+      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>
+    <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 textarea = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-input
+      id="input-with-text-area"
+      type="textarea"
+      ${boolean("loading", false)}
+      ${boolean("clearable", false)}
+      ${boolean("disabled", false)}
+      value="${text("value", "")}"
+      placeholder="${text("placeholder", "Placeholder text")}"
+    >
+    </calcite-input>
+    <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 disabled_TestOnly = () => html `<calcite-input disabled value="disabled"></calcite-input>`;
+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
+        id="input-dark-theme"
+        type="${select("type", ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"], "text")}"
+        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>
+      <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 type="number" lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input>`;
+export const arabicLocaleWithLatinNumberingSystem_TestOnly = () => html ` <calcite-input type="number" lang="ar-EG" value="123456"></calcite-input>`;

package/dist/collection/components/input/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-date-picker/input-date-picker.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, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";

package/dist/collection/components/input-date-picker/input-date-picker.stories.js

@@ -0,0 +1,79 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { locales } from "../../utils/locale";
+import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Controls/InputDatePicker",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width: 400px">
+    <calcite-input-date-picker
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      value="${text("value", "2020-12-12")}"
+      min="${text("min", "2016-08-09")}"
+      max="${text("max", "2023-12-18")}"
+      lang="${select("locale", locales, "en")}"
+      intl-next-month="${text("intl-next-month", "Next month")}"
+      intl-prev-month="${text("intl-prev-month", "Previous month")}"
+      placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
+    ></calcite-input-date-picker
+  </div>
+`;
+export const range = () => html `
+  <div style="width: 400px">
+    <calcite-input-date-picker
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      start="${text("start", "2020-12-12")}"
+      end="${text("end", "2020-12-16")}"
+      min="${text("min", "2016-08-09")}"
+      max="${text("max", "2023-12-18")}"
+      lang="${select("locale", locales, "en")}"
+      next-month-label="${text("next-month-label", "Next month")}"
+      prev-month-label="${text("prev-month-label", "Previous month")}"
+      range="${boolean("range", true)}"
+      layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    ></calcite-input-date-picker>
+  </div>
+`;
+export const disabled_TestOnly = () => html `<calcite-input-date-picker disabled></calcite-input-date-picker>`;
+export const flipPlacements_TestOnly = () => html `
+  <style>
+    .my-input-date-picker-div {
+      margin-top: 50px;
+    }
+
+    .my-input-date-picker {
+      position: unset;
+    }
+  </style>
+  <div style="height: 100px; overflow:scroll;">
+    <div class="my-input-date-picker-div">
+      <calcite-input-date-picker open class="my-input-date-picker" value="2020-02-12"></calcite-input-date-picker>
+    </div>
+  </div>
+  <script>
+    document.querySelector(".my-input-date-picker").flipPlacements = ["right"];
+  </script>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div dir="rtl" style="width: 400px">
+    <calcite-input-date-picker
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      value="${text("value", "2020-12-12")}"
+      min="${text("min", "2016-08-09")}"
+      max="${text("max", "2023-12-18")}"
+      lang="${select("locale", locales, "en")}"
+      intl-next-month="${text("intl-next-month", "Next month")}"
+      intl-prev-month="${text("intl-prev-month", "Previous month")}"
+      range="${boolean("range", false)}"
+    ></calcite-input-date-picker
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/input-date-picker/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 = {
   menu: "menu-container",

package/dist/collection/components/input-message/input-message.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 { Host, h } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";
@@ -16,7 +16,7 @@ export class InputMessage {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /** When `true`, the component is active. */
     this.active = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -76,7 +76,7 @@ export class InputMessage {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,

package/dist/collection/components/input-message/interfaces.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 var StatusIconDefaults;
 (function (StatusIconDefaults) {

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

@@ -234,6 +234,7 @@
 .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;
 }
@@ -448,26 +449,6 @@
   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;
 }