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

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

@@ -1,18 +1,22 @@
+/* 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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing, setAttribute } from "@arcgis/lumina";
 import { t as toAriaBoolean } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { C as CSS, I as ICONS } from "../../chunks/resources7.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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-color:transparent}.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-3));text-align:start;outline-color:transparent}.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-3))}.dropdown-item-content{flex:1 1 auto;padding-block:.125rem}.dropdown-item-icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-item-icon,:host([scale=s]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .dropdown-item-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--1);line-height:1rem}:host([scale=m]) .dropdown-item-icon,:host([scale=m]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:.625rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .dropdown-item-icon,:host([scale=l]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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])) .dropdown-link,:host(:active:not([disabled])) .dropdown-link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .dropdown-link calcite-icon{color:var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .dropdown-item-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}`;
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources6.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-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:.625rem;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{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])) .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{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() {
     super();
     this.childLinkRef = createRef();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.scale = "m";
     this.selected = false;
@@ -41,9 +45,6 @@ class DropdownItem extends LitElement {
   load() {
     this.initialize();
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   onClick() {
     this.emitRequestedItem();
   }
@@ -128,10 +129,10 @@ class DropdownItem extends LitElement {
     this.el.ariaLabel = !href ? label : "";
     this.el.role = itemRole;
     setAttribute(this.el, "tabIndex", disabled ? -1 : 0);
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerNone]: selectionMode === "none"
-    })}>${selectionMode !== "none" ? html`<calcite-icon class=${safeClassMap(CSS.icon)} .icon=${selectionMode === "multiple" ? ICONS.check : ICONS.bulletPoint} .scale=${getIconScale(this.scale)}></calcite-icon>` : null}${contentEl}</div>` });
+    })}>${selectionMode !== "none" ? html`<calcite-icon class=${safeClassMap(CSS.icon)} .icon=${ICONS.check} .scale=${getIconScale(this.scale)}></calcite-icon>` : null}${contentEl}</div>` });
   }
 }
 customElement("calcite-dropdown-item", DropdownItem);

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

@@ -1,2 +1 @@
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

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

@@ -1,67 +1,70 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Appearance, Kind, Scale } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Appearance, Kind, Scale } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
-export declare class Fab extends LitElement {
-    /**
-     * Specifies the appearance style of the component.
-     *
-     * @default "solid"
-     */
-    appearance: Extract<"solid" | "outline-fill", Appearance>;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Specifies an icon to display.
-     *
-     * @default "plus"
-     */
-    icon: IconName;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /**
-     * Specifies the kind of the component, which will apply to border and background.
-     *
-     * @default "brand"
-     */
-    kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies text to accompany the component's icon. */
-    text: string;
-    /**
-     * When `true`, displays the `text` value in the component.
-     *
-     * @default false
-     */
-    textEnabled: boolean;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-}
+/**
+ * @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 appearance style of the component.
+   *
+   * @default "solid"
+   */
+  accessor appearance: Extract<"solid" | "outline-fill", Appearance>;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies an icon to display. */
+  accessor icon: IconName;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /**
+   * Specifies the kind of the component, which will apply to border and background.
+   *
+   * @default "brand"
+   */
+  accessor kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
+  /** Specifies an accessible label for the component. */
+  accessor label: string | undefined;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies text to accompany the component's icon. */
+  accessor text: string | undefined;
+  /**
+   * When `true`, displays the `text` value in the component.
+   *
+   * @default false
+   */
+  accessor textEnabled: boolean;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+}

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

@@ -1,21 +1,25 @@
+/* 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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   button: "button"
 };
 const ICONS = {
   plus: "plus"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-corner-radius: var(--calcite-fab-corner-radius);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}: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;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-corner-radius: var(--calcite-fab-corner-radius);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Fab extends LitElement {
   constructor() {
     super(...arguments);
     this.buttonRef = createRef();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.appearance = "solid";
     this.disabled = false;
     this.icon = ICONS.plus;
@@ -34,13 +38,10 @@ class Fab extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.buttonRef.value, options);
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   render() {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl } = this;
-    const title = !textEnabled ? label || text || null : null;
-    return InteractiveContainer({ disabled, children: html`<calcite-button .appearance=${appearance === "solid" ? "solid" : "outline-fill"} class=${safeClassMap(CSS.button)} .disabled=${disabled} .iconFlipRtl=${iconFlipRtl ? "start" : null} .iconStart=${icon} .kind=${kind} .label=${label} .loading=${loading} round .scale=${scale} title=${title ?? nothing} type=button width=auto ${ref(this.buttonRef)}>${this.textEnabled ? this.text : null}</calcite-button>` });
+    const title = !textEnabled ? label || text || void 0 : void 0;
+    return this.interactiveContainer({ disabled, children: html`<calcite-button .appearance=${appearance === "solid" ? "solid" : "outline-fill"} class=${safeClassMap(CSS.button)} .disabled=${disabled} .iconFlipRtl=${iconFlipRtl ? "start" : void 0} .iconStart=${icon} .kind=${kind} .label=${label} .loading=${loading} round .scale=${scale} title=${title ?? nothing} type=button width=auto ${ref(this.buttonRef)}>${this.textEnabled ? this.text : null}</calcite-button>` });
   }
 }
 customElement("calcite-fab", Fab);

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

@@ -1,2 +1 @@
-import "../calcite-button/index.js";
 export * from "./customElement.js";

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

@@ -1,66 +1,77 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
 
-export declare class Filter extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** 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. */
-    filterProps: string[];
-    /** The component's resulting items after filtering. */
-    readonly filteredItems: object[];
-    /**
-     * Defines 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.
-     *
-     * This property is needed to conduct filtering.
-     */
-    items: object[];
-    /** Specifies an accessible name for the component. */
-    label: string;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** Specifies placeholder text for the input element. */
-    placeholder: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** The component's value. */
-    get value(): string;
-    set value(value: string);
-    /**
-     * Performs a filter on the component.
-     *
-     * This method can be useful because filtering is delayed and asynchronous.
-     *
-     * @param value - The filter text value.
-     * @returns
-     */
-    filter(value?: string): Promise<void>;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the filter text changes. */
-    readonly calciteFilterChange: TargetedEvent<this, void>;
-    private messages: Partial<{
-        label: string;
-        clear: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        label: string;
-        clear: string;
-    }>;
-}
+/**
+ * @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.
+ */
+export abstract class Filter extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower 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. */
+  accessor filterProps: string[] | undefined;
+  /**
+   * Defines 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.
+   *
+   * This property is needed to conduct filtering.
+   */
+  accessor items: object[];
+  /** Specifies an accessible label for the component. */
+  accessor label: string | undefined;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      label?: string;
+      clear?: string;
+  };
+  /** Specifies placeholder text for the input element. */
+  accessor placeholder: string | undefined;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** The component's value. */
+  accessor value: string;
+  /**
+   * Performs a filter on the component.
+   *
+   * This method can be useful because filtering is delayed and asynchronous.
+   *
+   * @param value - The filter text value.
+   */
+  filter(value?: string): Promise<void>;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the filter text changes. */
+  readonly calciteFilterChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteFilterChange: Filter["calciteFilterChange"]["detail"];
+  };
+}

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

@@ -1,20 +1,23 @@
+/* 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.80 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { f as filter } from "../../chunks/filter.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { u as useCancelable } from "../../chunks/useCancelable.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 = {
   container: "container"
 };
 const ICONS = {
   search: "search"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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);--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);
@@ -24,6 +27,7 @@ class Filter extends LitElement {
     this._value = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.filteredItems = [];
     this.items = [];
@@ -70,9 +74,6 @@ class Filter extends LitElement {
       this.filterDebounced(this.value);
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   valueHandler(value) {
     this.filterDebounced(value);
   }
@@ -107,7 +108,7 @@ class Filter extends LitElement {
   }
   render() {
     const { disabled, scale } = this;
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
   }
 }
 customElement("calcite-filter", Filter);

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

@@ -1,2 +1 @@
-import "../calcite-input/index.js";
 export * from "./customElement.js";

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

@@ -1,23 +1,25 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlowItem } from '../calcite-flow-item/customElement.js';
-import { FlowDirection, FlowItemLikeElement } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlowItem } from "../calcite-flow-item/customElement.js";
+import type { FlowItemLikeElement } from "./interfaces.js";
 
-/** @slot  - A slot for adding `calcite-flow-item` elements to the component. */
-export declare class Flow extends LitElement {
-    /**
-     * Removes the currently active `calcite-flow-item`.
-     *
-     * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
-     */
-    back(): Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     * @returns Promise<void>
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-}
+/**
+ * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
+ * @slot  - A slot for adding `calcite-flow-item` elements to the component.
+ */
+export abstract class Flow extends LitElement {
+  /**
+   * Removes the currently active `calcite-flow-item`.
+   *
+   * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
+   */
+  back(): Promise<FlowItem | FlowItemLikeElement>;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @returns Promise<void>
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+}

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

@@ -1,16 +1,19 @@
+/* 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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { y as whenAnimationDone } from "../../chunks/dom.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 styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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}`;
+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}`;
 class Flow extends LitElement {
   constructor() {
     super();

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

@@ -1,5 +1,5 @@
-import { FlowItem } from '../calcite-flow-item/customElement.js';
-export type FlowDirection = "advancing" | "retreating" | "standby";
+import type { FlowItem } from "../calcite-flow-item/customElement.js";
+
 /**
  * Interface for defining the structure of a flow item.
  *
@@ -105,5 +105,7 @@ export type FlowDirection = "advancing" | "retreating" | "standby";
  *
  * customElements.define("custom-flow-item", CustomFlowItem);
  */
-export type FlowItemLike = Pick<HTMLCalciteFlowItemElement, "beforeBack" | "menuOpen" | "setFocus" | "showBackButton" | "selected">;
-export type FlowItemLikeElement = FlowItemLike & HTMLElement;
+export type FlowItemLike = Pick<FlowItem, "beforeBack" | "menuOpen" | "setFocus" | "showBackButton" | "selected">;
+
+export type FlowItemLikeElement = FlowItemLike
+  & HTMLElement;

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

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