@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/utils.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const hexChar = /^[0-9A-F]$/i;
 const shorthandHex = /^#[0-9A-F]{3}$/i;
@@ -16,188 +16,188 @@ const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
 const alphaToOpacity = (alpha) => Number((alpha * 100).toFixed());
 const opacityToAlpha = (opacity) => Number((opacity / 100).toFixed(2));
 function isValidHex(hex, hasAlpha = false) {
-  return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
+    return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
 }
 function evaluateHex(hex, length, pattern) {
-  if (!hex) {
-    return false;
-  }
-  return hex.length === length && pattern.test(hex);
+    if (!hex) {
+        return false;
+    }
+    return hex.length === length && pattern.test(hex);
 }
 function isShorthandHex(hex, hasAlpha = false) {
-  const hexLength = hasAlpha ? 5 : 4;
-  const hexPattern = hasAlpha ? shorthandHexWithAlpha : shorthandHex;
-  return evaluateHex(hex, hexLength, hexPattern);
+    const hexLength = hasAlpha ? 5 : 4;
+    const hexPattern = hasAlpha ? shorthandHexWithAlpha : shorthandHex;
+    return evaluateHex(hex, hexLength, hexPattern);
 }
 function isLonghandHex(hex, hasAlpha = false) {
-  const hexLength = hasAlpha ? 9 : 7;
-  const hexPattern = hasAlpha ? longhandHexWithAlpha : longhandHex;
-  return evaluateHex(hex, hexLength, hexPattern);
+    const hexLength = hasAlpha ? 9 : 7;
+    const hexPattern = hasAlpha ? longhandHexWithAlpha : longhandHex;
+    return evaluateHex(hex, hexLength, hexPattern);
 }
 function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
-  hex = hex.toLowerCase();
-  if (!hex.startsWith("#")) {
-    hex = `#${hex}`;
-  }
-  if (isShorthandHex(hex, hasAlpha)) {
-    return rgbToHex(hexToRGB(hex, hasAlpha));
-  }
-  if (hasAlpha && convertFromHexToHexa && isValidHex(hex, false /* we only care about RGB hex for conversion */)) {
-    const isShorthand = isShorthandHex(hex, false);
-    return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`, true));
-  }
-  return hex;
+    hex = hex.toLowerCase();
+    if (!hex.startsWith("#")) {
+        hex = `#${hex}`;
+    }
+    if (isShorthandHex(hex, hasAlpha)) {
+        return rgbToHex(hexToRGB(hex, hasAlpha));
+    }
+    if (hasAlpha && convertFromHexToHexa && isValidHex(hex, false /* we only care about RGB hex for conversion */)) {
+        const isShorthand = isShorthandHex(hex, false);
+        return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`, true));
+    }
+    return hex;
 }
 function hexify(color, hasAlpha = false) {
-  return hasAlpha ? color.hexa() : color.hex();
+    return hasAlpha ? color.hexa() : color.hex();
 }
 function rgbToHex(color) {
-  const { r, g, b } = color;
-  const rChars = numToHex(r);
-  const gChars = numToHex(g);
-  const bChars = numToHex(b);
-  const alphaChars = "a" in color ? numToHex(color.a * 255) : "";
-  return `#${rChars}${gChars}${bChars}${alphaChars}`.toLowerCase();
+    const { r, g, b } = color;
+    const rChars = numToHex(r);
+    const gChars = numToHex(g);
+    const bChars = numToHex(b);
+    const alphaChars = "a" in color ? numToHex(color.a * 255) : "";
+    return `#${rChars}${gChars}${bChars}${alphaChars}`.toLowerCase();
 }
 function numToHex(num) {
-  return num.toString(16).padStart(2, "0");
+    return num.toString(16).padStart(2, "0");
 }
 function normalizeAlpha(colorObject) {
-  const normalized = { ...colorObject, a: colorObject.alpha ?? 1 /* Color() will omit alpha if 1 */ };
-  delete normalized.alpha;
-  return normalized;
+    const normalized = { ...colorObject, a: colorObject.alpha ?? 1 /* Color() will omit alpha if 1 */ };
+    delete normalized.alpha;
+    return normalized;
 }
 function normalizeColor(alphaColorObject) {
-  const normalized = { ...alphaColorObject, alpha: alphaColorObject.a ?? 1 };
-  delete normalized.a;
-  return normalized;
+    const normalized = { ...alphaColorObject, alpha: alphaColorObject.a ?? 1 };
+    delete normalized.a;
+    return normalized;
 }
 function hexToRGB(hex, hasAlpha = false) {
-  if (!isValidHex(hex, hasAlpha)) {
-    return null;
-  }
-  hex = hex.replace("#", "");
-  let r;
-  let g;
-  let b;
-  let a;
-  const isShorthand = hex.length === 3 || hex.length === 4;
-  if (isShorthand) {
-    const [first, second, third, fourth] = hex.split("");
-    r = parseInt(`${first}${first}`, 16);
-    g = parseInt(`${second}${second}`, 16);
-    b = parseInt(`${third}${third}`, 16);
-    a = parseInt(`${fourth}${fourth}`, 16) / 255;
-  }
-  else {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = parseInt(hex.slice(6, 8), 16) / 255;
-  }
-  return isNaN(a) ? { r, g, b } : { r, g, b, a };
+    if (!isValidHex(hex, hasAlpha)) {
+        return null;
+    }
+    hex = hex.replace("#", "");
+    let r;
+    let g;
+    let b;
+    let a;
+    const isShorthand = hex.length === 3 || hex.length === 4;
+    if (isShorthand) {
+        const [first, second, third, fourth] = hex.split("");
+        r = parseInt(`${first}${first}`, 16);
+        g = parseInt(`${second}${second}`, 16);
+        b = parseInt(`${third}${third}`, 16);
+        a = parseInt(`${fourth}${fourth}`, 16) / 255;
+    }
+    else {
+        r = parseInt(hex.slice(0, 2), 16);
+        g = parseInt(hex.slice(2, 4), 16);
+        b = parseInt(hex.slice(4, 6), 16);
+        a = parseInt(hex.slice(6, 8), 16) / 255;
+    }
+    return isNaN(a) ? { r, g, b } : { r, g, b, a };
 }
 // these utils allow users to pass enum values as strings without having to access the enum
 // based on the approach suggested by https://github.com/microsoft/TypeScript/issues/17690#issuecomment-321365759,
 const enumify = (x) => x;
 const CSSColorMode = enumify({
-  HEX: "hex",
-  HEXA: "hexa",
-  RGB_CSS: "rgb-css",
-  RGBA_CSS: "rgba-css",
-  HSL_CSS: "hsl-css",
-  HSLA_CSS: "hsla-css",
+    HEX: "hex",
+    HEXA: "hexa",
+    RGB_CSS: "rgb-css",
+    RGBA_CSS: "rgba-css",
+    HSL_CSS: "hsl-css",
+    HSLA_CSS: "hsla-css",
 });
 const ObjectColorMode = enumify({
-  RGB: "rgb",
-  RGBA: "rgba",
-  HSL: "hsl",
-  HSLA: "hsla",
-  HSV: "hsv",
-  HSVA: "hsva",
+    RGB: "rgb",
+    RGBA: "rgba",
+    HSL: "hsl",
+    HSLA: "hsla",
+    HSV: "hsv",
+    HSVA: "hsva",
 });
 function parseMode(colorValue) {
-  if (typeof colorValue === "string") {
-    if (colorValue.startsWith("#")) {
-      const { length } = colorValue;
-      if (length === 4 || length === 7) {
-        return CSSColorMode.HEX;
-      }
-      if (length === 5 || length === 9) {
-        return CSSColorMode.HEXA;
-      }
+    if (typeof colorValue === "string") {
+        if (colorValue.startsWith("#")) {
+            const { length } = colorValue;
+            if (length === 4 || length === 7) {
+                return CSSColorMode.HEX;
+            }
+            if (length === 5 || length === 9) {
+                return CSSColorMode.HEXA;
+            }
+        }
+        if (colorValue.startsWith("rgba(")) {
+            return CSSColorMode.RGBA_CSS;
+        }
+        if (colorValue.startsWith("rgb(")) {
+            return CSSColorMode.RGB_CSS;
+        }
+        if (colorValue.startsWith("hsl(")) {
+            return CSSColorMode.HSL_CSS;
+        }
+        if (colorValue.startsWith("hsla(")) {
+            return CSSColorMode.HSLA_CSS;
+        }
     }
-    if (colorValue.startsWith("rgba(")) {
-      return CSSColorMode.RGBA_CSS;
+    if (typeof colorValue === "object") {
+        if (hasChannels(colorValue, "r", "g", "b")) {
+            return hasChannels(colorValue, "a") ? ObjectColorMode.RGBA : ObjectColorMode.RGB;
+        }
+        if (hasChannels(colorValue, "h", "s", "l")) {
+            return hasChannels(colorValue, "a") ? ObjectColorMode.HSLA : ObjectColorMode.HSL;
+        }
+        if (hasChannels(colorValue, "h", "s", "v")) {
+            return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
+        }
     }
-    if (colorValue.startsWith("rgb(")) {
-      return CSSColorMode.RGB_CSS;
-    }
-    if (colorValue.startsWith("hsl(")) {
-      return CSSColorMode.HSL_CSS;
-    }
-    if (colorValue.startsWith("hsla(")) {
-      return CSSColorMode.HSLA_CSS;
-    }
-  }
-  if (typeof colorValue === "object") {
-    if (hasChannels(colorValue, "r", "g", "b")) {
-      return hasChannels(colorValue, "a") ? ObjectColorMode.RGBA : ObjectColorMode.RGB;
-    }
-    if (hasChannels(colorValue, "h", "s", "l")) {
-      return hasChannels(colorValue, "a") ? ObjectColorMode.HSLA : ObjectColorMode.HSL;
-    }
-    if (hasChannels(colorValue, "h", "s", "v")) {
-      return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
-    }
-  }
-  return null;
+    return null;
 }
 function hasChannels(colorObject, ...channels) {
-  return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
+    return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
 }
 function colorEqual(value1, value2) {
-  return value1?.rgb().array().toString() === value2?.rgb().array().toString();
+    return value1?.rgb().array().toString() === value2?.rgb().array().toString();
 }
 function alphaCompatible(mode) {
-  return (mode === CSSColorMode.HEXA ||
-    mode === CSSColorMode.RGBA_CSS ||
-    mode === CSSColorMode.HSLA_CSS ||
-    mode === ObjectColorMode.RGBA ||
-    mode === ObjectColorMode.HSLA ||
-    mode === ObjectColorMode.HSVA);
+    return (mode === CSSColorMode.HEXA ||
+        mode === CSSColorMode.RGBA_CSS ||
+        mode === CSSColorMode.HSLA_CSS ||
+        mode === ObjectColorMode.RGBA ||
+        mode === ObjectColorMode.HSLA ||
+        mode === ObjectColorMode.HSVA);
 }
 function toAlphaMode(mode) {
-  const alphaMode = mode === CSSColorMode.HEX
-    ? CSSColorMode.HEXA
-    : mode === CSSColorMode.RGB_CSS
-      ? CSSColorMode.RGBA_CSS
-      : mode === CSSColorMode.HSL_CSS
-        ? CSSColorMode.HSLA_CSS
-        : mode === ObjectColorMode.RGB
-          ? ObjectColorMode.RGBA
-          : mode === ObjectColorMode.HSL
-            ? ObjectColorMode.HSLA
-            : mode === ObjectColorMode.HSV
-              ? ObjectColorMode.HSVA
-              : mode;
-  return alphaMode;
+    const alphaMode = mode === CSSColorMode.HEX
+        ? CSSColorMode.HEXA
+        : mode === CSSColorMode.RGB_CSS
+            ? CSSColorMode.RGBA_CSS
+            : mode === CSSColorMode.HSL_CSS
+                ? CSSColorMode.HSLA_CSS
+                : mode === ObjectColorMode.RGB
+                    ? ObjectColorMode.RGBA
+                    : mode === ObjectColorMode.HSL
+                        ? ObjectColorMode.HSLA
+                        : mode === ObjectColorMode.HSV
+                            ? ObjectColorMode.HSVA
+                            : mode;
+    return alphaMode;
 }
 function toNonAlphaMode(mode) {
-  const nonAlphaMode = mode === CSSColorMode.HEXA
-    ? CSSColorMode.HEX
-    : mode === CSSColorMode.RGBA_CSS
-      ? CSSColorMode.RGB_CSS
-      : mode === CSSColorMode.HSLA_CSS
-        ? CSSColorMode.HSL_CSS
-        : mode === ObjectColorMode.RGBA
-          ? ObjectColorMode.RGB
-          : mode === ObjectColorMode.HSLA
-            ? ObjectColorMode.HSL
-            : mode === ObjectColorMode.HSVA
-              ? ObjectColorMode.HSV
-              : mode;
-  return nonAlphaMode;
+    const nonAlphaMode = mode === CSSColorMode.HEXA
+        ? CSSColorMode.HEX
+        : mode === CSSColorMode.RGBA_CSS
+            ? CSSColorMode.RGB_CSS
+            : mode === CSSColorMode.HSLA_CSS
+                ? CSSColorMode.HSL_CSS
+                : mode === ObjectColorMode.RGBA
+                    ? ObjectColorMode.RGB
+                    : mode === ObjectColorMode.HSLA
+                        ? ObjectColorMode.HSL
+                        : mode === ObjectColorMode.HSVA
+                            ? ObjectColorMode.HSV
+                            : mode;
+    return nonAlphaMode;
 }
 
 export { CSSColorMode as C, hexify as a, alphaCompatible as b, alphaToOpacity as c, colorEqual as d, normalizeAlpha as e, normalizeColor as f, toAlphaMode as g, hexToRGB as h, isValidHex as i, isLonghandHex as j, hexChar as k, normalizeHex as n, opacityToAlpha as o, parseMode as p, rgbToHex as r, toNonAlphaMode as t };

package/dist/components/utils2.js

@@ -9,47 +9,47 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 const CSS = {
-  chipInvisible: "chip--invisible",
-  selectionDisplayFit: "selection-display-fit",
-  selectionDisplaySingle: "selection-display-single",
-  listContainer: "list-container",
+    chipInvisible: "chip--invisible",
+    selectionDisplayFit: "selection-display-fit",
+    selectionDisplaySingle: "selection-display-single",
+    listContainer: "list-container",
 };
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 function getAncestors(element) {
-  const parent = element.parentElement?.closest(ComboboxChildSelector);
-  const grandparent = parent?.parentElement?.closest(ComboboxChildSelector);
-  return [parent, grandparent].filter((el) => el);
+    const parent = element.parentElement?.closest(ComboboxChildSelector);
+    const grandparent = parent?.parentElement?.closest(ComboboxChildSelector);
+    return [parent, grandparent].filter((el) => el);
 }
 function getItemAncestors(item) {
-  return (item.ancestors?.filter((el) => el.nodeName === "CALCITE-COMBOBOX-ITEM") || []);
+    return (item.ancestors?.filter((el) => el.nodeName === "CALCITE-COMBOBOX-ITEM") || []);
 }
 function getItemChildren(item) {
-  return nodeListToArray(item.querySelectorAll("calcite-combobox-item"));
+    return nodeListToArray(item.querySelectorAll("calcite-combobox-item"));
 }
 function hasActiveChildren(node) {
-  const items = nodeListToArray(node.querySelectorAll("calcite-combobox-item"));
-  return items.filter((item) => item.selected).length > 0;
+    const items = nodeListToArray(node.querySelectorAll("calcite-combobox-item"));
+    return items.filter((item) => item.selected).length > 0;
 }
 function getDepth(element) {
-  if (!Build.isBrowser) {
-    return 0;
-  }
-  const result = document.evaluate("ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group", element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
-  return result.snapshotLength;
+    if (!Build.isBrowser) {
+        return 0;
+    }
+    const result = document.evaluate("ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group", element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
+    return result.snapshotLength;
 }
 function isSingleLike(selectionMode) {
-  return selectionMode.includes("single");
+    return selectionMode.includes("single");
 }
 
 export { CSS as C, ComboboxChildSelector as a, getItemChildren as b, ComboboxItem as c, ComboboxItemGroup as d, getAncestors as e, getDepth as f, getItemAncestors as g, hasActiveChildren as h, isSingleLike as i };

package/dist/components/utils3.js

@@ -8,88 +8,93 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  containerBorderSelected: "container--border-selected",
-  containerBorderUnselected: "container--border-unselected",
-  contentContainer: "content-container",
-  contentContainerSelectable: "content-container--selectable",
-  contentContainerHasCenterContent: "content-container--has-center-content",
-  nestedContainer: "nested-container",
-  nestedContainerHidden: "nested-container--hidden",
-  content: "content",
-  customContent: "custom-content",
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  label: "label",
-  description: "description",
-  contentEnd: "content-end",
-  contentBottom: "content-bottom",
-  actionsEnd: "actions-end",
-  selectionContainer: "selection-container",
-  openContainer: "open-container",
-  dragContainer: "drag-container",
+    container: "container",
+    containerHover: "container--hover",
+    containerBorder: "container--border",
+    containerBorderSelected: "container--border-selected",
+    containerBorderUnselected: "container--border-unselected",
+    contentContainer: "content-container",
+    contentContainerSelectable: "content-container--selectable",
+    contentContainerHasCenterContent: "content-container--has-center-content",
+    nestedContainer: "nested-container",
+    nestedContainerHidden: "nested-container--hidden",
+    content: "content",
+    customContent: "custom-content",
+    actionsStart: "actions-start",
+    contentStart: "content-start",
+    label: "label",
+    description: "description",
+    contentEnd: "content-end",
+    contentBottom: "content-bottom",
+    actionsEnd: "actions-end",
+    selectionContainer: "selection-container",
+    selectionContainerSingle: "selection-container--single",
+    openContainer: "open-container",
+    dragContainer: "drag-container",
 };
 const SLOTS = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  content: "content",
-  contentBottom: "content-bottom",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end",
+    actionsStart: "actions-start",
+    contentStart: "content-start",
+    content: "content",
+    contentBottom: "content-bottom",
+    contentEnd: "content-end",
+    actionsEnd: "actions-end",
 };
 // Set to zero to extend until the end of the table section.
 const MAX_COLUMNS = 0;
 const ICONS = {
-  selectedMultiple: "check-circle-f",
-  selectedSingle: "circle-f",
-  unselected: "blank",
-  closedLTR: "caret-right",
-  closedRTL: "caret-left",
-  open: "caret-down",
-  blank: "blank",
-  close: "x",
+    selectedMultiple: "check-square-f",
+    selectedSingle: "bullet-point-large",
+    unselectedMultiple: "square",
+    unselectedSingle: "bullet-point-large",
+    closedLTR: "chevron-right",
+    closedRTL: "chevron-left",
+    open: "chevron-down",
+    blank: "blank",
+    close: "x",
 };
+const activeCellTestAttribute = "data-test-active";
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector = "calcite-list-item";
 function getListItemChildLists(slotEl) {
-  return Array.from(slotEl.assignedElements({ flatten: true }).filter((el) => el.matches(listSelector)));
+    return Array.from(slotEl.assignedElements({ flatten: true }).filter((el) => el.matches(listSelector)));
 }
 function getListItemChildren(slotEl) {
-  const assignedElements = slotEl.assignedElements({ flatten: true });
-  const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
-    .map((group) => Array.from(group.querySelectorAll(listItemSelector)))
-    .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
-  const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector));
-  const listItemListChildren = assignedElements.filter((el) => el?.matches(listSelector))
-    .map((list) => Array.from(list.querySelectorAll(listItemSelector)))
-    .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
-  return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];
+    const assignedElements = slotEl.assignedElements({ flatten: true });
+    const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
+        .map((group) => Array.from(group.querySelectorAll(listItemSelector)))
+        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
+    const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector));
+    const listItemListChildren = assignedElements.filter((el) => el?.matches(listSelector))
+        .map((list) => Array.from(list.querySelectorAll(listItemSelector)))
+        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
+    return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];
 }
 function updateListItemChildren(listItemChildren) {
-  listItemChildren.forEach((listItem) => {
-    listItem.setPosition = listItemChildren.indexOf(listItem) + 1;
-    listItem.setSize = listItemChildren.length;
-  });
+    listItemChildren.forEach((listItem) => {
+        listItem.setPosition = listItemChildren.indexOf(listItem) + 1;
+        listItem.setSize = listItemChildren.length;
+    });
 }
 function getDepth(element, includeGroup = false) {
-  if (!Build.isBrowser) {
-    return 0;
-  }
-  const expression = includeGroup
-    ? "ancestor::calcite-list-item | ancestor::calcite-list-item-group"
-    : "ancestor::calcite-list-item";
-  const result = document.evaluate(expression, element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
-  return result.snapshotLength;
+    if (!Build.isBrowser) {
+        return 0;
+    }
+    const expression = includeGroup
+        ? "ancestor::calcite-list-item | ancestor::calcite-list-item-group"
+        : "ancestor::calcite-list-item";
+    const result = document.evaluate(expression, element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
+    return result.snapshotLength;
 }
 
-export { CSS as C, ICONS as I, MAX_COLUMNS as M, SLOTS as S, getDepth as a, getListItemChildLists as b, getListItemChildren as g, updateListItemChildren as u };
+export { CSS as C, ICONS as I, MAX_COLUMNS as M, SLOTS as S, activeCellTestAttribute as a, getDepth as b, getListItemChildLists as c, getListItemChildren as g, updateListItemChildren as u };

package/dist/components/value-list-item.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { a as getSlotted } from './dom.js';
 import { g as guid } from './guid.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { S as SLOTS$1, C as CSS, d as defineCustomElement$1 } from './pick-list-item.js';
 import { I as ICON_TYPES } from './resources4.js';
@@ -18,17 +18,17 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const ICONS = {
-  drag: "drag",
+    drag: "drag",
 };
 const SLOTS = {
-  actionsEnd: "actions-end",
-  actionsStart: "actions-start",
+    actionsEnd: "actions-end",
+    actionsStart: "actions-start",
 };
 
-const valueListItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{margin-block-end:1px;box-sizing:border-box;display:flex;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2);--tw-shadow:0 1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition:background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}:host *{box-sizing:border-box}calcite-pick-list-item{position:relative;margin:0px;flex-grow:1;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([active]),:host([selected]){--tw-shadow:0 0 0 1px var(--calcite-color-brand);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.handle{display:flex;cursor:move;align-items:center;justify-content:center;border-style:none;background-color:transparent;padding-block:0px;padding-inline:0.25rem;color:var(--calcite-color-border-input);outline-color:transparent}.handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.handle:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle--activated{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.handle calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+const valueListItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{margin-block-end:1px;box-sizing:border-box;display:flex;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2);--tw-shadow:0 1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition:background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}:host *{box-sizing:border-box}calcite-pick-list-item{position:relative;margin:0px;flex-grow:1;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([active]),:host([selected]){--tw-shadow:0 0 0 1px var(--calcite-color-brand);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.handle{display:flex;cursor:move;align-items:center;justify-content:center;border-style:none;background-color:transparent;padding-block:0px;padding-inline:0.25rem;color:var(--calcite-color-border-input);outline-color:transparent}.handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.handle:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle--activated{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.handle calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ValueListItem = /*@__PURE__*/ proxyCustomElement(class ValueListItem extends HTMLElement {
     constructor() {
@@ -91,7 +91,7 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class ValueListItem exten
         setComponentLoaded(this);
     }
     componentDidRender() {
-        updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
+        updateHostInteraction(this);
     }
     // --------------------------------------------------------------------------
     //
@@ -144,9 +144,9 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class ValueListItem exten
         }
     }
     render() {
-        return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
+        return (h(Host, { id: this.el.id || this.guid }, h(InteractiveContainer, { disabled: this.disabled }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd())));
+            ref: this.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd()))));
     }
     get el() { return this; }
     static get style() { return valueListItemCss; }