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

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

@@ -4,6 +4,13 @@ import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../
 import type { Appearance, Scale } from "../types.js";
 import type { Action } from "../calcite-action/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the space between actions in the menu. */
+  "--calcite-action-menu-items-space": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding `calcite-action`s.
  * @slot [trigger] - A slot for adding a `calcite-action` to trigger opening the menu.

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

@@ -3,6 +3,17 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Layout, Position, Scale, SelectionAppearance } from "../types.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border radius. */
+  "--calcite-action-pad-corner-radius": "*";
+  /** When `expanded` and `layout` is `"vertical"`, specifies the component's maximum width. */
+  "--calcite-action-pad-expanded-max-width": "*";
+  /** Specifies the component's space between slotted components. */
+  "--calcite-action-pad-items-space": "*";
+}
+}
+
 /**
  * @deprecated in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead.
  * @slot  - A slot for adding `calcite-action`s to the component.

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

@@ -6,6 +6,21 @@ import type { Kind, Scale } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 import type { AlertDuration, AlertQueue } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's width. */
+  "--calcite-alert-width": "*";
+  /** Specifies the component's background color. */
+  "--calcite-alert-background-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-alert-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-alert-shadow": "*";
+  /** Specifies the component's `placement` offset. */
+  "--calcite-alert-offset-size": "*";
+}
+}
+
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.

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

@@ -4,6 +4,57 @@ import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../uti
 import type { Alignment, Scale, Status } 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-autocomplete-background-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-autocomplete-corner-radius": "*";
+  /** Specifies the component's text color. */
+  "--calcite-autocomplete-text-color": "*";
+  /** Specifies the maximum height of the component's menu. */
+  "--calcite-autocomplete-menu-max-size-y": "*";
+  /** Specifies the input's prefix width, when present. */
+  "--calcite-autocomplete-input-prefix-size": "*";
+  /** Specifies the input's suffix width, when present. */
+  "--calcite-autocomplete-input-suffix-size": "*";
+  /** Specifies the background color of the component's input. */
+  "--calcite-autocomplete-input-background-color": "*";
+  /** Specifies the border color of the component's input. */
+  "--calcite-autocomplete-input-border-color": "*";
+  /** Specifies the corner radius of the component's input. */
+  "--calcite-autocomplete-input-corner-radius": "*";
+  /** Specifies the shadow of the component's input. */
+  "--calcite-autocomplete-input-shadow": "*";
+  /** Specifies the icon color of the component's input. */
+  "--calcite-autocomplete-input-icon-color": "*";
+  /** Specifies the text color of the component's input. */
+  "--calcite-autocomplete-input-text-color": "*";
+  /** Specifies the placeholder text color of the component's input. */
+  "--calcite-autocomplete-input-placeholder-text-color": "*";
+  /** Specifies the background color of the input's `clearable` element. */
+  "--calcite-autocomplete-input-actions-background-color": "*";
+  /** Specifies the background color of the input's `clearable` element when hovered. */
+  "--calcite-autocomplete-input-actions-background-color-hover": "*";
+  /** Specifies the background color of the input's `clearable` element when pressed. */
+  "--calcite-autocomplete-input-actions-background-color-press": "*";
+  /** Specifies the icon color of the input's `clearable` element. */
+  "--calcite-autocomplete-input-actions-icon-color": "*";
+  /** Specifies the icon color of the input's `clearable` element when hovered. */
+  "--calcite-autocomplete-input-actions-icon-color-hover": "*";
+  /** Specifies the icon color of the input's `clearable` element when pressed. */
+  "--calcite-autocomplete-input-actions-icon-color-press": "*";
+  /** Specifies the background color of the Input's `loading` element, when present. */
+  "--calcite-autocomplete-input-loading-background-color": "*";
+  /** Specifies the fill color of the Input's `loading` element, when present. */
+  "--calcite-autocomplete-input-loading-fill-color": "*";
+  /** Specifies the text color of the Input's prefix, when present. */
+  "--calcite-autocomplete-input-prefix-text-color": "*";
+  /** Specifies the text color of the Input's suffix, when present. */
+  "--calcite-autocomplete-input-suffix-text-color": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding `calcite-autocomplete-item` elements.
  * @slot [content-bottom] - A slot for adding content below `calcite-autocomplete-item` elements.

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

@@ -136,13 +136,13 @@ class Autocomplete extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.referenceEl, options);
   }
-  load() {
-    this.listenOn(document, "click", this.documentClickHandler);
-  }
   connectedCallback() {
     super.connectedCallback();
     connectFloatingUI(this);
   }
+  load() {
+    this.listenOn(document, "click", this.documentClickHandler);
+  }
   willUpdate(changes) {
     if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) {
       this.handleDisabledChange(this.disabled);

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

@@ -3,6 +3,19 @@ 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. */
+  "--calcite-autocomplete-background-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-autocomplete-description-text-color": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-autocomplete-heading-text-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-autocomplete-text-color": "*";
+}
+}
+
 /**
  * @slot [content-end] - A slot for adding non-actionable elements after content of the component.
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.

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

@@ -2,6 +2,17 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { AutocompleteItem } from "../calcite-autocomplete-item/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-autocomplete-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-autocomplete-border-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-autocomplete-text-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-autocomplete-item`s. */
 export abstract class AutocompleteItemGroup extends LitElement {
   /**

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

@@ -2,6 +2,17 @@
 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-avatar-corner-radius": "*";
+  /** Specifies the component's icon or initial color. */
+  "--calcite-avatar-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-avatar-background-color": "*";
+}
+}
+
 export abstract class Avatar extends LitElement {
   /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
   accessor fullName: string | undefined;

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

@@ -6,6 +6,81 @@ import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../
 import type { IconName } from "../calcite-icon/types.js";
 import type { BlockToggleDisplay } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-block-border-color": "*";
+  /** Specifies the space of the component's `default` slot. */
+  "--calcite-block-content-space": "*";
+  /** Specifies the component's background color. */
+  "--calcite-block-background-color": "*";
+  /**
+   * Specifies the component's `heading` background color.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `--calcite-block-background-color` instead.
+   */
+  "--calcite-block-header-background-color": "*";
+  /** Specifies the component's `heading` background color when hovered. */
+  "--calcite-block-header-background-color-hover": "*";
+  /** Specifies the component's `heading` background color when pressed. */
+  "--calcite-block-header-background-color-press": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-block-heading-text-color": "*";
+  /**
+   * When the component is `expanded`, specifies the `heading` text color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-block-heading-text-color` instead.
+   */
+  "--calcite-block-heading-text-color-press": "*";
+  /**
+   * Specifies the padding of the component's `default` slot.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-block-content-space` instead.
+   */
+  "--calcite-block-padding": "*";
+  /**
+   * Specifies the component's text color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0.
+   */
+  "--calcite-block-text-color": "*";
+  /** Specifies the component's `description` text color. */
+  "--calcite-block-description-text-color": "*";
+  /**
+   * Specifies the component's `expandable` icon, `iconStart` and `iconEnd` color.
+   *
+   * @deprecated in v5.1.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color`, `--calcite-block-icon-start-color` and `--calcite-block-icon-end-color` instead.
+   */
+  "--calcite-block-icon-color": "*";
+  /**
+   * Specifies the component's `expandable` icon color when hovered.
+   *
+   * @deprecated in v5.1.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color-hover` instead.
+   */
+  "--calcite-block-icon-color-hover": "*";
+  /** Specifies the component's `iconStart` color. */
+  "--calcite-block-icon-start-color": "*";
+  /** Specifies the component's `iconEnd` color. */
+  "--calcite-block-icon-end-color": "*";
+  /** Specifies the component's `expandable` icon color. */
+  "--calcite-block-expandable-icon-color": "*";
+  /** Specifies the component's `expandable` icon color when hovered. */
+  "--calcite-block-expandable-icon-color-hover": "*";
+  /**
+   * Specifies the component's `expandable` or `collapsible` (deprecated) icon color.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color` instead.
+   */
+  "--calcite-block-collapsible-icon-color": "*";
+  /**
+   * Specifies the component's `expandable` or `collapsible` (deprecated) icon color when hovered.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color-hover` instead.
+   */
+  "--calcite-block-collapsible-icon-color-hover": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding custom content.
  * @slot [actions-end] - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.

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

@@ -56,10 +56,10 @@ class Block extends LitElement {
     this.calciteBlockSortHandleClose = createEvent({ cancelable: false });
     this.calciteBlockSortHandleOpen = createEvent({ cancelable: false });
     this.calciteBlockToggle = createEvent({ cancelable: false });
-    this.calciteInternalBlockUpdateSortMenuItems = createEvent({ cancelable: false });
     this.calciteInternalBlockChange = createEvent({
       cancelable: false
     });
+    this.calciteInternalBlockUpdateSortMenuItems = createEvent({ cancelable: false });
   }
   static {
     this.properties = { hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasMenuActions: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandable: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], label: 1, menuFlipPlacements: [0, {}, { attribute: false }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], sortDisabled: [5, {}, { type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], toggleDisplay: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };

package/dist/components/calcite-block-section/customElement.d.ts

@@ -4,6 +4,23 @@ import type { FlipContext, Scale, Status } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 import type { BlockSectionToggleDisplay } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-block-section-background-color": "*";
+  /** Specifies the component's border color. When `expanded`, applies to the component's bottom border. */
+  "--calcite-block-section-border-color": "*";
+  /** Specifies the component's header text color. */
+  "--calcite-block-section-header-text-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-block-section-text-color": "*";
+  /** Specifies the component's text color on hover. */
+  "--calcite-block-section-text-color-hover": "*";
+  /** Specifies the padding of the component's content in `default` slot. */
+  "--calcite-block-section-content-space": "*";
+}
+}
+
 /**
  * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block` component instead.
  * @slot  - A slot for adding custom content.

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

@@ -4,6 +4,25 @@ import type { Appearance, FlipContext, Kind, Scale, Width } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 import type { ButtonAlignment } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-button-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-button-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-button-corner-radius": "*";
+  /** Specifies the component's `iconStart` and `iconEnd` color. */
+  "--calcite-button-icon-color": "*";
+  /** Specifies the component's loader color. */
+  "--calcite-button-loader-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-button-text-color": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-button-shadow": "*";
+}
+}
+
 /**
  * Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this.
  *

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

@@ -2,6 +2,47 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LogicalFlowPosition, Scale } from "../types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's accent color when `selected`. */
+  "--calcite-card-accent-color-selected": "*";
+  /** Specifies the component's background color. */
+  "--calcite-card-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-card-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-card-corner-radius": "*";
+  /** Specifies the component's selection element background color when hovered. */
+  "--calcite-card-selection-background-color-hover": "*";
+  /** Specifies the component's selection element background color when active. */
+  "--calcite-card-selection-background-color-press": "*";
+  /**
+   * Specifies the component's selection element background color.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-background-color` instead.
+   */
+  "--calcite-card-selection-background-color": "*";
+  /** Specifies the component's selection element color when hovered or focused. */
+  "--calcite-card-selection-color-hover": "*";
+  /** Specifies the component's selection element color. */
+  "--calcite-card-selection-color": "*";
+  /**
+   * Specifies the component's selection element icon color when hovered.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-selection-color-hover` instead.
+   */
+  "--calcite-card-selection-icon-color-hover": "*";
+  /**
+   * Specifies the component's selection element icon color when `selected`.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-accent-color-selected` instead.
+   */
+  "--calcite-card-selection-icon-color-selected": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-card-shadow": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding content.
  * @slot [thumbnail] - A slot for adding a thumbnail.

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

@@ -3,6 +3,19 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale, SelectionMode } from "../types.js";
 import type { Card } from "../calcite-card/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the gap between slotted elements.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-group-space` instead.
+   */
+  "--calcite-card-group-gap": "*";
+  /** Specifies the space between slotted elements. */
+  "--calcite-card-group-space": "*";
+}
+}
+
 /** @slot  - A slot for adding one or more `calcite-card`s. */
 export abstract class CardGroup extends LitElement {
   /**

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

@@ -3,6 +3,33 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { CarouselItem } from "../calcite-carousel-item/customElement.js";
 import type { ArrowType, AutoplayType, PaginationPosition } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls. */
+  "--calcite-carousel-pagination-background-color": "*";
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when hovered. */
+  "--calcite-carousel-pagination-background-color-hover": "*";
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when pressed. */
+  "--calcite-carousel-pagination-background-color-press": "*";
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when selected. */
+  "--calcite-carousel-pagination-background-color-selected": "*";
+  /** Specifies the icon color of the component's pagination items and autoplay controls. */
+  "--calcite-carousel-pagination-icon-color": "*";
+  /** Specifies the icon color of the component's pagination items when hovered or pressed. */
+  "--calcite-carousel-pagination-icon-color-hover": "*";
+  /** Specifies the icon color of the component's pagination items when selected. */
+  "--calcite-carousel-pagination-icon-color-selected": "*";
+  /** Specifies the icon color of the component's navigation arrow controls. */
+  "--calcite-carousel-control-icon-color": "*";
+  /** Specifies the icon color of the component's navigation arrow controls when hovered or pressed. */
+  "--calcite-carousel-control-icon-color-hover": "*";
+  /** Specifies the background color of the component's autoplay progress when `autoplay` is specified. */
+  "--calcite-carousel-autoplay-progress-background-color": "*";
+  /** Specifies the fill color of the component's autoplay progress when `autoplay` is specified. */
+  "--calcite-carousel-autoplay-progress-fill-color": "*";
+}
+}
+
 /** @slot  - A slot for adding `calcite-carousel-item`s. */
 export abstract class Carousel extends LitElement {
   /**

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

@@ -23,6 +23,7 @@ const CSS = {
   itemContainer: "item-container",
   itemContainerForward: "item-container--forward",
   itemContainerBackward: "item-container--backward",
+  controlsArea: "controls-area",
   pagination: "pagination",
   paginationItems: "pagination-items",
   paginationItem: "pagination-item",
@@ -54,7 +55,7 @@ const idPrefix = "calcite-carousel-container";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{outline-color:transparent;position:relative;display:flex;flex-direction:column;overflow:hidden;color:var(--calcite-color-text-2);inline-size:100%;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;align-items:flex-start;justify-content:center;overflow:auto;flex:1 1 auto;padding:var(--calcite-space-2xs);animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--calcite-space-md);inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:var(--calcite-size-xl);inline-size:var(--calcite-size-xl);position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}:host([pagination-position=top]) .container--overlaid .pagination{inset-block-start:0;inset-block-end:unset}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent;margin:0;block-size:var(--calcite-space-3xl);inline-size:var(--calcite-space-3xl);cursor:pointer;align-items:center;border-style:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{inline-size:0;padding:0;opacity:0;pointer-events:none;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{inline-size:var(--calcite-space-3xl);opacity:1;pointer-events:auto;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{outline-color:transparent;position:relative;display:flex;flex-direction:column;overflow:hidden;color:var(--calcite-color-text-2);inline-size:100%;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;align-items:flex-start;justify-content:center;overflow:auto;flex:1 1 auto;padding:var(--calcite-space-2xs);animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.controls-area{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--calcite-space-md);inline-size:auto}.pagination{display:flex;flex-direction:row;align-items:center;justify-content:center}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .controls-area{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:var(--calcite-size-xl);inline-size:var(--calcite-size-xl);position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .controls-area{inset-block-start:unset;inset-block-end:0;inset-inline:0}:host([pagination-position=top]) .container--overlaid .controls-area{inset-block-start:0;inset-block-end:unset}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent;margin:0;block-size:var(--calcite-space-3xl);inline-size:var(--calcite-space-3xl);cursor:pointer;align-items:center;border-style:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{inline-size:0;padding:0;opacity:0;pointer-events:none;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{inline-size:var(--calcite-space-3xl);opacity:1;pointer-events:auto;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Carousel extends LitElement {
   constructor() {
     super(...arguments);
@@ -246,9 +247,6 @@ class Carousel extends LitElement {
   }
   handleSlotChange(event) {
     const items = slotChangeGetAssignedElements(event);
-    if (items.length < 1) {
-      return;
-    }
     const activeItemIndex = items.findIndex((item) => item.selected);
     const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;
     this.items = items;
@@ -420,15 +418,19 @@ class Carousel extends LitElement {
       [CSS.autoplayControl]: true
     })} @click=${this.toggleRotation} title=${text ?? nothing}><calcite-icon .icon=${this.playing ? ICONS.pause : ICONS.play} scale=s></calcite-icon>${this.playing && html`<calcite-progress class=${safeClassMap(CSS.autoplayProgress)} .label=${this.messages.carouselItemProgress} .value=${formattedValue}></calcite-progress>` || ""}</button>`;
   }
-  renderPaginationArea() {
+  renderControlsArea() {
+    const showRotationControl = (this.playing || this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") && this.hasMultiple;
+    const showInlineArrows = this.arrowType === "inline" && this.hasMultiple;
+    if (this.paginationDisabled && !showRotationControl && !showInlineArrows) {
+      return;
+    }
     return html`<div class=${safeClassMap({
-      [CSS.pagination]: true,
-      [CSS.containerOverlaid]: this.controlOverlay
-    })} @keydown=${this.tabListKeyDownHandler} ${ref(this.tabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") && this.hasMultiple && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("previous") || ""}${this.paginationDisabled ? this.renderPaginationAriaLive() : this.renderPaginationItems()}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("next") || ""}</div>`;
+      [CSS.controlsArea]: true
+    })}>${showRotationControl && this.renderRotationControl() || ""}${showInlineArrows && this.renderArrow("previous") || ""}${!this.paginationDisabled && html`<div class=${safeClassMap(CSS.pagination)}>${this.renderPaginationItems()}</div>` || ""}${showInlineArrows && this.renderArrow("next") || ""}</div>`;
   }
   renderPaginationItems() {
     const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
-    return html`<div .ariaLabel=${label} class=${safeClassMap(CSS.paginationItems)} role=tablist>${repeat(items, (item) => item.id, (item, index) => {
+    return html`<div .ariaLabel=${label} class=${safeClassMap(CSS.paginationItems)} @keydown=${this.tabListKeyDownHandler} role=tablist ${ref(this.tabListRef)}>${repeat(items, (item) => item.id, (item, index) => {
       const itemCount = items.length;
       const match = index === selectedIndex;
       const first = index === 0;
@@ -474,18 +476,26 @@ class Carousel extends LitElement {
     return html`<button aria-controls=${this.containerId ?? nothing} class=${safeClassMap({ [CSS.paginationItem]: true, [css2]: true })} data-item-direction=${itemDirection ?? nothing} @click=${this.handleArrowClick} title=${title ?? nothing}><calcite-icon .flipRtl=${dir === "rtl"} .icon=${icon} .scale=${scale}></calcite-icon></button>`;
   }
   render() {
-    const { itemDirection, paginationPosition } = this;
-    const paginationArea = this.renderPaginationArea();
+    const { arrowType, hasMultiple, itemDirection, items, paginationDisabled, paginationPosition } = this;
+    const controlsArea = items.length > 0 ? this.renderControlsArea() : void 0;
+    const paginationStatus = paginationDisabled && items.length > 0 ? this.renderPaginationAriaLive() : void 0;
     const itemContainer = html`<section class=${safeClassMap({
       [CSS.itemContainer]: true,
       [CSS.itemContainerForward]: itemDirection === "forward",
       [CSS.itemContainerBackward]: itemDirection === "backward"
     })} id=${this.containerId ?? nothing} ${ref(this.itemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>`;
+    const content = [itemContainer, controlsArea, paginationStatus];
+    if (paginationPosition === "top") {
+      content.reverse();
+    }
+    if (arrowType === "edge" && hasMultiple) {
+      content.push(this.renderArrow("previous"), this.renderArrow("next"));
+    }
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} .ariaLive=${this.playing ? "off" : "polite"} .ariaRoleDescription=${this.messages.carousel} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerOverlaid]: this.controlOverlay,
-      [CSS.containerEdged]: this.arrowType === "edge"
-    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}>${paginationPosition === "top" ? paginationArea : itemContainer}${paginationPosition === "top" ? itemContainer : paginationArea}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("next") || ""}</div>` });
+      [CSS.containerEdged]: arrowType === "edge"
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}>${content}</div>` });
   }
 }
 customElement("calcite-carousel", Carousel);

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

@@ -2,6 +2,21 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale, Status } from "../types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's height and width. */
+  "--calcite-checkbox-size": "*";
+  /** Specifies the component's color. */
+  "--calcite-checkbox-border-color": "*";
+  /** Specifies the component's color when hovered. */
+  "--calcite-checkbox-border-color-hover": "*";
+  /** Specifies the component's color when pressed. */
+  "--calcite-checkbox-border-color-press": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-checkbox-icon-color": "*";
+}
+}
+
 export abstract class Checkbox extends LitElement {
   /**
    * When `true`, the component is checked.

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

@@ -3,6 +3,33 @@ 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-chip-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-chip-border-color": "*";
+  /** Specifies the component's close element icon color. */
+  "--calcite-chip-close-icon-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-chip-corner-radius": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-chip-icon-color": "*";
+  /** Specifies the component's selection element icon color when active. */
+  "--calcite-chip-select-icon-color-press": "*";
+  /**
+   * Specifies the component's selection element icon color when active.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-chip-select-icon-color-press` instead.
+   */
+  "--calcite-chip-select-icon-color-pressed": "*";
+  /** Specifies the component's selection element icon color. */
+  "--calcite-chip-select-icon-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-chip-text-color": "*";
+}
+}
+
 /**
  * @slot  - A slot for adding text.
  * @slot [image] - A slot for adding an image.