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

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.

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.