@esri/calcite-components 5.0.0-next.73 → 5.0.0-next.74

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

@@ -1,238 +1,255 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipPlacement, FloatingLayout, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { Alignment, Scale, Status } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { LabelableComponent } from '../../utils/label';
-import { TextualInputComponent } from '../calcite-input/common/input';
-import { FormComponent, MutableValidityState } from '../../utils/form';
-import { Input } from '../calcite-input/customElement.js';
-import { AutocompleteItem } from '../calcite-autocomplete-item/customElement.js';
-import { AutocompleteItemGroup } from '../calcite-autocomplete-item-group/customElement.js';
-import { Label } from '../calcite-label/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { Alignment, Scale, Status } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
+import type { MutableValidityState } from "../../utils/form.js";
 
 /**
+ * @cssproperty [--calcite-autocomplete-background-color] - Specifies the background color of the component.
+ * @cssproperty [--calcite-autocomplete-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-autocomplete-text-color] - Specifies the text color of the component.
+ * @cssproperty [--calcite-autocomplete-menu-max-size-y] - Specifies the maximum height of the component's menu.
+ * @cssproperty [--calcite-autocomplete-input-prefix-size] - Specifies the Input's prefix width, when present.
+ * @cssproperty [--calcite-autocomplete-input-suffix-size] - Specifies the Input's suffix width, when present.
+ * @cssproperty [--calcite-autocomplete-input-background-color] - Specifies the background color of the Input.
+ * @cssproperty [--calcite-autocomplete-input-border-color] - Specifies the border color of the Input.
+ * @cssproperty [--calcite-autocomplete-input-corner-radius] - Specifies the corner radius of the Input.
+ * @cssproperty [--calcite-autocomplete-input-shadow] - Specifies the shadow of the Input.
+ * @cssproperty [--calcite-autocomplete-input-icon-color] - Specifies the icon color of the Input.
+ * @cssproperty [--calcite-autocomplete-input-text-color] - Specifies the text color of the Input.
+ * @cssproperty [--calcite-autocomplete-input-placeholder-text-color] - Specifies the color of placeholder text in the Input.
+ * @cssproperty [--calcite-autocomplete-input-actions-background-color] - Specifies the background color of Input's `clearable` element.
+ * @cssproperty [--calcite-autocomplete-input-actions-background-color-hover] - Specifies the background color of Input's `clearable` element when hovered.
+ * @cssproperty [--calcite-autocomplete-input-actions-background-color-press] - Specifies the background color of Input's `clearable` element when pressed.
+ * @cssproperty [--calcite-autocomplete-input-actions-icon-color] - Specifies the icon color of Input's `clearable` element.
+ * @cssproperty [--calcite-autocomplete-input-actions-icon-color-hover] - Specifies the icon color of Input's `clearable` element when hovered.
+ * @cssproperty [--calcite-autocomplete-input-actions-icon-color-press] - Specifies the icon color of Input's `clearable` element when pressed.
+ * @cssproperty [--calcite-autocomplete-input-loading-background-color] - Specifies the background color of the Input's `loading` element, when present.
+ * @cssproperty [--calcite-autocomplete-input-loading-fill-color] - Specifies the fill color of the Input's `loading` element, when present.
+ * @cssproperty [--calcite-autocomplete-input-prefix-text-color] - Specifies the text color of the Input's prefix, when present.
+ * @cssproperty [--calcite-autocomplete-input-suffix-text-color] - Specifies the text color of the Input's suffix, when present.
  * @slot  - A slot for adding `calcite-autocomplete-item` elements.
  * @slot [content-bottom] - A slot for adding content below `calcite-autocomplete-item` elements.
  * @slot [content-top] - A slot for adding content above `calcite-autocomplete-item` elements.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
-export declare class Autocomplete extends LitElement {
-    /**
-     * Specifies the text alignment of the component's value.
-     *
-     * @default "start"
-     */
-    alignment: Extract<"start" | "end", Alignment>;
-    /**
-     * Specifies the type of content to autocomplete, for use in forms.
-     * Read the native attribute's documentation on MDN for more info.
-     *
-     * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
-     */
-    autocomplete: AutoFill;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-    icon: IconName | boolean;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /** The component's input value. */
-    inputValue: string;
-    /** Accessible name for the component. */
-    label: string;
-    /** When provided, displays label text on the component. */
-    labelText: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /**
-     * When the component resides in a form,
-     * specifies the maximum length of text for the component's value.
-     *
-     * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
-     */
-    maxLength: number;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When the component resides in a form,
-     * specifies the minimum length of text for the component's value.
-     *
-     * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
-     */
-    minLength: number;
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     *
-     * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
-     */
-    name: string;
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * When the component resides in a form,
-     * specifies a regular expression (regex) pattern the component's `value` must match for validation.
-     * Read the native attribute's documentation on MDN for more info.
-     *
-     * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
-     */
-    pattern: string;
-    /**
-     * Specifies placeholder text for the component.
-     *
-     * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
-     */
-    placeholder: string;
-    /**
-     * Determines where the component will be positioned relative to the container element.
-     *
-     * @default "bottom-start"
-     */
-    placement: MenuPlacement;
-    /** Adds text to the start of the component. */
-    prefixText: string;
-    /**
-     * When `true`, the component's value can be read, but cannot be modified.
-     *
-     * @default false
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     */
-    readOnly: boolean;
-    /**
-     * When `true` and the component resides in a form,
-     * the component must have a value in order for the form to submit.
-     *
-     * @default false
-     */
-    required: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies the status of the input field, which determines message and icons.
-     *
-     * @default "idle"
-     */
-    status: Status;
-    /** Adds text to the end of the component. */
-    suffixText: string;
-    /**
-     * When true, disables top layer placement when the component is open.
-     *
-     * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
-     *
-     * @default false
-     * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
-     */
-    topLayerDisabled: boolean;
-    /** Specifies the validation icon to display under the component. */
-    validationIcon: IconName | boolean;
-    /** Specifies the validation message to display under the component. */
-    validationMessage: string;
-    /**
-     * The current validation state of the component.
-     *
-     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
-     */
-    readonly validity: MutableValidityState;
-    /**
-     * The component's value.
-     *
-     * @default ""
-     */
-    value: string;
-    /**
-     * Updates the position of the component.
-     *
-     * @param delayed
-     * @param delayed - `true` if the placement should be updated after the component is finished rendering.
-     */
-    reposition(delayed?: boolean): Promise<void>;
-    /**
-     * Scrolls the component's content to a specified set of coordinates.
-     *
-     * @param options
-     * @example
-     * myAutocomplete.scrollContentTo({
-     *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
-     *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
-     *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
-     * });
-     * @param options - allows specific coordinates to be defined.
-     * @returns promise that resolves once the content is scrolled to.
-     */
-    scrollContentTo(options?: ScrollToOptions): Promise<void>;
-    /** Selects the text of the component's `value`. */
-    selectText(): Promise<void>;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options
-     * @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 component is requested to be closed and before the closing transition begins. */
-    readonly calciteAutocompleteBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteAutocompleteBeforeOpen: TargetedEvent<this, void>;
-    /** Fires each time a new `value` is typed and committed. */
-    readonly calciteAutocompleteChange: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteAutocompleteClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteAutocompleteOpen: TargetedEvent<this, void>;
-    /** Fires each time a new `inputValue` is typed and committed. */
-    readonly calciteAutocompleteTextChange: TargetedEvent<this, void>;
-    /** Fires each time a new `inputValue` is typed. */
-    readonly calciteAutocompleteTextInput: TargetedEvent<this, void>;
-    private messages: Partial<{
-        clear: string;
-        loading: string;
-        required: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        clear: string;
-        loading: string;
-        required: string;
-    }>;
-}
+export abstract class Autocomplete extends LitElement {
+  /**
+   * Specifies the text alignment of the component's value.
+   *
+   * @default "start"
+   */
+  accessor alignment: Extract<"start" | "end", Alignment>;
+  /**
+   * Specifies the type of content to autocomplete, for use in forms.
+   * Read the native attribute's documentation on MDN for more info.
+   *
+   * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+   */
+  accessor autocomplete: AutoFill;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /**
+   * Specifies the `id` of the component's associated form.
+   *
+   * When not set, the component is associated with its ancestor form element, if one exists.
+   */
+  accessor form: string;
+  /** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
+  accessor icon: IconName | boolean;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /** The component's input value. */
+  accessor inputValue: string;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Specifies the component's label text. */
+  accessor labelText: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * When the component resides in a form,
+   * specifies the maximum length of text for the component's value.
+   *
+   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
+   */
+  accessor maxLength: number;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      clear?: string;
+      loading?: string;
+      required?: string;
+  };
+  /**
+   * When the component resides in a form,
+   * specifies the minimum length of text for the component's value.
+   *
+   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
+   */
+  accessor minLength: number;
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+   */
+  accessor name: string;
+  /**
+   * When `true`, displays and positions the component.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * When the component resides in a form,
+   * specifies a regular expression (regex) pattern the component's `value` must match for validation.
+   * Read the native attribute's documentation on MDN for more info.
+   *
+   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
+   */
+  accessor pattern: string;
+  /**
+   * Specifies placeholder text for the component.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  accessor placeholder: string;
+  /**
+   * Determines where the component will be positioned relative to the container element.
+   *
+   * @default "bottom-start"
+   */
+  accessor placement: MenuPlacement;
+  /** Adds text to the start of the component. */
+  accessor prefixText: string;
+  /**
+   * When `true`, the component's value can be read, but cannot be modified.
+   *
+   * @default false
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  accessor readOnly: boolean;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies the status of the input field, which determines message and icons.
+   *
+   * @default "idle"
+   */
+  accessor status: Status;
+  /** Adds text to the end of the component. */
+  accessor suffixText: string;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /** Specifies the validation icon to display under the component. */
+  accessor validationIcon: IconName | boolean;
+  /** Specifies the validation message to display under the component. */
+  accessor validationMessage: string;
+  /**
+   * The component's current validation state.
+   *
+   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): MutableValidityState;
+  /**
+   * The component's value.
+   *
+   * @default ""
+   */
+  accessor value: string;
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed - `true` if the placement should be updated after the component is finished rendering.
+   */
+  reposition(delayed?: boolean): Promise<void>;
+  /**
+   * Scrolls the component's content to a specified set of coordinates.
+   *
+   * @param options - allows specific coordinates to be defined.
+   * @returns promise that resolves once the content is scrolled to.
+   * @example
+   * myAutocomplete.scrollContentTo({
+   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   * });
+   */
+  scrollContentTo(options?: ScrollToOptions): Promise<void>;
+  /** Selects the text of the component's `value`. */
+  selectText(): Promise<void>;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @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 component is requested to be closed and before the closing transition begins. */
+  readonly calciteAutocompleteBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteAutocompleteBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires each time a new `value` is typed and committed. */
+  readonly calciteAutocompleteChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteAutocompleteClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is open and animation is complete. */
+  readonly calciteAutocompleteOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires each time a new `inputValue` is typed and committed. */
+  readonly calciteAutocompleteTextChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires each time a new `inputValue` is typed. */
+  readonly calciteAutocompleteTextInput: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteAutocompleteBeforeClose: Autocomplete["calciteAutocompleteBeforeClose"]["detail"];
+    calciteAutocompleteBeforeOpen: Autocomplete["calciteAutocompleteBeforeOpen"]["detail"];
+    calciteAutocompleteChange: Autocomplete["calciteAutocompleteChange"]["detail"];
+    calciteAutocompleteClose: Autocomplete["calciteAutocompleteClose"]["detail"];
+    calciteAutocompleteOpen: Autocomplete["calciteAutocompleteOpen"]["detail"];
+    calciteAutocompleteTextChange: Autocomplete["calciteAutocompleteTextChange"]["detail"];
+    calciteAutocompleteTextInput: Autocomplete["calciteAutocompleteTextInput"]["detail"];
+  };
+}

package/dist/components/calcite-autocomplete/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.73 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { css, nothing, html } from "lit";
@@ -9,10 +9,10 @@ import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
-import { b as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
@@ -111,7 +111,7 @@ class Autocomplete extends LitElement {
     this.listen("calciteAutocompleteItemSelect", this.handleAutocompleteItemSelect);
   }
   static {
-    this.properties = { activeDescendant: [16, {}, { state: true }], activeIndex: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], items: [16, {}, { state: true }], groups: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputValue: 1, label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, placement: [3, {}, { reflect: true }], prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+    this.properties = { activeDescendant: [16, {}, { state: true }], activeIndex: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], items: [16, {}, { state: true }], groups: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputValue: 1, label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, placement: [3, {}, { reflect: true }], prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.styles = styles;

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

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

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

@@ -1,37 +1,44 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipContext, Scale } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { FlipContext } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-autocomplete-background-color] - Specifies the background color of the component.
+ * @cssproperty [--calcite-autocomplete-description-text-color] - Specifies the text color of the component's description.
+ * @cssproperty [--calcite-autocomplete-heading-text-color] - Specifies the text color of the component's heading.
+ * @cssproperty [--calcite-autocomplete-text-color] - Specifies the text color of the component.
  * @slot [content-end] - A slot for adding non-actionable elements after content of the component.
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.
  */
-export declare class AutocompleteItem extends LitElement {
-    /** A description for the component. Displays below the label text. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Specifies heading text for the component.
-     *
-     * @required
-     */
-    heading: string;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Accessible name for the component. */
-    label: string;
-    /** The component's value. */
-    value: string;
-    /** Fires when the item has been selected. */
-    readonly calciteAutocompleteItemSelect: TargetedEvent<this, void>;
-}
+export abstract class AutocompleteItem extends LitElement {
+  /** Specifies a description for the component. Displays below the label text. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the component's heading text.
+   *
+   * @required
+   */
+  accessor heading: 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"`). */
+  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;
+  /** The component's value. */
+  accessor value: string;
+  /** Fires when the item has been selected. */
+  readonly calciteAutocompleteItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteAutocompleteItemSelect: AutocompleteItem["calciteAutocompleteItemSelect"]["detail"];
+  };
+}