@esri/calcite-components 5.1.0-next.4 → 5.1.0-next.41

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

@@ -2,12 +2,10 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { k as isPrimaryPointerButton, y as isKeyboardTriggeredClick, q as queryElementRoots } from "../../chunks/dom.js";
-import { t as toAriaBoolean } from "../../chunks/aria.js";
-import { g as guid } from "../../chunks/guid.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { c as createObserver } from "../../chunks/observers.js";
@@ -16,100 +14,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { i as isActivationKey } from "../../chunks/key.js";
-const clickTolerance = 5;
-function isDrag({
-  startX,
-  startY,
-  endX,
-  endY
-}) {
-  const distance = Math.hypot(endX - startX, endY - startY);
-  return distance > clickTolerance;
-}
-class PopoverManager {
-  constructor() {
-    this.registeredElements = /* @__PURE__ */ new Map();
-    this.registeredElementCount = 0;
-    this.queryPopover = (composedPath) => {
-      const { registeredElements } = this;
-      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
-      return registeredElements.get(registeredElement);
-    };
-    this.togglePopovers = (event) => {
-      const composedPath = event.composedPath();
-      const togglePopover = this.queryPopover(composedPath);
-      if (togglePopover && !togglePopover.triggerDisabled) {
-        togglePopover.open = !togglePopover.open;
-      }
-      Array.from(this.registeredElements.values()).filter(
-        (popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover)
-      ).forEach((popover) => popover.open = false);
-    };
-    this.keyDownHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (event.key === "Escape") {
-        this.closeAllPopovers();
-      } else if (isActivationKey(event.key)) {
-        this.togglePopovers(event);
-      }
-    };
-    this.pointerDownHandler = (event) => {
-      if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
-        return;
-      }
-      const { clientX, clientY } = event;
-      this.pointerDownPosition = { x: clientX, y: clientY };
-    };
-    this.clickHandler = (event) => {
-      if (isKeyboardTriggeredClick(event) || event.defaultPrevented || this.pointerDownPosition && isDrag({
-        endY: event.clientY,
-        endX: event.clientX,
-        startY: this.pointerDownPosition.y,
-        startX: this.pointerDownPosition.x
-      })) {
-        return;
-      }
-      this.pointerDownPosition = void 0;
-      this.togglePopovers(event);
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  registerElement(referenceEl, popover) {
-    this.registeredElementCount++;
-    this.registeredElements.set(referenceEl, popover);
-    if (this.registeredElementCount === 1) {
-      this.addListeners();
-    }
-  }
-  unregisterElement(referenceEl) {
-    if (this.registeredElements.delete(referenceEl)) {
-      this.registeredElementCount--;
-    }
-    if (this.registeredElementCount === 0) {
-      this.removeListeners();
-    }
-  }
-  closeAllPopovers() {
-    Array.from(this.registeredElements.values()).forEach((popover) => popover.open = false);
-  }
-  addListeners() {
-    window.addEventListener("pointerdown", this.pointerDownHandler);
-    window.addEventListener("click", this.clickHandler);
-    window.addEventListener("keydown", this.keyDownHandler);
-  }
-  removeListeners() {
-    window.removeEventListener("pointerdown", this.pointerDownHandler);
-    window.removeEventListener("click", this.clickHandler);
-    window.removeEventListener("keydown", this.keyDownHandler);
-  }
-}
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container",
@@ -122,13 +27,14 @@ const CSS = {
   heading: "heading"
 };
 const defaultPopoverPlacement = "auto";
-const ARIA_CONTROLS = "aria-controls";
-const ARIA_EXPANDED = "aria-expanded";
 const styles = css`:host{display:contents}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-popup)}.position-container{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{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-popover-max-size-x, 100vw)}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-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}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]) .heading{padding:.5rem .75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host(:is([scale=s],[scale=m])){--calcite-internal-popover-close-spacing: var(--calcite-spacing-xs)}:host([scale=m]) .heading{padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-internal-popover-close-spacing: var(--calcite-spacing-sm)}:host([scale=l]) .heading{padding:1rem 1.25rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-popover-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-popover-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;border-block-end-color:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.heading{margin:0;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container{position:relative;display:flex;height:100%;flex-direction:row;flex-wrap:nowrap;border-radius:.25rem;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container.has-header{flex-direction:column}.content{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button{margin:auto;margin-inline-end:var(--calcite-internal-popover-close-spacing)}.close-button-container{display:flex;flex:0 0 auto}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}:host([hidden]){display:none}[hidden]{display:none}`;
-const manager = new PopoverManager();
+const manager = referenceElementManager({ click: true });
 class Popover extends LitElement {
   constructor() {
     super(...arguments);
+    this.referenceElementType = "click";
+    this.referenceElementController = useReferenceElement({ manager })(this);
+    this.direction = useDirection();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
@@ -142,8 +48,6 @@ class Popover extends LitElement {
         }
       }
     })(this);
-    this.guid = `calcite-popover-${guid()}`;
-    this.hasLoaded = false;
     this.mutationObserver = createObserver("mutation", () => this.focusTrap.updateContainerElements());
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
@@ -181,6 +85,7 @@ class Popover extends LitElement {
   async reposition(delayed = false) {
     const { referenceEl, placement, overlayPositioning, flipDisabled, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl, floatingEl } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,
@@ -204,7 +109,6 @@ class Popover extends LitElement {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
   }
   willUpdate(changes) {
     if (changes.has("flipPlacements")) {
@@ -216,23 +120,18 @@ class Popover extends LitElement {
     if (changes.has("offsetDistance") && (this.hasUpdated || this.offsetDistance !== defaultOffsetDistance) || changes.has("offsetSkidding") && (this.hasUpdated || this.offsetSkidding !== 0) || changes.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") || changes.has("placement") && (this.hasUpdated || this.placement !== defaultPopoverPlacement)) {
       this.reposition(true);
     }
-    if (changes.has("referenceElement")) {
-      this.referenceElementHandler();
-      if (!this.referenceElement && this.open) {
-        this.topLayer.hide();
-      }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
     }
   }
-  loaded() {
-    if (this.referenceElement && !this.referenceEl) {
-      this.setUpReferenceElement();
+  updated(changes) {
+    if (changes.has("referenceEl")) {
+      connectFloatingUI(this);
     }
-    this.hasLoaded = true;
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    this.removeReferences();
     disconnectFloatingUI(this);
   }
   flipPlacementsHandler() {
@@ -242,73 +141,14 @@ class Popover extends LitElement {
   openHandler() {
     toggleOpenClose(this);
     this.reposition(true);
-    this.setExpandedAttr();
-  }
-  referenceElementHandler() {
-    this.setUpReferenceElement();
-    this.reposition(true);
   }
   setFloatingEl(el) {
     this.floatingEl = el;
-    if (el) {
-      requestAnimationFrame(() => this.setUpReferenceElement());
-    }
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
     this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
   }
-  setUpReferenceElement(warn = true) {
-    this.removeReferences();
-    this.referenceEl = this.getReferenceElement();
-    connectFloatingUI(this);
-    const { el, referenceElement, referenceEl } = this;
-    if (warn && referenceElement && !referenceEl) {
-      console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
-        el
-      });
-    }
-    this.addReferences();
-  }
-  getId() {
-    return this.el.id || this.guid;
-  }
-  setExpandedAttr() {
-    const { referenceEl, open } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
-    }
-  }
-  addReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    const id = this.getId();
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_CONTROLS, id);
-    }
-    manager.registerElement(referenceEl, this.el);
-    this.setExpandedAttr();
-  }
-  removeReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("removeAttribute" in referenceEl) {
-      referenceEl.removeAttribute(ARIA_CONTROLS);
-      referenceEl.removeAttribute(ARIA_EXPANDED);
-    }
-    manager.unregisterElement(referenceEl);
-  }
-  getReferenceElement() {
-    const { referenceElement, el } = this;
-    return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
-  }
   hide() {
     this.open = false;
   }
@@ -350,7 +190,6 @@ class Popover extends LitElement {
     this.el.inert = hidden;
     this.el.ariaLabel = label;
     this.el.ariaLive = "polite";
-    setAttribute(this.el, "id", this.getId());
     this.el.role = "dialog";
     return html`<div class=${safeClassMap(CSS.positionContainer)} popover=manual ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [CSS.container]: true,

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

@@ -2,7 +2,7 @@
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 const styles = css`:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media(forced-colors:active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   track: "track",
@@ -12,6 +12,7 @@ const CSS = {
 class Progress extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.reversed = false;
     this.type = "determinate";
     this.value = 0;
@@ -25,7 +26,7 @@ class Progress extends LitElement {
   render() {
     const isDeterminate = this.type === "determinate";
     const barStyles = isDeterminate ? { width: `${this.value}%` } : {};
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     return html`<div .ariaLabel=${this.label || this.text} .ariaValueMax=${isDeterminate ? "100" : void 0} .ariaValueMin=${isDeterminate ? "0" : void 0} .ariaValueNow=${isDeterminate ? this.value : void 0} role=progressbar><div class=${safeClassMap(CSS.track)}><div class=${safeClassMap({
       [CSS.bar]: true,
       indeterminate: this.type === "indeterminate",

package/dist/components/calcite-radio-button/customElement.d.ts

@@ -54,7 +54,7 @@ export abstract class RadioButton extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /**

package/dist/components/calcite-radio-button/customElement.js

@@ -1,15 +1,183 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { css, nothing, html } from "lit";
+import { html, isServer, css, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
-import { g as getElementDir } from "../../chunks/dom.js";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from "../../chunks/dom.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 useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+const hiddenFormInputSlotName = "hidden-form-input";
+function isCheckable(component) {
+  return "checked" in component;
+}
+const onFormResetMap = /* @__PURE__ */ new WeakMap();
+const formComponentSet = /* @__PURE__ */ new WeakSet();
+function hasRegisteredFormComponentParent(form, formComponentEl) {
+  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(formComponentEl.parentElement, "[form]");
+  if (hasParentComponentWithFormIdSet) {
+    return true;
+  }
+  const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
+  let hasRegisteredFormComponentParent2 = false;
+  form.addEventListener(formComponentRegisterEventName, (event) => {
+    hasRegisteredFormComponentParent2 = event.composedPath().some((element) => formComponentSet.has(element));
+    event.stopPropagation();
+  }, { once: true });
+  formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
+    bubbles: true,
+    composed: true
+  }));
+  return hasRegisteredFormComponentParent2;
+}
+function getValidationComponent(el) {
+  if (el.nodeName === "CALCITE-RADIO-BUTTON") {
+    return closestElementCrossShadowBoundary(el, "calcite-radio-button-group");
+  }
+  return el;
+}
+function connectForm(component) {
+  const { el, value } = component;
+  const associatedForm = findAssociatedForm(component);
+  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {
+    return;
+  }
+  component.formEl = associatedForm;
+  component.defaultValue = value;
+  if (isCheckable(component)) {
+    component.defaultChecked = component.checked;
+  }
+  const boundOnFormReset = onFormReset.bind(component);
+  associatedForm.addEventListener("reset", boundOnFormReset);
+  onFormResetMap.set(component.el, boundOnFormReset);
+  formComponentSet.add(el);
+}
+function findAssociatedForm(component) {
+  const { el, form } = component;
+  return form ? queryElementRoots(el, { id: form }) : closestElementCrossShadowBoundary(el, "form");
+}
+function onFormReset() {
+  if ("status" in this) {
+    this.status = "idle";
+  }
+  if ("validationIcon" in this) {
+    this.validationIcon = false;
+  }
+  if ("validationMessage" in this) {
+    this.validationMessage = "";
+  }
+  if (isCheckable(this)) {
+    this.checked = this.defaultChecked;
+    return;
+  }
+  this.value = this.defaultValue;
+  this.onFormReset?.();
+}
+function disconnectForm(component) {
+  const { el, formEl } = component;
+  if (!formEl) {
+    return;
+  }
+  const boundOnFormReset = onFormResetMap.get(el);
+  formEl.removeEventListener("reset", boundOnFormReset);
+  onFormResetMap.delete(el);
+  component.formEl = null;
+  formComponentSet.delete(el);
+}
+const internalHiddenInputInputEvent = "calciteInternalHiddenInputInput";
+const hiddenInputInputHandler = (event) => {
+  event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));
+};
+const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("input", hiddenInputInputHandler);
+function syncHiddenFormInput(component) {
+  const { el, formEl, name, value } = component;
+  const { ownerDocument } = el;
+  if (isServer) {
+    return;
+  }
+  const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
+  if (!formEl || !name) {
+    inputs.forEach((input) => {
+      removeHiddenInputChangeEventListener(input);
+      input.remove();
+    });
+    return;
+  }
+  const values = Array.isArray(value) ? value : [value];
+  const extra = [];
+  const seen = /* @__PURE__ */ new Set();
+  inputs.forEach((input) => {
+    const valueMatch = values.find((val) => (
+      /* intentional non-strict equality check */
+      val == input.value
+    ));
+    if (valueMatch != null) {
+      seen.add(valueMatch);
+      defaultSyncHiddenFormInput(component, input, valueMatch);
+    } else {
+      extra.push(input);
+    }
+  });
+  let docFrag;
+  values.forEach((value2) => {
+    if (seen.has(value2)) {
+      return;
+    }
+    let input = extra.pop();
+    if (!input) {
+      input = ownerDocument.createElement("input");
+      input.ariaHidden = "true";
+      input.slot = hiddenFormInputSlotName;
+    }
+    if (!docFrag) {
+      docFrag = ownerDocument.createDocumentFragment();
+    }
+    docFrag.append(input);
+    input.addEventListener("input", hiddenInputInputHandler);
+    defaultSyncHiddenFormInput(component, input, value2);
+  });
+  if (docFrag) {
+    el.append(docFrag);
+  }
+  extra.forEach((input) => {
+    removeHiddenInputChangeEventListener(input);
+    input.remove();
+  });
+}
+function defaultSyncHiddenFormInput(component, input, value) {
+  const { defaultValue, disabled, form, name, required } = component;
+  input.defaultValue = defaultValue;
+  input.disabled = disabled;
+  input.name = name;
+  input.required = required;
+  input.tabIndex = -1;
+  if (form) {
+    input.setAttribute("form", form);
+  } else {
+    input.removeAttribute("form");
+  }
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+    input.defaultChecked = component.defaultChecked;
+    input.value = component.checked ? value || "on" : "";
+  } else {
+    input.value = value || "";
+  }
+  component.syncHiddenFormInput?.(input);
+  const validationComponent = getValidationComponent(component.el);
+  if (validationComponent && "validity" in validationComponent) {
+    for (const key in { ...input?.validity }) {
+      validationComponent.validity[key] = input.validity[key];
+    }
+  }
+}
+const HiddenFormInputSlot = ({ component }) => {
+  syncHiddenFormInput(component);
+  return html`<slot name=${hiddenFormInputSlotName}></slot>`;
+};
 const CSS = {
   container: "container",
   radio: "radio"
@@ -19,6 +187,7 @@ class RadioButton extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
@@ -196,7 +365,6 @@ class RadioButton extends LitElement {
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
     const { key } = event;
-    const { el } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
@@ -206,7 +374,7 @@ class RadioButton extends LitElement {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (this.direction === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -62,7 +62,7 @@ export abstract class RadioButtonGroup extends LitElement {
    * Sets focus on the fist focusable `calcite-radio-button` element in the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component has changed. */

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

@@ -1,6 +1,5 @@
 /// <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 { IconName } from "../calcite-icon/interfaces.js";
 
@@ -72,16 +71,16 @@ export abstract class Rating extends LitElement {
   /**
    * The component's current validation state.
    *
-   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
    */
-  get validity(): MutableValidityState;
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: number;
   /**
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's value changes. */

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

@@ -3,7 +3,6 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { html, css } from "lit";
 import { safeClassMap, LitElement, createEvent, stringOrBoolean, nothing, safeStyleMap } from "@arcgis/lumina";
-import { c as connectForm, d as disconnectForm, 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 { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -11,6 +10,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 { u as useForm } from "../../chunks/useForm.js";
 const StarIcon = ({ full, scale, partial }) => html`<calcite-icon class=${safeClassMap(partial ? void 0 : "icon")} .icon=${full ? "star-f" : "star"} .scale=${scale}></calcite-icon>`;
 const CSS = {
   fieldSet: "fieldset",
@@ -31,6 +31,12 @@ class Rating extends LitElement {
   constructor() {
     super();
     this.emit = false;
+    this.formSupport = useForm({
+      inputType: "number",
+      getValue: () => {
+        return this.value === 0 ? "" : this.value;
+      }
+    })(this);
     this.guid = IDS.host(guid());
     this.isKeyboardInteraction = true;
     this.labelElements = [];
@@ -45,26 +51,16 @@ class Rating extends LitElement {
     this.scale = "m";
     this.showChip = false;
     this.status = "idle";
-    this.validity = {
-      valid: false,
-      badInput: false,
-      customError: false,
-      patternMismatch: false,
-      rangeOverflow: false,
-      rangeUnderflow: false,
-      stepMismatch: false,
-      tooLong: false,
-      tooShort: false,
-      typeMismatch: false,
-      valueMissing: false
-    };
     this.calciteRatingChange = createEvent({ cancelable: false });
     this.listen("keydown", this.handleHostKeyDown);
     this.listen("pointerout", this.handleRatingPointerOut);
     this.listen("pointerover", this.handleRatingPointerOver);
   }
   static {
-    this.properties = { hoverValue: [16, {}, { state: true }], average: [11, {}, { reflect: true, type: Number }], count: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], showChip: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
+    this.properties = { hoverValue: [16, {}, { state: true }], average: [11, {}, { reflect: true, type: Number }], count: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], showChip: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.styles = styles;
@@ -87,7 +83,6 @@ class Rating extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   async load() {
     this.requestUpdate("value");
@@ -122,7 +117,6 @@ class Rating extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
   }
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
@@ -233,7 +227,7 @@ class Rating extends LitElement {
         average,
         partial
       })} data-value=${value ?? nothing} for=${id ?? nothing} @click=${this.handleLabelClick} @focus=${this.handleLabelFocus} @keydown=${this.handleLabelKeyDown} @pointerdown=${this.handleLabelPointerDown} @pointerover=${this.handleLabelPointerOver} tabindex=${tabIndex ?? nothing}><input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} .checked=${checked} class=${safeClassMap(CSS.visuallyHidden)} .disabled=${this.disabled || this.readOnly} id=${id ?? nothing} name=${this.guid ?? nothing} @change=${this.handleInputChange} tabindex=-1 type=radio .value=${live(value ?? "")}>${StarIcon({ full: selected || average || hovered, scale: this.scale })}${partial && html`<div class=${safeClassMap(CSS.fraction)} style=${safeStyleMap({ width: `${fraction * 100}%` })}>${StarIcon({ full: true, partial: true, scale: this.scale })}</div>` || ""}<span class=${safeClassMap(CSS.visuallyHidden)}>${this.messages.stars.replace("{num}", `${value}`)}</span></label>`;
-    })}${(this.count || this.average) && this.showChip ? html`<calcite-chip .label=${countString} .scale=${this.scale} .value=${countString}>${!!this.average && html`<span class=${safeClassMap(CSS.numberAverage)}>${this.average.toString()}</span>` || ""}${!!this.count && html`<span class=${safeClassMap(CSS.numberCount)}>(${countString})</span>` || ""}</calcite-chip>` : null}</fieldset>${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}</span>` });
+    })}${(this.count || this.average) && this.showChip ? html`<calcite-chip .label=${countString} .scale=${this.scale} .value=${countString}>${!!this.average && html`<span class=${safeClassMap(CSS.numberAverage)}>${this.average.toString()}</span>` || ""}${!!this.count && html`<span class=${safeClassMap(CSS.numberCount)}>(${countString})</span>` || ""}</calcite-chip>` : null}</fieldset>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}</span>` });
   }
 }
 customElement("calcite-rating", Rating);

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {
   scrim: "scrim",