@sula-tech/webcomponents 0.17.4 → 0.17.6

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_29",[[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],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[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-breadcrumb",{"items":[1040]}],[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-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[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"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[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-toggle",{"selected":[1028],"buttonDisabled":[1028,"button-disabled"],"icon":[1]}],[1,"sula-tooltip",{"text":[1],"position":[1],"focused":[4],"trigger":[1],"isVisible":[32]}],[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"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[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"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_30",[[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],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[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-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-menu",{"menuTitle":[1,"menu-title"],"image":[1],"items":[1040],"collapsed":[32],"previewExpanded":[32],"selectedItem":[32]},null,{"items":["syncSelectedItemFromItems"]}],[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-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[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"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[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-toggle",{"selected":[1028],"buttonDisabled":[1028,"button-disabled"],"icon":[1]}],[1,"sula-tooltip",{"text":[1],"position":[1],"focused":[4],"trigger":[1],"isVisible":[32]}],[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"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[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"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

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

@@ -1,15 +1,19 @@
 import { AnimationItem } from 'lottie-web';
 import { SulaLoaderSize } from './model/sula-loader.model';
 export declare class SulaLoader {
-    el: HTMLElement;
+    el?: HTMLElement;
     /**
      * Tamanho predefinido (small, medium, large)
      */
     size: SulaLoaderSize;
-    animationInstance: AnimationItem;
-    containerRef: HTMLDivElement;
+    animationInstance: AnimationItem | null;
+    containerRef?: HTMLDivElement;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
+    private destroyAnimation;
+    private tryInitLottie;
     initLottie(): void;
     getDimensions(): {
         width: string;

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

@@ -0,0 +1,21 @@
+export interface SulaMenuMainItem extends SulaMenuItem {
+    children?: SulaMenuSubItem[];
+}
+export interface SulaMenuSubItem extends SulaMenuItem {
+    children?: SulaMenuItem[];
+}
+export interface SulaMenuItem {
+    id: string;
+    label: string;
+    icon: string;
+    hidden?: boolean;
+    open?: boolean;
+    route?: string;
+    expanded?: boolean;
+    selected?: boolean;
+}
+export type SelectedMenuItem = {
+    id: string;
+    parentItemId?: string;
+    parentChildId?: string;
+};

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SelectedMenuItem, SulaMenuItem, SulaMenuMainItem, SulaMenuSubItem } from './model/sula-menu.model';
+export declare class SulaMenu {
+    /**
+     * Menu title
+     */
+    menuTitle: string;
+    /**
+     * Menu image
+     */
+    image: string;
+    /**
+     * Menu items
+     */
+    items: SulaMenuMainItem[];
+    /**
+     * Emitted when a menu item is selected
+     */
+    itemSelected: EventEmitter<SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem>;
+    /**
+     * Emitted when a menu item is clicked
+     */
+    itemClicked: EventEmitter<SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem>;
+    /**
+     * Emitted when the menu is toggled between collapsed and expanded states
+     * True: Menu is expanded
+     * False: Menu is collapsed
+     */
+    menuToggled: EventEmitter<boolean>;
+    collapsed: boolean;
+    previewExpanded: boolean;
+    selectedItem?: SelectedMenuItem;
+    componentWillLoad(): void;
+    syncSelectedItemFromItems(items: SulaMenuMainItem[]): void;
+    getVisibleItems<T extends SulaMenuItem>(items?: T[]): T[];
+    getVisibleSubItems(item: Pick<SulaMenuMainItem, 'children'>): SulaMenuSubItem[];
+    getVisibleGrandchildren(item: Pick<SulaMenuSubItem, 'children'>): SulaMenuItem[];
+    hasVisibleSubItems(item: Pick<SulaMenuMainItem, 'children'>): boolean;
+    hasVisibleGrandchildren(item: Pick<SulaMenuSubItem, 'children'>): boolean;
+    containsSelectedItem(items: SulaMenuMainItem[], selectedItem: SelectedMenuItem): boolean;
+    findSelectedLeaf(items: SulaMenuMainItem[]): {
+        id: string;
+        parentItemId?: undefined;
+        parentChildId?: undefined;
+    } | {
+        id: string;
+        parentItemId: string;
+        parentChildId: string;
+    } | {
+        id: string;
+        parentItemId: string;
+        parentChildId?: undefined;
+    };
+    isMainItemSelected(itemId: string): boolean;
+    hasSelectedChild(parentItemId: string): boolean;
+    isSelectedSubItem(parentItemId: string, childId: string): boolean;
+    hasSelectedGrandchild(parentItemId: string, parentChildId: string): boolean;
+    isSelectedGrandchild(parentItemId: string, parentChildId: string, grandchildId: string): boolean;
+    isItemActive(item: Pick<SulaMenuMainItem, 'id' | 'expanded' | 'children'>): boolean;
+    isSubItemActive(parentItemId: string, item: Pick<SulaMenuSubItem, 'id' | 'expanded' | 'children'>): boolean;
+    handleItemClick(clickedItem: SulaMenuMainItem): void;
+    handleSubItemClick(parentItemId: string, clickedChild: SulaMenuSubItem): void;
+    handleGrandchildClick(parentItemId: string, parentChildId: string, clickedGrandchild: NonNullable<SulaMenuSubItem['children']>[number]): void;
+    getItemIconClass(item: SulaMenuMainItem): "text-negative-negative-1 text-xl" | "text-icon-primary text-2xl";
+    getSubItemIconClass(_item: SulaMenuSubItem): string;
+    getSubItemCaretIconClass(): string;
+    getCaretIconClass(item: SulaMenuMainItem): "text-text-primary text-base" | "text-text-secondary text-base";
+    toggleMenu(): void;
+    handleMenuMouseEnter(): void;
+    handleMenuMouseLeave(): void;
+    renderSubmenuItems(parentItem: SulaMenuMainItem, expandedView: boolean): any[];
+    render(): any;
+}

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

@@ -0,0 +1,56 @@
+import { SulaMenuMainItem } from './model/sula-menu.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        menuTitle: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        image: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        items: {
+            control: string;
+            defaultValue: SulaMenuMainItem[];
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        itemSelected: {
+            action: string;
+            description: string;
+        };
+        itemClicked: {
+            action: string;
+            description: string;
+        };
+        menuToggled: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithNestedNavigation: any;
+export declare const WithLongLabels: any;
+export declare const WithHiddenItems: any;
+export declare const WithoutBrandImage: any;

package/dist/types/components.d.ts

@@ -14,6 +14,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 { SulaMenuItem, SulaMenuMainItem, SulaMenuSubItem } from "./components/sula-menu/model/sula-menu.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";
@@ -36,6 +37,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 { SulaMenuItem, SulaMenuMainItem, SulaMenuSubItem } from "./components/sula-menu/model/sula-menu.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";
@@ -274,6 +276,23 @@ export namespace Components {
          */
         "size": SulaLoaderSize;
     }
+    interface SulaMenu {
+        /**
+          * Menu image
+          * @default ''
+         */
+        "image": string;
+        /**
+          * Menu items
+          * @default []
+         */
+        "items": SulaMenuMainItem[];
+        /**
+          * Menu title
+          * @default ''
+         */
+        "menuTitle": string;
+    }
     interface SulaMenuSelectList {
         /**
           * Menu is full width
@@ -719,6 +738,10 @@ export interface SulaDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaDropdownElement;
 }
+export interface SulaMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaMenuElement;
+}
 export interface SulaMenuSelectListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaMenuSelectListElement;
@@ -879,6 +902,25 @@ declare global {
         prototype: HTMLSulaLoaderElement;
         new (): HTMLSulaLoaderElement;
     };
+    interface HTMLSulaMenuElementEventMap {
+        "itemSelected": SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem;
+        "itemClicked": SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem;
+        "menuToggled": boolean;
+    }
+    interface HTMLSulaMenuElement extends Components.SulaMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaMenuElementEventMap>(type: K, listener: (this: HTMLSulaMenuElement, ev: SulaMenuCustomEvent<HTMLSulaMenuElementEventMap[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 HTMLSulaMenuElementEventMap>(type: K, listener: (this: HTMLSulaMenuElement, ev: SulaMenuCustomEvent<HTMLSulaMenuElementEventMap[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 HTMLSulaMenuElement: {
+        prototype: HTMLSulaMenuElement;
+        new (): HTMLSulaMenuElement;
+    };
     interface HTMLSulaMenuSelectListElementEventMap {
         "itemSelected": SulaMenuListItem;
     }
@@ -1146,6 +1188,7 @@ declare global {
         "sula-dropdown": HTMLSulaDropdownElement;
         "sula-icon": HTMLSulaIconElement;
         "sula-loader": HTMLSulaLoaderElement;
+        "sula-menu": HTMLSulaMenuElement;
         "sula-menu-select-list": HTMLSulaMenuSelectListElement;
         "sula-modal": HTMLSulaModalElement;
         "sula-progress-bar": HTMLSulaProgressBarElement;
@@ -1438,6 +1481,35 @@ declare namespace LocalJSX {
          */
         "size"?: SulaLoaderSize;
     }
+    interface SulaMenu {
+        /**
+          * Menu image
+          * @default ''
+         */
+        "image"?: string;
+        /**
+          * Menu items
+          * @default []
+         */
+        "items"?: SulaMenuMainItem[];
+        /**
+          * Menu title
+          * @default ''
+         */
+        "menuTitle"?: string;
+        /**
+          * Emitted when a menu item is clicked
+         */
+        "onItemClicked"?: (event: SulaMenuCustomEvent<SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem>) => void;
+        /**
+          * Emitted when a menu item is selected
+         */
+        "onItemSelected"?: (event: SulaMenuCustomEvent<SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem>) => void;
+        /**
+          * Emitted when the menu is toggled between collapsed and expanded states True: Menu is expanded False: Menu is collapsed
+         */
+        "onMenuToggled"?: (event: SulaMenuCustomEvent<boolean>) => void;
+    }
     interface SulaMenuSelectList {
         /**
           * Menu is full width
@@ -1982,6 +2054,7 @@ declare namespace LocalJSX {
         "sula-dropdown": SulaDropdown;
         "sula-icon": SulaIcon;
         "sula-loader": SulaLoader;
+        "sula-menu": SulaMenu;
         "sula-menu-select-list": SulaMenuSelectList;
         "sula-modal": SulaModal;
         "sula-progress-bar": SulaProgressBar;
@@ -2017,6 +2090,7 @@ declare module "@stencil/core" {
             "sula-dropdown": LocalJSX.SulaDropdown & JSXBase.HTMLAttributes<HTMLSulaDropdownElement>;
             "sula-icon": LocalJSX.SulaIcon & JSXBase.HTMLAttributes<HTMLSulaIconElement>;
             "sula-loader": LocalJSX.SulaLoader & JSXBase.HTMLAttributes<HTMLSulaLoaderElement>;
+            "sula-menu": LocalJSX.SulaMenu & JSXBase.HTMLAttributes<HTMLSulaMenuElement>;
             "sula-menu-select-list": LocalJSX.SulaMenuSelectList & JSXBase.HTMLAttributes<HTMLSulaMenuSelectListElement>;
             "sula-modal": LocalJSX.SulaModal & JSXBase.HTMLAttributes<HTMLSulaModalElement>;
             "sula-progress-bar": LocalJSX.SulaProgressBar & JSXBase.HTMLAttributes<HTMLSulaProgressBarElement>;