@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

package/dist/types/components.d.ts

@@ -81,8 +81,17 @@ export namespace Components {
         "heading"?: string;
         /**
           * Specifies an icon to display - accepts Calcite UI icon names.
+          * @deprecated use `iconStart` or `iconEnd` properties instead
          */
         "icon"?: string;
+        /**
+          * Specified an icon to display at the end - accepts Calcite UI icon names.
+         */
+        "iconEnd"?: string;
+        /**
+          * Specified an icon to display at the start - accepts Calcite UI icon names.
+         */
+        "iconStart"?: string;
         /**
           * Specifies a subtitle for the component.
           * @deprecated Use `description` instead.
@@ -674,7 +683,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 +1431,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 +2181,7 @@ export namespace Components {
     interface CalciteInputTimePicker {
         /**
           * The active state of the time input
+          * @deprecated Use open instead.
          */
         "active": boolean;
         /**
@@ -2163,6 +2244,14 @@ export namespace Components {
           * The name of the time input
          */
         "name": string;
+        /**
+          * When true, displays the `calcite-time-picker` component.
+         */
+        "open": boolean;
+        /**
+          * Determines the type of positioning to use for the overlaid content.  Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+         */
+        "overlayPositioning": OverlayPositioning;
         /**
           * 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)
@@ -2501,6 +2590,10 @@ export namespace Components {
         "label": string;
     }
     interface CalcitePagination {
+        /**
+          * When true, number values are displayed with a group separator corresponding to the language and country format.
+         */
+        "groupSeparator": boolean;
         /**
           * Go to the next page of results.
          */
@@ -2509,6 +2602,11 @@ export namespace Components {
           * Specifies the number of items per page.
          */
         "num": number;
+        /**
+          * Specifies the Unicode numeral system used by the component for localization.
+          * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+         */
+        "numberingSystem"?: string;
         /**
           * Go to the previous page of results.
          */
@@ -2539,6 +2637,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 +2680,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 +2708,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;
         /**
@@ -2978,17 +3079,27 @@ export namespace Components {
          */
         "checked": boolean;
         /**
-          * Specifies an icon to display - accepts Calcite UI icon names.
+          * Optionally pass an icon to display - accepts Calcite UI icon names
+          * @deprecated Use either iconStart or iconEnd but do not combine them with icon & iconPosition.
          */
         "icon"?: string;
+        /**
+          * Optionally pass an icon to display at the end - accepts Calcite UI icon names
+         */
+        "iconEnd"?: string;
         /**
           * When true, the icon will be flipped when the element direction is right-to-left ("rtl").
          */
         "iconFlipRtl": boolean;
         /**
-          * When used with "icon", specifies its position.
+          * Optionally used with icon, select where to position the icon
+          * @deprecated Use either iconStart or iconEnd but do not combine them with icon & iconPosition.
          */
         "iconPosition"?: Position;
+        /**
+          * Optionally pass an icon to display at the start - accepts Calcite UI icon names
+         */
+        "iconStart"?: string;
         /**
           * The component's value.
          */
@@ -3152,6 +3263,10 @@ export namespace Components {
           * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
+        /**
+          * When true, number values are displayed with a group separator corresponding to the language and country format.
+         */
+        "groupSeparator": boolean;
         /**
           * When true, indicates a histogram is present.
          */
@@ -3205,6 +3320,11 @@ export namespace Components {
           * Specifies the name of the component on form submission.
          */
         "name": string;
+        /**
+          * Specifies the Unicode numeral system used by the component for localization.
+          * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+         */
+        "numberingSystem"?: string;
         /**
           * Specifies the interval to move with the page up, or page down keys.
          */
@@ -3452,23 +3572,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 +3603,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 +3658,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 +3754,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 +3851,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 +4229,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 +4584,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 +4988,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;
@@ -4964,8 +5095,17 @@ declare namespace LocalJSX {
         "heading"?: string;
         /**
           * Specifies an icon to display - accepts Calcite UI icon names.
+          * @deprecated use `iconStart` or `iconEnd` properties instead
          */
         "icon"?: string;
+        /**
+          * Specified an icon to display at the end - accepts Calcite UI icon names.
+         */
+        "iconEnd"?: string;
+        /**
+          * Specified an icon to display at the start - accepts Calcite UI icon names.
+         */
+        "iconStart"?: string;
         /**
           * Specifies a subtitle for the component.
           * @deprecated Use `description` instead.
@@ -5560,7 +5700,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 +6502,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 +7261,7 @@ declare namespace LocalJSX {
     interface CalciteInputTimePicker {
         /**
           * The active state of the time input
+          * @deprecated Use open instead.
          */
         "active"?: boolean;
         /**
@@ -7117,6 +7324,14 @@ 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 the type of positioning to use for the overlaid content.  Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+         */
+        "overlayPositioning"?: OverlayPositioning;
         /**
           * 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)
@@ -7434,10 +7649,19 @@ declare namespace LocalJSX {
         "label": string;
     }
     interface CalcitePagination {
+        /**
+          * When true, number values are displayed with a group separator corresponding to the language and country format.
+         */
+        "groupSeparator"?: boolean;
         /**
           * Specifies the number of items per page.
          */
         "num"?: number;
+        /**
+          * Specifies the Unicode numeral system used by the component for localization.
+          * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+         */
+        "numberingSystem"?: string;
         /**
           * Emits when the selected page changes.
           * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)
@@ -7474,6 +7698,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 +7741,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 +7762,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 +7780,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;
         /**
@@ -7907,17 +8135,27 @@ declare namespace LocalJSX {
          */
         "checked"?: boolean;
         /**
-          * Specifies an icon to display - accepts Calcite UI icon names.
+          * Optionally pass an icon to display - accepts Calcite UI icon names
+          * @deprecated Use either iconStart or iconEnd but do not combine them with icon & iconPosition.
          */
         "icon"?: string;
+        /**
+          * Optionally pass an icon to display at the end - accepts Calcite UI icon names
+         */
+        "iconEnd"?: string;
         /**
           * When true, the icon will be flipped when the element direction is right-to-left ("rtl").
          */
         "iconFlipRtl"?: boolean;
         /**
-          * When used with "icon", specifies its position.
+          * Optionally used with icon, select where to position the icon
+          * @deprecated Use either iconStart or iconEnd but do not combine them with icon & iconPosition.
          */
         "iconPosition"?: Position;
+        /**
+          * Optionally pass an icon to display at the start - accepts Calcite UI icon names
+         */
+        "iconStart"?: string;
         /**
           * The component's value.
          */
@@ -8078,6 +8316,10 @@ declare namespace LocalJSX {
           * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
+        /**
+          * When true, number values are displayed with a group separator corresponding to the language and country format.
+         */
+        "groupSeparator"?: boolean;
         /**
           * When true, indicates a histogram is present.
          */
@@ -8131,6 +8373,11 @@ declare namespace LocalJSX {
           * Specifies the name of the component on form submission.
          */
         "name"?: string;
+        /**
+          * Specifies the Unicode numeral system used by the component for localization.
+          * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+         */
+        "numberingSystem"?: string;
         /**
           * Fires when the thumb is released on the component.  **Note:** If you need to constantly listen to the drag event, use "calciteSliderInput" instead.
          */
@@ -8373,332 +8620,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 +9161,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 +9260,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>;