@esri/calcite-components 5.2.0-next.2 → 5.2.0-next.21

package/dist/chunks/math.js

@@ -3,7 +3,7 @@ const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
 const decimalPlaces = (value) => {
   const match = ("" + value).match(decimalNumberRegex);
-  if (!match || parseInt(match[1]) === 0) {
+  if (!match || parseInt(match[1], 10) === 0) {
     return 0;
   }
   return Math.max(

package/dist/chunks/resources.js

@@ -3,7 +3,6 @@ const CSS = {
   button: "button",
   buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
-  indicatorText: "indicator-text",
   iconContainer: "icon-container",
   slotContainer: "slot-container",
   slotContainerHidden: "slot-container--hidden",

package/dist/chunks/resources12.js

@@ -0,0 +1,27 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+const CSS = {
+  container: "container",
+  hasSlottedContent: "has-slotted-content",
+  stepperItemContent: "stepper-item-content",
+  stepperItemDescription: "stepper-item-description",
+  stepperItemHeader: "stepper-item-header",
+  stepperItemHeading: "stepper-item-heading",
+  stepperItemHeaderText: "stepper-item-header-text",
+  stepperItemIcon: "stepper-item-icon",
+  stepperItemNumber: "stepper-item-number",
+  visuallyHidden: "visually-hidden"
+};
+const ICONS = {
+  circle: "circle",
+  circleF: "circleF",
+  exclamationMarkCircleF: "exclamationMarkCircleF",
+  checkCircleF: "checkCircleF"
+};
+function isStepperItem(el) {
+  return el?.tagName === "CALCITE-STEPPER-ITEM";
+}
+export {
+  CSS as C,
+  ICONS as I,
+  isStepperItem as i
+};

package/dist/chunks/responsive.js

@@ -9,7 +9,7 @@ const breakpoints = {
   }
 };
 function cssLengthToNumber(length) {
-  return parseInt(length);
+  return parseInt(length, 10);
 }
 export {
   breakpoints as b

package/dist/chunks/runtime.js

@@ -14,7 +14,8 @@ const CSS_UTILITY = {
   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,
@@ -60,9 +61,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.2.0-next.2";
-const buildDate = "2026-06-09";
-const revision = "9a357f907";
+const version = "5.2.0-next.21";
+const buildDate = "2026-07-13";
+const revision = "d01a1b6f3";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -85,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.2/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.21/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/useForm.js

@@ -42,9 +42,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);
@@ -240,9 +241,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/useSizeOverride.js

@@ -2338,7 +2338,7 @@ const interact = /* @__PURE__ */ getDefaultExportFromCjs(interact_minExports);
 function clampAndApplySize(axis, size, bounds, el) {
   const cssPropertyName = `${axis}-size`;
   if (size === void 0) {
-    return void 0;
+    return null;
   }
   if (size === null) {
     el.style.removeProperty(cssPropertyName);

package/dist/chunks/useSortable.js

@@ -15,12 +15,36 @@ function onGlobalDragEnd() {
   Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
 }
 const globalDragState = { active: false };
+const activeSortableComponentSet = /* @__PURE__ */ new Set();
+function syncGlobalDragState() {
+  const active = activeSortableComponentSet.size > 0;
+  if (globalDragState.active === active) {
+    return;
+  }
+  globalDragState.active = active;
+  if (active) {
+    onGlobalDragStart();
+    return;
+  }
+  onGlobalDragEnd();
+}
+function markDragActive(component) {
+  activeSortableComponentSet.add(component);
+  syncGlobalDragState();
+}
+function markDragInactive(component) {
+  activeSortableComponentSet.delete(component);
+  syncGlobalDragState();
+}
 function createSortable(component) {
   const dataIdAttr = "id";
   const { el, group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
   return Sortable.create(el, {
     dataIdAttr,
     swapThreshold: 0.5,
+    // Keep the fallback ghost out of nested list DOM updates during touch drag startup.
+    // Applied globally so all sortable hosts use the same stable fallback behavior.
+    fallbackOnBody: true,
     ...CSS,
     ...!!draggable && { draggable },
     ...!!group && {
@@ -59,14 +83,18 @@ function createSortable(component) {
     },
     handle,
     filter: `${handle}[disabled]`,
+    onChoose: () => {
+      markDragActive(component);
+    },
+    onUnchoose: () => {
+      markDragInactive(component);
+    },
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      globalDragState.active = true;
-      onGlobalDragStart();
+      markDragActive(component);
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      globalDragState.active = false;
-      onGlobalDragEnd();
+      markDragInactive(component);
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onSort: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
@@ -103,6 +131,8 @@ const useSortable = () => {
       setUpSortable(component);
     });
     controller.onDisconnected(() => {
+      sortableComponentSet.delete(component);
+      markDragInactive(component);
       tearDownSortable(component);
     });
     return {

package/dist/chunks/useTime.js

@@ -55,9 +55,10 @@ function formatTimePart(number, minLength) {
   if (number >= 10) {
     return numberAsString;
   }
+  return;
 }
 function fractionalSecondPartToMilliseconds(fractionalSecondPart) {
-  return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 1e-3).toFixed(3));
+  return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 1e-3).toFixed(3), 10);
 }
 function getLocaleHourFormat(locale) {
   const options = { locale };
@@ -166,7 +167,7 @@ function getMeridiem(hour) {
   if (!isValidNumber(hour)) {
     return null;
   }
-  const hourAsNumber = parseInt(hour);
+  const hourAsNumber = parseInt(hour, 10);
   return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
 }
 function getMeridiemOrder(locale) {
@@ -195,9 +196,9 @@ function isValidTime(value) {
   if (!hour || !minute) {
     return false;
   }
-  const hourAsNumber = parseInt(hour);
-  const minuteAsNumber = parseInt(minute);
-  const secondAsNumber = parseInt(second ?? "");
+  const hourAsNumber = parseInt(hour, 10);
+  const minuteAsNumber = parseInt(minute, 10);
+  const secondAsNumber = parseInt(second ?? "", 10);
   const hourValid = isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
   const minuteValid = isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
   const secondValid = isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
@@ -243,7 +244,7 @@ function localizeTimePart({
         numberingSystem
       };
       const localizedZero = numberStringFormatter.localize("0");
-      if (parseInt(value) === 0) {
+      if (parseInt(value, 10) === 0) {
         localizedFractionalSecond = "".padStart(value.length, localizedZero);
       } else {
         localizedFractionalSecond = numberStringFormatter.localize(`0.${value}`).replace(`${localizedZero}${localizedDecimalSeparator}`, "");
@@ -254,7 +255,7 @@ function localizeTimePart({
     }
     return localizedFractionalSecond;
   }
-  const valueAsNumber = parseInt(value);
+  const valueAsNumber = parseInt(value, 10);
   const date = new Date(
     Date.UTC(
       0,
@@ -291,9 +292,9 @@ function localizeTimeString({
       0,
       0,
       0,
-      parseInt(hour),
-      parseInt(minute),
-      includeSeconds && typeof second === "string" ? parseInt(second) : 0,
+      parseInt(hour, 10),
+      parseInt(minute, 10),
+      includeSeconds && typeof second === "string" ? parseInt(second, 10) : 0,
       includeSeconds && fractionalSecond ? fractionalSecondPartToMilliseconds(fractionalSecond) : 0
     )
   );
@@ -381,9 +382,9 @@ function toISOTimeString(value, step = 60) {
     fractionalSecond = value.fractionalSecond;
   }
   if (hour && minute) {
-    isoTimeString = `${formatTimePart(parseInt(hour))}:${formatTimePart(parseInt(minute))}`;
+    isoTimeString = `${formatTimePart(parseInt(hour, 10))}:${formatTimePart(parseInt(minute, 10))}`;
     if (step < 60) {
-      isoTimeString += `:${formatTimePart(parseInt(second || "0"))}`;
+      isoTimeString += `:${formatTimePart(parseInt(second || "0", 10))}`;
       if (step < 1) {
         isoTimeString += `.${formatFractionalSecond(fractionalSecond || "0", step)}`;
       }
@@ -399,7 +400,7 @@ class TimeController extends GenericController {
     this.handleHourKeyDownEvent = (event) => {
       const key = event.key;
       if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+        const keyAsNumber = parseInt(key, 10);
         let newHour;
         if (isValidNumber(this.hour)) {
           switch (this.hourFormat) {
@@ -445,10 +446,10 @@ class TimeController extends GenericController {
     this.handleMinuteKeyDownEvent = (event) => {
       const key = event.key;
       if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+        const keyAsNumber = parseInt(key, 10);
         let newMinute;
         if (typeof this.minute === "string" && isValidNumber(this.minute) && this.minute.startsWith("0")) {
-          const minuteAsNumber = parseInt(this.minute);
+          const minuteAsNumber = parseInt(this.minute, 10);
           newMinute = minuteAsNumber > maxTenthForMinuteAndSecond ? keyAsNumber : `${minuteAsNumber}${keyAsNumber}`;
         } else {
           newMinute = keyAsNumber;
@@ -479,10 +480,10 @@ class TimeController extends GenericController {
     this.handleSecondKeyDownEvent = (event) => {
       const key = event.key;
       if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+        const keyAsNumber = parseInt(key, 10);
         let newSecond;
         if (typeof this.second === "string" && isValidNumber(this.second) && this.second.startsWith("0")) {
-          const secondAsNumber = parseInt(this.second);
+          const secondAsNumber = parseInt(this.second, 10);
           newSecond = secondAsNumber > maxTenthForMinuteAndSecond ? keyAsNumber : `${secondAsNumber}${keyAsNumber}`;
         } else {
           newSecond = keyAsNumber;
@@ -514,7 +515,7 @@ class TimeController extends GenericController {
       const { key } = event;
       if (numberKeys.includes(key)) {
         const stepPrecision = decimalPlaces(this.component.step);
-        const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+        const fractionalSecondAsInteger = parseInt(this.fractionalSecond, 10);
         const fractionalSecondAsIntegerLength = fractionalSecondAsInteger.toString().length;
         let newFractionalSecondAsIntegerString;
         if (fractionalSecondAsIntegerLength >= stepPrecision) {
@@ -573,10 +574,13 @@ class TimeController extends GenericController {
     };
     this.calciteTimeChange = createEvent();
   }
+  get hasValue() {
+    return Boolean(this?.hour || this?.minute || this?.second || this?.fractionalSecond || this?.meridiem);
+  }
   //#endregion
   //#region Public Methods
   decrementHour() {
-    const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
+    const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour, 10) - 1;
     this.setValuePart("hour", newHour);
   }
   decrementMinute() {
@@ -586,7 +590,7 @@ class TimeController extends GenericController {
     this.decrementMinuteOrSecond("second");
   }
   incrementHour() {
-    const newHour = typeof this.hour === "string" && isValidNumber(this.hour) ? this.hour === "23" ? 0 : parseInt(this.hour) + 1 : 1;
+    const newHour = typeof this.hour === "string" && isValidNumber(this.hour) ? this.hour === "23" ? 0 : parseInt(this.hour, 10) + 1 : 1;
     this.setValuePart("hour", newHour);
   }
   incrementMinute() {
@@ -598,7 +602,7 @@ class TimeController extends GenericController {
   nudgeFractionalSecond(direction) {
     const stepDecimal = getDecimals(this.component.step);
     const stepPrecision = decimalPlaces(this.component.step);
-    const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+    const fractionalSecondAsInteger = parseInt(this.fractionalSecond, 10);
     const fractionalSecondAsFloat = parseFloat(`0.${this.fractionalSecond}`);
     let nudgedValue;
     let nudgedValueRounded;
@@ -671,7 +675,7 @@ class TimeController extends GenericController {
   decrementMinuteOrSecond(key) {
     let newValue;
     if (isValidNumber(this[key])) {
-      const valueAsNumber = parseInt(this[key]);
+      const valueAsNumber = parseInt(this[key], 10);
       newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
     } else {
       newValue = 59;
@@ -679,7 +683,7 @@ class TimeController extends GenericController {
     this.setValuePart(key, newValue);
   }
   incrementMinuteOrSecond(key) {
-    const newValue = isValidNumber(this[key]) ? this[key] === "59" ? 0 : parseInt(this[key]) + 1 : 0;
+    const newValue = isValidNumber(this[key]) ? this[key] === "59" ? 0 : parseInt(this[key], 10) + 1 : 0;
     this.setValuePart(key, newValue);
   }
   setHourFormat() {
@@ -775,7 +779,7 @@ class TimeController extends GenericController {
         value: this.meridiem
       });
       if (isValidNumber(this.hour)) {
-        const hourAsNumber = parseInt(this.hour);
+        const hourAsNumber = parseInt(this.hour, 10);
         switch (value) {
           case "AM":
             if (hourAsNumber >= 12) {

package/dist/chunks/utils.js

@@ -53,7 +53,7 @@ const OPACITY_LIMITS = {
 };
 const STATIC_DIMENSIONS = {
   s: {
-    gap: parseInt(calciteSpacingFixedSm),
+    gap: parseInt(calciteSpacingFixedSm, 10),
     slider: {
       height: 12
     },
@@ -66,7 +66,7 @@ const STATIC_DIMENSIONS = {
     minWidth: 200
   },
   m: {
-    gap: parseInt(calciteSpacingFixedMd),
+    gap: parseInt(calciteSpacingFixedMd, 10),
     slider: {
       height: 12
     },
@@ -79,7 +79,7 @@ const STATIC_DIMENSIONS = {
     minWidth: 240
   },
   l: {
-    gap: parseInt(calciteSpacingFixedXl),
+    gap: parseInt(calciteSpacingFixedXl, 10),
     slider: {
       height: 12
     },

package/dist/chunks/utils2.js

@@ -47,12 +47,65 @@ function isSingleLike(selectionMode) {
 function getLabel(item) {
   return item.shortHeading || item.heading;
 }
+function orderByPrevious(items, previousItems) {
+  if (items.length < 2 || previousItems.length === 0) {
+    return items;
+  }
+  const previousItemOrder = new Map(previousItems.map((item, index) => [item, index]));
+  return [...items].sort((a, b) => {
+    const aOrder = previousItemOrder.get(a);
+    const bOrder = previousItemOrder.get(b);
+    if (aOrder !== void 0 && bOrder !== void 0) {
+      return aOrder - bOrder;
+    }
+    if (aOrder !== void 0) {
+      return -1;
+    }
+    if (bOrder !== void 0) {
+      return 1;
+    }
+    return 0;
+  });
+}
+function consumeValue(counts, value) {
+  const count = counts.get(value) ?? 0;
+  if (count === 0) {
+    return false;
+  }
+  if (count === 1) {
+    counts.delete(value);
+  } else {
+    counts.set(value, count - 1);
+  }
+  return true;
+}
+function orderValuesByPrevious(selectedValues, previousValues) {
+  if (selectedValues.length < 2 || previousValues.length === 0) {
+    return selectedValues;
+  }
+  const selectedValueCounts = /* @__PURE__ */ new Map();
+  selectedValues.forEach((value) => {
+    selectedValueCounts.set(value, (selectedValueCounts.get(value) ?? 0) + 1);
+  });
+  const orderedSelectedValues = previousValues.filter((value) => consumeValue(selectedValueCounts, value));
+  if (orderedSelectedValues.length === 0) {
+    return selectedValues;
+  }
+  selectedValues.forEach((value) => {
+    if (consumeValue(selectedValueCounts, value)) {
+      orderedSelectedValues.push(value);
+    }
+  });
+  return orderedSelectedValues;
+}
 export {
-  getItemAncestors as a,
-  getItemChildren as b,
-  getAncestors as c,
-  getDepth as d,
+  orderByPrevious as a,
+  getItemAncestors as b,
+  getItemChildren as c,
+  getAncestors as d,
+  getDepth as e,
   getLabel as g,
   hasActiveChildren as h,
-  isSingleLike as i
+  isSingleLike as i,
+  orderValuesByPrevious as o
 };

package/dist/chunks/utils3.js

@@ -62,7 +62,7 @@ function getSource(changes, stringProp, dateProp) {
   if (datePropChanged && !stringPropChanged) {
     return dateProp;
   }
-  return null;
+  return void 0;
 }
 function getMinMaxSource(changes, type) {
   return type === "min" ? getSource(changes, "min", "minAsDate") : getSource(changes, "max", "maxAsDate");

package/dist/components/calcite-accordion-item/customElement.d.ts

@@ -50,8 +50,8 @@ export abstract class AccordionItem extends LitElement {
   accessor iconStart: IconName | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * Sets focus on the component.

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

@@ -17,6 +17,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-action-text-color-press] - Specifies the component's text color when pressed or hovered.
  * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead. Specifies the component's text color when hovered.
  * @cssproperty [--calcite-action-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-action-loader-color] - Specifies the component's loader color.
  * @slot  - A slot for adding non-interactive content, such as a `calcite-icon`.
  */
 export abstract class Action extends LitElement {
@@ -50,11 +51,7 @@ export abstract class Action extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /** Specifies an icon to display. */
   accessor icon: IconName | undefined;
@@ -80,9 +77,9 @@ export abstract class Action extends LitElement {
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      loading?: string;
-      indicator?: string;
-      indicatorLabel?: string;
+      loading?: string | undefined;
+      indicator?: string | undefined;
+      indicatorLabel?: string | undefined;
   };
   /**
    * When `true`, the component is not automatically overflowed into a menu by a parent `calcite-action-bar`.

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

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -12,7 +12,8 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
 import { I as IDS, C as CSS } from "../../chunks/resources.js";
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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([scale=s]){--calcite-internal-action-font-size: var(--calcite-font-size--2);--calcite-internal-action-min-height: var(--calcite-size-sm);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-font-size: var(--calcite-font-size--1);--calcite-internal-action-min-height: var(--calcite-size-md);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-font-size: var(--calcite-font-size-0);--calcite-internal-action-min-height: var(--calcite-size-lg);--calcite-internal-action-line-height: 1.25rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm-plus)}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius-xs)))}.interaction-container{border-radius:inherit}:host([width=full]){flex:1 0 auto}:host([width=full]) .button{justify-content:center}:host([width=full]) .button .text-container--visible{flex:none}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;outline-color:transparent;box-sizing:border-box;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));border-radius:inherit;color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));cursor:inherit;flex:1 0 auto;font-family:inherit;font-size:var(--calcite-internal-action-font-size);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-internal-action-line-height);min-block-size:var(--calcite-internal-action-height, var(--calcite-internal-action-min-height));max-block-size:var(--calcite-internal-action-height, none);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-internal-action-spacing));padding-inline:var(--calcite-internal-action-padding-inline, var(--calcite-internal-action-spacing));text-align:start}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.button--text-visible{gap:var(--calcite-internal-action-spacing);inline-size:100%}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition-property:opacity;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-3));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}:host([active]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-3))}:host([active]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([appearance=transparent]) .button{transition-property:box-shadow;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--calcite-action-background-color, var(--calcite-color-transparent))}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([selection-appearance=highlight]):host([active]) .button{background-color:var(--calcite-color-surface-highlight);color:var(--calcite-color-text-highlight)}:host([active-descendant]) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}:host([scale=s]) .indicator-with-icon{position:relative}:host([scale=s]) .indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.125rem;inset-inline-end:-.125rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}:host([scale=s]) .indicator-without-icon{position:relative}:host([scale=s]) .indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.175rem;inset-inline-end:-.175rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}: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 styles$1 = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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([scale=s]){--calcite-internal-action-font-size: var(--calcite-font-size--2);--calcite-internal-action-min-height: var(--calcite-size-sm);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-font-size: var(--calcite-font-size--1);--calcite-internal-action-min-height: var(--calcite-size-md);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-font-size: var(--calcite-font-size-0);--calcite-internal-action-min-height: var(--calcite-size-lg);--calcite-internal-action-line-height: 1.25rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm-plus)}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius-xs)))}.interaction-container{border-radius:inherit}:host([width=full]){flex:1 0 auto}:host([width=full]) .button{justify-content:center}:host([width=full]) .button .text-container--visible{flex:none}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;outline-color:transparent;box-sizing:border-box;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));border-radius:inherit;color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));cursor:inherit;flex:1 0 auto;font-family:inherit;font-size:var(--calcite-internal-action-font-size);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-internal-action-line-height);min-block-size:var(--calcite-internal-action-height, var(--calcite-internal-action-min-height));max-block-size:var(--calcite-internal-action-height, none);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-internal-action-spacing));padding-inline:var(--calcite-internal-action-padding-inline, var(--calcite-internal-action-spacing));text-align:start}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.button--text-visible{gap:var(--calcite-internal-action-spacing);inline-size:100%}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition-property:opacity;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-3));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}:host([active]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-3))}:host([active]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) calcite-loader[inline]{margin-inline-end:0px;--calcite-loader-progress-color-inline: var(--calcite-action-loader-color)}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([appearance=transparent]) .button{transition-property:box-shadow;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--calcite-action-background-color, var(--calcite-color-transparent))}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([selection-appearance=highlight]):host([active]) .button{background-color:var(--calcite-color-surface-highlight);color:var(--calcite-color-text-highlight)}:host([active-descendant]) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}:host([scale=s]) .indicator-with-icon{position:relative}:host([scale=s]) .indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.125rem;inset-inline-end:-.125rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}:host([scale=s]) .indicator-without-icon{position:relative}:host([scale=s]) .indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.175rem;inset-inline-end:-.175rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}: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 styles = css`.screen-reader-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}`;
 class Action extends LitElement {
   constructor() {
     super(...arguments);
@@ -25,6 +26,7 @@ class Action extends LitElement {
     this.indicatorRef = createRef();
     this.interactiveContainer = useInteractive(this);
     this.formTrigger = useFormTrigger()(this);
+    this.labelElRef = createRef();
     this.active = false;
     this.activeDescendant = false;
     this.appearance = "transparent";
@@ -47,7 +49,7 @@ class Action extends LitElement {
     this.formAssociated = true;
   }
   static {
-    this.styles = styles;
+    this.styles = [styles$1, styles];
   }
   async setFocus(options) {
     return this.focusSetter(() => this.buttonRef.value, options);
@@ -60,6 +62,17 @@ class Action extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
+  getAccessibleLabel() {
+    const labelFallback = this.label || this.text || "";
+    return this.indicator ? this.messages.indicatorLabel.replace("{label}", labelFallback) : labelFallback;
+  }
+  getLabelledByElements() {
+    const labelledByElements = [
+      ...this.labelElRef.value ? [this.labelElRef.value] : [],
+      ...this.aria?.labelledByElements ?? []
+    ];
+    return labelledByElements.length ? labelledByElements : void 0;
+  }
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
@@ -70,7 +83,7 @@ class Action extends LitElement {
   }
   renderIndicatorText() {
     const { indicator, messages, buttonId } = this;
-    return html`<div aria-labelledby=${buttonId ?? nothing} aria-live=polite class=${safeClassMap(CSS.indicatorText)} role=region ${ref(this.indicatorRef)}>${indicator ? messages.indicator : null}</div>`;
+    return html`<div aria-labelledby=${buttonId ?? nothing} aria-live=polite class=${safeClassMap(CSS_UTILITY.screenReaderText)} role=region ${ref(this.indicatorRef)}>${indicator ? messages.indicator : null}</div>`;
   }
   renderIconContainer() {
     const { loading, icon, scale, el, iconFlipRtl, indicator } = this;
@@ -85,25 +98,28 @@ class Action extends LitElement {
     })}><slot></slot></div>`;
     return hasIconToDisplay ? keyed("icon-container", html`<div aria-hidden=true class=${safeClassMap(CSS.iconContainer)}>${iconNode}${slotContainerNode}</div>`) : null;
   }
+  renderLabel() {
+    const ariaLabel = this.getAccessibleLabel();
+    return ariaLabel ? html`<span class=${safeClassMap(CSS_UTILITY.screenReaderText)} ${ref(this.labelElRef)}>${ariaLabel}</span>` : null;
+  }
   renderButton() {
-    const { compact, disabled, icon, loading, textEnabled, label, text, indicator, indicatorRef, buttonId, messages } = this;
-    const labelFallback = label || text || "";
-    const ariaLabel = indicator ? messages.indicatorLabel.replace("{label}", labelFallback) : labelFallback;
+    const { compact, disabled, icon, loading, textEnabled, indicator, indicatorRef, buttonId } = this;
+    const ariaLabelledByElements = this.getLabelledByElements();
     const buttonClasses = {
       [CSS.button]: true,
       [CSS.buttonTextVisible]: textEnabled,
       [CSS.buttonCompact]: compact
     };
-    const buttonContent = html`${this.renderIconContainer()}${this.renderTextContainer()}${!icon && indicator && keyed("indicator-no-icon", html`<div class=${safeClassMap(CSS.indicatorWithoutIcon)}></div>`) || ""}`;
+    const buttonContent = html`${this.renderIconContainer()}${this.renderTextContainer()}${!icon && indicator && keyed("indicator-no-icon", html`<div class=${safeClassMap(CSS.indicatorWithoutIcon)}></div>`) || ""}${this.renderLabel()}`;
     const internalControlsElements = indicator && indicatorRef.value ? [indicatorRef.value] : [];
     const ariaControlsElements = [
       ...this.aria?.controlsElements ?? [],
       ...internalControlsElements
     ];
     if (this.dragHandle) {
-      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
+      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabelledByElements=${ariaLabelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
     }
-    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} .role=${this.aria?.role} type=${this.type ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</button>`;
+    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabelledByElements=${ariaLabelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} .role=${this.aria?.role} type=${this.type ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</button>`;
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.renderButton()}${this.renderIndicatorText()}` });