@esri/calcite-components 5.2.0-next.86 → 5.2.0-next.88

package/dist/components/calcite-segmented-control-item/customElement.d.ts

@@ -2,6 +2,19 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's color. */
+  "--calcite-segmented-control-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-segmented-control-background-color": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-segmented-control-shadow": "*";
+  /** Specifies the icons's color. */
+  "--calcite-segmented-control-icon-color": "*";
+}
+}
+
 export abstract class SegmentedControlItem extends LitElement {
   /**
    * When `true`, the component is checked.

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

@@ -4,6 +4,27 @@ import type { Scale, Status, Width } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 import type { Option } from "../calcite-option/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the font size of `calcite-option`s in the component. */
+  "--calcite-select-font-size": "*";
+  /** Specifies the text color of `calcite-option`s in the component. */
+  "--calcite-select-text-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-select-border-color": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-select-icon-color": "*";
+  /** Specifies the component's icon color when hovered or active. */
+  "--calcite-select-icon-color-hover": "*";
+  /** Specifies the component's background color. */
+  "--calcite-select-background-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-select-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-select-shadow": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding `calcite-option`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.

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

@@ -5,6 +5,37 @@ import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
 import type { DisplayMode } from "./types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-sheet-background-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-sheet-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-sheet-shadow": "*";
+  /** Specifies the component's text color. */
+  "--calcite-sheet-text-color": "*";
+  /** Specifies the resize handle's background color. */
+  "--calcite-sheet-resize-background-color": "*";
+  /** Specifies the resize handle's text color. */
+  "--calcite-sheet-resize-icon-color": "*";
+  /** Specifies the background color of the component's scrim. */
+  "--calcite-sheet-scrim-background": "*";
+  /** When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width. */
+  "--calcite-sheet-width": "*";
+  /** When `position` is `"inline-start"` or `"inline-end"`, specifies the component's maximum width. */
+  "--calcite-sheet-max-width": "*";
+  /** When `position` is `"inline-start"` or `"inline-end"`, specifies the component's minimum width. */
+  "--calcite-sheet-min-width": "*";
+  /** When `position` is `"block-start"` or `"block-end"`, specifies the component's height. */
+  "--calcite-sheet-height": "*";
+  /** When `position` is `"block-start"` or `"block-end"`, specifies the component's maximum height. */
+  "--calcite-sheet-max-height": "*";
+  /** When `position` is `"block-start"` or `"block-end"`, specifies the component's minimum height. */
+  "--calcite-sheet-min-height": "*";
+}
+}
+
 /** @slot  - A slot for adding custom content. */
 export abstract class Sheet extends LitElement {
   /** Passes a function to run before the component closes. */

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

@@ -1,6 +1,17 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-shell-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-shell-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-shell-shadow": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.
  * @slot [header] - A slot for adding header content. This content will be positioned at the top of the component.

package/dist/components/calcite-shell-panel/customElement.d.ts

@@ -3,6 +3,35 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Height, Layout, Position, Scale, Width } from "../types.js";
 import type { DisplayMode } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-shell-panel-background-color": "*";
+  /** When `displayMode` is `"float-all"`, specifies the component's border color. */
+  "--calcite-shell-panel-border-color": "*";
+  /** When `displayMode` is `"float-all"`, specifies the component's corner radius. */
+  "--calcite-shell-panel-corner-radius": "*";
+  /** When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float` or `float-all`, specifies the component's height. */
+  "--calcite-shell-panel-height": "*";
+  /** When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height. */
+  "--calcite-shell-panel-max-height": "*";
+  /** When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height. */
+  "--calcite-shell-panel-min-height": "*";
+  /** Specifies the component's maximum width. */
+  "--calcite-shell-panel-max-width": "*";
+  /** Specifies the resize handle's text color. */
+  "--calcite-shell-panel-resize-icon-color": "*";
+  /** When `displayMode` is `float-all`, `float-content`, or `overlay`, specifies the component's shadow. */
+  "--calcite-shell-panel-shadow": "*";
+  /** Specifies the component's text color. */
+  "--calcite-shell-panel-text-color": "*";
+  /** Specifies the component's width. */
+  "--calcite-shell-panel-width": "*";
+  /** Specifies the component's z-index value. */
+  "--calcite-shell-panel-z-index": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.

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

@@ -5,6 +5,31 @@ import type { ColorStop, DataSeries } from "../calcite-graph/types.js";
 import type { Scale, Status } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-slider-text-color": "*";
+  /** Specifies the component's track color. */
+  "--calcite-slider-track-color": "*";
+  /** Specifies the component's track fill color. */
+  "--calcite-slider-track-fill-color": "*";
+  /** Specifies the component's handle fill color. */
+  "--calcite-slider-handle-fill-color": "*";
+  /** Specifies the component's handle extension color. */
+  "--calcite-slider-handle-extension-color": "*";
+  /** Specifies the component's accent color. */
+  "--calcite-slider-accent-color": "*";
+  /** Specifies the component's tick color. */
+  "--calcite-slider-tick-color": "*";
+  /** Specifies the component's tick border color. */
+  "--calcite-slider-tick-border-color": "*";
+  /** Specifies the component's tick color when in selected range. */
+  "--calcite-slider-tick-selected-color": "*";
+  /** Specifies the component's graph color. */
+  "--calcite-slider-graph-color": "*";
+}
+}
+
 /** @slot [label-content] - A slot for rendering content next to the component's `labelText`. */
 export abstract class Slider extends LitElement {
   /**

package/dist/components/calcite-split-button/customElement.d.ts

@@ -5,6 +5,39 @@ import type { DropdownIconType } from "../calcite-button/types.js";
 import type { Appearance, FlipContext, Kind, Scale, Width } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-split-button-background-color": "*";
+  /** Specifies the component's background color when hovered. */
+  "--calcite-split-button-background-color-hover": "*";
+  /** Specifies the component's background color when focused. */
+  "--calcite-split-button-background-color-focus": "*";
+  /** Specifies the component's background color when active. */
+  "--calcite-split-button-background-color-press": "*";
+  /** Specifies the component's border color. */
+  "--calcite-split-button-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-split-button-corner-radius": "*";
+  /** Specifies the component's `iconStart` and `iconEnd` color. */
+  "--calcite-split-button-icon-color": "*";
+  /** Specifies the component's loader color. */
+  "--calcite-split-button-loader-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-split-button-text-color": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-split-button-shadow": "*";
+  /** Specifies the component's divider border color. */
+  "--calcite-split-button-divider-border-color": "*";
+  /** Specifies the component's divider color. */
+  "--calcite-split-button-divider-color": "*";
+  /** Specifies the width of the component's dropdown. */
+  "--calcite-split-button-dropdown-width": "*";
+  /** Specifies the component's dropdown background color. */
+  "--calcite-split-button-dropdown-background-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-dropdown` content. */
 export abstract class SplitButton extends LitElement {
   /**

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

@@ -1,6 +1,15 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the inline padding of the component's content. */
+  "--calcite-stack-padding-inline": "*";
+  /** Specifies the block padding of the component's content. */
+  "--calcite-stack-padding-block": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding content.
  * @slot [actions-start] - A slot for adding actionable `calcite-action` elements before the content of the component.

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

@@ -5,6 +5,29 @@ import type { NumberingSystem } from "../../utils/locale.js";
 import type { StepperItem } from "../calcite-stepper-item/customElement.js";
 import type { StepperLayout } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the space between the component's `calcite-stepper-item`s. */
+  "--calcite-stepper-bar-gap": "*";
+  /**
+   * Specifies the `calcite-stepper-item`s' bar fill color of the component's `calcite-stepper-item`s.
+   *
+   * @deprecated in 5.1.0, removal target v6.0.0 - Use `--calcite-stepper-bar-fill-color` instead.
+   */
+  "--calcite-stepper-bar-inactive-fill-color": "*";
+  /**
+   * Specifies the `calcite-stepper-item`s' bar fill color of the component's active `calcite-stepper-item`s.
+   *
+   * @deprecated in 5.1.0, removal target v6.0.0 - Use `--calcite-stepper-bar-selected-fill-color` instead.
+   */
+  "--calcite-stepper-bar-active-fill-color": "*";
+  /** When `calcite-stepper-item`s are `complete`, specifies the component's `calcite-stepper-item`s' bar fill color. */
+  "--calcite-stepper-bar-complete-fill-color": "*";
+  /** When `calcite-stepper-item`s contain an `error`, specifies the component's `calcite-stepper-item`s' bar fill color. */
+  "--calcite-stepper-bar-error-fill-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-stepper-item`s. */
 export abstract class Stepper extends LitElement {
   /**

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

@@ -1,6 +1,47 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background-color when active. */
+  "--calcite-stepper-item-background-color-press": "*";
+  /** Specifies the component's header text color. */
+  "--calcite-stepper-item-header-text-color": "*";
+  /** Specifies the component's header text color when hovered or focused. */
+  "--calcite-stepper-item-header-text-color-hover": "*";
+  /** When `selected`, specifies the component's header text color. */
+  "--calcite-stepper-item-selected-header-text-color": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-stepper-item-icon-color": "*";
+  /** When `complete`, specifies the component's icon color. */
+  "--calcite-stepper-item-complete-icon-color": "*";
+  /** When `error`, specifies the component's icon and number color. */
+  "--calcite-stepper-item-error-icon-color": "*";
+  /** When `selected`, specifies the component's icon and number color. */
+  "--calcite-stepper-item-selected-icon-color": "*";
+  /** Specifies the component's description and number text color. */
+  "--calcite-stepper-item-description-text-color": "*";
+  /** When `selected`, hovered, or focused, specifies the component's description text color. */
+  "--calcite-stepper-item-description-text-color-hover": "*";
+  /** Specifies the component's bottom spacing. */
+  "--calcite-stepper-bar-gap": "*";
+  /** Specifies the component's fill color. */
+  "--calcite-stepper-bar-fill-color": "*";
+  /** Specifies the component's fill color when hovered or focused. */
+  "--calcite-stepper-bar-fill-color-hover": "*";
+  /** When `complete`, specifies the component's fill color. */
+  "--calcite-stepper-bar-complete-fill-color": "*";
+  /** When `complete`, specifies the component's fill color when hovered or focused. */
+  "--calcite-stepper-bar-complete-fill-color-hover": "*";
+  /** When `error`, specifies the component's fill color. */
+  "--calcite-stepper-bar-error-fill-color": "*";
+  /** When `error`, specifies the component's fill color when hovered or focused. */
+  "--calcite-stepper-bar-error-fill-color-hover": "*";
+  /** When `selected`, specifies the component's fill color. */
+  "--calcite-stepper-bar-selected-fill-color": "*";
+}
+}
+
 /** @slot  - A slot for adding custom content. */
 export abstract class StepperItem extends LitElement {
   /**

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

@@ -31,8 +31,8 @@ class StepperItem extends LitElement {
     this.numbered = false;
     this.scale = "m";
     this.selected = false;
-    this.calciteInternalStepperItemUpdate = createEvent({ cancelable: false });
     this.calciteInternalStepperItemSelect = createEvent({ cancelable: false });
+    this.calciteInternalStepperItemUpdate = createEvent({ cancelable: false });
     this.calciteStepperItemSelect = createEvent({ cancelable: false });
     this.listenOn(document.body, "calciteInternalStepperItemChange", this.updateActiveItemOnChange);
     this.listen("click", this.handleItemClick);

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

@@ -2,6 +2,13 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's corner radius. */
+  "--calcite-swatch-corner-radius": "*";
+}
+}
+
 /** @slot [image] - A slot for adding an image or pattern. */
 export abstract class Swatch extends LitElement {
   /**

package/dist/components/calcite-swatch-group/customElement.d.ts

@@ -3,6 +3,13 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale, SelectionMode } from "../types.js";
 import type { Swatch } from "../calcite-swatch/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the space between slotted elements. */
+  "--calcite-swatch-group-space": "*";
+}
+}
+
 /** @slot  - A slot for adding one or more `calcite-swatch`s. */
 export abstract class SwatchGroup extends LitElement {
   /**

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

@@ -2,6 +2,37 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-switch-background-color": "*";
+  /** Specifies the component's background color when hovered or pressed. */
+  "--calcite-switch-background-color-hover": "*";
+  /**
+   * Specifies the component's border color.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - No longer necessary.
+   */
+  "--calcite-switch-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-switch-corner-radius": "*";
+  /** Specifies the handle's background color. */
+  "--calcite-switch-handle-background-color": "*";
+  /**
+   * Specifies the handle's border color.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - No longer necessary.
+   */
+  "--calcite-switch-handle-border-color": "*";
+  /**
+   * Specifies the handle's shadow.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - No longer necessary.
+   */
+  "--calcite-switch-handle-shadow": "*";
+}
+}
+
 export abstract class Switch extends LitElement {
   /**
    * When `true`, the component is checked.

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

@@ -1,6 +1,19 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the vertical space between the component's content in the `default` slot. */
+  "--calcite-tab-content-space-y": "*";
+  /**
+   * Specifies the block padding of the component's content in the `default` slot.
+   *
+   * @deprecated in v3.2.0, removal target v6.0.0 - Use `--calcite-tab-content-space-y` instead.
+   */
+  "--calcite-tab-content-block-padding": "*";
+}
+}
+
 /** @slot  - A slot for adding custom content. */
 export abstract class Tab extends LitElement {
   /**

package/dist/components/calcite-tab-nav/customElement.d.ts

@@ -3,6 +3,17 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { TabPosition } from "../calcite-tabs/types.js";
 import type { TabTitle } from "../calcite-tab-title/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-tab-background-color": "*";
+  /** When `calcite-tabs` is `bordered`, specifies the component's border color. */
+  "--calcite-tab-border-color": "*";
+  /** Specifies the component's `iconStart`, `iconEnd`, and text color. */
+  "--calcite-tab-text-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-tab-title`s. */
 export abstract class TabNav extends LitElement {
   /**

package/dist/components/calcite-tab-nav/customElement.js

@@ -62,6 +62,12 @@ class TabNav extends LitElement {
   static {
     this.styles = styles;
   }
+  get enabledTabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
+  }
+  get tabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title");
+  }
   connectedCallback() {
     super.connectedCallback();
     this.parentTabsEl = this.el.closest("calcite-tabs") ?? void 0;
@@ -110,12 +116,6 @@ class TabNav extends LitElement {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
-  get enabledTabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
-  }
-  get tabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title");
-  }
   focusPreviousTabHandler(event) {
     this.handleTabFocus(event, event.target, "previous");
   }

package/dist/components/calcite-tab-title/customElement.d.ts

@@ -4,6 +4,41 @@ import type { FlipContext } from "../types.js";
 import type { TabPosition } from "../calcite-tabs/types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-tab-text-color": "*";
+  /** Specifies the component's text color when hovered, pressed, or selected. */
+  "--calcite-tab-text-color-press": "*";
+  /** Specifies the component's border color. */
+  "--calcite-tab-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-tab-background-color": "*";
+  /** When `calcite-tabs` is `bordered`, specifies the component's background color when hovered. */
+  "--calcite-tab-background-color-hover": "*";
+  /** When `selected` or active, specifies the component's accent color. */
+  "--calcite-tab-accent-color-press": "*";
+  /** Specifies the component's `iconStart` color. */
+  "--calcite-tab-icon-color-start": "*";
+  /** When `selected`, hovered, or pressed, specifies the component's `iconStart` color. */
+  "--calcite-tab-icon-color-start-press": "*";
+  /** Specifies the component's `iconEnd` color. */
+  "--calcite-tab-icon-color-end": "*";
+  /** When `selected`, hovered, or pressed, specifies the component's `iconEnd` color. */
+  "--calcite-tab-icon-color-end-press": "*";
+  /** Specifies the component's close element icon color. */
+  "--calcite-tab-close-icon-color": "*";
+  /** Specifies the component's close element icon color when hovered, focused, and active. */
+  "--calcite-tab-close-icon-color-press": "*";
+  /** Specifies the component's close element icon background color. */
+  "--calcite-tab-close-icon-background-color": "*";
+  /** Specifies the component's close element icon background color when pressed. */
+  "--calcite-tab-close-icon-background-color-press": "*";
+  /** Specifies the component's close element icon background color when hovered. */
+  "--calcite-tab-close-icon-background-color-hover": "*";
+}
+}
+
 /**
  * Tab-titles are optionally individually closable.
  *

package/dist/components/calcite-tab-title/customElement.js

@@ -56,8 +56,8 @@ class TabTitle extends LitElement {
     this.scale = "m";
     this.selected = false;
     this.calciteInternalTabIconChanged = createEvent({ cancelable: false });
-    this.calciteInternalTabTitleRegister = createEvent({ cancelable: false });
     this.calciteInternalTabTitleCloseChange = createEvent({ cancelable: false });
+    this.calciteInternalTabTitleRegister = createEvent({ cancelable: false });
     this.calciteInternalTabsActivate = createEvent({ cancelable: false });
     this.calciteInternalTabsClose = createEvent({ cancelable: false });
     this.calciteInternalTabsFocusFirst = createEvent({ cancelable: false });

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

@@ -5,6 +5,91 @@ import type { NumberingSystem } from "../../utils/locale.js";
 import type { TableRow } from "../calcite-table-row/customElement.js";
 import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-table-border-color": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-table-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-table-shadow": "*";
+  /** Specifies the background color of the component's `numbered` cell. */
+  "--calcite-table-number-cell-background-color": "*";
+  /** Specifies the text color of the component's `numbered` cell. */
+  "--calcite-table-number-cell-text-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons. */
+  "--calcite-table-selection-cell-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s. */
+  "--calcite-table-selection-cell-background-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`. */
+  "--calcite-table-selection-cell-icon-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s. */
+  "--calcite-table-selection-cell-icon-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip. */
+  "--calcite-table-selection-chip-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip. */
+  "--calcite-table-selection-chip-border-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the corner radius of the component's selection chip. */
+  "--calcite-table-selection-chip-corner-radius": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the shadow of the component's selection chip. */
+  "--calcite-table-selection-chip-shadow": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip. */
+  "--calcite-table-selection-chip-text-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip. */
+  "--calcite-table-selection-chip-background-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip. */
+  "--calcite-table-selection-chip-border-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip. */
+  "--calcite-table-selection-chip-text-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-border-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-corner-radius": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-icon-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-shadow": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-text-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active. */
+  "--calcite-table-selection-dismiss-button-background-color-active": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered. */
+  "--calcite-table-selection-dismiss-button-background-color-hover": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active. */
+  "--calcite-table-selection-dismiss-button-border-color-active": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered. */
+  "--calcite-table-selection-dismiss-button-border-color-hover": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-border-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-corner-radius": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-shadow": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active. */
+  "--calcite-table-selection-dismiss-button-text-color-active": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered. */
+  "--calcite-table-selection-dismiss-button-text-color-hover": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-text-color": "*";
+  /** When `pageSize` is set, specifies the component's pagination item color. */
+  "--calcite-table-pagination-color": "*";
+  /** When `pageSize` is set, specifies the component's pagination item color when hovered or selected. */
+  "--calcite-table-pagination-color-hover": "*";
+  /** When `pageSize` is set, specifies the component's pagination item bottom border color when hovered. */
+  "--calcite-table-pagination-color-border-hover": "*";
+  /** When `pageSize` is set, specifies the component's pagination item bottom border color when selected. */
+  "--calcite-table-pagination-color-border-active": "*";
+  /** When `pageSize` is set, specifies the component's pagination item background color when active. */
+  "--calcite-table-pagination-background-color": "*";
+  /** When `pageSize` is set, specifies the component's pagination chevron item background color when hovered. */
+  "--calcite-table-pagination-icon-color-background-hover": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
  * @slot [table-header] - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.

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

@@ -98,14 +98,6 @@ class Table extends LitElement {
     this.readCellContentsToAT = /safari/i.test(getUserAgentString());
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.tableContainerOverflowAnimationFrame !== null) {
-      cancelAnimationFrame(this.tableContainerOverflowAnimationFrame);
-      this.tableContainerOverflowAnimationFrame = null;
-    }
-    this.tableContainerResizeObserver?.disconnect();
-  }
   willUpdate(changes) {
     if (changes.has("groupSeparator") && (this.hasUpdated || this.groupSeparator !== false) || changes.has("interactionMode") && (this.hasUpdated || this.interactionMode !== "interactive") || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("numberingSystem") || changes.has("pageSize") && (this.hasUpdated || this.pageSize !== 0) || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") || changes.has("currentPage") && (this.hasUpdated || this.currentPage > 1) && this.pageSize > 0) {
       this.updateRows();
@@ -121,6 +113,14 @@ class Table extends LitElement {
       }
     }
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.tableContainerOverflowAnimationFrame !== null) {
+      cancelAnimationFrame(this.tableContainerOverflowAnimationFrame);
+      this.tableContainerOverflowAnimationFrame = null;
+    }
+    this.tableContainerResizeObserver?.disconnect();
+  }
   handleSlotChange() {
     this.updateRows();
   }