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

package/dist/components/calcite-color-picker/customElement.d.ts

@@ -5,6 +5,45 @@ import type { NumberingSystem } from "../../utils/locale.js";
 import type { Format } from "./utils.js";
 import type { ColorValue } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-color-picker-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-color-picker-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-color-picker-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-color-picker-shadow": "*";
+  /** Specifies the component's text color. */
+  "--calcite-color-picker-text-color": "*";
+  /** Specifies the component's input background color. */
+  "--calcite-color-picker-input-background-color": "*";
+  /** Specifies the component's input border color. */
+  "--calcite-color-picker-input-border-color": "*";
+  /** Specifies the component's input text color. */
+  "--calcite-color-picker-input-text-color": "*";
+  /** When `hexDisabled` is not `true`, specifies the component's input prefix text color. */
+  "--calcite-color-picker-input-prefix-text-color": "*";
+  /** When `alphaChannel` is `true`, specifies the component's input suffix text color. */
+  "--calcite-color-picker-input-suffix-text-color": "*";
+  /** Specifies the component's tab border color. */
+  "--calcite-color-picker-tab-border-color": "*";
+  /** Specifies the component's tab text color. */
+  "--calcite-color-picker-tab-text-color": "*";
+  /** Specifies the component's tab accent color when selected or active. */
+  "--calcite-color-picker-tab-accent-color-press": "*";
+  /** Specifies the component's swatch corner radius. */
+  "--calcite-color-picker-swatch-corner-radius": "*";
+  /** Specifies the component's `savedColors` action text color when pressed. */
+  "--calcite-color-picker-action-text-color-press": "*";
+  /** Specifies the component's `savedColors` action text color when hovered. */
+  "--calcite-color-picker-action-text-color-hover": "*";
+  /** Specifies the component's `savedColors` action text color. */
+  "--calcite-color-picker-action-text-color": "*";
+}
+}
+
 export abstract class ColorPicker extends LitElement {
   /**
    * When `true`, the component will allow updates to the color's alpha value.

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

@@ -6,6 +6,29 @@ import type { IconName } from "../calcite-icon/types.js";
 import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../calcite-combobox-item/customElement.js";
 import type { SelectionDisplay } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's divider color. */
+  "--calcite-combobox-divider-color": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-combobox-icon-color": "*";
+  /** Specifies the component's icon color when hovered. */
+  "--calcite-combobox-icon-color-hover": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-combobox-corner-radius": "*";
+  /** Specifies the background color of the component's listbox. */
+  "--calcite-combobox-background-color": "*";
+  /** Specifies the border color of the component's input. */
+  "--calcite-combobox-input-border-color": "*";
+  /** Specifies the background color of the component's input. */
+  "--calcite-combobox-input-background-color": "*";
+  /** Specifies the height of the component's input. */
+  "--calcite-combobox-input-height": "*";
+  /** When `selectionDisplay` is `"single"`, specifies the text color of the component's input. */
+  "--calcite-combobox-input-text-color": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding `calcite-combobox-item`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.

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

@@ -3,6 +3,35 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ComboboxChildElement } from "../calcite-combobox/types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's border color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0.
+   */
+  "--calcite-combobox-item-border-color": "*";
+  /** Specifies the component's text and `icon` color. */
+  "--calcite-combobox-text-color": "*";
+  /** Specifies the component's text and `icon` color when hovered. */
+  "--calcite-combobox-text-color-hover": "*";
+  /** When `active`, specifies the component's background color. */
+  "--calcite-combobox-item-background-color-active": "*";
+  /** Specifies the component's background color when hovered. */
+  "--calcite-combobox-item-background-color-hover": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-combobox-item-shadow": "*";
+  /** Specifies the component's `selected` indicator icon color. */
+  "--calcite-combobox-selected-icon-color": "*";
+  /** Specifies the component's `description` and `shortHeading` text color. */
+  "--calcite-combobox-description-text-color": "*";
+  /** Specifies the component's `description` and `shortHeading` text color when hovered. */
+  "--calcite-combobox-description-text-color-press": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-combobox-heading-text-color": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding nested `calcite-combobox-item`s.
  * @slot [content-end] - A slot for adding non-actionable elements after the component's content.

package/dist/components/calcite-combobox-item-group/customElement.d.ts

@@ -2,6 +2,15 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ComboboxChildElement } from "../calcite-combobox/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-combobox-item-group-text-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-combobox-item-group-border-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-combobox-item`s. */
 export abstract class ComboboxItemGroup extends LitElement {
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */

package/dist/components/calcite-date-picker/customElement.d.ts

@@ -3,6 +3,61 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-date-picker-border-color": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-date-picker-corner-radius": "*";
+  /** When `range` is `true`, specifies the divider color between the component's calendars. */
+  "--calcite-date-picker-range-calendar-divider-color": "*";
+  /** Specifies the text color of the component's week header. */
+  "--calcite-date-picker-week-header-text-color": "*";
+  /** Specifies the background color of component`s header actions. */
+  "--calcite-date-picker-header-action-background-color": "*";
+  /** Specifies the background color of component`s header actions when hovered. */
+  "--calcite-date-picker-header-action-background-color-hover": "*";
+  /** Specifies the background color of component`s header actions when pressed. */
+  "--calcite-date-picker-header-action-background-color-press": "*";
+  /** Specifies the text color of the component's header actions. */
+  "--calcite-date-picker-header-action-text-color": "*";
+  /** Specifies the text color of the component's header actions when pressed. */
+  "--calcite-date-picker-header-action-text-color-press": "*";
+  /** Specifies the text color of the component's year and suffix. */
+  "--calcite-date-picker-year-text-color": "*";
+  /** Specifies the font size of the component's month selector. */
+  "--calcite-date-picker-month-select-font-size": "*";
+  /** Specifies the text color of the component's month selector. */
+  "--calcite-date-picker-month-select-text-color": "*";
+  /** Specifies the icon color of the component's month selector. */
+  "--calcite-date-picker-month-select-icon-color": "*";
+  /** Specifies the icon color of the component's month selector when hovered. */
+  "--calcite-date-picker-month-select-icon-color-hover": "*";
+  /** Specifies the background color of the component's day elements. */
+  "--calcite-date-picker-day-background-color": "*";
+  /** Specifies the background color of the component's day elements when hovered. */
+  "--calcite-date-picker-day-background-color-hover": "*";
+  /** Specifies the text color of the component's day elements. */
+  "--calcite-date-picker-day-text-color": "*";
+  /** Specifies the text color of the component's day elements when hovered. */
+  "--calcite-date-picker-day-text-color-hover": "*";
+  /** Specifies the text color of the component's current day. */
+  "--calcite-date-picker-current-day-text-color": "*";
+  /** Specifies the background color of the component's selected day. */
+  "--calcite-date-picker-day-background-color-selected": "*";
+  /** Specifies the text color of the component's selected day elements. */
+  "--calcite-date-picker-day-text-color-selected": "*";
+  /** Specifies the text color of component's selected day range. */
+  "--calcite-date-picker-day-range-text-color": "*";
+  /** Specifies the background color the component's selected day range. */
+  "--calcite-date-picker-day-range-background-color": "*";
+  /** Specifies the background color of the component's day elements outside the current range when hovered. */
+  "--calcite-date-picker-day-outside-range-background-color-hover": "*";
+  /** Specifies the text color of the component's day elements outside the current range when hovered. */
+  "--calcite-date-picker-day-outside-range-text-color-hover": "*";
+}
+}
+
 export abstract class DatePicker extends LitElement {
   /** Specifies the component's active date. */
   accessor activeDate: Date | undefined;

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

@@ -7,6 +7,73 @@ import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
 import type { IconName } from "../calcite-icon/types.js";
 import type { DialogPlacement } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the background color of the component's scrim. */
+  "--calcite-dialog-scrim-background-color": "*";
+  /** When `placement` is `"cover"`, specifies the component's width, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width. */
+  "--calcite-dialog-size-x": "*";
+  /** Specifies the component's minimum width, using `px`, `em`, `rem`, `vw`, or `%`. */
+  "--calcite-dialog-min-size-x": "*";
+  /** Specifies the component's maximum width, using `px`, `em`, `rem`, `vw`, or `%`. */
+  "--calcite-dialog-max-size-x": "*";
+  /** When `placement` is `"cover"`, specifies the component's height, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height. */
+  "--calcite-dialog-size-y": "*";
+  /** Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`. */
+  "--calcite-dialog-min-size-y": "*";
+  /** Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`. */
+  "--calcite-dialog-max-size-y": "*";
+  /** Specifies the padding of the component's content. */
+  "--calcite-dialog-content-space": "*";
+  /** Specifies the padding of the component's `content-top` slot. */
+  "--calcite-dialog-content-top-space": "*";
+  /** Specifies the padding of the component's `content-bottom` slot. */
+  "--calcite-dialog-content-bottom-space": "*";
+  /** Specifies the padding of the component's `header-top` slot. */
+  "--calcite-dialog-header-top-space": "*";
+  /** Specifies the padding of the component's footer. */
+  "--calcite-dialog-footer-space": "*";
+  /** Specifies the component's border color. */
+  "--calcite-dialog-border-color": "*";
+  /** Specifies the component's horizontal offset. */
+  "--calcite-dialog-offset-x": "*";
+  /** Specifies the component's vertical offset. */
+  "--calcite-dialog-offset-y": "*";
+  /** Specifies the component's background color. */
+  "--calcite-dialog-background-color": "*";
+  /** Specifies the color of the component's icon. */
+  "--calcite-dialog-icon-color": "*";
+  /** When `kind` is specified, specifies the component's accent color. */
+  "--calcite-dialog-accent-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-dialog-corner-radius": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-dialog-heading-text-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-dialog-description-text-color": "*";
+  /** Specifies the background color of the component's header. */
+  "--calcite-dialog-header-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s. */
+  "--calcite-dialog-header-action-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when hovered. */
+  "--calcite-dialog-header-action-background-color-hover": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed. */
+  "--calcite-dialog-header-action-background-color-press": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s. */
+  "--calcite-dialog-header-action-text-color": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed or hovered. */
+  "--calcite-dialog-header-action-text-color-press": "*";
+  /** Specifies the background color of the component's footer. */
+  "--calcite-dialog-footer-background-color": "*";
+  /** Specifies the padding of the component's `unnamed (default)` slot. */
+  "--calcite-dialog-space": "*";
+  /** Specifies the padding of the component's `header-content` slot. */
+  "--calcite-dialog-header-content-space": "*";
+  /** Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. */
+  "--calcite-dialog-action-menu-border-color": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding content.
  * @slot [custom-content] - A slot for displaying custom content. Will prevent the rendering of any default component UI, except for `box-shadow` and `corner-radius`.

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

@@ -4,9 +4,20 @@ import type { FlipPlacement, LogicalPlacement, OverlayPositioning, ReferenceElem
 import type { Scale, Width } from "../types.js";
 import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the width of the component's wrapper. */
+  "--calcite-dropdown-width": "*";
+  /** Specifies the component's background color. */
+  "--calcite-dropdown-background-color": "*";
+  /** Specifies the maximum height of the component's wrapper. */
+  "--calcite-dropdown-max-height": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
- * @slot [trigger] - [deprecated] in v5.1.0, removal target v7.0.0 - Use the `referenceElement` property instead. A slot for the element that triggers the component.
+ * @slot [trigger] - DEPRECATED in v5.1.0, removal target v7.0.0 - Use the `referenceElement` property instead.
  */
 export abstract class Dropdown extends LitElement {
   /**

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

@@ -97,10 +97,6 @@ class Dropdown extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.referenceEl instanceof HTMLElement ? this.referenceEl : this.floatingEl, options);
   }
-  load() {
-    this.listenOn(document, "click", this.closeCalciteDropdownOnClick);
-    this.listenOn(document, "calciteDropdownOpen", this.closeCalciteDropdownOnOpenEvent);
-  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -108,6 +104,10 @@ class Dropdown extends LitElement {
     this.updateItems();
     connectFloatingUI(this);
   }
+  load() {
+    this.listenOn(document, "click", this.closeCalciteDropdownOnClick);
+    this.listenOn(document, "calciteDropdownOpen", this.closeCalciteDropdownOnOpenEvent);
+  }
   willUpdate(changes) {
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
       this.openHandler();

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

@@ -2,6 +2,15 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { SelectionMode } from "../types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-dropdown-group-border-color": "*";
+  /** Specifies the component's `groupTitle` color. */
+  "--calcite-dropdown-group-title-text-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-dropdown-item`s. */
 export abstract class DropdownGroup extends LitElement {
   /** When specified, displays a group title. */

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

@@ -3,6 +3,27 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipContext } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color when hovered. */
+  "--calcite-dropdown-item-background-color-hover": "*";
+  /** Specifies the component's background color when `selected` or active. */
+  "--calcite-dropdown-item-background-color-press": "*";
+  /**
+   * Specifies the color of the component's selection icon when hovered.
+   *
+   * @deprecated in v5.0.0, removal target v6.0.0.
+   */
+  "--calcite-dropdown-item-icon-color-hover": "*";
+  /** Specifies the color of the component's selection icon when `selected` or active. */
+  "--calcite-dropdown-item-icon-color-press": "*";
+  /** Specifies the component's text color when `selected` or active. */
+  "--calcite-dropdown-item-text-color-press": "*";
+  /** Specifies the component's text color. */
+  "--calcite-dropdown-item-text-color": "*";
+}
+}
+
 /** @slot  - A slot for adding text. */
 export abstract class DropdownItem extends LitElement {
   /**

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

@@ -31,9 +31,6 @@ class DropdownItem extends LitElement {
   static {
     this.styles = styles;
   }
-  async setFocus(options) {
-    return this.focusSetter(() => this.el, options);
-  }
   async activateItem() {
     if (this.disabled) {
       return;
@@ -44,6 +41,9 @@ class DropdownItem extends LitElement {
     }
     this.emitRequestedItem();
   }
+  async setFocus(options) {
+    return this.focusSetter(() => this.el, options);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.initialize();

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

@@ -3,6 +3,23 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Appearance, Kind, Scale } 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-fab-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-fab-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-fab-corner-radius": "*";
+  /** Specifies the component's text color. */
+  "--calcite-fab-text-color": "*";
+  /** Specifies the component's loader color. */
+  "--calcite-fab-loader-color": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-fab-shadow": "*";
+}
+}
+
 export abstract class Fab extends LitElement {
   /**
    * Specifies the component's appearance style.

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

@@ -2,6 +2,39 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the padding of the component's content. */
+  "--calcite-filter-content-space": "*";
+  /** Specifies the component's input background color. */
+  "--calcite-filter-input-background-color": "*";
+  /** Specifies the component's input border color. */
+  "--calcite-filter-input-border-color": "*";
+  /** Specifies the component's input corner radius. */
+  "--calcite-filter-input-corner-radius": "*";
+  /** Specifies the component's input shadow. */
+  "--calcite-filter-input-shadow": "*";
+  /** Specifies the component's input icon color. */
+  "--calcite-filter-input-icon-color": "*";
+  /** Specifies the component's input text color. */
+  "--calcite-filter-input-text-color": "*";
+  /** Specifies the component's input placeholder text color. */
+  "--calcite-filter-input-placeholder-text-color": "*";
+  /** Specifies the background color of the component's input `clearable` element. */
+  "--calcite-filter-input-actions-background-color": "*";
+  /** Specifies the background color of the component's input `clearable` element when hovered. */
+  "--calcite-filter-input-actions-background-color-hover": "*";
+  /** Specifies the background color of the component's input `clearable` element when pressed. */
+  "--calcite-filter-input-actions-background-color-press": "*";
+  /** Specifies the icon color of the component's input `clearable` element. */
+  "--calcite-filter-input-actions-icon-color": "*";
+  /** Specifies the icon color of the component's input `clearable` element when hovered. */
+  "--calcite-filter-input-actions-icon-color-hover": "*";
+  /** Specifies the icon color of the component's input `clearable` element when pressed. */
+  "--calcite-filter-input-actions-icon-color-press": "*";
+}
+}
+
 export abstract class Filter extends LitElement {
   /**
    * When `true`, prevents interaction and decreases the component's opacity.

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

@@ -3,6 +3,13 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlowItem } from "../calcite-flow-item/customElement.js";
 import type { FlowItemLikeElement } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-flow-background-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-flow-item`s to the component. */
 export abstract class Flow extends LitElement {
   /**

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

@@ -6,6 +6,75 @@ import type { CollapseDirection, Scale } from "../types.js";
 import type { Panel } from "../calcite-panel/customElement.js";
 import type { IconName } from "../calcite-icon/types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the padding of the component's footer.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-footer-space` instead.
+   */
+  "--calcite-flow-item-footer-padding": "*";
+  /**
+   * Specifies the component header's block end border.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-border-color` instead.
+   */
+  "--calcite-flow-item-header-border-block-end": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-flow-corner-radius": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-flow-heading-text-color": "*";
+  /** Specifies the color of the component's `icon`. */
+  "--calcite-flow-icon-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-flow-description-text-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-flow-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-flow-background-color": "*";
+  /** Specifies the padding of the component's `content-top` slot. */
+  "--calcite-flow-content-top-space": "*";
+  /** Specifies the padding of the component's `content-bottom` slot. */
+  "--calcite-flow-content-bottom-space": "*";
+  /** Specifies the padding of the component's `header-top` slot. */
+  "--calcite-flow-header-top-space": "*";
+  /** Specifies the background color of the component's header. */
+  "--calcite-flow-header-background-color": "*";
+  /** Specifies the background color of the component's footer. */
+  "--calcite-flow-footer-background-color": "*";
+  /** Specifies the padding of the component's `unnamed (default)` slot. */
+  "--calcite-flow-space": "*";
+  /** Specifies the padding of the component's `header-content` slot. */
+  "--calcite-flow-header-content-space": "*";
+  /** Specifies the padding of the component's footer. */
+  "--calcite-flow-footer-space": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. */
+  "--calcite-action-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. */
+  "--calcite-action-background-color-hover": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. */
+  "--calcite-action-background-color-pressed": "*";
+  /** Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. */
+  "--calcite-action-text-color-hover": "*";
+  /** Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. */
+  "--calcite-action-text-color-pressed": "*";
+  /** Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. */
+  "--calcite-popover-border-color": "*";
+  /** Specifies the background color of any `calcite-action`s in the component's header when hovered. */
+  "--calcite-flow-header-action-background-color-hover": "*";
+  /** Specifies the background color of any `calcite-action`s in the component's header when pressed. */
+  "--calcite-flow-header-action-background-color-press": "*";
+  /** Specifies the background color of any `calcite-action`s in the component's header. */
+  "--calcite-flow-header-action-background-color": "*";
+  /** Specifies the color of any `calcite-action`s indicator in the component's header. */
+  "--calcite-flow-header-action-indicator-color": "*";
+  /** Specifies the text color of any `calcite-action`s in the component's header when pressed. */
+  "--calcite-flow-header-action-text-color-press": "*";
+  /** Specifies the text color of any `calcite-action`s in the component's header. */
+  "--calcite-flow-header-action-text-color": "*";
+}
+}
+
 /**
  * @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-graph/customElement.d.ts

@@ -2,6 +2,13 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ColorStop, DataSeries } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the fill color of the `highlight` element, when present. */
+  "--calcite-graph-highlight-fill-color": "*";
+}
+}
+
 export abstract class Graph extends LitElement {
   /**
    * Array of values describing a single color stop ([offset, color, opacity])

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

@@ -2,6 +2,23 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HandleNudge } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-handle-background-color": "*";
+  /** Specifies the component's background color on hover. */
+  "--calcite-handle-background-color-hover": "*";
+  /** Specifies the component's background color when selected. */
+  "--calcite-handle-background-color-selected": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-handle-icon-color": "*";
+  /** Specifies the component's icon color on hover. */
+  "--calcite-handle-icon-color-hover": "*";
+  /** Specifies the component's icon color when selected. */
+  "--calcite-handle-icon-color-selected": "*";
+}
+}
+
 /** @deprecated in v3.0.0, removal target v6.0.0. Use the `calcite-sort-handle` component instead. */
 export abstract class Handle extends LitElement {
   /**

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

@@ -3,6 +3,19 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 import type { IconName } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the component's color. Defaults to current color.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-icon-color` instead.
+   */
+  "--calcite-ui-icon-color": "*";
+  /** Specifies the component's color. Defaults to current color. */
+  "--calcite-icon-color": "*";
+}
+}
+
 export abstract class Icon extends LitElement {
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.