@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

package/dist/types/components.d.ts

@@ -6,11 +6,54 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Choice } from "./components/xpl-choicelist/choice";
-import { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdownoption";
-import { XplDropdownOption } from "./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option";
+import { IconName } from "./components/xpl-icon/xpl-icon";
+import { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
+import { IconName as IconName1 } from "./components/xpl-icon/xpl-icon";
 import { ListItem } from "./components/xpl-list/listitem";
-import { SelectChoice } from "./components/xpl-select/selectchoice";
+import { PopoverPosition } from "./components/xpl-popover/xpl-popover";
+import { IconName as IconName2 } from "./components/xpl-select/xpl-select";
+export { Choice } from "./components/xpl-choicelist/choice";
+export { IconName } from "./components/xpl-icon/xpl-icon";
+export { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
+export { IconName as IconName1 } from "./components/xpl-icon/xpl-icon";
+export { ListItem } from "./components/xpl-list/listitem";
+export { PopoverPosition } from "./components/xpl-popover/xpl-popover";
+export { IconName as IconName2 } from "./components/xpl-select/xpl-select";
 export namespace Components {
+    interface XplAccordion {
+        /**
+          * set the border of the accordion  none: there’s no border wrapping the header  bottom:there’s a border below the header  bordered: the header is wrapped by a white panel with a rounded border around it on every side
+          * @default 'none'
+         */
+        "borderType": '' | 'none' | 'bottom' | 'bordered';
+        /**
+          * An optional id of the content slot
+         */
+        "contentId"?: string;
+        /**
+          * if defined, a text field that displays under the header
+         */
+        "description": string;
+        /**
+          * Sets the text for the header of the accordion
+         */
+        "header": string;
+        /**
+          * Set if the content is shown  false: the accordion is collapsed (default)  true: the accordion is expanded
+          * @default false
+         */
+        "initialExpanded": boolean;
+        /**
+          * Updates the parent checkbox state and sets all child checkboxes to the same checked value.
+          * @param checked - Whether the parent checkbox is checked
+         */
+        "parentCheckboxChange": (checked: boolean) => Promise<null>;
+        /**
+          * Set the size of the header and icon size can be 1(default),2,3
+          * @default '3'
+         */
+        "size": '1' | '2' | '3';
+    }
     interface XplApplicationShell {
         /**
           * @property {boolean} - *
@@ -19,35 +62,70 @@ export namespace Components {
         "isNavOpenAtStartup": boolean;
         /**
           * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+          * @default 'default'
          */
         "navWidth": string;
         /**
           * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+          * @default false
          */
         "withSubnav": boolean;
         /**
           * @property {boolean} - Whether or not the Grid should have space for a utility bar
+          * @default true
          */
         "withUtility": boolean;
     }
     interface XplAvatar {
+        /**
+          * Background color when there is no image src
+         */
         "color"?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+        /**
+          * Sets a disabled state on the avatar when set to true
+          * @default false
+         */
         "disabled"?: boolean;
+        /**
+          * The URL if the avatar should be hyperlinked
+         */
         "href"?: string;
+        /**
+          * Alt text for the image if there is an image src
+         */
         "name"?: string;
+        /**
+          * Size of the avatar
+         */
         "size"?: 'md' | 'sm';
+        /**
+          * The image URL
+         */
         "src"?: string;
+        /**
+          * Color styles for the dot indicator to indicate varied states
+         */
         "status"?: 'active' | 'warning' | 'inactive';
+        /**
+          * Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top`
+         */
         "target"?: string;
     }
     interface XplBackdrop {
         /**
           * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area. If false, the position will be fixed and cover the whole view area.
+          * @default false
          */
         "relative": boolean;
     }
     interface XplBadge {
+        /**
+          * Whether badge shows a dot icon before the text
+         */
         "dot"?: boolean;
+        /**
+          * Color styles to indicate varied states
+         */
         "variant"?: 'success' | 'warning' | 'inactive' | 'error';
     }
     interface XplBreadcrumbItem {
@@ -59,6 +137,10 @@ export namespace Components {
           * whether button should be disabled
          */
         "disabled"?: boolean;
+        /**
+          * @property {string} - An optional form attribute for the button if type is submit
+         */
+        "form"?: string;
         /**
           * whether button should render with full width
          */
@@ -77,10 +159,12 @@ export namespace Components {
         "name"?: string;
         /**
           * @property {"default" | "sm" | "xs"} - button size
+          * @default 'default'
          */
         "size": 'default' | 'sm' | 'xs';
         /**
           * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
+          * @default 'neutral'
          */
         "state": 'neutral' | 'warning' | 'success';
         /**
@@ -93,6 +177,7 @@ export namespace Components {
         "value"?: string;
         /**
           * @property {"primary" | "secondary" | "subtle"} - button variant
+          * @default 'primary'
          */
         "variant": 'primary' | 'secondary' | 'subtle';
     }
@@ -110,14 +195,75 @@ export namespace Components {
          */
         "tertiary": 'string';
     }
+    interface XplCalendar {
+        /**
+          * Format of the date displayed in the calendar. Default is 'Y-m-d'.
+          * @default 'Y-m-d'
+         */
+        "dateFormat"?: string;
+        /**
+          * Default date to be displayed when the calendar is first loaded.
+         */
+        "defaultDate"?: string;
+        /**
+          * Unique identifier for the calendar element.
+          * @default uuid()
+         */
+        "inputId"?: string;
+        /**
+          * Maximum selectable date in the calendar.
+         */
+        "max"?: number | string;
+        /**
+          * Minimum selectable date in the calendar.
+         */
+        "min"?: number | string;
+        /**
+          * Mode of the calendar, either 'single' for single date selection or 'range' for selecting a range of dates. Default is 'single'.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'range';
+        /**
+          * Method to update the calendar date from external input
+         */
+        "setDate": (date: string | string[]) => Promise<void>;
+    }
     interface XplCheckbox {
+        /**
+          * Whether the input is checked
+         */
         "checked"?: boolean;
+        /**
+          * A custom data attribute for the checkbox
+         */
+        "dataId"?: string;
+        /**
+          * Description text for the field
+         */
         "description"?: string;
+        /**
+          * Whether the input is disabled
+         */
         "disabled"?: boolean;
+        /**
+          * A visual state for when the input has not been interacted with
+         */
         "indeterminate"?: boolean;
+        /**
+          * The name attribute for the html input. (submitted in form as name/value pair)
+         */
         "name"?: string;
+        /**
+          * Whether the input is required
+         */
         "required"?: boolean;
+        /**
+          * Whether the input is contained in a box with a border and a background
+         */
         "styled"?: boolean;
+        /**
+          * The value attribute for the checkbox input. (submittted in form as name/value pair)
+         */
         "value"?: string;
     }
     interface XplChoicelist {
@@ -126,11 +272,11 @@ export namespace Components {
          */
         "choices": Choice[];
         /**
-          * Descriptive text to be displayed above the choicelist.
+          * Descriptive text to be displayed above the choice-list.
          */
         "description"?: string;
         /**
-          * The title text to be displayed above the choicelist.
+          * The title text to be displayed above the choice-list.
          */
         "heading"?: string;
         /**
@@ -139,8 +285,9 @@ export namespace Components {
         "multi"?: boolean;
         /**
           * The `name` to be associated with form data.
+          * @default uuid()
          */
-        "name"?: string;
+        "name": string;
         /**
           * If `true`, will include borders around the list and between individual choices.
          */
@@ -149,9 +296,69 @@ export namespace Components {
     interface XplContentArea {
         /**
           * @property {string}  size  - The content-area size.
+          * @default 'wide'
          */
         "size": 'wide' | 'narrow' | 'full';
     }
+    interface XplDashboard {
+    }
+    interface XplDataCard {
+        /**
+          * An optional field that typically describes or modifies the small stat
+         */
+        "detail"?: string;
+        /**
+          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.
+         */
+        "icon"?: IconName;
+        /**
+          * Whether to display the icon or not.
+          * @default true
+         */
+        "leadingIcon"?: boolean;
+        /**
+          * Whether the card is a link
+         */
+        "link"?: boolean;
+        /**
+          * Name Term
+         */
+        "name": string;
+        /**
+          * Detail, stat, or value to be displayed in short format. Will be rendered when card is smaller than 441px.
+         */
+        "shortStat"?: string;
+        /**
+          * An Optional stat further enhancing the main metric of the card.
+         */
+        "smallStat"?: string;
+        /**
+          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.
+         */
+        "smallStatIcon"?: IconName;
+        /**
+          * set a variant that changes the color of the small stat based on the following rules:    If trend is positive and greater than 0.5% color is green and up-right arrow is used    If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
+         */
+        "smallStatVariant"?: 'positive' | 'negative' | 'neutral';
+        /**
+          * Detail, stat, or value to be displayed. Will be rendered when card is larger than 441px. Will also appear in the tooltip when shortStat is shown.
+         */
+        "stat": string;
+        /**
+          * An optional field for tooltip text of small stat
+          * @default ''
+         */
+        "tooltipTextSmallStat"?: string;
+        /**
+          * An optional field for tooltip text of stat
+          * @default ''
+         */
+        "tooltipTextStat"?: string;
+        /**
+          * Color variant. Used to set the icon color and background.
+         */
+        "variant"?: 'primary' | 'secondary';
+    }
     interface XplDivider {
         /**
           * The tier should be an integer between 0 and 3. Tier 0 dividers do not display text, and 1-3 increase in size with each increasing tier.
@@ -159,20 +366,28 @@ export namespace Components {
         "tier"?: number;
     }
     interface XplDropdown {
+        /**
+          * whether to anchor the dropdown to the trigger element, requires triggerId to be set
+          * @default false
+         */
+        "anchorToTrigger": boolean;
         /**
           * options that are listed
+          * @default true
          */
         "closeOnSelect": boolean;
         /**
           * called on dropdown option click and keydown events to update isSelected states
          */
-        "handleSelect": (e: Event, { component }: { component: XplDropdownOption; }) => Promise<void>;
+        "handleSelect": (e: any, { component }: { component: XplDropdownOption; }) => Promise<void>;
         /**
           * text to display as heading
+          * @default false
          */
         "isOpen": boolean;
         /**
           * constant representing number of options that can be selected
+          * @default 'single'
          */
         "mode": 'single' | 'multi';
         /**
@@ -180,9 +395,14 @@ export namespace Components {
          */
         "options"?: DropdownItem[];
         /**
-          * whether selection should be made when focusing on interactable element
+          * whether selection should be made when focusing on interactive element
+          * @default false
          */
         "selectOnFocus": boolean;
+        /**
+          * The currently selected value(s) in the dropdown.
+         */
+        "selectedValues"?: string | string[];
         /**
           * the id for the element that triggers the open state
          */
@@ -190,10 +410,7 @@ export namespace Components {
         /**
           * call back function invoked when a selection is made
          */
-        "update"?: (
-        e: Event,
-        { component }: { component: XplDropdown }
-    ) => void;
+        "update"?: (e, { component }: { component: XplDropdown }) => void;
     }
     interface XplDropdownGroup {
         /**
@@ -224,194 +441,935 @@ export namespace Components {
           * text to display for option
          */
         "label": string;
+        /**
+          * optional subtitle text to display below label
+         */
+        "subtitle"?: string;
+        /**
+          * The selected options value to be submitted with the form, should this option be selected.
+         */
+        "value"?: string;
+    }
+    interface XplDynamicTable {
+    }
+    interface XplDynamicTableCell {
+        /**
+          * Whether the cell and its contents are disabled.
+          * @default false
+         */
+        "disabled": boolean;
+    }
+    interface XplDynamicTableRow {
+        /**
+          * Whether the row and its cells are disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the row is selected.
+          * @default false
+         */
+        "selected": boolean;
     }
     interface XplGrid {
     }
     interface XplGridItem {
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  lg size screen
+          * @default 6
+         */
         "lg": number;
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  md size screen
+          * @default 6
+         */
         "md": number;
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  sm size screen
+          * @default 6
+         */
         "sm": number;
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  xs size screen
+          * @default 6
+         */
         "xs": number;
     }
+    interface XplHeaderAccordion {
+        /**
+          * The id of the content region controlled by the accordion.
+         */
+        "contentId": string;
+        /**
+          * Whether the accordion is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether to display a parent checkbox in the accordion header.
+          * @default true
+         */
+        "hasCheckbox": boolean;
+        /**
+          * Whether the accordion is expanded initially.
+          * @default false
+         */
+        "initialExpanded": boolean;
+        /**
+          * The number of selected child items, or -1 to auto-calculate.
+          * @default -1
+         */
+        "selectedCount": number;
+    }
+    interface XplIcon {
+        /**
+          * Icon's background color.
+         */
+        "backgroundColor"?: string;
+        /**
+          * Name of icon
+         */
+        "icon": IconName1;
+        /**
+          * Size of icon
+         */
+        "size": number;
+    }
     interface XplInput {
         /**
-          * Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.
+          * Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.  Applies to all input types.
          */
         "_id"?: string;
+        /**
+          * The accepted file types for the file input. Corresponds to the `accept` attribute on the input element. Example: 'image/*' for all image types, '.pdf' for PDF files, etc.  Applies to file inputs.
+          * @default ''
+         */
+        "accept"?: string;
+        /**
+          * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
+          * @default false
+         */
+        "allowCustomOption"?: boolean;
+        /**
+          * Hint for form autofill feature  Applies to text, password, number.
+         */
         "autocomplete"?: string;
         /**
-          * See https://flatpickr.js.org/formatting/
+          * The date format to use for the datepicker input. This is used by flatpickr to format the date. Default is 'Y-m-d' (e.g., 2023-10-01).  See https://flatpickr.js.org/formatting/ for more details.  Applies to date inputs.
+          * @default 'Y-m-d'
          */
         "dateFormat"?: string;
         /**
-          * Optional text that appears below the input label.
+          * Optional text that appears below the input label.  Applies to all input types.
          */
         "description"?: string;
+        /**
+          * Whether the field is disabled  Applies to all input types.
+         */
         "disabled"?: boolean;
         /**
-          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
+          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.  Applies to all input types.
          */
         "error"?: string;
+        /**
+          * Hides the "Accept" text that indicates the accepted file types This is useful for cases where you want to hide the "Accept" text.  Applies to file inputs.
+          * @default false
+         */
+        "hideAcceptText"?: boolean;
+        /**
+          * Hide eye dropper  Applies to color inputs.
+         */
+        "hideEyeDropper"?: boolean;
+        /**
+          * Hides the file names in the file upload component This is useful for cases where you want to hide the file names after selection.  Applies to file inputs.
+          * @default false
+         */
+        "hideFileNames"?: boolean;
+        /**
+          * Hides the trigger element when a file is selected. This is useful for cases where you want to hide the trigger after a file is selected.  Applies to file inputs.
+          * @default false
+         */
+        "hideTriggerOnSelect"?: boolean;
+        /**
+          * Label text for the field  Applies to all input types.
+         */
         "label": string;
         /**
-          * Only used when `type` = 'number' or 'date'
+          * Maximum value for the input.  Applies to number, time, and date inputs.  If the input is a time input, the value must be in 24 hour format, ex: 18:25 for 6:25 PM
          */
         "max"?: number | string;
         /**
-          * For multiline inputs, a max. character count will display along with the current character count, and will automatically render as an error if the character count exceeds the max.
+          * For multiline inputs, a max. character count will display along with the current character count, and will automatically render as an error if the character count exceeds the max.  This is only applicable if `multiline` is `true`.
          */
         "maxCharacterCount"?: number;
         /**
-          * Only used when `type` = 'number' or 'date'
+          * The minimum value for the input.  Applies to number, time, and date inputs.  If the input is a time input, the value must be in 24 hour format, ex: 05:25 for 5:25 AM
          */
         "min"?: number | string;
         /**
-          * For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)
+          * For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)  Applies to date inputs.
+          * @default 'single'
          */
         "mode"?: 'single' | /* "multiple" | */ 'range';
         /**
-          * Whether to render as a singleline text input or as a multiline textarea. (If `true`, `pre` and `post` values will be ignored, if present.)
+          * Whether to render as a singleline text input or as a multiline textarea. (If `true`, `pre` and `post` values will be ignored, if present.)  Applies to text inputs.
+          * @default false
          */
         "multiline"?: boolean;
         /**
-          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+          * Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.  Applies to file inputs.
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
          */
         "name"?: string;
+        /**
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+         */
         "placeholder"?: string;
         /**
-          * A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.
+          * A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.
          */
         "post"?: string;
         /**
-          * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.
+          * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.
          */
         "pre"?: string;
+        /**
+          * Whether the input is editable  Applies to text, password, number, and date inputs.
+         */
         "readonly"?: boolean;
-        "required"?: boolean;
-        "step"?: number;
-        "type"?: 'date' | 'text' | 'number' | 'password';
         /**
-          * Including a `value` will prepopulate the input with the given string.
+          * Whether the input is required  Applies to all input types.
          */
-        "value"?: string;
-    }
-    interface XplList {
+        "required"?: boolean;
         /**
-          * `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed     icon: string;         // Font Awesome icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item.
+          * The granularity that the value in a `number` input must adhere to when incrementing or decrementing. The default stepping value for number inputs is 1  Applies to number and time inputs.
          */
-        "items"?: ListItem[];
-    }
-    interface XplMainNav {
+        "step"?: number;
         /**
-          * @property {string}  width  - The width of the Main Nav.
+          * The time format to display for the input.  Applies to time inputs.  If 12h is selected, the value will be displayed in 12 hour format, ex: 05:25 PM for 17:25 If 24h is selected, the value will be displayed in 24 hour format, ex: 17:25 for 17:25
+          * @default '24h'
          */
-        "width": 'default' | 'md' | 'sm';
-    }
-    interface XplNavItem {
+        "timeFormat"?: '12h' | '24h';
         /**
-          * @property {boolean} - Whether or not the item should control the main nav state on click
+          * The type of form control
+          * @default 'text'
          */
-        "navControl"?: boolean;
-    }
-    interface XplPagination {
+        "type"?: 'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color';
         /**
-          * Calling `goto` with a page number (which should probably be taken from the `page` event) updates the pagination's state and re-renders it, showing the appropriate buttons given the current page.
-          * @param n
+          * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.
          */
-        "goto": (n: number) => Promise<void>;
-        "perPage": number;
-        "total": number;
-        "waitForCallback": boolean;
-    }
-    interface XplRadio {
-        "checked"?: boolean;
-        "description"?: string;
-        "disabled"?: boolean;
-        "name"?: string;
-        "required"?: boolean;
-        "styled"?: boolean;
         "value"?: string;
     }
-    interface XplSecondaryNav {
-    }
-    interface XplSelect {
-        /**
-          * An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean; }
-         */
-        "choices"?: SelectChoice[];
+    interface XplInputColor {
         /**
-          * Optional text that appears below the input label.
+          * Indicates whether the color picker is disabled.
          */
-        "description"?: string;
         "disabled"?: boolean;
         /**
-          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
+          * Hide eye dropper
          */
-        "error"?: string;
-        "label"?: string;
+        "hideEyeDropper"?: boolean;
         /**
-          * Whether to allow a single choice or multiple choices.
+          * Placeholder text for the color input. This is used when no color is selected.
+          * @default 'Select color'
          */
-        "mode"?: 'single' | 'multi';
         "placeholder": string;
         /**
-          * Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.
+          * Indicates whether the color picker is required.
          */
-        "truncate"?: boolean;
-    }
-    interface XplTable {
-        "columns"?: string[];
-        "data"?: string[][];
-        "freeze"?: boolean;
-        "multiselect"?: boolean;
-        "striped"?: boolean;
-    }
-    interface XplTag {
+        "required": boolean;
+        /**
+          * The color value of the picker.
+         */
+        "value": string;
     }
-    interface XplToggle {
-        "checked"?: boolean;
+    interface XplInputDate {
         /**
-          * The toggle's description appears *above* the toggle.
+          * The date format to use for the datepicker input. This is used by flatpickr to format the date. Default is 'Y-m-d' (e.g., 2023-10-01).  See https://flatpickr.js.org/formatting/ for more details.
+          * @default 'Y-m-d'
+         */
+        "dateFormat"?: string;
+        /**
+          * Whether the field is disabled
          */
-        "description"?: string;
         "disabled"?: boolean;
         /**
-          * The toggle's heading appears *above* the toggle.
+          * The `inputId` is used to associate the input with a label.
          */
-        "heading"?: string;
+        "inputId"?: string;
         /**
-          * The toggle's label appears *to the right of* the toggle.
+          * Maximum value for the input.
          */
-        "label"?: string;
-        "name"?: string;
+        "max"?: number | string;
         /**
-          * The size of the toggle -- `default` or `small`
+          * The minimum value for the input.
          */
-        "variant"?: 'default' | 'small';
-    }
-    interface XplUtilityBar {
+        "min"?: number | string;
         /**
-          * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
+          * For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)
+          * @default 'single'
          */
-        "isNavOpenAtStartup"?: boolean;
+        "mode"?: 'single' | /* "multiple" | */ 'range';
         /**
-          * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
          */
-        "navControl"?: boolean;
-    }
-}
-export interface XplButtonRowCustomEvent<T> extends CustomEvent<T> {
+        "name"?: string;
+        /**
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+         */
+        "placeholder"?: string;
+        /**
+          * A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.
+         */
+        "post"?: string;
+        /**
+          * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.
+         */
+        "pre"?: string;
+        /**
+          * Whether the input is editable
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Including a `value` will pre-populate the input with the given string.
+         */
+        "value"?: string;
+    }
+    /**
+     * `xpl-input-file` is a component that allows users to upload files.
+     */
+    interface XplInputFile {
+        /**
+          * Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.
+         */
+        "_id"?: string;
+        /**
+          * The accepted file types for the file input. Corresponds to the `accept` attribute on the input element. Example: 'image/*' for all image types, '.pdf' for PDF files, etc.
+          * @default ''
+         */
+        "accept"?: string;
+        /**
+          * Whether the field is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Hides the "Accept" text that indicates the accepted file types
+          * @default false
+         */
+        "hideAcceptText"?: boolean;
+        /**
+          * Hides the file names in the file upload component
+          * @default false
+         */
+        "hideFileNames"?: boolean;
+        /**
+          * Hides the trigger element when a file is selected.
+          * @default false
+         */
+        "hideTriggerOnSelect"?: boolean;
+        /**
+          * Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+         */
+        "name"?: string;
+        /**
+          * Removes a file from the selected files by its index.
+          * @param fileIndex The index of the file to remove.
+         */
+        "removeFileByIndex": (fileIndex: number) => Promise<void>;
+    }
+    interface XplInputTime {
+        /**
+          * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
+          * @default false
+         */
+        "allowCustomOption"?: boolean;
+        /**
+          * Whether the field is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The `inputId` is used to associate the input with a label.
+         */
+        "inputId"?: string;
+        /**
+          * Maximum value for the input.
+          * @default '23:59'
+         */
+        "max"?: number | string;
+        /**
+          * The minimum value for the input.
+          * @default '00:00'
+         */
+        "min"?: number | string;
+        /**
+          * Whether the input is a single time or a range of times.  Currently, only single time is supported.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'range';
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
+         */
+        "name"?: string;
+        /**
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the input is editable
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Time increment for dropdown options
+          * @default 30
+         */
+        "step": number;
+        /**
+          * The time format to display for the input.
+          * @default '24h'
+         */
+        "timeFormat"?: '12h' | '24h';
+        /**
+          * Including a `value` will pre-populate the input with the given string.  Must be in 24 hour format, ex: 15:25 for 3:25 PM
+         */
+        "value"?: string;
+    }
+    interface XplLargeCard {
+        /**
+          * Description of the Card
+         */
+        "description"?: string;
+        /**
+          * Whether the card is a link or not
+         */
+        "link"?: boolean;
+        /**
+          * Name of the Card
+         */
+        "name": string;
+    }
+    interface XplList {
+        /**
+          * `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed     icon: string;         // Apollo icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item.
+          * @default []
+         */
+        "items"?: ListItem[];
+    }
+    interface XplMainNav {
+        /**
+          * @property {string}  width  - The width of the Main Nav.
+          * @default 'default'
+         */
+        "width": 'default' | 'md' | 'sm';
+    }
+    interface XplModal {
+        /**
+          * Whether the modal is open.
+          * @default false
+         */
+        "isOpen": boolean;
+        /**
+          * The size of the modal.
+          * @default 'medium'
+         */
+        "size": 'large' | 'medium' | 'small';
+        /**
+          * The visual variant of the modal.
+          * @default 'default'
+         */
+        "variant": 'default' | 'warning';
+    }
+    interface XplNavItem {
+        /**
+          * @property {boolean} - Whether or not the item should control the main nav state on click
+          * @default false
+         */
+        "navControl"?: boolean;
+    }
+    interface XplPagination {
+        /**
+          * The current active page (1-based). Marked as mutable so we can update from inside this component.
+          * @default 1
+         */
+        "currentPage": number;
+        /**
+          * The rows-per-page options offered in the dropdown.
+          * @default '10,25,50,100,150'
+         */
+        "rowsPerPageOptions": string;
+        /**
+          * The currently selected rows-per-page.
+          * @default 10
+         */
+        "selectedRowsPerPage": number;
+        /**
+          * Total number of pages.
+          * @default 1
+         */
+        "totalPages": number;
+        /**
+          * Whether to allow go to page navigation.
+          * @default false
+         */
+        "withPageControl": boolean;
+    }
+    interface XplPopover {
+        /**
+          * Whether the popover is disabled or not.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The display style of the popover, either as an arrow or a menu. - 'arrow': Displays an arrow pointing to the trigger element. - 'menu': Displays a menu-style popover without an arrow.
+          * @default 'arrow'
+         */
+        "display": 'arrow' | 'menu';
+        /**
+          * Whether the popover is open by default or not.
+          * @default false
+         */
+        "isOpen": boolean;
+        /**
+          * The position of the trigger element relative to the popover.
+          * @default 'bottom-middle'
+         */
+        "position": PopoverPosition;
+    }
+    interface XplProgress {
+        /**
+          * Current step, is the index of the current active step
+          * @default 0
+         */
+        "currentStep": number;
+        /**
+          * The steps is an array of the steps name.
+         */
+        "steps"?: string[];
+    }
+    interface XplRadio {
+        /**
+          * Whether the input is "on"
+         */
+        "checked"?: boolean;
+        /**
+          * Description text for the field
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The name attribute for the html input. (submittted in form as name/value pair)
+         */
+        "name"?: string;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Whether the input is contained in a box with a border and, in disabled state, a background
+         */
+        "styled"?: boolean;
+        /**
+          * The value attribute for the radio input. (submittted in form as name/value pair)
+         */
+        "value"?: string;
+    }
+    interface XplSecondaryNav {
+    }
+    interface XplSelect {
+        /**
+          * An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean;   isSelected?: boolean;   isDisabled?: boolean;   options?: DropdownItem[];   groupName?: string; }
+          * @default []
+         */
+        "choices"?: DropdownItem[];
+        /**
+          * The class name to apply to the select component.
+         */
+        "classNames"?: string;
+        /**
+          * If true, enables custom display value rendering via slot.
+         */
+        "customDisplayValue"?: boolean;
+        /**
+          * Optional text that appears below the input label.
+         */
+        "description"?: string;
+        /**
+          * Whether the field is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
+         */
+        "error"?: string;
+        /**
+          * The label that appears above the select dropdown
+         */
+        "label"?: string;
+        /**
+          * Whether to allow a single choice or multiple choices.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'multi';
+        /**
+          * The name of the hidden input field that contains the selected option's value(s)
+         */
+        "name"?: string;
+        /**
+          * Placeholder text that appears when the field has no value
+         */
+        "placeholder": string;
+        /**
+          * Resets the select component to its initial state with no selections. This clears all selected values and returns the component to its default state.
+         */
+        "reset": () => Promise<void>;
+        /**
+          * The icon to display in the select trigger button.
+          * @default 'chevron-down'
+         */
+        "selectIcon"?: IconName2;
+        /**
+          * The value(s) currently selected in the select component.
+         */
+        "selectedValues"?: string | string[];
+        /**
+          * Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.
+          * @default true
+         */
+        "truncate"?: boolean;
+    }
+    interface XplSkeleton {
+        /**
+          * A CSS class name to apply to the component.
+         */
+        "classNames"?: string;
+        /**
+          * If true, the skeleton will take up the full width of its container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The height of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS height value
+         */
+        "height"?: CSSStyleDeclaration['height'];
+        /**
+          * The margin of the skeleton. (e.g. '10px', '1rem', '1rem 0') accepts any valid CSS margin value
+         */
+        "margin"?: CSSStyleDeclaration['margin'];
+        /**
+          * The shape of the skeleton.
+          * @default 'rectangle'
+         */
+        "shape"?: 'rectangle' | 'circle' | 'square';
+        /**
+          * The predefined size of the skeleton.
+          * @default 'custom'
+         */
+        "size"?: | 'display'
+        | 'title-1'
+        | 'title-2'
+        | 'title-3'
+        | 'title-4'
+        | 'title-5'
+        | 'body'
+        | 'custom';
+        /**
+          * The width of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS width value
+         */
+        "width"?: CSSStyleDeclaration['width'];
+    }
+    interface XplSlideout {
+        /**
+          * Whether to show a backdrop behind the slideout.
+          * @default false
+         */
+        "backdrop": boolean;
+        /**
+          * Whether the slideout is open.
+          * @default false
+         */
+        "isOpen": boolean;
+        /**
+          * Whether to show the footer section in the slideout.
+          * @default true
+         */
+        "showFooter": boolean;
+        /**
+          * The visual style variant of the slideout. Can be 'default' or 'warning'.
+          * @default 'default'
+         */
+        "variant": 'default' | 'warning';
+    }
+    interface XplTab {
+        /**
+          * Whether the tab is selected
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * The target of the tab, required for the tab to be selected
+         */
+        "target": string;
+    }
+    interface XplTabPanel {
+        /**
+          * Whether the panel is selected
+          * @default false
+         */
+        "selected": boolean;
+        /**
+          * The target of the tab, required for the tab to be selected
+         */
+        "target": string;
+    }
+    interface XplTable {
+        /**
+          * The header values for each column.
+         */
+        "columns"?: string[];
+        /**
+          * The data for the body of the table.
+         */
+        "data"?: string[][];
+        /**
+          * The data for the footer of the table.
+         */
+        "footer"?: string[][];
+        /**
+          * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
+         */
+        "freeze"?: boolean;
+        /**
+          * Toggles to show the sort button on each table head
+          * @default false
+         */
+        "isSortable"?: boolean;
+        /**
+          * Toggles a selectable checkbox for each row in the table
+         */
+        "multiselect"?: boolean;
+        /**
+          * The values for the input for each row when multiselect is activated.
+          * @default []
+         */
+        "selectedValues"?: string[];
+        /**
+          * Manually determined if the column is sortable
+          * @default []
+         */
+        "sortableColumns"?: boolean[];
+        /**
+          * Toggles an optional styling of the background of each even row of the table body.
+         */
+        "striped"?: boolean;
+    }
+    interface XplTableHeader {
+    }
+    interface XplTableHeaderCell {
+        /**
+          * @property {IconName} - Icon to display in the cell
+         */
+        "icon"?: IconName;
+        /**
+          * @property {string} - Text to display in the cell
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * @property {boolean} - Whether the cell is sortable or not
+          * @default false
+         */
+        "sortable"?: boolean;
+        /**
+          * @property {string} - The type of cell to render
+          * @default 'label'
+         */
+        "type": 'label' | 'checkbox' | 'icon';
+        /**
+          * @property {number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default to fit the content of the cell with 16px of padding on each side
+         */
+        "width"?: number;
+    }
+    interface XplTabs {
+        /**
+          * Whether to make the tabs full width
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * The selected tab target value, defaults to the first tab
+         */
+        "value": string;
+    }
+    interface XplTag {
+    }
+    interface XplToast {
+        /**
+          * @property {string} - The caption of the toast, limited to 85 characters
+         */
+        "caption": string;
+        /**
+          * @property {boolean} - Whether or not the toast is dismissible
+          * @default true
+         */
+        "dismissable": boolean;
+        /**
+          * @property {boolean} - Whether or not to show the icon
+          * @default true
+         */
+        "showIcon"?: boolean;
+        /**
+          * @property {number} - The timeout for the toast to dismiss in ms, default 8 seconds
+          * @default 8000
+         */
+        "timeout": number;
+        /**
+          * @property {string} - The variant of the toast
+          * @default 'neutral'
+         */
+        "variant": 'neutral' | 'warning' | 'success';
+    }
+    interface XplToggle {
+        /**
+          * Whether the toggle is `on`
+         */
+        "checked"?: boolean;
+        /**
+          * The toggle's description appears *above* the toggle.
+         */
+        "description"?: string;
+        /**
+          * Whether the toggle is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The toggle's heading appears *above* the toggle.
+         */
+        "heading"?: string;
+        /**
+          * The toggle's label appears *to the right of* the toggle.
+         */
+        "label"?: string;
+        /**
+          * The name attribute for the html input. (submittted in form as name/value pair)
+         */
+        "name"?: string;
+        /**
+          * The size of the toggle -- `default` or `small`
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'small';
+    }
+    interface XplToolbar {
+        /**
+          * The number of selected items to display in the toolbar.
+          * @default 0
+         */
+        "selectedItemCount": number;
+    }
+    interface XplTooltip {
+        /**
+          * Hide the arrow
+          * @default false
+         */
+        "hideArrow": boolean;
+        /**
+          * Position of the tooltip relative to the element
+          * @default 'top-middle'
+         */
+        "position": | 'top-middle'
+        | 'right'
+        | 'bottom-middle'
+        | 'left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-left'
+        | 'bottom-right';
+        /**
+          * The tooltip text to display
+         */
+        "text": string;
+    }
+    interface XplUtilityBar {
+        /**
+          * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
+         */
+        "isNavOpenAtStartup"?: boolean;
+        /**
+          * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+         */
+        "navControl"?: boolean;
+    }
+}
+export interface XplButtonRowCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplButtonRowElement;
 }
+export interface XplCalendarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplCalendarElement;
+}
 export interface XplCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplCheckboxElement;
 }
+export interface XplChoicelistCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplChoicelistElement;
+}
+export interface XplDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplDropdownElement;
+}
+export interface XplDynamicTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplDynamicTableElement;
+}
+export interface XplInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputElement;
+}
+export interface XplInputColorCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputColorElement;
+}
+export interface XplInputDateCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputDateElement;
+}
+export interface XplInputFileCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputFileElement;
+}
+export interface XplInputTimeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputTimeElement;
+}
 export interface XplMainNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplMainNavElement;
 }
+export interface XplModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplModalElement;
+}
 export interface XplNavItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplNavItemElement;
@@ -420,14 +1378,38 @@ export interface XplPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplPaginationElement;
 }
+export interface XplPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplPopoverElement;
+}
 export interface XplRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplRadioElement;
 }
+export interface XplSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplSelectElement;
+}
+export interface XplSlideoutCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplSlideoutElement;
+}
+export interface XplTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTabElement;
+}
 export interface XplTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplTableElement;
 }
+export interface XplTableHeaderCellCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTableHeaderCellElement;
+}
+export interface XplTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTabsElement;
+}
 export interface XplTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplTagElement;
@@ -437,605 +1419,2094 @@ export interface XplUtilityBarCustomEvent<T> extends CustomEvent<T> {
     target: HTMLXplUtilityBarElement;
 }
 declare global {
+    interface HTMLXplAccordionElement extends Components.XplAccordion, HTMLStencilElement {
+    }
+    var HTMLXplAccordionElement: {
+        prototype: HTMLXplAccordionElement;
+        new (): HTMLXplAccordionElement;
+    };
     interface HTMLXplApplicationShellElement extends Components.XplApplicationShell, HTMLStencilElement {
     }
-    var HTMLXplApplicationShellElement: {
-        prototype: HTMLXplApplicationShellElement;
-        new (): HTMLXplApplicationShellElement;
+    var HTMLXplApplicationShellElement: {
+        prototype: HTMLXplApplicationShellElement;
+        new (): HTMLXplApplicationShellElement;
+    };
+    interface HTMLXplAvatarElement extends Components.XplAvatar, HTMLStencilElement {
+    }
+    var HTMLXplAvatarElement: {
+        prototype: HTMLXplAvatarElement;
+        new (): HTMLXplAvatarElement;
+    };
+    interface HTMLXplBackdropElement extends Components.XplBackdrop, HTMLStencilElement {
+    }
+    var HTMLXplBackdropElement: {
+        prototype: HTMLXplBackdropElement;
+        new (): HTMLXplBackdropElement;
+    };
+    interface HTMLXplBadgeElement extends Components.XplBadge, HTMLStencilElement {
+    }
+    var HTMLXplBadgeElement: {
+        prototype: HTMLXplBadgeElement;
+        new (): HTMLXplBadgeElement;
+    };
+    interface HTMLXplBreadcrumbItemElement extends Components.XplBreadcrumbItem, HTMLStencilElement {
+    }
+    var HTMLXplBreadcrumbItemElement: {
+        prototype: HTMLXplBreadcrumbItemElement;
+        new (): HTMLXplBreadcrumbItemElement;
+    };
+    interface HTMLXplBreadcrumbsElement extends Components.XplBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLXplBreadcrumbsElement: {
+        prototype: HTMLXplBreadcrumbsElement;
+        new (): HTMLXplBreadcrumbsElement;
+    };
+    interface HTMLXplButtonElement extends Components.XplButton, HTMLStencilElement {
+    }
+    var HTMLXplButtonElement: {
+        prototype: HTMLXplButtonElement;
+        new (): HTMLXplButtonElement;
+    };
+    interface HTMLXplButtonRowElementEventMap {
+        "clickPrimary": any;
+        "clickSecondary": any;
+        "clickTertiary": any;
+    }
+    interface HTMLXplButtonRowElement extends Components.XplButtonRow, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplButtonRowElementEventMap>(type: K, listener: (this: HTMLXplButtonRowElement, ev: XplButtonRowCustomEvent<HTMLXplButtonRowElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplButtonRowElementEventMap>(type: K, listener: (this: HTMLXplButtonRowElement, ev: XplButtonRowCustomEvent<HTMLXplButtonRowElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplButtonRowElement: {
+        prototype: HTMLXplButtonRowElement;
+        new (): HTMLXplButtonRowElement;
+    };
+    interface HTMLXplCalendarElementEventMap {
+        "dateSelected": string | string[];
+    }
+    interface HTMLXplCalendarElement extends Components.XplCalendar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplCalendarElementEventMap>(type: K, listener: (this: HTMLXplCalendarElement, ev: XplCalendarCustomEvent<HTMLXplCalendarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplCalendarElementEventMap>(type: K, listener: (this: HTMLXplCalendarElement, ev: XplCalendarCustomEvent<HTMLXplCalendarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplCalendarElement: {
+        prototype: HTMLXplCalendarElement;
+        new (): HTMLXplCalendarElement;
+    };
+    interface HTMLXplCheckboxElementEventMap {
+        "checkboxChange": string | boolean;
+    }
+    interface HTMLXplCheckboxElement extends Components.XplCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplCheckboxElementEventMap>(type: K, listener: (this: HTMLXplCheckboxElement, ev: XplCheckboxCustomEvent<HTMLXplCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplCheckboxElementEventMap>(type: K, listener: (this: HTMLXplCheckboxElement, ev: XplCheckboxCustomEvent<HTMLXplCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplCheckboxElement: {
+        prototype: HTMLXplCheckboxElement;
+        new (): HTMLXplCheckboxElement;
     };
-    interface HTMLXplAvatarElement extends Components.XplAvatar, HTMLStencilElement {
+    interface HTMLXplChoicelistElementEventMap {
+        "choicelistChange": boolean[];
+        "choicelistValueChange": string | boolean | (string | boolean)[];
     }
-    var HTMLXplAvatarElement: {
-        prototype: HTMLXplAvatarElement;
-        new (): HTMLXplAvatarElement;
+    interface HTMLXplChoicelistElement extends Components.XplChoicelist, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplChoicelistElementEventMap>(type: K, listener: (this: HTMLXplChoicelistElement, ev: XplChoicelistCustomEvent<HTMLXplChoicelistElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplChoicelistElementEventMap>(type: K, listener: (this: HTMLXplChoicelistElement, ev: XplChoicelistCustomEvent<HTMLXplChoicelistElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplChoicelistElement: {
+        prototype: HTMLXplChoicelistElement;
+        new (): HTMLXplChoicelistElement;
     };
-    interface HTMLXplBackdropElement extends Components.XplBackdrop, HTMLStencilElement {
+    interface HTMLXplContentAreaElement extends Components.XplContentArea, HTMLStencilElement {
+    }
+    var HTMLXplContentAreaElement: {
+        prototype: HTMLXplContentAreaElement;
+        new (): HTMLXplContentAreaElement;
+    };
+    interface HTMLXplDashboardElement extends Components.XplDashboard, HTMLStencilElement {
+    }
+    var HTMLXplDashboardElement: {
+        prototype: HTMLXplDashboardElement;
+        new (): HTMLXplDashboardElement;
+    };
+    interface HTMLXplDataCardElement extends Components.XplDataCard, HTMLStencilElement {
+    }
+    var HTMLXplDataCardElement: {
+        prototype: HTMLXplDataCardElement;
+        new (): HTMLXplDataCardElement;
+    };
+    interface HTMLXplDividerElement extends Components.XplDivider, HTMLStencilElement {
+    }
+    var HTMLXplDividerElement: {
+        prototype: HTMLXplDividerElement;
+        new (): HTMLXplDividerElement;
+    };
+    interface HTMLXplDropdownElementEventMap {
+        "isOpenChange": boolean;
+    }
+    interface HTMLXplDropdownElement extends Components.XplDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplDropdownElementEventMap>(type: K, listener: (this: HTMLXplDropdownElement, ev: XplDropdownCustomEvent<HTMLXplDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplDropdownElementEventMap>(type: K, listener: (this: HTMLXplDropdownElement, ev: XplDropdownCustomEvent<HTMLXplDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplDropdownElement: {
+        prototype: HTMLXplDropdownElement;
+        new (): HTMLXplDropdownElement;
+    };
+    interface HTMLXplDropdownGroupElement extends Components.XplDropdownGroup, HTMLStencilElement {
+    }
+    var HTMLXplDropdownGroupElement: {
+        prototype: HTMLXplDropdownGroupElement;
+        new (): HTMLXplDropdownGroupElement;
+    };
+    interface HTMLXplDropdownHeadingElement extends Components.XplDropdownHeading, HTMLStencilElement {
+    }
+    var HTMLXplDropdownHeadingElement: {
+        prototype: HTMLXplDropdownHeadingElement;
+        new (): HTMLXplDropdownHeadingElement;
+    };
+    interface HTMLXplDropdownOptionElement extends Components.XplDropdownOption, HTMLStencilElement {
+    }
+    var HTMLXplDropdownOptionElement: {
+        prototype: HTMLXplDropdownOptionElement;
+        new (): HTMLXplDropdownOptionElement;
+    };
+    interface HTMLXplDynamicTableElementEventMap {
+        "selectedItemCountChange": string[];
+    }
+    interface HTMLXplDynamicTableElement extends Components.XplDynamicTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplDynamicTableElementEventMap>(type: K, listener: (this: HTMLXplDynamicTableElement, ev: XplDynamicTableCustomEvent<HTMLXplDynamicTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplDynamicTableElementEventMap>(type: K, listener: (this: HTMLXplDynamicTableElement, ev: XplDynamicTableCustomEvent<HTMLXplDynamicTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplDynamicTableElement: {
+        prototype: HTMLXplDynamicTableElement;
+        new (): HTMLXplDynamicTableElement;
+    };
+    interface HTMLXplDynamicTableCellElement extends Components.XplDynamicTableCell, HTMLStencilElement {
+    }
+    var HTMLXplDynamicTableCellElement: {
+        prototype: HTMLXplDynamicTableCellElement;
+        new (): HTMLXplDynamicTableCellElement;
+    };
+    interface HTMLXplDynamicTableRowElement extends Components.XplDynamicTableRow, HTMLStencilElement {
+    }
+    var HTMLXplDynamicTableRowElement: {
+        prototype: HTMLXplDynamicTableRowElement;
+        new (): HTMLXplDynamicTableRowElement;
+    };
+    interface HTMLXplGridElement extends Components.XplGrid, HTMLStencilElement {
+    }
+    var HTMLXplGridElement: {
+        prototype: HTMLXplGridElement;
+        new (): HTMLXplGridElement;
+    };
+    interface HTMLXplGridItemElement extends Components.XplGridItem, HTMLStencilElement {
+    }
+    var HTMLXplGridItemElement: {
+        prototype: HTMLXplGridItemElement;
+        new (): HTMLXplGridItemElement;
+    };
+    interface HTMLXplHeaderAccordionElement extends Components.XplHeaderAccordion, HTMLStencilElement {
+    }
+    var HTMLXplHeaderAccordionElement: {
+        prototype: HTMLXplHeaderAccordionElement;
+        new (): HTMLXplHeaderAccordionElement;
+    };
+    interface HTMLXplIconElement extends Components.XplIcon, HTMLStencilElement {
+    }
+    var HTMLXplIconElement: {
+        prototype: HTMLXplIconElement;
+        new (): HTMLXplIconElement;
+    };
+    interface HTMLXplInputElementEventMap {
+        "focusEvent": FocusEvent;
+        "blurEvent": FocusEvent;
+        "valueChange": string;
+        "inputEvent": string;
+    }
+    interface HTMLXplInputElement extends Components.XplInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputElementEventMap>(type: K, listener: (this: HTMLXplInputElement, ev: XplInputCustomEvent<HTMLXplInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputElementEventMap>(type: K, listener: (this: HTMLXplInputElement, ev: XplInputCustomEvent<HTMLXplInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputElement: {
+        prototype: HTMLXplInputElement;
+        new (): HTMLXplInputElement;
+    };
+    interface HTMLXplInputColorElementEventMap {
+        "inputChange": string;
+        "hasErrorStateChanged": string | null;
+    }
+    interface HTMLXplInputColorElement extends Components.XplInputColor, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputColorElementEventMap>(type: K, listener: (this: HTMLXplInputColorElement, ev: XplInputColorCustomEvent<HTMLXplInputColorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputColorElementEventMap>(type: K, listener: (this: HTMLXplInputColorElement, ev: XplInputColorCustomEvent<HTMLXplInputColorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputColorElement: {
+        prototype: HTMLXplInputColorElement;
+        new (): HTMLXplInputColorElement;
+    };
+    interface HTMLXplInputDateElementEventMap {
+        "valueChange": string;
+        "hasErrorStateChanged": string | null;
+        "rangeSelected": { start: Date; end: Date };
+    }
+    interface HTMLXplInputDateElement extends Components.XplInputDate, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputDateElementEventMap>(type: K, listener: (this: HTMLXplInputDateElement, ev: XplInputDateCustomEvent<HTMLXplInputDateElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputDateElementEventMap>(type: K, listener: (this: HTMLXplInputDateElement, ev: XplInputDateCustomEvent<HTMLXplInputDateElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputDateElement: {
+        prototype: HTMLXplInputDateElement;
+        new (): HTMLXplInputDateElement;
+    };
+    interface HTMLXplInputFileElementEventMap {
+        "inputChange": {
+        type: string;
+        value: File[] | null;
+    };
+    }
+    /**
+     * `xpl-input-file` is a component that allows users to upload files.
+     */
+    interface HTMLXplInputFileElement extends Components.XplInputFile, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputFileElementEventMap>(type: K, listener: (this: HTMLXplInputFileElement, ev: XplInputFileCustomEvent<HTMLXplInputFileElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputFileElementEventMap>(type: K, listener: (this: HTMLXplInputFileElement, ev: XplInputFileCustomEvent<HTMLXplInputFileElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputFileElement: {
+        prototype: HTMLXplInputFileElement;
+        new (): HTMLXplInputFileElement;
+    };
+    interface HTMLXplInputTimeElementEventMap {
+        "valueChange": string;
+        "hasErrorStateChanged": string | null;
+    }
+    interface HTMLXplInputTimeElement extends Components.XplInputTime, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputTimeElementEventMap>(type: K, listener: (this: HTMLXplInputTimeElement, ev: XplInputTimeCustomEvent<HTMLXplInputTimeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputTimeElementEventMap>(type: K, listener: (this: HTMLXplInputTimeElement, ev: XplInputTimeCustomEvent<HTMLXplInputTimeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputTimeElement: {
+        prototype: HTMLXplInputTimeElement;
+        new (): HTMLXplInputTimeElement;
+    };
+    interface HTMLXplLargeCardElement extends Components.XplLargeCard, HTMLStencilElement {
+    }
+    var HTMLXplLargeCardElement: {
+        prototype: HTMLXplLargeCardElement;
+        new (): HTMLXplLargeCardElement;
+    };
+    interface HTMLXplListElement extends Components.XplList, HTMLStencilElement {
+    }
+    var HTMLXplListElement: {
+        prototype: HTMLXplListElement;
+        new (): HTMLXplListElement;
+    };
+    interface HTMLXplMainNavElementEventMap {
+        "navWidth": string;
+    }
+    interface HTMLXplMainNavElement extends Components.XplMainNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplMainNavElementEventMap>(type: K, listener: (this: HTMLXplMainNavElement, ev: XplMainNavCustomEvent<HTMLXplMainNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplMainNavElementEventMap>(type: K, listener: (this: HTMLXplMainNavElement, ev: XplMainNavCustomEvent<HTMLXplMainNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplMainNavElement: {
+        prototype: HTMLXplMainNavElement;
+        new (): HTMLXplMainNavElement;
+    };
+    interface HTMLXplModalElementEventMap {
+        "modalClosed": void;
+    }
+    interface HTMLXplModalElement extends Components.XplModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplModalElementEventMap>(type: K, listener: (this: HTMLXplModalElement, ev: XplModalCustomEvent<HTMLXplModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplModalElementEventMap>(type: K, listener: (this: HTMLXplModalElement, ev: XplModalCustomEvent<HTMLXplModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplModalElement: {
+        prototype: HTMLXplModalElement;
+        new (): HTMLXplModalElement;
+    };
+    interface HTMLXplNavItemElementEventMap {
+        "navOpen": boolean;
+    }
+    interface HTMLXplNavItemElement extends Components.XplNavItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplNavItemElementEventMap>(type: K, listener: (this: HTMLXplNavItemElement, ev: XplNavItemCustomEvent<HTMLXplNavItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplNavItemElementEventMap>(type: K, listener: (this: HTMLXplNavItemElement, ev: XplNavItemCustomEvent<HTMLXplNavItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplNavItemElement: {
+        prototype: HTMLXplNavItemElement;
+        new (): HTMLXplNavItemElement;
+    };
+    interface HTMLXplPaginationElementEventMap {
+        "pageChange": number;
+        "rowsPerPageChange": number;
+    }
+    interface HTMLXplPaginationElement extends Components.XplPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplPaginationElementEventMap>(type: K, listener: (this: HTMLXplPaginationElement, ev: XplPaginationCustomEvent<HTMLXplPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplPaginationElementEventMap>(type: K, listener: (this: HTMLXplPaginationElement, ev: XplPaginationCustomEvent<HTMLXplPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplPaginationElement: {
+        prototype: HTMLXplPaginationElement;
+        new (): HTMLXplPaginationElement;
+    };
+    interface HTMLXplPopoverElementEventMap {
+        "isOpenChange": boolean;
+    }
+    interface HTMLXplPopoverElement extends Components.XplPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplPopoverElementEventMap>(type: K, listener: (this: HTMLXplPopoverElement, ev: XplPopoverCustomEvent<HTMLXplPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplPopoverElementEventMap>(type: K, listener: (this: HTMLXplPopoverElement, ev: XplPopoverCustomEvent<HTMLXplPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplPopoverElement: {
+        prototype: HTMLXplPopoverElement;
+        new (): HTMLXplPopoverElement;
+    };
+    interface HTMLXplProgressElement extends Components.XplProgress, HTMLStencilElement {
+    }
+    var HTMLXplProgressElement: {
+        prototype: HTMLXplProgressElement;
+        new (): HTMLXplProgressElement;
+    };
+    interface HTMLXplRadioElementEventMap {
+        "radioChange": string | boolean;
+    }
+    interface HTMLXplRadioElement extends Components.XplRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplRadioElementEventMap>(type: K, listener: (this: HTMLXplRadioElement, ev: XplRadioCustomEvent<HTMLXplRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplRadioElementEventMap>(type: K, listener: (this: HTMLXplRadioElement, ev: XplRadioCustomEvent<HTMLXplRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplRadioElement: {
+        prototype: HTMLXplRadioElement;
+        new (): HTMLXplRadioElement;
+    };
+    interface HTMLXplSecondaryNavElement extends Components.XplSecondaryNav, HTMLStencilElement {
+    }
+    var HTMLXplSecondaryNavElement: {
+        prototype: HTMLXplSecondaryNavElement;
+        new (): HTMLXplSecondaryNavElement;
+    };
+    interface HTMLXplSelectElementEventMap {
+        "selectChange": string;
+        "changeEvent": string | string[];
+        "dropdownStateChange": boolean;
+        "triggerDropdown": {
+        prevState: boolean;
+        nextState: boolean;
+    };
+    }
+    interface HTMLXplSelectElement extends Components.XplSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplSelectElementEventMap>(type: K, listener: (this: HTMLXplSelectElement, ev: XplSelectCustomEvent<HTMLXplSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplSelectElementEventMap>(type: K, listener: (this: HTMLXplSelectElement, ev: XplSelectCustomEvent<HTMLXplSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplSelectElement: {
+        prototype: HTMLXplSelectElement;
+        new (): HTMLXplSelectElement;
+    };
+    interface HTMLXplSkeletonElement extends Components.XplSkeleton, HTMLStencilElement {
+    }
+    var HTMLXplSkeletonElement: {
+        prototype: HTMLXplSkeletonElement;
+        new (): HTMLXplSkeletonElement;
+    };
+    interface HTMLXplSlideoutElementEventMap {
+        "isOpenChange": boolean;
+    }
+    interface HTMLXplSlideoutElement extends Components.XplSlideout, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplSlideoutElementEventMap>(type: K, listener: (this: HTMLXplSlideoutElement, ev: XplSlideoutCustomEvent<HTMLXplSlideoutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplSlideoutElementEventMap>(type: K, listener: (this: HTMLXplSlideoutElement, ev: XplSlideoutCustomEvent<HTMLXplSlideoutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplSlideoutElement: {
+        prototype: HTMLXplSlideoutElement;
+        new (): HTMLXplSlideoutElement;
+    };
+    interface HTMLXplTabElementEventMap {
+        "tabChange": string;
+    }
+    interface HTMLXplTabElement extends Components.XplTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTabElementEventMap>(type: K, listener: (this: HTMLXplTabElement, ev: XplTabCustomEvent<HTMLXplTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTabElementEventMap>(type: K, listener: (this: HTMLXplTabElement, ev: XplTabCustomEvent<HTMLXplTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTabElement: {
+        prototype: HTMLXplTabElement;
+        new (): HTMLXplTabElement;
+    };
+    interface HTMLXplTabPanelElement extends Components.XplTabPanel, HTMLStencilElement {
+    }
+    var HTMLXplTabPanelElement: {
+        prototype: HTMLXplTabPanelElement;
+        new (): HTMLXplTabPanelElement;
+    };
+    interface HTMLXplTableElementEventMap {
+        "tableSelect": any;
+        "sortChanged": {
+        colNum: number;
+        colName: string;
+        sortTypeArr: string[];
+    };
+    }
+    interface HTMLXplTableElement extends Components.XplTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTableElementEventMap>(type: K, listener: (this: HTMLXplTableElement, ev: XplTableCustomEvent<HTMLXplTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTableElementEventMap>(type: K, listener: (this: HTMLXplTableElement, ev: XplTableCustomEvent<HTMLXplTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTableElement: {
+        prototype: HTMLXplTableElement;
+        new (): HTMLXplTableElement;
+    };
+    interface HTMLXplTableHeaderElement extends Components.XplTableHeader, HTMLStencilElement {
+    }
+    var HTMLXplTableHeaderElement: {
+        prototype: HTMLXplTableHeaderElement;
+        new (): HTMLXplTableHeaderElement;
+    };
+    interface HTMLXplTableHeaderCellElementEventMap {
+        "sortChanged": 'asc' | 'desc' | 'none';
+    }
+    interface HTMLXplTableHeaderCellElement extends Components.XplTableHeaderCell, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTableHeaderCellElementEventMap>(type: K, listener: (this: HTMLXplTableHeaderCellElement, ev: XplTableHeaderCellCustomEvent<HTMLXplTableHeaderCellElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTableHeaderCellElementEventMap>(type: K, listener: (this: HTMLXplTableHeaderCellElement, ev: XplTableHeaderCellCustomEvent<HTMLXplTableHeaderCellElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTableHeaderCellElement: {
+        prototype: HTMLXplTableHeaderCellElement;
+        new (): HTMLXplTableHeaderCellElement;
+    };
+    interface HTMLXplTabsElementEventMap {
+        "tabChange": string;
+    }
+    interface HTMLXplTabsElement extends Components.XplTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTabsElementEventMap>(type: K, listener: (this: HTMLXplTabsElement, ev: XplTabsCustomEvent<HTMLXplTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTabsElementEventMap>(type: K, listener: (this: HTMLXplTabsElement, ev: XplTabsCustomEvent<HTMLXplTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTabsElement: {
+        prototype: HTMLXplTabsElement;
+        new (): HTMLXplTabsElement;
+    };
+    interface HTMLXplTagElementEventMap {
+        "close": any;
+    }
+    interface HTMLXplTagElement extends Components.XplTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTagElementEventMap>(type: K, listener: (this: HTMLXplTagElement, ev: XplTagCustomEvent<HTMLXplTagElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTagElementEventMap>(type: K, listener: (this: HTMLXplTagElement, ev: XplTagCustomEvent<HTMLXplTagElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTagElement: {
+        prototype: HTMLXplTagElement;
+        new (): HTMLXplTagElement;
+    };
+    interface HTMLXplToastElement extends Components.XplToast, HTMLStencilElement {
+    }
+    var HTMLXplToastElement: {
+        prototype: HTMLXplToastElement;
+        new (): HTMLXplToastElement;
+    };
+    interface HTMLXplToggleElement extends Components.XplToggle, HTMLStencilElement {
+    }
+    var HTMLXplToggleElement: {
+        prototype: HTMLXplToggleElement;
+        new (): HTMLXplToggleElement;
+    };
+    interface HTMLXplToolbarElement extends Components.XplToolbar, HTMLStencilElement {
+    }
+    var HTMLXplToolbarElement: {
+        prototype: HTMLXplToolbarElement;
+        new (): HTMLXplToolbarElement;
+    };
+    interface HTMLXplTooltipElement extends Components.XplTooltip, HTMLStencilElement {
+    }
+    var HTMLXplTooltipElement: {
+        prototype: HTMLXplTooltipElement;
+        new (): HTMLXplTooltipElement;
+    };
+    interface HTMLXplUtilityBarElementEventMap {
+        "navOpen": boolean;
+    }
+    interface HTMLXplUtilityBarElement extends Components.XplUtilityBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplUtilityBarElementEventMap>(type: K, listener: (this: HTMLXplUtilityBarElement, ev: XplUtilityBarCustomEvent<HTMLXplUtilityBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplUtilityBarElementEventMap>(type: K, listener: (this: HTMLXplUtilityBarElement, ev: XplUtilityBarCustomEvent<HTMLXplUtilityBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplUtilityBarElement: {
+        prototype: HTMLXplUtilityBarElement;
+        new (): HTMLXplUtilityBarElement;
+    };
+    interface HTMLElementTagNameMap {
+        "xpl-accordion": HTMLXplAccordionElement;
+        "xpl-application-shell": HTMLXplApplicationShellElement;
+        "xpl-avatar": HTMLXplAvatarElement;
+        "xpl-backdrop": HTMLXplBackdropElement;
+        "xpl-badge": HTMLXplBadgeElement;
+        "xpl-breadcrumb-item": HTMLXplBreadcrumbItemElement;
+        "xpl-breadcrumbs": HTMLXplBreadcrumbsElement;
+        "xpl-button": HTMLXplButtonElement;
+        "xpl-button-row": HTMLXplButtonRowElement;
+        "xpl-calendar": HTMLXplCalendarElement;
+        "xpl-checkbox": HTMLXplCheckboxElement;
+        "xpl-choicelist": HTMLXplChoicelistElement;
+        "xpl-content-area": HTMLXplContentAreaElement;
+        "xpl-dashboard": HTMLXplDashboardElement;
+        "xpl-data-card": HTMLXplDataCardElement;
+        "xpl-divider": HTMLXplDividerElement;
+        "xpl-dropdown": HTMLXplDropdownElement;
+        "xpl-dropdown-group": HTMLXplDropdownGroupElement;
+        "xpl-dropdown-heading": HTMLXplDropdownHeadingElement;
+        "xpl-dropdown-option": HTMLXplDropdownOptionElement;
+        "xpl-dynamic-table": HTMLXplDynamicTableElement;
+        "xpl-dynamic-table-cell": HTMLXplDynamicTableCellElement;
+        "xpl-dynamic-table-row": HTMLXplDynamicTableRowElement;
+        "xpl-grid": HTMLXplGridElement;
+        "xpl-grid-item": HTMLXplGridItemElement;
+        "xpl-header-accordion": HTMLXplHeaderAccordionElement;
+        "xpl-icon": HTMLXplIconElement;
+        "xpl-input": HTMLXplInputElement;
+        "xpl-input-color": HTMLXplInputColorElement;
+        "xpl-input-date": HTMLXplInputDateElement;
+        "xpl-input-file": HTMLXplInputFileElement;
+        "xpl-input-time": HTMLXplInputTimeElement;
+        "xpl-large-card": HTMLXplLargeCardElement;
+        "xpl-list": HTMLXplListElement;
+        "xpl-main-nav": HTMLXplMainNavElement;
+        "xpl-modal": HTMLXplModalElement;
+        "xpl-nav-item": HTMLXplNavItemElement;
+        "xpl-pagination": HTMLXplPaginationElement;
+        "xpl-popover": HTMLXplPopoverElement;
+        "xpl-progress": HTMLXplProgressElement;
+        "xpl-radio": HTMLXplRadioElement;
+        "xpl-secondary-nav": HTMLXplSecondaryNavElement;
+        "xpl-select": HTMLXplSelectElement;
+        "xpl-skeleton": HTMLXplSkeletonElement;
+        "xpl-slideout": HTMLXplSlideoutElement;
+        "xpl-tab": HTMLXplTabElement;
+        "xpl-tab-panel": HTMLXplTabPanelElement;
+        "xpl-table": HTMLXplTableElement;
+        "xpl-table-header": HTMLXplTableHeaderElement;
+        "xpl-table-header-cell": HTMLXplTableHeaderCellElement;
+        "xpl-tabs": HTMLXplTabsElement;
+        "xpl-tag": HTMLXplTagElement;
+        "xpl-toast": HTMLXplToastElement;
+        "xpl-toggle": HTMLXplToggleElement;
+        "xpl-toolbar": HTMLXplToolbarElement;
+        "xpl-tooltip": HTMLXplTooltipElement;
+        "xpl-utility-bar": HTMLXplUtilityBarElement;
+    }
+}
+declare namespace LocalJSX {
+    interface XplAccordion {
+        /**
+          * set the border of the accordion  none: there’s no border wrapping the header  bottom:there’s a border below the header  bordered: the header is wrapped by a white panel with a rounded border around it on every side
+          * @default 'none'
+         */
+        "borderType"?: '' | 'none' | 'bottom' | 'bordered';
+        /**
+          * An optional id of the content slot
+         */
+        "contentId"?: string;
+        /**
+          * if defined, a text field that displays under the header
+         */
+        "description"?: string;
+        /**
+          * Sets the text for the header of the accordion
+         */
+        "header"?: string;
+        /**
+          * Set if the content is shown  false: the accordion is collapsed (default)  true: the accordion is expanded
+          * @default false
+         */
+        "initialExpanded"?: boolean;
+        /**
+          * Set the size of the header and icon size can be 1(default),2,3
+          * @default '3'
+         */
+        "size"?: '1' | '2' | '3';
+    }
+    interface XplApplicationShell {
+        /**
+          * @property {boolean} - *
+          * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
+         */
+        "isNavOpenAtStartup"?: boolean;
+        /**
+          * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+          * @default 'default'
+         */
+        "navWidth"?: string;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+          * @default false
+         */
+        "withSubnav"?: boolean;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a utility bar
+          * @default true
+         */
+        "withUtility"?: boolean;
     }
-    var HTMLXplBackdropElement: {
-        prototype: HTMLXplBackdropElement;
-        new (): HTMLXplBackdropElement;
-    };
-    interface HTMLXplBadgeElement extends Components.XplBadge, HTMLStencilElement {
+    interface XplAvatar {
+        /**
+          * Background color when there is no image src
+         */
+        "color"?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+        /**
+          * Sets a disabled state on the avatar when set to true
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The URL if the avatar should be hyperlinked
+         */
+        "href"?: string;
+        /**
+          * Alt text for the image if there is an image src
+         */
+        "name"?: string;
+        /**
+          * Size of the avatar
+         */
+        "size"?: 'md' | 'sm';
+        /**
+          * The image URL
+         */
+        "src"?: string;
+        /**
+          * Color styles for the dot indicator to indicate varied states
+         */
+        "status"?: 'active' | 'warning' | 'inactive';
+        /**
+          * Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top`
+         */
+        "target"?: string;
     }
-    var HTMLXplBadgeElement: {
-        prototype: HTMLXplBadgeElement;
-        new (): HTMLXplBadgeElement;
-    };
-    interface HTMLXplBreadcrumbItemElement extends Components.XplBreadcrumbItem, HTMLStencilElement {
+    interface XplBackdrop {
+        /**
+          * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area. If false, the position will be fixed and cover the whole view area.
+          * @default false
+         */
+        "relative"?: boolean;
     }
-    var HTMLXplBreadcrumbItemElement: {
-        prototype: HTMLXplBreadcrumbItemElement;
-        new (): HTMLXplBreadcrumbItemElement;
-    };
-    interface HTMLXplBreadcrumbsElement extends Components.XplBreadcrumbs, HTMLStencilElement {
+    interface XplBadge {
+        /**
+          * Whether badge shows a dot icon before the text
+         */
+        "dot"?: boolean;
+        /**
+          * Color styles to indicate varied states
+         */
+        "variant"?: 'success' | 'warning' | 'inactive' | 'error';
     }
-    var HTMLXplBreadcrumbsElement: {
-        prototype: HTMLXplBreadcrumbsElement;
-        new (): HTMLXplBreadcrumbsElement;
-    };
-    interface HTMLXplButtonElement extends Components.XplButton, HTMLStencilElement {
+    interface XplBreadcrumbItem {
     }
-    var HTMLXplButtonElement: {
-        prototype: HTMLXplButtonElement;
-        new (): HTMLXplButtonElement;
-    };
-    interface HTMLXplButtonRowElement extends Components.XplButtonRow, HTMLStencilElement {
+    interface XplBreadcrumbs {
     }
-    var HTMLXplButtonRowElement: {
-        prototype: HTMLXplButtonRowElement;
-        new (): HTMLXplButtonRowElement;
-    };
-    interface HTMLXplCheckboxElement extends Components.XplCheckbox, HTMLStencilElement {
+    interface XplButton {
+        /**
+          * whether button should be disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * @property {string} - An optional form attribute for the button if type is submit
+         */
+        "form"?: string;
+        /**
+          * whether button should render with full width
+         */
+        "fullWidth"?: boolean;
+        /**
+          * whether button should render icon only
+         */
+        "iconOnly"?: boolean;
+        /**
+          * whether button should yield a slot for a link tag
+         */
+        "link"?: boolean;
+        /**
+          * @property {string} - button name attribute
+         */
+        "name"?: string;
+        /**
+          * @property {"default" | "sm" | "xs"} - button size
+          * @default 'default'
+         */
+        "size"?: 'default' | 'sm' | 'xs';
+        /**
+          * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
+          * @default 'neutral'
+         */
+        "state"?: 'neutral' | 'warning' | 'success';
+        /**
+          * @property {"submit" | "reset" | "button"} - button type attribute
+         */
+        "type"?: 'submit' | 'reset' | 'button';
+        /**
+          * @property {string} - button value attribute
+         */
+        "value"?: string;
+        /**
+          * @property {"primary" | "secondary" | "subtle"} - button variant
+          * @default 'primary'
+         */
+        "variant"?: 'primary' | 'secondary' | 'subtle';
     }
-    var HTMLXplCheckboxElement: {
-        prototype: HTMLXplCheckboxElement;
-        new (): HTMLXplCheckboxElement;
-    };
-    interface HTMLXplChoicelistElement extends Components.XplChoicelist, HTMLStencilElement {
+    interface XplButtonRow {
+        /**
+          * Fires on the primary button. If not set, the button can act as a standard submit button for a form.
+         */
+        "onClickPrimary"?: (event: XplButtonRowCustomEvent<any>) => void;
+        /**
+          * Adds an event listener to the secondary button.
+         */
+        "onClickSecondary"?: (event: XplButtonRowCustomEvent<any>) => void;
+        /**
+          * Adds an event listener to the tertiary button.
+         */
+        "onClickTertiary"?: (event: XplButtonRowCustomEvent<any>) => void;
+        /**
+          * The text for the primary button.
+         */
+        "primary"?: 'string';
+        /**
+          * The text for the secondary button. If left empty, will not render a secondary button.
+         */
+        "secondary"?: 'string';
+        /**
+          * The text for the tertiary button. If left empty, will not render a secondary button.
+         */
+        "tertiary"?: 'string';
     }
-    var HTMLXplChoicelistElement: {
-        prototype: HTMLXplChoicelistElement;
-        new (): HTMLXplChoicelistElement;
-    };
-    interface HTMLXplContentAreaElement extends Components.XplContentArea, HTMLStencilElement {
+    interface XplCalendar {
+        /**
+          * Format of the date displayed in the calendar. Default is 'Y-m-d'.
+          * @default 'Y-m-d'
+         */
+        "dateFormat"?: string;
+        /**
+          * Default date to be displayed when the calendar is first loaded.
+         */
+        "defaultDate"?: string;
+        /**
+          * Unique identifier for the calendar element.
+          * @default uuid()
+         */
+        "inputId"?: string;
+        /**
+          * Maximum selectable date in the calendar.
+         */
+        "max"?: number | string;
+        /**
+          * Minimum selectable date in the calendar.
+         */
+        "min"?: number | string;
+        /**
+          * Mode of the calendar, either 'single' for single date selection or 'range' for selecting a range of dates. Default is 'single'.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'range';
+        /**
+          * Event emitted when a date is selected
+         */
+        "onDateSelected"?: (event: XplCalendarCustomEvent<string | string[]>) => void;
     }
-    var HTMLXplContentAreaElement: {
-        prototype: HTMLXplContentAreaElement;
-        new (): HTMLXplContentAreaElement;
-    };
-    interface HTMLXplDividerElement extends Components.XplDivider, HTMLStencilElement {
+    interface XplCheckbox {
+        /**
+          * Whether the input is checked
+         */
+        "checked"?: boolean;
+        /**
+          * A custom data attribute for the checkbox
+         */
+        "dataId"?: string;
+        /**
+          * Description text for the field
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * A visual state for when the input has not been interacted with
+         */
+        "indeterminate"?: boolean;
+        /**
+          * The name attribute for the html input. (submitted in form as name/value pair)
+         */
+        "name"?: string;
+        /**
+          * Event that emits the current value of the checkbox input  Returns the value of the checkbox input if a value is provided, otherwise returns the checked state
+         */
+        "onCheckboxChange"?: (event: XplCheckboxCustomEvent<string | boolean>) => void;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Whether the input is contained in a box with a border and a background
+         */
+        "styled"?: boolean;
+        /**
+          * The value attribute for the checkbox input. (submittted in form as name/value pair)
+         */
+        "value"?: string;
     }
-    var HTMLXplDividerElement: {
-        prototype: HTMLXplDividerElement;
-        new (): HTMLXplDividerElement;
-    };
-    interface HTMLXplDropdownElement extends Components.XplDropdown, HTMLStencilElement {
+    interface XplChoicelist {
+        /**
+          * An array of choices to be displayed in the list. Each choice should be an object with keys: - `checked` [boolean] - whether to pre-check or not - `children` [Choice[]] - an array of child choices (recursive) - `description` [string] - `label` [string]
+         */
+        "choices"?: Choice[];
+        /**
+          * Descriptive text to be displayed above the choice-list.
+         */
+        "description"?: string;
+        /**
+          * The title text to be displayed above the choice-list.
+         */
+        "heading"?: string;
+        /**
+          * Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons.
+         */
+        "multi"?: boolean;
+        /**
+          * The `name` to be associated with form data.
+          * @default uuid()
+         */
+        "name"?: string;
+        /**
+          * An event that is emitted when the selected value changes. The event detail will be an array of booleans, where each boolean corresponds to the checked state of the choices.
+         */
+        "onChoicelistChange"?: (event: XplChoicelistCustomEvent<boolean[]>) => void;
+        /**
+          * An event that is emitted when the selected value changes. The event detail will be an array if the multi prop is true, otherwise it will be a single value. The value will be string if value is provided for choices, otherwise it will be a boolean.  NOTE: This will only be emitted if choices have a value property.
+         */
+        "onChoicelistValueChange"?: (event: XplChoicelistCustomEvent<string | boolean | (string | boolean)[]>) => void;
+        /**
+          * If `true`, will include borders around the list and between individual choices.
+         */
+        "styled"?: boolean;
     }
-    var HTMLXplDropdownElement: {
-        prototype: HTMLXplDropdownElement;
-        new (): HTMLXplDropdownElement;
-    };
-    interface HTMLXplDropdownGroupElement extends Components.XplDropdownGroup, HTMLStencilElement {
+    interface XplContentArea {
+        /**
+          * @property {string}  size  - The content-area size.
+          * @default 'wide'
+         */
+        "size"?: 'wide' | 'narrow' | 'full';
     }
-    var HTMLXplDropdownGroupElement: {
-        prototype: HTMLXplDropdownGroupElement;
-        new (): HTMLXplDropdownGroupElement;
-    };
-    interface HTMLXplDropdownHeadingElement extends Components.XplDropdownHeading, HTMLStencilElement {
+    interface XplDashboard {
     }
-    var HTMLXplDropdownHeadingElement: {
-        prototype: HTMLXplDropdownHeadingElement;
-        new (): HTMLXplDropdownHeadingElement;
-    };
-    interface HTMLXplDropdownOptionElement extends Components.XplDropdownOption, HTMLStencilElement {
+    interface XplDataCard {
+        /**
+          * An optional field that typically describes or modifies the small stat
+         */
+        "detail"?: string;
+        /**
+          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.
+         */
+        "icon"?: IconName;
+        /**
+          * Whether to display the icon or not.
+          * @default true
+         */
+        "leadingIcon"?: boolean;
+        /**
+          * Whether the card is a link
+         */
+        "link"?: boolean;
+        /**
+          * Name Term
+         */
+        "name"?: string;
+        /**
+          * Detail, stat, or value to be displayed in short format. Will be rendered when card is smaller than 441px.
+         */
+        "shortStat"?: string;
+        /**
+          * An Optional stat further enhancing the main metric of the card.
+         */
+        "smallStat"?: string;
+        /**
+          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.
+         */
+        "smallStatIcon"?: IconName;
+        /**
+          * set a variant that changes the color of the small stat based on the following rules:    If trend is positive and greater than 0.5% color is green and up-right arrow is used    If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
+         */
+        "smallStatVariant"?: 'positive' | 'negative' | 'neutral';
+        /**
+          * Detail, stat, or value to be displayed. Will be rendered when card is larger than 441px. Will also appear in the tooltip when shortStat is shown.
+         */
+        "stat"?: string;
+        /**
+          * An optional field for tooltip text of small stat
+          * @default ''
+         */
+        "tooltipTextSmallStat"?: string;
+        /**
+          * An optional field for tooltip text of stat
+          * @default ''
+         */
+        "tooltipTextStat"?: string;
+        /**
+          * Color variant. Used to set the icon color and background.
+         */
+        "variant"?: 'primary' | 'secondary';
     }
-    var HTMLXplDropdownOptionElement: {
-        prototype: HTMLXplDropdownOptionElement;
-        new (): HTMLXplDropdownOptionElement;
-    };
-    interface HTMLXplGridElement extends Components.XplGrid, HTMLStencilElement {
+    interface XplDivider {
+        /**
+          * The tier should be an integer between 0 and 3. Tier 0 dividers do not display text, and 1-3 increase in size with each increasing tier.
+         */
+        "tier"?: number;
     }
-    var HTMLXplGridElement: {
-        prototype: HTMLXplGridElement;
-        new (): HTMLXplGridElement;
-    };
-    interface HTMLXplGridItemElement extends Components.XplGridItem, HTMLStencilElement {
+    interface XplDropdown {
+        /**
+          * whether to anchor the dropdown to the trigger element, requires triggerId to be set
+          * @default false
+         */
+        "anchorToTrigger"?: boolean;
+        /**
+          * options that are listed
+          * @default true
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * text to display as heading
+          * @default false
+         */
+        "isOpen"?: boolean;
+        /**
+          * constant representing number of options that can be selected
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'multi';
+        /**
+          * Emitted when the open state of the dropdown changes.
+         */
+        "onIsOpenChange"?: (event: XplDropdownCustomEvent<boolean>) => void;
+        /**
+          * options that are listed
+         */
+        "options"?: DropdownItem[];
+        /**
+          * whether selection should be made when focusing on interactive element
+          * @default false
+         */
+        "selectOnFocus"?: boolean;
+        /**
+          * The currently selected value(s) in the dropdown.
+         */
+        "selectedValues"?: string | string[];
+        /**
+          * the id for the element that triggers the open state
+         */
+        "triggerId"?: string;
+        /**
+          * call back function invoked when a selection is made
+         */
+        "update"?: (e, { component }: { component: XplDropdown }) => void;
     }
-    var HTMLXplGridItemElement: {
-        prototype: HTMLXplGridItemElement;
-        new (): HTMLXplGridItemElement;
-    };
-    interface HTMLXplInputElement extends Components.XplInput, HTMLStencilElement {
+    interface XplDropdownGroup {
+        /**
+          * text to display as heading
+         */
+        "groupName"?: string;
+        /**
+          * options that are listed
+         */
+        "options"?: DropdownOptionGroup['options'];
     }
-    var HTMLXplInputElement: {
-        prototype: HTMLXplInputElement;
-        new (): HTMLXplInputElement;
-    };
-    interface HTMLXplListElement extends Components.XplList, HTMLStencilElement {
+    interface XplDropdownHeading {
+        /**
+          * text to display as heading
+         */
+        "label"?: string;
     }
-    var HTMLXplListElement: {
-        prototype: HTMLXplListElement;
-        new (): HTMLXplListElement;
-    };
-    interface HTMLXplMainNavElement extends Components.XplMainNav, HTMLStencilElement {
+    interface XplDropdownOption {
+        /**
+          * whether option is disabled
+         */
+        "isDisabled"?: boolean;
+        /**
+          * whether option is selected
+         */
+        "isSelected"?: boolean;
+        /**
+          * text to display for option
+         */
+        "label"?: string;
+        /**
+          * optional subtitle text to display below label
+         */
+        "subtitle"?: string;
+        /**
+          * The selected options value to be submitted with the form, should this option be selected.
+         */
+        "value"?: string;
     }
-    var HTMLXplMainNavElement: {
-        prototype: HTMLXplMainNavElement;
-        new (): HTMLXplMainNavElement;
-    };
-    interface HTMLXplNavItemElement extends Components.XplNavItem, HTMLStencilElement {
+    interface XplDynamicTable {
+        /**
+          * Emitted when the number of selected items changes.
+         */
+        "onSelectedItemCountChange"?: (event: XplDynamicTableCustomEvent<string[]>) => void;
     }
-    var HTMLXplNavItemElement: {
-        prototype: HTMLXplNavItemElement;
-        new (): HTMLXplNavItemElement;
-    };
-    interface HTMLXplPaginationElement extends Components.XplPagination, HTMLStencilElement {
+    interface XplDynamicTableCell {
+        /**
+          * Whether the cell and its contents are disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
     }
-    var HTMLXplPaginationElement: {
-        prototype: HTMLXplPaginationElement;
-        new (): HTMLXplPaginationElement;
-    };
-    interface HTMLXplRadioElement extends Components.XplRadio, HTMLStencilElement {
+    interface XplDynamicTableRow {
+        /**
+          * Whether the row and its cells are disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the row is selected.
+          * @default false
+         */
+        "selected"?: boolean;
     }
-    var HTMLXplRadioElement: {
-        prototype: HTMLXplRadioElement;
-        new (): HTMLXplRadioElement;
-    };
-    interface HTMLXplSecondaryNavElement extends Components.XplSecondaryNav, HTMLStencilElement {
+    interface XplGrid {
     }
-    var HTMLXplSecondaryNavElement: {
-        prototype: HTMLXplSecondaryNavElement;
-        new (): HTMLXplSecondaryNavElement;
-    };
-    interface HTMLXplSelectElement extends Components.XplSelect, HTMLStencilElement {
+    interface XplGridItem {
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  lg size screen
+          * @default 6
+         */
+        "lg"?: number;
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  md size screen
+          * @default 6
+         */
+        "md"?: number;
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  sm size screen
+          * @default 6
+         */
+        "sm"?: number;
+        /**
+          * The number of columns the element should span  out of a 6 column grid on a  xs size screen
+          * @default 6
+         */
+        "xs"?: number;
     }
-    var HTMLXplSelectElement: {
-        prototype: HTMLXplSelectElement;
-        new (): HTMLXplSelectElement;
-    };
-    interface HTMLXplTableElement extends Components.XplTable, HTMLStencilElement {
+    interface XplHeaderAccordion {
+        /**
+          * The id of the content region controlled by the accordion.
+         */
+        "contentId"?: string;
+        /**
+          * Whether the accordion is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether to display a parent checkbox in the accordion header.
+          * @default true
+         */
+        "hasCheckbox"?: boolean;
+        /**
+          * Whether the accordion is expanded initially.
+          * @default false
+         */
+        "initialExpanded"?: boolean;
+        /**
+          * The number of selected child items, or -1 to auto-calculate.
+          * @default -1
+         */
+        "selectedCount"?: number;
     }
-    var HTMLXplTableElement: {
-        prototype: HTMLXplTableElement;
-        new (): HTMLXplTableElement;
-    };
-    interface HTMLXplTagElement extends Components.XplTag, HTMLStencilElement {
+    interface XplIcon {
+        /**
+          * Icon's background color.
+         */
+        "backgroundColor"?: string;
+        /**
+          * Name of icon
+         */
+        "icon"?: IconName1;
+        /**
+          * Size of icon
+         */
+        "size"?: number;
     }
-    var HTMLXplTagElement: {
-        prototype: HTMLXplTagElement;
-        new (): HTMLXplTagElement;
-    };
-    interface HTMLXplToggleElement extends Components.XplToggle, HTMLStencilElement {
+    interface XplInput {
+        /**
+          * Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.  Applies to all input types.
+         */
+        "_id"?: string;
+        /**
+          * The accepted file types for the file input. Corresponds to the `accept` attribute on the input element. Example: 'image/*' for all image types, '.pdf' for PDF files, etc.  Applies to file inputs.
+          * @default ''
+         */
+        "accept"?: string;
+        /**
+          * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
+          * @default false
+         */
+        "allowCustomOption"?: boolean;
+        /**
+          * Hint for form autofill feature  Applies to text, password, number.
+         */
+        "autocomplete"?: string;
+        /**
+          * The date format to use for the datepicker input. This is used by flatpickr to format the date. Default is 'Y-m-d' (e.g., 2023-10-01).  See https://flatpickr.js.org/formatting/ for more details.  Applies to date inputs.
+          * @default 'Y-m-d'
+         */
+        "dateFormat"?: string;
+        /**
+          * Optional text that appears below the input label.  Applies to all input types.
+         */
+        "description"?: string;
+        /**
+          * Whether the field is disabled  Applies to all input types.
+         */
+        "disabled"?: boolean;
+        /**
+          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.  Applies to all input types.
+         */
+        "error"?: string;
+        /**
+          * Hides the "Accept" text that indicates the accepted file types This is useful for cases where you want to hide the "Accept" text.  Applies to file inputs.
+          * @default false
+         */
+        "hideAcceptText"?: boolean;
+        /**
+          * Hide eye dropper  Applies to color inputs.
+         */
+        "hideEyeDropper"?: boolean;
+        /**
+          * Hides the file names in the file upload component This is useful for cases where you want to hide the file names after selection.  Applies to file inputs.
+          * @default false
+         */
+        "hideFileNames"?: boolean;
+        /**
+          * Hides the trigger element when a file is selected. This is useful for cases where you want to hide the trigger after a file is selected.  Applies to file inputs.
+          * @default false
+         */
+        "hideTriggerOnSelect"?: boolean;
+        /**
+          * Label text for the field  Applies to all input types.
+         */
+        "label"?: string;
+        /**
+          * Maximum value for the input.  Applies to number, time, and date inputs.  If the input is a time input, the value must be in 24 hour format, ex: 18:25 for 6:25 PM
+         */
+        "max"?: number | string;
+        /**
+          * For multiline inputs, a max. character count will display along with the current character count, and will automatically render as an error if the character count exceeds the max.  This is only applicable if `multiline` is `true`.
+         */
+        "maxCharacterCount"?: number;
+        /**
+          * The minimum value for the input.  Applies to number, time, and date inputs.  If the input is a time input, the value must be in 24 hour format, ex: 05:25 for 5:25 AM
+         */
+        "min"?: number | string;
+        /**
+          * For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)  Applies to date inputs.
+          * @default 'single'
+         */
+        "mode"?: 'single' | /* "multiple" | */ 'range';
+        /**
+          * Whether to render as a singleline text input or as a multiline textarea. (If `true`, `pre` and `post` values will be ignored, if present.)  Applies to text inputs.
+          * @default false
+         */
+        "multiline"?: boolean;
+        /**
+          * Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.  Applies to file inputs.
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
+         */
+        "name"?: string;
+        /**
+          * The event handler for the blur event
+         */
+        "onBlurEvent"?: (event: XplInputCustomEvent<FocusEvent>) => void;
+        /**
+          * The event handler for the focus event
+         */
+        "onFocusEvent"?: (event: XplInputCustomEvent<FocusEvent>) => void;
+        /**
+          * Event that emits the current value of the input  Applies to text like inputs only.
+         */
+        "onInputEvent"?: (event: XplInputCustomEvent<string>) => void;
+        /**
+          * Event that emits the current value of the input
+         */
+        "onValueChange"?: (event: XplInputCustomEvent<string>) => void;
+        /**
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+         */
+        "placeholder"?: string;
+        /**
+          * A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.
+         */
+        "post"?: string;
+        /**
+          * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.
+         */
+        "pre"?: string;
+        /**
+          * Whether the input is editable  Applies to text, password, number, and date inputs.
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required  Applies to all input types.
+         */
+        "required"?: boolean;
+        /**
+          * The granularity that the value in a `number` input must adhere to when incrementing or decrementing. The default stepping value for number inputs is 1  Applies to number and time inputs.
+         */
+        "step"?: number;
+        /**
+          * The time format to display for the input.  Applies to time inputs.  If 12h is selected, the value will be displayed in 12 hour format, ex: 05:25 PM for 17:25 If 24h is selected, the value will be displayed in 24 hour format, ex: 17:25 for 17:25
+          * @default '24h'
+         */
+        "timeFormat"?: '12h' | '24h';
+        /**
+          * The type of form control
+          * @default 'text'
+         */
+        "type"?: 'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color';
+        /**
+          * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.
+         */
+        "value"?: string;
     }
-    var HTMLXplToggleElement: {
-        prototype: HTMLXplToggleElement;
-        new (): HTMLXplToggleElement;
-    };
-    interface HTMLXplUtilityBarElement extends Components.XplUtilityBar, HTMLStencilElement {
+    interface XplInputColor {
+        /**
+          * Indicates whether the color picker is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Hide eye dropper
+         */
+        "hideEyeDropper"?: boolean;
+        /**
+          * Event that is emitted when the hasErrorState state changes.
+         */
+        "onHasErrorStateChanged"?: (event: XplInputColorCustomEvent<string | null>) => void;
+        /**
+          * Event that is emitted when the color value changes.
+         */
+        "onInputChange"?: (event: XplInputColorCustomEvent<string>) => void;
+        /**
+          * Placeholder text for the color input. This is used when no color is selected.
+          * @default 'Select color'
+         */
+        "placeholder"?: string;
+        /**
+          * Indicates whether the color picker is required.
+         */
+        "required"?: boolean;
+        /**
+          * The color value of the picker.
+         */
+        "value"?: string;
     }
-    var HTMLXplUtilityBarElement: {
-        prototype: HTMLXplUtilityBarElement;
-        new (): HTMLXplUtilityBarElement;
-    };
-    interface HTMLElementTagNameMap {
-        "xpl-application-shell": HTMLXplApplicationShellElement;
-        "xpl-avatar": HTMLXplAvatarElement;
-        "xpl-backdrop": HTMLXplBackdropElement;
-        "xpl-badge": HTMLXplBadgeElement;
-        "xpl-breadcrumb-item": HTMLXplBreadcrumbItemElement;
-        "xpl-breadcrumbs": HTMLXplBreadcrumbsElement;
-        "xpl-button": HTMLXplButtonElement;
-        "xpl-button-row": HTMLXplButtonRowElement;
-        "xpl-checkbox": HTMLXplCheckboxElement;
-        "xpl-choicelist": HTMLXplChoicelistElement;
-        "xpl-content-area": HTMLXplContentAreaElement;
-        "xpl-divider": HTMLXplDividerElement;
-        "xpl-dropdown": HTMLXplDropdownElement;
-        "xpl-dropdown-group": HTMLXplDropdownGroupElement;
-        "xpl-dropdown-heading": HTMLXplDropdownHeadingElement;
-        "xpl-dropdown-option": HTMLXplDropdownOptionElement;
-        "xpl-grid": HTMLXplGridElement;
-        "xpl-grid-item": HTMLXplGridItemElement;
-        "xpl-input": HTMLXplInputElement;
-        "xpl-list": HTMLXplListElement;
-        "xpl-main-nav": HTMLXplMainNavElement;
-        "xpl-nav-item": HTMLXplNavItemElement;
-        "xpl-pagination": HTMLXplPaginationElement;
-        "xpl-radio": HTMLXplRadioElement;
-        "xpl-secondary-nav": HTMLXplSecondaryNavElement;
-        "xpl-select": HTMLXplSelectElement;
-        "xpl-table": HTMLXplTableElement;
-        "xpl-tag": HTMLXplTagElement;
-        "xpl-toggle": HTMLXplToggleElement;
-        "xpl-utility-bar": HTMLXplUtilityBarElement;
+    interface XplInputDate {
+        /**
+          * The date format to use for the datepicker input. This is used by flatpickr to format the date. Default is 'Y-m-d' (e.g., 2023-10-01).  See https://flatpickr.js.org/formatting/ for more details.
+          * @default 'Y-m-d'
+         */
+        "dateFormat"?: string;
+        /**
+          * Whether the field is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The `inputId` is used to associate the input with a label.
+         */
+        "inputId"?: string;
+        /**
+          * Maximum value for the input.
+         */
+        "max"?: number | string;
+        /**
+          * The minimum value for the input.
+         */
+        "min"?: number | string;
+        /**
+          * For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)
+          * @default 'single'
+         */
+        "mode"?: 'single' | /* "multiple" | */ 'range';
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
+         */
+        "name"?: string;
+        /**
+          * Event that is emitted when the hasErrorState state changes.
+         */
+        "onHasErrorStateChanged"?: (event: XplInputDateCustomEvent<string | null>) => void;
+        /**
+          * Event that emits the selected date range when the mode is 'range'. The emitted value is an object with `start` and `end` properties.
+         */
+        "onRangeSelected"?: (event: XplInputDateCustomEvent<{ start: Date; end: Date }>) => void;
+        /**
+          * Event that emits the current value of the input
+         */
+        "onValueChange"?: (event: XplInputDateCustomEvent<string>) => void;
+        /**
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+         */
+        "placeholder"?: string;
+        /**
+          * A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.
+         */
+        "post"?: string;
+        /**
+          * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.
+         */
+        "pre"?: string;
+        /**
+          * Whether the input is editable
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Including a `value` will pre-populate the input with the given string.
+         */
+        "value"?: string;
     }
-}
-declare namespace LocalJSX {
-    interface XplApplicationShell {
+    /**
+     * `xpl-input-file` is a component that allows users to upload files.
+     */
+    interface XplInputFile {
         /**
-          * @property {boolean} - *
-          * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
+          * Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.
          */
-        "isNavOpenAtStartup"?: boolean;
+        "_id"?: string;
         /**
-          * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+          * The accepted file types for the file input. Corresponds to the `accept` attribute on the input element. Example: 'image/*' for all image types, '.pdf' for PDF files, etc.
+          * @default ''
          */
-        "navWidth"?: string;
+        "accept"?: string;
         /**
-          * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+          * Whether the field is disabled
          */
-        "withSubnav"?: boolean;
+        "disabled"?: boolean;
         /**
-          * @property {boolean} - Whether or not the Grid should have space for a utility bar
+          * Hides the "Accept" text that indicates the accepted file types
+          * @default false
          */
-        "withUtility"?: boolean;
+        "hideAcceptText"?: boolean;
+        /**
+          * Hides the file names in the file upload component
+          * @default false
+         */
+        "hideFileNames"?: boolean;
+        /**
+          * Hides the trigger element when a file is selected.
+          * @default false
+         */
+        "hideTriggerOnSelect"?: boolean;
+        /**
+          * Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+         */
+        "name"?: string;
+        /**
+          * Event emitted when a file is selected. The event detail contains the FileList object.
+         */
+        "onInputChange"?: (event: XplInputFileCustomEvent<{
+        type: string;
+        value: File[] | null;
+    }>) => void;
     }
-    interface XplAvatar {
-        "color"?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+    interface XplInputTime {
+        /**
+          * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
+          * @default false
+         */
+        "allowCustomOption"?: boolean;
+        /**
+          * Whether the field is disabled
+         */
         "disabled"?: boolean;
-        "href"?: string;
+        /**
+          * The `inputId` is used to associate the input with a label.
+         */
+        "inputId"?: string;
+        /**
+          * Maximum value for the input.
+          * @default '23:59'
+         */
+        "max"?: number | string;
+        /**
+          * The minimum value for the input.
+          * @default '00:00'
+         */
+        "min"?: number | string;
+        /**
+          * Whether the input is a single time or a range of times.  Currently, only single time is supported.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'range';
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
+         */
         "name"?: string;
-        "size"?: 'md' | 'sm';
-        "src"?: string;
-        "status"?: 'active' | 'warning' | 'inactive';
-        "target"?: string;
+        /**
+          * Event that is emitted when the hasErrorState state changes.
+         */
+        "onHasErrorStateChanged"?: (event: XplInputTimeCustomEvent<string | null>) => void;
+        /**
+          * Event that emits the current value of the input
+         */
+        "onValueChange"?: (event: XplInputTimeCustomEvent<string>) => void;
+        /**
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the input is editable
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Time increment for dropdown options
+          * @default 30
+         */
+        "step"?: number;
+        /**
+          * The time format to display for the input.
+          * @default '24h'
+         */
+        "timeFormat"?: '12h' | '24h';
+        /**
+          * Including a `value` will pre-populate the input with the given string.  Must be in 24 hour format, ex: 15:25 for 3:25 PM
+         */
+        "value"?: string;
     }
-    interface XplBackdrop {
+    interface XplLargeCard {
         /**
-          * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area. If false, the position will be fixed and cover the whole view area.
+          * Description of the Card
          */
-        "relative"?: boolean;
+        "description"?: string;
+        /**
+          * Whether the card is a link or not
+         */
+        "link"?: boolean;
+        /**
+          * Name of the Card
+         */
+        "name"?: string;
     }
-    interface XplBadge {
-        "dot"?: boolean;
-        "variant"?: 'success' | 'warning' | 'inactive' | 'error';
+    interface XplList {
+        /**
+          * `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed     icon: string;         // Apollo icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item.
+          * @default []
+         */
+        "items"?: ListItem[];
     }
-    interface XplBreadcrumbItem {
+    interface XplMainNav {
+        /**
+          * @event {string} navWidth - Emits the `nav-width` prop set by the user when the component is attached to the DOM and when the component is updated.
+         */
+        "onNavWidth"?: (event: XplMainNavCustomEvent<string>) => void;
+        /**
+          * @property {string}  width  - The width of the Main Nav.
+          * @default 'default'
+         */
+        "width"?: 'default' | 'md' | 'sm';
     }
-    interface XplBreadcrumbs {
+    interface XplModal {
+        /**
+          * Whether the modal is open.
+          * @default false
+         */
+        "isOpen"?: boolean;
+        /**
+          * Emitted when the modal is closed.
+         */
+        "onModalClosed"?: (event: XplModalCustomEvent<void>) => void;
+        /**
+          * The size of the modal.
+          * @default 'medium'
+         */
+        "size"?: 'large' | 'medium' | 'small';
+        /**
+          * The visual variant of the modal.
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'warning';
     }
-    interface XplButton {
+    interface XplNavItem {
         /**
-          * whether button should be disabled
+          * @property {boolean} - Whether or not the item should control the main nav state on click
+          * @default false
          */
-        "disabled"?: boolean;
+        "navControl"?: boolean;
         /**
-          * whether button should render with full width
+          * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
          */
-        "fullWidth"?: boolean;
+        "onNavOpen"?: (event: XplNavItemCustomEvent<boolean>) => void;
+    }
+    interface XplPagination {
         /**
-          * whether button should render icon only
+          * The current active page (1-based). Marked as mutable so we can update from inside this component.
+          * @default 1
          */
-        "iconOnly"?: boolean;
+        "currentPage"?: number;
         /**
-          * whether button should yield a slot for a link tag
+          * Emitted whenever the current page changes.
          */
-        "link"?: boolean;
+        "onPageChange"?: (event: XplPaginationCustomEvent<number>) => void;
         /**
-          * @property {string} - button name attribute
+          * Emitted whenever the rows-per-page changes.
          */
-        "name"?: string;
+        "onRowsPerPageChange"?: (event: XplPaginationCustomEvent<number>) => void;
         /**
-          * @property {"default" | "sm" | "xs"} - button size
+          * The rows-per-page options offered in the dropdown.
+          * @default '10,25,50,100,150'
          */
-        "size"?: 'default' | 'sm' | 'xs';
+        "rowsPerPageOptions"?: string;
         /**
-          * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
+          * The currently selected rows-per-page.
+          * @default 10
          */
-        "state"?: 'neutral' | 'warning' | 'success';
+        "selectedRowsPerPage"?: number;
         /**
-          * @property {"submit" | "reset" | "button"} - button type attribute
+          * Total number of pages.
+          * @default 1
          */
-        "type"?: 'submit' | 'reset' | 'button';
+        "totalPages"?: number;
         /**
-          * @property {string} - button value attribute
+          * Whether to allow go to page navigation.
+          * @default false
          */
-        "value"?: string;
+        "withPageControl"?: boolean;
+    }
+    interface XplPopover {
         /**
-          * @property {"primary" | "secondary" | "subtle"} - button variant
+          * Whether the popover is disabled or not.
+          * @default false
          */
-        "variant"?: 'primary' | 'secondary' | 'subtle';
-    }
-    interface XplButtonRow {
+        "disabled"?: boolean;
         /**
-          * Fires on the primary button. If not set, the button can act as a standard submit button for a form.
+          * The display style of the popover, either as an arrow or a menu. - 'arrow': Displays an arrow pointing to the trigger element. - 'menu': Displays a menu-style popover without an arrow.
+          * @default 'arrow'
          */
-        "onClickPrimary"?: (event: XplButtonRowCustomEvent<any>) => void;
+        "display"?: 'arrow' | 'menu';
         /**
-          * Adds an event listener to the secondary button.
+          * Whether the popover is open by default or not.
+          * @default false
          */
-        "onClickSecondary"?: (event: XplButtonRowCustomEvent<any>) => void;
+        "isOpen"?: boolean;
         /**
-          * Adds an event listener to the tertiary button.
+          * Event emitted when the popover is opened or closed.
          */
-        "onClickTertiary"?: (event: XplButtonRowCustomEvent<any>) => void;
+        "onIsOpenChange"?: (event: XplPopoverCustomEvent<boolean>) => void;
         /**
-          * The text for the primary button.
+          * The position of the trigger element relative to the popover.
+          * @default 'bottom-middle'
          */
-        "primary"?: 'string';
+        "position"?: PopoverPosition;
+    }
+    interface XplProgress {
         /**
-          * The text for the secondary button. If left empty, will not render a secondary button.
+          * Current step, is the index of the current active step
+          * @default 0
          */
-        "secondary"?: 'string';
+        "currentStep"?: number;
         /**
-          * The text for the tertiary button. If left empty, will not render a secondary button.
+          * The steps is an array of the steps name.
          */
-        "tertiary"?: 'string';
+        "steps"?: string[];
     }
-    interface XplCheckbox {
+    interface XplRadio {
+        /**
+          * Whether the input is "on"
+         */
         "checked"?: boolean;
+        /**
+          * Description text for the field
+         */
         "description"?: string;
+        /**
+          * Whether the input is disabled
+         */
         "disabled"?: boolean;
-        "indeterminate"?: boolean;
+        /**
+          * The name attribute for the html input. (submittted in form as name/value pair)
+         */
         "name"?: string;
         /**
-          * @private
+          * Event that emits the current value of the radio input  Returns the value of the radio input if a value is provided, otherwise returns the checked state
+         */
+        "onRadioChange"?: (event: XplRadioCustomEvent<string | boolean>) => void;
+        /**
+          * Whether the input is required
          */
-        "onCheckboxChange"?: (event: XplCheckboxCustomEvent<any>) => void;
         "required"?: boolean;
+        /**
+          * Whether the input is contained in a box with a border and, in disabled state, a background
+         */
         "styled"?: boolean;
+        /**
+          * The value attribute for the radio input. (submittted in form as name/value pair)
+         */
         "value"?: string;
     }
-    interface XplChoicelist {
+    interface XplSecondaryNav {
+    }
+    interface XplSelect {
         /**
-          * An array of choices to be displayed in the list. Each choice should be an object with keys: - `checked` [boolean] - whether to pre-check or not - `children` [Choice[]] - an array of child choices (recursive) - `description` [string] - `label` [string]
+          * An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean;   isSelected?: boolean;   isDisabled?: boolean;   options?: DropdownItem[];   groupName?: string; }
+          * @default []
          */
-        "choices"?: Choice[];
+        "choices"?: DropdownItem[];
+        /**
+          * The class name to apply to the select component.
+         */
+        "classNames"?: string;
+        /**
+          * If true, enables custom display value rendering via slot.
+         */
+        "customDisplayValue"?: boolean;
         /**
-          * Descriptive text to be displayed above the choicelist.
+          * Optional text that appears below the input label.
          */
         "description"?: string;
         /**
-          * The title text to be displayed above the choicelist.
+          * Whether the field is disabled
          */
-        "heading"?: string;
+        "disabled"?: boolean;
         /**
-          * Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons.
+          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
          */
-        "multi"?: boolean;
+        "error"?: string;
         /**
-          * The `name` to be associated with form data.
+          * The label that appears above the select dropdown
+         */
+        "label"?: string;
+        /**
+          * Whether to allow a single choice or multiple choices.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'multi';
+        /**
+          * The name of the hidden input field that contains the selected option's value(s)
          */
         "name"?: string;
         /**
-          * If `true`, will include borders around the list and between individual choices.
+          * Emits the value of the selected option in the select menu on change
          */
-        "styled"?: boolean;
-    }
-    interface XplContentArea {
+        "onChangeEvent"?: (event: XplSelectCustomEvent<string | string[]>) => void;
         /**
-          * @property {string}  size  - The content-area size.
+          * Emits when the dropdown opens or closes
          */
-        "size"?: 'wide' | 'narrow' | 'full';
-    }
-    interface XplDivider {
+        "onDropdownStateChange"?: (event: XplSelectCustomEvent<boolean>) => void;
         /**
-          * The tier should be an integer between 0 and 3. Tier 0 dividers do not display text, and 1-3 increase in size with each increasing tier.
+          * Emits the value of the selected option in the select menu on change
          */
-        "tier"?: number;
+        "onSelectChange"?: (event: XplSelectCustomEvent<string>) => void;
+        /**
+          * Emits before the dropdown state changes, allowing listeners to prevent the default behavior. The event detail contains the previous and new dropdown states.
+         */
+        "onTriggerDropdown"?: (event: XplSelectCustomEvent<{
+        prevState: boolean;
+        nextState: boolean;
+    }>) => void;
+        /**
+          * Placeholder text that appears when the field has no value
+         */
+        "placeholder"?: string;
+        /**
+          * The icon to display in the select trigger button.
+          * @default 'chevron-down'
+         */
+        "selectIcon"?: IconName2;
+        /**
+          * The value(s) currently selected in the select component.
+         */
+        "selectedValues"?: string | string[];
+        /**
+          * Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.
+          * @default true
+         */
+        "truncate"?: boolean;
     }
-    interface XplDropdown {
+    interface XplSkeleton {
         /**
-          * options that are listed
+          * A CSS class name to apply to the component.
          */
-        "closeOnSelect"?: boolean;
+        "classNames"?: string;
         /**
-          * text to display as heading
+          * If true, the skeleton will take up the full width of its container.
          */
-        "isOpen"?: boolean;
+        "fullWidth"?: boolean;
         /**
-          * constant representing number of options that can be selected
+          * The height of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS height value
          */
-        "mode"?: 'single' | 'multi';
+        "height"?: CSSStyleDeclaration['height'];
         /**
-          * options that are listed
+          * The margin of the skeleton. (e.g. '10px', '1rem', '1rem 0') accepts any valid CSS margin value
          */
-        "options"?: DropdownItem[];
+        "margin"?: CSSStyleDeclaration['margin'];
         /**
-          * whether selection should be made when focusing on interactable element
+          * The shape of the skeleton.
+          * @default 'rectangle'
          */
-        "selectOnFocus"?: boolean;
+        "shape"?: 'rectangle' | 'circle' | 'square';
         /**
-          * the id for the element that triggers the open state
+          * The predefined size of the skeleton.
+          * @default 'custom'
          */
-        "triggerId"?: string;
+        "size"?: | 'display'
+        | 'title-1'
+        | 'title-2'
+        | 'title-3'
+        | 'title-4'
+        | 'title-5'
+        | 'body'
+        | 'custom';
         /**
-          * call back function invoked when a selection is made
+          * The width of the skeleton. (e.g. '100px', '100%', 'auto') accepts any valid CSS width value
          */
-        "update"?: (
-        e: Event,
-        { component }: { component: XplDropdown }
-    ) => void;
+        "width"?: CSSStyleDeclaration['width'];
     }
-    interface XplDropdownGroup {
+    interface XplSlideout {
         /**
-          * text to display as heading
+          * Whether to show a backdrop behind the slideout.
+          * @default false
          */
-        "groupName"?: string;
+        "backdrop"?: boolean;
         /**
-          * options that are listed
+          * Whether the slideout is open.
+          * @default false
          */
-        "options"?: DropdownOptionGroup['options'];
-    }
-    interface XplDropdownHeading {
+        "isOpen"?: boolean;
         /**
-          * text to display as heading
+          * Emitted when the isOpen property changes.
          */
-        "label"?: string;
+        "onIsOpenChange"?: (event: XplSlideoutCustomEvent<boolean>) => void;
+        /**
+          * Whether to show the footer section in the slideout.
+          * @default true
+         */
+        "showFooter"?: boolean;
+        /**
+          * The visual style variant of the slideout. Can be 'default' or 'warning'.
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'warning';
     }
-    interface XplDropdownOption {
+    interface XplTab {
         /**
-          * whether option is disabled
+          * Event that emits the target of the selected tab
          */
-        "isDisabled"?: boolean;
+        "onTabChange"?: (event: XplTabCustomEvent<string>) => void;
         /**
-          * whether option is selected
+          * Whether the tab is selected
+          * @default false
          */
-        "isSelected"?: boolean;
+        "selected"?: boolean;
         /**
-          * text to display for option
+          * The target of the tab, required for the tab to be selected
          */
-        "label"?: string;
-    }
-    interface XplGrid {
-    }
-    interface XplGridItem {
-        "lg"?: number;
-        "md"?: number;
-        "sm"?: number;
-        "xs"?: number;
+        "target"?: string;
     }
-    interface XplInput {
+    interface XplTabPanel {
         /**
-          * Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.
+          * Whether the panel is selected
+          * @default false
          */
-        "_id"?: string;
-        "autocomplete"?: string;
+        "selected"?: boolean;
         /**
-          * See https://flatpickr.js.org/formatting/
+          * The target of the tab, required for the tab to be selected
          */
-        "dateFormat"?: string;
+        "target"?: string;
+    }
+    interface XplTable {
         /**
-          * Optional text that appears below the input label.
+          * The header values for each column.
          */
-        "description"?: string;
-        "disabled"?: boolean;
+        "columns"?: string[];
         /**
-          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
+          * The data for the body of the table.
          */
-        "error"?: string;
-        "label"?: string;
+        "data"?: string[][];
         /**
-          * Only used when `type` = 'number' or 'date'
+          * The data for the footer of the table.
          */
-        "max"?: number | string;
+        "footer"?: string[][];
         /**
-          * For multiline inputs, a max. character count will display along with the current character count, and will automatically render as an error if the character count exceeds the max.
+          * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
          */
-        "maxCharacterCount"?: number;
+        "freeze"?: boolean;
         /**
-          * Only used when `type` = 'number' or 'date'
+          * Toggles to show the sort button on each table head
+          * @default false
          */
-        "min"?: number | string;
+        "isSortable"?: boolean;
         /**
-          * For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.)
+          * Toggles a selectable checkbox for each row in the table
          */
-        "mode"?: 'single' | /* "multiple" | */ 'range';
+        "multiselect"?: boolean;
         /**
-          * Whether to render as a singleline text input or as a multiline textarea. (If `true`, `pre` and `post` values will be ignored, if present.)
+          * Emits an event whenever the sort changes. The 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]). The default action can be overridden by calling event.preventDefault().
          */
-        "multiline"?: boolean;
+        "onSortChanged"?: (event: XplTableCustomEvent<{
+        colNum: number;
+        colName: string;
+        sortTypeArr: string[];
+    }>) => void;
         /**
-          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+          * Callback function that is called when the checkbox for a row of a `multiselect` table is checked
          */
-        "name"?: string;
-        "placeholder"?: string;
+        "onTableSelect"?: (event: XplTableCustomEvent<any>) => void;
         /**
-          * A string (recommended max 3 characters) that gets shown visually to the left of (before) the input.
+          * The values for the input for each row when multiselect is activated.
+          * @default []
          */
-        "post"?: string;
+        "selectedValues"?: string[];
         /**
-          * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.
+          * Manually determined if the column is sortable
+          * @default []
          */
-        "pre"?: string;
-        "readonly"?: boolean;
-        "required"?: boolean;
-        "step"?: number;
-        "type"?: 'date' | 'text' | 'number' | 'password';
+        "sortableColumns"?: boolean[];
         /**
-          * Including a `value` will prepopulate the input with the given string.
+          * Toggles an optional styling of the background of each even row of the table body.
          */
-        "value"?: string;
+        "striped"?: boolean;
     }
-    interface XplList {
+    interface XplTableHeader {
+    }
+    interface XplTableHeaderCell {
         /**
-          * `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed     icon: string;         // Font Awesome icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item.
+          * @property {IconName} - Icon to display in the cell
          */
-        "items"?: ListItem[];
-    }
-    interface XplMainNav {
+        "icon"?: IconName;
         /**
-          * @event {string} navWidth - Emits the `nav-width` prop set by the user when the component is attached to the DOM and when the component is updated.
+          * @property {string} - Text to display in the cell
+          * @default ''
          */
-        "onNavWidth"?: (event: XplMainNavCustomEvent<string>) => void;
+        "label"?: string;
         /**
-          * @property {string}  width  - The width of the Main Nav.
+          * Emitted when the sort direction changes.
          */
-        "width"?: 'default' | 'md' | 'sm';
-    }
-    interface XplNavItem {
+        "onSortChanged"?: (event: XplTableHeaderCellCustomEvent<'asc' | 'desc' | 'none'>) => void;
         /**
-          * @property {boolean} - Whether or not the item should control the main nav state on click
+          * @property {boolean} - Whether the cell is sortable or not
+          * @default false
          */
-        "navControl"?: boolean;
+        "sortable"?: boolean;
         /**
-          * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
+          * @property {string} - The type of cell to render
+          * @default 'label'
          */
-        "onNavOpen"?: (event: XplNavItemCustomEvent<boolean>) => void;
-    }
-    interface XplPagination {
-        "onPage"?: (event: XplPaginationCustomEvent<any>) => void;
-        "perPage"?: number;
-        "total"?: number;
-        "waitForCallback"?: boolean;
+        "type"?: 'label' | 'checkbox' | 'icon';
+        /**
+          * @property {number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default to fit the content of the cell with 16px of padding on each side
+         */
+        "width"?: number;
     }
-    interface XplRadio {
-        "checked"?: boolean;
-        "description"?: string;
-        "disabled"?: boolean;
-        "name"?: string;
+    interface XplTabs {
         /**
-          * @private
+          * Whether to make the tabs full width
+          * @default false
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Event that emits the target of the selected tab
+         */
+        "onTabChange"?: (event: XplTabsCustomEvent<string>) => void;
+        /**
+          * The selected tab target value, defaults to the first tab
          */
-        "onRadioChange"?: (event: XplRadioCustomEvent<any>) => void;
-        "required"?: boolean;
-        "styled"?: boolean;
         "value"?: string;
     }
-    interface XplSecondaryNav {
+    interface XplTag {
+        /**
+          * Callback function that is called when tag text or `x` icon is clicked
+         */
+        "onClose"?: (event: XplTagCustomEvent<any>) => void;
     }
-    interface XplSelect {
+    interface XplToast {
         /**
-          * An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean; }
+          * @property {string} - The caption of the toast, limited to 85 characters
          */
-        "choices"?: SelectChoice[];
+        "caption"?: string;
         /**
-          * Optional text that appears below the input label.
+          * @property {boolean} - Whether or not the toast is dismissible
+          * @default true
          */
-        "description"?: string;
-        "disabled"?: boolean;
+        "dismissable"?: boolean;
         /**
-          * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
+          * @property {boolean} - Whether or not to show the icon
+          * @default true
          */
-        "error"?: string;
-        "label"?: string;
+        "showIcon"?: boolean;
         /**
-          * Whether to allow a single choice or multiple choices.
+          * @property {number} - The timeout for the toast to dismiss in ms, default 8 seconds
+          * @default 8000
          */
-        "mode"?: 'single' | 'multi';
-        "placeholder"?: string;
+        "timeout"?: number;
         /**
-          * Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.
+          * @property {string} - The variant of the toast
+          * @default 'neutral'
          */
-        "truncate"?: boolean;
-    }
-    interface XplTable {
-        "columns"?: string[];
-        "data"?: string[][];
-        "freeze"?: boolean;
-        "multiselect"?: boolean;
-        "onTableSelect"?: (event: XplTableCustomEvent<any>) => void;
-        "striped"?: boolean;
-    }
-    interface XplTag {
-        "onClose"?: (event: XplTagCustomEvent<any>) => void;
+        "variant"?: 'neutral' | 'warning' | 'success';
     }
     interface XplToggle {
+        /**
+          * Whether the toggle is `on`
+         */
         "checked"?: boolean;
         /**
           * The toggle's description appears *above* the toggle.
          */
         "description"?: string;
+        /**
+          * Whether the toggle is disabled
+         */
         "disabled"?: boolean;
         /**
           * The toggle's heading appears *above* the toggle.
@@ -1045,12 +3516,46 @@ declare namespace LocalJSX {
           * The toggle's label appears *to the right of* the toggle.
          */
         "label"?: string;
+        /**
+          * The name attribute for the html input. (submittted in form as name/value pair)
+         */
         "name"?: string;
         /**
           * The size of the toggle -- `default` or `small`
+          * @default 'default'
          */
         "variant"?: 'default' | 'small';
     }
+    interface XplToolbar {
+        /**
+          * The number of selected items to display in the toolbar.
+          * @default 0
+         */
+        "selectedItemCount"?: number;
+    }
+    interface XplTooltip {
+        /**
+          * Hide the arrow
+          * @default false
+         */
+        "hideArrow"?: boolean;
+        /**
+          * Position of the tooltip relative to the element
+          * @default 'top-middle'
+         */
+        "position"?: | 'top-middle'
+        | 'right'
+        | 'bottom-middle'
+        | 'left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-left'
+        | 'bottom-right';
+        /**
+          * The tooltip text to display
+         */
+        "text"?: string;
+    }
     interface XplUtilityBar {
         /**
           * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
@@ -1066,6 +3571,7 @@ declare namespace LocalJSX {
         "onNavOpen"?: (event: XplUtilityBarCustomEvent<boolean>) => void;
     }
     interface IntrinsicElements {
+        "xpl-accordion": XplAccordion;
         "xpl-application-shell": XplApplicationShell;
         "xpl-avatar": XplAvatar;
         "xpl-backdrop": XplBackdrop;
@@ -1074,27 +3580,53 @@ declare namespace LocalJSX {
         "xpl-breadcrumbs": XplBreadcrumbs;
         "xpl-button": XplButton;
         "xpl-button-row": XplButtonRow;
+        "xpl-calendar": XplCalendar;
         "xpl-checkbox": XplCheckbox;
         "xpl-choicelist": XplChoicelist;
         "xpl-content-area": XplContentArea;
+        "xpl-dashboard": XplDashboard;
+        "xpl-data-card": XplDataCard;
         "xpl-divider": XplDivider;
         "xpl-dropdown": XplDropdown;
         "xpl-dropdown-group": XplDropdownGroup;
         "xpl-dropdown-heading": XplDropdownHeading;
         "xpl-dropdown-option": XplDropdownOption;
+        "xpl-dynamic-table": XplDynamicTable;
+        "xpl-dynamic-table-cell": XplDynamicTableCell;
+        "xpl-dynamic-table-row": XplDynamicTableRow;
         "xpl-grid": XplGrid;
         "xpl-grid-item": XplGridItem;
+        "xpl-header-accordion": XplHeaderAccordion;
+        "xpl-icon": XplIcon;
         "xpl-input": XplInput;
+        "xpl-input-color": XplInputColor;
+        "xpl-input-date": XplInputDate;
+        "xpl-input-file": XplInputFile;
+        "xpl-input-time": XplInputTime;
+        "xpl-large-card": XplLargeCard;
         "xpl-list": XplList;
         "xpl-main-nav": XplMainNav;
+        "xpl-modal": XplModal;
         "xpl-nav-item": XplNavItem;
         "xpl-pagination": XplPagination;
+        "xpl-popover": XplPopover;
+        "xpl-progress": XplProgress;
         "xpl-radio": XplRadio;
         "xpl-secondary-nav": XplSecondaryNav;
         "xpl-select": XplSelect;
+        "xpl-skeleton": XplSkeleton;
+        "xpl-slideout": XplSlideout;
+        "xpl-tab": XplTab;
+        "xpl-tab-panel": XplTabPanel;
         "xpl-table": XplTable;
+        "xpl-table-header": XplTableHeader;
+        "xpl-table-header-cell": XplTableHeaderCell;
+        "xpl-tabs": XplTabs;
         "xpl-tag": XplTag;
+        "xpl-toast": XplToast;
         "xpl-toggle": XplToggle;
+        "xpl-toolbar": XplToolbar;
+        "xpl-tooltip": XplTooltip;
         "xpl-utility-bar": XplUtilityBar;
     }
 }
@@ -1102,6 +3634,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "xpl-accordion": LocalJSX.XplAccordion & JSXBase.HTMLAttributes<HTMLXplAccordionElement>;
             "xpl-application-shell": LocalJSX.XplApplicationShell & JSXBase.HTMLAttributes<HTMLXplApplicationShellElement>;
             "xpl-avatar": LocalJSX.XplAvatar & JSXBase.HTMLAttributes<HTMLXplAvatarElement>;
             "xpl-backdrop": LocalJSX.XplBackdrop & JSXBase.HTMLAttributes<HTMLXplBackdropElement>;
@@ -1110,27 +3643,56 @@ declare module "@stencil/core" {
             "xpl-breadcrumbs": LocalJSX.XplBreadcrumbs & JSXBase.HTMLAttributes<HTMLXplBreadcrumbsElement>;
             "xpl-button": LocalJSX.XplButton & JSXBase.HTMLAttributes<HTMLXplButtonElement>;
             "xpl-button-row": LocalJSX.XplButtonRow & JSXBase.HTMLAttributes<HTMLXplButtonRowElement>;
+            "xpl-calendar": LocalJSX.XplCalendar & JSXBase.HTMLAttributes<HTMLXplCalendarElement>;
             "xpl-checkbox": LocalJSX.XplCheckbox & JSXBase.HTMLAttributes<HTMLXplCheckboxElement>;
             "xpl-choicelist": LocalJSX.XplChoicelist & JSXBase.HTMLAttributes<HTMLXplChoicelistElement>;
             "xpl-content-area": LocalJSX.XplContentArea & JSXBase.HTMLAttributes<HTMLXplContentAreaElement>;
+            "xpl-dashboard": LocalJSX.XplDashboard & JSXBase.HTMLAttributes<HTMLXplDashboardElement>;
+            "xpl-data-card": LocalJSX.XplDataCard & JSXBase.HTMLAttributes<HTMLXplDataCardElement>;
             "xpl-divider": LocalJSX.XplDivider & JSXBase.HTMLAttributes<HTMLXplDividerElement>;
             "xpl-dropdown": LocalJSX.XplDropdown & JSXBase.HTMLAttributes<HTMLXplDropdownElement>;
             "xpl-dropdown-group": LocalJSX.XplDropdownGroup & JSXBase.HTMLAttributes<HTMLXplDropdownGroupElement>;
             "xpl-dropdown-heading": LocalJSX.XplDropdownHeading & JSXBase.HTMLAttributes<HTMLXplDropdownHeadingElement>;
             "xpl-dropdown-option": LocalJSX.XplDropdownOption & JSXBase.HTMLAttributes<HTMLXplDropdownOptionElement>;
+            "xpl-dynamic-table": LocalJSX.XplDynamicTable & JSXBase.HTMLAttributes<HTMLXplDynamicTableElement>;
+            "xpl-dynamic-table-cell": LocalJSX.XplDynamicTableCell & JSXBase.HTMLAttributes<HTMLXplDynamicTableCellElement>;
+            "xpl-dynamic-table-row": LocalJSX.XplDynamicTableRow & JSXBase.HTMLAttributes<HTMLXplDynamicTableRowElement>;
             "xpl-grid": LocalJSX.XplGrid & JSXBase.HTMLAttributes<HTMLXplGridElement>;
             "xpl-grid-item": LocalJSX.XplGridItem & JSXBase.HTMLAttributes<HTMLXplGridItemElement>;
+            "xpl-header-accordion": LocalJSX.XplHeaderAccordion & JSXBase.HTMLAttributes<HTMLXplHeaderAccordionElement>;
+            "xpl-icon": LocalJSX.XplIcon & JSXBase.HTMLAttributes<HTMLXplIconElement>;
             "xpl-input": LocalJSX.XplInput & JSXBase.HTMLAttributes<HTMLXplInputElement>;
+            "xpl-input-color": LocalJSX.XplInputColor & JSXBase.HTMLAttributes<HTMLXplInputColorElement>;
+            "xpl-input-date": LocalJSX.XplInputDate & JSXBase.HTMLAttributes<HTMLXplInputDateElement>;
+            /**
+             * `xpl-input-file` is a component that allows users to upload files.
+             */
+            "xpl-input-file": LocalJSX.XplInputFile & JSXBase.HTMLAttributes<HTMLXplInputFileElement>;
+            "xpl-input-time": LocalJSX.XplInputTime & JSXBase.HTMLAttributes<HTMLXplInputTimeElement>;
+            "xpl-large-card": LocalJSX.XplLargeCard & JSXBase.HTMLAttributes<HTMLXplLargeCardElement>;
             "xpl-list": LocalJSX.XplList & JSXBase.HTMLAttributes<HTMLXplListElement>;
             "xpl-main-nav": LocalJSX.XplMainNav & JSXBase.HTMLAttributes<HTMLXplMainNavElement>;
+            "xpl-modal": LocalJSX.XplModal & JSXBase.HTMLAttributes<HTMLXplModalElement>;
             "xpl-nav-item": LocalJSX.XplNavItem & JSXBase.HTMLAttributes<HTMLXplNavItemElement>;
             "xpl-pagination": LocalJSX.XplPagination & JSXBase.HTMLAttributes<HTMLXplPaginationElement>;
+            "xpl-popover": LocalJSX.XplPopover & JSXBase.HTMLAttributes<HTMLXplPopoverElement>;
+            "xpl-progress": LocalJSX.XplProgress & JSXBase.HTMLAttributes<HTMLXplProgressElement>;
             "xpl-radio": LocalJSX.XplRadio & JSXBase.HTMLAttributes<HTMLXplRadioElement>;
             "xpl-secondary-nav": LocalJSX.XplSecondaryNav & JSXBase.HTMLAttributes<HTMLXplSecondaryNavElement>;
             "xpl-select": LocalJSX.XplSelect & JSXBase.HTMLAttributes<HTMLXplSelectElement>;
+            "xpl-skeleton": LocalJSX.XplSkeleton & JSXBase.HTMLAttributes<HTMLXplSkeletonElement>;
+            "xpl-slideout": LocalJSX.XplSlideout & JSXBase.HTMLAttributes<HTMLXplSlideoutElement>;
+            "xpl-tab": LocalJSX.XplTab & JSXBase.HTMLAttributes<HTMLXplTabElement>;
+            "xpl-tab-panel": LocalJSX.XplTabPanel & JSXBase.HTMLAttributes<HTMLXplTabPanelElement>;
             "xpl-table": LocalJSX.XplTable & JSXBase.HTMLAttributes<HTMLXplTableElement>;
+            "xpl-table-header": LocalJSX.XplTableHeader & JSXBase.HTMLAttributes<HTMLXplTableHeaderElement>;
+            "xpl-table-header-cell": LocalJSX.XplTableHeaderCell & JSXBase.HTMLAttributes<HTMLXplTableHeaderCellElement>;
+            "xpl-tabs": LocalJSX.XplTabs & JSXBase.HTMLAttributes<HTMLXplTabsElement>;
             "xpl-tag": LocalJSX.XplTag & JSXBase.HTMLAttributes<HTMLXplTagElement>;
+            "xpl-toast": LocalJSX.XplToast & JSXBase.HTMLAttributes<HTMLXplToastElement>;
             "xpl-toggle": LocalJSX.XplToggle & JSXBase.HTMLAttributes<HTMLXplToggleElement>;
+            "xpl-toolbar": LocalJSX.XplToolbar & JSXBase.HTMLAttributes<HTMLXplToolbarElement>;
+            "xpl-tooltip": LocalJSX.XplTooltip & JSXBase.HTMLAttributes<HTMLXplTooltipElement>;
             "xpl-utility-bar": LocalJSX.XplUtilityBar & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
         }
     }