@esri/calcite-components 1.0.0-next.573 → 1.0.0-next.576

package/dist/types/components.d.ts

@@ -674,7 +674,7 @@ export namespace Components {
          */
         "allowEmpty": boolean;
         /**
-          * specify the appearance - default (containing border), or minimal (no containing border)
+          * specify the appearance - solid (containing border), or minimal (no containing border)
          */
         "appearance": ColorAppearance;
         /**
@@ -1422,9 +1422,80 @@ export namespace Components {
     }
     interface CalciteFlow {
         /**
-          * Removes the currently active `calcite-panel`.
+          * Removes the currently active `calcite-flow-item` or `calcite-panel`.
          */
-        "back": () => Promise<HTMLCalcitePanelElement>;
+        "back": () => Promise<HTMLCalciteFlowItemElement>;
+    }
+    interface CalciteFlowItem {
+        /**
+          * When provided, this method will be called before it is removed from the parent flow.
+         */
+        "beforeBack"?: () => Promise<void>;
+        /**
+          * When true, displays a close button in the trailing side of the header
+         */
+        "closable": boolean;
+        /**
+          * When true, flow-item will be hidden
+         */
+        "closed": boolean;
+        /**
+          * A description for the component.
+         */
+        "description": string;
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
+        /**
+          * The component header text.
+         */
+        "heading"?: string;
+        /**
+          * Specifies the number at which section headings should start.
+         */
+        "headingLevel": HeadingLevel;
+        /**
+          * Specifies the maximum height of the component.
+         */
+        "heightScale"?: Scale;
+        /**
+          * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+         */
+        "intlBack"?: string;
+        /**
+          * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
+         */
+        "intlClose"?: string;
+        /**
+          * Accessible name for the component's actions menu.
+         */
+        "intlOptions"?: string;
+        /**
+          * When true, a busy indicator is displayed.
+         */
+        "loading": boolean;
+        /**
+          * When true, the action menu items in the `header-menu-actions` slot are open.
+         */
+        "menuOpen": boolean;
+        /**
+          * Scrolls the component's content to a specified set of coordinates.  ```   myCalciteFlowItem.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
+         */
+        "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * When true, displays a back button in the header.
+         */
+        "showBackButton": boolean;
+        /**
+          * Specifies the width of the component.
+         */
+        "widthScale"?: Scale;
     }
     interface CalciteGraph {
         /**
@@ -2101,6 +2172,7 @@ export namespace Components {
     interface CalciteInputTimePicker {
         /**
           * The active state of the time input
+          * @deprecated Use open instead.
          */
         "active": boolean;
         /**
@@ -2163,6 +2235,10 @@ export namespace Components {
           * The name of the time input
          */
         "name": string;
+        /**
+          * When true, displays the `calcite-time-picker` component.
+         */
+        "open": boolean;
         /**
           * Determines where the popover will be positioned relative to the input.
           * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
@@ -2539,6 +2615,7 @@ export namespace Components {
     interface CalcitePanel {
         /**
           * When provided, this method will be called before it is removed from the parent flow.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "beforeBack"?: () => Promise<void>;
         /**
@@ -2581,6 +2658,7 @@ export namespace Components {
         "heightScale"?: Scale;
         /**
           * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "intlBack"?: string;
         /**
@@ -2608,9 +2686,10 @@ export namespace Components {
           * Sets focus on the component.
           * @param focusId
          */
-        "setFocus": (focusId?: "dismiss-button" | "back-button") => Promise<void>;
+        "setFocus": (focusId?: "back-button" | "dismiss-button") => Promise<void>;
         /**
           * When true, displays a back button in the header.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "showBackButton": boolean;
         /**
@@ -3452,23 +3531,23 @@ export namespace Components {
     }
     interface CalciteTab {
         /**
-          * Show this tab
-          * @deprecated Use selected instead.
+          * When true, the component's contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
+          * @deprecated Use "selected" instead.
          */
         "active": boolean;
         /**
-          * Return the index of this tab within the tab array
+          * Returns the index of the component item within the tab array.
          */
         "getTabIndex": () => Promise<number>;
         "scale": Scale;
         /**
-          * When true, display this tab.
+          * When true, the component's contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
          */
         "selected": boolean;
         /**
-          * Optionally include a unique name for this tab, be sure to also set this name on the associated title.
+          * Specifies a unique name for the component.  When specified, use the same value on the `calcite-tab-title`.
          */
-        "tab": string;
+        "tab"?: string;
         /**
           * @param tabIds
           * @param titleIds
@@ -3483,51 +3562,51 @@ export namespace Components {
         "position": TabPosition;
         "scale": Scale;
         /**
-          * Name to use when saving selected tab data to localStorage
+          * Specifies the name when saving selected `calcite-tab` data to `localStorage`.
          */
         "storageId": string;
         /**
-          * Pass the same string to multiple tab navs to keep them all in sync if one changes
+          * Specifies text to update multiple components to keep in sync if one changes.
          */
         "syncId": string;
     }
     interface CalciteTabTitle {
         /**
-          * Show this tab title as selected
-          * @deprecated Use selected instead.
+          * When true, the component and its respective `calcite-tab` contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
+          * @deprecated Use "selected" instead.
          */
         "active": boolean;
         "bordered": boolean;
         /**
-          * Disable this tab title
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         "getTabIdentifier": () => Promise<TabID>;
         /**
-          * Return the index of this title within the nav
+          * Returns the index of the title within the `calcite-tab-nav`.
          */
         "getTabIndex": () => Promise<number>;
         /**
-          * optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names
+          * Specifies an icon to display at the end of the component - accepts Calcite UI icon names.
          */
         "iconEnd"?: string;
         /**
-          * flip the icon(s) in rtl
+          * When true, the icon will be flipped when the element direction is right-to-left ("rtl").
          */
         "iconFlipRtl"?: FlipContext;
         /**
-          * optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names
+          * Specifies an icon to display at the start of the component - accepts Calcite UI icon names.
          */
         "iconStart"?: string;
         "layout": TabLayout;
         "position": TabPosition;
         "scale": Scale;
         /**
-          * When true, display this tab title as selected.
+          * When true, the component and its respective `calcite-tab` contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
          */
         "selected": boolean;
         /**
-          * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab.
+          * Specifies a unique name for the component.  When specified, use the same value on the `calcite-tab`.
          */
         "tab"?: string;
         /**
@@ -3538,95 +3617,95 @@ export namespace Components {
     }
     interface CalciteTabs {
         /**
-          * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+          * When true and layout is set to "inline", the component will display with a folder style menu.
          */
         "bordered": boolean;
         /**
-          * Align tab titles to the edge or fully justify them across the tab nav ("center")
+          * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
          */
         "layout": TabLayout;
         /**
-          * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+          * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
          */
         "position": TabPosition;
         /**
-          * Specify the scale of the tabs component, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
     }
     interface CalciteTile {
         /**
-          * The active state of the tile.
+          * When true, the component is active.
          */
         "active": boolean;
         /**
-          * The description text that appears beneath the heading of the tile.
+          * A description for the component, which displays below the heading.
          */
         "description"?: string;
         /**
-          * When true, prevents interaction.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * The embed mode of the tile.  When true, renders without a border and padding for use by other components.
+          * The component's embed mode.  When true, renders without a border and padding for use by other components.
          */
         "embed": boolean;
         /**
-          * The focused state of the tile.
+          * The focused state of the component.
          */
         "focused": boolean;
         /**
-          * The heading text that appears between the icon and description of the tile.
+          * The component header text, which displays between the icon and description.
          */
         "heading"?: string;
         /**
-          * The hidden state of the tile.
+          * When true, the component is not displayed and is not focusable.
          */
         "hidden": boolean;
         /**
-          * The (optional) url for the tile. (Only applies when embed is set to false)
+          * When embed is "false", the url for the component.
          */
         "href"?: string;
         /**
-          * The icon that appears at the top of the tile.
+          * Specifies an icon to display.
          */
         "icon"?: string;
     }
     interface CalciteTileSelect {
         /**
-          * The checked state of the tile select.
+          * When true, the component is checked.
          */
         "checked": boolean;
         /**
-          * The description text that appears beneath the heading of the tile.
+          * A description for the component, which displays below the heading.
          */
         "description"?: string;
         /**
-          * The disabled state of the tile select.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * The heading text that appears between the icon and description of the tile.
+          * The component header text, which displays between the icon and description.
          */
         "heading"?: string;
         /**
-          * The hidden state of the tile select.
+          * When true, the component is not displayed and is not focusable or checkable.
          */
         "hidden": boolean;
         /**
-          * The icon that appears at the top of the tile.
+          * Specifies an icon to display.
          */
         "icon"?: string;
         /**
-          * The side of the tile that the radio or checkbox appears on when inputEnabled is true.
+          * When inputEnabled is true, the placement of the interactive input on the component.
          */
         "inputAlignment": Extract<"end" | "start", Alignment>;
         /**
-          * Display an interactive radio or checkbox.
+          * When true, displays an interactive input based on the "type" property.
          */
         "inputEnabled": boolean;
         /**
-          * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
+          * Specifies the name of the component on form submission.
          */
         "name": any;
         /**
@@ -3634,95 +3713,95 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The selection mode of the tile select: radio (single) or checkbox (multiple).
+          * The selection mode of the component.  Use radio for single selection, and checkbox for multiple selections.
          */
         "type": TileSelectType;
         /**
-          * The value of the tile select.  This value will appear in form submissions when this tile select is checked.
+          * The component's value.
          */
         "value"?: any;
         /**
-          * specify the width of the tile, defaults to auto
+          * Specifies the width of the component.
          */
         "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteTileSelectGroup {
         /**
-          * The disabled state of the tile select.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts
+          * Defines the layout of the component.  Use "horizontal" for rows, and "vertical" for a single column.
          */
         "layout"?: TileSelectGroupLayout;
     }
     interface CalciteTimePicker {
         /**
-          * aria-label for the hour input
+          * Accessible name for the component's hour input.
           * @default "Hour"
          */
         "intlHour": string;
         /**
-          * aria-label for the hour down button
+          * Accessible name for the component's hour down button.
           * @default "Decrease hour"
          */
         "intlHourDown": string;
         /**
-          * aria-label for the hour up button
+          * Accessible name for the component's hour up button.
           * @default "Increase hour"
          */
         "intlHourUp": string;
         /**
-          * aria-label for the meridiem (am/pm) input
+          * Accessible name for the component's meridiem (AM/PM) input.
           * @default "AM/PM"
          */
         "intlMeridiem": string;
         /**
-          * aria-label for the meridiem (am/pm) down button
+          * Accessible name for the component's meridiem (AM/PM) down button.
           * @default "Decrease AM/PM"
          */
         "intlMeridiemDown": string;
         /**
-          * aria-label for the meridiem (am/pm) up button
+          * Accessible name for the component's meridiem (AM/PM) up button.
           * @default "Increase AM/PM"
          */
         "intlMeridiemUp": string;
         /**
-          * aria-label for the minute input
+          * Accessible name for the component's minute input.
           * @default "Minute"
          */
         "intlMinute": string;
         /**
-          * aria-label for the minute down button
+          * Accessible name for the component's minute down button.
           * @default "Decrease minute"
          */
         "intlMinuteDown": string;
         /**
-          * aria-label for the minute up button
+          * Accessible name for the component's minute up button.
           * @default "Increase minute"
          */
         "intlMinuteUp": string;
         /**
-          * aria-label for the second input
+          * Accessible name for the component's second input.
           * @default "Second"
          */
         "intlSecond": string;
         /**
-          * aria-label for the second down button
+          * Accessible name for the component's second down button.
           * @default "Decrease second"
          */
         "intlSecondDown": string;
         /**
-          * aria-label for the second up button
+          * Accessible name for the component's second up button.
           * @default "Increase second"
          */
         "intlSecondUp": string;
         /**
-          * BCP 47 language tag for desired language and country format
+          * BCP 47 language tag for desired language and country format.
          */
         "locale": string;
         /**
-          * The scale (size) of the time picker
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
@@ -3731,81 +3810,81 @@ export namespace Components {
          */
         "setFocus": (target: TimePart) => Promise<void>;
         /**
-          * number (seconds) that specifies the granularity that the value must adhere to
+          * Specifies the granularity the "value" must adhere to (in seconds).
          */
         "step": number;
         /**
-          * The selected time in UTC (always 24-hour format)
+          * The component's value in UTC (always 24-hour format).
          */
         "value": string;
     }
     interface CalciteTip {
         /**
-          * No longer displays the tip.
+          * When true, the component does not display.
          */
         "dismissed": boolean;
         /**
-          * The heading of the tip.
+          * The component header text.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
         /**
-          * Alternate text for closing the tip.
+          * Accessible name for the component's close button.
          */
         "intlClose"?: string;
         /**
-          * Indicates whether the tip can be dismissed.
+          * When true, the close button is not present on the component.
          */
         "nonDismissible": boolean;
         /**
-          * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+          * When true and if it has a parent `calcite-tip-manager`, the component is selected.  Only one tip can be selected within the `calcite-tip-manager` parent.
          */
         "selected": boolean;
     }
     interface CalciteTipGroup {
         /**
-          * The title used for all nested tips.
+          * The component header text for all nested `calcite-tip`s.
          */
         "groupTitle"?: string;
     }
     interface CalciteTipManager {
         /**
-          * Closed state of the `calcite-tip-manager`.
+          * When true, does not display or position the component.
          */
         "closed": boolean;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
         /**
-          * Alternate text for closing the tip.
+          * Accessible name for the component's close button.
          */
         "intlClose"?: string;
         /**
-          * The default group title for the `calcite-tip-manager`.
+          * Accessible name for the `calcite-tip-group` title.
          */
         "intlDefaultTitle"?: string;
         /**
-          * Alternate text for navigating to the next tip.
+          * Accessible name for navigating to the next tip.
          */
         "intlNext"?: string;
         /**
-          * Label that appears on hover of pagination icon.
+          * Text that accompanies the component's pagination.
          */
         "intlPaginationLabel"?: string;
         /**
-          * Alternate text for navigating to the previous tip.
+          * Accessible name for navigating to the previous tip.
          */
         "intlPrevious"?: string;
         /**
-          * Selects the next tip to display
+          * Selects the next `calcite-tip` to display.
          */
         "nextTip": () => Promise<void>;
         /**
-          * Selects the previous tip to display
+          * Selects the previous `calcite-tip` to display.
          */
         "previousTip": () => Promise<void>;
     }
@@ -4109,6 +4188,10 @@ export interface CalciteFilterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteFilterElement;
 }
+export interface CalciteFlowItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteFlowItemElement;
+}
 export interface CalciteHandleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteHandleElement;
@@ -4460,6 +4543,12 @@ declare global {
         prototype: HTMLCalciteFlowElement;
         new (): HTMLCalciteFlowElement;
     };
+    interface HTMLCalciteFlowItemElement extends Components.CalciteFlowItem, HTMLStencilElement {
+    }
+    var HTMLCalciteFlowItemElement: {
+        prototype: HTMLCalciteFlowItemElement;
+        new (): HTMLCalciteFlowItemElement;
+    };
     interface HTMLCalciteGraphElement extends Components.CalciteGraph, HTMLStencilElement {
     }
     var HTMLCalciteGraphElement: {
@@ -4858,6 +4947,7 @@ declare global {
         "calcite-fab": HTMLCalciteFabElement;
         "calcite-filter": HTMLCalciteFilterElement;
         "calcite-flow": HTMLCalciteFlowElement;
+        "calcite-flow-item": HTMLCalciteFlowItemElement;
         "calcite-graph": HTMLCalciteGraphElement;
         "calcite-handle": HTMLCalciteHandleElement;
         "calcite-icon": HTMLCalciteIconElement;
@@ -5560,7 +5650,7 @@ declare namespace LocalJSX {
          */
         "allowEmpty"?: boolean;
         /**
-          * specify the appearance - default (containing border), or minimal (no containing border)
+          * specify the appearance - solid (containing border), or minimal (no containing border)
          */
         "appearance"?: ColorAppearance;
         /**
@@ -6362,6 +6452,72 @@ declare namespace LocalJSX {
     }
     interface CalciteFlow {
     }
+    interface CalciteFlowItem {
+        /**
+          * When provided, this method will be called before it is removed from the parent flow.
+         */
+        "beforeBack"?: () => Promise<void>;
+        /**
+          * When true, displays a close button in the trailing side of the header
+         */
+        "closable"?: boolean;
+        /**
+          * When true, flow-item will be hidden
+         */
+        "closed"?: boolean;
+        /**
+          * A description for the component.
+         */
+        "description"?: string;
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
+        /**
+          * The component header text.
+         */
+        "heading"?: string;
+        /**
+          * Specifies the number at which section headings should start.
+         */
+        "headingLevel"?: HeadingLevel;
+        /**
+          * Specifies the maximum height of the component.
+         */
+        "heightScale"?: Scale;
+        /**
+          * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+         */
+        "intlBack"?: string;
+        /**
+          * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
+         */
+        "intlClose"?: string;
+        /**
+          * Accessible name for the component's actions menu.
+         */
+        "intlOptions"?: string;
+        /**
+          * When true, a busy indicator is displayed.
+         */
+        "loading"?: boolean;
+        /**
+          * When true, the action menu items in the `header-menu-actions` slot are open.
+         */
+        "menuOpen"?: boolean;
+        /**
+          * Fires when the back button is clicked.
+         */
+        "onCalciteFlowItemBackClick"?: (event: CalciteFlowItemCustomEvent<void>) => void;
+        /**
+          * When true, displays a back button in the header.
+         */
+        "showBackButton"?: boolean;
+        /**
+          * Specifies the width of the component.
+         */
+        "widthScale"?: Scale;
+    }
     interface CalciteGraph {
         /**
           * Array of values describing a single color stop ([offset, color, opacity]) These color stops should be sorted by offset value
@@ -7055,6 +7211,7 @@ declare namespace LocalJSX {
     interface CalciteInputTimePicker {
         /**
           * The active state of the time input
+          * @deprecated Use open instead.
          */
         "active"?: boolean;
         /**
@@ -7117,6 +7274,10 @@ declare namespace LocalJSX {
           * Fires when the time value is changed as a result of user input.
          */
         "onCalciteInputTimePickerChange"?: (event: CalciteInputTimePickerCustomEvent<string>) => void;
+        /**
+          * When true, displays the `calcite-time-picker` component.
+         */
+        "open"?: boolean;
         /**
           * Determines where the popover will be positioned relative to the input.
           * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
@@ -7474,6 +7635,7 @@ declare namespace LocalJSX {
     interface CalcitePanel {
         /**
           * When provided, this method will be called before it is removed from the parent flow.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "beforeBack"?: () => Promise<void>;
         /**
@@ -7516,6 +7678,7 @@ declare namespace LocalJSX {
         "heightScale"?: Scale;
         /**
           * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "intlBack"?: string;
         /**
@@ -7536,6 +7699,7 @@ declare namespace LocalJSX {
         "menuOpen"?: boolean;
         /**
           * Fires when the back button is clicked.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "onCalcitePanelBackClick"?: (event: CalcitePanelCustomEvent<void>) => void;
         /**
@@ -7553,6 +7717,7 @@ declare namespace LocalJSX {
         "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<void>) => void;
         /**
           * When true, displays a back button in the header.
+          * @deprecated use `calcite-flow-item` instead.
          */
         "showBackButton"?: boolean;
         /**
@@ -8373,332 +8538,332 @@ declare namespace LocalJSX {
     }
     interface CalciteTab {
         /**
-          * Show this tab
-          * @deprecated Use selected instead.
+          * When true, the component's contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
+          * @deprecated Use "selected" instead.
          */
         "active"?: boolean;
         /**
-          * When true, display this tab.
+          * When true, the component's contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
          */
         "selected"?: boolean;
         /**
-          * Optionally include a unique name for this tab, be sure to also set this name on the associated title.
+          * Specifies a unique name for the component.  When specified, use the same value on the `calcite-tab-title`.
          */
         "tab"?: string;
     }
     interface CalciteTabNav {
         /**
-          * Emitted when the active tab changes
+          * Emits when the selected `calcite-tab` changes.
           * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
          */
         "onCalciteTabChange"?: (event: CalciteTabNavCustomEvent<TabChangeEventDetail>) => void;
         /**
-          * Name to use when saving selected tab data to localStorage
+          * Specifies the name when saving selected `calcite-tab` data to `localStorage`.
          */
         "storageId"?: string;
         /**
-          * Pass the same string to multiple tab navs to keep them all in sync if one changes
+          * Specifies text to update multiple components to keep in sync if one changes.
          */
         "syncId"?: string;
     }
     interface CalciteTabTitle {
         /**
-          * Show this tab title as selected
-          * @deprecated Use selected instead.
+          * When true, the component and its respective `calcite-tab` contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
+          * @deprecated Use "selected" instead.
          */
         "active"?: boolean;
         /**
-          * Disable this tab title
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names
+          * Specifies an icon to display at the end of the component - accepts Calcite UI icon names.
          */
         "iconEnd"?: string;
         /**
-          * flip the icon(s) in rtl
+          * When true, the icon will be flipped when the element direction is right-to-left ("rtl").
          */
         "iconFlipRtl"?: FlipContext;
         /**
-          * optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names
+          * Specifies an icon to display at the start of the component - accepts Calcite UI icon names.
          */
         "iconStart"?: string;
         /**
-          * Fires when a specific tab is activated. Emits the "tab" property or the index position.
+          * Fires when a `calcite-tab` is selected. Emits the "tab" property, or the index position.
           * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
          */
         "onCalciteTabsActivate"?: (event: CalciteTabTitleCustomEvent<TabChangeEventDetail>) => void;
         /**
-          * When true, display this tab title as selected.
+          * When true, the component and its respective `calcite-tab` contents are selected.  Only one tab can be selected within the `calcite-tabs` parent.
          */
         "selected"?: boolean;
         /**
-          * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab.
+          * Specifies a unique name for the component.  When specified, use the same value on the `calcite-tab`.
          */
         "tab"?: string;
     }
     interface CalciteTabs {
         /**
-          * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+          * When true and layout is set to "inline", the component will display with a folder style menu.
          */
         "bordered"?: boolean;
         /**
-          * Align tab titles to the edge or fully justify them across the tab nav ("center")
+          * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
          */
         "layout"?: TabLayout;
         /**
-          * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+          * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
          */
         "position"?: TabPosition;
         /**
-          * Specify the scale of the tabs component, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
     }
     interface CalciteTile {
         /**
-          * The active state of the tile.
+          * When true, the component is active.
          */
         "active"?: boolean;
         /**
-          * The description text that appears beneath the heading of the tile.
+          * A description for the component, which displays below the heading.
          */
         "description"?: string;
         /**
-          * When true, prevents interaction.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * The embed mode of the tile.  When true, renders without a border and padding for use by other components.
+          * The component's embed mode.  When true, renders without a border and padding for use by other components.
          */
         "embed"?: boolean;
         /**
-          * The heading text that appears between the icon and description of the tile.
+          * The component header text, which displays between the icon and description.
          */
         "heading"?: string;
         /**
-          * The hidden state of the tile.
+          * When true, the component is not displayed and is not focusable.
          */
         "hidden"?: boolean;
         /**
-          * The (optional) url for the tile. (Only applies when embed is set to false)
+          * When embed is "false", the url for the component.
          */
         "href"?: string;
         /**
-          * The icon that appears at the top of the tile.
+          * Specifies an icon to display.
          */
         "icon"?: string;
     }
     interface CalciteTileSelect {
         /**
-          * The checked state of the tile select.
+          * When true, the component is checked.
          */
         "checked"?: boolean;
         /**
-          * The description text that appears beneath the heading of the tile.
+          * A description for the component, which displays below the heading.
          */
         "description"?: string;
         /**
-          * The disabled state of the tile select.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * The heading text that appears between the icon and description of the tile.
+          * The component header text, which displays between the icon and description.
          */
         "heading"?: string;
         /**
-          * The hidden state of the tile select.
+          * When true, the component is not displayed and is not focusable or checkable.
          */
         "hidden"?: boolean;
         /**
-          * The icon that appears at the top of the tile.
+          * Specifies an icon to display.
          */
         "icon"?: string;
         /**
-          * The side of the tile that the radio or checkbox appears on when inputEnabled is true.
+          * When inputEnabled is true, the placement of the interactive input on the component.
          */
         "inputAlignment"?: Extract<"end" | "start", Alignment>;
         /**
-          * Display an interactive radio or checkbox.
+          * When true, displays an interactive input based on the "type" property.
          */
         "inputEnabled"?: boolean;
         /**
-          * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
+          * Specifies the name of the component on form submission.
          */
         "name"?: any;
         /**
-          * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
+          * Emits a custom change event.  For checkboxes it emits when checked or unchecked.  For radios it only emits when checked.
          */
         "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent<void>) => void;
         /**
-          * The selection mode of the tile select: radio (single) or checkbox (multiple).
+          * The selection mode of the component.  Use radio for single selection, and checkbox for multiple selections.
          */
         "type"?: TileSelectType;
         /**
-          * The value of the tile select.  This value will appear in form submissions when this tile select is checked.
+          * The component's value.
          */
         "value"?: any;
         /**
-          * specify the width of the tile, defaults to auto
+          * Specifies the width of the component.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteTileSelectGroup {
         /**
-          * The disabled state of the tile select.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts
+          * Defines the layout of the component.  Use "horizontal" for rows, and "vertical" for a single column.
          */
         "layout"?: TileSelectGroupLayout;
     }
     interface CalciteTimePicker {
         /**
-          * aria-label for the hour input
+          * Accessible name for the component's hour input.
           * @default "Hour"
          */
         "intlHour"?: string;
         /**
-          * aria-label for the hour down button
+          * Accessible name for the component's hour down button.
           * @default "Decrease hour"
          */
         "intlHourDown"?: string;
         /**
-          * aria-label for the hour up button
+          * Accessible name for the component's hour up button.
           * @default "Increase hour"
          */
         "intlHourUp"?: string;
         /**
-          * aria-label for the meridiem (am/pm) input
+          * Accessible name for the component's meridiem (AM/PM) input.
           * @default "AM/PM"
          */
         "intlMeridiem"?: string;
         /**
-          * aria-label for the meridiem (am/pm) down button
+          * Accessible name for the component's meridiem (AM/PM) down button.
           * @default "Decrease AM/PM"
          */
         "intlMeridiemDown"?: string;
         /**
-          * aria-label for the meridiem (am/pm) up button
+          * Accessible name for the component's meridiem (AM/PM) up button.
           * @default "Increase AM/PM"
          */
         "intlMeridiemUp"?: string;
         /**
-          * aria-label for the minute input
+          * Accessible name for the component's minute input.
           * @default "Minute"
          */
         "intlMinute"?: string;
         /**
-          * aria-label for the minute down button
+          * Accessible name for the component's minute down button.
           * @default "Decrease minute"
          */
         "intlMinuteDown"?: string;
         /**
-          * aria-label for the minute up button
+          * Accessible name for the component's minute up button.
           * @default "Increase minute"
          */
         "intlMinuteUp"?: string;
         /**
-          * aria-label for the second input
+          * Accessible name for the component's second input.
           * @default "Second"
          */
         "intlSecond"?: string;
         /**
-          * aria-label for the second down button
+          * Accessible name for the component's second down button.
           * @default "Decrease second"
          */
         "intlSecondDown"?: string;
         /**
-          * aria-label for the second up button
+          * Accessible name for the component's second up button.
           * @default "Increase second"
          */
         "intlSecondUp"?: string;
         /**
-          * The scale (size) of the time picker
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * number (seconds) that specifies the granularity that the value must adhere to
+          * Specifies the granularity the "value" must adhere to (in seconds).
          */
         "step"?: number;
         /**
-          * The selected time in UTC (always 24-hour format)
+          * The component's value in UTC (always 24-hour format).
          */
         "value"?: string;
     }
     interface CalciteTip {
         /**
-          * No longer displays the tip.
+          * When true, the component does not display.
          */
         "dismissed"?: boolean;
         /**
-          * The heading of the tip.
+          * The component header text.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
         /**
-          * Alternate text for closing the tip.
+          * Accessible name for the component's close button.
          */
         "intlClose"?: string;
         /**
-          * Indicates whether the tip can be dismissed.
+          * When true, the close button is not present on the component.
          */
         "nonDismissible"?: boolean;
         /**
-          * Emitted when the component has been dismissed.
+          * Emits when the component has been dismissed.
          */
         "onCalciteTipDismiss"?: (event: CalciteTipCustomEvent<void>) => void;
         /**
-          * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+          * When true and if it has a parent `calcite-tip-manager`, the component is selected.  Only one tip can be selected within the `calcite-tip-manager` parent.
          */
         "selected"?: boolean;
     }
     interface CalciteTipGroup {
         /**
-          * The title used for all nested tips.
+          * The component header text for all nested `calcite-tip`s.
          */
         "groupTitle"?: string;
     }
     interface CalciteTipManager {
         /**
-          * Closed state of the `calcite-tip-manager`.
+          * When true, does not display or position the component.
          */
         "closed"?: boolean;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
         /**
-          * Alternate text for closing the tip.
+          * Accessible name for the component's close button.
          */
         "intlClose"?: string;
         /**
-          * The default group title for the `calcite-tip-manager`.
+          * Accessible name for the `calcite-tip-group` title.
          */
         "intlDefaultTitle"?: string;
         /**
-          * Alternate text for navigating to the next tip.
+          * Accessible name for navigating to the next tip.
          */
         "intlNext"?: string;
         /**
-          * Label that appears on hover of pagination icon.
+          * Text that accompanies the component's pagination.
          */
         "intlPaginationLabel"?: string;
         /**
-          * Alternate text for navigating to the previous tip.
+          * Accessible name for navigating to the previous tip.
          */
         "intlPrevious"?: string;
         /**
-          * Emitted when the `calcite-tip-manager` has been closed.
+          * Emits when the component has been closed.
          */
         "onCalciteTipManagerClose"?: (event: CalciteTipManagerCustomEvent<void>) => void;
         /**
-          * Emitted when the `calcite-tip-manager` has been toggled open or closed.
-          * @deprecated use calciteTipManagerClose instead.
+          * Emits when the component has been open or closed.
+          * @deprecated use "calciteTipManagerClose" instead.
          */
         "onCalciteTipManagerToggle"?: (event: CalciteTipManagerCustomEvent<void>) => void;
     }
@@ -8914,6 +9079,7 @@ declare namespace LocalJSX {
         "calcite-fab": CalciteFab;
         "calcite-filter": CalciteFilter;
         "calcite-flow": CalciteFlow;
+        "calcite-flow-item": CalciteFlowItem;
         "calcite-graph": CalciteGraph;
         "calcite-handle": CalciteHandle;
         "calcite-icon": CalciteIcon;
@@ -9012,6 +9178,7 @@ declare module "@stencil/core" {
             "calcite-fab": LocalJSX.CalciteFab & JSXBase.HTMLAttributes<HTMLCalciteFabElement>;
             "calcite-filter": LocalJSX.CalciteFilter & JSXBase.HTMLAttributes<HTMLCalciteFilterElement>;
             "calcite-flow": LocalJSX.CalciteFlow & JSXBase.HTMLAttributes<HTMLCalciteFlowElement>;
+            "calcite-flow-item": LocalJSX.CalciteFlowItem & JSXBase.HTMLAttributes<HTMLCalciteFlowItemElement>;
             "calcite-graph": LocalJSX.CalciteGraph & JSXBase.HTMLAttributes<HTMLCalciteGraphElement>;
             "calcite-handle": LocalJSX.CalciteHandle & JSXBase.HTMLAttributes<HTMLCalciteHandleElement>;
             "calcite-icon": LocalJSX.CalciteIcon & JSXBase.HTMLAttributes<HTMLCalciteIconElement>;