@momentum-design/components 0.123.4 → 0.124.0

package/dist/components/navmenuitem/navmenuitem.styles.js

@@ -4,10 +4,15 @@ const styles = [
     hostFitContentStyles,
     css `
     :host {
+      --mdc-navmenuitem-in-sidenav-expanded-width: var(--mdc-sidenavigation-expanded-width, 100%);
+      --mdc-navmenuitem-in-sidenav-expanded-margin-left: var(--mdc-sidenavigation-expanded-left-padding, 1rem);
+      --mdc-navmenuitem-in-sidenav-expanded-margin-right: var(--mdc-sidenavigation-expanded-right-padding, 1rem);
+      --mdc-navmenuitem-in-sidenav-collapsed-width: var(--mdc-sidenavigation-collapsed-width, fit-content);
+      --mdc-navmenuitem-in-sidenav-collapsed-margin-left: var(--mdc-sidenavigation-collapsed-left-padding, 1rem);
+      --mdc-navmenuitem-in-sidenav-collapsed-margin-right: var(--mdc-sidenavigation-collapsed-right-padding, 1rem);
+
       --mdc-navmenuitem-color: var(--mds-color-theme-text-primary-normal);
       --mdc-navmenuitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
-      --mdc-navmenuitem-border-color: var(--mds-color-theme-outline-button-normal);
-      --mdc-navmenuitem-expanded-width: 12.75rem;
 
       /* Background color when in default (normal) or active state */
       --mdc-navmenuitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
@@ -19,30 +24,62 @@ const styles = [
       --mdc-navmenuitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
 
       position: relative;
+      flex-shrink: 0;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem;
       color: var(--mdc-navmenuitem-color);
-      border-color: var(--mdc-navmenuitem-border-color);
       border-radius: 0.5rem;
       cursor: pointer;
     }
 
+    :host::part(icon-container) {
+      position: relative;
+    }
+
+    :host([active]:not([cannot-activate]))::part(regular-icon) {
+      display: none;
+    }
+
+    :host([active]:not([cannot-activate]))::part(filled-icon) {
+      display: block;
+    }
+
+    :host::part(regular-icon) {
+      display: block;
+    }
+
+    :host::part(filled-icon) {
+      display: none;
+    }
+
+    :host([in-menupopover]) {
+      width: 100%;
+    }
+
     :host(:not([in-menupopover])) {
       border-radius: 1.25rem;
     }
 
-    :host(:not([in-menupopover]):dir(ltr)) {
-      margin-left: 1rem;
-    }
+    :host([show-label]:not([in-menupopover])) {
+      width: calc(
+        var(--mdc-navmenuitem-in-sidenav-expanded-width) - var(--mdc-navmenuitem-in-sidenav-expanded-margin-left) - var(
+            --mdc-navmenuitem-in-sidenav-expanded-margin-right
+          )
+      );
 
-    :host(:not([in-menupopover]):dir(rtl)) {
-      margin-right: 1rem;
+      margin-inline-start: var(--mdc-navmenuitem-in-sidenav-expanded-margin-left);
     }
 
-    :host([show-label]) {
-      width: var(--mdc-navmenuitem-expanded-width);
+    :host(:not([show-label]):not([in-menupopover])) {
+      width: calc(
+        var(--mdc-navmenuitem-in-sidenav-collapsed-width) - var(--mdc-navmenuitem-in-sidenav-collapsed-margin-left) - var(
+            --mdc-navmenuitem-in-sidenav-collapsed-margin-right
+          )
+      );
+
+      margin-inline-start: var(--mdc-navmenuitem-in-sidenav-collapsed-margin-left);
     }
 
     :host([active]) {
@@ -86,13 +123,23 @@ const styles = [
       visibility: hidden;
     }
 
-    :host(:dir(ltr))::before {
-      left: -1rem;
+    :host([show-label]:dir(ltr))::before {
+      left: calc(-1 * var(--mdc-navmenuitem-in-sidenav-expanded-margin-left));
+      border-radius: 0 0.25rem 0.25rem 0;
+    }
+
+    :host([show-label]:dir(rtl))::before {
+      right: calc(-1 * var(--mdc-navmenuitem-in-sidenav-expanded-margin-left));
+      border-radius: 0.25rem 0 0 0.25rem;
+    }
+
+    :host(:not([show-label]):dir(ltr))::before {
+      left: calc(-1 * var(--mdc-navmenuitem-in-sidenav-collapsed-margin-left));
       border-radius: 0 0.25rem 0.25rem 0;
     }
 
-    :host(:dir(rtl))::before {
-      right: -1rem;
+    :host(:not([show-label]):dir(rtl))::before {
+      right: calc(-1 * var(--mdc-navmenuitem-in-sidenav-collapsed-margin-left));
       border-radius: 0.25rem 0 0 0.25rem;
     }
 
@@ -111,10 +158,6 @@ const styles = [
       white-space: nowrap;
     }
 
-    :host::part(icon-container) {
-      position: relative;
-    }
-
     :host(:dir(ltr))::part(badge) {
       position: absolute;
       right: -0.375rem;
@@ -129,23 +172,15 @@ const styles = [
 
     :host(:not([show-label]))::part(trailing-arrow) {
       --mdc-icon-size: 0.75rem;
-    }
-
-    :host([show-label])::part(trailing-arrow) {
-      --mdc-icon-size: 1rem;
       flex-shrink: 0;
-    }
 
-    :host(:dir(ltr))::part(arrow) {
       position: absolute;
-      right: -0.75rem;
+      inset-inline-end: -0.25rem;
       top: 0.875rem;
     }
 
-    :host(:dir(rtl))::part(arrow) {
-      position: absolute;
-      left: -0.75rem;
-      top: 0.875rem;
+    :host([show-label])::part(trailing-arrow) {
+      flex-shrink: 0;
     }
 
     :host mdc-badge {

package/dist/components/popover/popover.component.js

@@ -519,10 +519,12 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          *  This method checks if the trigger element has visible focus or is being hovered.
          */
         this.handleFocusIn = (event) => {
-            var _a;
+            var _a, _b, _c, _d;
             if (!this.isEventFromTrigger(event))
                 return;
-            if (((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) || this.isHovered) {
+            if (((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) ||
+                ((_d = (_c = (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.mdc-focus-ring')) === null || _d === void 0 ? void 0 : _d.matches(':focus-visible')) ||
+                this.isHovered) {
                 this.show();
             }
         };

package/dist/components/sidenavigation/sidenavigation.component.d.ts

@@ -7,7 +7,7 @@ import SideNavigationContext from './sidenavigation.context';
  * typically used in layouts with persistent or collapsible sidebars.
  *
  * ## Features:
- * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`
  * - Toggleable expand/collapse behavior
  * - Displays brand logo and customer name
  * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
@@ -47,13 +47,17 @@ import SideNavigationContext from './sidenavigation.context';
  * @tagname mdc-sidenavigation
  *
  * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot fixed-menubar - Slot for the menubar inside the fixed section.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
  *
  * @csspart side-navigation-container - The main container wrapping the entire side navigation.
  * @csspart scrollable-section - The scrollable section of the side navigation.
- * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart scrollable-menubar - The menubar inside the scrollable section.
  * @csspart separator - The divider between the scrollable and fixed sections.
+ * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart fixed-menubar - The menubar inside the fixed section.
  * @csspart brand-logo-container - The container wrapping the brand logo and footer text.
  * @csspart footer-text - The footer text label in the fixed section.
  * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
@@ -63,28 +67,40 @@ import SideNavigationContext from './sidenavigation.context';
  * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
  *
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded
  * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off
+ * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section
  * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 declare class SideNavigation extends Provider<SideNavigationContext> {
     /**
-     * Four variants of the sideNavigation
+     * Five variants of the sideNavigation
      * - **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.
      * - **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.
      * - **flexible**: Toggles between collapsed/expanded states.
+     * - **flexible-on-hover**: Similar to flexible, but the grabber button is only visible on hover or focus.
      * - **hidden**: Removes the sidenavigation from the DOM.
      * @default flexible
      */
     variant: SideNavigationVariant;
     /**
      * Displays footer text in the bottom section of the sidenavigation.
+     *
+     * Note: if footerText is not provided, the bottom brand logo section will not be rendered.
      * @default ''
      */
     footerText: string;
     /**
      * Determines whether the sideNavigation is expanded or not.
      *
-     * @internal
+     * NOTE: For `fixed-collapsed` and `fixed-expanded` variants, this property is hard set to `false` and `true` respectively.
+     * For `flexible` and `flexible-on-hover` variants, this property can be toggled / controlled from parent.
+     *
+     * @default true
      */
     expanded?: boolean;
     /**
@@ -95,11 +111,39 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
      */
     grabberBtnAriaLabel?: string;
     /**
-     * Tooltip text shown on parent nav items when a child is active.
+     * Hides the divider between the scrollable and fixed sections when set to true.
+     * @default false
      */
-    parentNavTooltipText?: string;
+    hideFixedSectionDivider: boolean;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private isHovered;
+    private isFocused;
+    /** @internal */
+    private handleMouseEnter;
+    /** @internal */
+    private handleMouseLeave;
+    /** @internal */
+    private handleFocusIn;
+    /** @internal */
+    private handleFocusOut;
+    /** @internal */
+    private showGrabberButton;
+    /** @internal */
+    private hideGrabberButton;
+    /**
+     * Sets up event listeners for flexible-on-hover variant.
+     * Only adds listeners if the variant is flexible-on-hover.
+     * @internal
+     */
+    private setupFlexibleOnHoverListeners;
+    /**
+     * Removes event listeners for flexible-on-hover variant.
+     * Safe to call regardless of current variant.
+     * @internal
+     */
+    private removeFlexibleOnHoverListeners;
     static get Context(): {
         __context__: SideNavigationContext;
     };

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -23,7 +23,7 @@ import styles from './sidenavigation.styles';
  * typically used in layouts with persistent or collapsible sidebars.
  *
  * ## Features:
- * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`
  * - Toggleable expand/collapse behavior
  * - Displays brand logo and customer name
  * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
@@ -63,13 +63,17 @@ import styles from './sidenavigation.styles';
  * @tagname mdc-sidenavigation
  *
  * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot fixed-menubar - Slot for the menubar inside the fixed section.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
  *
  * @csspart side-navigation-container - The main container wrapping the entire side navigation.
  * @csspart scrollable-section - The scrollable section of the side navigation.
- * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart scrollable-menubar - The menubar inside the scrollable section.
  * @csspart separator - The divider between the scrollable and fixed sections.
+ * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart fixed-menubar - The menubar inside the fixed section.
  * @csspart brand-logo-container - The container wrapping the brand logo and footer text.
  * @csspart footer-text - The footer text label in the fixed section.
  * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
@@ -79,7 +83,13 @@ import styles from './sidenavigation.styles';
  * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
  *
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded
  * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off
+ * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section
  * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 class SideNavigation extends Provider {
@@ -89,19 +99,88 @@ class SideNavigation extends Provider {
             initialValue: new SideNavigationContext(DEFAULTS.VARIANT, true),
         });
         /**
-         * Four variants of the sideNavigation
+         * Five variants of the sideNavigation
          * - **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.
          * - **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.
          * - **flexible**: Toggles between collapsed/expanded states.
+         * - **flexible-on-hover**: Similar to flexible, but the grabber button is only visible on hover or focus.
          * - **hidden**: Removes the sidenavigation from the DOM.
          * @default flexible
          */
         this.variant = DEFAULTS.VARIANT;
         /**
          * Displays footer text in the bottom section of the sidenavigation.
+         *
+         * Note: if footerText is not provided, the bottom brand logo section will not be rendered.
          * @default ''
          */
         this.footerText = '';
+        /**
+         * Hides the divider between the scrollable and fixed sections when set to true.
+         * @default false
+         */
+        this.hideFixedSectionDivider = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        /** @internal */
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+            this.showGrabberButton();
+        };
+        /** @internal */
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+            if (!this.isFocused) {
+                this.hideGrabberButton();
+            }
+        };
+        /** @internal */
+        this.handleFocusIn = (e) => {
+            if (!this.isFocused) {
+                if (this.navMenuItems.find(item => item === e.target)) {
+                    // if target of focusin event is navMenuItem and it has not a visible focus, do not proceed further.
+                    // this is to avoid showing grabber button on click events
+                    if (!e.target.matches(':focus-visible')) {
+                        return;
+                    }
+                }
+                this.isFocused = true;
+                this.showGrabberButton();
+            }
+        };
+        /** @internal */
+        this.handleFocusOut = (e) => {
+            if (!this.contains(e.relatedTarget)) {
+                this.isFocused = false;
+                if (!this.isHovered) {
+                    this.hideGrabberButton();
+                }
+            }
+        };
+        /**
+         * Sets up event listeners for flexible-on-hover variant.
+         * Only adds listeners if the variant is flexible-on-hover.
+         * @internal
+         */
+        this.setupFlexibleOnHoverListeners = () => {
+            if (this.variant === VARIANTS.FLEXIBLE_ON_HOVER) {
+                this.addEventListener('mouseenter', this.handleMouseEnter);
+                this.addEventListener('mouseleave', this.handleMouseLeave);
+                this.addEventListener('focusin', this.handleFocusIn);
+                this.addEventListener('focusout', this.handleFocusOut);
+            }
+        };
+        /**
+         * Removes event listeners for flexible-on-hover variant.
+         * Safe to call regardless of current variant.
+         * @internal
+         */
+        this.removeFlexibleOnHoverListeners = () => {
+            this.removeEventListener('mouseenter', this.handleMouseEnter);
+            this.removeEventListener('mouseleave', this.handleMouseLeave);
+            this.removeEventListener('focusin', this.handleFocusIn);
+            this.removeEventListener('focusout', this.handleFocusOut);
+        };
         /**
          * Handle the navMenuItem active change event fired from the nested navMenuItem.
          * @internal
@@ -126,6 +205,19 @@ class SideNavigation extends Provider {
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.NAVIGATION;
+        this.setupFlexibleOnHoverListeners();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeFlexibleOnHoverListeners();
+    }
+    /** @internal */
+    showGrabberButton() {
+        this.toggleAttribute('data-grabber-visible', true);
+    }
+    /** @internal */
+    hideGrabberButton() {
+        this.toggleAttribute('data-grabber-visible', false);
     }
     static get Context() {
         return SideNavigationContext.context;
@@ -134,6 +226,9 @@ class SideNavigation extends Provider {
         super.updated(changedProperties);
         if (changedProperties.has('variant')) {
             this.setVariant(this.variant);
+            // Re-setup listeners when variant changes
+            this.removeFlexibleOnHoverListeners();
+            this.setupFlexibleOnHoverListeners();
             // hard set expanded state for fixed variants:
             switch (this.variant) {
                 case VARIANTS.FIXED_EXPANDED:
@@ -151,8 +246,8 @@ class SideNavigation extends Provider {
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        if (this.variant === VARIANTS.FLEXIBLE && this.expanded === undefined) {
-            // if on first update the variant is flexible and expanded is not set, default to expanded true
+        if ((this.variant === VARIANTS.FLEXIBLE || this.variant === VARIANTS.FLEXIBLE_ON_HOVER) &&
+            this.expanded === undefined) {
             this.expanded = true;
             this.updateContext();
         }
@@ -164,12 +259,9 @@ class SideNavigation extends Provider {
      * Is called on every re-render, see Provider class
      */
     updateContext() {
-        if (this.context.value.variant !== this.variant ||
-            this.context.value.expanded !== this.expanded ||
-            this.context.value.parentNavTooltipText !== this.parentNavTooltipText) {
+        if (this.context.value.variant !== this.variant || this.context.value.expanded !== this.expanded) {
             this.context.value.variant = this.variant;
             this.context.value.expanded = this.expanded;
-            this.context.value.parentNavTooltipText = this.parentNavTooltipText;
             this.context.updateObservers();
         }
     }
@@ -197,8 +289,14 @@ class SideNavigation extends Provider {
      *
      * @internal
      */
-    toggleSideNavigation() {
+    toggleSideNavigation(e) {
         this.expanded = !this.expanded;
+        if (this.expanded === false && this.variant === VARIANTS.FLEXIBLE_ON_HOVER && e.pointerType === 'mouse') {
+            // If collapsing via mouse click when in flexible-on-hover mode, reset hover/focus states
+            this.isHovered = false;
+            this.isFocused = false;
+            this.hideGrabberButton();
+        }
         this.dispatchEvent(new CustomEvent('toggle', { detail: { expanded: this.expanded } }));
     }
     preventScrollOnSpace(event) {
@@ -216,29 +314,38 @@ class SideNavigation extends Provider {
       <div part="side-navigation-container" id="side-nav-container">
         <div part="scrollable-section" tabindex="-1" @keydown=${this.preventScrollOnSpace}>
           <slot name="scrollable-section">
-            <mdc-menubar>
+            <mdc-menubar part="scrollable-menubar">
               <slot name="scrollable-menubar"></slot>
             </mdc-menubar>
           </slot>
         </div>
-        <mdc-divider variant="gradient" part="separator"></mdc-divider>
+        ${!this.hideFixedSectionDivider
+            ? html `<mdc-divider variant="gradient" part="separator"></mdc-divider>`
+            : nothing}
         <div part="fixed-section">
           <slot name="fixed-section">
-            <mdc-menubar>
+            <mdc-menubar part="fixed-menubar">
               <slot name="fixed-menubar"></slot>
             </mdc-menubar>
           </slot>
-          <div part="brand-logo-container">
-            <slot name="brand-logo"></slot>
-            ${this.expanded
-            ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} part="footer-text"
-                  >${this.footerText}</mdc-text
-                >`
+          ${this.footerText
+            ? html `
+                <div part="brand-logo-container">
+                  <slot name="brand-logo"></slot>
+                  ${this.expanded
+                ? html ` <mdc-text
+                        type=${TYPE.BODY_MIDSIZE_MEDIUM}
+                        tagname=${VALID_TEXT_TAGS.SPAN}
+                        part="footer-text"
+                        >${this.footerText}</mdc-text
+                      >`
+                : nothing}
+                </div>
+              `
             : nothing}
-          </div>
         </div>
       </div>
-      ${this.variant === VARIANTS.FLEXIBLE
+      ${this.variant === VARIANTS.FLEXIBLE || this.variant === VARIANTS.FLEXIBLE_ON_HOVER
             ? html `<mdc-divider
             part="vertical-divider"
             orientation=${DIVIDER_ORIENTATION.VERTICAL}
@@ -268,7 +375,7 @@ __decorate([
     __metadata("design:type", String)
 ], SideNavigation.prototype, "footerText", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
+    property({ type: Boolean, reflect: true, attribute: 'expanded' }),
     __metadata("design:type", Boolean)
 ], SideNavigation.prototype, "expanded", void 0);
 __decorate([
@@ -276,7 +383,7 @@ __decorate([
     __metadata("design:type", String)
 ], SideNavigation.prototype, "grabberBtnAriaLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'parent-nav-tooltip-text' }),
-    __metadata("design:type", String)
-], SideNavigation.prototype, "parentNavTooltipText", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'hide-fixed-section-divider' }),
+    __metadata("design:type", Boolean)
+], SideNavigation.prototype, "hideFixedSectionDivider", void 0);
 export default SideNavigation;

package/dist/components/sidenavigation/sidenavigation.constants.d.ts

@@ -3,6 +3,7 @@ declare const VARIANTS: {
     FIXED_EXPANDED: string;
     FIXED_COLLAPSED: string;
     FLEXIBLE: string;
+    FLEXIBLE_ON_HOVER: string;
     HIDDEN: string;
 };
 declare const DEFAULTS: {

package/dist/components/sidenavigation/sidenavigation.constants.js

@@ -4,6 +4,7 @@ const VARIANTS = {
     FIXED_EXPANDED: 'fixed-expanded',
     FIXED_COLLAPSED: 'fixed-collapsed',
     FLEXIBLE: 'flexible',
+    FLEXIBLE_ON_HOVER: 'flexible-on-hover',
     HIDDEN: 'hidden',
 };
 const DEFAULTS = {

package/dist/components/sidenavigation/sidenavigation.context.d.ts

@@ -3,11 +3,10 @@ declare class SideNavigationContext {
     variant?: string;
     expanded?: boolean;
     private currentActiveNavMenuItem?;
-    parentNavTooltipText?: string;
     static context: {
         __context__: SideNavigationContext;
     };
-    constructor(defaultVariant?: string, defaultExpanded?: boolean, defaultParentNavTooltipText?: string);
+    constructor(defaultVariant?: string, defaultExpanded?: boolean);
     hasSiblingWithTriggerId(navMenuItem: NavMenuItem | undefined): boolean;
     private getParentNavMenuItems;
     setCurrentActiveNavMenuItem(navMenuItem: NavMenuItem | undefined): void;

package/dist/components/sidenavigation/sidenavigation.context.js

@@ -1,13 +1,12 @@
+/* eslint-disable no-param-reassign */
 import { createContext } from '@lit/context';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
 import { TAG_NAME as NAVMENUITEM_TAGNAME } from '../navmenuitem/navmenuitem.constants';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TAG_NAME } from './sidenavigation.constants';
 class SideNavigationContext {
-    constructor(defaultVariant, defaultExpanded, defaultParentNavTooltipText) {
+    constructor(defaultVariant, defaultExpanded) {
         this.variant = defaultVariant;
         this.expanded = defaultExpanded;
-        this.parentNavTooltipText = defaultParentNavTooltipText;
     }
     hasSiblingWithTriggerId(navMenuItem) {
         var _a, _b;
@@ -47,7 +46,7 @@ class SideNavigationContext {
     setCurrentActiveNavMenuItem(navMenuItem) {
         var _a;
         const isSameItem = ((_a = this.currentActiveNavMenuItem) === null || _a === void 0 ? void 0 : _a.navId) === (navMenuItem === null || navMenuItem === void 0 ? void 0 : navMenuItem.navId);
-        const shouldSkip = (navMenuItem === null || navMenuItem === void 0 ? void 0 : navMenuItem.disableAriaCurrent) || this.hasSiblingWithTriggerId(navMenuItem) || (navMenuItem === null || navMenuItem === void 0 ? void 0 : navMenuItem.softDisabled);
+        const shouldSkip = (navMenuItem === null || navMenuItem === void 0 ? void 0 : navMenuItem.cannotActivate) || this.hasSiblingWithTriggerId(navMenuItem) || (navMenuItem === null || navMenuItem === void 0 ? void 0 : navMenuItem.softDisabled);
         if (isSameItem || shouldSkip)
             return;
         // Clean up previous active item
@@ -56,8 +55,7 @@ class SideNavigationContext {
             this.currentActiveNavMenuItem.removeAttribute('active');
             const previousParents = this.getParentNavMenuItems(this.currentActiveNavMenuItem);
             previousParents.forEach(parent => {
-                parent.removeAttribute('tooltip-text');
-                parent.removeAttribute('tooltip-placement');
+                parent.hasActiveChild = false;
                 parent.removeAttribute('active');
             });
         }
@@ -65,12 +63,13 @@ class SideNavigationContext {
         if (!navMenuItem)
             return;
         this.currentActiveNavMenuItem = navMenuItem;
-        navMenuItem.setAttribute('aria-current', 'page');
+        if (!(navMenuItem === null || navMenuItem === void 0 ? void 0 : navMenuItem.disableAriaCurrent)) {
+            navMenuItem.setAttribute('aria-current', 'page');
+        }
         navMenuItem.setAttribute('active', '');
         const newParents = this.getParentNavMenuItems(navMenuItem);
         newParents.forEach(parent => {
-            parent.setAttribute('tooltip-text', this.parentNavTooltipText || '');
-            parent.setAttribute('tooltip-placement', POPOVER_PLACEMENT.BOTTOM);
+            parent.hasActiveChild = true;
             parent.setAttribute('active', '');
         });
     }