@sula-tech/webcomponents 0.8.0 → 0.9.1

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-or7qTZgT.js';
-export { s as setNonce } from './index-or7qTZgT.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CrFclBiX.js';
+export { s as setNonce } from './index-CrFclBiX.js';
 
 /*
  Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_19",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-dropdown/sula-dropdown.d.ts

@@ -17,6 +17,10 @@ export declare class SulaDropdown {
      * Value for dropdown
      */
     value?: SulaMenuListItem;
+    /**
+     * Enable search/filter functionality in dropdown
+     */
+    searchable?: boolean;
     /**
      * Event emitted when dropdown is clicked
      */
@@ -36,12 +40,19 @@ export declare class SulaDropdown {
     selectedItem?: SulaMenuListItem;
     showItems: boolean;
     isFocused: boolean;
+    searchTerm: string;
+    filteredItems: SulaMenuListItem[];
     node?: HTMLElement;
+    searchInputRef?: HTMLInputElement;
     handleValueChange(): void;
+    handleShowItemsChange(newValue: boolean): void;
     handleDocumentClick(event: Event): void;
     componentWillLoad(): void;
+    componentDidRender(): void;
     handleClick: () => void;
     handleItemSelected: (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => void;
+    filterItems: () => SulaMenuListItem[];
+    handleSearchInput: (event: Event) => void;
     getIconClass(): "text-text-primary" | "text-icon-disabled";
     handleFocus: () => void;
     handleBlur: () => void;

package/dist/types/components/sula-dropdown/sula-dropdown.stories.d.ts

@@ -34,6 +34,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        searchable: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         dropdownClicked: {
             action: string;
             description: string;
@@ -66,3 +74,5 @@ export declare const Disabled: any;
 export declare const DisabledWithValue: any;
 export declare const EmptyItems: any;
 export declare const LongItemsList: any;
+export declare const Searchable: any;
+export declare const SearchableWithSelectedValue: any;

package/dist/types/components/sula-menu-select-list/sula-menu-select-list.d.ts

@@ -9,6 +9,10 @@ export declare class SulaMenuSelectList {
      * Menu is full width
      */
     fullWidth: boolean;
+    /**
+     * Selected value
+     */
+    selectedValue?: SulaMenuListItem;
     /**
      * Event emitted when item is selected
      */

package/dist/types/components/sula-modal/model/sula-modal.model.d.ts

@@ -0,0 +1,13 @@
+export declare enum SulaModalType {
+    Alert = "alert",
+    Custom = "custom",
+    Promo = "promo",
+    List = "list",
+    CustomFull = "custom-full",
+    Side = "side",
+    SpecialSide = "special-side"
+}
+export declare enum SulaModalSlotOverflow {
+    Auto = "auto",
+    Hidden = "hidden"
+}

package/dist/types/components/sula-modal/sula-modal.d.ts

@@ -0,0 +1,94 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaModalSlotOverflow, SulaModalType } from './model/sula-modal.model';
+export declare class SulaModal {
+    /**
+     * Is modal opened
+     */
+    opened: boolean;
+    /**
+     * Block body scroll when modal is opened
+     */
+    blockBodyScroll: boolean;
+    /**
+     * Close modal when clicking outside
+     */
+    closeOnClickOutside: boolean;
+    /**
+     * Type of the modal
+     */
+    type: SulaModalType;
+    /**
+     * Icon of the modal header
+     */
+    headerIcon: string;
+    /**
+     * Title of the modal
+     */
+    modalTitle: string;
+    /**
+     * Promotional image URL for promo type modal
+     */
+    promoImage: string;
+    /**
+     * Subtitle of the modal
+     */
+    subTitle: string;
+    /**
+     * Primary button text
+     */
+    primaryButtonText: string;
+    /**
+     * Secondary button text
+     */
+    secondaryButtonText: string;
+    /**
+     * Slot overflow behavior
+     */
+    slotOverflow: SulaModalSlotOverflow;
+    /**
+     * Event emitted when the modal is closed
+     */
+    modalClosed: EventEmitter<void>;
+    /**
+     * Event emitted when the primary button is clicked
+     */
+    primaryButtonClicked: EventEmitter<void>;
+    /**
+     * Event emitted when the secondary button is clicked
+     */
+    secondaryButtonClicked: EventEmitter<void>;
+    hostElement: HTMLElement;
+    isAnimating: boolean;
+    shouldRender: boolean;
+    private closeTimeout;
+    handleOpenedChange(newValue: boolean): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    handleParentOverflow(): void;
+    closeModal(): void;
+    handleClickOutside(event: MouseEvent): void;
+    handlePrimaryButtonClick(): void;
+    handleSecondaryButtonClick(): void;
+    isAlertOrCustomOrPromo(): boolean;
+    isListOrCustomFull(): boolean;
+    isSideModal(): boolean;
+    isPromoOrSpecialSide(): boolean;
+    hasSlotContent(): boolean;
+    hasButtons(): boolean;
+    getOverlayClasses(): Record<string, boolean>;
+    getWrapperClasses(): Record<string, boolean>;
+    getContentClasses(): Record<string, boolean>;
+    getHeaderClasses(): Record<string, boolean>;
+    getCloseButtonClasses(): Record<string, boolean>;
+    getTitleContainerClasses(): Record<string, boolean>;
+    getTitleClasses(): Record<string, boolean>;
+    getSlotClasses(): Record<string, boolean>;
+    getButtonContainerClasses(): Record<string, boolean>;
+    renderPromoImage(): any;
+    renderHeaderIcon(): any;
+    renderCloseButton(): any;
+    renderTitleSection(): any;
+    renderSlot(): any;
+    renderButtons(): any;
+    render(): any;
+}

package/dist/types/components/sula-modal/sula-modal.stories.d.ts

@@ -0,0 +1,83 @@
+import { SulaModalType, SulaModalSlotOverflow } from './model/sula-modal.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        opened: {
+            control: string;
+            description: string;
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaModalType[];
+        };
+        modalTitle: {
+            control: string;
+            description: string;
+        };
+        subTitle: {
+            control: string;
+            description: string;
+        };
+        headerIcon: {
+            control: string;
+            description: string;
+        };
+        promoImage: {
+            control: string;
+            description: string;
+        };
+        primaryButtonText: {
+            control: string;
+            description: string;
+        };
+        secondaryButtonText: {
+            control: string;
+            description: string;
+        };
+        slotOverflow: {
+            control: {
+                type: string;
+            };
+            options: SulaModalSlotOverflow[];
+        };
+        blockBodyScroll: {
+            control: string;
+            description: string;
+        };
+        closeOnClickOutside: {
+            control: string;
+            description: string;
+        };
+        modalClosed: {
+            action: string;
+            description: string;
+        };
+        primaryButtonClicked: {
+            action: string;
+            description: string;
+        };
+        secondaryButtonClicked: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: any;
+export declare const AlertType: any;
+export declare const PromoType: any;
+export declare const SideType: any;
+export declare const ListType: any;
+export declare const CustomFullType: any;
+export declare const SpecialSideType: any;
+export declare const WithCustomSlot: any;

package/dist/types/components.d.ts

@@ -13,6 +13,7 @@ import { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model
 import { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
 import { SulaMenuListItem as SulaMenuListItem1 } from "./components";
 import { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
+import { SulaModalSlotOverflow, SulaModalType } from "./components/sula-modal/model/sula-modal.model";
 import { SulaProgressBarAppearance, SulaProgressBarState } from "./components/sula-progress-bar/model/sula-progress-bar.model";
 import { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
 import { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
@@ -29,6 +30,7 @@ export { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model
 export { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-menu-select-list.model";
 export { SulaMenuListItem as SulaMenuListItem1 } from "./components";
 export { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
+export { SulaModalSlotOverflow, SulaModalType } from "./components/sula-modal/model/sula-modal.model";
 export { SulaProgressBarAppearance, SulaProgressBarState } from "./components/sula-progress-bar/model/sula-progress-bar.model";
 export { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
 export { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
@@ -199,6 +201,10 @@ export namespace Components {
           * Dropdown label
          */
         "label": string;
+        /**
+          * Enable search/filter functionality in dropdown
+         */
+        "searchable"?: boolean;
         /**
           * Value for dropdown
          */
@@ -233,6 +239,67 @@ export namespace Components {
           * @default []
          */
         "items": SulaMenuListItem[];
+        /**
+          * Selected value
+         */
+        "selectedValue"?: SulaMenuListItem;
+    }
+    interface SulaModal {
+        /**
+          * Block body scroll when modal is opened
+          * @default true
+         */
+        "blockBodyScroll": boolean;
+        /**
+          * Close modal when clicking outside
+          * @default true
+         */
+        "closeOnClickOutside": boolean;
+        /**
+          * Icon of the modal header
+          * @default ''
+         */
+        "headerIcon": string;
+        /**
+          * Title of the modal
+          * @default ''
+         */
+        "modalTitle": string;
+        /**
+          * Is modal opened
+          * @default false
+         */
+        "opened": boolean;
+        /**
+          * Primary button text
+          * @default ''
+         */
+        "primaryButtonText": string;
+        /**
+          * Promotional image URL for promo type modal
+          * @default ''
+         */
+        "promoImage": string;
+        /**
+          * Secondary button text
+          * @default ''
+         */
+        "secondaryButtonText": string;
+        /**
+          * Slot overflow behavior
+          * @default SulaModalSlotOverflow.Auto
+         */
+        "slotOverflow": SulaModalSlotOverflow;
+        /**
+          * Subtitle of the modal
+          * @default ''
+         */
+        "subTitle": string;
+        /**
+          * Type of the modal
+          * @default SulaModalType.Custom
+         */
+        "type": SulaModalType;
     }
     interface SulaProgressBar {
         /**
@@ -505,6 +572,10 @@ export interface SulaMenuSelectListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaMenuSelectListElement;
 }
+export interface SulaModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaModalElement;
+}
 export interface SulaRadioButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaRadioButtonElement;
@@ -649,6 +720,25 @@ declare global {
         prototype: HTMLSulaMenuSelectListElement;
         new (): HTMLSulaMenuSelectListElement;
     };
+    interface HTMLSulaModalElementEventMap {
+        "modalClosed": void;
+        "primaryButtonClicked": void;
+        "secondaryButtonClicked": void;
+    }
+    interface HTMLSulaModalElement extends Components.SulaModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaModalElementEventMap>(type: K, listener: (this: HTMLSulaModalElement, ev: SulaModalCustomEvent<HTMLSulaModalElementEventMap[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 HTMLSulaModalElementEventMap>(type: K, listener: (this: HTMLSulaModalElement, ev: SulaModalCustomEvent<HTMLSulaModalElementEventMap[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 HTMLSulaModalElement: {
+        prototype: HTMLSulaModalElement;
+        new (): HTMLSulaModalElement;
+    };
     interface HTMLSulaProgressBarElement extends Components.SulaProgressBar, HTMLStencilElement {
     }
     var HTMLSulaProgressBarElement: {
@@ -801,6 +891,7 @@ declare global {
         "sula-icon": HTMLSulaIconElement;
         "sula-loader": HTMLSulaLoaderElement;
         "sula-menu-select-list": HTMLSulaMenuSelectListElement;
+        "sula-modal": HTMLSulaModalElement;
         "sula-progress-bar": HTMLSulaProgressBarElement;
         "sula-radio-button": HTMLSulaRadioButtonElement;
         "sula-search-bar": HTMLSulaSearchBarElement;
@@ -1015,6 +1106,10 @@ declare namespace LocalJSX {
           * Event emitted when item is selected
          */
         "onMenuItemSelected"?: (event: SulaDropdownCustomEvent<SulaMenuListItem1>) => void;
+        /**
+          * Enable search/filter functionality in dropdown
+         */
+        "searchable"?: boolean;
         /**
           * Value for dropdown
          */
@@ -1053,6 +1148,79 @@ declare namespace LocalJSX {
           * Event emitted when item is selected
          */
         "onItemSelected"?: (event: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => void;
+        /**
+          * Selected value
+         */
+        "selectedValue"?: SulaMenuListItem;
+    }
+    interface SulaModal {
+        /**
+          * Block body scroll when modal is opened
+          * @default true
+         */
+        "blockBodyScroll"?: boolean;
+        /**
+          * Close modal when clicking outside
+          * @default true
+         */
+        "closeOnClickOutside"?: boolean;
+        /**
+          * Icon of the modal header
+          * @default ''
+         */
+        "headerIcon"?: string;
+        /**
+          * Title of the modal
+          * @default ''
+         */
+        "modalTitle"?: string;
+        /**
+          * Event emitted when the modal is closed
+         */
+        "onModalClosed"?: (event: SulaModalCustomEvent<void>) => void;
+        /**
+          * Event emitted when the primary button is clicked
+         */
+        "onPrimaryButtonClicked"?: (event: SulaModalCustomEvent<void>) => void;
+        /**
+          * Event emitted when the secondary button is clicked
+         */
+        "onSecondaryButtonClicked"?: (event: SulaModalCustomEvent<void>) => void;
+        /**
+          * Is modal opened
+          * @default false
+         */
+        "opened"?: boolean;
+        /**
+          * Primary button text
+          * @default ''
+         */
+        "primaryButtonText"?: string;
+        /**
+          * Promotional image URL for promo type modal
+          * @default ''
+         */
+        "promoImage"?: string;
+        /**
+          * Secondary button text
+          * @default ''
+         */
+        "secondaryButtonText"?: string;
+        /**
+          * Slot overflow behavior
+          * @default SulaModalSlotOverflow.Auto
+         */
+        "slotOverflow"?: SulaModalSlotOverflow;
+        /**
+          * Subtitle of the modal
+          * @default ''
+         */
+        "subTitle"?: string;
+        /**
+          * Type of the modal
+          * @default SulaModalType.Custom
+         */
+        "type"?: SulaModalType;
     }
     interface SulaProgressBar {
         /**
@@ -1387,6 +1555,7 @@ declare namespace LocalJSX {
         "sula-icon": SulaIcon;
         "sula-loader": SulaLoader;
         "sula-menu-select-list": SulaMenuSelectList;
+        "sula-modal": SulaModal;
         "sula-progress-bar": SulaProgressBar;
         "sula-radio-button": SulaRadioButton;
         "sula-search-bar": SulaSearchBar;
@@ -1411,6 +1580,7 @@ declare module "@stencil/core" {
             "sula-icon": LocalJSX.SulaIcon & JSXBase.HTMLAttributes<HTMLSulaIconElement>;
             "sula-loader": LocalJSX.SulaLoader & JSXBase.HTMLAttributes<HTMLSulaLoaderElement>;
             "sula-menu-select-list": LocalJSX.SulaMenuSelectList & JSXBase.HTMLAttributes<HTMLSulaMenuSelectListElement>;
+            "sula-modal": LocalJSX.SulaModal & JSXBase.HTMLAttributes<HTMLSulaModalElement>;
             "sula-progress-bar": LocalJSX.SulaProgressBar & JSXBase.HTMLAttributes<HTMLSulaProgressBarElement>;
             "sula-radio-button": LocalJSX.SulaRadioButton & JSXBase.HTMLAttributes<HTMLSulaRadioButtonElement>;
             "sula-search-bar": LocalJSX.SulaSearchBar & JSXBase.HTMLAttributes<HTMLSulaSearchBarElement>;