@esri/solutions-components 0.8.12 → 0.8.13

package/dist/cjs/calcite-input-time-picker.cjs.entry.js

@@ -7,26 +7,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-bb2db82c.js');
-require('./index-105cf2b9.js');
-require('./form-fed676d6.js');
-require('./dom-c9c2c835.js');
-require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./interactive-3ab7044d.js');
-require('./browser-d08a5f99.js');
-require('./key-c5504030.js');
-require('./label-32573e1d.js');
-require('./component-ac7c3bd8.js');
-require('./loadable-5a794992.js');
-require('./locale-d237c9d5.js');
-require('./observers-db4527e4.js');
-require('./focusTrapComponent-faae7d7e.js');
-require('./time-ff8d50c7.js');
-require('./math-318a1646.js');
-require('./t9n-993a84de.js');
-require('./openCloseComponent-19a769d0.js');
-require('./Validation-b02c6710.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-ebdc5205.js');
+require('./index-79b35510.js');
+require('./form-a27f759c.js');
+require('./dom-1c78fa73.js');
+require('./guid-a7528dfa.js');
+require('./resources-1c0e54c1.js');
+require('./interactive-f08f0369.js');
+require('./browser-a96d0614.js');
+require('./key-7ed07912.js');
+require('./label-85cf6821.js');
+require('./component-d48747c9.js');
+require('./loadable-b374ef4b.js');
+require('./locale-5efdf085.js');
+require('./observers-4fa351d9.js');
+require('./focusTrapComponent-0c672330.js');
+require('./time-d250cbf5.js');
+require('./math-11993213.js');
+require('./t9n-9d199056.js');
+require('./openCloseComponent-6a283ac3.js');
+require('./Validation-eb9afded.js');
 
 
 

package/dist/cjs/calcite-input-time-zone.cjs.entry.js

@@ -7,25 +7,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const label = require('./label-32573e1d.js');
-const interactive = require('./interactive-3ab7044d.js');
-const locale = require('./locale-d237c9d5.js');
-const t9n = require('./t9n-993a84de.js');
-const loadable = require('./loadable-5a794992.js');
-const form = require('./form-fed676d6.js');
-require('./dom-c9c2c835.js');
-require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./component-ac7c3bd8.js');
-require('./browser-d08a5f99.js');
-require('./key-c5504030.js');
-require('./observers-db4527e4.js');
+const index = require('./index-79b35510.js');
+const label = require('./label-85cf6821.js');
+const interactive = require('./interactive-f08f0369.js');
+const locale = require('./locale-5efdf085.js');
+const t9n = require('./t9n-9d199056.js');
+const loadable = require('./loadable-b374ef4b.js');
+const form = require('./form-a27f759c.js');
+require('./dom-1c78fa73.js');
+require('./guid-a7528dfa.js');
+require('./resources-1c0e54c1.js');
+require('./component-d48747c9.js');
+require('./browser-a96d0614.js');
+require('./key-7ed07912.js');
+require('./observers-4fa351d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
@@ -157,8 +157,16 @@ function getTimeZoneShortOffset(timeZone, locale$1, referenceDateInMs = Date.now
     const parts = dateTimeFormat.formatToParts(referenceDateInMs);
     return parts.find(({ type }) => type === "timeZoneName").value;
 }
+function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
+    return valueToMatch == null
+        ? null
+        : timeZoneItems.find((item) => 
+        // intentional == to match string to number
+        item[prop] == valueToMatch);
+}
 
 const inputTimeZoneCss = ":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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}";
+const CalciteInputTimeZoneStyle0 = inputTimeZoneCss;
 
 const InputTimeZone = class {
     constructor(hostRef) {
@@ -182,9 +190,16 @@ const InputTimeZone = class {
         this.onComboboxChange = (event) => {
             event.stopPropagation();
             const combobox = event.target;
-            const selected = this.findTimeZoneItem(combobox.selectedItems[0].getAttribute("data-value"));
+            const selectedItem = combobox.selectedItems[0];
+            if (!selectedItem) {
+                this.value = null;
+                this.selectedTimeZoneItem = null;
+                this.calciteInputTimeZoneChange.emit();
+                return;
+            }
+            const selected = this.findTimeZoneItemByLabel(selectedItem.textLabel);
             const selectedValue = `${selected.value}`;
-            if (this.value === selectedValue) {
+            if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
                 return;
             }
             this.value = selectedValue;
@@ -201,6 +216,7 @@ const InputTimeZone = class {
             event.stopPropagation();
             this.calciteInputTimeZoneOpen.emit();
         };
+        this.clearable = false;
         this.disabled = false;
         this.form = undefined;
         this.maxItems = 0;
@@ -209,6 +225,19 @@ const InputTimeZone = class {
         this.mode = "offset";
         this.validationMessage = undefined;
         this.validationIcon = undefined;
+        this.validity = {
+            valid: false,
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+        };
         this.name = undefined;
         this.open = false;
         this.overlayPositioning = "absolute";
@@ -217,6 +246,7 @@ const InputTimeZone = class {
         this.scale = "m";
         this.status = "idle";
         this.value = undefined;
+        this.readOnly = false;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
     }
@@ -227,6 +257,12 @@ const InputTimeZone = class {
         this.updateTimeZoneItemsAndSelection();
     }
     handleValueChange(value, oldValue) {
+        value = this.normalizeValue(value);
+        if (!value && this.clearable) {
+            this.value = value;
+            this.selectedTimeZoneItem = null;
+            return;
+        }
         const timeZoneItem = this.findTimeZoneItem(value);
         if (!timeZoneItem) {
             this.value = oldValue;
@@ -255,20 +291,22 @@ const InputTimeZone = class {
         this.setFocus();
     }
     findTimeZoneItem(value) {
-        const valueToMatch = value;
-        return this.timeZoneItems.find(({ value }) => 
-        // intentional == to match string to number
-        value == valueToMatch);
+        return findTimeZoneItemByProp(this.timeZoneItems, "value", value);
+    }
+    findTimeZoneItemByLabel(label) {
+        return findTimeZoneItemByProp(this.timeZoneItems, "label", label);
     }
     async updateTimeZoneItemsAndSelection() {
         var _a;
         this.timeZoneItems = await this.createTimeZoneItems();
+        if (this.value === "" && this.clearable) {
+            this.selectedTimeZoneItem = null;
+            return;
+        }
         const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();
         const valueToMatch = (_a = this.value) !== null && _a !== void 0 ? _a : fallbackValue;
-        this.selectedTimeZoneItem = this.findTimeZoneItem(valueToMatch);
-        if (!this.selectedTimeZoneItem) {
-            this.selectedTimeZoneItem = this.findTimeZoneItem(fallbackValue);
-        }
+        this.selectedTimeZoneItem =
+            this.findTimeZoneItem(valueToMatch) || this.findTimeZoneItem(fallbackValue);
     }
     async createTimeZoneItems() {
         var _a;
@@ -296,11 +334,15 @@ const InputTimeZone = class {
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
+    normalizeValue(value) {
+        return value === null ? "" : value;
+    }
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
         await t9n.setUpMessages(this);
+        this.value = this.normalizeValue(this.value);
         await this.updateTimeZoneItemsAndSelection();
-        const selectedValue = `${this.selectedTimeZoneItem.value}`;
+        const selectedValue = this.selectedTimeZoneItem ? `${this.selectedTimeZoneItem.value}` : null;
         form.afterConnectDefaultValueSet(this, selectedValue);
         this.value = selectedValue;
     }
@@ -311,13 +353,13 @@ const InputTimeZone = class {
         interactive.updateHostInteraction(this);
     }
     render() {
-        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage,
+        return (index.h(index.Host, { key: '80390d6f555967845c57683286d3bc7a467e986d' }, index.h(interactive.InteractiveContainer, { key: 'b2d3bcc8f1ca941fb73bb503e36e06eed541ea48', disabled: this.disabled }, index.h("calcite-combobox", { key: '14c3f7559338973e2eb08c528a236d05ec4c489c', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, readOnly: this.readOnly, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.setComboboxRef }, this.timeZoneItems.map((group) => {
             const selected = this.selectedTimeZoneItem === group;
             const { label, value } = group;
             return (index.h("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
-        })), index.h(form.HiddenFormInputSlot, { component: this }))));
+        })), index.h(form.HiddenFormInputSlot, { key: '9be196de8ecde0e10e293cd49b778ce52e75a131', component: this }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -331,6 +373,6 @@ const InputTimeZone = class {
         "effectiveLocale": ["effectiveLocaleWatcher"]
     }; }
 };
-InputTimeZone.style = inputTimeZoneCss;
+InputTimeZone.style = CalciteInputTimeZoneStyle0;
 
 exports.calcite_input_time_zone = InputTimeZone;

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

@@ -7,26 +7,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const dom = require('./dom-c9c2c835.js');
-const form = require('./form-fed676d6.js');
-const interactive = require('./interactive-3ab7044d.js');
-const key = require('./key-c5504030.js');
-const label = require('./label-32573e1d.js');
-const loadable = require('./loadable-5a794992.js');
-const locale = require('./locale-d237c9d5.js');
-const observers = require('./observers-db4527e4.js');
-const resources = require('./resources-9447c777.js');
-const t9n = require('./t9n-993a84de.js');
-const component = require('./component-ac7c3bd8.js');
-const Validation = require('./Validation-b02c6710.js');
-require('./guid-ae73cd27.js');
-require('./browser-d08a5f99.js');
+const index = require('./index-79b35510.js');
+const dom = require('./dom-1c78fa73.js');
+const form = require('./form-a27f759c.js');
+const interactive = require('./interactive-f08f0369.js');
+const key = require('./key-7ed07912.js');
+const label = require('./label-85cf6821.js');
+const loadable = require('./loadable-b374ef4b.js');
+const locale = require('./locale-5efdf085.js');
+const observers = require('./observers-4fa351d9.js');
+const resources = require('./resources-1c0e54c1.js');
+const t9n = require('./t9n-9d199056.js');
+const component = require('./component-d48747c9.js');
+const Validation = require('./Validation-eb9afded.js');
+const input = require('./input-fb5fbd7d.js');
+require('./guid-a7528dfa.js');
+require('./browser-a96d0614.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     loader: "loader",
@@ -56,7 +57,8 @@ const SLOTS = {
     action: "action",
 };
 
-const inputCss = ":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]) textarea{block-size:1.5rem;min-block-size:1.5rem}: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]) input[type=file]{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=s]) textarea{block-size:auto;padding-block:0.25rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}: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]) textarea{min-block-size:2rem}: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]) input[type=file]{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=m]) textarea{block-size:auto;padding-block:0.5rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}: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]) textarea{min-block-size:2.75rem}: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]) input[type=file]{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([scale=l]) textarea{block-size:auto;padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([disabled]) textarea{resize:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}textarea,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%;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[type=search]::-webkit-search-decoration{-webkit-appearance:none}input,textarea{text-overflow:ellipsis;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input:-moz-placeholder-shown,textarea:-moz-placeholder-shown{text-overflow:ellipsis}input:placeholder-shown,textarea:placeholder-shown{text-overflow:ellipsis}input:focus,textarea:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly],textarea[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus,textarea[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}textarea,input{outline-color:transparent}textarea:focus,input:focus{outline:2px solid 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,:host([status=invalid]) textarea{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus,:host([status=invalid]) textarea: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;display:block;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.icon,.resize-icon-wrapper{z-index:var(--calcite-z-index)}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration,input[type=date]::-webkit-clear-button,input[type=time]::-webkit-clear-button{display:none}.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:all 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:all 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-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]) textarea,:host([alignment=start]) input{text-align:start}:host([alignment=end]) textarea,:host([alignment=end]) input{text-align:end}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0px}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition:all 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,:host([number-button-type=vertical]) textarea{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:all 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:all 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}:input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}textarea::-webkit-resizer{position:absolute;inset-block-end:0px;box-sizing:border-box;padding-block:0px;padding-inline:0.25rem;inset-inline-end:0}.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-color-foreground-1);color:var(--calcite-color-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([type=color]) input{padding:0.25rem}:host([type=file]) input{cursor:pointer;border-width:1px;border-style:dashed;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);text-align:center}:host([type=file][scale=s]) input{padding-block:1px;padding-inline:0.5rem}:host([type=file][scale=m]) input{padding-block:0.25rem;padding-inline:0.75rem}:host([type=file][scale=l]) input{padding-block:0.5rem;padding-inline:1rem}: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:all 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 inputCss = ":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]) textarea{block-size:1.5rem;min-block-size:1.5rem}: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]) input[type=file]{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=s]) textarea{block-size:auto;padding-block:0.25rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}: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]) textarea{min-block-size:2rem}: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]) input[type=file]{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=m]) textarea{block-size:auto;padding-block:0.5rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}: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]) textarea{min-block-size:2.75rem}: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]) input[type=file]{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([scale=l]) textarea{block-size:auto;padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([disabled]) textarea{resize:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}textarea,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%;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[type=search]::-webkit-search-decoration{-webkit-appearance:none}input,textarea{text-overflow:ellipsis;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input:-moz-placeholder-shown,textarea:-moz-placeholder-shown{text-overflow:ellipsis}input:placeholder-shown,textarea:placeholder-shown{text-overflow:ellipsis}input:focus,textarea:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly],textarea[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus,textarea[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}textarea,input{outline-color:transparent}textarea:focus,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,:host([status=invalid]) textarea{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus,:host([status=invalid]) textarea: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;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}.icon,.resize-icon-wrapper{z-index:var(--calcite-z-index)}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration,input[type=date]::-webkit-clear-button,input[type=time]::-webkit-clear-button{display:none}.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]) textarea,:host([alignment=start]) input{text-align:start}:host([alignment=end]) textarea,:host([alignment=end]) input{text-align:end}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0px}.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,:host([number-button-type=vertical]) textarea{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}:input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}textarea::-webkit-resizer{position:absolute;inset-block-end:0px;box-sizing:border-box;padding-block:0px;padding-inline:0.25rem;inset-inline-end:0}.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-color-foreground-1);color:var(--calcite-color-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([type=color]) input{padding:0.25rem}:host([type=file]) input{cursor:pointer;border-width:1px;border-style:dashed;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);text-align:center}:host([type=file][scale=s]) input{padding-block:1px;padding-inline:0.5rem}:host([type=file][scale=m]) input{padding-block:0.25rem;padding-inline:0.75rem}:host([type=file][scale=l]) input{padding-block:0.5rem;padding-inline:1rem}: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 CalciteInputStyle0 = inputCss;
 
 const Input = class {
     constructor(hostRef) {
@@ -76,14 +78,14 @@ const Input = class {
         //
         //--------------------------------------------------------------------------
         this.keyDownHandler = (event) => {
-            if (this.readOnly || this.disabled) {
+            if (this.readOnly || this.disabled || event.defaultPrevented) {
                 return;
             }
             if (this.isClearable && event.key === "Escape") {
                 this.clearInputValue(event);
                 event.preventDefault();
             }
-            if (event.key === "Enter" && !event.defaultPrevented) {
+            if (event.key === "Enter") {
                 if (form.submitForm(this)) {
                     event.preventDefault();
                 }
@@ -371,13 +373,15 @@ const Input = class {
             window.clearInterval(this.nudgeNumberValueIntervalId);
         };
         this.alignment = "start";
-        this.autofocus = false;
+        this.autofocus = undefined;
         this.clearable = false;
         this.disabled = false;
+        this.enterKeyHint = undefined;
         this.form = undefined;
         this.groupSeparator = false;
         this.icon = undefined;
         this.iconFlipRtl = false;
+        this.inputMode = undefined;
         this.label = undefined;
         this.loading = false;
         this.numberingSystem = undefined;
@@ -388,6 +392,19 @@ const Input = class {
         this.minLength = undefined;
         this.validationMessage = undefined;
         this.validationIcon = undefined;
+        this.validity = {
+            valid: false,
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+        };
         this.name = undefined;
         this.numberButtonType = "vertical";
         this.placeholder = undefined;
@@ -401,8 +418,6 @@ const Input = class {
         this.pattern = undefined;
         this.accept = undefined;
         this.multiple = false;
-        this.inputMode = "text";
-        this.enterKeyHint = undefined;
         this.suffixText = undefined;
         this.editingEnabled = false;
         this.type = "text";
@@ -415,6 +430,14 @@ const Input = class {
         this.displayedValue = undefined;
         this.slottedActionElDisabledInternally = false;
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleGlobalAttributesChanged() {
+        index.forceUpdate(this);
+    }
     disabledWatcher() {
         this.setDisabledAction();
     }
@@ -482,21 +505,6 @@ const Input = class {
         }
         label.connectLabel(this);
         form.connectForm(this);
-        this.setPreviousEmittedValue(this.value);
-        this.setPreviousValue(this.value);
-        if (this.type === "number") {
-            if (this.value === "Infinity" || this.value === "-Infinity") {
-                this.displayedValue = this.value;
-                this.previousEmittedValue = this.value;
-            }
-            else {
-                this.warnAboutInvalidNumberValue(this.value);
-                this.setValue({
-                    origin: "connected",
-                    value: locale.isValidNumber(this.value) ? this.value : "",
-                });
-            }
-        }
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
         this.setDisabledAction();
         this.el.addEventListener(form.internalHiddenInputInputEvent, this.onHiddenFormInputInput);
@@ -519,6 +527,21 @@ const Input = class {
         this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
         this.requestedIcon = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
         await t9n.setUpMessages(this);
+        this.setPreviousEmittedValue(this.value);
+        this.setPreviousValue(this.value);
+        if (this.type === "number") {
+            if (this.value === "Infinity" || this.value === "-Infinity") {
+                this.displayedValue = this.value;
+                this.previousEmittedValue = this.value;
+            }
+            else {
+                this.warnAboutInvalidNumberValue(this.value);
+                this.setValue({
+                    origin: "connected",
+                    value: locale.isValidNumber(this.value) ? this.value : "",
+                });
+            }
+        }
     }
     componentDidLoad() {
         loadable.setComponentLoaded(this);
@@ -592,22 +615,8 @@ const Input = class {
             value: finalValue,
         });
     }
-    syncHiddenFormInput(input) {
-        var _a, _b, _c, _d;
-        const { type } = this;
-        input.type = type;
-        if (type === "number") {
-            input.min = (_b = (_a = this.min) === null || _a === void 0 ? void 0 : _a.toString(10)) !== null && _b !== void 0 ? _b : "";
-            input.max = (_d = (_c = this.max) === null || _c === void 0 ? void 0 : _c.toString(10)) !== null && _d !== void 0 ? _d : "";
-        }
-        else if (type === "text") {
-            if (this.minLength != null) {
-                input.minLength = this.minLength;
-            }
-            if (this.maxLength != null) {
-                input.maxLength = this.maxLength;
-            }
-        }
+    syncHiddenFormInput(input$1) {
+        input.syncHiddenFormInput(this.type, this, input$1);
     }
     setDisabledAction() {
         const slottedActionEl = dom.getSlotted(this.el, "action");
@@ -640,46 +649,52 @@ const Input = class {
     // --------------------------------------------------------------------------
     render() {
         const dir = dom.getElementDir(this.el);
-        const loader = (index.h("div", { class: CSS.loader }, index.h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (index.h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: component.getIconScale(this.scale) })));
-        const iconEl = (index.h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
+        const loader = (index.h("div", { key: 'b8611c67559682fd64ded80a0beddbd052f6fe2f', class: CSS.loader }, index.h("calcite-progress", { key: '84c686cba5249dae749bb44955e9a213cbed4943', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (index.h("button", { key: 'a87ff81e4d8c269d2a223c773f7d5c0fb0216690', "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: '2f88616c3cc07201c049d25ee032bd819d1f14f1', icon: "x", scale: component.getIconScale(this.scale) })));
+        const iconEl = (index.h("calcite-icon", { key: '536bc3560e1cb98bc9ec48c88396bf947b5ec341', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (index.h("button", { "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (index.h("button", { key: 'f1aa09c7c05fbc66df54e8e655f2fbad0e8b962c', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "chevron-up", scale: component.getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (index.h("button", { "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '12b3fd28215d661525be63f614411287aa08e0fb', icon: "chevron-up", scale: component.getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (index.h("button", { key: '3e57ba83119f351060ed012fe4332a56dfd991d4', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "chevron-down", scale: component.getIconScale(this.scale) })));
-        const numberButtonsVertical = (index.h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = index.h("div", { class: CSS.prefix }, this.prefixText);
-        const suffixText = index.h("div", { class: CSS.suffix }, this.suffixText);
-        const localeNumberInput = this.type === "number" ? (index.h("input", { accept: this.accept, "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.displayedValue,
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: 'daf34d239d12e945aa623ed5b36e8d17e9a2e5d6', icon: "chevron-down", scale: component.getIconScale(this.scale) })));
+        const numberButtonsVertical = (index.h("div", { key: '7301bb025d47c2137cfed412c1fb576fed9a2095', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = index.h("div", { key: '11dc889ef37e67ee0f0f73e54b7ce27eef7d88be', class: CSS.prefix }, this.prefixText);
+        const suffixText = index.h("div", { key: 'ddb9a1f7ebae815d2cf0d3c79ba3703f244c1c84', class: CSS.suffix }, this.suffixText);
+        const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null;
+        const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint");
+        const inputMode = this.el.inputMode || this.el.getAttribute("inputmode");
+        const localeNumberInput = this.type === "number" ? (index.h("input", { accept: this.accept, "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.displayedValue,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.setChildNumberElRef })) : null;
         const childEl = this.type !== "number"
             ? [
-                index.h(this.childElType, { accept: this.accept, "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
+                index.h(this.childElType, { accept: this.accept, "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, class: {
                         [CSS.editingEnabled]: this.editingEnabled,
                         [CSS.inlineChild]: !!this.inlineEditableEl,
-                    }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value,
+                    }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value,
                     // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
                     ref: this.setChildElRef }),
                 this.isTextarea ? (index.h("div", { class: CSS.resizeIconWrapper }, index.h("calcite-icon", { icon: "chevron-down", scale: component.getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (index.h(index.Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (index.h(index.Host, { key: 'd85f76e488d456eb0a7c2ae9bc7daf195463409a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '3289a4cad3353bf744476144c493b25b2fd21e55', disabled: this.disabled }, index.h("div", { key: '70c56455cf02bff933428c63499a4c05d49849e7', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, index.h("div", { class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { class: CSS.actionWrapper }, index.h("slot", { name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, index.h("div", { key: 'a6d9a32e41dd867c9f2284a16c55188c3d8024c7', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: 'dff205b764e3f8818a3ff8b2e68fbad387aab0b1', class: CSS.actionWrapper }, index.h("slot", { key: '1d10788964cace3ea9f87db3b67f1d51a174218d', name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
             ? numberButtonsVertical
             : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, index.h(form.HiddenFormInputSlot, { component: this })), this.validationMessage ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, index.h(form.HiddenFormInputSlot, { key: 'f551976332e2fb77ed861b2d744e67939e88c211', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "autofocus": ["handleGlobalAttributesChanged"],
+        "enterkeyhint": ["handleGlobalAttributesChanged"],
+        "inputmode": ["handleGlobalAttributesChanged"],
         "disabled": ["disabledWatcher"],
         "max": ["maxWatcher"],
         "min": ["minWatcher"],
@@ -690,9 +705,10 @@ const Input = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-Input.style = inputCss;
+Input.style = CalciteInputStyle0;
 
 const progressCss = ":host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background:var(--calcite-color-border-3)}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-color-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(600%, 0, 0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(-600%, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteProgressStyle0 = progressCss;
 
 const Progress = class {
     constructor(hostRef) {
@@ -707,7 +723,7 @@ const Progress = class {
         const isDeterminate = this.type === "determinate";
         const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
         const dir = dom.getElementDir(this.el);
-        return (index.h("div", { "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" }, index.h("div", { class: "track" }, index.h("div", { class: {
+        return (index.h("div", { key: 'a86d3c94f7c5d86a8267372b3d89a5227b0f550d', "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" }, index.h("div", { key: 'cf8ad842376e8713207892a53bc26fc7f3200bc2', class: "track" }, index.h("div", { key: '3a7fb572aa02dc1d515556589f8b90b77a6e383d', class: {
                 bar: true,
                 indeterminate: this.type === "indeterminate",
                 [resources.CSS_UTILITY.rtl]: dir === "rtl",
@@ -716,7 +732,7 @@ const Progress = class {
     }
     get el() { return index.getElement(this); }
 };
-Progress.style = progressCss;
+Progress.style = CalciteProgressStyle0;
 
 exports.calcite_input = Input;
 exports.calcite_progress = Progress;