@esri/calcite-components 5.2.0-next.23 → 5.2.0-next.25

package/dist/chunks/label.js

@@ -1,146 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { q as queryElementRoots, c as closestElementCrossShadowBoundary, p as isBefore } from "./dom.js";
-const labelClickEvent = "calciteInternalLabelClick";
-const labelConnectedEvent = "calciteInternalLabelConnected";
-const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
-const labelTagName = "calcite-label";
-const labelToLabelables = /* @__PURE__ */ new WeakMap();
-const onLabelClickMap = /* @__PURE__ */ new WeakMap();
-const onLabelConnectedMap = /* @__PURE__ */ new WeakMap();
-const onLabelDisconnectedMap = /* @__PURE__ */ new WeakMap();
-const unlabeledComponents = /* @__PURE__ */ new Set();
-const findLabelForComponent = (componentEl) => {
-  const { id } = componentEl;
-  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
-  if (forLabel) {
-    return forLabel;
-  }
-  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
-  if (!parentLabel || // labelable components within other custom elements are not considered labelable
-  hasAncestorCustomElements(parentLabel, componentEl)) {
-    return null;
-  }
-  return parentLabel;
-};
-function hasAncestorCustomElements(label, componentEl) {
-  let traversedElements;
-  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
-  const listener = ((event) => {
-    event.stopImmediatePropagation();
-    const composedPath = event.composedPath();
-    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
-  });
-  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
-  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
-  label.removeEventListener(customElementAncestorCheckEventType, listener);
-  const ancestorCustomElements = traversedElements.filter((el) => el !== componentEl && el !== label).filter((el) => el.tagName?.includes("-"));
-  return ancestorCustomElements.length > 0;
-}
-function connectLabel(component) {
-  if (!component) {
-    return;
-  }
-  const labelEl = findLabelForComponent(component.el);
-  if (labelEl && onLabelClickMap.has(labelEl) && labelEl === component.labelEl || !labelEl && unlabeledComponents.has(component)) {
-    return;
-  }
-  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
-  if (labelEl) {
-    component.labelEl = labelEl;
-    const labelables = labelToLabelables.get(labelEl) || [];
-    labelables.push(component);
-    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
-    if (!onLabelClickMap.has(component.labelEl)) {
-      onLabelClickMap.set(component.labelEl, onLabelClick);
-      component.labelEl.addEventListener(labelClickEvent, onLabelClick);
-    }
-    unlabeledComponents.delete(component);
-    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
-    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
-  } else if (!unlabeledComponents.has(component)) {
-    boundOnLabelDisconnected();
-    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  }
-}
-function disconnectLabel(component) {
-  if (!component) {
-    return;
-  }
-  unlabeledComponents.delete(component);
-  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  onLabelConnectedMap.delete(component);
-  onLabelDisconnectedMap.delete(component);
-  if (!component.labelEl) {
-    return;
-  }
-  const labelables = labelToLabelables.get(component.labelEl);
-  if (labelables.length === 1) {
-    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
-    onLabelClickMap.delete(component.labelEl);
-  }
-  labelToLabelables.set(
-    component.labelEl,
-    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder)
-  );
-  component.labelEl = void 0;
-}
-function sortByDOMOrder(a, b) {
-  return isBefore(a.el, b.el) ? -1 : 1;
-}
 function getLabelText(component) {
   return component.label || component.labelEl?.textContent?.trim() || "";
 }
-function onLabelClick(event) {
-  const labelClickTarget = event.detail.sourceEvent.target;
-  const labelables = labelToLabelables.get(this);
-  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
-  const labelableChildClicked = clickedLabelable && labelables.includes(clickedLabelable);
-  if (labelableChildClicked) {
-    return;
-  }
-  const firstLabelable = labelables[0];
-  if (firstLabelable.disabled) {
-    return;
-  }
-  firstLabelable.onLabelClick(event);
-}
-function onLabelConnected() {
-  if (unlabeledComponents.has(this)) {
-    connectLabel(this);
-  }
-}
-function onLabelDisconnected() {
-  unlabeledComponents.add(this);
-  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
-  onLabelConnectedMap.set(this, boundOnLabelConnected);
-  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
-}
-async function associateExplicitLabelToUnlabeledComponent(label) {
-  await label.componentOnReady();
-  const alreadyLabeled = labelToLabelables.has(label);
-  if (alreadyLabeled) {
-    return;
-  }
-  const forComponentEl = label.for && label.ownerDocument?.getElementById(label.for);
-  if (!forComponentEl) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    for (const labelable of unlabeledComponents) {
-      if (labelable.el === forComponentEl) {
-        connectLabel(labelable);
-        break;
-      }
-    }
-  });
-}
 export {
-  associateExplicitLabelToUnlabeledComponent as a,
-  labelDisconnectedEvent as b,
-  connectLabel as c,
-  disconnectLabel as d,
-  getLabelText as g,
-  labelConnectedEvent as l
+  getLabelText as g
 };

package/dist/chunks/runtime.js

@@ -61,9 +61,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.2.0-next.23";
-const buildDate = "2026-07-13";
-const revision = "bdd7acdb4";
+const version = "5.2.0-next.25";
+const buildDate = "2026-07-15";
+const revision = "5fad817a4";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -86,7 +86,7 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.23/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.25/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/useForm.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController, bypassReadOnly } from "@arcgis/lumina/controllers";
 import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
-import { r as isCalciteFocusable } from "./dom.js";
+import { p as isCalciteFocusable } from "./dom.js";
 import "lit";
 const minMaxStepTypes = ["date", "datetime-local", "month", "number", "range", "time", "week"];
 const patternTypes = ["email", "password", "search", "tel", "text", "url"];

package/dist/chunks/useLabel.js

@@ -0,0 +1,150 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+import { q as queryElementRoots, c as closestElementCrossShadowBoundary, r as isBefore } from "./dom.js";
+const useLabel = makeGenericController((component, controller) => {
+  controller.onConnected(() => {
+    connectLabel(component);
+  });
+  controller.onDisconnected(() => {
+    disconnectLabel(component);
+  });
+});
+const labelClickEvent = "calciteInternalLabelClick";
+const labelConnectedEvent = "calciteInternalLabelConnected";
+const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
+const labelTagName = "calcite-label";
+const labelToLabelables = /* @__PURE__ */ new WeakMap();
+const onLabelClickMap = /* @__PURE__ */ new WeakMap();
+const onLabelConnectedMap = /* @__PURE__ */ new WeakMap();
+const onLabelDisconnectedMap = /* @__PURE__ */ new WeakMap();
+const unlabeledComponents = /* @__PURE__ */ new Set();
+const findLabelForComponent = (componentEl) => {
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel || // labelable components within other custom elements are not considered labelable
+  hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
+};
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = ((event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  });
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements.filter((el) => el !== componentEl && el !== label).filter((el) => el.tagName?.includes("-"));
+  return ancestorCustomElements.length > 0;
+}
+function connectLabel(component) {
+  if (!component) {
+    return;
+  }
+  const labelEl = findLabelForComponent(component.el);
+  if (labelEl && onLabelClickMap.has(labelEl) && labelEl === component.labelEl || !labelEl && unlabeledComponents.has(component)) {
+    return;
+  }
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  if (labelEl) {
+    component.labelEl = labelEl;
+    const labelables = labelToLabelables.get(labelEl) || [];
+    labelables.push(component);
+    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
+    if (!onLabelClickMap.has(component.labelEl)) {
+      onLabelClickMap.set(component.labelEl, onLabelClick);
+      component.labelEl.addEventListener(labelClickEvent, onLabelClick);
+    }
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+  } else if (!unlabeledComponents.has(component)) {
+    boundOnLabelDisconnected();
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  }
+}
+function disconnectLabel(component) {
+  if (!component) {
+    return;
+  }
+  unlabeledComponents.delete(component);
+  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  onLabelConnectedMap.delete(component);
+  onLabelDisconnectedMap.delete(component);
+  if (!component.labelEl) {
+    return;
+  }
+  const labelables = labelToLabelables.get(component.labelEl);
+  if (labelables.length === 1) {
+    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
+    onLabelClickMap.delete(component.labelEl);
+  }
+  labelToLabelables.set(
+    component.labelEl,
+    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder)
+  );
+  component.labelEl = void 0;
+}
+function sortByDOMOrder(a, b) {
+  return isBefore(a.el, b.el) ? -1 : 1;
+}
+function onLabelClick(event) {
+  const labelClickTarget = event.detail.sourceEvent.target;
+  const labelables = labelToLabelables.get(this);
+  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
+  const labelableChildClicked = clickedLabelable && labelables.includes(clickedLabelable);
+  if (labelableChildClicked) {
+    return;
+  }
+  const firstLabelable = labelables[0];
+  if (firstLabelable.disabled) {
+    return;
+  }
+  firstLabelable.onLabelClick(event);
+}
+function onLabelConnected() {
+  if (unlabeledComponents.has(this)) {
+    connectLabel(this);
+  }
+}
+function onLabelDisconnected() {
+  unlabeledComponents.add(this);
+  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+  onLabelConnectedMap.set(this, boundOnLabelConnected);
+  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+}
+async function associateExplicitLabelToUnlabeledComponent(label) {
+  await label.componentOnReady();
+  const alreadyLabeled = labelToLabelables.has(label);
+  if (alreadyLabeled) {
+    return;
+  }
+  const forComponentEl = label.for && label.ownerDocument?.getElementById(label.for);
+  if (!forComponentEl) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    for (const labelable of unlabeledComponents) {
+      if (labelable.el === forComponentEl) {
+        connectLabel(labelable);
+        break;
+      }
+    }
+  });
+}
+export {
+  associateExplicitLabelToUnlabeledComponent as a,
+  labelDisconnectedEvent as b,
+  labelConnectedEvent as l,
+  useLabel as u
+};

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

@@ -8,7 +8,7 @@ import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -21,6 +21,7 @@ import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-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{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-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}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{width:100%;overflow-y:auto;box-shadow:var(--calcite-shadow-md);max-block-size:var(--calcite-autocomplete-menu-max-size-y, 45vh);color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media(forced-colors:active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const SLOTS = {
   contentBottom: "content-bottom",
@@ -55,6 +56,7 @@ class Autocomplete extends LitElement {
       inputType: "text"
     })(this);
     this.inputId = IDS.input(this.guid);
+    this.labelable = useLabel(this);
     this.listId = IDS.list(this.guid);
     this.messages = useT9n();
     this.transitionProp = "opacity";
@@ -143,7 +145,6 @@ class Autocomplete extends LitElement {
       childList: true,
       subtree: true
     });
-    connectLabel(this);
     this.getAllItemsDebounced();
     connectFloatingUI(this);
     this.cancelable.add(this.getAllItemsDebounced);
@@ -184,7 +185,6 @@ class Autocomplete extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   setFloatingElSize() {

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

@@ -5,7 +5,8 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { literal, html as html$1 } from "lit/static-html.js";
 import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -39,6 +40,7 @@ class Button extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.messages = useT9n();
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.hasContent = false;
     this.alignment = "center";
     this.appearance = "solid";
@@ -67,7 +69,6 @@ class Button extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.setupTextContentObserver();
-    connectLabel(this);
   }
   async load() {
     this.updateHasContent();
@@ -78,7 +79,6 @@ class Button extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    disconnectLabel(this);
     this.resizeObserver?.disconnect();
   }
   handleGlobalAttributesChanged() {

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

@@ -5,12 +5,13 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { 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";
+import { u as useLabel } from "../../chunks/useLabel.js";
 const CSS = {
   toggle: "toggle",
   check: "check-svg"
@@ -23,6 +24,7 @@ class Checkbox extends LitElement {
     this.direction = useDirection();
     this.formSupport = useForm({ inputType: "checkbox" })(this);
     this.indeterminatePath = "M13 8v1H3V8z";
+    this.labelable = useLabel(this);
     this.onLabelClick = () => {
       this.toggle();
     };
@@ -55,14 +57,6 @@ class Checkbox extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.toggleRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   getPath() {
     return this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
   }

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

@@ -13,9 +13,10 @@ 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 { g as guid } from "../../chunks/guid.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { i as isHidden, g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -91,6 +92,7 @@ class Combobox extends LitElement {
     this.internalValueChangeFlag = false;
     this.previousAllSelected = false;
     this.refreshingSelectionDisplay = false;
+    this.labelable = useLabel(this);
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.onLabelClick = () => {
       this.setFocus();
@@ -262,7 +264,6 @@ class Combobox extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    connectLabel(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     connectFloatingUI(this);
@@ -300,7 +301,6 @@ class Combobox extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   emitComboboxChange() {

package/dist/components/calcite-inline-editable/customElement.js

@@ -3,7 +3,8 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -36,6 +37,7 @@ class InlineEditable extends LitElement {
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.controls = false;
     this.disabled = false;
     this.loading = false;
@@ -73,14 +75,6 @@ class InlineEditable extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.inputEl, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   editingEnabledWatcher(newValue, oldValue) {
     if (this.inputEl) {
       this.inputEl.editingEnabled = newValue;

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

@@ -8,8 +8,9 @@ import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/
 import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
 import { b as setRequestedIcon, j as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { n as numberKeys } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { i as isValidNumber, B as BigDecimal, n as numberStringFormatter, p as parseNumberString, s as sanitizeNumberString, a as addLocalizedTrailingDecimalZeros } from "../../chunks/locale.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { U as UseInlineEditable, C as CSS$1, I as InlineEditableControls } from "../../chunks/useInlineEditable.js";
@@ -77,6 +78,7 @@ class Input extends LitElement {
       getValue: () => this.type === "file" ? this.childRef.value?.files ?? null : this.value
     })(this);
     this.inputWrapperRef = createRef();
+    this.labelable = useLabel(this);
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
@@ -181,7 +183,6 @@ class Input extends LitElement {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    connectLabel(this);
   }
   async load() {
     this.maxString = this.max?.toString();
@@ -221,7 +222,6 @@ class Input extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.stopNudging();
   }
   stopNudging() {

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

@@ -8,8 +8,9 @@ import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { l as datePartsFromISO, d as dateFromISO, a as dateToISO, b as dateFromRange, m as datePartsFromLocalizedString, o as dateFromLocalizedString, i as inRange } from "../../chunks/date.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { n as numberKeys } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { b as getSupportedNumberingSystem, c as getDateFormatSupportedLocale, n as numberStringFormatter } from "../../chunks/locale.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getMinMaxSource, a as getValueAsDateRange, b as applyLocaleOverride, c as getLocaleData } from "../../chunks/utils3.js";
@@ -95,6 +96,7 @@ class InputDatePicker extends LitElement {
     this.formSupport = useForm({
       inputType: "date"
     })(this);
+    this.labelable = useLabel(this);
     this.transitionProp = "opacity";
     this.placeholderTextId = IDS.placeholder(guid());
     this.rangeStartValueChangedByUser = false;
@@ -178,7 +180,6 @@ class InputDatePicker extends LitElement {
     if (open) {
       this.openHandler();
     }
-    connectLabel(this);
     this.setFilteredPlacements();
     connectFloatingUI(this);
   }
@@ -240,7 +241,6 @@ class InputDatePicker extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   handleDisabledAndReadOnlyChange(value) {

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

@@ -8,7 +8,8 @@ import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/
 import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
 import { b as setRequestedIcon, j as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { n as numberKeys } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { i as isValidNumber, n as numberStringFormatter, B as BigDecimal, p as parseNumberString, s as sanitizeNumberString, a as addLocalizedTrailingDecimalZeros } from "../../chunks/locale.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
@@ -96,6 +97,7 @@ class InputNumber extends LitElement {
         this.calciteInputNumberInlineEditableChange.emit();
       }
     });
+    this.labelable = useLabel(this);
     this.inlineEditableLoading = false;
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
@@ -173,7 +175,6 @@ class InputNumber extends LitElement {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    connectLabel(this);
   }
   async load() {
     this.maxString = this.max?.toString();
@@ -215,7 +216,6 @@ class InputNumber extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.stopNudging();
   }
   stopNudging() {

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

@@ -7,7 +7,8 @@ import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/
 import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
 import { b as setRequestedIcon } from "../../chunks/dom.js";
 import { u as useForm } from "../../chunks/useForm.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -81,6 +82,7 @@ class InputText extends LitElement {
         this.calciteInputTextInlineEditableChange.emit();
       }
     });
+    this.labelable = useLabel(this);
     this.inlineEditableLoading = false;
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
@@ -148,7 +150,6 @@ class InputText extends LitElement {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    connectLabel(this);
   }
   async load() {
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
@@ -160,10 +161,6 @@ class InputText extends LitElement {
       this.requestedIcon = setRequestedIcon({}, this.icon, "text");
     }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
   }