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

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

@@ -1,9 +1,9 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { b as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -71,8 +71,17 @@ class Dialog extends LitElement {
     this.panelRef = createRef();
     this.popoverRef = createRef();
     this.resizePosition = { ...initialResizePosition };
+    this.transitionEl = null;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.sizeOverride = useSizeOverride({
+      targetElement: () => ({ value: this.transitionEl }),
+      getBounds: () => ({
+        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
+        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+      }),
+      fullscreenDisabled: () => this.fullscreenDisabled
+    });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
       target: this.popoverRef
@@ -82,6 +91,14 @@ class Dialog extends LitElement {
     this.hasContentTop = false;
     this.hasFooter = true;
     this.opened = false;
+    this.resizeValues = {
+      inlineSize: null,
+      blockSize: null,
+      minInlineSize: null,
+      minBlockSize: null,
+      maxInlineSize: null,
+      maxBlockSize: null
+    };
     this.closeDisabled = false;
     this.dragEnabled = false;
     this.embedded = false;
@@ -106,7 +123,7 @@ class Dialog extends LitElement {
     this.calciteDialogScroll = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { 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 }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { 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 }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -133,6 +150,9 @@ class Dialog extends LitElement {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
+  async updateSize(size) {
+    this.updateSizeInternal(size);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -215,7 +235,7 @@ class Dialog extends LitElement {
       name: "resize"
     });
   }
-  getTransitionElDOMRect() {
+  getTransitionRefDOMRect() {
     return this.transitionEl.getBoundingClientRect();
   }
   handleKeyDown(event) {
@@ -230,13 +250,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minBlockSize } = window.getComputedStyle(transitionEl);
           const minHeight = getStylePixelValue(minBlockSize);
-          const height = this.getTransitionElDOMRect().height;
+          const height = this.getTransitionRefDOMRect().height;
           if (height <= minHeight) {
             return;
           }
-          this.updateSize({
-            size: height - resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: height - resizeShiftStep
           });
           resizePosition.bottom -= resizeShiftStep;
           this.updateTransform();
@@ -251,9 +270,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowDown":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().height + resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: this.getTransitionRefDOMRect().height + resizeShiftStep
           });
           resizePosition.bottom += resizeShiftStep;
           this.updateTransform();
@@ -270,13 +288,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minInlineSize } = window.getComputedStyle(transitionEl);
           const minWidth = getStylePixelValue(minInlineSize);
-          const width = this.getTransitionElDOMRect().width;
+          const width = this.getTransitionRefDOMRect().width;
           if (width <= minWidth) {
             return;
           }
-          this.updateSize({
-            size: width - resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: width - resizeShiftStep
           });
           resizePosition.right -= resizeShiftStep;
           this.updateTransform();
@@ -291,9 +308,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowRight":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().width + resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: this.getTransitionRefDOMRect().width + resizeShiftStep
           });
           resizePosition.right += resizeShiftStep;
           this.updateTransform();
@@ -320,19 +336,14 @@ class Dialog extends LitElement {
     const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
     const translateX = Math.round(x + left + right);
     const translateY = Math.round(y + top + bottom);
-    transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
-  }
-  updateSize({ type, size }) {
-    const { transitionEl } = this;
-    if (!transitionEl) {
-      return;
-    }
-    transitionEl.style[type] = size !== null ? `${Math.round(size)}px` : null;
+    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
   cleanupInteractions() {
     this.interaction?.unset();
-    this.updateSize({ size: null, type: "inlineSize" });
-    this.updateSize({ size: null, type: "blockSize" });
+    this.updateSizeInternal({
+      inline: null,
+      block: null
+    });
     this.dragPosition = { ...initialDragPosition };
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
@@ -348,7 +359,7 @@ class Dialog extends LitElement {
     }
     if (resizable) {
       await this.el.componentOnReady();
-      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(transitionEl);
+      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(this.transitionEl);
       this.interaction.resizable({
         edges: {
           top: true,
@@ -379,8 +390,10 @@ class Dialog extends LitElement {
               resizePosition.bottom += deltaRect.bottom;
               resizePosition.left += deltaRect.left;
             }
-            this.updateSize({ size: rect.width, type: "inlineSize" });
-            this.updateSize({ size: rect.height, type: "blockSize" });
+            this.updateSizeInternal({
+              inline: rect.width,
+              block: rect.height
+            });
             this.updateTransform();
           }
         }
@@ -468,6 +481,22 @@ class Dialog extends LitElement {
   handleMutationObserver() {
     this.focusTrap.updateContainerElements();
   }
+  updateSizeInternal(size) {
+    const dialogElement = this.transitionEl;
+    if (!dialogElement) {
+      return;
+    }
+    const appliedSize = this.sizeOverride.resize(size);
+    this.resizeValues = {
+      ...this.resizeValues,
+      ...appliedSize.inline !== void 0 && {
+        inlineSize: appliedSize.inline
+      },
+      ...appliedSize.block !== void 0 && {
+        blockSize: appliedSize.block
+      }
+    };
+  }
   render() {
     const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;
     return html`<div .ariaDescription=${description} .ariaLabel=${heading} .ariaModal=${this.modal} class=${safeClassMap({

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

@@ -8,7 +8,7 @@ import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
  * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
  * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
  * @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] - A slot for the element that triggers the `calcite-dropdown`.
+ * @slot [trigger] - A slot for the element that triggers the component.
  */
 export abstract class Dropdown extends LitElement {
   /**
@@ -20,28 +20,28 @@ export abstract class Dropdown extends LitElement {
    */
   accessor closeOnSelectDisabled: boolean;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-items` when their initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when their initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[];
   /**
-   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.
-   * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
+   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scrollbar.
+   * Value must be greater than `0`, and does not include `groupTitle`s from `calcite-dropdown-group`.
    *
    * @default 0
    */
   accessor maxItems: number;
   /**
-   * Offset the position of the component away from the `referenceElement`.
+   * Specifies the distance to position the component away from the `referenceElement`.
    *
    * @default 0
    */
   accessor offsetDistance: number;
   /**
-   * Offset the position of the component along the `referenceElement`.
+   * Specifies the distance to position the component along the `referenceElement`.
    *
    * @default 0
    */
@@ -63,7 +63,7 @@ export abstract class Dropdown extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /**
-   * Determines where the component will be positioned relative to the container element.
+   * Determines the component's placement relative to the container element.
    *
    * @default "bottom-start"
    */
@@ -74,7 +74,7 @@ export abstract class Dropdown extends LitElement {
    * @default "m"
    */
   accessor scale: Scale;
-  /** Specifies the component's selected items. */
+  /** The component's selected items. */
   get selectedItems(): DropdownItem[];
   /**
    * When `true` and the component is `open`, disables top layer placement.
@@ -86,21 +86,21 @@ export abstract class Dropdown extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /**
-   * Specifies the action to open the component from the container element.
+   * Specifies the type of action on the container element to open the component.
    *
    * @default "click"
    */
   accessor type: "hover" | "click";
-  /** Specifies the width of the component. */
+  /** Specifies the component's width. */
   accessor width: Extract<Width, Scale>;
   /**
-   * Specifies the width of the component.
+   * Specifies the component's width.
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
    */
   accessor widthScale: Scale;
   /**
-   * Updates the position of the component.
+   * Updates the component's position.
    *
    * @param delayed
    */
@@ -118,7 +118,7 @@ export abstract class Dropdown extends LitElement {
   readonly calciteDropdownBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component is closed and animation is complete. */
   readonly calciteDropdownClose: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when the component is open and animation is complete. */
+  /** Fires when the component is opened and animation is complete. */
   readonly calciteDropdownOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when a `calcite-dropdown-item`'s selection changes. */
   readonly calciteDropdownSelect: import("@arcgis/lumina").TargetedEvent<this, void>;

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";

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

@@ -3,12 +3,12 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { SelectionMode } from "../interfaces.js";
 
 /**
- * @cssproperty [--calcite-dropdown-group-border-color] - Specifies the `calcite-dropdown`'s border color.
+ * @cssproperty [--calcite-dropdown-group-border-color] - Specifies the components's border color.
  * @cssproperty [--calcite-dropdown-group-title-text-color] - Specifies the component's `groupTitle` color.
  * @slot  - A slot for adding `calcite-dropdown-item`s.
  */
 export abstract class DropdownGroup extends LitElement {
-  /** Specifies and displays a group title. */
+  /** When specified, displays a group title. */
   accessor groupTitle: string;
   /**
    * The position of the group in the dropdown menu.

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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

@@ -4,17 +4,17 @@ import type { FlipContext } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
- * @cssproperty [--calcite-dropdown-item-background-color-hover] - Specifies the item's background color when hovered.
- * @cssproperty [--calcite-dropdown-item-background-color-press] - Specifies the item's background color when selected or active.
- * @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] Specifies the item's icon selection color when hovered.
- * @cssproperty [--calcite-dropdown-item-icon-color-press] - Specifies the item's icon selection color when selected or active.
- * @cssproperty [--calcite-dropdown-item-text-color-press] - Specifies the item's text when selected or active.
- * @cssproperty [--calcite-dropdown-item-text-color] - Specifies the item's text color.
+ * @cssproperty [--calcite-dropdown-item-background-color-hover] - Specifies the component's background color when hovered.
+ * @cssproperty [--calcite-dropdown-item-background-color-press] - Specifies the components's background color when `selected` or active.
+ * @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] 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.
  */
 export abstract class DropdownItem extends LitElement {
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
@@ -27,13 +27,13 @@ export abstract class DropdownItem extends LitElement {
   accessor href: string;
   /** Specifies an icon to display at the end of the component. */
   accessor iconEnd: IconName;
-  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  /** When the element direction is right-to-left (`"rtl"`), flips the component's `iconStart` and/or `iconEnd`. */
   accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
   accessor iconStart: IconName;
   /** Specifies an accessible label for the component. */
   accessor label: string;
-  /** Specifies the relationship to the linked document defined in `href`. */
+  /** Specifies the relationship to the linked resource defined in `href`. */
   accessor rel: string;
   /**
    * When `true`, the component is selected.
@@ -41,7 +41,7 @@ export abstract class DropdownItem extends LitElement {
    * @default false
    */
   accessor selected: boolean;
-  /** Specifies the frame or window to open the linked document. */
+  /** Specifies the frame or window to open the linked resource. */
   accessor target: string;
   /**
    * Sets focus on the component.

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -13,13 +13,13 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class Fab extends LitElement {
   /**
-   * Specifies the appearance style of the component.
+   * Specifies the component's appearance style.
    *
    * @default "solid"
    */
   accessor appearance: Extract<"solid" | "outline-fill", Appearance>;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
@@ -27,13 +27,13 @@ export abstract class Fab extends LitElement {
   /** Specifies an icon to display. */
   accessor icon: IconName;
   /**
-   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
    * @default false
    */
   accessor iconFlipRtl: boolean;
   /**
-   * Specifies the kind of the component, which will apply to border and background.
+   * Specifies the component's kind, which determines border and background styling.
    *
    * @default "brand"
    */

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -4,33 +4,33 @@ import type { Scale } from "../interfaces.js";
 
 /**
  * @cssproperty [--calcite-filter-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-filter-input-background-color] - Specifies the input's background color.
- * @cssproperty [--calcite-filter-input-border-color] - Specifies the input's border color.
- * @cssproperty [--calcite-filter-input-corner-radius] - Specifies the input's corner radius.
- * @cssproperty [--calcite-filter-input-shadow] - Specifies the shadow around the input.
- * @cssproperty [--calcite-filter-input-icon-color] - Specifies the input's icon color.
- * @cssproperty [--calcite-filter-input-text-color] - Specifies the input's text color.
- * @cssproperty [--calcite-filter-input-placeholder-text-color] - Specifies the input's placeholder text color.
- * @cssproperty [--calcite-filter-input-actions-background-color] - Specifies the background color of the input's `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-background-color-hover] - Specifies the background color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-background-color-press] - Specifies the background color of the input's `clearable` element when pressed.
- * @cssproperty [--calcite-filter-input-actions-icon-color] - Specifies the icon color of the input's `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-icon-color-hover] - Specifies the icon color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-icon-color-press] - Specifies the icon color of the input's `clearable` element when pressed.
+ * @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`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
   accessor disabled: boolean;
   /** The component's resulting items after filtering. */
   get filteredItems(): object[];
-  /** Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched. */
+  /** When `value` is an object, specifies the properties to match against when filtering. If not set, all properties will be matched. */
   accessor filterProps: string[] | undefined;
   /**
-   * Defines the items to filter. The component uses the values as the starting point, and returns items
+   * Specifies the items to filter. The component uses the values as the starting point, and returns items
    *
    * that contain the string entered in the input, using a partial match and recursive search.
    *
@@ -44,7 +44,7 @@ export abstract class Filter extends LitElement {
       label?: string;
       clear?: string;
   };
-  /** Specifies placeholder text for the input element. */
+  /** Specifies the component's input placeholder text. */
   accessor placeholder: string | undefined;
   /**
    * Specifies the size of the component.

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";

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

@@ -5,11 +5,11 @@ import type { FlowItemLikeElement } from "./interfaces.js";
 
 /**
  * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @slot  - A slot for adding `calcite-flow-item` elements to the component.
+ * @slot  - A slot for adding `calcite-flow-item`s to the component.
  */
 export abstract class Flow extends LitElement {
   /**
-   * Removes the currently active `calcite-flow-item`.
+   * Removes selection of the currently active `calcite-flow-item`.
    *
    * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
    */

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.88 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";