@usecapsule/core-components 3.0.0 → 3.0.1-dev.1

package/dist/types/components.d.ts

@@ -10,14 +10,12 @@ import { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-
 import { DropdownInputEventDetail } from "./components/cpsl-dropdown/dropdown-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface";
 import { TabClickEventDetail } from "./components/cpsl-tab/tab-interface";
-import { ColDef, RowDef } from "./components/cpsl-table/table-interface";
 import { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface";
 export { AutocompleteTypes, IconType, TextFieldTypes } from "./interface";
 export { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface";
 export { DropdownInputEventDetail } from "./components/cpsl-dropdown/dropdown-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface";
 export { TabClickEventDetail } from "./components/cpsl-tab/tab-interface";
-export { ColDef, RowDef } from "./components/cpsl-table/table-interface";
 export { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface";
 export namespace Components {
     interface CpslAlert {
@@ -49,6 +47,10 @@ export namespace Components {
           * The position of the drawer. Default is `fixed`.
          */
         "position"?: 'fixed' | 'static';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
     }
     interface CpslAvatar {
         /**
@@ -65,6 +67,10 @@ export namespace Components {
         "variant"?: 'round' | 'square';
     }
     interface CpslButton {
+        /**
+          * The tag for the button. Options are: `"button"`, `"a". Default is: `"button"`.
+         */
+        "as"?: 'button' | 'a';
         /**
           * If the button is disabled. Default is: false.
          */
@@ -73,14 +79,22 @@ export namespace Components {
           * Whether the button takes the full width of it's container. Default is: false.
          */
         "fullWidth"?: boolean;
+        /**
+          * href to use when using a link.
+         */
+        "href"?: string;
         /**
           * The size of the button. Options are: `"small"`, `"medium". Default is: `"medium"`.
          */
         "size"?: 'small' | 'medium';
         /**
-          * The variant of the button. Options are: `"primary"`, `"secondary", `"icon". Default is: `"primary"`.
+          * target to use when using a link.
+         */
+        "target"?: string;
+        /**
+          * The variant of the button. Options are: `"primary"`, `"secondary", `"icon", `"text"`. Default is: `"primary"`.
          */
-        "variant"?: 'primary' | 'secondary' | 'icon';
+        "variant"?: 'primary' | 'secondary' | 'ghost' | 'destructive';
     }
     interface CpslButtonGroup {
         /**
@@ -223,6 +237,14 @@ export namespace Components {
           * Side from which the drawer will enter from.
          */
         "anchor": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Starting anchor position.
+         */
+        "anchorPosition"?: number;
+        /**
+          * Hides the overlay for temporary drawers.
+         */
+        "noOverlay"?: boolean;
         /**
           * Whether the drawer is open or not.
          */
@@ -230,7 +252,7 @@ export namespace Components {
         /**
           * Size (height or width) of the drawer.
          */
-        "size": number;
+        "size": number | 'auto';
         /**
           * Duration in seconds of the open/close animation. Default is 0.15.
          */
@@ -243,6 +265,10 @@ export namespace Components {
           * The variant of the drawer. `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation. Default is `temporary`.
          */
         "variant"?: 'temporary' | 'permanent';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
     }
     interface CpslDropdown {
         /**
@@ -262,6 +288,44 @@ export namespace Components {
          */
         "width": string;
     }
+    interface CpslFileUpload {
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Filename for the external source of the selected file.
+         */
+        "externalFilename"?: string;
+        /**
+          * External source for the selected file.
+         */
+        "externalSrc"?: string;
+        /**
+          * Valid file types.
+         */
+        "fileTypes"?: string[];
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel": boolean;
+        /**
+          * Function to trigger file upload to server. Returns: boolean indicating success or failure.
+         */
+        "uploadFile"?: (file: File) => Promise<boolean>;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -424,6 +488,32 @@ export namespace Components {
          */
         "zIndexOverride"?: number;
     }
+    interface CpslModalV2 {
+        /**
+          * Whether or not to show the modal with a box shadow.
+         */
+        "elevated": boolean;
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "noOverlay": boolean;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open": boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
     interface CpslNavButtonGroup {
         /**
           * The id of the selected button.
@@ -468,6 +558,48 @@ export namespace Components {
          */
         "text": string;
     }
+    interface CpslPopover {
+        /**
+          * Vertical anchor origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "anchorOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical anchor origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "anchorOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * If `true` the container will use the width of the content, else it will be set to the width of the trigger. Default is `true`
+         */
+        "autoWidth"?: boolean;
+        /**
+          * Call to close the popover manually.
+         */
+        "closePopover": () => Promise<void>;
+        /**
+          * Used internally to prevent select from blurring unintentionally.
+         */
+        "preventBlur": boolean;
+        /**
+          * Vertical transformation origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "transformOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical transformation origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "transformOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * ID for the element that triggers the popover to open.
+         */
+        "trigger": string;
+        /**
+          * Which trigger causes the popover to open. Options are: `"click"`, `"hover"`. Default is: `"click"`.
+         */
+        "triggerAction": 'click' | 'hover';
+        /**
+          * Padding from edge of window for the popover container.
+         */
+        "windowPadding"?: number;
+    }
     interface CpslProgressIndicator {
         /**
           * Current zero based step.
@@ -500,6 +632,66 @@ export namespace Components {
     }
     interface CpslRow {
     }
+    interface CpslSelect {
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * Set the max height of the dropdown.
+         */
+        "dropdownMaxHeight"?: number;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Format value for display when selected.
+         */
+        "formatValue"?: (value: string) => string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * ID of the element, must be unique for the popover trigger.
+         */
+        "id": string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Placeholder to display if `selectedValue` is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * Value of the selected item.
+         */
+        "selectedValue"?: string;
+        /**
+          * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.
+         */
+        "showFormattedSelectedItem"?: boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel": boolean;
+    }
+    interface CpslSelectItem {
+        /**
+          * Whether the item is selected or not.
+         */
+        "selected"?: boolean;
+        /**
+          * Value of the item.
+         */
+        "value": string;
+    }
     interface CpslSlideButton {
         /**
           * Whether or not the component is disabled. If true, the component will display the `startText`.
@@ -549,14 +741,6 @@ export namespace Components {
         "tab": string;
     }
     interface CpslTable {
-        /**
-          * Columns for the table.
-         */
-        "columns": ColDef[];
-        /**
-          * Data rows for the table.
-         */
-        "rows": RowDef[];
     }
     interface CpslTabs {
         /**
@@ -570,9 +754,9 @@ export namespace Components {
     }
     interface CpslText {
         /**
-          * The color of text. Options are: `"primary"`, `"secondary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+          * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
          */
-        "color"?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error';
+        "color"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error';
         /**
           * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
          */
@@ -605,6 +789,10 @@ export interface CpslDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslDropdownElement;
 }
+export interface CpslFileUploadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslFileUploadElement;
+}
 export interface CpslInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslInputElement;
@@ -613,14 +801,30 @@ export interface CpslModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslModalElement;
 }
+export interface CpslModalV2CustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslModalV2Element;
+}
 export interface CpslPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslPaginationElement;
 }
+export interface CpslPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslPopoverElement;
+}
 export interface CpslRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslRadioElement;
 }
+export interface CpslSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSelectElement;
+}
+export interface CpslSelectItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSelectItemElement;
+}
 export interface CpslSlideButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslSlideButtonElement;
@@ -749,6 +953,27 @@ declare global {
         prototype: HTMLCpslDropdownElement;
         new (): HTMLCpslDropdownElement;
     };
+    interface HTMLCpslFileUploadElementEventMap {
+        "cpslOnDrop": DragEvent;
+        "cpslOnDragEnter": DragEvent;
+        "cpslOnDragLeave": DragEvent;
+        "cpslFileChange": File;
+        "cpslFileRemoved": void;
+    }
+    interface HTMLCpslFileUploadElement extends Components.CpslFileUpload, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslFileUploadElementEventMap>(type: K, listener: (this: HTMLCpslFileUploadElement, ev: CpslFileUploadCustomEvent<HTMLCpslFileUploadElementEventMap[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 HTMLCpslFileUploadElementEventMap>(type: K, listener: (this: HTMLCpslFileUploadElement, ev: CpslFileUploadCustomEvent<HTMLCpslFileUploadElementEventMap[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 HTMLCpslFileUploadElement: {
+        prototype: HTMLCpslFileUploadElement;
+        new (): HTMLCpslFileUploadElement;
+    };
     interface HTMLCpslGridElement extends Components.CpslGrid, HTMLStencilElement {
     }
     var HTMLCpslGridElement: {
@@ -809,6 +1034,26 @@ declare global {
         prototype: HTMLCpslModalElement;
         new (): HTMLCpslModalElement;
     };
+    interface HTMLCpslModalV2ElementEventMap {
+        "cpslModalEntering": null;
+        "cpslModalEntered": null;
+        "cpslModalExiting": null;
+        "cpslModalExited": null;
+    }
+    interface HTMLCpslModalV2Element extends Components.CpslModalV2, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslModalV2ElementEventMap>(type: K, listener: (this: HTMLCpslModalV2Element, ev: CpslModalV2CustomEvent<HTMLCpslModalV2ElementEventMap[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 HTMLCpslModalV2ElementEventMap>(type: K, listener: (this: HTMLCpslModalV2Element, ev: CpslModalV2CustomEvent<HTMLCpslModalV2ElementEventMap[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 HTMLCpslModalV2Element: {
+        prototype: HTMLCpslModalV2Element;
+        new (): HTMLCpslModalV2Element;
+    };
     interface HTMLCpslNavButtonGroupElement extends Components.CpslNavButtonGroup, HTMLStencilElement {
     }
     var HTMLCpslNavButtonGroupElement: {
@@ -844,6 +1089,24 @@ declare global {
         prototype: HTMLCpslPillElement;
         new (): HTMLCpslPillElement;
     };
+    interface HTMLCpslPopoverElementEventMap {
+        "cpslOpen": void;
+        "cpslClose": void;
+    }
+    interface HTMLCpslPopoverElement extends Components.CpslPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslPopoverElementEventMap>(type: K, listener: (this: HTMLCpslPopoverElement, ev: CpslPopoverCustomEvent<HTMLCpslPopoverElementEventMap[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 HTMLCpslPopoverElementEventMap>(type: K, listener: (this: HTMLCpslPopoverElement, ev: CpslPopoverCustomEvent<HTMLCpslPopoverElementEventMap[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 HTMLCpslPopoverElement: {
+        prototype: HTMLCpslPopoverElement;
+        new (): HTMLCpslPopoverElement;
+    };
     interface HTMLCpslProgressIndicatorElement extends Components.CpslProgressIndicator, HTMLStencilElement {
     }
     var HTMLCpslProgressIndicatorElement: {
@@ -879,6 +1142,42 @@ declare global {
         prototype: HTMLCpslRowElement;
         new (): HTMLCpslRowElement;
     };
+    interface HTMLCpslSelectElementEventMap {
+        "cpslBlur": FocusEvent;
+        "cpslFocus": FocusEvent;
+        "cpslSelectValueChange": string;
+    }
+    interface HTMLCpslSelectElement extends Components.CpslSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSelectElementEventMap>(type: K, listener: (this: HTMLCpslSelectElement, ev: CpslSelectCustomEvent<HTMLCpslSelectElementEventMap[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 HTMLCpslSelectElementEventMap>(type: K, listener: (this: HTMLCpslSelectElement, ev: CpslSelectCustomEvent<HTMLCpslSelectElementEventMap[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 HTMLCpslSelectElement: {
+        prototype: HTMLCpslSelectElement;
+        new (): HTMLCpslSelectElement;
+    };
+    interface HTMLCpslSelectItemElementEventMap {
+        "cpslSelectItemClick": string;
+    }
+    interface HTMLCpslSelectItemElement extends Components.CpslSelectItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSelectItemElementEventMap>(type: K, listener: (this: HTMLCpslSelectItemElement, ev: CpslSelectItemCustomEvent<HTMLCpslSelectItemElementEventMap[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 HTMLCpslSelectItemElementEventMap>(type: K, listener: (this: HTMLCpslSelectItemElement, ev: CpslSelectItemCustomEvent<HTMLCpslSelectItemElementEventMap[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 HTMLCpslSelectItemElement: {
+        prototype: HTMLCpslSelectItemElement;
+        new (): HTMLCpslSelectItemElement;
+    };
     interface HTMLCpslSlideButtonElementEventMap {
         "cpslComplete": boolean;
     }
@@ -986,19 +1285,24 @@ declare global {
         "cpsl-divider": HTMLCpslDividerElement;
         "cpsl-drawer": HTMLCpslDrawerElement;
         "cpsl-dropdown": HTMLCpslDropdownElement;
+        "cpsl-file-upload": HTMLCpslFileUploadElement;
         "cpsl-grid": HTMLCpslGridElement;
         "cpsl-icon": HTMLCpslIconElement;
         "cpsl-info-box": HTMLCpslInfoBoxElement;
         "cpsl-input": HTMLCpslInputElement;
         "cpsl-modal": HTMLCpslModalElement;
+        "cpsl-modal-v2": HTMLCpslModalV2Element;
         "cpsl-nav-button-group": HTMLCpslNavButtonGroupElement;
         "cpsl-overlay": HTMLCpslOverlayElement;
         "cpsl-pagination": HTMLCpslPaginationElement;
         "cpsl-pill": HTMLCpslPillElement;
+        "cpsl-popover": HTMLCpslPopoverElement;
         "cpsl-progress-indicator": HTMLCpslProgressIndicatorElement;
         "cpsl-qr-code": HTMLCpslQrCodeElement;
         "cpsl-radio": HTMLCpslRadioElement;
         "cpsl-row": HTMLCpslRowElement;
+        "cpsl-select": HTMLCpslSelectElement;
+        "cpsl-select-item": HTMLCpslSelectItemElement;
         "cpsl-slide-button": HTMLCpslSlideButtonElement;
         "cpsl-spinner": HTMLCpslSpinnerElement;
         "cpsl-switch": HTMLCpslSwitchElement;
@@ -1035,6 +1339,10 @@ declare namespace LocalJSX {
           * The position of the drawer. Default is `fixed`.
          */
         "position"?: 'fixed' | 'static';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
     }
     interface CpslAvatar {
         /**
@@ -1051,6 +1359,10 @@ declare namespace LocalJSX {
         "variant"?: 'round' | 'square';
     }
     interface CpslButton {
+        /**
+          * The tag for the button. Options are: `"button"`, `"a". Default is: `"button"`.
+         */
+        "as"?: 'button' | 'a';
         /**
           * If the button is disabled. Default is: false.
          */
@@ -1059,14 +1371,22 @@ declare namespace LocalJSX {
           * Whether the button takes the full width of it's container. Default is: false.
          */
         "fullWidth"?: boolean;
+        /**
+          * href to use when using a link.
+         */
+        "href"?: string;
         /**
           * The size of the button. Options are: `"small"`, `"medium". Default is: `"medium"`.
          */
         "size"?: 'small' | 'medium';
         /**
-          * The variant of the button. Options are: `"primary"`, `"secondary", `"icon". Default is: `"primary"`.
+          * target to use when using a link.
+         */
+        "target"?: string;
+        /**
+          * The variant of the button. Options are: `"primary"`, `"secondary", `"icon", `"text"`. Default is: `"primary"`.
          */
-        "variant"?: 'primary' | 'secondary' | 'icon';
+        "variant"?: 'primary' | 'secondary' | 'ghost' | 'destructive';
     }
     interface CpslButtonGroup {
         /**
@@ -1217,6 +1537,14 @@ declare namespace LocalJSX {
           * Side from which the drawer will enter from.
          */
         "anchor"?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Starting anchor position.
+         */
+        "anchorPosition"?: number;
+        /**
+          * Hides the overlay for temporary drawers.
+         */
+        "noOverlay"?: boolean;
         /**
           * Whether the drawer is open or not.
          */
@@ -1224,7 +1552,7 @@ declare namespace LocalJSX {
         /**
           * Size (height or width) of the drawer.
          */
-        "size"?: number;
+        "size"?: number | 'auto';
         /**
           * Duration in seconds of the open/close animation. Default is 0.15.
          */
@@ -1237,6 +1565,10 @@ declare namespace LocalJSX {
           * The variant of the drawer. `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation. Default is `temporary`.
          */
         "variant"?: 'temporary' | 'permanent';
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
     }
     interface CpslDropdown {
         /**
@@ -1260,6 +1592,64 @@ declare namespace LocalJSX {
          */
         "width"?: string;
     }
+    interface CpslFileUpload {
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Filename for the external source of the selected file.
+         */
+        "externalFilename"?: string;
+        /**
+          * External source for the selected file.
+         */
+        "externalSrc"?: string;
+        /**
+          * Valid file types.
+         */
+        "fileTypes"?: string[];
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Emitted when the file changes.
+         */
+        "onCpslFileChange"?: (event: CpslFileUploadCustomEvent<File>) => void;
+        /**
+          * Emitted when the file is removed.
+         */
+        "onCpslFileRemoved"?: (event: CpslFileUploadCustomEvent<void>) => void;
+        /**
+          * Emitted when the file drag enters the input.
+         */
+        "onCpslOnDragEnter"?: (event: CpslFileUploadCustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the file drag leaves the input.
+         */
+        "onCpslOnDragLeave"?: (event: CpslFileUploadCustomEvent<DragEvent>) => void;
+        /**
+          * Emitted when the file is dropped in the input.
+         */
+        "onCpslOnDrop"?: (event: CpslFileUploadCustomEvent<DragEvent>) => void;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel"?: boolean;
+        /**
+          * Function to trigger file upload to server. Returns: boolean indicating success or failure.
+         */
+        "uploadFile"?: (file: File) => Promise<boolean>;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -1462,6 +1852,48 @@ declare namespace LocalJSX {
          */
         "zIndexOverride"?: number;
     }
+    interface CpslModalV2 {
+        /**
+          * Whether or not to show the modal with a box shadow.
+         */
+        "elevated"?: boolean;
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Emitted when enter animation finishes.
+         */
+        "onCpslModalEntered"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Emitted when enter animation starts.
+         */
+        "onCpslModalEntering"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslModalExited"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation starts.
+         */
+        "onCpslModalExiting"?: (event: CpslModalV2CustomEvent<null>) => void;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open"?: boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
     interface CpslNavButtonGroup {
         /**
           * The id of the selected button.
@@ -1510,6 +1942,52 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    interface CpslPopover {
+        /**
+          * Vertical anchor origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "anchorOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical anchor origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "anchorOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * If `true` the container will use the width of the content, else it will be set to the width of the trigger. Default is `true`
+         */
+        "autoWidth"?: boolean;
+        /**
+          * Emitted when the popover closes.
+         */
+        "onCpslClose"?: (event: CpslPopoverCustomEvent<void>) => void;
+        /**
+          * Emitted when the popover opens.
+         */
+        "onCpslOpen"?: (event: CpslPopoverCustomEvent<void>) => void;
+        /**
+          * Used internally to prevent select from blurring unintentionally.
+         */
+        "preventBlur"?: boolean;
+        /**
+          * Vertical transformation origin. Options are: `"left"`, `"center"`, `"right"`. Default is: `"left"`.
+         */
+        "transformOriginHorizontal"?: 'left' | 'center' | 'right';
+        /**
+          * Vertical transformation origin. Options are: `"top"`, `"center"`, `"bottom"`. Default is: `"bottom"`.
+         */
+        "transformOriginVertical"?: 'top' | 'center' | 'bottom';
+        /**
+          * ID for the element that triggers the popover to open.
+         */
+        "trigger"?: string;
+        /**
+          * Which trigger causes the popover to open. Options are: `"click"`, `"hover"`. Default is: `"click"`.
+         */
+        "triggerAction"?: 'click' | 'hover';
+        /**
+          * Padding from edge of window for the popover container.
+         */
+        "windowPadding"?: number;
+    }
     interface CpslProgressIndicator {
         /**
           * Current zero based step.
@@ -1546,6 +2024,78 @@ declare namespace LocalJSX {
     }
     interface CpslRow {
     }
+    interface CpslSelect {
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set the max height of the dropdown.
+         */
+        "dropdownMaxHeight"?: number;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Format value for display when selected.
+         */
+        "formatValue"?: (value: string) => string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * ID of the element, must be unique for the popover trigger.
+         */
+        "id"?: string;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onCpslBlur"?: (event: CpslSelectCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onCpslFocus"?: (event: CpslSelectCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value changes.
+         */
+        "onCpslSelectValueChange"?: (event: CpslSelectCustomEvent<string>) => void;
+        /**
+          * Placeholder to display if `selectedValue` is empty.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * Value of the selected item.
+         */
+        "selectedValue"?: string;
+        /**
+          * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.
+         */
+        "showFormattedSelectedItem"?: boolean;
+        /**
+          * If `true`, the label will display an "optional" tag.
+         */
+        "showOptionalLabel"?: boolean;
+    }
+    interface CpslSelectItem {
+        /**
+          * Whether the item is selected or not.
+         */
+        "selected"?: boolean;
+        /**
+          * Value of the item.
+         */
+        "value"?: string;
+    }
     interface CpslSlideButton {
         /**
           * Whether or not the component is disabled. If true, the component will display the `startText`.
@@ -1603,14 +2153,6 @@ declare namespace LocalJSX {
         "tab"?: string;
     }
     interface CpslTable {
-        /**
-          * Columns for the table.
-         */
-        "columns"?: ColDef[];
-        /**
-          * Data rows for the table.
-         */
-        "rows"?: RowDef[];
     }
     interface CpslTabs {
         /**
@@ -1628,9 +2170,9 @@ declare namespace LocalJSX {
     }
     interface CpslText {
         /**
-          * The color of text. Options are: `"primary"`, `"secondary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+          * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
          */
-        "color"?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error';
+        "color"?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error';
         /**
           * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
          */
@@ -1664,19 +2206,24 @@ declare namespace LocalJSX {
         "cpsl-divider": CpslDivider;
         "cpsl-drawer": CpslDrawer;
         "cpsl-dropdown": CpslDropdown;
+        "cpsl-file-upload": CpslFileUpload;
         "cpsl-grid": CpslGrid;
         "cpsl-icon": CpslIcon;
         "cpsl-info-box": CpslInfoBox;
         "cpsl-input": CpslInput;
         "cpsl-modal": CpslModal;
+        "cpsl-modal-v2": CpslModalV2;
         "cpsl-nav-button-group": CpslNavButtonGroup;
         "cpsl-overlay": CpslOverlay;
         "cpsl-pagination": CpslPagination;
         "cpsl-pill": CpslPill;
+        "cpsl-popover": CpslPopover;
         "cpsl-progress-indicator": CpslProgressIndicator;
         "cpsl-qr-code": CpslQrCode;
         "cpsl-radio": CpslRadio;
         "cpsl-row": CpslRow;
+        "cpsl-select": CpslSelect;
+        "cpsl-select-item": CpslSelectItem;
         "cpsl-slide-button": CpslSlideButton;
         "cpsl-spinner": CpslSpinner;
         "cpsl-switch": CpslSwitch;
@@ -1704,19 +2251,24 @@ declare module "@stencil/core" {
             "cpsl-divider": LocalJSX.CpslDivider & JSXBase.HTMLAttributes<HTMLCpslDividerElement>;
             "cpsl-drawer": LocalJSX.CpslDrawer & JSXBase.HTMLAttributes<HTMLCpslDrawerElement>;
             "cpsl-dropdown": LocalJSX.CpslDropdown & JSXBase.HTMLAttributes<HTMLCpslDropdownElement>;
+            "cpsl-file-upload": LocalJSX.CpslFileUpload & JSXBase.HTMLAttributes<HTMLCpslFileUploadElement>;
             "cpsl-grid": LocalJSX.CpslGrid & JSXBase.HTMLAttributes<HTMLCpslGridElement>;
             "cpsl-icon": LocalJSX.CpslIcon & JSXBase.HTMLAttributes<HTMLCpslIconElement>;
             "cpsl-info-box": LocalJSX.CpslInfoBox & JSXBase.HTMLAttributes<HTMLCpslInfoBoxElement>;
             "cpsl-input": LocalJSX.CpslInput & JSXBase.HTMLAttributes<HTMLCpslInputElement>;
             "cpsl-modal": LocalJSX.CpslModal & JSXBase.HTMLAttributes<HTMLCpslModalElement>;
+            "cpsl-modal-v2": LocalJSX.CpslModalV2 & JSXBase.HTMLAttributes<HTMLCpslModalV2Element>;
             "cpsl-nav-button-group": LocalJSX.CpslNavButtonGroup & JSXBase.HTMLAttributes<HTMLCpslNavButtonGroupElement>;
             "cpsl-overlay": LocalJSX.CpslOverlay & JSXBase.HTMLAttributes<HTMLCpslOverlayElement>;
             "cpsl-pagination": LocalJSX.CpslPagination & JSXBase.HTMLAttributes<HTMLCpslPaginationElement>;
             "cpsl-pill": LocalJSX.CpslPill & JSXBase.HTMLAttributes<HTMLCpslPillElement>;
+            "cpsl-popover": LocalJSX.CpslPopover & JSXBase.HTMLAttributes<HTMLCpslPopoverElement>;
             "cpsl-progress-indicator": LocalJSX.CpslProgressIndicator & JSXBase.HTMLAttributes<HTMLCpslProgressIndicatorElement>;
             "cpsl-qr-code": LocalJSX.CpslQrCode & JSXBase.HTMLAttributes<HTMLCpslQrCodeElement>;
             "cpsl-radio": LocalJSX.CpslRadio & JSXBase.HTMLAttributes<HTMLCpslRadioElement>;
             "cpsl-row": LocalJSX.CpslRow & JSXBase.HTMLAttributes<HTMLCpslRowElement>;
+            "cpsl-select": LocalJSX.CpslSelect & JSXBase.HTMLAttributes<HTMLCpslSelectElement>;
+            "cpsl-select-item": LocalJSX.CpslSelectItem & JSXBase.HTMLAttributes<HTMLCpslSelectItemElement>;
             "cpsl-slide-button": LocalJSX.CpslSlideButton & JSXBase.HTMLAttributes<HTMLCpslSlideButtonElement>;
             "cpsl-spinner": LocalJSX.CpslSpinner & JSXBase.HTMLAttributes<HTMLCpslSpinnerElement>;
             "cpsl-switch": LocalJSX.CpslSwitch & JSXBase.HTMLAttributes<HTMLCpslSwitchElement>;