@esri/calcite-components 5.2.0-next.8 → 5.2.0-next.80

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

@@ -1,17 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-dropdown-item-background-color-hover] - Specifies the component's background color when hovered.
- * @cssproperty [--calcite-dropdown-item-background-color-press] - Specifies the component's background color when `selected` or active.
- * @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] in v5.0.0, removal target v6.0.0 - Specifies the color of the component's selection icon when hovered.
- * @cssproperty [--calcite-dropdown-item-icon-color-press] - Specifies the color of the component's selection icon when `selected` or active.
- * @cssproperty [--calcite-dropdown-item-text-color-press] - Specifies the component's text color when `selected` or active.
- * @cssproperty [--calcite-dropdown-item-text-color] - Specifies the component's text color.
- * @slot  - A slot for adding text.
- */
+/** @slot  - A slot for adding text. */
 export abstract class DropdownItem extends LitElement {
   /**
    * When `true`, prevents interaction and decreases the component's opacity.

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

@@ -7,7 +7,7 @@ import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, I as ICONS } from "../../chunks/resources9.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources17.js";
 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{position:relative;display:flex;flex-grow:1;align-items:center;outline:2px solid transparent;outline-offset:2px}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));text-align:start}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1))}.content{flex:1 1 auto}.icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}.icon--start,.icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .icon,:host([scale=s]) .icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .icon,:host([scale=m]) .icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:var(--calcite-space-sm-plus);padding-inline:1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .icon,:host([scale=l]) .icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container,:host([active-descendant]) .container{text-decoration-line:none;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .icon--start,:host(:hover:not([disabled])) .icon--end,:host(:active:not([disabled])) .icon--start,:host(:active:not([disabled])) .icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .link,:host(:active:not([disabled])) .link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .link{font-weight:var(--calcite-font-weight-medium);--calcite-internal-dropdown-item-text-color: var( --calcite-dropdown-item-text-color-press, var(--calcite-color-text-1) );color:var(--calcite-internal-dropdown-item-text-color)}:host([selected]) .container:not(.container--none-selection) .icon,:host([selected]) .link .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host([selected]) .container:not(.container--none-selection) .icon--start,:host([selected]) .container:not(.container--none-selection) .icon--end,:host([selected]) .link .icon--start,:host([selected]) .link .icon--end{--calcite-icon-color: var(--calcite-internal-dropdown-item-text-color)}:host(:hover:not([disabled])) .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .icon{opacity:1}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class DropdownItem extends LitElement {
   constructor() {
@@ -26,7 +26,7 @@ class DropdownItem extends LitElement {
     this.listenOn(document.body, "calciteInternalDropdownItemChange", this.updateActiveItemOnChange);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], label: 1, rel: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, {}, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], label: 1, rel: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -103,7 +103,8 @@ class DropdownItem extends LitElement {
     const slottedContent = this.iconStart && this.iconEnd ? [iconStartEl, contentNode, iconEndEl] : this.iconStart ? [iconStartEl, contentNode] : this.iconEnd ? [contentNode, iconEndEl] : contentNode;
     const contentEl = !href ? slottedContent : html`<a .ariaLabel=${label} class=${safeClassMap(CSS.link)} href=${href ?? nothing} rel=${this.rel ?? nothing} tabindex=-1 target=${this.target ?? nothing} ${ref(this.childLinkRef)}>${slottedContent}</a>`;
     const itemRole = href ? null : selectionMode === "single" ? "menuitemradio" : selectionMode === "multiple" ? "menuitemcheckbox" : "menuitem";
-    const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
+    const isSelectable = selectionMode !== "none";
+    const itemAria = toAriaBoolean(isSelectable && this.selected, isSelectable ? "false" : null);
     const { disabled } = this;
     this.el.ariaChecked = itemAria;
     this.el.ariaLabel = !href ? label ?? null : "";

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

@@ -1,16 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Kind, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Appearance, Kind, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-fab-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-fab-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-fab-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-fab-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-fab-loader-color] - Specifies the component's loader color.
- * @cssproperty [--calcite-fab-shadow] - Specifies the component's shadow.
- */
 export abstract class Fab extends LitElement {
   /**
    * Specifies the component's appearance style.

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

@@ -28,7 +28,7 @@ class Fab extends LitElement {
     this.textEnabled = false;
   }
   static {
-    this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;

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

@@ -1,23 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
-/**
- * @cssproperty [--calcite-filter-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-filter-input-background-color] - Specifies the component's input background color.
- * @cssproperty [--calcite-filter-input-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-filter-input-corner-radius] - Specifies the component's input corner radius.
- * @cssproperty [--calcite-filter-input-shadow] - Specifies the component's input shadow.
- * @cssproperty [--calcite-filter-input-icon-color] - Specifies the component's input icon color.
- * @cssproperty [--calcite-filter-input-text-color] - Specifies the component's input text color.
- * @cssproperty [--calcite-filter-input-placeholder-text-color] - Specifies the component's input placeholder text color.
- * @cssproperty [--calcite-filter-input-actions-background-color] - Specifies the background color of the component's input `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-background-color-hover] - Specifies the background color of the component's input `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-background-color-press] - Specifies the background color of the component's input `clearable` element when pressed.
- * @cssproperty [--calcite-filter-input-actions-icon-color] - Specifies the icon color of the component's input `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-icon-color-hover] - Specifies the icon color of the component's input `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-icon-color-press] - Specifies the icon color of the component's input `clearable` element when pressed.
- */
 export abstract class Filter extends LitElement {
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
@@ -39,10 +23,14 @@ export abstract class Filter extends LitElement {
   accessor items: object[];
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      label?: string;
-      clear?: string;
+      label?: string | undefined;
+      clear?: string | undefined;
   };
   /** Specifies the component's input placeholder text. */
   accessor placeholder: string | undefined;

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

@@ -15,7 +15,7 @@ const CSS = {
 const ICONS = {
   search: "search"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%}:host([scale=s]) .container{padding:var(--calcite-filter-content-space, var(--calcite-spacing-sm))}:host([scale=m]) .container{padding:var(--calcite-filter-content-space, var(--calcite-spacing-md))}:host([scale=l]) .container{padding:var(--calcite-filter-content-space, var(--calcite-spacing-lg))}label{position:relative;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}calcite-input{inline-size:100%;--calcite-input-background-color: var(--calcite-filter-input-background-color);--calcite-input-border-color: var(--calcite-filter-input-border-color);--calcite-input-corner-radius: var(--calcite-filter-input-corner-radius);--calcite-input-shadow: var(--calcite-filter-input-shadow);--calcite-input-icon-color: var(--calcite-filter-input-icon-color);--calcite-input-text-color: var(--calcite-filter-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-filter-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-filter-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-filter-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-filter-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-filter-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-filter-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-filter-input-actions-icon-color-press)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%}:host([scale=s]) .container{padding:var(--calcite-filter-content-space, var(--calcite-spacing-sm))}:host([scale=m]) .container{padding:var(--calcite-filter-content-space, var(--calcite-spacing-md))}:host([scale=l]) .container{padding:var(--calcite-filter-content-space, var(--calcite-spacing-lg))}label{position:relative;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}calcite-input{inline-size:100%;--calcite-input-background-color: var(--calcite-filter-input-background-color);--calcite-input-border-color: var(--calcite-filter-input-border-color);--calcite-input-corner-radius: var(--calcite-filter-input-corner-radius, var(--calcite-corner-radius));--calcite-input-shadow: var(--calcite-filter-input-shadow);--calcite-input-icon-color: var(--calcite-filter-input-icon-color);--calcite-input-text-color: var(--calcite-filter-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-filter-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-filter-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-filter-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-filter-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-filter-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-filter-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-filter-input-actions-icon-color-press)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Filter extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -1,12 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlowItem } from "../calcite-flow-item/customElement.js";
-import type { FlowItemLikeElement } from "./interfaces.js";
+import type { FlowItemLikeElement } from "./types.js";
 
-/**
- * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @slot  - A slot for adding `calcite-flow-item`s to the component.
- */
+/** @slot  - A slot for adding `calcite-flow-item`s to the component. */
 export abstract class Flow extends LitElement {
   /**
    * Removes selection of the currently active `calcite-flow-item`.

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

@@ -3,19 +3,26 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { x as whenAnimationDone, a as getSlotAssignedElements } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { w as whenAnimationDone } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   frame: "frame",
   frameAdvancing: "frame--advancing",
   frameRetreating: "frame--retreating"
 };
+const SELECTORS = {
+  item: "calcite-flow-item"
+};
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0;animation-name:none;animation-duration:var(--calcite-animation-timing);background-color:var(--calcite-flow-background-color)}:host ::slotted(*){display:none;block-size:100%}:host ::slotted(*[selected]){display:flex}:host .frame--advancing{animation-name:calcite-frame-advance}:host .frame--retreating{animation-name:calcite-frame-retreat}@keyframes calcite-frame-advance{0%{--tw-bg-opacity: .5;transform:translate3d(50px,0,0)}to{--tw-bg-opacity: 1;transform:translateZ(0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity: .5;transform:translate3d(-50px,0,0)}to{--tw-bg-opacity: 1;transform:translateZ(0)}}:host([hidden]){display:none}[hidden]{display:none}`;
+function getFlowItemSelectors(customItemSelectors) {
+  return customItemSelectors ? `${SELECTORS.item},${customItemSelectors}` : SELECTORS.item;
+}
 class Flow extends LitElement {
   constructor() {
     super();
     this.frameRef = createRef();
+    this.defaultSlotRef = createRef();
     this.itemMutationObserver = createObserver("mutation", () => this.updateItemsAndProps());
     this.items = [];
     this.selectedIndex = -1;
@@ -96,9 +103,9 @@ class Flow extends LitElement {
     return newSelectedIndex < oldSelectedIndex ? "retreating" : "advancing";
   }
   updateItemsAndProps() {
-    const { customItemSelectors, el } = this;
-    const newItems = Array.from(el.querySelectorAll(`calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : ""}`)).filter((flowItem) => flowItem.closest("calcite-flow") === el);
-    this.items = newItems;
+    const itemSelectors = getFlowItemSelectors(this.customItemSelectors);
+    const slottedItems = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value, itemSelectors) : [];
+    this.items = slottedItems;
     this.ensureSelectedFlowItemExists();
     this.updateFlowProps();
   }
@@ -142,7 +149,7 @@ class Flow extends LitElement {
       [CSS.frameAdvancing]: flowDirection === "advancing",
       [CSS.frameRetreating]: flowDirection === "retreating"
     };
-    return html`<div class=${safeClassMap(frameDirectionClasses)} ${ref(this.frameRef)}><slot></slot></div>`;
+    return html`<div class=${safeClassMap(frameDirectionClasses)} ${ref(this.frameRef)}><slot @slotchange=${this.updateItemsAndProps} ${ref(this.defaultSlotRef)}></slot></div>`;
   }
 }
 customElement("calcite-flow", Flow);

package/dist/components/calcite-flow/types/index.d.ts

@@ -1,2 +1,2 @@
-export { type FlowItemLike } from "../interfaces";
+export { type FlowItemLike } from "../types.js";
 

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

@@ -2,43 +2,17 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HeadingLevel } from "../functional/Heading.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
-import type { CollapseDirection, Scale } from "../interfaces.js";
+import type { CollapseDirection, Scale } from "../types.js";
 import type { Panel } from "../calcite-panel/customElement.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
- * @cssproperty [--calcite-flow-item-footer-padding] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
- * @cssproperty [--calcite-flow-item-header-border-block-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
- * @cssproperty [--calcite-flow-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-flow-heading-text-color] - Specifies the text color of the component's `heading`.
- * @cssproperty [--calcite-flow-icon-color] - Specifies the color of the component's `icon`.
- * @cssproperty [--calcite-flow-description-text-color] - Specifies the text color of the component's `description`.
- * @cssproperty [--calcite-flow-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-flow-content-top-space] - Specifies the padding of the component's `content-top` slot.
- * @cssproperty [--calcite-flow-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
- * @cssproperty [--calcite-flow-header-background-color] - Specifies the background color of the component's header.
- * @cssproperty [--calcite-flow-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-flow-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the component's `header-content` slot.
- * @cssproperty [--calcite-flow-footer-space] - Specifies the padding of the component's footer.
- * @cssproperty [--calcite-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-background-color-pressed] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-text-color-hover] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-action-text-color-pressed] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
- * @cssproperty [--calcite-popover-border-color] - 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.
- * @cssproperty [--calcite-flow-header-action-background-color-hover] - Specifies the background color of any `calcite-action`s in the component's header when hovered.
- * @cssproperty [--calcite-flow-header-action-background-color-press] - Specifies the background color of any `calcite-action`s in the component's header when pressed.
- * @cssproperty [--calcite-flow-header-action-background-color] - Specifies the background color of any `calcite-action`s in the component's header.
- * @cssproperty [--calcite-flow-header-action-indicator-color] - Specifies the color of any `calcite-action`s indicator in the component's header.
- * @cssproperty [--calcite-flow-header-action-text-color-press] - Specifies the text color of any `calcite-action`s in the component's header when pressed.
- * @cssproperty [--calcite-flow-header-action-text-color] - Specifies the text color of any `calcite-action`s in the component's header.
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
  * @slot [content-top] - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
  * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
+ * @slot [header-top] - A slot for adding custom content above the header actions and content.
  * @slot [header-actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
  * @slot [header-actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [header-content] - A slot for adding custom content to the component's header.
@@ -54,7 +28,7 @@ export abstract class FlowItem extends LitElement {
   /** Specifies a function to run before the component is removed from its parent `calcite-flow`. */
   accessor beforeBack: (() => Promise<void>) | undefined;
   /** Specifies a function to run before the component closes. */
-  accessor beforeClose: () => Promise<void>;
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, displays a close button in the trailing side of the component's header.
    *
@@ -86,7 +60,7 @@ export abstract class FlowItem extends LitElement {
    */
   accessor collapsible: boolean;
   /** Specifies a description for the component. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -94,11 +68,11 @@ export abstract class FlowItem extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -117,18 +91,22 @@ export abstract class FlowItem extends LitElement {
    * @default false
    */
   accessor menuOpen: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      back?: string;
-      close?: string;
-      options?: string;
+      back?: string | undefined;
+      close?: string | undefined;
+      options?: string | undefined;
   } & Panel["messageOverrides"];
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -5,9 +5,8 @@ import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { S as SLOTS$1 } from "../../chunks/resources8.js";
+import { S as SLOTS$1 } from "../../chunks/resources14.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   backButton: "back-button"
@@ -21,6 +20,7 @@ const SLOTS = {
   alerts: "alerts",
   contentTop: "content-top",
   contentBottom: "content-bottom",
+  headerTop: "header-top",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
   description: "description",
@@ -32,7 +32,7 @@ const SLOTS = {
   footerEnd: "footer-end",
   footerStart: "footer-start"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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{position:relative;display:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space);--calcite-panel-content-top-space: var(--calcite-flow-content-top-space);--calcite-panel-content-bottom-space: var(--calcite-flow-content-bottom-space)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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{position:relative;display:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-header-top-space: var(--calcite-flow-header-top-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space);--calcite-panel-content-top-space: var(--calcite-flow-content-top-space);--calcite-panel-content-bottom-space: var(--calcite-flow-content-bottom-space)}:host([hidden]){display:none}[hidden]{display:none}`;
 class FlowItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -40,7 +40,6 @@ class FlowItem extends LitElement {
     this.containerRef = createRef();
     this.direction = useDirection();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.closable = false;
     this.closed = false;
@@ -50,6 +49,7 @@ class FlowItem extends LitElement {
     this.disabled = false;
     this.iconFlipRtl = false;
     this.loading = false;
+    this.focusTrapEnabled = false;
     this.menuOpen = false;
     this.overlayPositioning = "absolute";
     this.scale = "m";
@@ -65,7 +65,7 @@ class FlowItem extends LitElement {
     this.calciteInternalFlowItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], focusTrapEnabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -74,7 +74,10 @@ class FlowItem extends LitElement {
     await this.containerRef.value?.scrollContentTo(options);
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.backButtonRef.value || this.containerRef.value, options);
+    return this.containerRef.value?.setFocus(options);
+  }
+  async updateFocusTrapElements(extraContainers) {
+    this.containerRef.value?.updateFocusTrapElements(extraContainers);
   }
   willUpdate(changes) {
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
@@ -119,11 +122,11 @@ class FlowItem extends LitElement {
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-    return showBackButton ? keyed("flow-back-button", html`<calcite-action .ariaLabel=${label} class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
+    return showBackButton ? keyed("flow-back-button", html`<calcite-action class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
   }
   render() {
-    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapsed=${collapsed} .collapseDirection=${collapseDirection} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl, focusTrapEnabled, focusTrapOptions } = this;
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapsed=${collapsed} .collapseDirection=${collapseDirection} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .focusTrapEnabled=${focusTrapEnabled} .focusTrapOptions=${focusTrapOptions} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerTop} slot=${SLOTS$1.headerTop}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

package/dist/components/calcite-focus-trap/customElement.d.ts

@@ -19,13 +19,13 @@ export abstract class FocusTrap extends LitElement {
   /** When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping. */
   accessor focusTrapDisabledOverride: (() => boolean) | undefined;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"allowOutsideClick"` allows outside clicks,
-   * `"initialFocus"` enables initial focus,
-   * `"returnFocusOnDeactivate"` returns focus when not active,
-   * `"extraContainers"` specifies additional focusable elements external to the trap, and
-   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated.
+   * - `"allowOutsideClick"` allows outside clicks.
+   * - `"initialFocus"` enables initial focus.
+   * - `"returnFocusOnDeactivate"` returns focus when not active.
+   * - `"extraContainers"` specifies additional focusable elements external to the trap.
+   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated.
    */
   accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /** Activates the component's focus trap. */

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

@@ -1,8 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { ColorStop, DataSeries } from "./interfaces.js";
+import type { ColorStop, DataSeries } from "./types.js";
 
-/** @cssproperty [--calcite-graph-highlight-fill-color] - Specifies the fill color of the `highlight` element, when present. */
 export abstract class Graph extends LitElement {
   /**
    * Array of values describing a single color stop ([offset, color, opacity])

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

@@ -50,7 +50,7 @@ function range(data) {
   );
 }
 function area({ data, min, max, t }) {
-  if (data.length === 0) {
+  if (data.length < 3) {
     return "";
   }
   const [startX, startY] = t(data[0]);

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

@@ -1,16 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { HandleNudge } from "./interfaces.js";
+import type { HandleNudge } from "./types.js";
 
-/**
- * @deprecated Use the `calcite-sort-handle` component instead.
- * @cssproperty [--calcite-handle-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-handle-background-color-hover] - Specifies the component's background color on hover.
- * @cssproperty [--calcite-handle-background-color-selected] - Specifies the component's background color when selected.
- * @cssproperty [--calcite-handle-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-handle-icon-color-hover] - Specifies the component's icon color on hover.
- * @cssproperty [--calcite-handle-icon-color-selected] - Specifies the component's icon color when selected.
- */
+/** @deprecated Use the `calcite-sort-handle` component instead. */
 export abstract class Handle extends LitElement {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -19,15 +11,19 @@ export abstract class Handle extends LitElement {
    */
   accessor disabled: boolean;
   /** Value for the button title attribute. */
-  accessor dragHandle: string;
-  /** Overrides individual strings used by the component. */
+  accessor dragHandle: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      dragHandle?: string;
-      dragHandleUntitled?: string;
-      dragHandleActive?: string;
-      dragHandleChange?: string;
-      dragHandleCommit?: string;
-      dragHandleIdle?: string;
+      dragHandle?: string | undefined;
+      dragHandleUntitled?: string | undefined;
+      dragHandleActive?: string | undefined;
+      dragHandleChange?: string | undefined;
+      dragHandleCommit?: string | undefined;
+      dragHandleIdle?: string | undefined;
   };
   /**
    * When `true`, the component is selected.

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

@@ -1,10 +1,9 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { l as logger } from "../../chunks/logger.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
@@ -77,7 +76,7 @@ class Handle extends LitElement {
   getAriaText(type) {
     const { setPosition, setSize, label, messages, selected } = this;
     if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") {
-      return null;
+      return void 0;
     }
     const text = type === "label" ? selected ? messages.dragHandleChange : messages.dragHandleIdle : selected ? messages.dragHandleActive : messages.dragHandleCommit;
     const replacePosition = text.replace(SUBSTITUTIONS.position, setPosition.toString());
@@ -120,7 +119,7 @@ class Handle extends LitElement {
     }
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<span .ariaChecked=${this.disabled ? null : this.selected} .ariaDisabled=${this.disabled ? this.disabled : null} .ariaLabel=${this.disabled ? null : this.getAriaText("label")} class=${safeClassMap({ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected })} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled ? null : 0) ?? nothing} title=${this.getTooltip() ?? nothing} ${ref(this.handleButtonRef)}><calcite-icon .icon=${ICONS.drag} scale=s></calcite-icon></span>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<span .ariaChecked=${this.disabled ? void 0 : this.selected} .ariaDisabled=${this.disabled ? this.disabled : void 0} .ariaLabel=${this.disabled ? void 0 : this.getAriaText("label")} class=${safeClassMap({ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected })} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled ? void 0 : 0) ?? nothing} title=${this.getTooltip() ?? nothing} ${ref(this.handleButtonRef)}><calcite-icon .icon=${ICONS.drag} scale=s></calcite-icon></span>` });
   }
 }
 customElement("calcite-handle", Handle);

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

@@ -1,12 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
-import type { IconName } from "./interfaces.js";
+import type { Scale } from "../types.js";
+import type { IconName } from "./types.js";
 
-/**
- * @cssproperty [--calcite-ui-icon-color] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's color. Defaults to current color.
- * @cssproperty [--calcite-icon-color] - Specifies the component's color. Defaults to current color.
- */
 export abstract class Icon extends LitElement {
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
@@ -19,7 +15,7 @@ export abstract class Icon extends LitElement {
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
-  accessor icon: IconName | null;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, preloads the `icon` data.
    *

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

@@ -1,11 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
+import { g as getAssetPath, l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { l as logger } from "../../chunks/logger.js";
 const CSS = {
   flipRtl: "flip-rtl",
   svg: "svg"
@@ -71,12 +70,11 @@ class Icon extends LitElement {
     this.direction = useDirection();
     this.visible = false;
     this.flipRtl = false;
-    this.icon = null;
     this.preload = false;
     this.scale = "m";
   }
   static {
-    this.properties = { pathData: [16, {}, { state: true }], visible: [16, {}, { state: true }], flipRtl: [7, {}, { reflect: true, type: Boolean }], icon: [3, { type: String }, { reflect: true }], preload: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], textLabel: 1 };
+    this.properties = { pathData: [16, {}, { state: true }], visible: [16, {}, { state: true }], flipRtl: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], preload: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], textLabel: 1 };
   }
   static {
     this.styles = styles;
@@ -96,7 +94,7 @@ class Icon extends LitElement {
     }
   }
   willUpdate(changes) {
-    if (changes.has("icon") && (this.hasUpdated || this.icon !== null) || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+    if (changes.has("icon") && (this.hasUpdated || this.icon !== void 0) || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
       this.loadIconPathData();
     }
   }