@sula-tech/webcomponents 0.7.6 → 0.9.0

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],"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/sula-textfield/sula-textfield.d.ts

@@ -41,6 +41,12 @@ export declare class SulaTextfield {
      * Event emitted when input value changes.
      */
     valueChanged: EventEmitter<string>;
+    /**
+     * The textfield mask pattern
+     * The mask pattern should follow the VMasker pattern format
+     * More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern
+     */
+    maskPattern?: string;
     /**
      * Event emitted when input is focused.
      */
@@ -69,6 +75,7 @@ export declare class SulaTextfield {
     handleBlur: () => void;
     handleInputFocus: () => void;
     handleIconClick: (event: MouseEvent) => void;
+    handleInputMask(): void;
     handlePasswordIconClicked(): void;
     getInputIcon(): string;
     render(): any;

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

@@ -41,6 +41,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        maskPattern: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         placeholder: {
             control: string;
             defaultValue: string;
@@ -104,6 +112,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
+export declare const WithMask: any;
 export declare const WithValue: any;
 export declare const WithHelpText: any;
 export declare const WithMaxLength: 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 {
         /**
@@ -413,6 +480,10 @@ export namespace Components {
           * The textfield label
          */
         "label": string;
+        /**
+          * The textfield mask pattern The mask pattern should follow the VMasker pattern format More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern
+         */
+        "maskPattern"?: string;
         /**
           * The textfield max length
          */
@@ -501,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;
@@ -645,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: {
@@ -797,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;
@@ -1011,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
          */
@@ -1049,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 {
         /**
@@ -1281,6 +1453,10 @@ declare namespace LocalJSX {
           * The textfield label
          */
         "label"?: string;
+        /**
+          * The textfield mask pattern The mask pattern should follow the VMasker pattern format More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern
+         */
+        "maskPattern"?: string;
         /**
           * The textfield max length
          */
@@ -1379,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;
@@ -1403,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>;

package/dist/webcomponents/{p-or7qTZgT.js → p-CrFclBiX.js}

@@ -806,22 +806,27 @@ var insertBefore = (e, t, n) => {
 
 var renderVdom = (e, t, n = false) => {
   const o = e.$hostElement$;
-  const i = e._$$vnode$$_ || newVNode(null, null);
-  const r = isHost(t);
-  const s = r ? t : h(null, null, t);
+  const i = e._$$cmpMeta$$_;
+  const r = e._$$vnode$$_ || newVNode(null, null);
+  const s = isHost(t);
+  const l = s ? t : h(null, null, t);
   k = o.tagName;
-  if (n && s._$$attrs$$_) {
-    for (const e of Object.keys(s._$$attrs$$_)) {
+  if (i._$$attrsToReflect$$_) {
+    l._$$attrs$$_ = l._$$attrs$$_ || {};
+    i._$$attrsToReflect$$_.map((([e, t]) => l._$$attrs$$_[t] = o[e]));
+  }
+  if (n && l._$$attrs$$_) {
+    for (const e of Object.keys(l._$$attrs$$_)) {
       if (o.hasAttribute(e) && ![ "key", "ref", "style", "class" ].includes(e)) {
-        s._$$attrs$$_[e] = o[e];
+        l._$$attrs$$_[e] = o[e];
       }
     }
   }
-  s._$$tag$$_ = null;
-  s._$$flags$$_ |= 4 /* isHost */;
-  e._$$vnode$$_ = s;
-  s._$$elm$$_ = i._$$elm$$_ = o.shadowRoot || o;
-  patch(i, s, n);
+  l._$$tag$$_ = null;
+  l._$$flags$$_ |= 4 /* isHost */;
+  e._$$vnode$$_ = l;
+  l._$$elm$$_ = r._$$elm$$_ = o.shadowRoot || o;
+  patch(r, l, n);
 };
 
 // src/runtime/update-component.ts
@@ -1163,9 +1168,13 @@ var proxyComponent = (e, n, o) => {
       };
       e.observedAttributes = Array.from(
        new Set([ ...Object.keys((r = n._$$watchers$$_) != null ? r : {}), ...l.filter((([e, t]) => t[0] & 15 /* HasAttribute */)).map((([e, t]) => {
-        const n = t[1] || e;
-        o.set(n, e);
-        return n;
+        var i;
+        const r = t[1] || e;
+        o.set(r, e);
+        if (t[0] & 512 /* ReflectAttr */) {
+          (i = n._$$attrsToReflect$$_) == null ? void 0 : i.push([ e, r ]);
+        }
+        return r;
       })) ]));
     }
   }
@@ -1355,6 +1364,9 @@ var bootstrapLazy = (e, t = {}) => {
       {
         o._$$listeners$$_ = t[3];
       }
+      {
+        o._$$attrsToReflect$$_ = [];
+      }
       {
         o._$$watchers$$_ = (n = t[4]) != null ? n : {};
       }
@@ -1490,5 +1502,5 @@ var hostListenerOpts = e => f ? {
 var setNonce = e => c._$$nonce$$_ = e;
 
 export { b as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=p-or7qTZgT.js.map
-//# sourceMappingURL=p-or7qTZgT.js.map
+//# sourceMappingURL=p-CrFclBiX.js.map
+//# sourceMappingURL=p-CrFclBiX.js.map