@xplortech/apollo-core 0.4.0 → 0.5.0

package/dist/types/components.d.ts

@@ -6,6 +6,20 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface XplApplicationShell {
+        /**
+          * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+         */
+        "navWidth": string;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+         */
+        "withSubnav": boolean;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a utility bar
+         */
+        "withUtility": boolean;
+    }
     interface XplAvatar {
         "color"?: "green" | "yellow" | "pink" | "primary" | "secondary";
         "disabled"?: boolean;
@@ -17,6 +31,10 @@ export namespace Components {
         "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.
+         */
+        "relative": boolean;
     }
     interface XplBadge {
         "dot"?: boolean;
@@ -38,6 +56,20 @@ export namespace Components {
         "value"?: string;
         "variant": "primary" | "secondary" | "subtle" | "warning";
     }
+    interface XplButtonRow {
+        /**
+          * 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";
+    }
     interface XplCheckbox {
         "checked"?: boolean;
         "description"?: string;
@@ -45,9 +77,34 @@ export namespace Components {
         "indeterminate"?: boolean;
         "name"?: string;
         "required"?: boolean;
+        "styled"?: boolean;
         "value"?: string;
     }
     interface XplChoicelist {
+        /**
+          * An array of choices to be displayed in the list. Each choice should be an object with keys: - `checked` [boolean] - whether to precheck or not - `children` [Choice[]] - an array of child choices (recursive) - `description` [string] - `label` [string]
+         */
+        "choices": Choice[];
+        /**
+          * Descriptive text to be displayed above the choicelist.
+         */
+        "description"?: string;
+        /**
+          * The title text to be displayed above the choicelist.
+         */
+        "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.
+         */
+        "name"?: string;
+        /**
+          * If `true`, will include borders around the list and between individual choices.
+         */
+        "styled"?: boolean;
     }
     interface XplContentArea {
         /**
@@ -55,6 +112,88 @@ export namespace Components {
          */
         "size": "wide" | "narrow" | "full";
     }
+    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;
+    }
+    interface XplGrid {
+    }
+    interface XplGridItem {
+        "lg": number;
+        "md": number;
+        "sm": number;
+        "xs": 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.
+         */
+        "_id"?: string;
+        "autocomplete"?: string;
+        /**
+          * See https://flatpickr.js.org/formatting/
+         */
+        "dateFormat"?: string;
+        /**
+          * Optional text that appears below the input label.
+         */
+        "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.
+         */
+        "error"?: string;
+        "label": string;
+        /**
+          * Only used when `type` = 'number' or 'date'
+         */
+        "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.
+         */
+        "maxCharacterCount"?: number;
+        /**
+          * Only used when `type` = 'number' or 'date'
+         */
+        "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.)
+         */
+        "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.)
+         */
+        "multiline"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+         */
+        "name"?: string;
+        "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;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "step"?: number;
+        "type"?: "date" | "text" | "number" | "password";
+        /**
+          * Including a `value` will prepopulate the input with the given string.
+         */
+        "value"?: 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;         // 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.
+         */
+        "items"?: ListItem[];
+    }
     interface XplMainNav {
         /**
           * @property {string}  width  - The width of the Main Nav.
@@ -79,21 +218,80 @@ export namespace Components {
         "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"?: DropdownChoice[];
+        /**
+          * Optional text that appears below the input label.
+         */
+        "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.
+         */
+        "error"?: string;
+        "label"?: string;
+        /**
+          * Whether to allow a single choice or multiple choices.
+         */
+        "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.
+         */
+        "truncate"?: boolean;
+    }
     interface XplTable {
-        "columns": string[];
-        "data": string[][];
-        "freeze": boolean;
-        "multiselect": boolean;
-        "striped": boolean;
+        "columns"?: string[];
+        "data"?: string[][];
+        "freeze"?: boolean;
+        "multiselect"?: boolean;
+        "striped"?: boolean;
+    }
+    interface XplTag {
+    }
+    interface XplToggle {
+        "checked"?: boolean;
+        /**
+          * The toggle's description appears *above* the toggle.
+         */
+        "description"?: string;
+        "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;
+        "name"?: string;
+        /**
+          * The size of the toggle -- `default` or `small`
+         */
+        "variant"?: "default" | "small";
     }
     interface XplUtilityBar {
+        /**
+          * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+         */
+        "navControl"?: boolean;
     }
 }
 declare global {
+    interface HTMLXplApplicationShellElement extends Components.XplApplicationShell, HTMLStencilElement {
+    }
+    var HTMLXplApplicationShellElement: {
+        prototype: HTMLXplApplicationShellElement;
+        new (): HTMLXplApplicationShellElement;
+    };
     interface HTMLXplAvatarElement extends Components.XplAvatar, HTMLStencilElement {
     }
     var HTMLXplAvatarElement: {
@@ -130,6 +328,12 @@ declare global {
         prototype: HTMLXplButtonElement;
         new (): HTMLXplButtonElement;
     };
+    interface HTMLXplButtonRowElement extends Components.XplButtonRow, HTMLStencilElement {
+    }
+    var HTMLXplButtonRowElement: {
+        prototype: HTMLXplButtonRowElement;
+        new (): HTMLXplButtonRowElement;
+    };
     interface HTMLXplCheckboxElement extends Components.XplCheckbox, HTMLStencilElement {
     }
     var HTMLXplCheckboxElement: {
@@ -148,6 +352,36 @@ declare global {
         prototype: HTMLXplContentAreaElement;
         new (): HTMLXplContentAreaElement;
     };
+    interface HTMLXplDividerElement extends Components.XplDivider, HTMLStencilElement {
+    }
+    var HTMLXplDividerElement: {
+        prototype: HTMLXplDividerElement;
+        new (): HTMLXplDividerElement;
+    };
+    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 HTMLXplInputElement extends Components.XplInput, HTMLStencilElement {
+    }
+    var HTMLXplInputElement: {
+        prototype: HTMLXplInputElement;
+        new (): HTMLXplInputElement;
+    };
+    interface HTMLXplListElement extends Components.XplList, HTMLStencilElement {
+    }
+    var HTMLXplListElement: {
+        prototype: HTMLXplListElement;
+        new (): HTMLXplListElement;
+    };
     interface HTMLXplMainNavElement extends Components.XplMainNav, HTMLStencilElement {
     }
     var HTMLXplMainNavElement: {
@@ -178,12 +412,30 @@ declare global {
         prototype: HTMLXplSecondaryNavElement;
         new (): HTMLXplSecondaryNavElement;
     };
+    interface HTMLXplSelectElement extends Components.XplSelect, HTMLStencilElement {
+    }
+    var HTMLXplSelectElement: {
+        prototype: HTMLXplSelectElement;
+        new (): HTMLXplSelectElement;
+    };
     interface HTMLXplTableElement extends Components.XplTable, HTMLStencilElement {
     }
     var HTMLXplTableElement: {
         prototype: HTMLXplTableElement;
         new (): HTMLXplTableElement;
     };
+    interface HTMLXplTagElement extends Components.XplTag, HTMLStencilElement {
+    }
+    var HTMLXplTagElement: {
+        prototype: HTMLXplTagElement;
+        new (): HTMLXplTagElement;
+    };
+    interface HTMLXplToggleElement extends Components.XplToggle, HTMLStencilElement {
+    }
+    var HTMLXplToggleElement: {
+        prototype: HTMLXplToggleElement;
+        new (): HTMLXplToggleElement;
+    };
     interface HTMLXplUtilityBarElement extends Components.XplUtilityBar, HTMLStencilElement {
     }
     var HTMLXplUtilityBarElement: {
@@ -191,25 +443,49 @@ declare global {
         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-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;
     }
 }
 declare namespace LocalJSX {
+    interface XplApplicationShell {
+        /**
+          * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
+         */
+        "navWidth"?: string;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
+         */
+        "withSubnav"?: boolean;
+        /**
+          * @property {boolean} - Whether or not the Grid should have space for a utility bar
+         */
+        "withUtility"?: boolean;
+    }
     interface XplAvatar {
         "color"?: "green" | "yellow" | "pink" | "primary" | "secondary";
         "disabled"?: boolean;
@@ -221,6 +497,10 @@ declare namespace LocalJSX {
         "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.
+         */
+        "relative"?: boolean;
     }
     interface XplBadge {
         "dot"?: boolean;
@@ -242,16 +522,71 @@ declare namespace LocalJSX {
         "value"?: string;
         "variant"?: "primary" | "secondary" | "subtle" | "warning";
     }
+    interface XplButtonRow {
+        /**
+          * Fires on the primary button. If not set, the button can act as a standard submit button for a form.
+         */
+        "onClickPrimary"?: (event: CustomEvent<any>) => void;
+        /**
+          * Adds an event listener to the secondary button.
+         */
+        "onClickSecondary"?: (event: CustomEvent<any>) => void;
+        /**
+          * Adds an event listener to the tertiary button.
+         */
+        "onClickTertiary"?: (event: CustomEvent<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";
+    }
     interface XplCheckbox {
         "checked"?: boolean;
         "description"?: string;
         "disabled"?: boolean;
         "indeterminate"?: boolean;
         "name"?: string;
+        /**
+          * @private
+         */
+        "onCheckboxChange"?: (event: CustomEvent<any>) => void;
         "required"?: boolean;
+        "styled"?: boolean;
         "value"?: string;
     }
     interface XplChoicelist {
+        /**
+          * An array of choices to be displayed in the list. Each choice should be an object with keys: - `checked` [boolean] - whether to precheck or not - `children` [Choice[]] - an array of child choices (recursive) - `description` [string] - `label` [string]
+         */
+        "choices"?: Choice[];
+        /**
+          * Descriptive text to be displayed above the choicelist.
+         */
+        "description"?: string;
+        /**
+          * The title text to be displayed above the choicelist.
+         */
+        "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.
+         */
+        "name"?: string;
+        /**
+          * If `true`, will include borders around the list and between individual choices.
+         */
+        "styled"?: boolean;
     }
     interface XplContentArea {
         /**
@@ -259,7 +594,93 @@ declare namespace LocalJSX {
          */
         "size"?: "wide" | "narrow" | "full";
     }
+    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;
+    }
+    interface XplGrid {
+    }
+    interface XplGridItem {
+        "lg"?: number;
+        "md"?: number;
+        "sm"?: number;
+        "xs"?: 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.
+         */
+        "_id"?: string;
+        "autocomplete"?: string;
+        /**
+          * See https://flatpickr.js.org/formatting/
+         */
+        "dateFormat"?: string;
+        /**
+          * Optional text that appears below the input label.
+         */
+        "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.
+         */
+        "error"?: string;
+        "label"?: string;
+        /**
+          * Only used when `type` = 'number' or 'date'
+         */
+        "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.
+         */
+        "maxCharacterCount"?: number;
+        /**
+          * Only used when `type` = 'number' or 'date'
+         */
+        "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.)
+         */
+        "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.)
+         */
+        "multiline"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+         */
+        "name"?: string;
+        "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;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "step"?: number;
+        "type"?: "date" | "text" | "number" | "password";
+        /**
+          * Including a `value` will prepopulate the input with the given string.
+         */
+        "value"?: 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;         // 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.
+         */
+        "items"?: ListItem[];
+    }
     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: CustomEvent<string>) => void;
         /**
           * @property {string}  width  - The width of the Main Nav.
          */
@@ -278,11 +699,41 @@ declare namespace LocalJSX {
         "description"?: string;
         "disabled"?: boolean;
         "name"?: string;
+        /**
+          * @private
+         */
+        "onRadioChange"?: (event: CustomEvent<any>) => void;
         "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"?: DropdownChoice[];
+        /**
+          * Optional text that appears below the input label.
+         */
+        "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.
+         */
+        "error"?: string;
+        "label"?: string;
+        /**
+          * Whether to allow a single choice or multiple choices.
+         */
+        "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.
+         */
+        "truncate"?: boolean;
+    }
     interface XplTable {
         "columns"?: string[];
         "data"?: string[][];
@@ -291,24 +742,66 @@ declare namespace LocalJSX {
         "onTableSelect"?: (event: CustomEvent<any>) => void;
         "striped"?: boolean;
     }
+    interface XplTag {
+        "onClose"?: (event: CustomEvent<any>) => void;
+    }
+    interface XplToggle {
+        "checked"?: boolean;
+        /**
+          * The toggle's description appears *above* the toggle.
+         */
+        "description"?: string;
+        "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;
+        "name"?: string;
+        /**
+          * The size of the toggle -- `default` or `small`
+         */
+        "variant"?: "default" | "small";
+    }
     interface XplUtilityBar {
+        /**
+          * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)
+         */
+        "navControl"?: boolean;
+        /**
+          * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
+         */
+        "onNavOpen"?: (event: CustomEvent<boolean>) => void;
     }
     interface IntrinsicElements {
+        "xpl-application-shell": XplApplicationShell;
         "xpl-avatar": XplAvatar;
         "xpl-backdrop": XplBackdrop;
         "xpl-badge": XplBadge;
         "xpl-breadcrumb-item": XplBreadcrumbItem;
         "xpl-breadcrumbs": XplBreadcrumbs;
         "xpl-button": XplButton;
+        "xpl-button-row": XplButtonRow;
         "xpl-checkbox": XplCheckbox;
         "xpl-choicelist": XplChoicelist;
         "xpl-content-area": XplContentArea;
+        "xpl-divider": XplDivider;
+        "xpl-grid": XplGrid;
+        "xpl-grid-item": XplGridItem;
+        "xpl-input": XplInput;
+        "xpl-list": XplList;
         "xpl-main-nav": XplMainNav;
         "xpl-nav-item": XplNavItem;
         "xpl-pagination": XplPagination;
         "xpl-radio": XplRadio;
         "xpl-secondary-nav": XplSecondaryNav;
+        "xpl-select": XplSelect;
         "xpl-table": XplTable;
+        "xpl-tag": XplTag;
+        "xpl-toggle": XplToggle;
         "xpl-utility-bar": XplUtilityBar;
     }
 }
@@ -316,21 +809,31 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "xpl-application-shell": LocalJSX.XplApplicationShell & JSXBase.HTMLAttributes<HTMLXplApplicationShellElement>;
             "xpl-avatar": LocalJSX.XplAvatar & JSXBase.HTMLAttributes<HTMLXplAvatarElement>;
             "xpl-backdrop": LocalJSX.XplBackdrop & JSXBase.HTMLAttributes<HTMLXplBackdropElement>;
             "xpl-badge": LocalJSX.XplBadge & JSXBase.HTMLAttributes<HTMLXplBadgeElement>;
             "xpl-breadcrumb-item": LocalJSX.XplBreadcrumbItem & JSXBase.HTMLAttributes<HTMLXplBreadcrumbItemElement>;
             "xpl-breadcrumbs": LocalJSX.XplBreadcrumbs & JSXBase.HTMLAttributes<HTMLXplBreadcrumbsElement>;
             "xpl-button": LocalJSX.XplButton & JSXBase.HTMLAttributes<HTMLXplButtonElement>;
+            "xpl-button-row": LocalJSX.XplButtonRow & JSXBase.HTMLAttributes<HTMLXplButtonRowElement>;
             "xpl-checkbox": LocalJSX.XplCheckbox & JSXBase.HTMLAttributes<HTMLXplCheckboxElement>;
             "xpl-choicelist": LocalJSX.XplChoicelist & JSXBase.HTMLAttributes<HTMLXplChoicelistElement>;
             "xpl-content-area": LocalJSX.XplContentArea & JSXBase.HTMLAttributes<HTMLXplContentAreaElement>;
+            "xpl-divider": LocalJSX.XplDivider & JSXBase.HTMLAttributes<HTMLXplDividerElement>;
+            "xpl-grid": LocalJSX.XplGrid & JSXBase.HTMLAttributes<HTMLXplGridElement>;
+            "xpl-grid-item": LocalJSX.XplGridItem & JSXBase.HTMLAttributes<HTMLXplGridItemElement>;
+            "xpl-input": LocalJSX.XplInput & JSXBase.HTMLAttributes<HTMLXplInputElement>;
+            "xpl-list": LocalJSX.XplList & JSXBase.HTMLAttributes<HTMLXplListElement>;
             "xpl-main-nav": LocalJSX.XplMainNav & JSXBase.HTMLAttributes<HTMLXplMainNavElement>;
             "xpl-nav-item": LocalJSX.XplNavItem & JSXBase.HTMLAttributes<HTMLXplNavItemElement>;
             "xpl-pagination": LocalJSX.XplPagination & JSXBase.HTMLAttributes<HTMLXplPaginationElement>;
             "xpl-radio": LocalJSX.XplRadio & JSXBase.HTMLAttributes<HTMLXplRadioElement>;
             "xpl-secondary-nav": LocalJSX.XplSecondaryNav & JSXBase.HTMLAttributes<HTMLXplSecondaryNavElement>;
+            "xpl-select": LocalJSX.XplSelect & JSXBase.HTMLAttributes<HTMLXplSelectElement>;
             "xpl-table": LocalJSX.XplTable & JSXBase.HTMLAttributes<HTMLXplTableElement>;
+            "xpl-tag": LocalJSX.XplTag & JSXBase.HTMLAttributes<HTMLXplTagElement>;
+            "xpl-toggle": LocalJSX.XplToggle & JSXBase.HTMLAttributes<HTMLXplToggleElement>;
             "xpl-utility-bar": LocalJSX.XplUtilityBar & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
         }
     }