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

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

@@ -6,9 +6,13 @@ import { FlipContext, Scale, SelectionMode } from '../interfaces';
 import { InteractiveComponent } from '../../utils/interactive';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 
-/** @slot - A slot for adding text. */
+/** @slot  - A slot for adding text. */
 export declare class DropdownItem extends LitElement {
-    /** 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 URL of the linked resource, which can be set as an absolute or relative path.
@@ -26,12 +30,16 @@ export declare class DropdownItem extends LitElement {
     label: string;
     /** Specifies the relationship to the linked document defined in `href`. */
     rel: string;
-    /** When `true`, the component is selected. */
+    /**
+     * When `true`, the component is selected.
+     *
+     * @default false
+     */
     selected: boolean;
     /** Specifies the frame or window to open the linked document. */
     target: string;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the component is selected. */
-    readonly calciteDropdownItemSelect: TargetedEvent<this, undefined>;
+    readonly calciteDropdownItemSelect: TargetedEvent<this, void>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -12,8 +12,6 @@ import { C as CSS } from "../../chunks/resources6.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: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-duration:.15s;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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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}`;
 class DropdownItem extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.childLink = createRef();
@@ -30,14 +28,11 @@ class DropdownItem extends LitElement {
     this.listenOn(document.body, "calciteInternalDropdownItemChange", this.updateActiveItemOnChange);
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], href: [3, { reflect: true }], iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }], iconStart: [3, { reflect: true }], label: 1, rel: [3, { reflect: true }], scale: [3, { reflect: true }], selected: [7, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], label: 1, rel: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.el?.focus();
@@ -52,8 +47,6 @@ class DropdownItem extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   onClick() {
     this.emitRequestedItem();
   }
@@ -124,8 +117,6 @@ class DropdownItem extends LitElement {
       requestedDropdownGroup: this.parentDropdownGroupEl
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { href, selectionMode, label, iconFlipRtl } = this;
     const iconStartEl = html`<calcite-icon class=${safeClassMap(CSS.iconStart)} .flipRtl=${iconFlipRtl === "start" || iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;

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

@@ -5,9 +5,17 @@ import { Appearance, Kind, Scale } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 
 export declare class Fab extends LitElement {
-    /** Specifies the appearance style of the component. */
+    /**
+     * 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. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /**
      * Specifies an icon to display.
@@ -15,19 +23,39 @@ export declare class Fab extends LitElement {
      * @default "plus"
      */
     icon: IconNameOrString;
-    /** 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 border and background. */
+    /**
+     * 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. */
+    /**
+     * When `true`, a busy indicator is displayed.
+     *
+     * @default false
+     */
     loading: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * 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. */
+    /**
+     * When `true`, displays the `text` value in the component.
+     *
+     * @default false
+     */
     textEnabled: boolean;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -15,7 +15,7 @@ const CSS = {
 const ICONS = {
   plus: "plus"
 };
-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)}calcite-button:hover{--tw-shadow: var(--calcite-shadow-md);--tw-shadow-colored: var(--calcite-shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}calcite-button:active{--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}: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);
@@ -30,25 +30,18 @@ class Fab extends LitElement {
     this.textEnabled = false;
   }
   static {
-    this.properties = { appearance: [3, { reflect: true }], disabled: [7, { reflect: true, type: Boolean }], icon: [3, { reflect: true }], iconFlipRtl: [7, { reflect: true, type: Boolean }], kind: [3, { reflect: true }], label: 1, loading: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], text: 1, textEnabled: [7, { reflect: true, type: Boolean }] };
+    this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     focusElement(this.buttonEl.value);
   }
-  // #endregion
-  // #region Lifecycle
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl } = this;
     const title = !textEnabled ? label || text || null : null;

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

@@ -5,15 +5,15 @@ import { InteractiveComponent } from '../../utils/interactive';
 import { Scale } from '../interfaces';
 
 export declare class Filter extends LitElement {
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    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.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      *
-     * @readonly
+     * @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
@@ -23,27 +23,17 @@ export declare class Filter extends LitElement {
      * This property is needed to conduct filtering.
      */
     items: object[];
-    /**
-     * Specifies an accessible name for the component.
-     */
+    /** 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;
     /**
-     * Made into a prop for testing purposes only
+     * Specifies the size of the component.
      *
-     * @private
+     * @default "m"
      */
-    private messages: Partial<{
-        label: string;
-        clear: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        label: string;
-        clear: string;
-    }>;
-    /** Specifies placeholder text for the input element. */
-    placeholder: string;
-    /** Specifies the size of the component. */
     scale: Scale;
     /** The component's value. */
     get value(): string;
@@ -53,12 +43,19 @@ export declare class Filter extends LitElement {
      *
      * This method can be useful because filtering is delayed and asynchronous.
      *
-     * @param {string} value - The filter text value.
-     * @returns {Promise<void>}
+     * @param value - The filter text value.
+     * @returns
      */
     filter(value?: string): Promise<void>;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the filter text changes. */
-    readonly calciteFilterChange: TargetedEvent<this, undefined>;
+    readonly calciteFilterChange: TargetedEvent<this, void>;
+    private messages: Partial<{
+        label: string;
+        clear: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        label: string;
+        clear: string;
+    }>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "lodash-es";
 import { html } from "lit";
@@ -17,22 +17,22 @@ const CSS = {
 const ICONS = {
   search: "search"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%}:host([scale=s]) .container{padding:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding:var(--calcite-spacing-md)}:host([scale=l]) .container{padding: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%}: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);
     this.filterDebounced = debounce((value, emit = false, onFilter) => this.updateFiltered(filter(this.items ?? [], value, this.filterProps), emit, onFilter), DEBOUNCE.filter);
     this.textInput = createRef();
     this._value = "";
+    this.messages = useT9n();
     this.disabled = false;
     this.filteredItems = [];
     this.items = [];
-    this.messages = useT9n();
     this.scale = "m";
     this.calciteFilterChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], filterProps: [0, { attribute: false }], filteredItems: [0, { attribute: false }], items: [0, { attribute: false }], label: 1, messageOverrides: [0, { attribute: false }], placeholder: 1, scale: [3, { reflect: true }], value: 1 };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], filterProps: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], items: [0, {}, { attribute: false }], label: 1, messageOverrides: [0, {}, { attribute: false }], placeholder: 1, scale: [3, {}, { reflect: true }], value: 1 };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -40,7 +40,6 @@ class Filter extends LitElement {
   static {
     this.styles = styles;
   }
-  /** The component's value. */
   get value() {
     return this._value;
   }
@@ -51,29 +50,16 @@ class Filter extends LitElement {
       this.valueHandler(value);
     }
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Performs a filter on the component.
-   *
-   * This method can be useful because filtering is delayed and asynchronous.
-   *
-   * @param {string} value - The filter text value.
-   * @returns {Promise<void>}
-   */
   async filter(value = this.value) {
     return new Promise((resolve) => {
       this.value = value;
       this.updateFiltered(filter(this.items ?? [], value, this.filterProps), false, resolve);
     });
   }
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     return this.textInput.value?.setFocus();
   }
-  // #endregion
-  // #region Lifecycle
   async load() {
     this.updateFiltered(filter(this.items ?? [], this.value, this.filterProps));
   }
@@ -89,8 +75,6 @@ class Filter extends LitElement {
     super.disconnectedCallback();
     this.filterDebounced.cancel();
   }
-  // #endregion
-  // #region Private Methods
   valueHandler(value) {
     this.filterDebounced(value);
   }
@@ -123,8 +107,6 @@ class Filter extends LitElement {
     }
     callback?.();
   }
-  // #endregion
-  // #region Rendering
   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.textInput)}></calcite-input></label></div>` });

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

@@ -4,7 +4,7 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 import { FlowItem } from '../calcite-flow-item/customElement.js';
 import { FlowDirection, FlowItemLikeElement } from './interfaces';
 
-/** @slot - A slot for adding `calcite-flow-item` elements to the component. */
+/** @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`.

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit";
@@ -16,8 +16,6 @@ const CSS = {
 };
 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 ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}: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 {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.itemMutationObserver = createObserver("mutation", () => this.updateItemsAndProps());
@@ -28,18 +26,11 @@ class Flow extends LitElement {
     this.listen("calciteFlowItemBack", this.handleItemBackClick);
   }
   static {
-    this.properties = { flowDirection: [16, { state: true }], customItemSelectors: 1 };
+    this.properties = { flowDirection: [16, {}, { state: true }], customItemSelectors: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Removes the currently active `calcite-flow-item`.
-   *
-   * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
-   */
   async back() {
     const { items, selectedIndex } = this;
     const selectedItem = items[selectedIndex];
@@ -57,11 +48,6 @@ class Flow extends LitElement {
     nextSelectedItem.selected = true;
     return nextSelectedItem;
   }
-  /**
-   * Sets focus on the component.
-   *
-   * @returns Promise<void>
-   */
   async setFocus() {
     await componentFocusable(this);
     const { items } = this;
@@ -84,8 +70,6 @@ class Flow extends LitElement {
     super.disconnectedCallback();
     this.itemMutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   async handleFlowDirectionChange(flowDirection) {
     if (flowDirection === "standby") {
       return;
@@ -158,8 +142,6 @@ class Flow extends LitElement {
   setFrameEl(el) {
     this.frameEl = el;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { flowDirection } = this;
     const frameDirectionClasses = {

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

@@ -7,78 +7,103 @@ import { OverlayPositioning } from '../../utils/floating-ui';
 import { CollapseDirection, Scale } from '../interfaces';
 
 /**
- * @slot - A slot for adding custom content.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
- * @slot alerts - A slot for adding `calcite-alert`s to the component.
- * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
- * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
- * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
- * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
- * @slot header-content - A slot for adding custom content to the component's header.
- * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
- * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
- * @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
- * @slot footer-end - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
- * @slot footer-start - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
+ * @slot  - A slot for adding custom content.
+ * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
+ * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
+ * @slot [content-top] - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
+ * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
+ * @slot [header-actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
+ * @slot [header-actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
+ * @slot [header-content] - A slot for adding custom content to the component's header.
+ * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
+ * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
+ * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
+ * @slot [footer-actions] - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
+ * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
+ * @slot [footer-start] - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
  */
 export declare class FlowItem extends LitElement {
     /** When provided, the method will be called before it is removed from its parent `calcite-flow`. */
     beforeBack: () => Promise<void>;
     /** Passes a function to run before the component closes. */
     beforeClose: () => Promise<void>;
-    /** When `true`, displays a close button in the trailing side of the component's header. */
+    /**
+     * When `true`, displays a close button in the trailing side of the component's header.
+     *
+     * @default false
+     */
     closable: boolean;
-    /** When `true`, the component will be hidden. */
+    /**
+     * When `true`, the component will be hidden.
+     *
+     * @default false
+     */
     closed: boolean;
-    /** When `true`, hides the component's content area. */
+    /**
+     * When `true`, hides the component's content area.
+     *
+     * @default false
+     */
     collapsed: boolean;
-    /** When `true`, the component is collapsible. */
+    /**
+     * When `true`, the component is collapsible.
+     *
+     * @default false
+     */
     collapsible: boolean;
     /** A description for the component. */
     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;
     /** The component header text. */
     heading: string;
     /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
     headingLevel: HeadingLevel;
-    /** When `true`, a busy indicator is displayed. */
+    /**
+     * When `true`, a busy indicator is displayed.
+     *
+     * @default false
+     */
     loading: boolean;
-    /** When `true`, the action menu items in the `header-menu-actions` slot are open. */
-    menuOpen: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * When `true`, the action menu items in the `header-menu-actions` slot are open.
      *
-     * @private
+     * @default false
      */
-    private messages: Partial<{
-        back: string;
-        close: string;
-        options: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        back: string;
-        close: string;
-        options: string;
-    }>;
+    menuOpen: boolean;
+    /** Use this property to override individual strings used by the component. */
+    messageOverrides?: typeof this.messages._overrides;
     /**
      * 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;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** When true, flow-item is displayed within a parent flow. */
+    /**
+     * When true, flow-item is displayed within a parent flow.
+     *
+     * @default false
+     */
     selected: boolean;
     /**
      * When `true`, displays a back button in the component's header.
      *
      * @internal
+     * @default false
      */
     showBackButton: boolean;
     /**
@@ -101,11 +126,20 @@ export declare class FlowItem extends LitElement {
      */
     setFocus(): Promise<void>;
     /** Fires when the back button is clicked. */
-    readonly calciteFlowItemBack: TargetedEvent<this, undefined>;
+    readonly calciteFlowItemBack: TargetedEvent<this, void>;
     /** Fires when the close button is clicked. */
-    readonly calciteFlowItemClose: TargetedEvent<this, undefined>;
+    readonly calciteFlowItemClose: TargetedEvent<this, void>;
     /** Fires when the content is scrolled. */
-    readonly calciteFlowItemScroll: TargetedEvent<this, undefined>;
+    readonly calciteFlowItemScroll: TargetedEvent<this, void>;
     /** Fires when the collapse button is clicked. */
-    readonly calciteFlowItemToggle: TargetedEvent<this, undefined>;
+    readonly calciteFlowItemToggle: TargetedEvent<this, void>;
+    private messages: Partial<{
+        back: string;
+        close: string;
+        options: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        back: string;
+        close: string;
+        options: string;
+    }>;
 }