@esri/calcite-components 5.1.0-next.7 → 5.1.0-next.8

package/dist/chunks/useForm.js

@@ -0,0 +1,165 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
+import { s as syncInputDelegate, i as isSupportedType } from "./input.js";
+const componentsWithInputEvent = [
+  "calcite-input",
+  "calcite-input-number",
+  "calcite-input-text",
+  "calcite-text-area"
+];
+function getClearValidationEventName(componentTag) {
+  const componentTagCamelCase = uncapitalize(kebabToPascal(componentTag));
+  return `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
+}
+function displayValidationMessage(component, { status, message, icon }) {
+  if ("status" in component) {
+    component.status = status;
+  }
+  if ("validationIcon" in component && typeof component.validationIcon !== "string") {
+    component.validationIcon = icon;
+  }
+  if ("validationMessage" in component && !component.validationMessage) {
+    component.validationMessage = message;
+  }
+}
+function syncInternalInput(component, input) {
+  const { disabled, required } = component;
+  input.disabled = disabled;
+  input.required = !!required;
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+  } else if (isInputComponent(component, input)) {
+    syncInputDelegate(input.type, component, input);
+  }
+}
+function isCheckable(component) {
+  return "checked" in component;
+}
+function isInputComponent(component, input) {
+  return component && isSupportedType(input.type);
+}
+const useForm = (options) => {
+  return makeGenericController((component, controller) => {
+    let defaultValueDirty = false;
+    let defaultCheckedDirty = false;
+    let inputDelegate;
+    let lastAssociatedForm = null;
+    if (options.inputType) {
+      inputDelegate = document.createElement("input");
+      inputDelegate.type = options.inputType;
+    }
+    function invalidFormHandler(event) {
+      event?.preventDefault();
+    }
+    function onFormReset() {
+      if ("status" in component) {
+        component.status = "idle";
+      }
+      if ("validationIcon" in component) {
+        component.validationIcon = false;
+      }
+      if ("validationMessage" in component) {
+        component.validationMessage = "";
+      }
+      if (isCheckable(component)) {
+        component.checked = defaultCheckedDirty ? component.defaultChecked : component.checked;
+      }
+      component.value = defaultValueDirty ? component.defaultValue : component.value;
+      defaultValueDirty = false;
+      defaultCheckedDirty = false;
+    }
+    component.listen("luminaFormResetCallback", () => {
+      onFormReset();
+    });
+    component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+      if (form) {
+        form.addEventListener("invalid", invalidFormHandler, { capture: true });
+      } else {
+        lastAssociatedForm?.removeEventListener("invalid", invalidFormHandler, { capture: true });
+      }
+      lastAssociatedForm = form;
+    });
+    function handleInvalidInput() {
+      const validationMsg = inputDelegate?.validationMessage || "";
+      component.el.dispatchEvent(
+        // allows users to set custom validation messages
+        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
+      );
+      displayValidationMessage(component, {
+        message: validationMsg,
+        icon: true,
+        status: "invalid"
+      });
+      const clearValidationEvent = getClearValidationEventName(component.el.tagName.toLowerCase());
+      component.listen(
+        clearValidationEvent,
+        () => {
+          if ("status" in component) {
+            component.status = "idle";
+          }
+          if ("validationIcon" in component && (!component.validationIcon || component.validationIcon === true)) {
+            component.validationIcon = false;
+          }
+          if ("validationMessage" in component && component.validationMessage === validationMsg) {
+            component.validationMessage = "";
+          }
+        },
+        { once: true }
+      );
+    }
+    controller.onConnected(() => {
+      component.el.addEventListener("invalid", handleInvalidInput);
+    });
+    controller.onDisconnected(() => {
+      component.el.removeEventListener("invalid", handleInvalidInput);
+    });
+    controller.onUpdate((changes) => {
+      if (changes.has("value") && !defaultValueDirty) {
+        defaultValueDirty = true;
+        component.defaultValue = component.value;
+      }
+      if (isCheckable(component) && changes.has("checked") && !defaultCheckedDirty) {
+        defaultCheckedDirty = true;
+        component.defaultChecked = component.checked;
+      }
+      if (changes.has("value") || isCheckable(component) && changes.has("checked")) {
+        component.elementInternals.setFormValue(getFormValue());
+      }
+      if (inputDelegate) {
+        inputDelegate.value = component.value;
+        syncInternalInput(component, inputDelegate);
+        inputDelegate.checkValidity();
+        component.elementInternals.setValidity(inputDelegate.validity, inputDelegate.validationMessage);
+        if ("validity" in component) {
+          component.validity = component.elementInternals.validity;
+        }
+      }
+    });
+    function getFormValue() {
+      if (Array.isArray(component.value)) {
+        const formData = new FormData();
+        component.value.forEach((value) => formData.append(component.name, value));
+        return formData;
+      }
+      if (isCheckable(component)) {
+        if (component.checked) {
+          return component.defaultValue === void 0 && !defaultValueDirty && component.value === void 0 ? "on" : component.value;
+        }
+        return null;
+      }
+      return component.value;
+    }
+    return {
+      get active() {
+        return !!component.elementInternals.form;
+      },
+      requestSubmit: () => {
+        component.elementInternals.form?.requestSubmit();
+      }
+    };
+  });
+};
+export {
+  useForm as u
+};

package/dist/components/calcite-checkbox/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { Scale, Status } from "../interfaces.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-checkbox-size] - Specifies the component's height and width.

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

@@ -4,13 +4,13 @@ import { css, svg, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.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 = {
   toggle: "toggle",
   check: "check-svg"
@@ -21,6 +21,7 @@ class Checkbox extends LitElement {
     super();
     this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
     this.direction = useDirection();
+    this.formSupport = useForm({ inputType: "checkbox" })(this);
     this.indeterminatePath = "M13 8v1H3V8z";
     this.onLabelClick = () => {
       this.toggle();
@@ -58,6 +59,9 @@ class Checkbox extends LitElement {
   static {
     this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -67,15 +71,10 @@ class Checkbox extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
-  }
-  syncHiddenFormInput(input) {
-    input.type = "checkbox";
   }
   getPath() {
     return this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
@@ -108,7 +107,7 @@ class Checkbox extends LitElement {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} class=${safeClassMap({
       [CSS.toggle]: true,
       [CSS_UTILITY.rtl]: rtl
-    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.toggleRef)}><svg aria-hidden=true class=${safeClassMap(CSS.check)} viewBox="0 0 16 16">${svg`<path d=${this.getPath() ?? nothing} />`}</svg><slot></slot></div>${this.labelText && InternalLabel({ bottomSpacingDisabled: true, labelText: this.labelText, required: this.required, spacingInlineStart: true, tooltipText: this.messages.required }) || ""}${HiddenFormInputSlot({ component: this })}` });
+    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.toggleRef)}><svg aria-hidden=true class=${safeClassMap(CSS.check)} viewBox="0 0 16 16">${svg`<path d=${this.getPath() ?? nothing} />`}</svg><slot></slot></div>${this.labelText && InternalLabel({ bottomSpacingDisabled: true, labelText: this.labelText, required: this.required, spacingInlineStart: true, tooltipText: this.messages.required }) || ""}` });
   }
 }
 customElement("calcite-checkbox", Checkbox);

package/dist/components/calcite-combobox/customElement.d.ts

@@ -1,10 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { Scale, SelectionAppearance, SelectionMode, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../calcite-combobox-item/customElement.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 import type { SelectionDisplay } from "./interfaces.js";
 
 /**

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

@@ -12,7 +12,6 @@ import { useDirection } from "@arcgis/lumina/controllers";
 import { f as filter } from "../../chunks/filter.js";
 import { k as getElementWidth, l as getTextWidth, i as focusElement } from "../../chunks/dom.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, a as afterConnectDefaultValueSet, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
@@ -26,6 +25,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.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";
 import { I as IDS, C as CSS$1, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources5.js";
 import { h as hasActiveChildren, i as isSingleLike, g as getLabel, a as getItemAncestors, b as getItemChildren } from "../../chunks/utils2.js";
 const CSS = {
@@ -43,6 +43,9 @@ class Combobox extends LitElement {
     super();
     this.closeButtonRef = createRef();
     this.direction = useDirection();
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.selectAllComboboxItemRef = createRef();
     this.allSelectedIndicatorChipRef = createRef();
     this.cancelable = useCancelable()(this);
@@ -172,6 +175,9 @@ class Combobox extends LitElement {
   static {
     this.properties = { activeChipIndex: [16, {}, { state: true }], activeDescendant: [16, {}, { state: true }], activeItemIndex: [16, {}, { state: true }], compactSelectionDisplay: [16, {}, { state: true }], selectedHiddenChipsCount: [16, {}, { state: true }], selectedVisibleChipsCount: [16, {}, { state: true }], items: [16, {}, { state: true }], noMatchesFound: [16, {}, { state: true }], allowCustomValues: [7, {}, { reflect: true, type: Boolean }], clearDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], filterText: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filteredItems: [32, {}, { attribute: false, readOnly: true }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placeholderIcon: [3, { type: String }, { reflect: true }], placeholderIconFlipRtl: [7, {}, { reflect: true, type: Boolean }], placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectAllEnabled: [7, {}, { reflect: true, type: Boolean }], selectedItems: [0, {}, { attribute: false }], selectionDisplay: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [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 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -257,10 +263,6 @@ class Combobox extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
-    this.internalValueChangeFlag = true;
-    this.value = this.getValue();
-    this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     connectFloatingUI(this);
@@ -290,7 +292,6 @@ class Combobox extends LitElement {
     }
   }
   loaded() {
-    afterConnectDefaultValueSet(this, this.getValue());
     connectFloatingUI(this);
     this.updateItems();
     this.filterItems(this.filterText, false, false);
@@ -300,7 +301,6 @@ class Combobox extends LitElement {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
     disconnectLabel(this);
-    disconnectForm(this);
     disconnectFloatingUI(this);
   }
   emitComboboxChange() {
@@ -532,10 +532,9 @@ class Combobox extends LitElement {
         } else if (this.allowCustomValues && this.filterText) {
           this.addCustomChip(this.filterText, true);
           event.preventDefault();
-        } else if (!event.defaultPrevented) {
-          if (submitForm(this)) {
-            event.preventDefault();
-          }
+        } else if (!event.defaultPrevented && this.formSupport.active) {
+          event.preventDefault();
+          this.formSupport.requestSubmit();
         }
         break;
       case "Delete":
@@ -1134,7 +1133,7 @@ class Combobox extends LitElement {
       this.renderSelectedIndicatorChip(),
       this.renderSelectedIndicatorChipCompact(),
       this.renderAllSelectedIndicatorChip()
-    ] || ""}<label class=${safeClassMap(CSS$1.screenReadersOnly)} .htmlFor=${`${IDS.input(guid2)}`} .id=${`${IDS.label(guid2)}`}>${label}</label>${this.renderInput()}</div>`)}${!readOnly && isClearable ? keyed("close-button", XButton({ disabled: this.disabled, label: this.messages.clear, ref: this.closeButtonRef, scale: this.scale })) : null}${!readOnly && this.renderChevronIcon() || ""}</div><ul aria-labelledby=${`${IDS.label(guid2)}`} aria-multiselectable=true class=${safeClassMap(CSS$1.screenReadersOnly)} .id=${`${IDS.listbox(guid2)}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${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}` });
+    ] || ""}<label class=${safeClassMap(CSS$1.screenReadersOnly)} .htmlFor=${`${IDS.input(guid2)}`} .id=${`${IDS.label(guid2)}`}>${label}</label>${this.renderInput()}</div>`)}${!readOnly && isClearable ? keyed("close-button", XButton({ disabled: this.disabled, label: this.messages.clear, ref: this.closeButtonRef, scale: this.scale })) : null}${!readOnly && this.renderChevronIcon() || ""}</div><ul aria-labelledby=${`${IDS.label(guid2)}`} aria-multiselectable=true class=${safeClassMap(CSS$1.screenReadersOnly)} .id=${`${IDS.listbox(guid2)}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-combobox", Combobox);

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

@@ -17,7 +17,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 { a as syncHiddenFormInput } from "../../chunks/input.js";
 const CSS = {
   loader: "loader",
   clearButton: "clear-button",

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

@@ -17,7 +17,7 @@ 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 { a 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";

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

@@ -14,7 +14,7 @@ import { i as isValidNumber, n as numberStringFormatter, B as BigDecimal, p as p
 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 { a 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";

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

@@ -4,10 +4,9 @@ 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 { makeGenericController, useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
 import { b as setRequestedIcon } from "../../chunks/dom.js";
-import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
-import { a as syncInputDelegate, i as isSupportedType } from "../../chunks/input.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";
@@ -15,164 +14,6 @@ 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";
-const componentsWithInputEvent = [
-  "calcite-input",
-  "calcite-input-number",
-  "calcite-input-text",
-  "calcite-text-area"
-];
-function getClearValidationEventName(componentTag) {
-  const componentTagCamelCase = uncapitalize(kebabToPascal(componentTag));
-  return `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
-}
-function displayValidationMessage(component, { status, message, icon }) {
-  if ("status" in component) {
-    component.status = status;
-  }
-  if ("validationIcon" in component && typeof component.validationIcon !== "string") {
-    component.validationIcon = icon;
-  }
-  if ("validationMessage" in component && !component.validationMessage) {
-    component.validationMessage = message;
-  }
-}
-function syncInternalInput(component, input) {
-  const { disabled, required } = component;
-  input.disabled = disabled;
-  input.required = !!required;
-  if (isCheckable(component)) {
-    input.checked = component.checked;
-  } else if (isInputComponent(component, input)) {
-    syncInputDelegate(input.type, component, input);
-  }
-}
-function isCheckable(component) {
-  return "checked" in component;
-}
-function isInputComponent(component, input) {
-  return component && isSupportedType(input.type);
-}
-const useForm = (options) => {
-  return makeGenericController((component, controller) => {
-    let defaultValueDirty = false;
-    let defaultCheckedDirty = false;
-    let inputDelegate;
-    let lastAssociatedForm = null;
-    if (options.inputType) {
-      inputDelegate = document.createElement("input");
-      inputDelegate.type = options.inputType;
-    }
-    function invalidFormHandler(event) {
-      event?.preventDefault();
-    }
-    function onFormReset() {
-      if ("status" in component) {
-        component.status = "idle";
-      }
-      if ("validationIcon" in component) {
-        component.validationIcon = false;
-      }
-      if ("validationMessage" in component) {
-        component.validationMessage = "";
-      }
-      if (isCheckable(component)) {
-        component.checked = defaultCheckedDirty ? component.defaultChecked : component.checked;
-      }
-      component.value = defaultValueDirty ? component.defaultValue : component.value;
-      defaultValueDirty = false;
-      defaultCheckedDirty = false;
-    }
-    component.listen("luminaFormResetCallback", () => {
-      onFormReset();
-    });
-    component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
-      if (form) {
-        form.addEventListener("invalid", invalidFormHandler, { capture: true });
-      } else {
-        lastAssociatedForm?.removeEventListener("invalid", invalidFormHandler, { capture: true });
-      }
-      lastAssociatedForm = form;
-    });
-    function handleInvalidInput() {
-      const validationMsg = inputDelegate?.validationMessage || "";
-      component.el.dispatchEvent(
-        // allows users to set custom validation messages
-        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
-      );
-      displayValidationMessage(component, {
-        message: validationMsg,
-        icon: true,
-        status: "invalid"
-      });
-      const clearValidationEvent = getClearValidationEventName(component.el.tagName.toLowerCase());
-      component.listen(
-        clearValidationEvent,
-        () => {
-          if ("status" in component) {
-            component.status = "idle";
-          }
-          if ("validationIcon" in component && (!component.validationIcon || component.validationIcon === true)) {
-            component.validationIcon = false;
-          }
-          if ("validationMessage" in component && component.validationMessage === validationMsg) {
-            component.validationMessage = "";
-          }
-        },
-        { once: true }
-      );
-    }
-    controller.onConnected(() => {
-      component.el.addEventListener("invalid", handleInvalidInput);
-    });
-    controller.onDisconnected(() => {
-      component.el.removeEventListener("invalid", handleInvalidInput);
-    });
-    controller.onUpdate((changes) => {
-      if (changes.has("value") && !defaultValueDirty) {
-        defaultValueDirty = true;
-        component.defaultValue = component.value;
-      }
-      if (isCheckable(component) && changes.has("checked") && !defaultCheckedDirty) {
-        defaultCheckedDirty = true;
-        component.defaultChecked = component.checked;
-      }
-      if (changes.has("value") || isCheckable(component) && changes.has("checked")) {
-        component.elementInternals.setFormValue(getFormValue());
-      }
-      if (inputDelegate) {
-        inputDelegate.value = component.value;
-        syncInternalInput(component, inputDelegate);
-        inputDelegate.checkValidity();
-        component.elementInternals.setValidity(inputDelegate.validity, inputDelegate.validationMessage);
-        if ("validity" in component) {
-          component.validity = component.elementInternals.validity;
-        }
-      }
-    });
-    function getFormValue() {
-      if (Array.isArray(component.value)) {
-        const formData = new FormData();
-        component.value.forEach((value) => formData.append(component.name, value));
-        return formData;
-      }
-      if (isCheckable(component)) {
-        if (component.checked) {
-          return component.defaultValue === void 0 && !defaultValueDirty && component.value === void 0 ? "on" : component.value;
-        }
-        return null;
-      }
-      return component.value;
-    }
-    return {
-      get active() {
-        return !!component.elementInternals.form;
-      },
-      requestSubmit: () => {
-        component.elementInternals.form?.requestSubmit();
-      }
-    };
-  });
-};
 const CSS = {
   loader: "loader",
   clearable: "clearable",

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

@@ -10,7 +10,7 @@ import { d as decimalPlaces } from "../../chunks/math.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 { a as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isValidNumber } from "../../chunks/locale.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";

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

@@ -4,7 +4,7 @@ import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e as getRootNode } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
@@ -54,6 +54,11 @@ class List extends LitElement {
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.filterRowResizeObserver = createObserver("resize", () => this.updateFilterRowHeight());
+    this.setFilterContainerEl = (el) => {
+      this.filterContainerEl = el;
+      this.observeFilterRow();
+    };
     this.dataForFilter = [];
     this.hasFilterActionsEnd = false;
     this.hasFilterActionsStart = false;
@@ -61,6 +66,7 @@ class List extends LitElement {
     this.sortHandleMenuItems = [];
     this.hasContent = false;
     this.hasEmptyContent = false;
+    this.filterRowHeight = 0;
     this.disabled = false;
     this.dragEnabled = false;
     this.filterEnabled = false;
@@ -97,7 +103,7 @@ class List extends LitElement {
     this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], filterRowHeight: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -147,6 +153,7 @@ class List extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.disconnectObserver();
+    this.unobserveFilterRow();
     disconnectSortableComponent(this);
   }
   updateListItems() {
@@ -203,6 +210,19 @@ class List extends LitElement {
     this.updateSelectedItems();
     this.setUpSorting();
   }
+  unobserveFilterRow() {
+    this.filterRowResizeObserver?.disconnect();
+  }
+  observeFilterRow() {
+    this.unobserveFilterRow();
+    const filterRowEl = this.filterContainerEl;
+    if (filterRowEl) {
+      this.filterRowResizeObserver?.observe(filterRowEl);
+    }
+  }
+  updateFilterRowHeight() {
+    this.filterRowHeight = this.filterContainerEl?.clientHeight ?? 0;
+  }
   handleListItemChange() {
     this.willPerformFilter = true;
     this.updateListItemsDebounced();
@@ -662,7 +682,9 @@ class List extends LitElement {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerHeight]: this.listItems.length < 1 && loading
-    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
+    })} style=${safeStyleMap({
+      ["--calcite-internal-filter-enabled-offset"]: `${this.filterRowHeight}px`
+    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup ${ref(this.setFilterContainerEl)}><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
   }
   renderItemAriaLive() {
     const { messages, filteredItems, parentListEl, messages: { _lang: effectiveLocale }, numberingSystem } = this;

package/dist/components/calcite-list-item-group/customElement.js

@@ -8,7 +8,7 @@ const CSS = {
   container: "container",
   heading: "heading"
 };
-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{display:flex;flex-direction:column}:host([filter-hidden]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{margin:0;display:flex;flex:1 1 0%;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1));color:var(--calcite-list-color, var(--calcite-color-text-1))}.heading{font-weight:var(--calcite-font-weight-bold)}:host([scale=s]) .container{padding-inline:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-inline:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=m]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg);padding-block:var(--calcite-spacing-xl) var(--calcite-spacing-sm-plus, .625rem)}:host([scale=l]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md-plus, .875rem)}.heading{padding:0}:host([hidden]){display:none}[hidden]{display:none}`;
+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{display:flex;flex-direction:column}:host([filter-hidden]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{margin:0;display:flex;flex:1 1 0%;position:sticky;inset-block-start:var(--calcite-internal-filter-enabled-offset, 0);z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1));color:var(--calcite-list-color, var(--calcite-color-text-1))}.heading{font-weight:var(--calcite-font-weight-bold)}:host([scale=s]) .container{padding-inline:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-inline:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=m]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg);padding-block:var(--calcite-spacing-xl) var(--calcite-spacing-sm-plus, .625rem)}:host([scale=l]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md-plus, .875rem)}.heading{padding:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class ListItemGroup extends LitElement {
   constructor() {
     super(...arguments);