@sula-tech/webcomponents 0.0.0-snapshot-feature-workbench-menu-57f51ec → 0.0.0-snapshot-update-release-workflow-eeeefa9

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

@@ -43,6 +43,26 @@ declare const _default: {
             };
             options: SulaModalSlotOverflow[];
         };
+        modalWidth: {
+            control: string;
+            description: string;
+        };
+        slotAutoHeight: {
+            control: string;
+            description: string;
+        };
+        slotMaxHeight: {
+            control: string;
+            description: string;
+        };
+        primaryButtonDisabled: {
+            control: string;
+            description: string;
+        };
+        secondaryButtonDisabled: {
+            control: string;
+            description: string;
+        };
         blockBodyScroll: {
             control: string;
             description: string;
@@ -81,3 +101,5 @@ export declare const ListType: any;
 export declare const CustomFullType: any;
 export declare const SpecialSideType: any;
 export declare const WithCustomSlot: any;
+export declare const WithCustomSlotMaxHeight: any;
+export declare const WithSlotAutoHeight: any;

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

@@ -8,9 +8,9 @@ type CrumbMenuState = {
     top: number;
 };
 /**
- * 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.
+ * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+ * When any visible item reaches a 4th level, every item with children opens a single-level
+ * drill-down panel with a breadcrumb trail instead.
  *
  * @part shell - Main visual container of the menu.
  * @part title - Menu title, or the current level title while drilled in.
@@ -19,7 +19,7 @@ type CrumbMenuState = {
  * @part toggle-label - Label of the collapse/expand control.
  * @slot profile-content - Extra content rendered inside the profile popover.
  * @part profile-popover - Popover opened from the user area.
- * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+ * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
  * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
  */
 export declare class SulaWorkbenchMenu {
@@ -46,10 +46,11 @@ export declare class SulaWorkbenchMenu {
      */
     labelOverflow: SulaMenuLabelOverflow;
     /**
-     * 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.
+     * Controls the navigation from the host: ids from the root to the item whose children are shown.
+     * In drill-down mode an empty array goes back to the root; in inline mode the items on the path are expanded.
+     * Leave it undefined to let only user clicks navigate.
      */
-    drilldownLevel: number;
+    drillPath?: string[];
     /**
      * Menu items. Each item may use `icon` (icon font class) or `image` (URL or data URI of an image or SVG).
      */
@@ -71,7 +72,7 @@ export declare class SulaWorkbenchMenu {
      */
     itemSelected: EventEmitter<SulaWorkbenchMenuItem>;
     /**
-     * Emitted when any item is clicked
+     * Emitted when any item is clickede
      */
     itemClicked: EventEmitter<SulaWorkbenchMenuItem>;
     /**
@@ -98,6 +99,7 @@ export declare class SulaWorkbenchMenu {
     menuToggled: EventEmitter<boolean>;
     collapsed: boolean;
     previewExpanded: boolean;
+    drillMode: boolean;
     stack: SulaWorkbenchMenuItem[];
     direction: SulaWorkbenchMenuDirection;
     selectedPath: SulaWorkbenchMenuPath;
@@ -108,11 +110,18 @@ export declare class SulaWorkbenchMenu {
     private shellEl?;
     private userInfoEl?;
     private profileEl?;
+    private profileOriginEl?;
     private hovering;
+    private expandedPath?;
     private get normalizedWidth();
     private get hostStyleVariables();
     componentWillLoad(): void;
     syncWithItems(items: SulaWorkbenchMenuItem[]): void;
+    syncDrillPath(path?: string[]): void;
+    private applyDrillPath;
+    private expandInline;
+    private markExpanded;
+    private maxDepth;
     componentDidRender(): void;
     onDocumentClick(event: MouseEvent): void;
     onDocumentKeydown(event: KeyboardEvent): void;
@@ -159,6 +168,7 @@ export declare class SulaWorkbenchMenu {
     private renderCrumbDropdown;
     private renderDrillHeader;
     private renderDrillRow;
+    private renderDrillLayers;
     private renderDrillPanel;
     private getMainIconClass;
     private getMainCaretClass;
@@ -168,7 +178,6 @@ export declare class SulaWorkbenchMenu {
     private renderIconSlot;
     private renderMainRow;
     private renderSubRow;
-    private depthOf;
     private renderInlineList;
     render(): any;
 }

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

@@ -3,9 +3,10 @@ import { SulaProfileMenuItem } from '../sula-profile-menu/model/sula-profile-men
 import { SulaWorkbenchMenuItem, SulaWorkbenchMenuUser } from './model/sula-workbench-menu.model';
 type StoryArgs = {
     menuTitle: string;
+    image?: string;
     density: SulaMenuDensity;
     labelOverflow: SulaMenuLabelOverflow;
-    drilldownLevel: number;
+    drillPath?: string[];
     items: SulaWorkbenchMenuItem[];
     user: SulaWorkbenchMenuUser;
     profileItems?: SulaProfileMenuItem[];
@@ -26,6 +27,10 @@ declare const _default: {
             defaultValue: string;
             description: string;
         };
+        image: {
+            control: string;
+            description: string;
+        };
         density: {
             control: {
                 type: string;
@@ -40,11 +45,8 @@ declare const _default: {
             options: SulaMenuLabelOverflow[];
             description: string;
         };
-        drilldownLevel: {
-            control: {
-                type: string;
-                min: number;
-            };
+        drillPath: {
+            control: string;
             description: string;
         };
         items: {
@@ -105,7 +107,6 @@ export declare const WithProfileMenu: {
         menuTitle: string;
         density: SulaMenuDensity;
         labelOverflow: SulaMenuLabelOverflow;
-        drilldownLevel: number;
         items: SulaWorkbenchMenuItem[];
         user: {
             name: string;
@@ -122,19 +123,15 @@ export declare const WithProfileMenu: {
     };
 };
 export declare const CustomProfileItems: any;
-export declare const InlineOnly: any;
-export declare const ComparisonWithCurrentSulaMenu: {
-    (): HTMLDivElement;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
+export declare const ControlledDrillPath: {
+    (args: StoryArgs): HTMLDivElement;
+    args: {
+        menuTitle: string;
+        density: SulaMenuDensity;
+        labelOverflow: SulaMenuLabelOverflow;
+        items: SulaWorkbenchMenuItem[];
+        user: SulaWorkbenchMenuUser;
     };
-};
-export declare const ComparisonDrilldownFourthLevel: {
-    (): HTMLDivElement;
     parameters: {
         docs: {
             description: {
@@ -143,3 +140,13 @@ export declare const ComparisonDrilldownFourthLevel: {
         };
     };
 };
+export declare const InlineOnly: any;
+export declare const InlineWithExpandedPath: any;
+export declare const FourthLevelBreadcrumb: any;
+export declare const WithBrandImage: any;
+export declare const LongLabels: any;
+export declare const LongLabelsTruncate: any;
+export declare const CompactDensity: any;
+export declare const ComfortableDensity: any;
+export declare const HiddenAndDisabledItems: any;
+export declare const WithoutUser: any;

package/dist/types/components.d.ts

@@ -276,6 +276,10 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Icon class displayed before the text, e.g. `ph ph-download-simple`
+         */
+        "icon"?: string;
         /**
           * Items for list
           * @default []
@@ -499,11 +503,21 @@ export namespace Components {
           * @default ''
          */
         "modalTitle": string;
+        /**
+          * Modal width on desktop (any CSS value, e.g. `900px`). Empty keeps the type default
+          * @default ''
+         */
+        "modalWidth": string;
         /**
           * Is modal opened
           * @default false
          */
         "opened": boolean;
+        /**
+          * Disable the primary button
+          * @default false
+         */
+        "primaryButtonDisabled": boolean;
         /**
           * Primary button text
           * @default ''
@@ -514,11 +528,26 @@ export namespace Components {
           * @default ''
          */
         "promoImage": string;
+        /**
+          * Disable the secondary button
+          * @default false
+         */
+        "secondaryButtonDisabled": boolean;
         /**
           * Secondary button text
           * @default ''
          */
         "secondaryButtonText": string;
+        /**
+          * Let the modal grow with its content (no slot scroll); the overlay scrolls instead when it exceeds the viewport
+          * @default false
+         */
+        "slotAutoHeight": boolean;
+        /**
+          * Max height of the slot area (any CSS value, e.g. `60vh`). Empty keeps the type default
+          * @default ''
+         */
+        "slotMaxHeight": string;
         /**
           * Slot overflow behavior
           * @default SulaModalSlotOverflow.Auto
@@ -984,10 +1013,10 @@ 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.
+     * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+     * When any visible item reaches a 4th level, every item with children opens a single-level
+     * drill-down panel with a breadcrumb trail instead.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
      * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
      */
     interface SulaWorkbenchMenu {
@@ -1002,10 +1031,9 @@ export namespace Components {
          */
         "density": SulaMenuDensity;
         /**
-          * 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
+          * Controls the navigation from the host: ids from the root to the item whose children are shown. In drill-down mode an empty array goes back to the root; in inline mode the items on the path are expanded. Leave it undefined to let only user clicks navigate.
          */
-        "drilldownLevel": number;
+        "drillPath"?: string[];
         /**
           * Menu image
           * @default ''
@@ -1649,10 +1677,10 @@ declare global {
         "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.
+     * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+     * When any visible item reaches a 4th level, every item with children opens a single-level
+     * drill-down panel with a breadcrumb trail instead.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
      * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
      */
     interface HTMLSulaWorkbenchMenuElement extends Components.SulaWorkbenchMenu, HTMLStencilElement {
@@ -1968,6 +1996,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Icon class displayed before the text, e.g. `ph ph-download-simple`
+         */
+        "icon"?: string;
         /**
           * Items for list
           * @default []
@@ -2247,6 +2279,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "modalTitle"?: string;
+        /**
+          * Modal width on desktop (any CSS value, e.g. `900px`). Empty keeps the type default
+          * @default ''
+         */
+        "modalWidth"?: string;
         /**
           * Event emitted when the modal is closed
          */
@@ -2264,6 +2301,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "opened"?: boolean;
+        /**
+          * Disable the primary button
+          * @default false
+         */
+        "primaryButtonDisabled"?: boolean;
         /**
           * Primary button text
           * @default ''
@@ -2274,11 +2316,26 @@ declare namespace LocalJSX {
           * @default ''
          */
         "promoImage"?: string;
+        /**
+          * Disable the secondary button
+          * @default false
+         */
+        "secondaryButtonDisabled"?: boolean;
         /**
           * Secondary button text
           * @default ''
          */
         "secondaryButtonText"?: string;
+        /**
+          * Let the modal grow with its content (no slot scroll); the overlay scrolls instead when it exceeds the viewport
+          * @default false
+         */
+        "slotAutoHeight"?: boolean;
+        /**
+          * Max height of the slot area (any CSS value, e.g. `60vh`). Empty keeps the type default
+          * @default ''
+         */
+        "slotMaxHeight"?: string;
         /**
           * Slot overflow behavior
           * @default SulaModalSlotOverflow.Auto
@@ -2862,10 +2919,10 @@ 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.
+     * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+     * When any visible item reaches a 4th level, every item with children opens a single-level
+     * drill-down panel with a breadcrumb trail instead.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
      * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
      */
     interface SulaWorkbenchMenu {
@@ -2880,10 +2937,9 @@ declare namespace LocalJSX {
          */
         "density"?: SulaMenuDensity;
         /**
-          * 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
+          * Controls the navigation from the host: ids from the root to the item whose children are shown. In drill-down mode an empty array goes back to the root; in inline mode the items on the path are expanded. Leave it undefined to let only user clicks navigate.
          */
-        "drilldownLevel"?: number;
+        "drillPath"?: string[];
         /**
           * Menu image
           * @default ''
@@ -2905,7 +2961,7 @@ declare namespace LocalJSX {
          */
         "menuTitle"?: string;
         /**
-          * Emitted when any item is clicked
+          * Emitted when any item is clickede
          */
         "onItemClicked"?: (event: SulaWorkbenchMenuCustomEvent<SulaWorkbenchMenuItem>) => void;
         /**
@@ -3043,10 +3099,10 @@ declare module "@stencil/core" {
             "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.
+             * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+             * When any visible item reaches a 4th level, every item with children opens a single-level
+             * drill-down panel with a breadcrumb trail instead.
+             * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
              * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
              */
             "sula-workbench-menu": LocalJSX.SulaWorkbenchMenu & JSXBase.HTMLAttributes<HTMLSulaWorkbenchMenuElement>;

package/dist/webcomponents/{p-df271629.entry.js → p-18c84807.entry.js}

@@ -273,9 +273,9 @@ const h = class {
     const t = this.expanded;
     const o = this.visibleItems;
     return e(a, {
-      key: "f80b3b3f370e40ba87a261825af7ee9f55fe99dc"
+      key: "c02d5830981122b0267e560f911ee98cdd726bd7"
     }, e("section", {
-      key: "d5a233e0b204060a1bde1bb09eac204a5c8f5ca7",
+      key: "cbfa6dcdd964fc1d42546a43e5980dc49e84b30f",
       ref: t => this.region = t,
       role: "region",
       "aria-label": "Notificações",
@@ -296,7 +296,7 @@ const h = class {
       onFocusin: () => this.focused = true,
       onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "e409f3009f2c19839304f06b05b0409d9cc6a819",
+      key: "ee70118013b6e5e3313db30c27571bf3cc3009af",
       ref: t => this.list = t,
       class: {
         "toast-list relative flex flex-col gap-12": true,
@@ -340,7 +340,7 @@ const h = class {
         onToastAction: t => this.action(t, a.id)
       }));
     })))), e("div", {
-      key: "2b2eadddfde8a784d9c2f1c7f431d82619eb57dc",
+      key: "37091de2d263942ad15dbdc52cd229b98a8f7c1c",
       class: "sr-only",
       role: "status",
       "aria-live": "polite",
@@ -349,7 +349,7 @@ const h = class {
     }, this.announcements.filter((t => t.priority === "polite")).map((t => e("p", {
       key: t.version
     }, t.text)))), e("div", {
-      key: "0207426e568669405be5a1d99c47338d72607bdf",
+      key: "a5bc35d0759a6a71cb9b7d9ad76cfd3ce9fee9b6",
       class: "sr-only",
       role: "alert",
       "aria-live": "assertive",
@@ -373,4 +373,4 @@ h.style = n;
 
 export { h as sula_toast_stack };
 //# sourceMappingURL=sula-toast-stack.entry.esm.js.map
-//# sourceMappingURL=p-df271629.entry.js.map
+//# sourceMappingURL=p-18c84807.entry.js.map