@esri/calcite-components/dist/types/components.d.ts

Web Components for Esri's Calcite Design System.

/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
import { RequestedItem } from "./components/accordion/interfaces";
import { RegistryEntry, RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
import { ActionMessages } from "./components/action/assets/action/t9n";
import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, Sync } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
import { ButtonMessages } from "./components/button/assets/button/t9n";
import { CardMessages } from "./components/card/assets/card/t9n";
import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
import { ComboboxChildElement } from "./components/combobox/interfaces";
import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleNudge } from "./components/handle/interfaces";
import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
import { InputMessages } from "./components/input/assets/input/t9n";
import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
import { ItemData } from "./components/list-item/interfaces";
import { SelectionAppearance } from "./components/list/resources";
import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
import { MenuMessages } from "./components/menu/assets/menu/t9n";
import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { ModalMessages } from "./components/modal/assets/modal/t9n";
import { NoticeMessages } from "./components/notice/assets/notice/t9n";
import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
import { PopoverMessages } from "./components/popover/assets/popover/t9n";
import { RatingMessages } from "./components/rating/assets/rating/t9n";
import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/shell-panel/interfaces";
import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
import { TipMessages } from "./components/tip/assets/tip/t9n";
import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
    interface CalciteAccordion {
        /**
          * Specifies the appearance of the component.
         */
        "appearance": Extract<"solid" | "transparent", Appearance>;
        /**
          * Specifies the placement of the icon in the header.
         */
        "iconPosition": Position;
        /**
          * Specifies the type of the icon in the header.
         */
        "iconType": "chevron" | "caret" | "plus-minus";
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item).
         */
        "selectionMode": Extract<
    "single" | "single-persist" | "multiple",
    SelectionMode
  >;
    }
    interface CalciteAccordionItem {
        /**
          * Specifies a description for the component.
         */
        "description": string;
        /**
          * When `true`, the component is expanded.
         */
        "expanded": boolean;
        /**
          * Specifies heading text for the component.
         */
        "heading": string;
        /**
          * Specifies an icon to display at the end of the component.
         */
        "iconEnd": string;
        /**
          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": FlipContext;
        /**
          * Specifies an icon to display at the start of the component.
         */
        "iconStart": string;
    }
    interface CalciteAction {
        /**
          * When `true`, the component is highlighted.
         */
        "active": boolean;
        /**
          * Specifies the horizontal alignment of button elements with text content.
         */
        "alignment": Alignment;
        /**
          * Specifies the appearance of the component.
         */
        "appearance": Extract<"solid" | "transparent", Appearance>;
        /**
          * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
         */
        "compact": boolean;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * Specifies an icon to display.
         */
        "icon": string;
        /**
          * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": boolean;
        /**
          * When `true`, displays a visual indicator.
         */
        "indicator": boolean;
        /**
          * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
         */
        "label": string;
        /**
          * When `true`, a busy indicator is displayed.
         */
        "loading": boolean;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ActionMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ActionMessages;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * Specifies text that accompanies the icon.
         */
        "text": string;
        /**
          * Indicates whether the text is displayed.
         */
        "textEnabled": boolean;
    }
    interface CalciteActionBar {
        /**
          * When `true`, the expand-toggling behavior is disabled.
         */
        "expandDisabled": boolean;
        /**
          * When `true`, the component is expanded.
         */
        "expanded": boolean;
        /**
          * The layout direction of the actions.
         */
        "layout": Extract<"horizontal" | "vertical", Layout>;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ActionBarMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ActionBarMessages;
        /**
          * Overflows actions that won't fit into menus.
         */
        "overflowActions": () => Promise<void>;
        /**
          * Disables automatically overflowing `calcite-action`s that won't fit into menus.
         */
        "overflowActionsDisabled": boolean;
        /**
          * Arranges the component depending on the element's `dir` property.
         */
        "position": Position;
        /**
          * Specifies the size of the expand `calcite-action`.
         */
        "scale": Scale;
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
    }
    interface CalciteActionGroup {
        /**
          * Indicates number of columns.
         */
        "columns": Columns;
        /**
          * When `true`, the component is expanded.
         */
        "expanded": boolean;
        /**
          * Indicates the layout of the component.
          * @deprecated Use the `layout` property on the component's parent instead.
         */
        "layout": Layout;
        /**
          * When `true`, the `calcite-action-menu` is open.
         */
        "menuOpen": boolean;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ActionGroupMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ActionGroupMessages;
        /**
          * Specifies the size of the `calcite-action-menu`.
         */
        "scale": Scale;
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
    }
    interface CalciteActionMenu {
        /**
          * When `true`, the component is expanded.
         */
        "expanded": boolean;
        /**
          * Defines the available placements that can be used when a flip occurs.
         */
        "flipPlacements": EffectivePlacement[];
        /**
          * Specifies the text string for the component.
         */
        "label": string;
        /**
          * When `true`, the component is open.
         */
        "open": boolean;
        /**
          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
         */
        "overlayPositioning": OverlayPositioning;
        /**
          * Determines where the component will be positioned relative to the `referenceElement`.
         */
        "placement": LogicalPlacement;
        /**
          * Specifies the size of the component's trigger `calcite-action`.
         */
        "scale": Scale;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
    }
    interface CalciteActionPad {
        /**
          * When `true`, the expand-toggling behavior is disabled.
         */
        "expandDisabled": boolean;
        /**
          * When `true`, the component is expanded.
         */
        "expanded": boolean;
        /**
          * Indicates the layout of the component.
         */
        "layout": Layout;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ActionPadMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ActionPadMessages;
        /**
          * Arranges the component depending on the element's `dir` property.
         */
        "position": Position;
        /**
          * Specifies the size of the expand `calcite-action`.
         */
        "scale": Scale;
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
    }
    interface CalciteAlert {
        /**
          * When `true`, the component closes automatically (recommended for passive, non-blocking alerts).
         */
        "autoClose": boolean;
        /**
          * Specifies the duration before the component automatically closes (only use with `autoClose`).
         */
        "autoCloseDuration": AlertDuration;
        /**
          * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
         */
        "icon": string | boolean;
        /**
          * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": boolean;
        /**
          * Specifies the kind of the component (will apply to top border and icon).
         */
        "kind": Extract<
    "brand" | "danger" | "info" | "success" | "warning",
    Kind
  >;
        /**
          * Specifies an accessible name for the component.
         */
        "label": string;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<AlertMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": AlertMessages;
        /**
          * Specifies the Unicode numeral system used by the component for localization.
         */
        "numberingSystem": NumberingSystem;
        /**
          * When `true`, displays and positions the component.
         */
        "open": boolean;
        /**
          * Specifies the placement of the component
         */
        "placement": MenuPlacement;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Sets focus on the component's "close" button (the first focusable item).
         */
        "setFocus": () => Promise<void>;
        /**
          * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed
         */
        "slottedInShell": boolean;
    }
    interface CalciteAvatar {
        /**
          * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.
         */
        "fullName": string;
        /**
          * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.
         */
        "label": string;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Specifies the `src` to an image (remember to add a token if the user is private).
         */
        "thumbnail": string;
        /**
          * Specifies the unique id of the user.
         */
        "userId": string;
        /**
          * Specifies the username of the user.
         */
        "username": string;
    }
    interface CalciteBlock {
        /**
          * When `true`, the component is collapsible.
         */
        "collapsible": boolean;
        /**
          * A description for the component, which displays below the heading.
         */
        "description": string;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * When `true`, displays a drag handle in the header.
         */
        "dragHandle": boolean;
        /**
          * The component header text.
         */
        "heading": string;
        /**
          * Specifies the number at which section headings should start.
         */
        "headingLevel": HeadingLevel;
        /**
          * When `true`, a busy indicator is displayed.
         */
        "loading": boolean;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<BlockMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": BlockMessages;
        /**
          * When `true`, expands the component and its contents.
         */
        "open": boolean;
        /**
          * Displays a status-related indicator icon.
         */
        "status": Status;
    }
    interface CalciteBlockSection {
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<BlockSectionMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": BlockSectionMessages;
        /**
          * When `true`, expands the component and its contents.
         */
        "open": boolean;
        /**
          * Displays a status-related indicator icon.
         */
        "status": Status;
        /**
          * The component header text.
         */
        "text": string;
        /**
          * Specifies the component's toggle display -  `"button"` (selectable header), or  `"switch"` (toggle switch).
         */
        "toggleDisplay": BlockSectionToggleDisplay;
    }
    interface CalciteButton {
        /**
          * Specifies the alignment of the component's elements.
         */
        "alignment": ButtonAlignment;
        /**
          * Specifies the appearance style of the component.
         */
        "appearance": Extract<
    "outline" | "outline-fill" | "solid" | "transparent",
    Appearance
  >;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
         */
        "form": string;
        /**
          * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
         */
        "href": string;
        /**
          * Specifies an icon to display at the end of the component.
         */
        "iconEnd": string;
        /**
          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": FlipContext;
        /**
          * Specifies an icon to display at the start of the component.
         */
        "iconStart": string;
        /**
          * Specifies the kind of the component (will apply to border and background if applicable).
         */
        "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
        /**
          * Accessible name for the component.
         */
        "label": string;
        /**
          * When `true`, a busy indicator is displayed and interaction is disabled.
         */
        "loading": boolean;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ButtonMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ButtonMessages;
        /**
          * Specifies the name of the component on form submission.
         */
        "name"?: string;
        /**
          * Defines the relationship between the `href` value and the current document.
          * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
         */
        "rel": string;
        /**
          * When `true`, adds a round style to the component.
         */
        "round": boolean;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * Specifies if the component is a child of a `calcite-split-button`.
         */
        "splitChild": "primary" | "secondary" | false;
        /**
          * Specifies where to open the linked document defined in the `href` property.
          * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
         */
        "target": string;
        /**
          * Specifies the default behavior of the button.
          * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
         */
        "type": string;
        /**
          * Specifies the width of the component.
         */
        "width": Width;
    }
    interface CalciteCard {
        /**
          * When `true`, a busy indicator is displayed.
         */
        "loading": boolean;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<CardMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": CardMessages;
        /**
          * When `true`, the component is selectable.
         */
        "selectable": boolean;
        /**
          * When `true`, the component is selected.
         */
        "selected": boolean;
        /**
          * Sets the placement of the thumbnail defined in the `thumbnail` slot.
         */
        "thumbnailPosition": LogicalFlowPosition;
    }
    interface CalciteCheckbox {
        /**
          * When `true`, the component is checked.
         */
        "checked": boolean;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
         */
        "form": string;
        /**
          * The `id` attribute of the component. When omitted, a globally unique identifier is used.
         */
        "guid": string;
        /**
          * The hovered state of the checkbox.
         */
        "hovered": boolean;
        /**
          * When `true`, the component is initially indeterminate, which is independent from its `checked` value.  The state is visual only, and can look different across browsers.
          * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
         */
        "indeterminate": boolean;
        /**
          * Accessible name for the component.
         */
        "label": string;
        /**
          * Specifies the name of the component on form submission.
         */
        "name": any;
        /**
          * When `true`, the component must have a value in order for the form to submit.
         */
        "required": boolean;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * The component's value.
         */
        "value": any;
    }
    interface CalciteChip {
        /**
          * Specifies the appearance style of the component.
         */
        "appearance": Extract<"outline" | "outline-fill" | "solid", Appearance>;
        /**
          * When `true`, a close button is added to the component.
         */
        "closable": boolean;
        /**
          * When `true`, hides the component.
         */
        "closed": boolean;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * Specifies an icon to display.
         */
        "icon": string;
        /**
          * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": boolean;
        /**
          * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit. This is set to `true` by a parent Chip Group component.
         */
        "interactive": boolean;
        /**
          * Specifies the kind of the component (will apply to border and background if applicable).
         */
        "kind": Extract<"brand" | "inverse" | "neutral", Kind>;
        /**
          * Accessible name for the component.
         */
        "label": string;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ChipMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ChipMessages;
        /**
          * Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value.
         */
        "scale": Scale;
        /**
          * When `true`, the component is selected.
         */
        "selected": boolean;
        /**
          * This internal property, managed by a containing `calcite-chip-group`, is conditionally set based on the `selectionMode` of the parent
         */
        "selectionMode": Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * The component's value.
         */
        "value": any;
    }
    interface CalciteChipGroup {
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * Accessible name for the component.
         */
        "label": string;
        /**
          * Specifies the size of the component. Child `calcite-chip`s inherit the component's value.
         */
        "scale": Scale;
        /**
          * Specifies the component's selected items.
          * @readonly
         */
        "selectedItems": HTMLCalciteChipElement[];
        /**
          * Specifies the selection mode of the component.
         */
        "selectionMode": Extract<
    "multiple" | "single" | "single-persist" | "none",
    SelectionMode
  >;
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
    }
    interface CalciteColorPicker {
        /**
          * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
         */
        "allowEmpty": boolean;
        /**
          * When true, the component will allow updates to the color's alpha value.
         */
        "alphaChannel": boolean;
        /**
          * When true, hides the RGB/HSV channel inputs
         */
        "channelsDisabled": boolean;
        /**
          * Internal prop for advanced use-cases.
         */
        "color": InternalColor | null;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * The format of `value`.  When `"auto"`, the format will be inferred from `value` when set.
          * @default "auto"
         */
        "format": Format;
        /**
          * When true, hides the hex input
         */
        "hexDisabled": boolean;
        /**
          * When `true`, hides the RGB/HSV channel inputs.
          * @deprecated use `channelsDisabled` instead
         */
        "hideChannels": boolean;
        /**
          * When `true`, hides the hex input.
          * @deprecated use `hexDisabled` instead
         */
        "hideHex": boolean;
        /**
          * When `true`, hides the saved colors section.
          * @deprecated use `savedDisabled` instead
         */
        "hideSaved": boolean;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ColorPickerMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ColorPickerMessages;
        /**
          * Specifies the Unicode numeral system used by the component for localization.
         */
        "numberingSystem": NumberingSystem;
        /**
          * When true, hides the saved colors section
         */
        "savedDisabled": boolean;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
        /**
          * Specifies the storage ID for colors.
         */
        "storageId": string;
        /**
          * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.  The type will be preserved as the color is updated.
          * @default "#007ac2"
          * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
          * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
         */
        "value": ColorValue | null;
    }
    interface CalciteColorPickerHexInput {
        /**
          * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.  When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
         */
        "allowEmpty": boolean;
        /**
          * When true, the component will allow updates to the color's alpha value.
         */
        "alphaChannel": boolean;
        /**
          * Specifies accessible label for the input field.
          * @deprecated use `messages` instead
         */
        "hexLabel": string;
        /**
          * Messages are passed by parent component for accessible labels.
         */
        "messages": ColorPickerMessages;
        /**
          * Specifies the Unicode numeral system used by the component for localization.
         */
        "numberingSystem"?: NumberingSystem;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * The hex value.
         */
        "value": string;
    }
    interface CalciteColorPickerSwatch {
        /**
          * When `true`, the component is active.
         */
        "active": boolean;
        /**
          * The color value.
          * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
         */
        "color": string | null;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
    }
    interface CalciteCombobox {
        /**
          * When `true`, allows entry of custom values, which are not in the original set of items.
         */
        "allowCustomValues": boolean;
        /**
          * When `true`, the value-clearing will be disabled.
         */
        "clearDisabled": boolean;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * Specifies the component's filtered items.
          * @readonly
         */
        "filteredItems": HTMLCalciteComboboxItemElement[];
        /**
          * Defines the available placements that can be used when a flip occurs.
         */
        "flipPlacements": EffectivePlacement[];
        /**
          * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
         */
        "form": string;
        /**
          * Accessible name for the component.
         */
        "label": string;
        /**
          * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
         */
        "maxItems": number;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<ComboboxMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": ComboboxMessages;
        /**
          * Specifies the name of the component.  Required to pass the component's `value` on form submission.
         */
        "name": string;
        /**
          * When `true`, displays and positions the component.
         */
        "open": boolean;
        /**
          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
         */
        "overlayPositioning": OverlayPositioning;
        /**
          * Specifies the placeholder text for the input.
         */
        "placeholder": string;
        /**
          * Specifies the placeholder icon for the input.
         */
        "placeholderIcon": string;
        /**
          * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
         */
        "placeholderIconFlipRtl": boolean;
        /**
          * Updates the position of the component.
          * @param delayed
         */
        "reposition": (delayed?: boolean) => Promise<void>;
        /**
          * When `true`, the component must have a value in order for the form to submit.
         */
        "required": boolean;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Specifies the component's selected items.
          * @readonly
         */
        "selectedItems": HTMLCalciteComboboxItemElement[];
        /**
          * specify the selection mode - multiple: allow any number of selected items (default) - single: only one selection) - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
         */
        "selectionMode": Extract<
    "single" | "ancestors" | "multiple",
    SelectionMode
  >;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * The component's value(s) from the selected `calcite-combobox-item`(s).
         */
        "value": string | string[];
    }
    interface CalciteComboboxItem {
        /**
          * When `true`, the component is active.
         */
        "active": boolean;
        /**
          * Specifies the parent and grandparent items, which are set on `calcite-combobox`.
         */
        "ancestors": ComboboxChildElement[];
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * When `true`, omits the component from the `calcite-combobox` filtered search results.
         */
        "filterDisabled": boolean;
        /**
          * The `id` attribute of the component. When omitted, a globally unique identifier is used.
         */
        "guid": string;
        /**
          * Specifies an icon to display.
         */
        "icon": string;
        /**
          * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": boolean;
        /**
          * When `true`, the component is selected.
         */
        "selected": boolean;
        /**
          * The component's text.
         */
        "textLabel": string;
        /**
          * The component's value.
         */
        "value": any;
    }
    interface CalciteComboboxItemGroup {
        /**
          * Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`.
         */
        "ancestors": ComboboxChildElement[];
        /**
          * Specifies the title of the component.
         */
        "label": string;
    }
    interface CalciteDatePicker {
        /**
          * Specifies the component's active date.
         */
        "activeDate": Date;
        /**
          * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date.
         */
        "activeRange": "start" | "end";
        /**
          * Specifies the number at which section headings should start.
         */
        "headingLevel": HeadingLevel;
        /**
          * Specifies the latest allowed date (`"yyyy-mm-dd"`).
         */
        "max": string;
        /**
          * Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`).
         */
        "maxAsDate": Date;
        /**
          * Use this property to override individual strings used by the component.
         */
        "messageOverrides": Partial<DatePickerMessages>;
        /**
          * Made into a prop for testing purposes only
         */
        "messages": DatePickerMessages;
        /**
          * Specifies the earliest allowed date (`"yyyy-mm-dd"`).
         */
        "min": string;
        /**
          * Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`).
         */
        "minAsDate": Date;
        /**
          * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
         */
        "numberingSystem": NumberingSystem;
        /**
          * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
         */
        "proximitySelectionDisabled": boolean;
        /**
          * When `true`, activates the component's range mode to allow a start and end date.
         */
        "range": boolean;
        /**
          * Specifies the size of the component.
         */
        "scale": "s" | "m" | "l";
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
        /**
          * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`).
         */
        "value": string | string[];
        /**
          * Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`).
         */
        "valueAsDate": Date | Date[];
    }
    interface CalciteDatePickerDay {
        /**
          * When `true`, the component is active.
         */
        "active": boolean;
        /**
          * Date is in the current month.
         */
        "currentMonth": boolean;
        /**
          * The DateTimeFormat used to provide screen reader labels.
         */
        "dateTimeFormat": Intl.DateTimeFormat;
        /**
          * Day of the month to be shown.
         */
        "day": number;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * Date is the end of date range
         */
        "endOfRange": boolean;
        /**
          * Date is currently highlighted as part of the range
         */
        "highlighted": boolean;
        /**
          * When `true`, activates the component's range mode to allow a start and end date.
         */
        "range": boolean;
        /**
          * When `true`, highlight styling for edge dates is applied.
         */
        "rangeEdge": "start" | "end" | undefined;
        /**
          * Date is being hovered and within the set range
         */
        "rangeHover": boolean;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * When `true`, the component is selected.
         */
        "selected": boolean;
        /**
          * Date is the start of date range
         */
        "startOfRange": boolean;
        /**
          * The component's value.
         */
        "value": Date;
    }
    interface CalciteDatePickerMonth {
        /**
          * Date currently active.
         */
        "activeDate": Date;
        /**
          * The DateTimeFormat used to provide screen reader labels.
         */
        "dateTimeFormat": Intl.DateTimeFormat;
        /**
          * End date currently active
         */
        "endDate"?: Date;
        /**
          * The range of dates currently being hovered
         */
        "hoverRange": HoverRange;
        /**
          * CLDR locale data for current locale
         */
        "localeData": DateLocaleData;
        /**
          * Specifies the latest allowed date (`"yyyy-mm-dd"`).
         */
        "max": Date;
        /**
          * Specifies the earliest allowed date (`"yyyy-mm-dd"`).
         */
        "min": Date;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Already selected date.
         */
        "selectedDate": Date;
        /**
          * Start date currently active.
         */
        "startDate"?: Date;
    }
    interface CalciteDatePickerMonthHeader {
        /**
          * Focused date with indicator (will become selected date if user proceeds)
         */
        "activeDate": Date;
        /**
          * Specifies the number at which section headings should start.
         */
        "headingLevel": HeadingLevel;
        /**
          * CLDR locale data for translated calendar info
         */
        "localeData": DateLocaleData;
        /**
          * Specifies the latest allowed date (`"yyyy-mm-dd"`).
         */
        "max": Date;
        /**
          * This property specifies accessible strings for the component's previous month button ,next month button & year input elements. Made into a prop for testing purposes only.
          * @readonly
         */
        "messages": DatePickerMessages;
        /**
          * Specifies the earliest allowed date (`"yyyy-mm-dd"`).
         */
        "min": Date;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Already selected date.
         */
        "selectedDate": Date;
    }
    interface CalciteDropdown {
        /**
          * When `true`, the component will remain open after a selection is made.  If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
         */
        "closeOnSelectDisabled": boolean;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */
        "disabled": boolean;
        /**
          * Defines the available placements that can be used when a flip occurs.
         */
        "flipPlacements": EffectivePlacement[];
        /**
          * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
         */
        "maxItems": number;
        /**
          * When `true`, displays and positions the component.
         */
        "open": boolean;
        /**
          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
         */
        "overlayPositioning": OverlayPositioning;
        /**
          * Determines where the component will be positioned relative to the container element.
          * @default "bottom-start"
         */
        "placement": MenuPlacement;
        /**
          * Updates the position of the component.
          * @param delayed
         */
        "reposition": (delayed?: boolean) => Promise<void>;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Specifies the component's selected items.
          * @readonly
         */
        "selectedItems": HTMLCalciteDropdownItemElement[];
        /**
          * Sets focus on the component's first focusable element.
         */
        "setFocus": () => Promise<void>;
        /**
          * Specifies the action to open the component from the container element.
         */
        "type": "hover" | "click";
        /**
          * Specifies the width of the component.
         */
        "width": Scale;
    }
    interface CalciteDropdownGroup {
        /**
          * Specifies and displays a group title.
         */
        "groupTitle": string;
        /**
          * Specifies the size of the component.
         */
        "scale": Scale;
        /**
          * Specifies the component's selection mode, where `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s.
         */
        "selectionMode": Extract<"single" | "none" | "multiple", SelectionMode>;
    }
    interface CalciteDropdownItem {
        /**
          * Specifies the URL of the linked resource, which can be set as an absolute or relative path.  Determines if the component will render as an anchor.
         */
        "href": string;
        /**
          * Specifies an icon to display at the end of the component.
         */
        "iconEnd": string;
        /**
          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
         */
        "iconFlipRtl": FlipContext;
        /**
          * Specifies an icon to display at the start of the component.
         */
        "iconStart": string;
        /**
          * Accessible name for the component.
         */
        "label": string;
        /**
          * Specifies the relationship to the linked document defined in `href`.
         */
        "rel": string;
        /**
          * When `true`, the component is selected.
         */
        "selected": boolean;
        /**
          * Sets focus on the component.
         */
        "setFocus": () => Promise<void>;
        /**
          * Specifies the frame or window to open the linked document.
         */
        "target": string;
    }
    interface CalciteFab {
        /**
          * Specifies the appearance style of the component.
         */
        "appearance": Extract<"solid" | "outline-fill", Appearance>;
        /**
          * When `true`, interaction is prevented and the component is displayed with lower opacity.
         */