@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.70

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 } 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(() => {
-      console.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 null;
+  return void 0;
+}
+function hasChannels(colorObject, ...channels) {
+  return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
 }
-function getMinMaxSource(changes, type) {
-  return type === "min" ? getSource(changes, "min", "minAsDate") : getSource(changes, "max", "maxAsDate");
+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-accordion/customElement.d.ts

@@ -1,8 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Position, IconType, Scale, SelectionMode } from "../interfaces.js";
+import type { Appearance, Position, IconType, Scale, SelectionMode } from "../types.js";
 
 /**
+ * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block-group` component instead.
  * @cssproperty [--calcite-accordion-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-accordion-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
@@ -36,13 +37,11 @@ export abstract class Accordion extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection, and
-   *
-   * `"single-persist"` allows one selection and prevents de-selection.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
    *
    * @default "multiple"
    */

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

@@ -1,10 +1,11 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
 /**
+ * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block` component instead.
  * @cssproperty [--calcite-accordion-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-accordion-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
@@ -48,10 +49,14 @@ export abstract class AccordionItem extends LitElement {
   accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
   accessor iconStart: IconName | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * Sets focus on the component.

package/dist/components/calcite-accordion-item/customElement.js

@@ -48,7 +48,7 @@ const ICONS = {
   plus: "plus",
   minus: "minus"
 };
-const styles = css`.icon-position--end,.icon-position--start{--calcite-internal-accordion-item-icon-rotation: -90deg ;--calcite-internal-accordion-item-active-icon-rotation: 0deg;--calcite-internal-accordion-item-icon-rotation-rtl: 90deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: 0deg}:host([scale=s]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xxs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xxs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--1)}:host{position:relative;display:flex;flex-direction:column;text-decoration-line:none;color:var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));background-color:var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));border-width:0}:host .header{background-color:var(--calcite-accordion-item-header-background-color)}:host .header:hover{background-color:var(--calcite-internal-accordion-item-header-background-color-hover)}:host .header:active{background-color:var(--calcite-internal-accordion-item-header-background-color-press)}.header--solid{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-foreground-3) )}.header--transparent{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-transparent-hover) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-transparent-press) )}.icon-position--start{--calcite-internal-accordion-item-flex-direction: row-reverse;--calcite-internal-accordion-item-icon-spacing-start: 0;--calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin)}.icon-position--end{--calcite-internal-accordion-item-flex-direction: row;--calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);--calcite-internal-accordion-item-icon-spacing-end: 0}.icon-position--end:not(.icon-type--plus-minus){--calcite-internal-accordion-item-icon-rotation: 0deg;--calcite-internal-accordion-item-active-icon-rotation: 180deg;--calcite-internal-accordion-item-icon-rotation-rtl: 0deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: -180deg }.content,.header{border-block-end-width:var(--calcite-border-width-sm);border-block-end-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-accordion-item-border-color, var(--calcite-color-border-2)))}.header-content{padding:var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem));background:none;border:none;appearance:none;-webkit-appearance:none;box-shadow:none;outline:none;font-family:inherit}.content{padding:var(--calcite-accordion-item-content-space, var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem)))}.header{display:flex;align-items:stretch}.header-content,.header-container,.header .actions-start,.header .actions-end{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word}.header .has-actions{gap:var(--calcite-internal-accordion-item-action-slot-spacing);padding-block:var(--calcite-internal-accordion-item-action-slot-spacing)}.header .actions-start.has-actions{padding-inline:var(--calcite-internal-accordion-item-action-slot-spacing) 0}.header .actions-end.has-actions{padding-inline:0 var(--calcite-internal-accordion-item-action-slot-spacing)}.header-content{flex-grow:1;cursor:pointer;outline-color:transparent;flex-direction:var(--calcite-internal-accordion-item-flex-direction);color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit))}.header-content: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))))}.header-content:focus,.header-content:hover,.header-content:active{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover))}.header-content:focus .heading,.header-content:hover .heading,.header-content:active .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-press))}.header-container{inline-size:100%}.slot-content-end{margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.slot-content-start{margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}.heading,.description{display:flex;inline-size:100%;line-height:var(--calcite-font-line-height-relative-snug)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2)}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0)}.icon{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-end)}.icon--start{color:var(--calcite-accordion-item-icon-color-start, var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.icon--end{color:var(--calcite-accordion-item-icon-color-end, var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin);margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3))));margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-internal-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl))}.description{font-size:var(--calcite-internal-accordion-item-description-font-size)}.content{display:none;text-align:initial}:host(:not([expanded])) .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-1))));font-weight:var(--calcite-font-weight-normal)}:host([expanded]){color:var(--calcite-accordion-text-color-press, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1))))}:host([expanded]) .header{border-block-end-color:transparent}:host([expanded]) .expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))))));transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl))}:host([expanded]) .description{color:var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))))}:host([expanded]) .content{display:block}@media(forced-colors:active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}.header-content:hover .heading,.header-content:focus .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`.icon-position--end,.icon-position--start{--calcite-internal-accordion-item-icon-rotation: -90deg ;--calcite-internal-accordion-item-active-icon-rotation: 0deg;--calcite-internal-accordion-item-icon-rotation-rtl: 90deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: 0deg}:host([scale=s]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xxs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xxs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--1)}:host{position:relative;display:flex;flex-direction:column;text-decoration-line:none;color:var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));background-color:var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));border-width:0}:host .header{background-color:var(--calcite-accordion-item-header-background-color)}:host .header:hover{background-color:var(--calcite-internal-accordion-item-header-background-color-hover)}:host .header:active{background-color:var(--calcite-internal-accordion-item-header-background-color-press)}.header--solid{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-foreground-3) )}.header--transparent{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-transparent-hover) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-transparent-press) )}.icon-position--start{--calcite-internal-accordion-item-flex-direction: row-reverse;--calcite-internal-accordion-item-icon-spacing-start: 0;--calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin)}.icon-position--end{--calcite-internal-accordion-item-flex-direction: row;--calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);--calcite-internal-accordion-item-icon-spacing-end: 0}.icon-position--end:not(.icon-type--plus-minus){--calcite-internal-accordion-item-icon-rotation: 0deg;--calcite-internal-accordion-item-active-icon-rotation: 180deg;--calcite-internal-accordion-item-icon-rotation-rtl: 0deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: -180deg }.content,.header{border-block-end-width:var(--calcite-border-width-sm);border-block-end-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-accordion-item-border-color, var(--calcite-color-border-2)))}.header-content{padding:var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem));background:none;border:none;appearance:none;-webkit-appearance:none;box-shadow:none;outline:none;font-family:inherit}.content{padding:var(--calcite-accordion-item-content-space, var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem)))}.header{display:flex;align-items:stretch}.header-content,.header-container,.header .actions-start,.header .actions-end{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);overflow-wrap:break-word;word-break:break-word}.header .has-actions{gap:var(--calcite-internal-accordion-item-action-slot-spacing);padding-block:var(--calcite-internal-accordion-item-action-slot-spacing)}.header .actions-start.has-actions{padding-inline:var(--calcite-internal-accordion-item-action-slot-spacing) 0}.header .actions-end.has-actions{padding-inline:0 var(--calcite-internal-accordion-item-action-slot-spacing)}.header-content{flex-grow:1;cursor:pointer;outline-color:transparent;flex-direction:var(--calcite-internal-accordion-item-flex-direction);color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit))}.header-content: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))))}.header-content:focus,.header-content:hover,.header-content:active{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover))}.header-content:focus .heading,.header-content:hover .heading,.header-content:active .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-press))}.header-container{inline-size:100%}.slot-content-end{margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.slot-content-start{margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}.heading,.description{display:flex;inline-size:100%;line-height:var(--calcite-font-line-height-relative-snug)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2)}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0)}.icon{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-end)}.icon--start{color:var(--calcite-accordion-item-icon-color-start, var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.icon--end{color:var(--calcite-accordion-item-icon-color-end, var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin);margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3))));margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-internal-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl))}.description{font-size:var(--calcite-internal-accordion-item-description-font-size)}.content{display:none;text-align:initial}:host(:not([expanded])) .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-1))));font-weight:var(--calcite-font-weight-normal)}:host([expanded]){color:var(--calcite-accordion-text-color-press, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1))))}:host([expanded]) .header{border-block-end-color:transparent}:host([expanded]) .expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))))));transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl))}:host([expanded]) .description{color:var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))))}:host([expanded]) .content{display:block}@media(forced-colors:active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}.header-content:hover .heading,.header-content:focus .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}`;
 class AccordionItem extends LitElement {
   constructor() {
     super();
@@ -70,7 +70,7 @@ class AccordionItem extends LitElement {
     this.listenOn(document, "calciteInternalAccordionItemsSync", this.accordionItemSyncHandler);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, { type: String }, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, {}, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement, LuminaJsx } from "@arcgis/lumina";
-import type { Alignment, Appearance, AriaAttributesCamelCased, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Alignment, Appearance, AriaAttributesCamelCased, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-action-background-color-hover] - Specifies the component's background color when hovered.
@@ -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 {
@@ -74,11 +75,15 @@ export abstract class Action extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   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`.