@momentum-design/components 0.84.3 → 0.84.5

package/dist/components/menuitem/menuitem.component.js

@@ -12,9 +12,9 @@ import { property } from 'lit/decorators.js';
 import { ROLE } from '../../utils/roles';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
+import { KEYS } from '../../utils/keys';
 import { ARROW_ICONS, ARROW_DIRECTIONS, ARROW_POSITIONS } from './menuitem.constants';
 import styles from './menuitem.styles';
-import { KEYS } from '../../utils/keys';
 /**
  * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
  * A menu item can contain an icon on the leading or trailing side.
@@ -75,14 +75,14 @@ class MenuItem extends ListItem {
      * based on `arrowPosition` and `arrowDirection`.
      */
     renderTrailingControls() {
-        const arrowIcon = this.arrowDirection === ARROW_DIRECTIONS.NEGATIVE
-            ? ARROW_ICONS.LEFT
-            : ARROW_ICONS.RIGHT;
+        const arrowIcon = this.arrowDirection === ARROW_DIRECTIONS.NEGATIVE ? ARROW_ICONS.LEFT : ARROW_ICONS.RIGHT;
         return html `
-      <slot name="trailing-controls"
-      @click=${this.stopEventPropagation}
-      @keyup=${this.stopEventPropagation}
-      @keydown=${this.stopEventPropagation}></slot>
+      <slot
+        name="trailing-controls"
+        @click=${this.stopEventPropagation}
+        @keyup=${this.stopEventPropagation}
+        @keydown=${this.stopEventPropagation}
+      ></slot>
       ${this.arrowPosition === ARROW_POSITIONS.TRAILING
             ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="trailing-arrow"></mdc-icon>`
             : nothing}
@@ -93,14 +93,14 @@ class MenuItem extends ListItem {
      * based on `arrowPosition` and `arrowDirection`.
      */
     renderLeadingControls() {
-        const arrowIcon = this.arrowDirection === ARROW_DIRECTIONS.POSITIVE
-            ? ARROW_ICONS.RIGHT
-            : ARROW_ICONS.LEFT;
+        const arrowIcon = this.arrowDirection === ARROW_DIRECTIONS.POSITIVE ? ARROW_ICONS.RIGHT : ARROW_ICONS.LEFT;
         return html `
-      <slot name="leading-controls"
-      @click=${this.stopEventPropagation}
-      @keyup=${this.stopEventPropagation}
-      @keydown=${this.stopEventPropagation}></slot>
+      <slot
+        name="leading-controls"
+        @click=${this.stopEventPropagation}
+        @keyup=${this.stopEventPropagation}
+        @keydown=${this.stopEventPropagation}
+      ></slot>
       ${this.arrowPosition === ARROW_POSITIONS.LEADING
             ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="leading-arrow"></mdc-icon>`
             : nothing}

package/dist/components/menuitem/menuitem.styles.js

@@ -2,9 +2,10 @@ import { css } from 'lit';
 const styles = css `
   :host(:dir(rtl))::part(trailing-arrow),
   :host(:dir(rtl))::part(leading-arrow) {
-      transform: rotate(180deg);
+    transform: rotate(180deg);
   }
-  :host::part(trailing-arrow), :host::part(leading-arrow) {
+  :host::part(trailing-arrow),
+  :host::part(leading-arrow) {
     --mdc-icon-size: 1.25rem;
   }
 `;

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

@@ -1,7 +1,7 @@
 import type { CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import type { Indicator } from './menuitemcheckbox.types';
 import type { AriaCheckedStates } from '../menusection/menusection.types';
+import type { Indicator } from './menuitemcheckbox.types';
 /**
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -13,8 +13,8 @@ import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
 import { TOGGLE_SIZE } from '../toggle/toggle.constants';
-import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
 import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
+import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
 import styles from './menuitemcheckbox.styles';
 /**
  * A menuitemcheckbox component is a checkable menuitem.
@@ -93,7 +93,7 @@ class MenuItemCheckbox extends MenuItem {
         ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
         ?disabled="${this.disabled}"
       ></mdc-staticcheckbox>
-  `;
+    `;
     }
     /**
      * Returns a static toggle element if the indicator is set to toggle.
@@ -126,13 +126,7 @@ class MenuItemCheckbox extends MenuItem {
         if (this.indicator !== INDICATOR.CHECKMARK || this.ariaChecked === ARIA_CHECKED_STATES.FALSE) {
             return nothing;
         }
-        return html `
-      <mdc-icon
-        slot="trailing-controls"
-        name="check-bold"
-        part="checkmark-icon"
-      ></mdc-icon>
-    `;
+        return html ` <mdc-icon slot="trailing-controls" name="check-bold" part="checkmark-icon"></mdc-icon> `;
     }
     render() {
         return html `
@@ -151,8 +145,7 @@ class MenuItemCheckbox extends MenuItem {
           ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
         </div>
         <slot name="trailing-controls"></slot>
-        ${this.staticToggle()}
-        ${this.getCheckmarkIcon()}
+        ${this.staticToggle()} ${this.getCheckmarkIcon()}
       </div>
     `;
     }

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -58,7 +58,7 @@ class MenuItemRadio extends MenuItem {
             const container = this.closest(`${MENUSECTION_TAGNAME}, ${MENUPOPOVER_TAGNAME}`);
             if (container) {
                 const radios = Array.from(container.querySelectorAll(this.tagName));
-                radios.forEach((item) => {
+                radios.forEach(item => {
                     const radio = item;
                     if (radio.name === this.name) {
                         radio.ariaChecked = ARIA_CHECKED_STATES.FALSE;

package/dist/components/menupopover/menupopover.component.js

@@ -14,10 +14,10 @@ import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.cons
 import { ORIENTATION } from '../menubar/menubar.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
+import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
 import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover.utils';
-import { popoverStack } from '../popover/popover.stack';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -84,15 +84,15 @@ class MenuPopover extends Popover {
         var _a;
         const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
         const allAssignedElements = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
-        return allAssignedElements.map((node) => {
+        return allAssignedElements
+            .map(node => {
             if (node.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
-                return Array.from(node.children)
-                    .filter((child) => isValidMenuItem(child));
+                return Array.from(node.children).filter(child => isValidMenuItem(child));
             }
             return isValidMenuItem(node) ? node : [];
         })
             .flat()
-            .filter((node) => !!node && !node.hasAttribute('disabled'));
+            .filter(node => !!node && !node.hasAttribute('disabled'));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -115,7 +115,7 @@ class MenuPopover extends Popover {
         await super.firstUpdated(changedProperties);
         // Reset all tabindex to -1 and set the tabindex of the first menu item to 0
         if (this.menuItems.length > 0) {
-            this.menuItems.forEach((menuitem) => menuitem.setAttribute('tabindex', '-1'));
+            this.menuItems.forEach(menuitem => menuitem.setAttribute('tabindex', '-1'));
             this.menuItems[0].setAttribute('tabindex', '0');
         }
         (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
@@ -126,7 +126,7 @@ class MenuPopover extends Popover {
      * @returns - The index of the current menu item in the `menuItems` array.
      */
     getCurrentIndex(target) {
-        return this.menuItems.findIndex((node) => node === target);
+        return this.menuItems.findIndex(node => node === target);
     }
     /**
      * Resets the tabindex of the currently focused menu item and sets focus to a new menu item.
@@ -176,8 +176,8 @@ class MenuPopover extends Popover {
     handleMouseClick(event) {
         const target = event.target;
         const triggerId = target.getAttribute('id');
-        if (isActiveMenuItem(target) // menuitemcheckbox and menuitemradio are not supposed to close the popover
-            && !this.hasSubmenuWithTriggerId(triggerId)) {
+        if (isActiveMenuItem(target) && // menuitemcheckbox and menuitemradio are not supposed to close the popover
+            !this.hasSubmenuWithTriggerId(triggerId)) {
             this.closeAllMenuPopovers();
         }
     }
@@ -229,13 +229,13 @@ class MenuPopover extends Popover {
             }
             case KEYS.ARROW_DOWN: {
                 // Move focus to the next menu item
-                const newIndex = (currentIndex + 1) === this.menuItems.length ? 0 : (currentIndex + 1);
+                const newIndex = currentIndex + 1 === this.menuItems.length ? 0 : currentIndex + 1;
                 this.resetTabIndexAndSetFocus(newIndex, currentIndex);
                 break;
             }
             case KEYS.ARROW_UP: {
                 // Move focus to the prev menu item
-                const newIndex = (currentIndex - 1) === -1 ? (this.menuItems.length - 1) : (currentIndex - 1);
+                const newIndex = currentIndex - 1 === -1 ? this.menuItems.length - 1 : currentIndex - 1;
                 this.resetTabIndexAndSetFocus(newIndex, currentIndex);
                 break;
             }

package/dist/components/menupopover/menupopover.utils.d.ts

@@ -6,4 +6,4 @@
 declare const isValidMenuItem: (menuItem: Element | null) => boolean;
 declare const isValidPopover: (menuItem: Element | null) => boolean;
 declare const isActiveMenuItem: (menuItem: Element | null) => boolean;
-export { isValidMenuItem, isValidPopover, isActiveMenuItem, };
+export { isValidMenuItem, isValidPopover, isActiveMenuItem };

package/dist/components/menupopover/menupopover.utils.js

@@ -9,13 +9,8 @@ import { TAG_NAME as MENUPOPOVER_TAGNAME } from './menupopover.constants';
  */
 const isValidMenuItem = (menuItem) => {
     var _a, _b;
-    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
-        .includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
+    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME].includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
 };
 const isValidPopover = (menuItem) => { var _a; return ((_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
-const isActiveMenuItem = (menuItem) => {
-    var _a, _b;
-    return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME
-        && !menuItem.hasAttribute('disabled');
-};
-export { isValidMenuItem, isValidPopover, isActiveMenuItem, };
+const isActiveMenuItem = (menuItem) => { var _a, _b; return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME && !menuItem.hasAttribute('disabled'); };
+export { isValidMenuItem, isValidPopover, isActiveMenuItem };

package/dist/components/navitem/navitem.component.js

@@ -10,8 +10,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './navitem.styles';
-import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navitem.constants';
 import providerUtils from '../../utils/provider';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
@@ -19,6 +17,8 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import MenuItem from '../menuitem/menuitem.component';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
+import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navitem.constants';
+import styles from './navitem.styles';
 /**
  * `mdc-navitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
@@ -166,7 +166,8 @@ class NavItem extends IconNameMixin(MenuItem) {
       <mdc-text
         type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
         tagname=${VALID_TEXT_TAGS.SPAN}
-        part="text-container">
+        part="text-container"
+      >
         ${label}
       </mdc-text>
     `;
@@ -174,12 +175,7 @@ class NavItem extends IconNameMixin(MenuItem) {
     renderArrowIcon(showLabel) {
         const arrowClass = showLabel ? '' : 'arrow';
         return html `
-      <mdc-icon 
-        name=${ICON_NAME.RIGHT_ARROW} 
-        length-unit="rem" 
-        part="trailing-arrow" 
-        class="${arrowClass}">
-      </mdc-icon>
+      <mdc-icon name=${ICON_NAME.RIGHT_ARROW} length-unit="rem" part="trailing-arrow" class="${arrowClass}"> </mdc-icon>
     `;
     }
     renderBadge(showLabel) {
@@ -189,11 +185,12 @@ class NavItem extends IconNameMixin(MenuItem) {
             return nothing;
         }
         return html `
-      <mdc-badge 
+      <mdc-badge
         class="${badgeClass}"
-        type="${ifDefined(this.badgeType)}" 
-        counter="${ifDefined(this.counter)}" 
-        max-counter="${this.maxCounter}">
+        type="${ifDefined(this.badgeType)}"
+        counter="${ifDefined(this.counter)}"
+        max-counter="${this.maxCounter}"
+      >
       </mdc-badge>
     `;
     }
@@ -202,12 +199,7 @@ class NavItem extends IconNameMixin(MenuItem) {
         const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
         return html `
       <div part="icon-container">
-        <mdc-icon
-          name="${this.iconName}"
-          size="1.5"
-          length-unit="rem"
-          part="icon"
-        ></mdc-icon>
+        <mdc-icon name="${this.iconName}" size="1.5" length-unit="rem" part="icon"></mdc-icon>
         ${!this.showLabel ? this.renderBadge(this.showLabel) : nothing}
       </div>
       ${this.showLabel ? html `${this.renderTextLabel(this.label)}${this.renderBadge(this.showLabel)}` : nothing}

package/dist/components/navitem/navitem.styles.js

@@ -1,146 +1,150 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-navitem-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-navitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-navitem-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-navitem-expanded-width: 12.75rem;
-
-    /* Background color when in default (normal) or active state */
-    --mdc-navitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
-    --mdc-navitem-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-    --mdc-navitem-hover-active-background-color: var(--mds-color-theme-button-secondary-active-hover);
-    --mdc-navitem-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
-    --mdc-navitem-pressed-active-background-color: var(--mds-color-theme-button-secondary-active-pressed);
-    --mdc-navitem-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
-    --mdc-navitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
- 
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    color: var(--mdc-navitem-color);
-    border-color: var(--mdc-navitem-border-color);
-    border-radius: 1.25rem;
-    cursor: pointer;
-  }
-
-  :host(:dir(ltr)) {
-    margin-left: 1rem;
-  }
-
-  :host(:dir(rtl)) {
-    margin-right: 1rem;
-  }
-
-  :host([show-label]) {
-    width: var(--mdc-navitem-expanded-width);
-  }
-
-  :host([active]) {
-    background-color: var(--mdc-navitem-rest-active-background-color);
-  }
-  
-  :host([disabled]) {
-    color: var(--mdc-navitem-disabled-color);
-    background-color: var(--mdc-navitem-disabled-background-color);
-    pointer-events: none;
-  }
-
-  :host([active][disabled]) {
-    background-color: var(--mdc-navitem-disabled-active-background-color);
-    color: var(--mdc-navitem-disabled-color);
-  }
-  
-  :host(:hover) {
-    background-color: var(--mdc-navitem-hover-background-color);
-  }
-
-  :host(:hover[active]) {
-    background-color: var(--mdc-navitem-hover-active-background-color);
-  }
-
-  :host(:active) {
-    background-color: var(--mdc-navitem-pressed-background-color);
-  }
-
-  :host(:active[active]) {
-    background-color: var(--mdc-navitem-pressed-active-background-color);
-  }
-
-  :host::before {
-    content: '';
-    display: block;
-    position: absolute;
-    background-color: var(--mdc-navitem-color);
-    width: 0.25rem;
-    height: 1rem;
-    pointer-events: none;
-    visibility: hidden;
-  }
-
-  :host(:dir(ltr))::before {
-    left: -1rem;
-    border-radius: 0 0.25rem 0.25rem 0;
-  }
-
-  :host(:dir(rtl))::before {
-    right: -1rem;
-    border-radius: 0.25rem 0 0 0.25rem;
-  }
-
-  :host([active])::before {
-    visibility: visible;
-  }
-
-  :host([disabled])::before {
-    background-color: var(--mdc-navitem-disabled-color);
-  }
-
-  :host::part(text-container) {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  :host::part(icon-container) {
-    position: relative;
-  }
-  
-  :host(:dir(ltr)) .badge {
-    position: absolute;
-    right: -0.375rem;
-    top: -0.375rem;
-  }
-
-  :host(:dir(rtl)) .badge {
-    position: absolute;
-    left: -0.375rem;
-    top: -0.375rem;
-  }
-
-  :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)) .arrow {
-    position: absolute;
-    right: -0.75rem;
-    top: 0.875rem;
-  }
-
-  :host(:dir(rtl)) .arrow {
-    position: absolute;
-    left: -0.75rem;
-    top: 0.875rem;
-  }
-`, ...hostFocusRingStyles()];
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-navitem-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-navitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-navitem-border-color: var(--mds-color-theme-outline-button-normal);
+      --mdc-navitem-expanded-width: 12.75rem;
+
+      /* Background color when in default (normal) or active state */
+      --mdc-navitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
+      --mdc-navitem-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+      --mdc-navitem-hover-active-background-color: var(--mds-color-theme-button-secondary-active-hover);
+      --mdc-navitem-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+      --mdc-navitem-pressed-active-background-color: var(--mds-color-theme-button-secondary-active-pressed);
+      --mdc-navitem-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-navitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
+
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem;
+      color: var(--mdc-navitem-color);
+      border-color: var(--mdc-navitem-border-color);
+      border-radius: 1.25rem;
+      cursor: pointer;
+    }
+
+    :host(:dir(ltr)) {
+      margin-left: 1rem;
+    }
+
+    :host(:dir(rtl)) {
+      margin-right: 1rem;
+    }
+
+    :host([show-label]) {
+      width: var(--mdc-navitem-expanded-width);
+    }
+
+    :host([active]) {
+      background-color: var(--mdc-navitem-rest-active-background-color);
+    }
+
+    :host([disabled]) {
+      color: var(--mdc-navitem-disabled-color);
+      background-color: var(--mdc-navitem-disabled-background-color);
+      pointer-events: none;
+    }
+
+    :host([active][disabled]) {
+      background-color: var(--mdc-navitem-disabled-active-background-color);
+      color: var(--mdc-navitem-disabled-color);
+    }
+
+    :host(:hover) {
+      background-color: var(--mdc-navitem-hover-background-color);
+    }
+
+    :host(:hover[active]) {
+      background-color: var(--mdc-navitem-hover-active-background-color);
+    }
+
+    :host(:active) {
+      background-color: var(--mdc-navitem-pressed-background-color);
+    }
+
+    :host(:active[active]) {
+      background-color: var(--mdc-navitem-pressed-active-background-color);
+    }
+
+    :host::before {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: var(--mdc-navitem-color);
+      width: 0.25rem;
+      height: 1rem;
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    :host(:dir(ltr))::before {
+      left: -1rem;
+      border-radius: 0 0.25rem 0.25rem 0;
+    }
+
+    :host(:dir(rtl))::before {
+      right: -1rem;
+      border-radius: 0.25rem 0 0 0.25rem;
+    }
+
+    :host([active])::before {
+      visibility: visible;
+    }
+
+    :host([disabled])::before {
+      background-color: var(--mdc-navitem-disabled-color);
+    }
+
+    :host::part(text-container) {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host::part(icon-container) {
+      position: relative;
+    }
+
+    :host(:dir(ltr)) .badge {
+      position: absolute;
+      right: -0.375rem;
+      top: -0.375rem;
+    }
+
+    :host(:dir(rtl)) .badge {
+      position: absolute;
+      left: -0.375rem;
+      top: -0.375rem;
+    }
+
+    :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)) .arrow {
+      position: absolute;
+      right: -0.75rem;
+      top: 0.875rem;
+    }
+
+    :host(:dir(rtl)) .arrow {
+      position: absolute;
+      left: -0.75rem;
+      top: 0.875rem;
+    }
+  `,
+    ...hostFocusRingStyles(),
+];
 export default styles;

package/dist/components/navitemlist/navitemlist.component.js

@@ -8,13 +8,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property } from 'lit/decorators.js';
-import styles from './navitemlist.styles';
 import MenuBar from '../menubar/menubar.component';
 import { MenuMixin } from '../../utils/mixins/MenuMixin';
 import { ORIENTATION } from '../menubar/menubar.constants';
 import providerUtils from '../../utils/provider';
 import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
+import styles from './navitemlist.styles';
 /**
  * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
  * It provides the structural foundation for organizing vertical nav items and
@@ -54,7 +54,7 @@ class NavItemList extends MenuMixin(MenuBar) {
          *
          * @internal
          */
-        this.findNav = (navs, navId) => navs.find((nav) => nav.navId === navId);
+        this.findNav = (navs, navId) => navs.find(nav => nav.navId === navId);
     }
     connectedCallback() {
         super.connectedCallback();