@sula-tech/webcomponents 0.18.0 → 0.19.1

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_31",[[1,"sula-icon-picker",{"label":[1025],"required":[1028],"disabled":[1028],"error":[1025],"value":[1025],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"icons":[1040],"maxVisibleIcons":[2,"max-visible-icons"],"menuMaxHeight":[2,"menu-max-height"],"selectedIcon":[32],"searchTerm":[32]},null,{"value":["handleValueChange"],"icons":["handleIconsChange"]}],[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-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-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],"icon":[1],"iconClass":[1,"icon-class"],"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-dropdown",{"label":[1025],"disabled":[1028],"hasError":[1540,"has-error"],"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-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-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_31",[[1,"sula-icon-picker",{"label":[1025],"required":[1028],"disabled":[1028],"error":[1025],"value":[1025],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"icons":[1040],"maxVisibleIcons":[2,"max-visible-icons"],"menuMaxHeight":[2,"menu-max-height"],"selectedIcon":[32],"searchTerm":[32]},null,{"value":["handleValueChange"],"icons":["handleIconsChange"]}],[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-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],"width":[1],"density":[1],"labelOverflow":[1,"label-overflow"],"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-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],"icon":[1],"iconClass":[1,"icon-class"],"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-dropdown",{"label":[1025],"disabled":[1028],"hasError":[1540,"has-error"],"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-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-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-menu/model/sula-menu.model.d.ts

@@ -1,3 +1,12 @@
+export declare enum SulaMenuDensity {
+    Compact = "compact",
+    Default = "default",
+    Comfortable = "comfortable"
+}
+export declare enum SulaMenuLabelOverflow {
+    Truncate = "truncate",
+    Wrap = "wrap"
+}
 export interface SulaMenuMainItem extends SulaMenuItem {
     children?: SulaMenuSubItem[];
 }

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

@@ -1,5 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { SelectedMenuItem, SulaMenuItem, SulaMenuMainItem, SulaMenuSubItem } from './model/sula-menu.model';
+import { SelectedMenuItem, SulaMenuDensity, SulaMenuItem, SulaMenuLabelOverflow, SulaMenuMainItem, SulaMenuSubItem } from './model/sula-menu.model';
+/**
+ * Hierarchical navigation menu with collapsible and preview states.
+ *
+ * @part shell - Main visual container of the menu.
+ * @part title - Menu title.
+ * @part main-item-label - Label of each top-level menu item.
+ * @part toggle-label - Label of the collapse/expand control.
+ * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+ * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
+ * @cssprop --sula-menu-main-item-font-size - Font size of top-level item labels.
+ * @cssprop --sula-menu-main-item-line-height - Line height of top-level item labels.
+ * @cssprop --sula-menu-main-item-max-lines - Maximum number of visible lines when labelOverflow is wrap. Defaults to 2.
+ * @cssprop --sula-menu-main-item-padding-block - Vertical padding of top-level menu items.
+ */
 export declare class SulaMenu {
     /**
      * Menu title
@@ -9,6 +23,20 @@ export declare class SulaMenu {
      * Menu image
      */
     image: string;
+    /**
+     * Menu width in expanded state. Use a CSS length that does not depend on the
+     * host width, for example: 256px, 20rem or clamp(16rem, 25vw, 24rem).
+     */
+    width: string;
+    /**
+     * Density applied to top-level menu items.
+     */
+    density: SulaMenuDensity;
+    /**
+     * Overflow behavior for top-level item labels. Wrap displays up to two lines
+     * by default; the limit can be customized with --sula-menu-main-item-max-lines.
+     */
+    labelOverflow: SulaMenuLabelOverflow;
     /**
      * Menu items
      */
@@ -30,6 +58,8 @@ export declare class SulaMenu {
     collapsed: boolean;
     previewExpanded: boolean;
     selectedItem?: SelectedMenuItem;
+    private get normalizedWidth();
+    private get hostStyleVariables();
     componentWillLoad(): void;
     syncSelectedItemFromItems(items: SulaMenuMainItem[]): void;
     getVisibleItems<T extends SulaMenuItem>(items?: T[]): T[];

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

@@ -1,4 +1,4 @@
-import { SulaMenuMainItem } from './model/sula-menu.model';
+import { SulaMenuDensity, SulaMenuLabelOverflow, SulaMenuMainItem } from './model/sula-menu.model';
 declare const _default: {
     title: string;
     tags: string[];
@@ -19,6 +19,44 @@ declare const _default: {
                 required: boolean;
             };
         };
+        width: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        density: {
+            control: {
+                type: string;
+            };
+            options: SulaMenuDensity[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        labelOverflow: {
+            control: {
+                type: string;
+            };
+            options: SulaMenuLabelOverflow[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
         items: {
             control: string;
             defaultValue: SulaMenuMainItem[];
@@ -52,5 +90,8 @@ export default _default;
 export declare const Default: any;
 export declare const WithNestedNavigation: any;
 export declare const WithLongLabels: any;
+export declare const WithTruncatedLongLabels: any;
+export declare const WithLongLabelsCustomLayout: any;
+export declare const WithComfortableDensity: any;
 export declare const WithHiddenItems: any;
 export declare const WithoutBrandImage: any;

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

@@ -73,6 +73,7 @@ export declare class SulaModal {
     isListOrCustomFull(): boolean;
     isSideModal(): boolean;
     isPromoOrSpecialSide(): boolean;
+    hasHeaderIcon(): boolean;
     hasSlotContent(): boolean;
     hasButtons(): boolean;
     getOverlayClasses(): Record<string, boolean>;

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-
 import { SulaMenuListItem as SulaMenuListItem1 } from "./components";
 import { SulaIconPickerIcon } from "./components/sula-icon-picker/model/sula-icon-picker.model";
 import { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
-import { SulaMenuItem, SulaMenuMainItem, SulaMenuSubItem } from "./components/sula-menu/model/sula-menu.model";
+import { SulaMenuDensity, SulaMenuItem, SulaMenuLabelOverflow, 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";
@@ -39,7 +39,7 @@ export { SulaMenuListItem } from "./components/sula-menu-select-list/model/sula-
 export { SulaMenuListItem as SulaMenuListItem1 } from "./components";
 export { SulaIconPickerIcon } from "./components/sula-icon-picker/model/sula-icon-picker.model";
 export { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.model";
-export { SulaMenuItem, SulaMenuMainItem, SulaMenuSubItem } from "./components/sula-menu/model/sula-menu.model";
+export { SulaMenuDensity, SulaMenuItem, SulaMenuLabelOverflow, 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";
@@ -331,7 +331,21 @@ export namespace Components {
          */
         "size": SulaLoaderSize;
     }
+    /**
+     * Hierarchical navigation menu with collapsible and preview states.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+     * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
+     * @cssprop --sula-menu-main-item-font-size - Font size of top-level item labels.
+     * @cssprop --sula-menu-main-item-line-height - Line height of top-level item labels.
+     * @cssprop --sula-menu-main-item-max-lines - Maximum number of visible lines when labelOverflow is wrap. Defaults to 2.
+     * @cssprop --sula-menu-main-item-padding-block - Vertical padding of top-level menu items.
+     */
     interface SulaMenu {
+        /**
+          * Density applied to top-level menu items.
+          * @default SulaMenuDensity.Default
+         */
+        "density": SulaMenuDensity;
         /**
           * Menu image
           * @default ''
@@ -342,11 +356,21 @@ export namespace Components {
           * @default []
          */
         "items": SulaMenuMainItem[];
+        /**
+          * Overflow behavior for top-level item labels. Wrap displays up to two lines by default; the limit can be customized with --sula-menu-main-item-max-lines.
+          * @default SulaMenuLabelOverflow.Wrap
+         */
+        "labelOverflow": SulaMenuLabelOverflow;
         /**
           * Menu title
           * @default ''
          */
         "menuTitle": string;
+        /**
+          * Menu width in expanded state. Use a CSS length that does not depend on the host width, for example: 256px, 20rem or clamp(16rem, 25vw, 24rem).
+          * @default ''
+         */
+        "width": string;
     }
     interface SulaMenuSelectList {
         /**
@@ -996,6 +1020,15 @@ declare global {
         "itemClicked": SulaMenuMainItem | SulaMenuSubItem | SulaMenuItem;
         "menuToggled": boolean;
     }
+    /**
+     * Hierarchical navigation menu with collapsible and preview states.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+     * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
+     * @cssprop --sula-menu-main-item-font-size - Font size of top-level item labels.
+     * @cssprop --sula-menu-main-item-line-height - Line height of top-level item labels.
+     * @cssprop --sula-menu-main-item-max-lines - Maximum number of visible lines when labelOverflow is wrap. Defaults to 2.
+     * @cssprop --sula-menu-main-item-padding-block - Vertical padding of top-level menu items.
+     */
     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;
@@ -1640,7 +1673,21 @@ declare namespace LocalJSX {
          */
         "size"?: SulaLoaderSize;
     }
+    /**
+     * Hierarchical navigation menu with collapsible and preview states.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+     * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
+     * @cssprop --sula-menu-main-item-font-size - Font size of top-level item labels.
+     * @cssprop --sula-menu-main-item-line-height - Line height of top-level item labels.
+     * @cssprop --sula-menu-main-item-max-lines - Maximum number of visible lines when labelOverflow is wrap. Defaults to 2.
+     * @cssprop --sula-menu-main-item-padding-block - Vertical padding of top-level menu items.
+     */
     interface SulaMenu {
+        /**
+          * Density applied to top-level menu items.
+          * @default SulaMenuDensity.Default
+         */
+        "density"?: SulaMenuDensity;
         /**
           * Menu image
           * @default ''
@@ -1651,6 +1698,11 @@ declare namespace LocalJSX {
           * @default []
          */
         "items"?: SulaMenuMainItem[];
+        /**
+          * Overflow behavior for top-level item labels. Wrap displays up to two lines by default; the limit can be customized with --sula-menu-main-item-max-lines.
+          * @default SulaMenuLabelOverflow.Wrap
+         */
+        "labelOverflow"?: SulaMenuLabelOverflow;
         /**
           * Menu title
           * @default ''
@@ -1668,6 +1720,11 @@ declare namespace LocalJSX {
           * Emitted when the menu is toggled between collapsed and expanded states True: Menu is expanded False: Menu is collapsed
          */
         "onMenuToggled"?: (event: SulaMenuCustomEvent<boolean>) => void;
+        /**
+          * Menu width in expanded state. Use a CSS length that does not depend on the host width, for example: 256px, 20rem or clamp(16rem, 25vw, 24rem).
+          * @default ''
+         */
+        "width"?: string;
     }
     interface SulaMenuSelectList {
         /**
@@ -2261,6 +2318,15 @@ declare module "@stencil/core" {
             "sula-icon": LocalJSX.SulaIcon & JSXBase.HTMLAttributes<HTMLSulaIconElement>;
             "sula-icon-picker": LocalJSX.SulaIconPicker & JSXBase.HTMLAttributes<HTMLSulaIconPickerElement>;
             "sula-loader": LocalJSX.SulaLoader & JSXBase.HTMLAttributes<HTMLSulaLoaderElement>;
+            /**
+             * Hierarchical navigation menu with collapsible and preview states.
+             * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+             * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
+             * @cssprop --sula-menu-main-item-font-size - Font size of top-level item labels.
+             * @cssprop --sula-menu-main-item-line-height - Line height of top-level item labels.
+             * @cssprop --sula-menu-main-item-max-lines - Maximum number of visible lines when labelOverflow is wrap. Defaults to 2.
+             * @cssprop --sula-menu-main-item-padding-block - Vertical padding of top-level menu items.
+             */
             "sula-menu": LocalJSX.SulaMenu & JSXBase.HTMLAttributes<HTMLSulaMenuElement>;
             "sula-menu-select-list": LocalJSX.SulaMenuSelectList & JSXBase.HTMLAttributes<HTMLSulaMenuSelectListElement>;
             "sula-modal": LocalJSX.SulaModal & JSXBase.HTMLAttributes<HTMLSulaModalElement>;

package/dist/types/index.d.ts

@@ -8,4 +8,5 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export type * from './components.d.ts';
+export { SulaMenuDensity, SulaMenuLabelOverflow } from './components/sula-menu/model/sula-menu.model';
 export type { SulaToggleEvent } from './components/sula-toggle/model/sula-toggle.model';

package/dist/webcomponents/index.esm.js

@@ -1,3 +1,18 @@
-//# sourceMappingURL=index.esm.js.map
+var t;
+
+(function(t) {
+  t["Compact"] = "compact";
+  t["Default"] = "default";
+  t["Comfortable"] = "comfortable";
+})(t || (t = {}));
+
+var a;
 
+(function(t) {
+  t["Truncate"] = "truncate";
+  t["Wrap"] = "wrap";
+})(a || (a = {}));
+
+export { t as SulaMenuDensity, a as SulaMenuLabelOverflow };
+//# sourceMappingURL=index.esm.js.map
 //# sourceMappingURL=index.esm.js.map

package/dist/webcomponents/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.esm.js","sources":["src/components/sula-menu/model/sula-menu.model.ts"],"sourcesContent":["export enum SulaMenuDensity {\n  Compact = 'compact',\n  Default = 'default',\n  Comfortable = 'comfortable',\n}\n\nexport enum SulaMenuLabelOverflow {\n  Truncate = 'truncate',\n  Wrap = 'wrap',\n}\n\nexport interface SulaMenuMainItem extends SulaMenuItem {\n  children?: SulaMenuSubItem[];\n}\n\nexport interface SulaMenuSubItem extends SulaMenuItem {\n  children?: SulaMenuItem[];\n}\n\nexport interface SulaMenuItem {\n  id: string;\n  label: string;\n  icon: string;\n  hidden?: boolean;\n  open?: boolean;\n  route?: string;\n  expanded?: boolean;\n  selected?: boolean;\n}\n\nexport type SelectedMenuItem = {\n  id: string;\n  parentItemId?: string;\n  parentChildId?: string;\n};\n"],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC7B,CAAC,EAJW,eAAe,KAAf,eAAe,GAI1B,EAAA,CAAA,CAAA;IAEW;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,qBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}