@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.21

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

@@ -5,9 +5,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as setRequestedIcon, k as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
-import { c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { b as setRequestedIcon, j as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { n as numberKeys } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { i as isValidNumber, B as BigDecimal, n as numberStringFormatter, p as parseNumberString, s as sanitizeNumberString, a as addLocalizedTrailingDecimalZeros } from "../../chunks/locale.js";
@@ -17,7 +16,7 @@ import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { s as syncHiddenFormInput } from "../../chunks/input.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   loader: "loader",
   clearButton: "clear-button",
@@ -67,21 +66,15 @@ class Input extends LitElement {
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged);
     this.childRef = createRef();
     this.childNumberRef = createRef();
+    this.direction = useDirection();
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.inputWrapperRef = createRef();
-    this.onHiddenFormInputInput = (event) => {
-      if (event.target.name === this.name) {
-        this.setValue({
-          value: event.target.value,
-          origin: "direct"
-        });
-      }
-      this.setFocus();
-      event.stopPropagation();
-    };
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.slottedActionElDisabledInternally = false;
@@ -123,6 +116,9 @@ class Input extends LitElement {
   static {
     this.properties = { displayedValue: [16, {}, { state: true }], slottedActionElDisabledInternally: [16, {}, { state: true }], accept: 1, alignment: [3, {}, { reflect: true }], autocomplete: 1, clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], files: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], localeFormat: [5, {}, { type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], min: [11, {}, { reflect: true, type: Number }], minLength: [11, {}, { reflect: true, type: Number }], multiple: [5, {}, { type: Boolean }], name: [3, {}, { reflect: true }], numberButtonType: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [3, {}, { reflect: true }], suffixText: 1, type: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -159,8 +155,6 @@ class Input extends LitElement {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
     connectLabel(this);
-    connectForm(this);
-    this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   async load() {
     this.maxString = this.max?.toString();
@@ -194,13 +188,14 @@ class Input extends LitElement {
     if (changes.has("readOnly")) {
       this.stopNudging();
     }
+    if (changes.has("type") && (this.hasUpdated || this.type !== "text")) {
+      this.formSupport.overrideInputType(this.type);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     this.stopNudging();
-    this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   stopNudging() {
     window.clearInterval(this.nudgeNumberValueIntervalId);
@@ -232,10 +227,9 @@ class Input extends LitElement {
       this.clearInputValue(event);
       event.preventDefault();
     }
-    if (event.key === "Enter") {
-      if (submitForm(this)) {
-        event.preventDefault();
-      }
+    if (event.key === "Enter" && this.formSupport.active) {
+      event.preventDefault();
+      this.formSupport.requestSubmit();
     }
   }
   onLabelClick() {
@@ -448,9 +442,6 @@ class Input extends LitElement {
       this.nudgeNumberValue(direction, event);
     }
   }
-  syncHiddenFormInput(input) {
-    syncHiddenFormInput(this.type, this, input);
-  }
   setInputValue(newInputValue) {
     const target = this.type === "number" ? this.childNumberRef : this.childRef;
     if (target.value) {
@@ -514,7 +505,7 @@ class Input extends LitElement {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
     const inputClearButton = html`<button .ariaLabel=${this.messages.clear} class=${safeClassMap(CSS.clearButton)} .disabled=${this.disabled || this.readOnly} @click=${this.clearInputValue} tabindex=-1 title=${this.messages.clear ?? nothing} type=button><calcite-icon .icon=${ICONS.close} .scale=${getIconScale(this.scale)}></calcite-icon></button>`;
     const iconEl = html`<calcite-icon class=${safeClassMap(CSS.inputIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
@@ -546,7 +537,7 @@ class Input extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperRef)}>${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${localeNumberInput}${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}>${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${localeNumberInput}${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input", Input);

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

@@ -1,12 +1,12 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 import type { Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 import type { DatePicker } from "../calcite-date-picker/customElement.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-input-date-picker-actions-icon-color] - Specifies the component's actions icon color.
@@ -23,7 +23,7 @@ import type { DatePicker } from "../calcite-date-picker/customElement.js";
  * @cssproperty [--calcite-input-date-picker-calendar-current-day-text-color] - Specifies the text color of the component's calendar current day element.
  * @cssproperty [--calcite-input-date-picker-calendar-day-background-color] - Specifies the background color of the component's calendar day elements.
  * @cssproperty [--calcite-input-date-picker-calendar-day-background-color-hover] - Specifies the background color of the component's calendar day elements when hovered.
- * @cssproperty [--calcite-input-date-picker-calendar-day-current-text-color] - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-current-text-color] - [Deprecated] in v3.3.1, removal target v6.0.0 - Use `--calcite-input-date-picker-calendar-current-day-text-color` instead. Specifies the text color of current day of the component's date-picker.
  * @cssproperty [--calcite-input-date-picker-calendar-day-range-background-color] - Specifies the background color of the component's calendar selected day range.
  * @cssproperty [--calcite-input-date-picker-calendar-day-range-text-color] - Specifies the text color of the component's calendar selected day range.
  * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-selected] - Specifies the text color of component's calendar selected day.

package/dist/components/calcite-input-date-picker/customElement.js

@@ -3,10 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { l as datePartsFromISO, d as dateFromISO, b as dateFromRange, a as dateToISO, m as datePartsFromLocalizedString, o as dateFromLocalizedString, i as inRange } from "../../chunks/date.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { c as connectForm, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { n as numberKeys } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { g as getIconScale } from "../../chunks/component.js";
@@ -16,11 +16,11 @@ import { g as getValueAsDateRange, a as applyLocaleOverride, b as getLocaleData
 import { g as guid } from "../../chunks/guid.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host .menu-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}:host .menu-container:popover-open{display:block}:host .menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;box-shadow:var(--calcite-input-date-picker-shadow, var(--calcite-shadow-none))}:host .menu-container .calcite-floating-ui-anim{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-sm))}:host([scale=s]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-sm);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-lg))}:host([scale=m]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-md);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxl))}:host([scale=l]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-lg);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxxl))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-none));transform:translateZ(0)}.input-wrapper{position:relative}.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input-wrapper:focus-within~.input-wrapper .chevron-icon,.input-wrapper:active~.input-wrapper .chevron-icon,.input-wrapper:hover~.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-internal-date-picker-toggle-spacing)}:host([range]) .container{display:flex}:host([range]) .input-container{display:flex;flex:1 1 auto}:host([range]) .input-wrapper{flex:1 1 auto}.divider-container{display:flex;align-items:stretch;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}:host([layout=horizontal]) .divider-container{inline-size:var(--calcite-spacing-px)}.divider{display:inline-block;margin-block:var(--calcite-spacing-xxs);background-color:var(--calcite-input-date-picker-divider-color, var(--calcite-color-border-2));inline-size:var(--calcite-spacing-px)}:host([layout=vertical]) .divider-container{height:1px;width:100%;border-top-width:0px;border-bottom-width:0px;border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-none);padding-inline:var(--calcite-spacing-md)}:host([layout=vertical]) .divider-container .divider{margin-top:0;margin-bottom:0;height:1px;width:100%}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}.menu-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.menu-container{opacity:0;inset-block-start:0;left:0}}.menu-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.menu-container:popover-open{display:block}.menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.input .calcite-input__wrapper{margin-top:0}.vertical-chevron-container{display:flex;align-items:center;border-width:1px;border-style:solid;padding-inline:var(--calcite-spacing-md);background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input));border-inline-start-width:0}.vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.vertical-chevron-container calcite-icon:hover{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}:host([range][layout=vertical][scale=s]) .vertical-chevron-container,:host([range][layout=vertical][scale=s]) .divider-container{padding-inline:var(--calcite-spacing-sm)}:host([range][layout=vertical][scale=l]) .vertical-chevron-container,:host([range][layout=vertical][scale=l]) .divider-container{padding-inline:var(--calcite-spacing-lg)}.container:focus-within .vertical-chevron-container calcite-icon,.container:active .vertical-chevron-container calcite-icon,.container:hover .vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input{--calcite-input-text-background-color: var(--calcite-input-date-picker-background-color);--calcite-input-text-border-color: var(--calcite-input-date-picker-border-color);--calcite-input-text-corner-radius: var(--calcite-input-date-picker-corner-radius);--calcite-input-text-shadow: var(--calcite-input-date-picker-shadow);--calcite-input-text-icon-color: var(--calcite-input-date-picker-icon-color);--calcite-input-text-text-color: var(--calcite-input-date-picker-text-color);--calcite-input-text-placeholder-text-color: var(--calcite-input-date-picker-placeholder-text-color)}calcite-date-picker{--calcite-date-picker-border-color: var(--calcite-input-date-picker-calendar-border-color);--calcite-date-picker-corner-radius: var(--calcite-input-date-picker-calendar-corner-radius);--calcite-date-picker-range-calendar-divider-color: var(--calcite-input-date-picker-calendar-range-divider-color);--calcite-date-picker-week-header-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-header-action-background-color: var( --calcite-input-date-picker-calendar-actions-background-color );--calcite-date-picker-header-action-background-color-hover: var( --calcite-input-date-picker-calendar-actions-background-color-hover );--calcite-date-picker-header-action-background-color-press: var( --calcite-input-date-picker-calendar-actions-background-color-press );--calcite-date-picker-header-action-text-color: var(--calcite-input-date-picker-calendar-actions-text-color);--calcite-date-picker-header-action-text-color-press: var( --calcite-input-date-picker-calendar-actions-text-color-press );--calcite-date-picker-year-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-month-select-text-color: var(--calcite-input-date-picker-calendar-month-select-text-color);--calcite-date-picker-month-select-icon-color: var(--calcite-input-date-picker-calendar-icon-color);--calcite-date-picker-month-select-icon-color-hover: var(--calcite-input-date-picker-calendar-icon-color-hover);--calcite-date-picker-day-background-color: var(--calcite-input-date-picker-calendar-day-background-color);--calcite-date-picker-day-background-color-hover: var( --calcite-input-date-picker-calendar-day-background-color-hover );--calcite-date-picker-day-background-color-selected: var( --calcite-input-date-picker-calendar-selected-background-color );--calcite-date-picker-day-text-color: var(--calcite-input-date-picker-calendar-day-text-color);--calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-calendar-day-text-color-hover);--calcite-date-picker-day-text-color-selected: var(--calcite-input-date-picker-calendar-day-text-color-selected);--calcite-date-picker-current-day-text-color: var( --calcite-input-date-picker-calendar-current-day-text-color, var(--calcite-input-date-picker-calendar-day-current-text-color) );--calcite-date-picker-day-range-text-color: var(--calcite-input-date-picker-calendar-day-range-text-color);--calcite-date-picker-day-range-background-color: var( --calcite-input-date-picker-calendar-day-range-background-color );--calcite-date-picker-day-outside-range-background-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-background-color-hover );--calcite-date-picker-day-outside-range-text-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-text-color-hover )}.assistive-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width: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:.5rem}:host([scale=s]) .validation-container{padding-block-start:.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}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   assistiveText: "assistive-text",
@@ -72,6 +72,7 @@ class InputDatePicker extends LitElement {
     super();
     this.commonDateSeparators = [".", "-", "/"];
     this.dialogId = IDS.dialog(guid());
+    this.direction = useDirection();
     this.endInputRef = createRef();
     this.focusOnOpen = false;
     this.focusTrap = useFocusTrap({
@@ -93,6 +94,9 @@ class InputDatePicker extends LitElement {
         }
       }
     })(this);
+    this.formSupport = useForm({
+      inputType: "date"
+    })(this);
     this.transitionProp = "opacity";
     this.placeholderTextId = IDS.placeholder(guid());
     this.rangeStartValueChangedByUser = false;
@@ -148,6 +152,9 @@ class InputDatePicker extends LitElement {
   static {
     this.properties = { datePickerActiveDate: [16, {}, { state: true }], focusedInput: [16, {}, { state: true }], localeData: [16, {}, { state: true }], calendars: [11, {}, { type: Number, reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, labelText: 1, layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, name: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], proximitySelectionDisabled: [5, {}, { type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
   }
@@ -168,6 +175,7 @@ class InputDatePicker extends LitElement {
   async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,
@@ -210,7 +218,6 @@ class InputDatePicker extends LitElement {
       }
     }
     connectLabel(this);
-    connectForm(this);
     this.setFilteredPlacements();
     connectFloatingUI(this);
   }
@@ -262,7 +269,6 @@ class InputDatePicker extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     disconnectFloatingUI(this);
   }
   handleDisabledAndReadOnlyChange(value) {
@@ -387,9 +393,6 @@ class InputDatePicker extends LitElement {
     this.datePickerEl?.reset();
     this.topLayer.hide();
   }
-  syncHiddenFormInput(input) {
-    syncHiddenFormInput("date", this, input);
-  }
   blurHandler() {
     this.open = false;
   }
@@ -441,15 +444,31 @@ class InputDatePicker extends LitElement {
     }
     const targetHasSelect = event.composedPath().some((el) => el.tagName === "CALCITE-SELECT");
     if (key === "Enter") {
-      event.preventDefault();
+      const preCommitValue = this.value;
       this.commitValue();
-      if (this.shouldFocusRangeEnd()) {
-        this.endInputRef.value?.setFocus();
-      } else if (this.shouldFocusRangeStart()) {
-        this.startInputRef.value?.setFocus();
+      const focusRangeEnd = this.shouldFocusRangeEnd();
+      const focusRangeStart = !focusRangeEnd && this.shouldFocusRangeStart();
+      if (focusRangeEnd || focusRangeStart) {
+        event.preventDefault();
+        if (focusRangeEnd) {
+          this.endInputRef.value?.setFocus();
+        } else if (focusRangeStart) {
+          this.startInputRef.value?.setFocus();
+        }
+        return;
       }
-      if (submitForm(this)) {
+      if (this.open) {
         this.restoreInputFocus(true);
+        event.preventDefault();
+      } else {
+        const formActive = this.formSupport.active;
+        const handledKey = preCommitValue !== this.value || formActive;
+        if (handledKey) {
+          event.preventDefault();
+        }
+        if (formActive) {
+          this.formSupport.requestSubmit();
+        }
       }
     } else if ((key === "ArrowDown" || key === "ArrowUp") && !targetHasSelect) {
       this.open = true;
@@ -663,7 +682,7 @@ class InputDatePicker extends LitElement {
       [CSS.inputNoTopBorder]: this.layout === "vertical" && this.range,
       [CSS.inputNoLeftBorder]: this.layout === "horizontal" && this.range,
       [CSS.inputNoRightBorder]: this.layout === "vertical" && this.range
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${HiddenFormInputSlot({ component: this })}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderToggleIcon(open) {
     return html`<span class=${safeClassMap(CSS.toggleIcon)} tabindex=-1><calcite-icon class=${safeClassMap(CSS.chevronIcon)} .icon=${open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></span>`;

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

@@ -5,7 +5,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
  * @deprecated in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance="transparent"` instead.
- * @cssproperty [--calcite-input-message-spacing-value] - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component.
+ * @cssproperty [--calcite-input-message-spacing-value] - [Deprecated] in v3.2.0, removal target v6.0.0 - Use `--calcite-input-message-spacing` instead. Specifies the margin spacing at the top of the component.
  * @cssproperty [--calcite-input-message-spacing] - Specifies the component's top margin spacing.
  * @cssproperty [--calcite-input-message-icon-color] - Specifies the component's icon color.
  * @slot  - A slot for adding text.

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { d as setRequestedIcon } from "../../chunks/dom.js";
+import { b as setRequestedIcon } from "../../chunks/dom.js";
 const StatusIconDefaults = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",

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

@@ -1,10 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment, Scale, Status } from "../interfaces.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { InputPlacement } from "../calcite-input/interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-input-actions-background-color] - Specifies the background color of the component's `clearable` and `number-button-type` elements.

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

@@ -5,19 +5,18 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as setRequestedIcon, k as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
-import { c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { b as setRequestedIcon, j as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { n as numberKeys } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { i as isValidNumber, n as numberStringFormatter, B as BigDecimal, p as parseNumberString, s as sanitizeNumberString, a as addLocalizedTrailingDecimalZeros } from "../../chunks/locale.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   loader: "loader",
   clearButton: "clear-button",
@@ -57,21 +56,15 @@ class InputNumber extends LitElement {
     this.actionWrapperRef = createRef();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged);
     this.childNumberRef = createRef();
+    this.direction = useDirection();
+    this.formSupport = useForm({
+      inputType: "number"
+    })(this);
     this.inputWrapperRef = createRef();
-    this.onHiddenFormInputInput = (event) => {
-      if (event.target.name === this.name) {
-        this.setNumberValue({
-          value: event.target.value,
-          origin: "direct"
-        });
-      }
-      this.setFocus();
-      event.stopPropagation();
-    };
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.slottedActionElDisabledInternally = false;
@@ -112,6 +105,9 @@ class InputNumber extends LitElement {
   static {
     this.properties = { displayedValue: [16, {}, { state: true }], slottedActionElDisabledInternally: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], integer: [5, {}, { type: Boolean }], label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], localeFormat: [5, {}, { type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], min: [11, {}, { reflect: true, type: Number }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], numberButtonType: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -147,8 +143,6 @@ class InputNumber extends LitElement {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
     connectLabel(this);
-    connectForm(this);
-    this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   async load() {
     this.maxString = this.max?.toString();
@@ -191,9 +185,7 @@ class InputNumber extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     this.stopNudging();
-    this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   stopNudging() {
     window.clearInterval(this.nudgeNumberValueIntervalId);
@@ -225,10 +217,9 @@ class InputNumber extends LitElement {
       this.clearInputValue(event);
       event.preventDefault();
     }
-    if (event.key === "Enter") {
-      if (submitForm(this)) {
-        event.preventDefault();
-      }
+    if (event.key === "Enter" && this.formSupport.active) {
+      this.formSupport.requestSubmit();
+      event.preventDefault();
     }
   }
   onLabelClick() {
@@ -428,9 +419,6 @@ class InputNumber extends LitElement {
       this.nudgeNumberValue(direction, event);
     }
   }
-  syncHiddenFormInput(input) {
-    syncHiddenFormInput("number", this, input);
-  }
   setInputNumberValue(newInputValue) {
     if (!this.childNumberRef.value) {
       return;
@@ -513,7 +501,7 @@ class InputNumber extends LitElement {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
     const inputClearButton = html`<button .ariaLabel=${this.messages.clear} class=${safeClassMap(CSS.clearButton)} .disabled=${this.disabled || this.readOnly} @click=${this.clearInputValue} tabindex=-1 type=button><calcite-icon .icon=${ICONS.clear} .scale=${getIconScale(this.scale)}></calcite-icon></button>`;
     const iconEl = html`<calcite-icon class=${safeClassMap(CSS.inputIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
@@ -536,7 +524,7 @@ class InputNumber extends LitElement {
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText,
       [CSS.clearable]: this.isClearable
-    })} ${ref(this.inputWrapperRef)}>${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}>${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-number", InputNumber);

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { MutableValidityState } from "../../utils/form.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 import type { Alignment, Scale, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 

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

@@ -4,14 +4,13 @@ import { live } from "lit/directives/live.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as setRequestedIcon, g as getElementDir } from "../../chunks/dom.js";
-import { c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { b as setRequestedIcon } from "../../chunks/dom.js";
+import { u as useForm } from "../../chunks/useForm.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -43,22 +42,16 @@ class InputText extends LitElement {
     this.actionWrapperRef = createRef();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged);
     this.childRef = createRef();
+    this.direction = useDirection();
     this.inputWrapperRef = createRef();
-    this.onHiddenFormInputInput = (event) => {
-      if (event.target.name === this.name) {
-        this.setValue({
-          value: event.target.value,
-          origin: "direct"
-        });
-      }
-      this.setFocus();
-      event.stopPropagation();
-    };
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.interactiveContainer = useInteractive(this);
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
@@ -94,6 +87,9 @@ class InputText extends LitElement {
   static {
     this.properties = { slottedActionElDisabledInternally: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -123,8 +119,6 @@ class InputText extends LitElement {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
     connectLabel(this);
-    connectForm(this);
-    this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   async load() {
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
@@ -139,8 +133,6 @@ class InputText extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
-    this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
@@ -163,10 +155,9 @@ class InputText extends LitElement {
       this.clearInputTextValue(event);
       event.preventDefault();
     }
-    if (event.key === "Enter") {
-      if (submitForm(this)) {
-        event.preventDefault();
-      }
+    if (event.key === "Enter" && this.formSupport.active) {
+      this.formSupport.requestSubmit();
+      event.preventDefault();
     }
   }
   onLabelClick() {
@@ -227,9 +218,6 @@ class InputText extends LitElement {
       this.emitChangeIfUserModified();
     }
   }
-  syncHiddenFormInput(input) {
-    syncHiddenFormInput("text", this, input);
-  }
   setInputValue(newInputValue) {
     if (!this.childRef.value) {
       return;
@@ -261,7 +249,7 @@ class InputText extends LitElement {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
     const inputClearButton = html`<button .ariaLabel=${this.messages.clear} class=${safeClassMap(CSS.clearButton)} .disabled=${this.disabled || this.readOnly} @click=${this.clearInputTextValue} tabindex=-1 type=button><calcite-icon icon=x .scale=${getIconScale(this.scale)}></calcite-icon></button>`;
     const iconEl = html`<calcite-icon class=${safeClassMap(CSS.inputIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
@@ -277,7 +265,7 @@ class InputText extends LitElement {
       [CSS.clearable]: this.isClearable,
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperRef)}>${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.suffixText ? suffixText : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}>${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.suffixText ? suffixText : null}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-text", InputText);

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

@@ -1,12 +1,12 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HourFormat } from "../../utils/time.js";
 import type { Scale, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 import type { TimePicker } from "../calcite-time-picker/customElement.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-input-time-picker-background-color] - Specifies the component's background color.