@sula-tech/webcomponents 0.23.1 → 0.24.1

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

@@ -0,0 +1,168 @@
+import { SulaMenuDensity, SulaMenuLabelOverflow } from '../sula-menu/model/sula-menu.model';
+import { SulaProfileMenuItem } from '../sula-profile-menu/model/sula-profile-menu.model';
+import { SulaWorkbenchMenuItem, SulaWorkbenchMenuUser } from './model/sula-workbench-menu.model';
+type StoryArgs = {
+    menuTitle: string;
+    density: SulaMenuDensity;
+    labelOverflow: SulaMenuLabelOverflow;
+    drilldownLevel: number;
+    drillPath?: string[];
+    items: SulaWorkbenchMenuItem[];
+    user: SulaWorkbenchMenuUser;
+    profileItems?: SulaProfileMenuItem[];
+    profileClicked: EventListener;
+    profileItemClicked: EventListener;
+    profileSwitchChanged: EventListener;
+    itemSelected: EventListener;
+    itemClicked: EventListener;
+    levelChanged: EventListener;
+    menuToggled: EventListener;
+};
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        menuTitle: {
+            control: string;
+            defaultValue: string;
+            description: string;
+        };
+        density: {
+            control: {
+                type: string;
+            };
+            options: SulaMenuDensity[];
+            description: string;
+        };
+        labelOverflow: {
+            control: {
+                type: string;
+            };
+            options: SulaMenuLabelOverflow[];
+            description: string;
+        };
+        drilldownLevel: {
+            control: {
+                type: string;
+                min: number;
+            };
+            description: string;
+        };
+        drillPath: {
+            control: string;
+            description: string;
+        };
+        items: {
+            control: string;
+            description: string;
+        };
+        itemSelected: {
+            action: string;
+            description: string;
+        };
+        itemClicked: {
+            action: string;
+            description: string;
+        };
+        levelChanged: {
+            action: string;
+            description: string;
+        };
+        user: {
+            control: string;
+            description: string;
+        };
+        profileClicked: {
+            action: string;
+            description: string;
+        };
+        profileItems: {
+            control: string;
+            description: string;
+        };
+        profileItemClicked: {
+            action: string;
+            description: string;
+        };
+        profileSwitchChanged: {
+            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 WithoutPhotoOrEmail: any;
+export declare const WithProfileMenu: {
+    (args: StoryArgs): any;
+    args: {
+        menuTitle: string;
+        density: SulaMenuDensity;
+        labelOverflow: SulaMenuLabelOverflow;
+        drilldownLevel: number;
+        items: SulaWorkbenchMenuItem[];
+        user: {
+            name: string;
+            email: string;
+        };
+        profileItems: SulaProfileMenuItem[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CustomProfileItems: any;
+export declare const ControlledDrillPath: {
+    (args: StoryArgs): HTMLDivElement;
+    args: {
+        menuTitle: string;
+        density: SulaMenuDensity;
+        labelOverflow: SulaMenuLabelOverflow;
+        drilldownLevel: number;
+        items: SulaWorkbenchMenuItem[];
+        user: SulaWorkbenchMenuUser;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const InlineOnly: any;
+export declare const ComparisonWithCurrentSulaMenu: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ComparisonDrilldownFourthLevel: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/types/components.d.ts

@@ -18,6 +18,7 @@ import { SulaIconPickerIcon } from "./components/sula-icon-picker/model/sula-ico
 import { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.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 { SulaProfileMenuItem, SulaProfileMenuSwitchChange, SulaProfileMenuUser } from "./components/sula-profile-menu/model/sula-profile-menu.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 { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from "./components/sula-segmented-control/model/sula-segmented-control.model";
@@ -31,6 +32,7 @@ import { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula
 import { SulaToastAnnouncement, SulaToastDismissEvent, SulaToastItem, SulaToastStackActionEvent, SulaToastStackDismissEvent, SulaToastType } from "./components/sula-toast/model/sula-toast.model";
 import { SulaToggleEvent } from "./components/sula-toggle/model/sula-toggle.model";
 import { SulaTooltipPosition, SulaTooltipTrigger } from "./components/sula-tooltip/model/sula-tooltip.model";
+import { SulaWorkbenchMenuItem, SulaWorkbenchMenuPath, SulaWorkbenchMenuUser } from "./components/sula-workbench-menu/model/sula-workbench-menu.model";
 export { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 export { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
 export { SulaMenuBreadcrumb } from "./components/sula-breadcrumb/model/sula-breadcrumb.model";
@@ -44,6 +46,7 @@ export { SulaIconPickerIcon } from "./components/sula-icon-picker/model/sula-ico
 export { SulaLoaderSize } from "./components/sula-loader/model/sula-loader.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 { SulaProfileMenuItem, SulaProfileMenuSwitchChange, SulaProfileMenuUser } from "./components/sula-profile-menu/model/sula-profile-menu.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 { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from "./components/sula-segmented-control/model/sula-segmented-control.model";
@@ -57,6 +60,7 @@ export { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula
 export { SulaToastAnnouncement, SulaToastDismissEvent, SulaToastItem, SulaToastStackActionEvent, SulaToastStackDismissEvent, SulaToastType } from "./components/sula-toast/model/sula-toast.model";
 export { SulaToggleEvent } from "./components/sula-toggle/model/sula-toggle.model";
 export { SulaTooltipPosition, SulaTooltipTrigger } from "./components/sula-tooltip/model/sula-tooltip.model";
+export { SulaWorkbenchMenuItem, SulaWorkbenchMenuPath, SulaWorkbenchMenuUser } from "./components/sula-workbench-menu/model/sula-workbench-menu.model";
 export namespace Components {
     interface SulaAvatar {
         /**
@@ -535,6 +539,22 @@ export namespace Components {
          */
         "type": SulaModalType;
     }
+    /**
+     * Profile card with the logged user and a configurable list of options.
+     * It has no positioning of its own: place it inside a popover, dropdown or panel.
+     * The component only emits events: what each option does is up to the host application.
+     */
+    interface SulaProfileMenu {
+        /**
+          * Options of the list. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.
+          * @default []
+         */
+        "items": SulaProfileMenuItem[];
+        /**
+          * Logged user. Without a photo, the initials are shown.
+         */
+        "user"?: SulaProfileMenuUser;
+    }
     interface SulaProgressBar {
         /**
           * The style of the progress bar.
@@ -967,6 +987,68 @@ export namespace Components {
          */
         "trigger": SulaTooltipTrigger;
     }
+    /**
+     * Navigation menu that combines an inline expandable tree with a drill-down panel.
+     * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
+     * that level with children open a single-level panel with a breadcrumb trail.
+     * @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.
+     */
+    interface SulaWorkbenchMenu {
+        /**
+          * Icon used for items without `icon` or `image`. Use an empty string to show no icon.
+          * @default 'ph ph-dot-outline'
+         */
+        "defaultIcon": string;
+        /**
+          * Density applied to menu items.
+          * @default SulaMenuDensity.Default
+         */
+        "density": SulaMenuDensity;
+        /**
+          * Controls the drill-down from the host: ids from the root to the item whose children are shown. An empty array shows the tree (leaves the drill-down). Leave it undefined to let only user clicks navigate.
+         */
+        "drillPath"?: string[];
+        /**
+          * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place. With the default of 3, the first two levels expand inline and deeper branches drill down.
+          * @default 3
+         */
+        "drilldownLevel": number;
+        /**
+          * Menu image
+          * @default ''
+         */
+        "image": string;
+        /**
+          * Menu items. Each item may use `icon` (icon font class) or `image` (URL or data URI of an image or SVG).
+          * @default []
+         */
+        "items": SulaWorkbenchMenuItem[];
+        /**
+          * Overflow behavior for item labels.
+          * @default SulaMenuLabelOverflow.Wrap
+         */
+        "labelOverflow": SulaMenuLabelOverflow;
+        /**
+          * Menu title
+          * @default ''
+         */
+        "menuTitle": string;
+        /**
+          * Options of the profile popover. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.
+          * @default []
+         */
+        "profileItems": SulaProfileMenuItem[];
+        /**
+          * Logged user shown at the bottom of the menu. Without a photo, the initials are shown.
+         */
+        "user"?: SulaWorkbenchMenuUser;
+        /**
+          * 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;
+    }
 }
 export interface SulaBreadcrumbCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1008,6 +1090,10 @@ export interface SulaModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaModalElement;
 }
+export interface SulaProfileMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaProfileMenuElement;
+}
 export interface SulaRadioButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaRadioButtonElement;
@@ -1052,6 +1138,10 @@ export interface SulaToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaToggleElement;
 }
+export interface SulaWorkbenchMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaWorkbenchMenuElement;
+}
 declare global {
     interface HTMLSulaAvatarElement extends Components.SulaAvatar, HTMLStencilElement {
     }
@@ -1274,6 +1364,29 @@ declare global {
         prototype: HTMLSulaModalElement;
         new (): HTMLSulaModalElement;
     };
+    interface HTMLSulaProfileMenuElementEventMap {
+        "itemClicked": SulaProfileMenuItem;
+        "switchChanged": SulaProfileMenuSwitchChange;
+    }
+    /**
+     * Profile card with the logged user and a configurable list of options.
+     * It has no positioning of its own: place it inside a popover, dropdown or panel.
+     * The component only emits events: what each option does is up to the host application.
+     */
+    interface HTMLSulaProfileMenuElement extends Components.SulaProfileMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaProfileMenuElementEventMap>(type: K, listener: (this: HTMLSulaProfileMenuElement, ev: SulaProfileMenuCustomEvent<HTMLSulaProfileMenuElementEventMap[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 HTMLSulaProfileMenuElementEventMap>(type: K, listener: (this: HTMLSulaProfileMenuElement, ev: SulaProfileMenuCustomEvent<HTMLSulaProfileMenuElementEventMap[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 HTMLSulaProfileMenuElement: {
+        prototype: HTMLSulaProfileMenuElement;
+        new (): HTMLSulaProfileMenuElement;
+    };
     interface HTMLSulaProgressBarElement extends Components.SulaProgressBar, HTMLStencilElement {
     }
     var HTMLSulaProgressBarElement: {
@@ -1534,6 +1647,36 @@ declare global {
         prototype: HTMLSulaTooltipElement;
         new (): HTMLSulaTooltipElement;
     };
+    interface HTMLSulaWorkbenchMenuElementEventMap {
+        "itemSelected": SulaWorkbenchMenuItem;
+        "itemClicked": SulaWorkbenchMenuItem;
+        "levelChanged": SulaWorkbenchMenuPath;
+        "profileClicked": SulaWorkbenchMenuUser;
+        "profileItemClicked": SulaProfileMenuItem;
+        "profileSwitchChanged": SulaProfileMenuSwitchChange;
+        "menuToggled": boolean;
+    }
+    /**
+     * Navigation menu that combines an inline expandable tree with a drill-down panel.
+     * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
+     * that level with children open a single-level panel with a breadcrumb trail.
+     * @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.
+     */
+    interface HTMLSulaWorkbenchMenuElement extends Components.SulaWorkbenchMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaWorkbenchMenuElementEventMap>(type: K, listener: (this: HTMLSulaWorkbenchMenuElement, ev: SulaWorkbenchMenuCustomEvent<HTMLSulaWorkbenchMenuElementEventMap[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 HTMLSulaWorkbenchMenuElementEventMap>(type: K, listener: (this: HTMLSulaWorkbenchMenuElement, ev: SulaWorkbenchMenuCustomEvent<HTMLSulaWorkbenchMenuElementEventMap[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 HTMLSulaWorkbenchMenuElement: {
+        prototype: HTMLSulaWorkbenchMenuElement;
+        new (): HTMLSulaWorkbenchMenuElement;
+    };
     interface HTMLElementTagNameMap {
         "sula-avatar": HTMLSulaAvatarElement;
         "sula-badge": HTMLSulaBadgeElement;
@@ -1549,6 +1692,7 @@ declare global {
         "sula-menu": HTMLSulaMenuElement;
         "sula-menu-select-list": HTMLSulaMenuSelectListElement;
         "sula-modal": HTMLSulaModalElement;
+        "sula-profile-menu": HTMLSulaProfileMenuElement;
         "sula-progress-bar": HTMLSulaProgressBarElement;
         "sula-radio-button": HTMLSulaRadioButtonElement;
         "sula-search-bar": HTMLSulaSearchBarElement;
@@ -1569,6 +1713,7 @@ declare global {
         "sula-toast-stack": HTMLSulaToastStackElement;
         "sula-toggle": HTMLSulaToggleElement;
         "sula-tooltip": HTMLSulaTooltipElement;
+        "sula-workbench-menu": HTMLSulaWorkbenchMenuElement;
     }
 }
 declare namespace LocalJSX {
@@ -2162,6 +2307,30 @@ declare namespace LocalJSX {
          */
         "type"?: SulaModalType;
     }
+    /**
+     * Profile card with the logged user and a configurable list of options.
+     * It has no positioning of its own: place it inside a popover, dropdown or panel.
+     * The component only emits events: what each option does is up to the host application.
+     */
+    interface SulaProfileMenu {
+        /**
+          * Options of the list. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.
+          * @default []
+         */
+        "items"?: SulaProfileMenuItem[];
+        /**
+          * Emitted when an option without switch is clicked
+         */
+        "onItemClicked"?: (event: SulaProfileMenuCustomEvent<SulaProfileMenuItem>) => void;
+        /**
+          * Emitted when the switch of an option changes
+         */
+        "onSwitchChanged"?: (event: SulaProfileMenuCustomEvent<SulaProfileMenuSwitchChange>) => void;
+        /**
+          * Logged user. Without a photo, the initials are shown.
+         */
+        "user"?: SulaProfileMenuUser;
+    }
     interface SulaProgressBar {
         /**
           * The style of the progress bar.
@@ -2704,6 +2873,96 @@ declare namespace LocalJSX {
          */
         "trigger"?: SulaTooltipTrigger;
     }
+    /**
+     * Navigation menu that combines an inline expandable tree with a drill-down panel.
+     * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
+     * that level with children open a single-level panel with a breadcrumb trail.
+     * @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.
+     */
+    interface SulaWorkbenchMenu {
+        /**
+          * Icon used for items without `icon` or `image`. Use an empty string to show no icon.
+          * @default 'ph ph-dot-outline'
+         */
+        "defaultIcon"?: string;
+        /**
+          * Density applied to menu items.
+          * @default SulaMenuDensity.Default
+         */
+        "density"?: SulaMenuDensity;
+        /**
+          * Controls the drill-down from the host: ids from the root to the item whose children are shown. An empty array shows the tree (leaves the drill-down). Leave it undefined to let only user clicks navigate.
+         */
+        "drillPath"?: string[];
+        /**
+          * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place. With the default of 3, the first two levels expand inline and deeper branches drill down.
+          * @default 3
+         */
+        "drilldownLevel"?: number;
+        /**
+          * Menu image
+          * @default ''
+         */
+        "image"?: string;
+        /**
+          * Menu items. Each item may use `icon` (icon font class) or `image` (URL or data URI of an image or SVG).
+          * @default []
+         */
+        "items"?: SulaWorkbenchMenuItem[];
+        /**
+          * Overflow behavior for item labels.
+          * @default SulaMenuLabelOverflow.Wrap
+         */
+        "labelOverflow"?: SulaMenuLabelOverflow;
+        /**
+          * Menu title
+          * @default ''
+         */
+        "menuTitle"?: string;
+        /**
+          * Emitted when any item is clicked
+         */
+        "onItemClicked"?: (event: SulaWorkbenchMenuCustomEvent<SulaWorkbenchMenuItem>) => void;
+        /**
+          * Emitted when a leaf item is selected
+         */
+        "onItemSelected"?: (event: SulaWorkbenchMenuCustomEvent<SulaWorkbenchMenuItem>) => void;
+        /**
+          * Emitted when the drill-down level changes, with the ids from the root to the level shown (empty at the root)
+         */
+        "onLevelChanged"?: (event: SulaWorkbenchMenuCustomEvent<SulaWorkbenchMenuPath>) => void;
+        /**
+          * Emitted when the menu is toggled between collapsed and expanded states True: Menu is expanded False: Menu is collapsed
+         */
+        "onMenuToggled"?: (event: SulaWorkbenchMenuCustomEvent<boolean>) => void;
+        /**
+          * Emitted when the user area is clicked. Call `preventDefault()` to keep the profile popover closed.
+         */
+        "onProfileClicked"?: (event: SulaWorkbenchMenuCustomEvent<SulaWorkbenchMenuUser>) => void;
+        /**
+          * Emitted when a profile popover option without switch is clicked. The popover closes.
+         */
+        "onProfileItemClicked"?: (event: SulaWorkbenchMenuCustomEvent<SulaProfileMenuItem>) => void;
+        /**
+          * Emitted when the switch of a profile popover option changes. The popover stays open.
+         */
+        "onProfileSwitchChanged"?: (event: SulaWorkbenchMenuCustomEvent<SulaProfileMenuSwitchChange>) => void;
+        /**
+          * Options of the profile popover. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.
+          * @default []
+         */
+        "profileItems"?: SulaProfileMenuItem[];
+        /**
+          * Logged user shown at the bottom of the menu. Without a photo, the initials are shown.
+         */
+        "user"?: SulaWorkbenchMenuUser;
+        /**
+          * 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 IntrinsicElements {
         "sula-avatar": SulaAvatar;
         "sula-badge": SulaBadge;
@@ -2719,6 +2978,7 @@ declare namespace LocalJSX {
         "sula-menu": SulaMenu;
         "sula-menu-select-list": SulaMenuSelectList;
         "sula-modal": SulaModal;
+        "sula-profile-menu": SulaProfileMenu;
         "sula-progress-bar": SulaProgressBar;
         "sula-radio-button": SulaRadioButton;
         "sula-search-bar": SulaSearchBar;
@@ -2739,6 +2999,7 @@ declare namespace LocalJSX {
         "sula-toast-stack": SulaToastStack;
         "sula-toggle": SulaToggle;
         "sula-tooltip": SulaTooltip;
+        "sula-workbench-menu": SulaWorkbenchMenu;
     }
 }
 export { LocalJSX as JSX };
@@ -2768,6 +3029,12 @@ declare module "@stencil/core" {
             "sula-menu": LocalJSX.SulaMenu & JSXBase.HTMLAttributes<HTMLSulaMenuElement>;
             "sula-menu-select-list": LocalJSX.SulaMenuSelectList & JSXBase.HTMLAttributes<HTMLSulaMenuSelectListElement>;
             "sula-modal": LocalJSX.SulaModal & JSXBase.HTMLAttributes<HTMLSulaModalElement>;
+            /**
+             * Profile card with the logged user and a configurable list of options.
+             * It has no positioning of its own: place it inside a popover, dropdown or panel.
+             * The component only emits events: what each option does is up to the host application.
+             */
+            "sula-profile-menu": LocalJSX.SulaProfileMenu & JSXBase.HTMLAttributes<HTMLSulaProfileMenuElement>;
             "sula-progress-bar": LocalJSX.SulaProgressBar & JSXBase.HTMLAttributes<HTMLSulaProgressBarElement>;
             "sula-radio-button": LocalJSX.SulaRadioButton & JSXBase.HTMLAttributes<HTMLSulaRadioButtonElement>;
             "sula-search-bar": LocalJSX.SulaSearchBar & JSXBase.HTMLAttributes<HTMLSulaSearchBarElement>;
@@ -2791,6 +3058,14 @@ declare module "@stencil/core" {
             "sula-toast-stack": LocalJSX.SulaToastStack & JSXBase.HTMLAttributes<HTMLSulaToastStackElement>;
             "sula-toggle": LocalJSX.SulaToggle & JSXBase.HTMLAttributes<HTMLSulaToggleElement>;
             "sula-tooltip": LocalJSX.SulaTooltip & JSXBase.HTMLAttributes<HTMLSulaTooltipElement>;
+            /**
+             * Navigation menu that combines an inline expandable tree with a drill-down panel.
+             * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
+             * that level with children open a single-level panel with a breadcrumb trail.
+             * @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.
+             */
+            "sula-workbench-menu": LocalJSX.SulaWorkbenchMenu & JSXBase.HTMLAttributes<HTMLSulaWorkbenchMenuElement>;
         }
     }
 }

package/dist/types/index.d.ts

@@ -12,5 +12,6 @@ export { SulaMenuDensity, SulaMenuLabelOverflow } from './components/sula-menu/m
 export { SulaCalendarStatus } from './components/sula-calendar/model/sula-calendar.model';
 export type { SulaCalendarDay, SulaCalendarWeekday, SulaCalendarMonthChange, SulaCalendarRange } from './components/sula-calendar/model/sula-calendar.model';
 export type { SulaToggleEvent } from './components/sula-toggle/model/sula-toggle.model';
+export type { SulaProfileMenuItem, SulaProfileMenuSwitchChange, SulaProfileMenuUser } from './components/sula-profile-menu/model/sula-profile-menu.model';
 export { SulaToastType } from './components/sula-toast/model/sula-toast.model';
 export type { SulaToastItem, SulaToastAnnouncement, SulaToastDismissReason, SulaToastDismissEvent, SulaToastStackDismissEvent, SulaToastStackActionEvent, } from './components/sula-toast/model/sula-toast.model';

package/dist/webcomponents/index.esm.js

@@ -1,4 +1,6 @@
-export { b as SulaCalendarStatus, S as SulaMenuDensity, a as SulaMenuLabelOverflow } from "./p-BbsLJDfp.js";
+export { S as SulaMenuDensity, a as SulaMenuLabelOverflow } from "./p-Cs9RR1ZV.js";
+
+export { S as SulaCalendarStatus } from "./p-Cp_4qTxj.js";
 
 export { S as SulaToastType } from "./p-t0X4JATS.js";
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";;"}