@esri/calcite-components 5.1.0-next.24 → 5.1.0-next.25

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

@@ -1,6 +1,6 @@
 /// <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 { FlipPlacement, LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
 import type { Scale, Width } from "../interfaces.js";
 import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 
@@ -8,7 +8,7 @@ import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
  * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
  * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
- * @slot [trigger] - A slot for the element that triggers the component.
+ * @slot [trigger] - [deprecated] Use `referenceElement` property instead. A slot for the element that triggers the component.
  */
 export abstract class Dropdown extends LitElement {
   /**
@@ -68,6 +68,16 @@ export abstract class Dropdown extends LitElement {
    * @default "bottom-start"
    */
   accessor placement: LogicalPlacement;
+  /**
+   * The `referenceElement` is used to position the component according to its `placement` value.
+   *
+   * Setting the value to an `HTMLElement` is preferred so the component does not need to query the DOM.
+   *
+   * However, a string `id` of the reference element can also be used.
+   *
+   * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
+   */
+  accessor referenceElement: ReferenceElement | string | null;
   /**
    * Specifies the size of the component.
    *

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

@@ -13,6 +13,7 @@ import { g as getDimensionClass } from "../../chunks/dynamicClasses.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 useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const SLOTS = {
   trigger: "trigger"
 };
@@ -22,9 +23,11 @@ const CSS = {
   triggerContainer: "trigger-container"
 };
 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:inline-block}.wrapper{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{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .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}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content{max-height:45vh;width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const manager = referenceElementManager({ click: true, hover: true });
 class Dropdown extends LitElement {
   constructor() {
     super();
+    this.referenceElementController = useReferenceElement({ manager })(this);
     this.direction = useDirection();
     this.focusLastDropdownItem = false;
     this.activeItemIndex = -1;
@@ -33,6 +36,7 @@ class Dropdown extends LitElement {
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.onReferenceElementKeyDown = (event) => this.keyDownHandler(event);
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.topLayer = useTopLayer({
@@ -62,7 +66,7 @@ class Dropdown extends LitElement {
     this.listen("calciteInternalDropdownItemSelect", this.handleItemSelect);
   }
   static {
-    this.properties = { activeDescendantElement: [16, {}, { state: true }], closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { activeDescendantElement: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], referenceElement: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -70,6 +74,9 @@ class Dropdown extends LitElement {
   static {
     this.styles = styles;
   }
+  get referenceElementType() {
+    return this.referenceElement ? this.type : null;
+  }
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
@@ -85,7 +92,7 @@ class Dropdown extends LitElement {
     }, delayed);
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.referenceEl, options);
+    return this.focusSetter(() => this.referenceEl instanceof HTMLElement ? this.referenceEl : this.floatingEl, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -113,6 +120,14 @@ class Dropdown extends LitElement {
     if (changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
       this.handlePropsChange();
     }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
+    }
+  }
+  updated(changes) {
+    if (changes.has("referenceEl") && this.referenceElementType) {
+      connectFloatingUI(this);
+    }
   }
   loaded() {
     this.updateSelectedItems();
@@ -145,25 +160,25 @@ class Dropdown extends LitElement {
     this.updateGroupProps();
   }
   closeCalciteDropdownOnClick(event) {
-    if (this.disabled || !this.open || event.composedPath().includes(this.el)) {
+    if (this.referenceElementType || this.disabled || !this.open || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown();
   }
   closeCalciteDropdownOnOpenEvent(event) {
-    if (event.composedPath().includes(this.el)) {
+    if (this.referenceElementType || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown();
   }
   pointerEnterHandler() {
-    if (this.disabled || this.type !== "hover") {
+    if (this.referenceElementType || this.disabled || this.type !== "hover") {
       return;
     }
     this.open = true;
   }
   pointerLeaveHandler() {
-    if (this.disabled || this.type !== "hover") {
+    if (this.referenceElementType || this.disabled || this.type !== "hover") {
       return;
     }
     this.closeCalciteDropdown();
@@ -215,7 +230,7 @@ class Dropdown extends LitElement {
   }
   setDropdownWidth() {
     const { referenceEl, scrollerEl } = this;
-    if (!scrollerEl || !referenceEl) {
+    if (!scrollerEl || !(referenceEl instanceof HTMLElement)) {
       return;
     }
     scrollerEl.style.minWidth = `${referenceEl.clientWidth}px`;
@@ -251,7 +266,9 @@ class Dropdown extends LitElement {
     this.topLayer.hide();
   }
   setReferenceEl(el) {
-    updateRefObserver(this.resizeObserver, this.referenceEl, el);
+    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : null;
+    const nextReferenceEl = el instanceof HTMLElement ? el : null;
+    updateRefObserver(this.resizeObserver, previousReferenceEl, nextReferenceEl);
     this.referenceEl = el;
     connectFloatingUI(this);
   }
@@ -260,7 +277,7 @@ class Dropdown extends LitElement {
     connectFloatingUI(this);
   }
   keyDownHandler(event) {
-    if (!event.composedPath().includes(this.referenceEl)) {
+    if (!(this.referenceEl instanceof HTMLElement) || !event.composedPath().includes(this.referenceEl)) {
       return;
     }
     const { defaultPrevented, key } = event;
@@ -413,7 +430,7 @@ class Dropdown extends LitElement {
       return;
     }
     const relatedTarget = event.relatedTarget;
-    if (relatedTarget && (this.el.contains(relatedTarget) || this.referenceEl != null && this.referenceEl.contains(relatedTarget))) {
+    if (relatedTarget && (this.el.contains(relatedTarget) || this.referenceEl != null && this.referenceEl instanceof HTMLElement && this.referenceEl.contains(relatedTarget))) {
       return;
     }
     this.closeCalciteDropdown();
@@ -426,10 +443,10 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div><div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
-    })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl ? [this.referenceEl] : void 0} class=${safeClassMap({
+    })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl instanceof HTMLElement ? [this.referenceEl] : void 0} class=${safeClassMap({
       [CSS.content]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: open

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

@@ -8,7 +8,6 @@ import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lum
 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";
-import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
 import { S as SLOTS$1 } from "../../chunks/resources8.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { g as guid } from "../../chunks/guid.js";
@@ -16,6 +15,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useSortable } from "../../chunks/useSortable.js";
 const CSS = {
   container: "container",
   table: "table",
@@ -47,6 +47,7 @@ class List extends LitElement {
       this.updateListItemsDebounced();
     });
     this.cancelable = useCancelable()(this);
+    this.sortable = useSortable()(this);
     this.updateListItemsDebounced = debounce(this.updateListItems, DEBOUNCE.nextTick);
     this.visibleItems = [];
     this.willFilterEmit = false;
@@ -154,7 +155,6 @@ class List extends LitElement {
     super.disconnectedCallback();
     this.disconnectObserver();
     this.unobserveFilterRow();
-    disconnectSortableComponent(this);
   }
   updateListItems() {
     this.updateGroupItems();
@@ -342,7 +342,7 @@ class List extends LitElement {
     if (defaultSlotEl) {
       updateListItemChildren(defaultSlotEl);
     }
-    connectSortableComponent(this);
+    this.sortable.reset();
   }
   onGlobalDragStart() {
     this.disconnectObserver();

package/dist/components/calcite-list/interfaces.d.ts

@@ -1,11 +1,7 @@
-import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { DragDetail } from "../../controllers/useSortable.js";
 import type { ListItem } from "../calcite-list-item/customElement.js";
 import type { List } from "./customElement.js";
 
 export type ListDisplayMode = "flat" | "nested";
 
-export interface ListDragDetail extends DragDetail {
-  toEl: List;
-  fromEl: List;
-  dragEl: ListItem;
-}
+export type ListDragDetail = DragDetail<List, List, ListItem>;

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

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { s as slotChangeHasAssignedElement, v as getFirstTabbable } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, y as getFirstTabbable } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { l as logger } from "../../chunks/logger.js";

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

@@ -5,7 +5,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { x as intersects } from "../../chunks/dom.js";
+import { z as intersects } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {

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

@@ -9,11 +9,12 @@ import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { u as useReferenceElement, F as FloatingArrow, r as referenceElementManager } from "../../chunks/useReferenceElement.js";
+import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 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 { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container",

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 { 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"

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

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as guid } from "../../chunks/guid.js";
-import { j as isPrimaryPointerButton, x as intersects } from "../../chunks/dom.js";
+import { j as isPrimaryPointerButton, z as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { i as isActivationKey } from "../../chunks/key.js";

package/dist/components/calcite-sortable-list/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Layout } from "../interfaces.js";
-import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { DragDetail } from "../../controllers/useSortable.js";
 
 /**
  * @deprecated Use the `calcite-block-group` component instead.

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

@@ -3,10 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
 import { i as focusElement } from "../../chunks/dom.js";
 import { l as logger } from "../../chunks/logger.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useSortable } from "../../chunks/useSortable.js";
 const CSS = {
   container: "container",
   containerHorizontal: "container--horizontal",
@@ -21,6 +21,7 @@ class SortableList extends LitElement {
     this.mutationObserver = createObserver("mutation", () => {
       this.setUpSorting();
     });
+    this.sortable = useSortable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.handleSelector = "calcite-handle";
@@ -50,7 +51,6 @@ class SortableList extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectSortableComponent(this);
     this.endObserving();
   }
   calciteHandleNudgeNextHandler(event) {
@@ -110,7 +110,7 @@ class SortableList extends LitElement {
   }
   setUpSorting() {
     this.items = Array.from(this.el.children);
-    connectSortableComponent(this);
+    this.sortable.reset();
   }
   beginObserving() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });

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

@@ -7,8 +7,9 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
-import { u as useReferenceElement, F as FloatingArrow, r as referenceElementManager } from "../../chunks/useReferenceElement.js";
+import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container"

package/dist/controllers/useSortable.d.ts

@@ -0,0 +1,7 @@
+import type { SortableEvent } from "sortablejs";
+
+export interface DragDetail<To extends HTMLElement = HTMLElement, From extends HTMLElement = HTMLElement, Drag extends HTMLElement = HTMLElement> extends Pick<SortableEvent, "newIndex" | "oldIndex"> {
+  toEl: To;
+  fromEl: From;
+  dragEl: Drag;
+}