@esri/solutions-components 0.10.26 → 0.10.28

package/dist/cjs/calcite-icon_2.cjs.entry.js

@@ -7,19 +7,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const observers = require('./observers-5f9f67ee.js');
-const browser = require('./browser-2893460e.js');
-const guid = require('./guid-42cda8c9.js');
-const locale = require('./locale-351282c5.js');
-require('./resources-f11e9bd6.js');
-require('./key-82084ef6.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const observers = require('./observers-18d87cb5.js');
+const browser = require('./browser-333a21c5.js');
+const guid = require('./guid-e84a8375.js');
+const locale = require('./locale-da840314.js');
+require('./resources-18f799c7.js');
+require('./key-47c9469a.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS$1 = {
     icon: "icon",
@@ -29,7 +29,7 @@ const CSS$1 = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 /**
  * Icon data cache.
@@ -150,7 +150,7 @@ const Icon = class {
         const size = scaleToPx[scale];
         const semantic = !!textLabel;
         const paths = [].concat(pathData || "");
-        return (index.h(index.Host, { key: '41c9d3006a5887061fdb2144102447b2f490eb72', "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { key: '9fc84ba4eac40fc822babbfe276b2add5ee1c952', "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '724265acdc6fb528bf7b25d7ec445c73a63f4c8e', "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { key: '864ee2d80bebd282543ba5d94c57f84b48a6204d', "aria-hidden": "true", class: {
                 [CSS$1.flipRtl]: dir === "rtl" && flipRtl,
                 svg: true,
             }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (index.h("path", { d: path })) : (index.h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));
@@ -201,7 +201,7 @@ Icon.style = CalciteIconStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     loader: "loader",
@@ -224,14 +224,18 @@ const Loader = class {
             }
             return this.formatter.format(this.value / 100);
         };
+        this.complete = false;
         this.inline = false;
         this.label = undefined;
         this.scale = "m";
-        this.type = undefined;
+        this.type = "indeterminate";
         this.value = 0;
         this.text = "";
         this.effectiveLocale = "";
     }
+    valueChangeHandler() {
+        this.complete = this.type.startsWith("determinate") && this.value === 100;
+    }
     //--------------------------------------------------------------------------
     //
     //  Lifecycle
@@ -244,6 +248,9 @@ const Loader = class {
     disconnectedCallback() {
         locale.disconnectLocalized(this);
     }
+    componentWillLoad() {
+        requestAnimationFrame(() => this.valueChangeHandler());
+    }
     render() {
         const { el, inline, label, scale, text, type, value } = this;
         const id = el.id || guid.guid();
@@ -251,23 +258,16 @@ const Loader = class {
         const size = inline ? this.getInlineSize(scale) : this.getSize(scale);
         const radius = size * radiusRatio;
         const viewbox = `0 0 ${size} ${size}`;
-        const isDeterminate = type?.startsWith("determinate");
+        const isDeterminate = type.startsWith("determinate");
         const circumference = 2 * radius * Math.PI;
         const progress = (value / 100) * circumference;
         const remaining = circumference - progress;
         const valueNow = Math.floor(value);
-        const hostAttributes = {
-            "aria-valuenow": valueNow,
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            complete: valueNow === 100,
-        };
-        const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };
         const determinateStyle = { "stroke-dasharray": `${progress} ${remaining}` };
-        return (index.h(index.Host, { key: 'b84a28c551e2484735b2cb7bad89a7a1d608fe13', "aria-label": label, id: id, role: "progressbar", ...(isDeterminate ? hostAttributes : {}) }, index.h("div", { key: '7ea0d6f2a742c8950cff2196bc454cc8ec3be037', class: CSS.loaderParts }, [1, 2, 3].map((index$1) => (index.h("svg", { "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '8272bdfae9fff51b19ed8fa66197eb93b53feb4c', "aria-label": label, "aria-valuemax": isDeterminate ? "100" : undefined, "aria-valuemin": isDeterminate ? "0" : undefined, "aria-valuenow": isDeterminate ? valueNow.toString() : undefined, id: id, role: "progressbar" }, index.h("div", { key: '3d410c178af39bb57cc478bdd06c0392f6ba71a3', class: CSS.loaderParts }, [1, 2, 3].map((index$1) => (index.h("svg", { "aria-hidden": "true", class: {
                 [CSS.loaderPart]: true,
                 [CSS.loaderPartId(index$1)]: true,
-            }, key: index$1, viewBox: viewbox, ...(index$1 === 3 && isDeterminate ? { style: determinateStyle } : {}) }, index.h("circle", { ...svgAttributes })))), isDeterminate && index.h("div", { key: '2732fc9cbbaade638eb6241776b2aecea6177ed5', class: CSS.loaderPercentage }, this.formatValue())), text && index.h("div", { key: '5050af5bb4d979e4f83ac997f0f98aa69be86f52', class: CSS.loaderText }, text)));
+            }, key: index$1, style: isDeterminate && index$1 === 3 ? determinateStyle : undefined, viewBox: viewbox }, index.h("circle", { cx: size / 2, cy: size / 2, r: radius })))), isDeterminate && index.h("div", { key: '4ccc633930dee031bf769908d712df39e0677bbb', class: CSS.loaderPercentage }, this.formatValue())), text && index.h("div", { key: '6d0d51988bdfafee2a19faed9e14d3bda06d79b5', class: CSS.loaderText }, text)));
     }
     formatterPropsChange() {
         this.updateFormatter();
@@ -307,6 +307,7 @@ const Loader = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "value": ["valueChangeHandler"],
         "effectiveLocale": ["formatterPropsChange"],
         "type": ["formatterPropsChange"]
     }; }

package/dist/cjs/calcite-inline-editable.cjs.entry.js

@@ -7,24 +7,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const interactive = require('./interactive-3b85d8df.js');
-const label = require('./label-e7d3c371.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const observers = require('./observers-5f9f67ee.js');
-const t9n = require('./t9n-e41672d2.js');
-require('./guid-42cda8c9.js');
-require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
-require('./component-7f2bd646.js');
-require('./key-82084ef6.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const interactive = require('./interactive-a128ac30.js');
+const label = require('./label-726fc287.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const observers = require('./observers-18d87cb5.js');
+const t9n = require('./t9n-ed5c03a7.js');
+require('./guid-e84a8375.js');
+require('./resources-18f799c7.js');
+require('./component-5d190962.js');
+require('./browser-333a21c5.js');
+require('./key-47c9469a.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     wrapper: "wrapper",
@@ -150,7 +150,6 @@ const InlineEditable = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         label.connectLabel(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
@@ -165,7 +164,6 @@ const InlineEditable = class {
         loadable.setComponentLoaded(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
@@ -175,12 +173,12 @@ const InlineEditable = class {
         interactive.updateHostInteraction(this);
     }
     render() {
-        return (index.h(interactive.InteractiveContainer, { key: '679bc60f370860de292d87bc9557f451f3674a4a', disabled: this.disabled }, index.h("div", { key: 'fa5d6c787837eeb8174dc45d7bcdc61b7e1c1851', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, index.h("div", { key: '2a432c9940c1652490168333d15c19396d149a10', class: CSS.inputWrapper }, index.h("slot", { key: '80a11e4a0c3ace9a4ef5578f797e4a6b4b3f72e9' })), index.h("div", { key: '540e6cf43d413ebe15345a37902b110094010d57', class: CSS.controlsWrapper }, index.h("calcite-button", { key: '1ee7fa765b9bd7745424bb8f8f524c0a9ba6c44e', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        return (index.h(interactive.InteractiveContainer, { key: '2b20c0c889e02709ab25fed13afe8cc03a0ad5a5', disabled: this.disabled }, index.h("div", { key: '31a6ae689e94a21c34718d848e43e7e848c82c33', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, index.h("div", { key: '21d48b4543d362c8253987aa04aa88b91dcbebd2', class: CSS.inputWrapper }, index.h("slot", { key: '1b0e62cefa8959014d776a55e882d89c1038d72e' })), index.h("div", { key: 'c10288b692a896c7d4a924fb3a99d5d1a0b8b655', class: CSS.controlsWrapper }, index.h("calcite-button", { key: '7b8312b37c3e1aa9e07b6cbad9f116c0e3b63438', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            index.h("div", { key: 'd9eb2bfc9affd4c7fb6510448476c5b83399a2ca', class: CSS.cancelEditingButtonWrapper }, index.h("calcite-button", { key: '03243abe113f8e441e05f87feef164215082feda', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-            index.h("calcite-button", { key: '92bdc973c915fbf4980a1fb01ffd4cf9a9f41557', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
+            index.h("div", { key: '96dc366959dff0b01f2b6720d04137d978b480ba', class: CSS.cancelEditingButtonWrapper }, index.h("calcite-button", { key: '74263d601b8f410497061c2a61ad9a7cc0950651', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+            index.h("calcite-button", { key: 'b6b0853810cb99eb88c908487078cc74e05f48bc', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
         ]))));
     }
     //--------------------------------------------------------------------------

package/dist/cjs/calcite-input-number.cjs.entry.js

@@ -7,27 +7,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const form = require('./form-8132060d.js');
-const interactive = require('./interactive-3b85d8df.js');
-const key = require('./key-82084ef6.js');
-const label = require('./label-e7d3c371.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const observers = require('./observers-5f9f67ee.js');
-const resources = require('./resources-f11e9bd6.js');
-const t9n = require('./t9n-e41672d2.js');
-const component = require('./component-7f2bd646.js');
-const Validation = require('./Validation-9bab9a69.js');
-const input = require('./input-3efc5a5e.js');
-require('./guid-42cda8c9.js');
-require('./browser-2893460e.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const form = require('./form-6dd8050a.js');
+const interactive = require('./interactive-a128ac30.js');
+const key = require('./key-47c9469a.js');
+const label = require('./label-726fc287.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const observers = require('./observers-18d87cb5.js');
+const resources = require('./resources-18f799c7.js');
+const t9n = require('./t9n-ed5c03a7.js');
+const component = require('./component-5d190962.js');
+const Validation = require('./Validation-55fc2417.js');
+const input = require('./input-8c28213d.js');
+require('./guid-e84a8375.js');
+require('./browser-333a21c5.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     loader: "loader",
@@ -52,7 +52,7 @@ const SLOTS = {
     action: "action",
 };
 
-const inputNumberCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-radius:0px;background-color:var(--calcite-color-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}input:-moz-placeholder-shown{text-overflow:ellipsis}input:placeholder-shown{text-overflow:ellipsis}input{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-color-foreground-2);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-color-text-1);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-color-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-color-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-color-text-2)}.prefix{order:2;border-inline-end-width:0px}.suffix{order:5;border-inline-start-width:0px}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([number-button-type=vertical]) .wrapper{flex-direction:row;display:flex}:host([number-button-type=vertical]) input{order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:1;max-block-size:100%;min-block-size:100%;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);border-inline-end-width:0px}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover{background-color:var(--calcite-color-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon{color:var(--calcite-color-text-1)}.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:5}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover{background-color:var(--calcite-color-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover{background-color:var(--calcite-color-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover{background-color:var(--calcite-color-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px}.number-button-item{max-block-size:50%;min-block-size:50%;pointer-events:initial;margin:0px;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;align-self:center;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);padding-block:0px;padding-inline:0.5rem;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline-start-width:0px}.number-button-item calcite-icon{pointer-events:none;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.number-button-item:focus{background-color:var(--calcite-color-foreground-2)}.number-button-item:focus calcite-icon{color:var(--calcite-color-text-1)}.number-button-item:active{background-color:var(--calcite-color-foreground-3)}.number-button-item:disabled{pointer-events:none}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const inputNumberCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-radius:0px;background-color:var(--calcite-color-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}input:-moz-placeholder-shown{text-overflow:ellipsis}input:placeholder-shown{text-overflow:ellipsis}input{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-color-foreground-2);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-color-text-1);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-color-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-color-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-color-text-2)}.prefix{order:2;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size, auto)}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size, auto)}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([number-button-type=vertical]) .wrapper{flex-direction:row;display:flex}:host([number-button-type=vertical]) input{order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:1;max-block-size:100%;min-block-size:100%;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);border-inline-end-width:0px}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover{background-color:var(--calcite-color-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon{color:var(--calcite-color-text-1)}.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:5}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover{background-color:var(--calcite-color-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover{background-color:var(--calcite-color-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover{background-color:var(--calcite-color-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px}.number-button-item{max-block-size:50%;min-block-size:50%;pointer-events:initial;margin:0px;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;align-self:center;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);padding-block:0px;padding-inline:0.5rem;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline-start-width:0px}.number-button-item calcite-icon{pointer-events:none;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.number-button-item:focus{background-color:var(--calcite-color-foreground-2)}.number-button-item:focus calcite-icon{color:var(--calcite-color-text-1)}.number-button-item:active{background-color:var(--calcite-color-foreground-3)}.number-button-item:disabled{pointer-events:none}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteInputNumberStyle0 = inputNumberCss;
 
 const InputNumber = class {
@@ -453,7 +453,6 @@ const InputNumber = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -470,7 +469,6 @@ const InputNumber = class {
         loadable.setComponentLoaded(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         form.disconnectForm(this);
         locale.disconnectLocalized(this);
@@ -590,27 +588,27 @@ const InputNumber = class {
     // --------------------------------------------------------------------------
     render() {
         const dir = dom.getElementDir(this.el);
-        const loader = (index.h("div", { key: '4afc447c454d130ac4e983faa2a5a4390e500134', class: CSS.loader }, index.h("calcite-progress", { key: '8f14d3e88b4a3f9d1069b2f10a3b5377353b37cd', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (index.h("button", { key: '60622dbfee3b9d3b96f779f37590d02863a5b395', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '98e61619db4e6cd25353bbb4cd3e998b47debdef', icon: "x", scale: component.getIconScale(this.scale) })));
-        const iconEl = (index.h("calcite-icon", { key: 'bd8c940cd1a47cc4051d9cbb30e19ce32748f82d', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
+        const loader = (index.h("div", { key: 'cc2f276e80dee457d8a8f38e06d18967647e4591', class: CSS.loader }, index.h("calcite-progress", { key: '2764fc118ec3063a7e76e0738050fa7b3872018a', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (index.h("button", { key: '6bb6db58c8c20594f88c60f2d717ad9b4dfb9fe0', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '1746fe8d0a79b4516beb7574ba6b74b6a5070d81', icon: "x", scale: component.getIconScale(this.scale) })));
+        const iconEl = (index.h("calcite-icon", { key: '4d57c3fedac7bedd8f9397c4b276866ee5b7237f', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (index.h("button", { key: 'a33a45b1576ed55847411d9c0e493a4354188cee', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (index.h("button", { key: 'c0e52d338c61d3d6f6349975751f6af707325db3', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: 'b05ed816a0472df584918e6cdbeefca0f4ebccb6', icon: "chevron-up", scale: component.getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (index.h("button", { key: '7e8466f04ec12caccd6703701934c8e6864e2ad1', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '28697a2ed4b3581c5d190c86ef3d7ab1d70823f8', icon: "chevron-up", scale: component.getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (index.h("button", { key: '11f9db5af2916069d412089875d53fdea0b453c0', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: 'b796613a0510d88c5a9a88e19f204dd1cfa3ae79', icon: "chevron-down", scale: component.getIconScale(this.scale) })));
-        const numberButtonsVertical = (index.h("div", { key: '7c0d61831b7d00d383b08bc69d130c93e4b41708', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = index.h("div", { key: 'bde995b58c2be304e0f97751864932f4aba8b560', class: CSS.prefix }, this.prefixText);
-        const suffixText = index.h("div", { key: '09ecebb64862cc87c42f6a07eb43f4f492aafff9', class: CSS.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '1614213fecd0d957cda096df5ddf220bacc49dca', icon: "chevron-down", scale: component.getIconScale(this.scale) })));
+        const numberButtonsVertical = (index.h("div", { key: 'e8822b7270ea89e13ebf3703b6f271be512c6a9b', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = index.h("div", { key: '333318e5c2f5fbd0d307255c7a0a4eebde29b5c8', class: CSS.prefix }, this.prefixText);
+        const suffixText = index.h("div", { key: '4812a571237e8016e9d173036e663e91ef7df638', class: CSS.suffix }, this.suffixText);
         const childEl = (index.h("input", { "aria-errormessage": IDS.validationMessage, "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
-        return (index.h(index.Host, { key: '8bbe5d61c4d825064c541d69720c3dec29397bb6', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '88981ec407b3ca3dc30e1f4639cc165f125a2e4f', disabled: this.disabled }, index.h("div", { key: 'b5147afb965eb8950451efd0188de34a126cb42a', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
+        return (index.h(index.Host, { key: 'a765b9d4616c91517c512bf08511e7dd979ba8cc', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'b9ea4743c23e8dc2773cfb600b0e345797c3558d', disabled: this.disabled }, index.h("div", { key: '17dfcce5d569e546184d908cc595914d5aefe132', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, index.h("div", { key: 'ae8cfb188f1e67b2b26fd994e075b9d65f193aed', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: '68e1e75159411ccc36981c488411741ba4f4863f', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, index.h("slot", { key: '68ffd29dc928221cf0e4f1b1e79fc71dc1cdbfa2', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, index.h("div", { key: 'db2a55ec06a2418761f7a64c06b88680156870c3', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: '26fa02f076266dd8e4e9441d17b708994bac580d', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, index.h("slot", { key: 'cf216669a1ef119c5512515f014be59ee6c8121e', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, index.h(form.HiddenFormInputSlot, { key: '5efb494ebcff2e85bd0cb306ca1653dea1a79e36', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, index.h(form.HiddenFormInputSlot, { key: 'efc80f0a385d1d56971473fde6862738cb06b446', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/calcite-input-text.cjs.entry.js

@@ -7,27 +7,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const dom = require('./dom-3d3a8f25.js');
-const form = require('./form-8132060d.js');
-const interactive = require('./interactive-3b85d8df.js');
-const label = require('./label-e7d3c371.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const observers = require('./observers-5f9f67ee.js');
-const resources = require('./resources-f11e9bd6.js');
-const t9n = require('./t9n-e41672d2.js');
-const component = require('./component-7f2bd646.js');
-const Validation = require('./Validation-9bab9a69.js');
-const input = require('./input-3efc5a5e.js');
-require('./guid-42cda8c9.js');
-require('./browser-2893460e.js');
-require('./key-82084ef6.js');
+const index = require('./index-4b68e4b4.js');
+const dom = require('./dom-795d4a33.js');
+const form = require('./form-6dd8050a.js');
+const interactive = require('./interactive-a128ac30.js');
+const label = require('./label-726fc287.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const observers = require('./observers-18d87cb5.js');
+const resources = require('./resources-18f799c7.js');
+const t9n = require('./t9n-ed5c03a7.js');
+const component = require('./component-5d190962.js');
+const Validation = require('./Validation-55fc2417.js');
+const input = require('./input-8c28213d.js');
+require('./guid-e84a8375.js');
+require('./browser-333a21c5.js');
+require('./key-47c9469a.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     loader: "loader",
@@ -49,7 +49,7 @@ const SLOTS = {
     action: "action",
 };
 
-const inputTextCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input{padding-inline-start:0.5rem;padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, 0.5rem)}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .prefix,:host([scale=s]) .suffix{padding-inline:0.5rem}:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input{padding-inline-start:0.75rem;padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, 0.75rem)}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .prefix,:host([scale=m]) .suffix{padding-inline:0.75rem}:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input{padding-inline-start:1rem;padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, 1rem)}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .prefix,:host([scale=l]) .suffix{padding-inline:1rem}:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-radius:0px;background-color:var(--calcite-color-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}input:-moz-placeholder-shown{text-overflow:ellipsis}input:placeholder-shown{text-overflow:ellipsis}input{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-color-foreground-2);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-color-text-1);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-color-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-color-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-color-text-2)}.prefix{order:2;border-inline-end-width:0px}.suffix{order:5;border-inline-start-width:0px}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const inputTextCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input{padding-inline-start:0.5rem;padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, 0.5rem)}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .prefix,:host([scale=s]) .suffix{padding-inline:0.5rem}:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input{padding-inline-start:0.75rem;padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, 0.75rem)}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .prefix,:host([scale=m]) .suffix{padding-inline:0.75rem}:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input{padding-inline-start:1rem;padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, 1rem)}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .prefix,:host([scale=l]) .suffix{padding-inline:1rem}:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-radius:0px;background-color:var(--calcite-color-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}input:-moz-placeholder-shown{text-overflow:ellipsis}input:placeholder-shown{text-overflow:ellipsis}input{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-color-foreground-2);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-color-text-1);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-color-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-color-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-color-text-2)}.prefix{order:2;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size, auto)}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size, auto)}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteInputTextStyle0 = inputTextCss;
 
 const InputText = class {
@@ -266,7 +266,6 @@ const InputText = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -280,7 +279,6 @@ const InputText = class {
         this.el.addEventListener(form.internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         form.disconnectForm(this);
         locale.disconnectLocalized(this);
@@ -344,16 +342,16 @@ const InputText = class {
     // --------------------------------------------------------------------------
     render() {
         const dir = dom.getElementDir(this.el);
-        const loader = (index.h("div", { key: '75e1d143289073aba71c8412dba86e4513ba438a', class: CSS.loader }, index.h("calcite-progress", { key: '17c1a8dfb11db87f62dd7664fb3ef152b14c89bc', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (index.h("button", { key: '8c2fd4a9a50bea3e5c1e3061d275b76f84920e02', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '359da0464e284f76c85d92888789c6c20e6f6195', icon: "x", scale: component.getIconScale(this.scale) })));
-        const iconEl = (index.h("calcite-icon", { key: '643f3c87fb55ffbab119802fa6409263a003d337', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
-        const prefixText = index.h("div", { key: 'd5a48b6b2fef41fef60e6094d25af969fc6b95e3', class: CSS.prefix }, this.prefixText);
-        const suffixText = index.h("div", { key: '5b1e442c895c58386790e0fad7de474be4483a1b', class: CSS.suffix }, this.suffixText);
-        const childEl = (index.h("input", { key: '6ca205247c77545cca539d0e9e15ecc8a3bd7aeb', "aria-errormessage": IDS.validationMessage, "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
+        const loader = (index.h("div", { key: '2ca041a581304297694d2219c52e3567ee39c4d9', class: CSS.loader }, index.h("calcite-progress", { key: 'dfc05d226e43048d229f32e830ce2d1295d5691f', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (index.h("button", { key: '39f2afe7d3280b4de0b4e8970266886a7119e5ba', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: 'c16107371113f3015fb8d259d7a0b227c4256f8f', icon: "x", scale: component.getIconScale(this.scale) })));
+        const iconEl = (index.h("calcite-icon", { key: 'f5dc6921fbe712ebda049e863bc8b2372083a4d1', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
+        const prefixText = index.h("div", { key: 'b295b7306b9d121c47f1129f743429de65166bc3', class: CSS.prefix }, this.prefixText);
+        const suffixText = index.h("div", { key: '85c5d7ba85182aecc7bf5471c96ce96507953948', class: CSS.suffix }, this.suffixText);
+        const childEl = (index.h("input", { key: 'b542aedd945ae0c3ec2a8e6bc2f2f22f5040636c', "aria-errormessage": IDS.validationMessage, "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
                 [CSS.editingEnabled]: this.editingEnabled,
                 [CSS.inlineChild]: !!this.inlineEditableEl,
             }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode"), maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
-        return (index.h(index.Host, { key: 'ee459d49c166ac8587e9bcff82e469001bfb341d', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'b5b5ce9afc9e98b42ad3380057c48d745fe4a69f', disabled: this.disabled }, index.h("div", { key: '957c3665257e600acc1b0804e00c1d4d1786dd8c', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.prefixText ? prefixText : null, index.h("div", { key: '2f572c83b9816be8763d1c995a523f82013b76cd', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: 'e02221edf4528d5663d3e48fcea5d6e5c1fe12c6', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, index.h("slot", { key: 'b49d331ad17da7f17bc2f44ee0d61f5b8c45ce93', name: SLOTS.action })), this.suffixText ? suffixText : null, index.h(form.HiddenFormInputSlot, { key: 'b93d1dec9fa8f48620f694e90c4e195e0138d1c6', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (index.h(index.Host, { key: '5a32059d58fc667ccef836b97c7dbf9c7d0456ba', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '06f4302d0b97901f9f962f6b96460c517a0e415d', disabled: this.disabled }, index.h("div", { key: 'f160e1bebeee50b752d6f38fbc2517952fb92c94', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.prefixText ? prefixText : null, index.h("div", { key: '72b7e6c7ffdd700779f0ab266050bf263a5912c5', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: 'b359ff4cad35756cf2b4fd97087071cfb8cb6363', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, index.h("slot", { key: '123667cff5ed426e732c9b5ef716147431d10ac5', name: SLOTS.action })), this.suffixText ? suffixText : null, index.h(form.HiddenFormInputSlot, { key: 'fb9c298c3ad9b1b67f6e9e8cc2fb9e7b96f010dd', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }