@usecapsule/core-components 2.0.9 → 3.0.1

package/dist/types/components.d.ts

@@ -10,12 +10,14 @@ 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 {
@@ -24,9 +26,9 @@ export namespace Components {
          */
         "icon"?: IconType;
         /**
-          * The type of alert. Options are: `"error"` Default is: `"error"`.
+          * The variant of alert. Options are: `"error"` | `"warning"` | `"success"` | `"custom"` Default is: `"error"`.
          */
-        "type"?: 'error';
+        "variant"?: 'error' | 'warning' | 'success' | 'custom';
     }
     interface CpslAnimation {
         /**
@@ -38,16 +40,62 @@ export namespace Components {
          */
         "src": string;
     }
+    interface CpslAppBar {
+        /**
+          * Height of the app bar.
+         */
+        "height": number;
+        /**
+          * The position of the drawer. Default is `fixed`.
+         */
+        "position"?: 'fixed' | 'static';
+    }
+    interface CpslAvatar {
+        /**
+          * The alternate text for the avatar image.
+         */
+        "alt"?: string;
+        /**
+          * The source of the avatar image.
+         */
+        "src": string;
+        /**
+          * The variant of the avatar. Options are: `"round"`, `"square". Default is: `"square"`.
+         */
+        "variant"?: 'round' | 'square';
+    }
     interface CpslButton {
         /**
           * If the button is disabled. Default is: false.
          */
         "disabled"?: boolean;
         /**
-          * The variant of button. Options are: `"primary"`, `"secondary", `"icon". Default is: `"primary"`.
+          * Whether the button takes the full width of it's container. Default is: false.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * 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"`.
          */
         "variant"?: 'primary' | 'secondary' | 'icon';
     }
+    interface CpslButtonGroup {
+        /**
+          * The id of the selected button.
+         */
+        "selectedId"?: string;
+    }
+    interface CpslCard {
+    }
+    interface CpslCheckbox {
+        /**
+          * Whether or not the checkbox is checked.
+         */
+        "checked": boolean;
+    }
     interface CpslCodeInput {
         /**
           * Value of the code.
@@ -170,6 +218,32 @@ export namespace Components {
     }
     interface CpslDivider {
     }
+    interface CpslDrawer {
+        /**
+          * Side from which the drawer will enter from.
+         */
+        "anchor": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Whether the drawer is open or not.
+         */
+        "open": boolean;
+        /**
+          * Size (height or width) of the drawer.
+         */
+        "size": number;
+        /**
+          * Duration in seconds of the open/close animation. Default is 0.15.
+         */
+        "transitionDuration"?: number;
+        /**
+          * Transition timing function to use. Default is ease-in-out.
+         */
+        "transitionFunction"?: string;
+        /**
+          * 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';
+    }
     interface CpslDropdown {
         /**
           * Whether or not to include search capability
@@ -291,6 +365,10 @@ export namespace Components {
           * 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;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -341,6 +419,16 @@ export namespace Components {
           * Whether or not to show the modal.
          */
         "open": boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslNavButtonGroup {
+        /**
+          * The id of the selected button.
+         */
+        "selectedId"?: string;
     }
     interface CpslOverlay {
         /**
@@ -355,6 +443,24 @@ export namespace Components {
           * Whether or not to show the overlay.
          */
         "open": boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslPagination {
+        /**
+          * The initial page to select. Default is 0.
+         */
+        "initialPage"?: number;
+        /**
+          * The total number of pages.
+         */
+        "totalPages": number;
+        /**
+          * The number of pages visible to select. Default is 5. Min is 5.
+         */
+        "visiblePages"?: number;
     }
     interface CpslPill {
         /**
@@ -386,6 +492,12 @@ export namespace Components {
          */
         "url": string;
     }
+    interface CpslRadio {
+        /**
+          * Whether or not the radio is checked.
+         */
+        "checked": boolean;
+    }
     interface CpslRow {
     }
     interface CpslSlideButton {
@@ -420,6 +532,12 @@ export namespace Components {
          */
         "speed"?: number;
     }
+    interface CpslSwitch {
+        /**
+          * Whether or not the switch is checked.
+         */
+        "checked": boolean;
+    }
     interface CpslTab {
         /**
           * The selected tab component
@@ -430,6 +548,16 @@ export namespace Components {
          */
         "tab": string;
     }
+    interface CpslTable {
+        /**
+          * Columns for the table.
+         */
+        "columns": ColDef[];
+        /**
+          * Data rows for the table.
+         */
+        "rows": RowDef[];
+    }
     interface CpslTabs {
         /**
           * Whether or not the tabs take the full width of their container.
@@ -465,6 +593,10 @@ export namespace Components {
         "src"?: string;
     }
 }
+export interface CpslCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslCheckboxElement;
+}
 export interface CpslCodeInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslCodeInputElement;
@@ -481,10 +613,22 @@ export interface CpslModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslModalElement;
 }
+export interface CpslPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslPaginationElement;
+}
+export interface CpslRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslRadioElement;
+}
 export interface CpslSlideButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslSlideButtonElement;
 }
+export interface CpslSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSwitchElement;
+}
 export interface CpslTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslTabElement;
@@ -506,12 +650,53 @@ declare global {
         prototype: HTMLCpslAnimationElement;
         new (): HTMLCpslAnimationElement;
     };
+    interface HTMLCpslAppBarElement extends Components.CpslAppBar, HTMLStencilElement {
+    }
+    var HTMLCpslAppBarElement: {
+        prototype: HTMLCpslAppBarElement;
+        new (): HTMLCpslAppBarElement;
+    };
+    interface HTMLCpslAvatarElement extends Components.CpslAvatar, HTMLStencilElement {
+    }
+    var HTMLCpslAvatarElement: {
+        prototype: HTMLCpslAvatarElement;
+        new (): HTMLCpslAvatarElement;
+    };
     interface HTMLCpslButtonElement extends Components.CpslButton, HTMLStencilElement {
     }
     var HTMLCpslButtonElement: {
         prototype: HTMLCpslButtonElement;
         new (): HTMLCpslButtonElement;
     };
+    interface HTMLCpslButtonGroupElement extends Components.CpslButtonGroup, HTMLStencilElement {
+    }
+    var HTMLCpslButtonGroupElement: {
+        prototype: HTMLCpslButtonGroupElement;
+        new (): HTMLCpslButtonGroupElement;
+    };
+    interface HTMLCpslCardElement extends Components.CpslCard, HTMLStencilElement {
+    }
+    var HTMLCpslCardElement: {
+        prototype: HTMLCpslCardElement;
+        new (): HTMLCpslCardElement;
+    };
+    interface HTMLCpslCheckboxElementEventMap {
+        "cpslCheckboxChanged": boolean;
+    }
+    interface HTMLCpslCheckboxElement extends Components.CpslCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslCheckboxElementEventMap>(type: K, listener: (this: HTMLCpslCheckboxElement, ev: CpslCheckboxCustomEvent<HTMLCpslCheckboxElementEventMap[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 HTMLCpslCheckboxElementEventMap>(type: K, listener: (this: HTMLCpslCheckboxElement, ev: CpslCheckboxCustomEvent<HTMLCpslCheckboxElementEventMap[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 HTMLCpslCheckboxElement: {
+        prototype: HTMLCpslCheckboxElement;
+        new (): HTMLCpslCheckboxElement;
+    };
     interface HTMLCpslCodeInputElementEventMap {
         "cpslInput": CodeChangeEventDetail;
     }
@@ -541,6 +726,12 @@ declare global {
         prototype: HTMLCpslDividerElement;
         new (): HTMLCpslDividerElement;
     };
+    interface HTMLCpslDrawerElement extends Components.CpslDrawer, HTMLStencilElement {
+    }
+    var HTMLCpslDrawerElement: {
+        prototype: HTMLCpslDrawerElement;
+        new (): HTMLCpslDrawerElement;
+    };
     interface HTMLCpslDropdownElementEventMap {
         "selectedItemChange": DropdownInputEventDetail;
     }
@@ -618,12 +809,35 @@ declare global {
         prototype: HTMLCpslModalElement;
         new (): HTMLCpslModalElement;
     };
+    interface HTMLCpslNavButtonGroupElement extends Components.CpslNavButtonGroup, HTMLStencilElement {
+    }
+    var HTMLCpslNavButtonGroupElement: {
+        prototype: HTMLCpslNavButtonGroupElement;
+        new (): HTMLCpslNavButtonGroupElement;
+    };
     interface HTMLCpslOverlayElement extends Components.CpslOverlay, HTMLStencilElement {
     }
     var HTMLCpslOverlayElement: {
         prototype: HTMLCpslOverlayElement;
         new (): HTMLCpslOverlayElement;
     };
+    interface HTMLCpslPaginationElementEventMap {
+        "cpslPaginationChanged": number;
+    }
+    interface HTMLCpslPaginationElement extends Components.CpslPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslPaginationElementEventMap>(type: K, listener: (this: HTMLCpslPaginationElement, ev: CpslPaginationCustomEvent<HTMLCpslPaginationElementEventMap[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 HTMLCpslPaginationElementEventMap>(type: K, listener: (this: HTMLCpslPaginationElement, ev: CpslPaginationCustomEvent<HTMLCpslPaginationElementEventMap[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 HTMLCpslPaginationElement: {
+        prototype: HTMLCpslPaginationElement;
+        new (): HTMLCpslPaginationElement;
+    };
     interface HTMLCpslPillElement extends Components.CpslPill, HTMLStencilElement {
     }
     var HTMLCpslPillElement: {
@@ -642,6 +856,23 @@ declare global {
         prototype: HTMLCpslQrCodeElement;
         new (): HTMLCpslQrCodeElement;
     };
+    interface HTMLCpslRadioElementEventMap {
+        "cpslRadioChanged": boolean;
+    }
+    interface HTMLCpslRadioElement extends Components.CpslRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslRadioElementEventMap>(type: K, listener: (this: HTMLCpslRadioElement, ev: CpslRadioCustomEvent<HTMLCpslRadioElementEventMap[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 HTMLCpslRadioElementEventMap>(type: K, listener: (this: HTMLCpslRadioElement, ev: CpslRadioCustomEvent<HTMLCpslRadioElementEventMap[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 HTMLCpslRadioElement: {
+        prototype: HTMLCpslRadioElement;
+        new (): HTMLCpslRadioElement;
+    };
     interface HTMLCpslRowElement extends Components.CpslRow, HTMLStencilElement {
     }
     var HTMLCpslRowElement: {
@@ -671,6 +902,23 @@ declare global {
         prototype: HTMLCpslSpinnerElement;
         new (): HTMLCpslSpinnerElement;
     };
+    interface HTMLCpslSwitchElementEventMap {
+        "cpslSwitchChanged": boolean;
+    }
+    interface HTMLCpslSwitchElement extends Components.CpslSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSwitchElementEventMap>(type: K, listener: (this: HTMLCpslSwitchElement, ev: CpslSwitchCustomEvent<HTMLCpslSwitchElementEventMap[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 HTMLCpslSwitchElementEventMap>(type: K, listener: (this: HTMLCpslSwitchElement, ev: CpslSwitchCustomEvent<HTMLCpslSwitchElementEventMap[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 HTMLCpslSwitchElement: {
+        prototype: HTMLCpslSwitchElement;
+        new (): HTMLCpslSwitchElement;
+    };
     interface HTMLCpslTabElementEventMap {
         "cpslTabButtonClick": TabClickEventDetail;
     }
@@ -688,6 +936,12 @@ declare global {
         prototype: HTMLCpslTabElement;
         new (): HTMLCpslTabElement;
     };
+    interface HTMLCpslTableElement extends Components.CpslTable, HTMLStencilElement {
+    }
+    var HTMLCpslTableElement: {
+        prototype: HTMLCpslTableElement;
+        new (): HTMLCpslTableElement;
+    };
     interface HTMLCpslTabsElementEventMap {
         "cpslTabsChanged": TabsChangedEventDetail;
         "cpslTabsInit": TabsChangedEventDetail;
@@ -721,24 +975,35 @@ declare global {
     interface HTMLElementTagNameMap {
         "cpsl-alert": HTMLCpslAlertElement;
         "cpsl-animation": HTMLCpslAnimationElement;
+        "cpsl-app-bar": HTMLCpslAppBarElement;
+        "cpsl-avatar": HTMLCpslAvatarElement;
         "cpsl-button": HTMLCpslButtonElement;
+        "cpsl-button-group": HTMLCpslButtonGroupElement;
+        "cpsl-card": HTMLCpslCardElement;
+        "cpsl-checkbox": HTMLCpslCheckboxElement;
         "cpsl-code-input": HTMLCpslCodeInputElement;
         "cpsl-col": HTMLCpslColElement;
         "cpsl-divider": HTMLCpslDividerElement;
+        "cpsl-drawer": HTMLCpslDrawerElement;
         "cpsl-dropdown": HTMLCpslDropdownElement;
         "cpsl-grid": HTMLCpslGridElement;
         "cpsl-icon": HTMLCpslIconElement;
         "cpsl-info-box": HTMLCpslInfoBoxElement;
         "cpsl-input": HTMLCpslInputElement;
         "cpsl-modal": HTMLCpslModalElement;
+        "cpsl-nav-button-group": HTMLCpslNavButtonGroupElement;
         "cpsl-overlay": HTMLCpslOverlayElement;
+        "cpsl-pagination": HTMLCpslPaginationElement;
         "cpsl-pill": HTMLCpslPillElement;
         "cpsl-progress-indicator": HTMLCpslProgressIndicatorElement;
         "cpsl-qr-code": HTMLCpslQrCodeElement;
+        "cpsl-radio": HTMLCpslRadioElement;
         "cpsl-row": HTMLCpslRowElement;
         "cpsl-slide-button": HTMLCpslSlideButtonElement;
         "cpsl-spinner": HTMLCpslSpinnerElement;
+        "cpsl-switch": HTMLCpslSwitchElement;
         "cpsl-tab": HTMLCpslTabElement;
+        "cpsl-table": HTMLCpslTableElement;
         "cpsl-tabs": HTMLCpslTabsElement;
         "cpsl-text": HTMLCpslTextElement;
         "cpsl-tile-button": HTMLCpslTileButtonElement;
@@ -751,9 +1016,9 @@ declare namespace LocalJSX {
          */
         "icon"?: IconType;
         /**
-          * The type of alert. Options are: `"error"` Default is: `"error"`.
+          * The variant of alert. Options are: `"error"` | `"warning"` | `"success"` | `"custom"` Default is: `"error"`.
          */
-        "type"?: 'error';
+        "variant"?: 'error' | 'warning' | 'success' | 'custom';
     }
     interface CpslAnimation {
         /**
@@ -761,16 +1026,66 @@ declare namespace LocalJSX {
          */
         "src"?: string;
     }
+    interface CpslAppBar {
+        /**
+          * Height of the app bar.
+         */
+        "height"?: number;
+        /**
+          * The position of the drawer. Default is `fixed`.
+         */
+        "position"?: 'fixed' | 'static';
+    }
+    interface CpslAvatar {
+        /**
+          * The alternate text for the avatar image.
+         */
+        "alt"?: string;
+        /**
+          * The source of the avatar image.
+         */
+        "src"?: string;
+        /**
+          * The variant of the avatar. Options are: `"round"`, `"square". Default is: `"square"`.
+         */
+        "variant"?: 'round' | 'square';
+    }
     interface CpslButton {
         /**
           * If the button is disabled. Default is: false.
          */
         "disabled"?: boolean;
         /**
-          * The variant of button. Options are: `"primary"`, `"secondary", `"icon". Default is: `"primary"`.
+          * Whether the button takes the full width of it's container. Default is: false.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * 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"`.
          */
         "variant"?: 'primary' | 'secondary' | 'icon';
     }
+    interface CpslButtonGroup {
+        /**
+          * The id of the selected button.
+         */
+        "selectedId"?: string;
+    }
+    interface CpslCard {
+    }
+    interface CpslCheckbox {
+        /**
+          * Whether or not the checkbox is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Emitted when the checkbox state changes.
+         */
+        "onCpslCheckboxChanged"?: (event: CpslCheckboxCustomEvent<boolean>) => void;
+    }
     interface CpslCodeInput {
         /**
           * Value of the code.
@@ -897,6 +1212,32 @@ declare namespace LocalJSX {
     }
     interface CpslDivider {
     }
+    interface CpslDrawer {
+        /**
+          * Side from which the drawer will enter from.
+         */
+        "anchor"?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Whether the drawer is open or not.
+         */
+        "open"?: boolean;
+        /**
+          * Size (height or width) of the drawer.
+         */
+        "size"?: number;
+        /**
+          * Duration in seconds of the open/close animation. Default is 0.15.
+         */
+        "transitionDuration"?: number;
+        /**
+          * Transition timing function to use. Default is ease-in-out.
+         */
+        "transitionFunction"?: string;
+        /**
+          * 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';
+    }
     interface CpslDropdown {
         /**
           * Whether or not to include search capability
@@ -1042,6 +1383,10 @@ declare namespace LocalJSX {
           * 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;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -1112,6 +1457,16 @@ declare namespace LocalJSX {
           * Whether or not to show the modal.
          */
         "open"?: boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslNavButtonGroup {
+        /**
+          * The id of the selected button.
+         */
+        "selectedId"?: string;
     }
     interface CpslOverlay {
         /**
@@ -1126,6 +1481,28 @@ declare namespace LocalJSX {
           * Whether or not to show the overlay.
          */
         "open"?: boolean;
+        /**
+          * Override z-index.
+         */
+        "zIndexOverride"?: number;
+    }
+    interface CpslPagination {
+        /**
+          * The initial page to select. Default is 0.
+         */
+        "initialPage"?: number;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslPaginationChanged"?: (event: CpslPaginationCustomEvent<number>) => void;
+        /**
+          * The total number of pages.
+         */
+        "totalPages"?: number;
+        /**
+          * The number of pages visible to select. Default is 5. Min is 5.
+         */
+        "visiblePages"?: number;
     }
     interface CpslPill {
         /**
@@ -1157,6 +1534,16 @@ declare namespace LocalJSX {
          */
         "url"?: string;
     }
+    interface CpslRadio {
+        /**
+          * Whether or not the radio is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Emitted when the radio state changes.
+         */
+        "onCpslRadioChanged"?: (event: CpslRadioCustomEvent<boolean>) => void;
+    }
     interface CpslRow {
     }
     interface CpslSlideButton {
@@ -1195,6 +1582,16 @@ declare namespace LocalJSX {
          */
         "speed"?: number;
     }
+    interface CpslSwitch {
+        /**
+          * Whether or not the switch is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Emitted when the switch state changes.
+         */
+        "onCpslSwitchChanged"?: (event: CpslSwitchCustomEvent<boolean>) => void;
+    }
     interface CpslTab {
         /**
           * The selected tab component
@@ -1205,6 +1602,16 @@ declare namespace LocalJSX {
          */
         "tab"?: string;
     }
+    interface CpslTable {
+        /**
+          * Columns for the table.
+         */
+        "columns"?: ColDef[];
+        /**
+          * Data rows for the table.
+         */
+        "rows"?: RowDef[];
+    }
     interface CpslTabs {
         /**
           * Whether or not the tabs take the full width of their container.
@@ -1246,24 +1653,35 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "cpsl-alert": CpslAlert;
         "cpsl-animation": CpslAnimation;
+        "cpsl-app-bar": CpslAppBar;
+        "cpsl-avatar": CpslAvatar;
         "cpsl-button": CpslButton;
+        "cpsl-button-group": CpslButtonGroup;
+        "cpsl-card": CpslCard;
+        "cpsl-checkbox": CpslCheckbox;
         "cpsl-code-input": CpslCodeInput;
         "cpsl-col": CpslCol;
         "cpsl-divider": CpslDivider;
+        "cpsl-drawer": CpslDrawer;
         "cpsl-dropdown": CpslDropdown;
         "cpsl-grid": CpslGrid;
         "cpsl-icon": CpslIcon;
         "cpsl-info-box": CpslInfoBox;
         "cpsl-input": CpslInput;
         "cpsl-modal": CpslModal;
+        "cpsl-nav-button-group": CpslNavButtonGroup;
         "cpsl-overlay": CpslOverlay;
+        "cpsl-pagination": CpslPagination;
         "cpsl-pill": CpslPill;
         "cpsl-progress-indicator": CpslProgressIndicator;
         "cpsl-qr-code": CpslQrCode;
+        "cpsl-radio": CpslRadio;
         "cpsl-row": CpslRow;
         "cpsl-slide-button": CpslSlideButton;
         "cpsl-spinner": CpslSpinner;
+        "cpsl-switch": CpslSwitch;
         "cpsl-tab": CpslTab;
+        "cpsl-table": CpslTable;
         "cpsl-tabs": CpslTabs;
         "cpsl-text": CpslText;
         "cpsl-tile-button": CpslTileButton;
@@ -1275,24 +1693,35 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "cpsl-alert": LocalJSX.CpslAlert & JSXBase.HTMLAttributes<HTMLCpslAlertElement>;
             "cpsl-animation": LocalJSX.CpslAnimation & JSXBase.HTMLAttributes<HTMLCpslAnimationElement>;
+            "cpsl-app-bar": LocalJSX.CpslAppBar & JSXBase.HTMLAttributes<HTMLCpslAppBarElement>;
+            "cpsl-avatar": LocalJSX.CpslAvatar & JSXBase.HTMLAttributes<HTMLCpslAvatarElement>;
             "cpsl-button": LocalJSX.CpslButton & JSXBase.HTMLAttributes<HTMLCpslButtonElement>;
+            "cpsl-button-group": LocalJSX.CpslButtonGroup & JSXBase.HTMLAttributes<HTMLCpslButtonGroupElement>;
+            "cpsl-card": LocalJSX.CpslCard & JSXBase.HTMLAttributes<HTMLCpslCardElement>;
+            "cpsl-checkbox": LocalJSX.CpslCheckbox & JSXBase.HTMLAttributes<HTMLCpslCheckboxElement>;
             "cpsl-code-input": LocalJSX.CpslCodeInput & JSXBase.HTMLAttributes<HTMLCpslCodeInputElement>;
             "cpsl-col": LocalJSX.CpslCol & JSXBase.HTMLAttributes<HTMLCpslColElement>;
             "cpsl-divider": LocalJSX.CpslDivider & JSXBase.HTMLAttributes<HTMLCpslDividerElement>;
+            "cpsl-drawer": LocalJSX.CpslDrawer & JSXBase.HTMLAttributes<HTMLCpslDrawerElement>;
             "cpsl-dropdown": LocalJSX.CpslDropdown & JSXBase.HTMLAttributes<HTMLCpslDropdownElement>;
             "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-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-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-slide-button": LocalJSX.CpslSlideButton & JSXBase.HTMLAttributes<HTMLCpslSlideButtonElement>;
             "cpsl-spinner": LocalJSX.CpslSpinner & JSXBase.HTMLAttributes<HTMLCpslSpinnerElement>;
+            "cpsl-switch": LocalJSX.CpslSwitch & JSXBase.HTMLAttributes<HTMLCpslSwitchElement>;
             "cpsl-tab": LocalJSX.CpslTab & JSXBase.HTMLAttributes<HTMLCpslTabElement>;
+            "cpsl-table": LocalJSX.CpslTable & JSXBase.HTMLAttributes<HTMLCpslTableElement>;
             "cpsl-tabs": LocalJSX.CpslTabs & JSXBase.HTMLAttributes<HTMLCpslTabsElement>;
             "cpsl-text": LocalJSX.CpslText & JSXBase.HTMLAttributes<HTMLCpslTextElement>;
             "cpsl-tile-button": LocalJSX.CpslTileButton & JSXBase.HTMLAttributes<HTMLCpslTileButtonElement>;