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

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,
+  toNonAlphaMode as i,
+  HUE_LIMIT_CONSTRAINED as j,
+  normalizeAlpha as k,
+  alphaToOpacity as l,
+  SCOPE_SIZE as m,
+  normalizeHex as n,
+  opacityToAlpha as o,
+  parseMode as p,
+  isValidHex as q,
+  isLonghandHex as r,
+  isShorthandHex as s,
+  toAlphaMode 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 { i as isListItemGroup, c 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 {
-  listSelector as a,
-  listItemGroupSelector as b,
-  getListItemChildren as c,
+  CSS as C,
+  SLOTS as S,
+  getListItemChildren as a,
+  listItemSelector as b,
+  listItemGroupSelector as c,
   expandedAncestors as e,
   getDepth as g,
-  isListItem as i,
-  listItemSelector as l,
+  listSelector as l,
   updateListItemChildren as u
 };

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

@@ -1,13 +1,24 @@
 /// <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";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-accordion-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-accordion-background-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-accordion-text-color": "*";
+  /** Specifies the component's main text color on hover. */
+  "--calcite-accordion-text-color-hover": "*";
+  /** Specifies the component's main text color when pressed. */
+  "--calcite-accordion-text-color-press": "*";
+}
+}
 
 /**
- * @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.
- * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
- * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
+ * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block-group` component instead.
  * @slot  - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
  */
 export abstract class Accordion extends LitElement {
@@ -36,13 +47,11 @@ export abstract class Accordion extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"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/customElement.js

@@ -36,6 +36,9 @@ class Accordion extends LitElement {
       this.updateAccordionItems();
     }
   }
+  loaded() {
+    this.dispatchAccordionItemsSync();
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
@@ -53,6 +56,11 @@ class Accordion extends LitElement {
       item.iconType = this.iconType;
       item.scale = this.scale;
     });
+    if (this.manager.loadedCalled) {
+      this.dispatchAccordionItemsSync();
+    }
+  }
+  dispatchAccordionItemsSync() {
     document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
   }
   render() {

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

@@ -1,28 +1,72 @@
 /// <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";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-accordion-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-accordion-background-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-accordion-text-color": "*";
+  /** Specifies the component's main text color on hover. */
+  "--calcite-accordion-text-color-hover": "*";
+  /** Specifies the component's main text color when pressed. */
+  "--calcite-accordion-text-color-press": "*";
+  /**
+   * Specifies the component's background color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead.
+   */
+  "--calcite-accordion-item-background-color": "*";
+  /**
+   * Specifies the component's border color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead.
+   */
+  "--calcite-accordion-item-border-color": "*";
+  /** Specifies the component's padding. */
+  "--calcite-accordion-item-content-space": "*";
+  /** Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. */
+  "--calcite-accordion-item-end-icon-color": "*";
+  /** Specifies the component's expand icon color. */
+  "--calcite-accordion-item-expand-icon-color": "*";
+  /** Specifies the component's `heading` background color. */
+  "--calcite-accordion-item-header-background-color": "*";
+  /** Specifies the component's `heading` background color when hovered. */
+  "--calcite-accordion-item-header-background-color-hover": "*";
+  /** Specifies the component's `heading` background color when pressed. */
+  "--calcite-accordion-item-header-background-color-press": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-accordion-item-heading-text-color": "*";
+  /**
+   * Specifies the component's default icon color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead.
+   */
+  "--calcite-accordion-item-icon-color": "*";
+  /** Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. */
+  "--calcite-accordion-item-start-icon-color": "*";
+  /**
+   * Specifies the component's text color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead.
+   */
+  "--calcite-accordion-item-text-color": "*";
+  /**
+   * Specifies the component's text color on hover.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead.
+   */
+  "--calcite-accordion-item-text-color-hover": "*";
+}
+}
+
 /**
- * @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.
- * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
- * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
- * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead. Specifies the component's background color.
- * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead. Specifies the component's border color.
- * @cssproperty [--calcite-accordion-item-content-space] - Specifies the component's padding.
- * @cssproperty [--calcite-accordion-item-end-icon-color] - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-expand-icon-color] - Specifies the component's expand icon color.
- * @cssproperty [--calcite-accordion-item-header-background-color] - Specifies the component's `heading` background color.
- * @cssproperty [--calcite-accordion-item-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
- * @cssproperty [--calcite-accordion-item-header-background-color-press] - Specifies the component's `heading` background color when pressed.
- * @cssproperty [--calcite-accordion-item-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's default icon color.
- * @cssproperty [--calcite-accordion-item-start-icon-color] - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead. Specifies the component's text color.
- * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead. Specifies the component's text color on hover.
+ * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block` component instead.
  * @slot  - A slot for adding custom content, including nested `calcite-accordion-item`s.
  * @slot [actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
@@ -48,10 +92,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.