@esri/calcite-components 3.2.0-next.9 → 3.2.0

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

@@ -12,24 +12,40 @@ import { AlertDuration, AlertQueue } from './interfaces';
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  *
- * @slot title - A slot for adding a title to the component.
- * @slot message - A slot for adding main text to the component.
- * @slot link - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
- * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.
+ * @slot [title] - A slot for adding a title to the component.
+ * @slot [message] - A slot for adding main text to the component.
+ * @slot [link] - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
+ * @slot [actions-end] - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.
  */
 export declare class Alert extends LitElement {
-    /** When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */
+    /**
+     * When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.
+     *
+     * @default false
+     */
     autoClose: boolean;
-    /** Specifies the duration before the component automatically closes - only use with `autoClose`. */
+    /**
+     * Specifies the duration before the component automatically closes - only use with `autoClose`.
+     *
+     * @default "medium"
+     */
     autoCloseDuration: AlertDuration;
     /**
      * When `true`, shows a default recommended icon. Alternatively,
      * pass a Calcite UI Icon name to display a specific icon.
      */
     icon: IconNameOrString | boolean;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * 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 top border and icon. */
+    /**
+     * Specifies the kind of the component, which will apply to top border and icon.
+     *
+     * @default "brand"
+     */
     kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
     /**
      * Specifies an accessible name for the component.
@@ -39,25 +55,31 @@ export declare class Alert extends LitElement {
     label: string;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
+    /** Specifies the Unicode numeral system used by the component for localization. */
+    numberingSystem: NumberingSystem;
     /**
-     * Made into a prop for testing purposes only
+     * When `true`, displays and positions the component.
      *
-     * @private
+     * @default false
      */
-    private messages: Partial<{
-        close: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        close: string;
-    }>;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /** When `true`, displays and positions the component. */
     open: boolean;
-    /** Specifies the placement of the component. */
+    /**
+     * Specifies the placement of the component.
+     *
+     * @default "bottom"
+     */
     placement: MenuPlacement;
-    /** Specifies the ordering priority of the component when opened. */
+    /**
+     * Specifies the ordering priority of the component when opened.
+     *
+     * @default "last"
+     */
     queue: AlertQueue;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /**
      * Sets focus on the component's "close" button, the first focusable item.
@@ -66,11 +88,16 @@ export declare class Alert extends LitElement {
      */
     setFocus(): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteAlertBeforeClose: TargetedEvent<this, undefined>;
+    readonly calciteAlertBeforeClose: TargetedEvent<this, void>;
     /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteAlertBeforeOpen: TargetedEvent<this, undefined>;
+    readonly calciteAlertBeforeOpen: TargetedEvent<this, void>;
     /** Fires when the component is closed and animation is complete. */
-    readonly calciteAlertClose: TargetedEvent<this, undefined>;
+    readonly calciteAlertClose: TargetedEvent<this, void>;
     /** Fires when the component is open and animation is complete. */
-    readonly calciteAlertOpen: TargetedEvent<this, undefined>;
+    readonly calciteAlertOpen: TargetedEvent<this, void>;
+    private messages: Partial<{
+        close: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        close: string;
+    }>;
 }

package/dist/components/calcite-alert/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.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -101,6 +101,7 @@ class Alert extends LitElement {
     this.transitionProp = "opacity";
     this.totalHoverTime = 0;
     this.totalOpenTime = 0;
+    this.messages = useT9n();
     this.hasEndActions = false;
     this.isFocused = false;
     this.numberStringFormatter = new NumberStringFormat();
@@ -110,7 +111,6 @@ class Alert extends LitElement {
     this.embedded = false;
     this.iconFlipRtl = false;
     this.kind = "brand";
-    this.messages = useT9n();
     this.open = false;
     this.openAlertCount = 0;
     this.placement = "bottom";
@@ -122,24 +122,15 @@ class Alert extends LitElement {
     this.calciteAlertOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasEndActions: [16, { state: true }], isFocused: [16, { state: true }], numberStringFormatter: [16, { state: true }], active: [5, { type: Boolean }], autoClose: [7, { reflect: true, type: Boolean }], autoCloseDuration: [3, { reflect: true }], embedded: [5, { type: Boolean }], icon: [3, { reflect: true, converter: stringOrBoolean }], iconFlipRtl: [7, { reflect: true, type: Boolean }], kind: [3, { reflect: true }], label: 1, messageOverrides: [0, { attribute: false }], numberingSystem: [3, { reflect: true }], open: [7, { reflect: true, type: Boolean }], openAlertCount: [9, { type: Number }], placement: [3, { reflect: true }], queue: [3, { reflect: true }], scale: [3, { reflect: true }] };
+    this.properties = { hasEndActions: [16, {}, { state: true }], isFocused: [16, {}, { state: true }], numberStringFormatter: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], autoClose: [7, {}, { reflect: true, type: Boolean }], autoCloseDuration: [3, {}, { reflect: true }], embedded: [5, {}, { type: Boolean }], icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], openAlertCount: [9, {}, { type: Number }], placement: [3, {}, { reflect: true }], queue: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Sets focus on the component's "close" button, the first focusable item.
-   *
-   *     `@returns` {Promise<void>}
-   */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     const open = this.open;
@@ -178,8 +169,6 @@ class Alert extends LitElement {
     this.clearAutoCloseTimeout();
     this.embedded = false;
   }
-  // #endregion
-  // #region Private Methods
   handleActiveChange() {
     onToggleOpenCloseComponent(this);
     this.clearAutoCloseTimeout();
@@ -241,7 +230,6 @@ class Alert extends LitElement {
     }
     this.transitionEl = el;
   }
-  /** close and emit calciteInternalAlertSync event with the updated queue payload */
   closeAlert() {
     this.open = false;
     this.clearAutoCloseTimeout();
@@ -282,8 +270,6 @@ class Alert extends LitElement {
     this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
     this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { open, autoClose, label, placement, active, openAlertCount } = this;
     const role = autoClose ? "alert" : "alertdialog";

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

@@ -15,24 +15,16 @@ import { AutocompleteItemGroup } from '../calcite-autocomplete-item-group/custom
 import { Label } from '../calcite-label/customElement.js';
 
 /**
- * @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  - 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.
  */
 export declare class Autocomplete extends LitElement {
     /**
-     * Made into a prop for testing purposes only
+     * Specifies the text alignment of the component's value.
      *
-     * @private
+     * @default "start"
      */
-    private messages: Partial<{
-        clear: string;
-        loading: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        clear: string;
-        loading: string;
-    }>;
-    /** Specifies the text alignment of the component's value. */
     alignment: Extract<"start" | "end", Alignment>;
     /**
      * Specifies the type of content to autocomplete, for use in forms.
@@ -41,7 +33,11 @@ export declare class Autocomplete extends LitElement {
      * @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. */
+    /**
+     * 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[];
@@ -53,13 +49,21 @@ export declare class Autocomplete extends LitElement {
     form: string;
     /** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
     icon: IconNameOrString | boolean;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * 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 `true`, a busy indicator is displayed. */
+    /**
+     * When `true`, a busy indicator is displayed.
+     *
+     * @default false
+     */
     loading: boolean;
     /**
      * When the component resides in a form,
@@ -85,7 +89,11 @@ export declare class Autocomplete extends LitElement {
      * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
      */
     name: string;
-    /** When `true`, displays and positions the component. */
+    /**
+     * When `true`, displays and positions the component.
+     *
+     * @default false
+     */
     open: boolean;
     /**
      * Determines the type of positioning to use for the overlaid content.
@@ -93,6 +101,8 @@ export declare class Autocomplete extends LitElement {
      * 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;
     /**
@@ -121,16 +131,27 @@ export declare class Autocomplete extends LitElement {
      * When `true`, the component's value can be read, but cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     * @default false
      */
     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. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** Specifies the status of the input field, which determines message and icons. */
+    /**
+     * 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;
@@ -141,17 +162,20 @@ export declare class Autocomplete extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
-    /** The component's value. */
+    /**
+     * The component's value.
+     *
+     * @default ""
+     */
     value: string;
     /**
      * Updates the position of the component.
      *
      * @param delayed - `true` if the placement should be updated after the component is finished rendering.
-     * @returns {Promise<void>}
+     * @returns
      */
     reposition(delayed?: boolean): Promise<void>;
     /**
@@ -170,27 +194,34 @@ export declare class Autocomplete extends LitElement {
     /**
      * Selects the text of the component's `value`.
      *
-     * @returns {Promise<void>}
+     * @returns
      */
     selectText(): Promise<void>;
     /**
      * Sets focus on the component's first focusable element.
      *
-     * @returns {Promise<void>}
+     * @returns
      */
     setFocus(): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteAutocompleteBeforeClose: TargetedEvent<this, undefined>;
+    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, undefined>;
+    readonly calciteAutocompleteBeforeOpen: TargetedEvent<this, void>;
     /** Fires each time a new `value` is typed and committed. */
-    readonly calciteAutocompleteChange: TargetedEvent<this, undefined>;
+    readonly calciteAutocompleteChange: TargetedEvent<this, void>;
     /** Fires when the component is closed and animation is complete. */
-    readonly calciteAutocompleteClose: TargetedEvent<this, undefined>;
+    readonly calciteAutocompleteClose: TargetedEvent<this, void>;
     /** Fires when the component is open and animation is complete. */
-    readonly calciteAutocompleteOpen: TargetedEvent<this, undefined>;
+    readonly calciteAutocompleteOpen: TargetedEvent<this, void>;
     /** Fires each time a new `inputValue` is typed and committed. */
-    readonly calciteAutocompleteTextChange: TargetedEvent<this, undefined>;
+    readonly calciteAutocompleteTextChange: TargetedEvent<this, void>;
     /** Fires each time a new `inputValue` is typed. */
-    readonly calciteAutocompleteTextInput: TargetedEvent<this, undefined>;
+    readonly calciteAutocompleteTextInput: TargetedEvent<this, void>;
+    private messages: Partial<{
+        clear: string;
+        loading: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        clear: string;
+        loading: string;
+    }>;
 }

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

@@ -1,12 +1,12 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/components-controllers";
+import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { debounce, escapeRegExp } from "lodash-es";
 import { b as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
@@ -18,6 +18,7 @@ import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { c as createObserver } from "../../chunks/observers.js";
+import { c as componentFocusable } from "../../chunks/component.js";
 import { css } from "@lit/reactive-element/css-tag.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:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const SLOTS = {
@@ -41,8 +42,6 @@ const IDS = {
 const groupItemSelector = "calcite-autocomplete-item-group";
 const itemSelector = "calcite-autocomplete-item";
 class Autocomplete extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.guid = guid();
@@ -51,6 +50,11 @@ class Autocomplete extends LitElement {
     this.listId = `autocomplete-list-${this.guid}`;
     this.messages = useT9n();
     this.transitionProp = "opacity";
+    this.mutationObserver = createObserver("mutation", () => this.getAllItemsDebounced());
+    this.resizeObserver = createObserver("resize", () => {
+      this.setFloatingElSize();
+    });
+    this.getAllItemsDebounced = debounce(this.getAllItems, 0);
     this.activeDescendant = "";
     this.activeIndex = -1;
     this.hasContentBottom = false;
@@ -89,16 +93,11 @@ class Autocomplete extends LitElement {
     this.calciteAutocompleteOpen = createEvent({ cancelable: false });
     this.calciteAutocompleteTextChange = createEvent({ cancelable: false });
     this.calciteAutocompleteTextInput = createEvent({ cancelable: false });
-    this.mutationObserver = createObserver("mutation", () => this.getAllItemsDebounced());
-    this.resizeObserver = createObserver("resize", () => {
-      this.setFloatingElSize();
-    });
-    this.getAllItemsDebounced = debounce(this.getAllItems, 0);
     this.listenOn(document, "click", this.documentClickHandler);
     this.listen("calciteInternalAutocompleteItemSelect", this.handleInternalAutocompleteItemSelect);
   }
   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 }], isOpen: [16, { state: true }], enabledItems: [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, { reflect: true, converter: stringOrBoolean }], iconFlipRtl: [7, { reflect: true, type: Boolean }], inputValue: 1, label: 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, validationIcon: [3, { reflect: true, converter: stringOrBoolean }], 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 }], isOpen: [16, {}, { state: true }], enabledItems: [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 }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputValue: 1, label: 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, validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.styles = styles;
@@ -109,14 +108,6 @@ class Autocomplete extends LitElement {
   get enabledItems() {
     return this.items.filter((item) => !item.disabled);
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Updates the position of the component.
-   *
-   * @param delayed - `true` if the placement should be updated after the component is finished rendering.
-   * @returns {Promise<void>}
-   */
   async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, flipPlacements } = this;
     return reposition(this, {
@@ -128,35 +119,14 @@ class Autocomplete extends LitElement {
       type: "menu"
     }, delayed);
   }
-  /**
-   * Scrolls the component's content to a specified set of coordinates.
-   *
-   * @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.
-   */
   async scrollContentTo(options) {
     this.transitionEl?.scrollTo(options);
   }
-  /**
-   * Selects the text of the component's `value`.
-   *
-   * @returns {Promise<void>}
-   */
   async selectText() {
     return this.referenceEl.selectText();
   }
-  /**
-   * Sets focus on the component's first focusable element.
-   *
-   * @returns {Promise<void>}
-   */
   async setFocus() {
+    await componentFocusable(this);
     return this.referenceEl.setFocus();
   }
   connectedCallback() {
@@ -219,8 +189,6 @@ class Autocomplete extends LitElement {
     disconnectForm(this);
     disconnectFloatingUI(this);
   }
-  // #endregion
-  // #region Private Methods
   setFloatingElSize() {
     const { referenceEl, floatingEl } = this;
     if (!referenceEl || !floatingEl) {
@@ -413,6 +381,7 @@ class Autocomplete extends LitElement {
   inputHandler(event) {
     event.stopPropagation();
     this.inputValue = event.target.value;
+    this.open = this.inputValue?.length > 0;
     this.calciteAutocompleteTextInput.emit();
   }
   setFloatingEl(el) {
@@ -425,8 +394,6 @@ class Autocomplete extends LitElement {
     }
     this.transitionEl = el;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { disabled, listId, inputId, isOpen } = this;
     const autofocus = this.el.autofocus;

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

@@ -5,13 +5,17 @@ import { InteractiveComponent } from '../../utils/interactive';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 
 /**
- * @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.
+ * @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. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /**
      * Specifies heading text for the component.

package/dist/components/calcite-autocomplete-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.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -34,24 +34,18 @@ class AutocompleteItem extends LitElement {
     this.calciteInternalAutocompleteItemSelect = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { active: [5, { type: Boolean }], description: 1, disabled: [7, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }], iconStart: [3, { reflect: true }], inputValueMatchPattern: [2, { reflect: true, attribute: false }], label: 1, scale: 1, value: 1 };
+    this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], inputValueMatchPattern: [2, {}, { reflect: true, attribute: false }], label: 1, scale: 1, value: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   handleClick(event) {
     event.preventDefault();
     this.calciteInternalAutocompleteItemSelect.emit();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { active, description, heading, disabled, inputValueMatchPattern } = this;
     return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({

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

@@ -2,7 +2,7 @@
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Scale } from '../interfaces';
 
-/** @slot - A slot for adding `calcite-autocomplete-item`s. */
+/** @slot  - A slot for adding `calcite-autocomplete-item`s. */
 export declare class AutocompleteItemGroup extends LitElement {
     /**
      * Specifies heading text for the component.

package/dist/components/calcite-autocomplete-item-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.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement, nothing, safeClassMap } from "@arcgis/lumina";
@@ -18,15 +18,11 @@ class AutocompleteItemGroup extends LitElement {
     this.scale = "m";
   }
   static {
-    this.properties = { disableSpacing: [5, { type: Boolean }], heading: 1, label: 1, scale: 1 };
+    this.properties = { disableSpacing: [5, {}, { type: Boolean }], heading: 1, label: 1, scale: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
-  // #endregion
-  // #region Rendering
   render() {
     const { scale } = this;
     return html`<div aria-label=${this.label ?? this.heading ?? nothing} class=${safeClassMap({

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

@@ -7,7 +7,11 @@ export declare class Avatar extends LitElement {
     fullName: string;
     /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label. */
     label: string;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /** Specifies the `src` to an image (remember to add a token if the user is private). */
     thumbnail: string;