@momentum-design/components 0.80.4 → 0.80.5

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

@@ -55,7 +55,7 @@ declare class List extends List_base {
      * `resetTabIndexAndSetActiveTabIndex` with that index.
      * @param event - The mouse event.
      */
-    private handleMouseClick;
+    protected handleMouseClick(event: MouseEvent): void;
     /**
      * Resets all list items tabindex to -1 and sets the tabindex of the
      * element at the given index to 0, effectively setting the active

package/dist/components/listitem/listitem.component.js

@@ -14,6 +14,7 @@ import { KEYS } from '../../utils/keys';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
+import { TAG_NAME as NAVITEMLIST_TAG_NAME } from '../navitemlist/navitemlist.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import { DEFAULTS, LISTITEM_ID, TOOLTIP_ID } from './listitem.constants';
@@ -122,7 +123,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * Create the tooltip programmatically after the nearest parent element.
      */
     displayTooltipForLongText() {
-        var _a;
+        var _a, _b, _c;
         if (!this.tooltipText) {
             return;
         }
@@ -140,8 +141,14 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         tooltip.setAttribute('placement', this.tooltipPlacement);
         tooltip.setAttribute('visible', '');
         tooltip.setAttribute('show-arrow', '');
-        // Add tooltip programmatically after the parent element.
-        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.after(tooltip);
+        // The navitem follows a different pattern to attach the tooltip.
+        if (((_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === NAVITEMLIST_TAG_NAME) {
+            this.before(tooltip);
+        }
+        else {
+            // Add tooltip programmatically after the parent element.
+            (_c = this.parentElement) === null || _c === void 0 ? void 0 : _c.after(tooltip);
+        }
     }
     /**
      * Removes the dynamically created tooltip for long text label on focus or mouse leave.

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

@@ -34,13 +34,14 @@ class MenuPopover extends MenuMixin(Popover) {
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENU;
+        this.focusBackToTrigger = true;
         this.focusTrap = true;
         this.focusBackToTrigger = true;
         this.hideOnEscape = true;
         this.hideOnOutsideClick = true;
+        this.interactive = true;
         this.placement = POPOVER_PLACEMENT.BOTTOM_START;
         this.showArrow = false;
-        this.interactive = true;
         this.ariaOrientation = ORIENTATION.VERTICAL;
     }
     async firstUpdated(changedProperties) {

package/dist/components/navitem/index.d.ts

@@ -0,0 +1,11 @@
+import NavItem from './navitem.component';
+import '../text';
+import '../badge';
+import '../icon';
+import '../tooltip';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-navitem']: NavItem;
+    }
+}
+export default NavItem;

package/dist/components/navitem/index.js

@@ -0,0 +1,8 @@
+import NavItem from './navitem.component';
+import { TAG_NAME } from './navitem.constants';
+import '../text';
+import '../badge';
+import '../icon';
+import '../tooltip';
+NavItem.register(TAG_NAME);
+export default NavItem;

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

@@ -0,0 +1,125 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import MenuItem from '../menuitem/menuitem.component';
+import type { BadgeType } from './navitem.types';
+declare const NavItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof MenuItem;
+/**
+ * `mdc-navitem` is a menuitem styled to work as a navigation tab.
+ * It supports a leading icon, optional badge and dynamic text rendering.
+ *
+ * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
+ * component. Its structure, spacing, and interactions are designed to align with
+ * the visual and functional requirements of side navigation layouts.
+ *
+ * @tagname mdc-navitem
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-badge
+ * @dependency mdc-tooltip
+ *
+ * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
+ * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
+ * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
+ * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
+ * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
+ * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
+ * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
+ */
+declare class NavItem extends NavItem_base {
+    /**
+     * The navitem's active state indicates whether it is currently toggled on (active) or off (inactive).
+     * When the active state is true, the navitem is considered to be in an active state, meaning it is toggled on.
+     * Conversely, when the active state is false, the navitem is in an inactive state, indicating it is toggled off.
+     * @default undefined
+     */
+    active?: boolean;
+    /**
+     * Type of the badge
+     * Can be `dot` (notification) or `counter`.
+     */
+    badgeType?: BadgeType;
+    /**
+     * Counter is the number which can be provided in the badge.
+     */
+    counter?: number;
+    /**
+     * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
+     * The max counter can be `9`, `99` or `999`.
+     * @default 99
+     */
+    maxCounter: number;
+    /**
+     * Id of the navItem (used as a identificator when used in the navItemList)
+     * Note: It has to be unique.
+     *
+     * @default undefined
+     */
+    navId?: string;
+    /**
+     * Determines whether the navItem is expanded or not.
+     *
+     * @internal
+     */
+    showLabel?: boolean;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+     * When set to true, prevents the automatic setting of the `aria-current` attribute on the navitem
+     * when it becomes active. This is useful for cases where you want to maintain the visual active styling
+     * but need to handle aria-current attribute differently or not at all.
+     * The active button styling will still be applied regardless of this setting.
+     */
+    disableAriaCurrent?: boolean;
+    /**
+     * @internal
+     */
+    private prevIconName?;
+    /**
+     * @internal
+     */
+    private readonly sideNavigationContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Check whether the navitem is inside a nested nav structure.
+     * Returns `true` if there is a parent `mdc-menupopover`
+     * This method assumes nesting implies deeper levels of nav hierarchy.
+     */
+    private isNested;
+    /**
+     * Modifies the icon name based on the active state.
+     * If the navItem is active, the icon name is suffixed with '-filled'.
+     * If the navItem is inactive, the icon name is restored to its original value.
+     * If '-filled' icon is not available, the icon name remains unchanged.
+     * @internal
+     * @param active - The active state.
+     */
+    private modifyIconName;
+    /**
+     * Dispatch the activechange event.
+     * @internal
+     * @param active - The active state of the navItem.
+     */
+    private emitNavItemActiveChange;
+    private handleClickEvent;
+    update(changedProperties: PropertyValues): void;
+    private renderTextLabel;
+    private renderArrowIcon;
+    private renderBadge;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default NavItem;

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

@@ -0,0 +1,251 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(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';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import MenuItem from '../menuitem/menuitem.component';
+import { getIconNameWithoutStyle } from '../button/button.utils';
+import SideNavigation from '../sidenavigation/sidenavigation.component';
+/**
+ * `mdc-navitem` is a menuitem styled to work as a navigation tab.
+ * It supports a leading icon, optional badge and dynamic text rendering.
+ *
+ * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
+ * component. Its structure, spacing, and interactions are designed to align with
+ * the visual and functional requirements of side navigation layouts.
+ *
+ * @tagname mdc-navitem
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-badge
+ * @dependency mdc-tooltip
+ *
+ * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
+ * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
+ * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
+ * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
+ * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
+ * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
+ * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
+ */
+class NavItem extends IconNameMixin(MenuItem) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
+         * The max counter can be `9`, `99` or `999`.
+         * @default 99
+         */
+        this.maxCounter = DEFAULTS.MAX_COUNTER;
+        /**
+         * Aria-label attribute to be set for accessibility
+         */
+        this.ariaLabel = null;
+        /**
+         * @internal
+         */
+        this.sideNavigationContext = providerUtils.consume({ host: this, context: SideNavigation.Context });
+        /**
+         * Dispatch the activechange event.
+         * @internal
+         * @param active - The active state of the navItem.
+         */
+        this.emitNavItemActiveChange = (active) => {
+            const event = new CustomEvent('activechange', {
+                detail: { navId: this.navId, active },
+                bubbles: true,
+            });
+            this.dispatchEvent(event);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.variant = undefined;
+        this.tooltipPlacement = undefined;
+        this.addEventListener('click', this.handleClickEvent);
+        if (!this.navId && this.onerror) {
+            this.onerror('[mdc-navitem] navId is required and was not provided.');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClickEvent);
+    }
+    updated() {
+        var _a, _b;
+        const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
+        if (!context)
+            return;
+        // Determine expansion state
+        this.showLabel = this.isNested() ? true : context.expanded;
+        // Manage aria-label for accessibility
+        if (this.showLabel) {
+            this.removeAttribute('aria-label');
+        }
+        else {
+            const label = (_b = this.label) !== null && _b !== void 0 ? _b : '';
+            this.ariaLabel = this.ariaLabel || label;
+            this.setAttribute('aria-label', label);
+        }
+    }
+    /**
+     * Check whether the navitem is inside a nested nav structure.
+     * Returns `true` if there is a parent `mdc-menupopover`
+     * This method assumes nesting implies deeper levels of nav hierarchy.
+     */
+    isNested() {
+        let parent = this.parentElement;
+        while (parent) {
+            if (parent.tagName.toLowerCase() === MENUPOPOVER_TAGNAME) {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    /**
+     * Modifies the icon name based on the active state.
+     * If the navItem is active, the icon name is suffixed with '-filled'.
+     * If the navItem is inactive, the icon name is restored to its original value.
+     * If '-filled' icon is not available, the icon name remains unchanged.
+     * @internal
+     * @param active - The active state.
+     */
+    modifyIconName(active) {
+        if (!this.iconName)
+            return;
+        const isFilled = this.iconName.endsWith('-filled');
+        const baseIcon = getIconNameWithoutStyle(this.iconName);
+        if (active) {
+            if (!isFilled) {
+                this.prevIconName = this.iconName;
+                this.iconName = `${baseIcon}-filled`;
+            }
+        }
+        else if (this.prevIconName) {
+            this.iconName = this.prevIconName;
+        }
+    }
+    handleClickEvent() {
+        if (this.disabled)
+            return;
+        this.emitNavItemActiveChange(this.active);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('active')) {
+            this.modifyIconName(this.active);
+        }
+    }
+    renderTextLabel(label) {
+        return html `
+      <mdc-text
+        type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
+        tagname=${VALID_TEXT_TAGS.SPAN}
+        part="text-container">
+        ${label}
+      </mdc-text>
+    `;
+    }
+    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>
+    `;
+    }
+    renderBadge(showLabel) {
+        const badgeClass = showLabel ? '' : 'badge';
+        const isValidBadgeType = Object.values(ALLOWED_BADGE_TYPES).includes(this.badgeType);
+        if (!isValidBadgeType) {
+            return nothing;
+        }
+        return html `
+      <mdc-badge 
+        class="${badgeClass}"
+        type="${ifDefined(this.badgeType)}" 
+        counter="${ifDefined(this.counter)}" 
+        max-counter="${this.maxCounter}">
+      </mdc-badge>
+    `;
+    }
+    render() {
+        var _a;
+        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>
+        ${!this.showLabel ? this.renderBadge(this.showLabel) : nothing}
+      </div>
+      ${this.showLabel ? html `${this.renderTextLabel(this.label)}${this.renderBadge(this.showLabel)}` : nothing}
+      ${(context === null || context === void 0 ? void 0 : context.hasSiblingWithTriggerId(this)) ? this.renderArrowIcon(this.showLabel) : nothing}
+    `;
+    }
+}
+NavItem.styles = [...MenuItem.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], NavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'badge-type' }),
+    __metadata("design:type", String)
+], NavItem.prototype, "badgeType", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], NavItem.prototype, "counter", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-counter', reflect: true }),
+    __metadata("design:type", Number)
+], NavItem.prototype, "maxCounter", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'nav-id' }),
+    __metadata("design:type", String)
+], NavItem.prototype, "navId", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-label' }),
+    __metadata("design:type", Boolean)
+], NavItem.prototype, "showLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], NavItem.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-aria-current' }),
+    __metadata("design:type", Boolean)
+], NavItem.prototype, "disableAriaCurrent", void 0);
+export default NavItem;

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

@@ -0,0 +1,16 @@
+declare const TAG_NAME: "mdc-navitem";
+declare const ALLOWED_BADGE_TYPES: {
+    readonly DOT: "dot";
+    readonly COUNTER: "counter";
+};
+declare const ICON_NAME: {
+    readonly RIGHT_ARROW: "arrow-right-bold";
+};
+declare const DEFAULTS: {
+    readonly MAX_COUNTER: 99;
+    readonly TEXT_TYPE: "body-midsize-regular";
+    readonly TAG_NAME: "span";
+    readonly SIZE: 24;
+    readonly VARIANT: string;
+};
+export { DEFAULTS, TAG_NAME, ALLOWED_BADGE_TYPES, ICON_NAME };

package/dist/components/navitem/navitem.constants.js

@@ -0,0 +1,21 @@
+import utils from '../../utils/tag-name';
+import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { TYPE as BADGE_TYPE } from '../badge/badge.constants';
+import { VARIANTS } from '../sidenavigation/sidenavigation.constants';
+const TAG_NAME = utils.constructTagName('navitem');
+const ALLOWED_BADGE_TYPES = {
+    DOT: BADGE_TYPE.DOT,
+    COUNTER: BADGE_TYPE.COUNTER,
+};
+const ICON_NAME = {
+    RIGHT_ARROW: 'arrow-right-bold',
+};
+const DEFAULTS = {
+    MAX_COUNTER: 99,
+    TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    TAG_NAME: VALID_TEXT_TAGS.SPAN,
+    SIZE: BUTTON_SIZES[24],
+    VARIANT: VARIANTS.FLEXIBLE,
+};
+export { DEFAULTS, TAG_NAME, ALLOWED_BADGE_TYPES, ICON_NAME };

package/dist/components/navitem/navitem.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,146 @@
+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()];
+export default styles;

package/dist/components/navitem/navitem.types.d.ts

@@ -0,0 +1,11 @@
+import { ValueOf } from '../../utils/types';
+import { ALLOWED_BADGE_TYPES } from './navitem.constants';
+type BadgeType = ValueOf<typeof ALLOWED_BADGE_TYPES>;
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onKeyUpEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+    onActiveChangeEvent: Event;
+}
+export type { Events, BadgeType };

package/dist/components/navitem/navitem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navitemlist/index.d.ts

@@ -0,0 +1,7 @@
+import NavItemList from './navitemlist.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-navitemlist']: NavItemList;
+    }
+}
+export default NavItemList;

package/dist/components/navitemlist/index.js

@@ -0,0 +1,4 @@
+import NavItemList from './navitemlist.component';
+import { TAG_NAME } from './navitemlist.constants';
+NavItemList.register(TAG_NAME);
+export default NavItemList;