@esri/calcite-components 5.2.0-next.60 → 5.2.0-next.61

package/dist/chunks/utils3.js

@@ -1,75 +1,315 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { defaultLocale, normalizeLocale, supportedLocales } from "@arcgis/toolkit/intl";
-import { d as dateFromISO } from "./date.js";
-import { g as getAssetPath, l as logger } from "./runtime.js";
-const translationCache = {};
-const requestCache = {};
-const extraNlsLocales = [
-  "de-AT",
-  "de-CH",
-  "en-AU",
-  "en-CA",
-  "en-GB",
-  "es-MX",
-  "fr-CA",
-  "fr-CH",
-  "hi",
-  "it-CH",
-  "mk",
-  "pt"
-];
-[...supportedLocales, ...extraNlsLocales];
-function normalizeNlsLocale(locale) {
-  if (!locale) {
-    return defaultLocale;
+import Color from "color";
+import { calciteSpacingFixedXl, calciteSpacingFixedMd, calciteSpacingFixedSm } from "@esri/calcite-design-tokens/dist/es6/global.js";
+import { omit } from "es-toolkit";
+const CSS = {
+  channel: "channel",
+  channels: "channels",
+  colorField: "color-field",
+  colorFieldScope: "scope--color-field",
+  colorMode: "color-mode",
+  colorModeContainer: "color-mode-container",
+  container: "container",
+  control: "control",
+  controlAndScope: "control-and-scope",
+  controlSection: "control-section",
+  deleteColor: "delete-color",
+  header: "header",
+  hexAndChannelsGroup: "hex-and-channels-group",
+  hexOptions: "color-hex-options",
+  hueScope: "scope--hue",
+  hueSlider: "hue-slider",
+  opacityScope: "scope--opacity",
+  opacitySlider: "opacity-slider",
+  preview: "preview",
+  previewAndSliders: "preview-and-sliders",
+  saveColor: "save-color",
+  savedColor: "saved-color",
+  savedColorsButtons: "saved-colors-buttons",
+  savedColorsSection: "saved-colors-section",
+  scope: "scope",
+  section: "section",
+  slider: "slider",
+  sliders: "sliders",
+  splitSection: "section--split",
+  swatchGroup: "swatch-group"
+};
+const DEFAULT_COLOR = Color("#007AC2");
+const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
+const RGB_LIMITS = {
+  r: 255,
+  g: 255,
+  b: 255
+};
+const HSV_LIMITS = {
+  h: 360,
+  s: 100,
+  v: 100
+};
+const HUE_LIMIT_CONSTRAINED = HSV_LIMITS.h - 1;
+const OPACITY_LIMITS = {
+  min: 0,
+  max: 100
+};
+const STATIC_DIMENSIONS = {
+  s: {
+    gap: parseInt(calciteSpacingFixedSm, 10),
+    slider: {
+      height: 12
+    },
+    thumb: {
+      radius: 7
+    },
+    preview: {
+      size: 20
+    },
+    minWidth: 200
+  },
+  m: {
+    gap: parseInt(calciteSpacingFixedMd, 10),
+    slider: {
+      height: 12
+    },
+    thumb: {
+      radius: 7
+    },
+    preview: {
+      size: 24
+    },
+    minWidth: 240
+  },
+  l: {
+    gap: parseInt(calciteSpacingFixedXl, 10),
+    slider: {
+      height: 12
+    },
+    thumb: {
+      radius: 7
+    },
+    preview: {
+      size: 32
+    },
+    minWidth: 304
+  }
+};
+const SCOPE_SIZE = 1;
+const ICONS = {
+  minus: "minus",
+  plus: "plus"
+};
+const hexChar = /^[0-9A-F]$/i;
+const shorthandHex = /^#[0-9A-F]{3}$/i;
+const longhandHex = /^#[0-9A-F]{6}$/i;
+const shorthandHexWithAlpha = /^#[0-9A-F]{4}$/i;
+const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
+function colorFromValue(value, clearable = false, mode) {
+  if (clearable && !value) {
+    return void 0;
   }
-  const localeParts = locale.split("-");
-  locale = `${localeParts[0].toLowerCase()}${localeParts.length >= 2 ? `-${localeParts[1].toUpperCase()}` : ""}`;
-  if (extraNlsLocales.includes(locale)) {
-    return locale;
+  return Color(
+    value != null && typeof value === "object" && alphaCompatible(mode) ? normalizeColor(value) : value
+  );
+}
+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);
+}
+function evaluateHex(hex, length, pattern) {
+  if (!hex) {
+    return false;
   }
-  return normalizeLocale(locale);
+  return hex.length === length && pattern.test(hex);
 }
-async function getLocaleData(locale) {
-  locale = normalizeNlsLocale(locale);
-  if (translationCache[locale]) {
-    return translationCache[locale];
+function isShorthandHex(hex, hasAlpha = false) {
+  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);
+}
+function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
+  hex = hex.toLowerCase();
+  if (!hex.startsWith("#")) {
+    hex = `#${hex}`;
+  }
+  if (isShorthandHex(hex, hasAlpha)) {
+    return rgbToHex(hexToRGB(hex));
   }
-  if (!requestCache[locale]) {
-    requestCache[locale] = fetch(getAssetPath(`./assets/date-picker/nls/${locale}.json`)).then((resp) => resp.json()).catch(() => {
-      logger.error(`Native Language Support data for "${locale}" not found or invalid, falling back to english`);
-      return getLocaleData(defaultLocale);
-    });
+  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"}`));
   }
-  return translationCache[locale] = await requestCache[locale];
+  return hex;
 }
-function applyLocaleOverride(locale) {
-  const localeOverrideMap = {
-    "ar-SA": "ar"
-    // see https://github.com/Esri/calcite-design-system/issues/11399
+function hexify(color, hasAlpha = false) {
+  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();
+}
+function numToHex(num) {
+  return num.toString(16).padStart(2, "0");
+}
+function normalizeAlpha(colorObject) {
+  return {
+    ...omit(colorObject, ["alpha"]),
+    a: colorObject.alpha ?? 1
+    /* Color() will omit alpha if 1 */
   };
-  return localeOverrideMap[locale] || locale;
 }
-function getValueAsDateRange(value) {
-  return value.map((v, index) => dateFromISO(v, index === 1));
+function normalizeColor(alphaColorObject) {
+  return { ...omit(alphaColorObject, ["a"]), alpha: alphaColorObject.a ?? 1 };
 }
-function getSource(changes, stringProp, dateProp) {
-  const stringPropChanged = changes.has(stringProp);
-  const datePropChanged = changes.has(dateProp);
-  if (stringPropChanged && !datePropChanged) {
-    return stringProp;
+function hexToRGB(hex) {
+  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;
   }
-  if (datePropChanged && !stringPropChanged) {
-    return dateProp;
+  return isNaN(a) ? { r, g, b } : { r, g, b, a };
+}
+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"
+});
+const ObjectColorMode = enumify({
+  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 (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 (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 void 0;
 }
-function getMinMaxSource(changes, type) {
-  return type === "min" ? getSource(changes, "min", "minAsDate") : getSource(changes, "max", "maxAsDate");
+function hasChannels(colorObject, ...channels) {
+  return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
+}
+function colorEqual(value1, value2) {
+  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;
+}
+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;
+}
+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 borderWidthInPx = 1;
+const inlineSizeBorderTotalWidth = borderWidthInPx * 2;
+function getSliderWidth(availableWidth, activeStaticDimensions, hasAlpha) {
+  const previewWidth = hasAlpha ? STATIC_DIMENSIONS["l"].preview.size : activeStaticDimensions.preview.size;
+  const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;
+  const inlineSpaceAroundElements = activeStaticDimensions.gap * 3;
+  return Math.max(effectiveWidth - inlineSpaceAroundElements - previewWidth, 0);
+}
+function getColorFieldDimensions(availableWidth) {
+  const colorFieldAspectRatio = 1.8;
+  const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;
+  return {
+    width: Math.max(effectiveWidth, 0),
+    height: Math.max(Math.floor(effectiveWidth / colorFieldAspectRatio), 0)
+  };
 }
 export {
-  getValueAsDateRange as a,
-  applyLocaleOverride as b,
-  getLocaleData as c,
-  getMinMaxSource as g
+  CSSColorMode as C,
+  DEFAULT_COLOR as D,
+  HSV_LIMITS as H,
+  ICONS as I,
+  OPACITY_LIMITS as O,
+  RGB_LIMITS as R,
+  STATIC_DIMENSIONS as S,
+  getColorFieldDimensions as a,
+  DEFAULT_STORAGE_KEY_PREFIX as b,
+  colorFromValue as c,
+  alphaCompatible as d,
+  colorEqual as e,
+  CSS as f,
+  getSliderWidth as g,
+  hexify as h,
+  HUE_LIMIT_CONSTRAINED as i,
+  normalizeAlpha as j,
+  alphaToOpacity as k,
+  SCOPE_SIZE as l,
+  toAlphaMode as m,
+  normalizeHex as n,
+  opacityToAlpha as o,
+  parseMode as p,
+  isValidHex as q,
+  isLonghandHex as r,
+  isShorthandHex as s,
+  toNonAlphaMode as t,
+  rgbToHex as u,
+  hexChar as v,
+  hexToRGB as w
 };

package/dist/chunks/utils4.js

@@ -1,5 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { isServer } from "lit";
+import { i as isTag } from "./resources3.js";
+import { a as isListItemGroup, i as isListItem } from "./resources34.js";
+const CSS = {
+  container: "container",
+  table: "table",
+  scrim: "scrim",
+  stack: "stack",
+  tableContainer: "table-container",
+  sticky: "sticky-pos",
+  assistiveText: "assistive-text",
+  containerHeight: "container-height"
+};
+const SLOTS = {
+  emptyContent: "empty-content",
+  filterNoResults: "filter-no-results",
+  filterActionsStart: "filter-actions-start",
+  filterActionsEnd: "filter-actions-end"
+};
+const isList = isTag("calcite-list");
 const listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector = "calcite-list-item";
@@ -13,16 +32,16 @@ function expandedAncestors(el) {
 }
 function getListItemChildren(slotEl) {
   const assignedElements = slotEl.assignedElements({ flatten: true });
-  const groupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector)).map((group) => Array.from(group.querySelectorAll(listItemSelector))).flat();
-  const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector));
-  const listChildren = assignedElements.filter((el) => el?.matches(listSelector));
+  const groupChildren = assignedElements.filter(isListItemGroup).map((group) => Array.from(group.querySelectorAll(listItemSelector))).flat();
+  const listItemChildren = assignedElements.filter(isListItem);
+  const listChildren = assignedElements.filter(isList);
   return {
     lists: listChildren,
     items: groupChildren.concat(listItemChildren)
   };
 }
 function updateListItemChildren(slotEl) {
-  const listItemChildren = slotEl.assignedElements({ flatten: true }).filter((el) => el.matches(listItemSelector));
+  const listItemChildren = slotEl.assignedElements({ flatten: true }).filter(isListItem);
   const filteredListItemChildren = listItemChildren.filter((listItem) => !listItem.filterHidden);
   listItemChildren.forEach((listItem) => {
     const index = filteredListItemChildren.indexOf(listItem);
@@ -38,16 +57,14 @@ function getDepth(element, includeGroup = false) {
   const result = document.evaluate(expression, element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
   return result.snapshotLength;
 }
-function isListItem(element) {
-  return element.tagName === "CALCITE-LIST-ITEM";
-}
 export {
+  CSS as C,
+  SLOTS as S,
   listSelector as a,
   listItemGroupSelector as b,
   getListItemChildren as c,
   expandedAncestors as e,
   getDepth as g,
-  isListItem as i,
   listItemSelector as l,
   updateListItemChildren as u
 };

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

@@ -11,7 +11,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
-import { I as IDS, C as CSS } from "../../chunks/resources.js";
+import { I as IDS, C as CSS } from "../../chunks/resources4.js";
 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 {

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

@@ -5,15 +5,17 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { g as getStylePixelValue, f as filterDirectChildren, a as slotChangeGetAssignedElements, b as getSlotAssignedElements, d as focusElementInGroup } from "../../chunks/dom.js";
+import { k as getStylePixelValue, C as filterDirectChildren, b as slotChangeGetAssignedElements, a as getSlotAssignedElements, d as focusElementInGroup } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleActionBarChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
+import { i as isTooltip } from "../../chunks/resources11.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { i as isAction } from "../../chunks/resources.js";
-import { S as SLOTS$1, i as isActionGroup } from "../../chunks/resources2.js";
-import { i as isActionMenu, S as SLOTS$2 } from "../../chunks/resources3.js";
+import { i as isAction } from "../../chunks/resources4.js";
+import { S as SLOTS, i as isActionGroup } from "../../chunks/resources.js";
+import { i as isActionMenu, S as SLOTS$1 } from "../../chunks/resources2.js";
+import { S as SLOTS$2, C as CSS } from "../../chunks/resources12.js";
 const calculateMaxItems = ({
   bufferSize = 0,
   containerSize,
@@ -40,25 +42,12 @@ const getOverflowCount = ({
 }) => {
   return Math.max(itemSizes.length - calculateMaxItems({ bufferSize, itemSizes, containerSize }), 0);
 };
-const CSS = {
-  container: "container",
-  hasActionGroups: "has-action-groups",
-  lineOverlay: "line-overlay",
-  line: "line",
-  actionGroupEnd: "action-group--end",
-  actionGroupStart: "action-group--start"
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  actionsStart: "actions-start",
-  expandTooltip: "expand-tooltip"
-};
 const queryActions = (items) => items.flatMap((item) => {
   if (isActionGroup(item)) {
     return item.actions;
   }
   if (isActionMenu(item)) {
-    return item.actions.filter((action) => action.slot === SLOTS$2.trigger);
+    return item.actions.filter((action) => action.slot === SLOTS$1.trigger);
   }
   return item;
 }).filter((action) => !!action);
@@ -84,7 +73,7 @@ const overflowActions = ({
     let slottedWithinGroupCount = 0;
     const directGroupActions = group.actions.filter((action) => action.parentElement === group).reverse();
     directGroupActions.forEach((groupAction) => {
-      if (groupAction.slot === SLOTS$1.menuActions) {
+      if (groupAction.slot === SLOTS.menuActions) {
         groupAction.removeAttribute("slot");
         groupAction.textEnabled = expanded;
       }
@@ -94,7 +83,7 @@ const overflowActions = ({
         const unslottedActions = directGroupActions.filter((action) => !action.slot);
         if (unslottedActions.length > 1 && directGroupActions.length > 2 && !groupAction.closest("calcite-action-menu") && !groupAction.overflowDisabled) {
           groupAction.textEnabled = true;
-          groupAction.setAttribute("slot", SLOTS$1.menuActions);
+          groupAction.setAttribute("slot", SLOTS.menuActions);
           slottedWithinGroupCount++;
           if (slottedWithinGroupCount > 1) {
             needToSlotCount--;
@@ -342,7 +331,7 @@ class ActionBar extends LitElement {
     const itemSizes = this.actions.map((action) => action[clientSize] || 0);
     const slottedActionGroupMenus = this.getTrackedActionGroups().flatMap((group) => filterDirectChildren(group, "calcite-action-menu"));
     slottedActionGroupMenus.forEach((menu) => {
-      const triggerAction = menu.actions.find((action) => action.slot === SLOTS$2.trigger);
+      const triggerAction = menu.actions.find((action) => action.slot === SLOTS$1.trigger);
       itemSizes.push((triggerAction ?? menu)[clientSize] || 0);
     });
     if (expandToggleEl) {
@@ -354,8 +343,8 @@ class ActionBar extends LitElement {
   getVisibleActionGroupItemCount(actionGroup) {
     const directActionGroupActions = actionGroup.actions.filter((action) => action.parentElement === actionGroup);
     const directActionMenusCount = filterDirectChildren(actionGroup, "calcite-action-menu").length;
-    const defaultActionsCount = directActionGroupActions.filter((action) => action.slot !== SLOTS$1.menuActions).length + directActionMenusCount;
-    const hasMenuActions = directActionGroupActions.some((action) => action.slot === SLOTS$1.menuActions);
+    const defaultActionsCount = directActionGroupActions.filter((action) => action.slot !== SLOTS.menuActions).length + directActionMenusCount;
+    const hasMenuActions = directActionGroupActions.some((action) => action.slot === SLOTS.menuActions);
     return defaultActionsCount + (hasMenuActions ? 1 : 0);
   }
   expandedHandler() {
@@ -505,7 +494,7 @@ class ActionBar extends LitElement {
     this.syncSlotAndActions(() => this.syncActionsStartSlot());
   }
   handleTooltipSlotChange(event) {
-    const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
+    const tooltips = slotChangeGetAssignedElements(event).filter(isTooltip);
     this.expandTooltip = tooltips[0];
   }
   updateActions() {
@@ -597,7 +586,7 @@ class ActionBar extends LitElement {
     this.syncActionsAndOverflow();
   }
   getNavigableActions() {
-    return this.actions.filter((action) => !action.disabled && action.slot !== SLOTS$1.menuActions);
+    return this.actions.filter((action) => !action.disabled && action.slot !== SLOTS.menuActions);
   }
   handleKeyDown(event) {
     const actions = this.getNavigableActions();
@@ -640,7 +629,7 @@ class ActionBar extends LitElement {
     });
   }
   renderExpandTooltipSlot() {
-    return html`<slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>`;
+    return html`<slot name=${SLOTS$2.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>`;
   }
   renderExpandToggle() {
     const { el, expanded, toggleExpand, messages, position, scale } = this;
@@ -651,7 +640,7 @@ class ActionBar extends LitElement {
     const isStart = position === "start";
     const hasExpandToggle = !expandToggleDisabled && expandPosition === position;
     const hasActions = isStart ? this.hasActionsStart : this.hasActionsEnd;
-    const slotName = isStart ? SLOTS.actionsStart : SLOTS.actionsEnd;
+    const slotName = isStart ? SLOTS$2.actionsStart : SLOTS$2.actionsEnd;
     const onSlotChange = isStart ? this.handleActionsStartSlotChange : this.handleActionsEndSlotChange;
     const label = isStart ? this.actionsStartGroupLabel : this.actionsEndGroupLabel;
     const hidden = !hasExpandToggle && !hasActions;

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

@@ -3,12 +3,12 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { S as SLOTS } from "../../chunks/resources3.js";
-import { b as getSlotAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { S as SLOTS } from "../../chunks/resources2.js";
+import { a as getSlotAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { i as isAction } from "../../chunks/resources.js";
+import { i as isAction } from "../../chunks/resources4.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources2.js";
+import { I as ICONS, S as SLOTS$1, 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([scale=s]){--calcite-internal-action-group-gap: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm-plus)}:host{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0;gap:var(--calcite-internal-action-group-gap)}.container{display:flex;flex-grow:1;flex-direction:column;gap:inherit}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;gap:var(--calcite-action-group-gap, var(--calcite-internal-action-group-gap));grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionGroup extends LitElement {
   constructor() {
@@ -123,7 +123,7 @@ class ActionGroup extends LitElement {
     this.syncActionsAndEmitChange();
   }
   handleActionClick(event) {
-    const target = event.composedPath().find((element) => isAction(element));
+    const target = event.composedPath().find(isAction);
     if (!target || target.disabled) {
       return;
     }

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

@@ -5,13 +5,14 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
-import { b as getSlotAssignedElements } from "../../chunks/dom.js";
+import { a as getSlotAssignedElements } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { i as isAction } from "../../chunks/resources.js";
-import { i as isActionGroup } from "../../chunks/resources2.js";
+import { i as isAction } from "../../chunks/resources4.js";
+import { i as isActionGroup } from "../../chunks/resources.js";
+import { i as isTooltip } from "../../chunks/resources11.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { I as IDS, C as CSS, S as SLOTS, a as ICONS } from "../../chunks/resources3.js";
+import { I as IDS, C as CSS, S as SLOTS, a as ICONS } from "../../chunks/resources2.js";
 const styles = css`:host([scale=s]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-menu-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-sm));--calcite-internal-action-menu-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-sm-plus));--calcite-internal-action-menu-padding: var(--calcite-spacing-sm-plus)}:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-relative-lg)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);padding-block-end:var(--calcite-internal-action-menu-padding)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-internal-action-menu-gap);padding:var(--calcite-internal-action-menu-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 class ActionMenu extends LitElement {
@@ -252,7 +253,7 @@ class ActionMenu extends LitElement {
   updateTooltip(event) {
     const tooltips = event.target.assignedElements({
       flatten: true
-    }).filter((el) => el?.matches("calcite-tooltip"));
+    }).filter(isTooltip);
     this.tooltipEl = tooltips[0];
     this.setTooltipReferenceElement();
   }