@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/chunks/resources7.js

@@ -1,17 +1,52 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { i as isTag } from "./resources3.js";
+const IDS = {
+  content: "content",
+  toggle: "toggle",
+  header: "header"
+};
 const CSS = {
+  actionsEnd: "actions-end",
   container: "container",
-  containerNone: "container--none-selection",
+  content: "content",
+  contentEnd: "content-end",
+  contentStart: "content-start",
+  description: "description",
+  hasSlottedContent: "has-slotted-content",
+  header: "header",
+  headerContainer: "header-container",
+  headerHasContent: "header--has-content",
+  headerDraggable: "header--draggable",
+  heading: "heading",
   icon: "icon",
-  iconEnd: "icon--end",
   iconStart: "icon--start",
-  itemContent: "content",
-  link: "link"
+  iconEnd: "icon--end",
+  iconEndContainer: "icon-end-container",
+  invalid: "invalid",
+  statusIcon: "status-icon",
+  title: "title",
+  toggle: "toggle",
+  toggleIcon: "toggle-icon",
+  valid: "valid"
+};
+const SLOTS = {
+  actionsEnd: "actions-end",
+  contentEnd: "content-end",
+  contentStart: "content-start",
+  children: "children",
+  headerMenuActions: "header-menu-actions"
 };
 const ICONS = {
-  check: "check"
+  expanded: "chevron-up",
+  collapsed: "chevron-down",
+  valid: "check-circle",
+  invalid: "exclamation-mark-triangle"
 };
+const isBlock = isTag("calcite-block");
 export {
   CSS as C,
-  ICONS as I
+  ICONS as I,
+  SLOTS as S,
+  IDS as a,
+  isBlock as i
 };

package/dist/chunks/resources8.js

@@ -1,19 +1,34 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { i as isTag } from "./resources3.js";
 const CSS = {
   container: "container",
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  content: "content",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  contentWrapper: "content-wrapper",
+  header: "header",
+  footer: "footer",
+  checkboxWrapper: "checkbox-wrapper",
+  checkboxWrapperDeprecated: "checkbox-wrapper-deprecated",
+  thumbnailWrapper: "thumbnail-wrapper",
+  headerTextContainer: "header-text-container",
+  cardContent: "card-content",
+  hasSlottedContent: "has-slotted-content"
 };
 const SLOTS = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  thumbnail: "thumbnail",
+  heading: "heading",
+  description: "description",
+  footerStart: "footer-start",
+  footerEnd: "footer-end"
 };
+const ICONS = {
+  selected: "check-square-f",
+  unselected: "square",
+  selectedSingle: "circle-f",
+  unselectedSingle: "circle"
+};
+const isCard = isTag("calcite-card");
 export {
   CSS as C,
-  SLOTS as S
+  ICONS as I,
+  SLOTS as S,
+  isCard as i
 };

package/dist/chunks/resources9.js

@@ -1,63 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { i as isTag } from "./resources3.js";
 const CSS = {
-  actionsEnd: "actions-end",
-  actionsStart: "actions-start",
-  description: "description",
+  title: "title",
   close: "close",
+  imageContainer: "image-container",
+  chipIcon: "chip-icon",
+  textSlotted: "text--slotted",
   container: "container",
-  containerHover: "container--hover",
-  containerBorder: "container--border",
-  containerBorderSelected: "container--border-selected",
-  containerHighlightSelected: "container--highlight-selected",
-  content: "content",
-  contentBottom: "content-bottom",
-  contentContainer: "content-container",
-  contentContainerHasCenterContent: "content-container--has-center-content",
-  contentContainerSelectable: "content-container--selectable",
-  contentContainerUnavailable: "content-container--unavailable",
-  contentContainerWrapper: "content-container-wrapper",
-  contentContainerWrapperBordered: "content-container-wrapper--bordered",
-  contentEnd: "content-end",
-  contentStart: "content-start",
-  customContent: "custom-content",
-  expandedContainer: "expanded-container",
-  dragContainer: "drag-container",
-  gridCell: "grid-cell",
-  icon: "icon",
-  nestedContainer: "nested-container",
-  nestedContainerExpanded: "nested-container--expanded",
-  label: "label",
-  row: "row",
-  selectionContainer: "selection-container",
-  selectionContainerSingle: "selection-container--single",
-  wrapper: "wrapper",
-  wrapperBordered: "wrapper--bordered"
+  imageSlotted: "image--slotted",
+  closable: "closable",
+  multiple: "multiple",
+  single: "single",
+  selectable: "selectable",
+  selectIcon: "select-icon",
+  selectIconActive: "select-icon--active",
+  nonInteractive: "non-interactive",
+  isCircle: "is-circle",
+  selected: "selected"
 };
 const SLOTS = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  content: "content",
-  contentBottom: "content-bottom",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  image: "image"
 };
-const MAX_COLUMNS = 0;
 const ICONS = {
-  selectedMultiple: "check-square-f",
-  selectedSingle: "circle-inset-large",
-  unselectedMultiple: "square",
-  unselectedSingle: "circle",
-  collapsedLTR: "chevron-right",
-  collapsedRTL: "chevron-left",
-  open: "chevron-down",
-  blank: "blank",
-  close: "x"
+  close: "x",
+  checkedSingle: "circle-f",
+  uncheckedMultiple: "square",
+  checkedMultiple: "check-square-f"
 };
-const activeCellTestAttribute = "data-test-active";
+const isChip = isTag("calcite-chip");
 export {
   CSS as C,
   ICONS as I,
-  MAX_COLUMNS as M,
   SLOTS as S,
-  activeCellTestAttribute as a
+  isChip as i
 };

package/dist/chunks/responsive.js

@@ -1,7 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { d as calciteContainerSizeWidthXxs, e as calciteContainerSizeWidthXs, f as calciteContainerSizeWidthSm, g as calciteContainerSizeWidthMd } from "./global.js";
+import { calciteContainerSizeWidthXxs, calciteContainerSizeWidthXs, calciteContainerSizeWidthSm, calciteContainerSizeWidthMd, calciteContainerSizeWidthLg } from "@esri/calcite-design-tokens/dist/es6/global.js";
 const breakpoints = {
   width: {
+    large: cssLengthToNumber(calciteContainerSizeWidthLg.max),
     medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),
     small: cssLengthToNumber(calciteContainerSizeWidthSm.max),
     xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),
@@ -9,7 +10,7 @@ const breakpoints = {
   }
 };
 function cssLengthToNumber(length) {
-  return parseInt(length);
+  return parseInt(length, 10);
 }
 export {
   breakpoints as b

package/dist/chunks/runtime.js

@@ -4,17 +4,14 @@ import { makeRuntime } from "@arcgis/lumina";
 import { isServer } from "lit";
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";
-const lightMode = "calcite-mode-light";
 const CSS_UTILITY = {
-  autoMode,
-  darkMode,
-  lightMode,
   rtl: "calcite--rtl",
   calciteAnimate: "calcite-animate",
   calciteAnimateInUp: "calcite-animate__in-up",
   calciteAnimateInDown: "calcite-animate__in-down",
   calciteAnimateInRight: "calcite-animate__in-right",
-  calciteAnimateInLeft: "calcite-animate__in-left"
+  calciteAnimateInLeft: "calcite-animate__in-left",
+  screenReaderText: "screen-reader-text"
 };
 const DEBOUNCE = {
   filter: 250,
@@ -43,6 +40,51 @@ function initModeChangeEvent() {
     attributeFilter: ["class"]
   });
 }
+const loggedDeprecations = /* @__PURE__ */ new Set();
+const logLevels = {
+  trace: 0,
+  debug: 1,
+  info: 2,
+  warn: 4,
+  error: 8,
+  off: 10
+};
+function willLog(level) {
+  return level !== "off" && logLevels[level] >= logLevels[getConfig().logLevel];
+}
+function forwardToConsole(level, ...data) {
+  if (!willLog(level)) {
+    return;
+  }
+  const badgeTemplate = "%ccalcite";
+  const badgeStyle = "background: #007AC2; color: #fff; border-radius: 4px; padding: 2px 4px;";
+  console[level](badgeTemplate, badgeStyle, ...data);
+}
+let listFormatter;
+const logger = {
+  debug: (message, ...data) => forwardToConsole("debug", message, ...data),
+  info: (message, ...data) => forwardToConsole("info", message, ...data),
+  warn: (message, ...data) => forwardToConsole("warn", message, ...data),
+  error: (message, ...data) => forwardToConsole("error", message, ...data),
+  trace: (message, ...data) => forwardToConsole("trace", message, ...data),
+  deprecated
+};
+function deprecated(context, { component, name, suggested, removalVersion }) {
+  const key = `${context}:${context === "component" ? "" : component}${name}`;
+  const removalVersionText = removalVersion === "future" ? `a future version` : `v${removalVersion}`;
+  if (loggedDeprecations.has(key)) {
+    return;
+  }
+  loggedDeprecations.add(key);
+  let message = "";
+  message = context === "component" ? `This component is deprecated and will be removed in ${removalVersionText}.` : `The [${name}] ${context} is deprecated and will be removed in ${removalVersionText}.`;
+  if (suggested) {
+    listFormatter = new Intl.ListFormat("en", { style: "long", type: "disjunction" });
+    message += ` Use ${listFormatter.format([suggested].flat().map((suggestion) => `"${suggestion}"`))} instead.`;
+  }
+  const composed = `[${component.el.tagName.toLocaleLowerCase().slice("calcite-".length)}] - ${message}`;
+  forwardToConsole("warn", composed);
+}
 let effectiveConfig = void 0;
 const defaultConfig = {
   focusTrapStack: [],
@@ -60,15 +102,15 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.2.0-next.1";
-const buildDate = "2026-06-09";
-const revision = "7580d5727";
+const version = "5.2.0-next.100";
+const buildDate = "2026-10-14";
+const revision = "e4544ef96";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
     return;
   }
-  console.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
+  logger.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
   Object.defineProperty(config, "version", {
     value: version,
     writable: false
@@ -85,16 +127,24 @@ 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.1/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.100/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const originalSetAssetPath = runtime.setAssetPath;
+runtime.setAssetPath = (path) => {
+  assetPathChanged = true;
+  return originalSetAssetPath.call(runtime, path);
+};
+let assetPathChanged = false;
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,
   DEBOUNCE as D,
-  getConfig as a,
-  resizeShiftStep as b,
+  assetPathChanged as a,
+  getConfig as b,
   customElement as c,
-  resizeStep as d,
+  resizeShiftStep as d,
+  resizeStep as e,
   getAssetPath as g,
+  logger as l,
   runtime as r,
   setAssetPath as s
 };

package/dist/chunks/screen-reader.js

@@ -0,0 +1,6 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { css } from "lit";
+const styles = css`.screen-reader-text{position:absolute;inline-size:var(--calcite-border-width-sm);block-size:var(--calcite-border-width-sm);padding:0;margin:calc(-1 * var(--calcite-border-width-sm));overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}`;
+export {
+  styles as s
+};

package/dist/chunks/text.js

@@ -4,9 +4,6 @@ import { safeClassMap } from "@arcgis/lumina";
 const CSS = {
   textMatch: "text-match"
 };
-function capitalizeWord(word) {
-  return word.charAt(0).toUpperCase() + word.slice(1);
-}
 function highlightText({ text, pattern }) {
   if (!pattern || !text) {
     return text;
@@ -18,6 +15,5 @@ function highlightText({ text, pattern }) {
   return parts;
 }
 export {
-  capitalizeWord as c,
   highlightText as h
 };

package/dist/chunks/useFocusTrap.js

@@ -1,8 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { createFocusTrap } from "focus-trap";
-import { t as tabbableOptions, i as focusElement } from "./dom.js";
-import { a as getConfig } from "./runtime.js";
+import { t as tabbableOptions, f as focusElement } from "./dom.js";
+import { b as getConfig } from "./runtime.js";
 function getEffectiveContainerElements(targetEl, { focusTrapOptions }, extraContainers) {
   if (!focusTrapOptions?.extraContainers && !extraContainers) {
     return targetEl;

package/dist/chunks/{useSetFocus.js → useFocusable.js}

@@ -1,8 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { c as componentFocusable } from "./component.js";
-import { e as getRootNode, i as focusElement } from "./dom.js";
-const useSetFocus = () => {
+import { g as getRootNode, f as focusElement } from "./dom.js";
+const useFocusable = () => {
   return makeGenericController((component, controller) => {
     let abortController;
     function handleFocusOut() {
@@ -48,5 +48,5 @@ function toFocusConfig(focusTarget) {
   return isFocusOverride(focusTarget) ? focusTarget : { target: focusTarget };
 }
 export {
-  useSetFocus as u
+  useFocusable as u
 };

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 { z 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"];
@@ -35,6 +35,18 @@ function isSupportedType(type) {
 }
 const joinableValueTypes = ["text", "email", "search", "hidden", "tel", "url"];
 const allValid = Object.freeze({ validity: {}, validationMessage: "" });
+const validityFlagKeys = [
+  "badInput",
+  "customError",
+  "patternMismatch",
+  "rangeOverflow",
+  "rangeUnderflow",
+  "stepMismatch",
+  "tooLong",
+  "tooShort",
+  "typeMismatch",
+  "valueMissing"
+];
 function validate({
   component,
   input,
@@ -42,9 +54,10 @@ function validate({
 }) {
   if (!Array.isArray(value)) {
     if (component && input.type === "radio") {
-      let group = component.elementInternals.form?.elements[component.name];
-      if (group?.length > 0) {
-        group = Array.from(group).filter(
+      const item = component.elementInternals.form?.elements.namedItem(component.name);
+      if (item) {
+        const elements = "length" in item ? Array.from(item) : [item];
+        const group = elements.filter(
           (element) => element.tagName === component.el.tagName
         );
         const isRequired = group.some((radioTypeElement) => radioTypeElement.required);
@@ -107,8 +120,8 @@ function validateValue(inputDelegate, valueToValidate) {
 }
 function getValidityFlags(validityState) {
   const validityFlags = {};
-  for (const key in validityState) {
-    if (key !== "valid" && validityState[key]) {
+  for (const key of validityFlagKeys) {
+    if (validityState[key]) {
       validityFlags[key] = true;
     }
   }
@@ -240,9 +253,10 @@ const useForm = (options) => {
         () => {
           clearValidationMessage(component, validationMessage);
           if (inputDelegate?.type === "radio") {
-            let group = component.elementInternals.form?.elements[component.name];
-            if (group?.length > 0) {
-              group = Array.from(group).filter(
+            const item = component.elementInternals.form?.elements.namedItem(component.name);
+            if (item) {
+              const elements = "length" in item ? Array.from(item) : [item];
+              const group = elements.filter(
                 (element) => element.tagName === component.el.tagName
               );
               const others = group.filter((radioTypeElement) => radioTypeElement !== component.el);

package/dist/chunks/useInlineEdit.js

@@ -0,0 +1,65 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { safeClassMap } from "@arcgis/lumina";
+import { nothing, html } from "lit";
+import { ref } from "lit/directives/ref.js";
+const CSS = {
+  container: "inline-edit--container",
+  enableEditing: "enable-editing",
+  confirmChanges: "confirm-changes",
+  cancelEditing: "cancel-editing"
+};
+const InlineEditControls = ({ cancelEditingLabel, confirmChangesLabel, inlineEditing, enableEditingLabel, enableEditingButtonRef, loading, onCancelEditing, onConfirmChanges, onEnableEditing, scale, showControls }) => html`<div class=${safeClassMap(CSS.container)}>${!inlineEditing && html`<calcite-action .ariaLabel=${enableEditingLabel} class=${safeClassMap(CSS.enableEditing)} icon=pencil @click=${onEnableEditing} .scale=${scale} .text=${enableEditingLabel} title=${enableEditingLabel ?? nothing} type=button ${ref(enableEditingButtonRef)}></calcite-action>` || ""}${showControls && [
+  html`<calcite-action .ariaLabel=${confirmChangesLabel} class=${safeClassMap(CSS.confirmChanges)} .disabled=${loading} icon=check .loading=${loading} @click=${onConfirmChanges} .scale=${scale} .text=${confirmChangesLabel} title=${confirmChangesLabel ?? nothing} type=button></calcite-action>`,
+  html`<calcite-action .ariaLabel=${cancelEditingLabel} class=${safeClassMap(CSS.cancelEditing)} .disabled=${loading} icon=x @click=${onCancelEditing} .scale=${scale} .text=${cancelEditingLabel} title=${cancelEditingLabel ?? nothing} type=button></calcite-action>`
+] || ""}</div>`;
+class UseInlineEdit {
+  constructor(options) {
+    this.options = options;
+    this.valuePriorToEditing = "";
+  }
+  enable() {
+    this.valuePriorToEditing = this.options.getValue();
+    this.options.setInlineEditing(true);
+    requestAnimationFrame(() => {
+      this.options.setFocus();
+    });
+    this.options.emitEnableEditingChange();
+  }
+  disable() {
+    this.options.setInlineEditing(false);
+  }
+  cancelEditing() {
+    this.options.restoreValue(this.valuePriorToEditing);
+    this.disable();
+    this.options.emitCancel();
+    this.options.emitEnableEditingChange();
+  }
+  async confirm(confirm, setLoading) {
+    if (confirm) {
+      setLoading?.(true);
+      try {
+        await confirm();
+      } finally {
+        setLoading?.(false);
+      }
+    }
+    this.options.commitValue();
+    this.disable();
+    this.options.emitConfirm();
+    this.options.emitEnableEditingChange();
+  }
+}
+const inlineEditConverter = {
+  fromAttribute(value) {
+    return value === null ? false : value === "controls-disabled" ? value : true;
+  },
+  toAttribute(value) {
+    return value === false ? null : value === true ? "" : value;
+  }
+};
+export {
+  CSS as C,
+  InlineEditControls as I,
+  UseInlineEdit as U,
+  inlineEditConverter as i
+};

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 { i as isBefore, q as queryElementRoots, c as closestElementCrossShadowBoundary } 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
+};