@momentum-design/components 0.84.3 → 0.84.5

package/dist/components/inputchip/inputchip.component.js

@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './inputchip.styles';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import styles from './inputchip.styles';
 import { DEFAULTS } from './inputchip.constants';
 /**
  * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
@@ -62,12 +62,7 @@ class InputChip extends IconNameMixin(DisabledMixin(Component)) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html `
-    <mdc-icon 
-      name="${this.iconName}" 
-      length-unit="rem" 
-      size="1"></mdc-icon>
-  `;
+        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     /**
      * Handles the behavior of the close button on click event.
@@ -78,18 +73,18 @@ class InputChip extends IconNameMixin(DisabledMixin(Component)) {
     }
     render() {
         return html `
-        ${this.renderIcon()}
-        <mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
-        <mdc-button 
-          ?disabled="${this.disabled}"
-          variant="tertiary"
-          part="close-icon"
-          aria-label="${this.clearAriaLabel}"
-          prefix-icon="${DEFAULTS.CLOSE_ICON}"
-          size="20"
-          @click="${this.handleClose}"
-        ></mdc-button>
-      `;
+      ${this.renderIcon()}
+      <mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
+      <mdc-button
+        ?disabled="${this.disabled}"
+        variant="tertiary"
+        part="close-icon"
+        aria-label="${this.clearAriaLabel}"
+        prefix-icon="${DEFAULTS.CLOSE_ICON}"
+        size="20"
+        @click="${this.handleClose}"
+      ></mdc-button>
+    `;
     }
 }
 InputChip.styles = [...Component.styles, ...styles];

package/dist/components/inputchip/inputchip.styles.js

@@ -17,13 +17,15 @@ const styles = css `
     border-color: var(--mdc-chip-border-color);
     background-color: var(--mdc-chip-background-color);
   }
-  
-  :host([error]){
+
+  :host([error]) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-cancel-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-label-error-normal);
   }
 
-  :host([disabled]), :host([disabled]:hover), :host([disabled]:active) {
+  :host([disabled]),
+  :host([disabled]:hover),
+  :host([disabled]:active) {
     --mdc-chip-border-color: var(--mds-color-theme-common-outline-primary-disabled);
     --mdc-chip-background-color: var(--mds-color-theme-background-primary-disabled);
     --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);

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

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit';
-import type { LinkSize } from './link.types';
 import Linksimple from '../linksimple/linksimple.component';
+import type { LinkSize } from './link.types';
 declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Linksimple;
 /**
  * `mdc-link` component can be used to navigate to a different page

package/dist/components/link/link.component.js

@@ -10,9 +10,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import Linksimple from '../linksimple/linksimple.component';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
 import styles from './link.styles';
-import Linksimple from '../linksimple/linksimple.component';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
@@ -63,13 +63,9 @@ class Link extends IconNameMixin(Linksimple) {
     render() {
         return html `
       <slot></slot>
-      ${this.iconName ? html `
-        <mdc-icon
-          name=${this.iconName}
-          size=${this.getIconSize()}
-          length-unit="rem"
-        ></mdc-icon>
-      ` : nothing}
+      ${this.iconName
+            ? html ` <mdc-icon name=${this.iconName} size=${this.getIconSize()} length-unit="rem"></mdc-icon> `
+            : nothing}
     `;
     }
 }

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

@@ -12,4 +12,4 @@ declare const LINK_ICON_SIZES: {
 declare const DEFAULTS: {
     LINK_SIZE: "large";
 };
-export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME, };
+export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME };

package/dist/components/link/link.constants.js

@@ -13,4 +13,4 @@ const LINK_ICON_SIZES = {
 const DEFAULTS = {
     LINK_SIZE: LINK_SIZES.LARGE,
 };
-export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME, };
+export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME };

package/dist/components/link/link.styles.js

@@ -4,7 +4,7 @@ const styles = css `
     gap: 0.25rem;
   }
 
-  :host([size="large"]) {
+  :host([size='large']) {
     font-size: var(--mds-font-apps-body-large-regular-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -12,7 +12,7 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([size="midsize"]) {
+  :host([size='midsize']) {
     font-size: var(--mds-font-apps-body-midsize-regular-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-line-height);
@@ -20,7 +20,7 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([size="small"]) {
+  :host([size='small']) {
     font-size: var(--mds-font-apps-body-small-regular-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-line-height);
@@ -28,9 +28,9 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-small-regular-text-case);
   }
 
-  :host([size="large"]:hover),
-  :host([size="large"]:active),
-  :host([size="large"][inline]) {
+  :host([size='large']:hover),
+  :host([size='large']:active),
+  :host([size='large'][inline]) {
     font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
@@ -38,9 +38,9 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
 
-  :host([size="midsize"]:hover),
-  :host([size="midsize"]:active),
-  :host([size="midsize"][inline]) {
+  :host([size='midsize']:hover),
+  :host([size='midsize']:active),
+  :host([size='midsize'][inline]) {
     font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
@@ -48,9 +48,9 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
 
-  :host([size="small"]:hover),
-  :host([size="small"]:active),
-  :host([size="small"][inline]) {
+  :host([size='small']:hover),
+  :host([size='small']:active),
+  :host([size='small'][inline]) {
     font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-underline-line-height);

package/dist/components/linksimple/linksimple.component.js

@@ -11,9 +11,9 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { DEFAULTS } from './linksimple.constants';
 import styles from './linksimple.styles';
-import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 /**
  * `mdc-linksimple` is a lightweight link component that can be used to navigate
  * within the application or to an external URL. It does not have any predefined default size.
@@ -112,9 +112,7 @@ class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
         }
     }
     render() {
-        return html `
-      <slot></slot>
-    `;
+        return html ` <slot></slot> `;
     }
 }
 Linksimple.styles = [...Component.styles, ...styles];

package/dist/components/linksimple/linksimple.styles.js

@@ -1,72 +1,74 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-link-border-radius: 0.25rem;
-    --mdc-link-color-active: var(--mds-color-theme-text-accent-active);
-    --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
-    --mdc-link-color-hover: var(--mds-color-theme-text-accent-hover);
-    --mdc-link-color-normal: var(--mds-color-theme-text-accent-normal);
-    --mdc-link-inverted-color-active: var(--mds-color-theme-inverted-text-accent-active);
-    --mdc-link-inverted-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
-    --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
-    --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-link-border-radius: 0.25rem;
+      --mdc-link-color-active: var(--mds-color-theme-text-accent-active);
+      --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
+      --mdc-link-color-hover: var(--mds-color-theme-text-accent-hover);
+      --mdc-link-color-normal: var(--mds-color-theme-text-accent-normal);
+      --mdc-link-inverted-color-active: var(--mds-color-theme-inverted-text-accent-active);
+      --mdc-link-inverted-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
+      --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
+      --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
 
-    border-radius: var(--mdc-link-border-radius);
-    color: var(--mdc-link-color-normal);
-    text-underline-offset: auto;
-    text-underline-position: from-font;
-    cursor: pointer;
-    
-    /* based on default linksimple size (large) */
-    line-height: var(--mds-font-apps-body-large-regular-line-height);
-  }
+      border-radius: var(--mdc-link-border-radius);
+      color: var(--mdc-link-color-normal);
+      text-underline-offset: auto;
+      text-underline-position: from-font;
+      cursor: pointer;
 
-  :host([inline]) {
-    display: inline-flex;
-  }
+      /* based on default linksimple size (large) */
+      line-height: var(--mds-font-apps-body-large-regular-line-height);
+    }
 
-  :host([inverted]) {
-    color: var(--mdc-link-inverted-color-normal);
-  }
+    :host([inline]) {
+      display: inline-flex;
+    }
 
-  :host(:hover) {
-    color: var(--mdc-link-color-hover);
-  }
+    :host([inverted]) {
+      color: var(--mdc-link-inverted-color-normal);
+    }
 
-  :host(:active) {
-    color: var(--mdc-link-color-active);
-    box-shadow: none;
-  }
+    :host(:hover) {
+      color: var(--mdc-link-color-hover);
+    }
 
-  :host([inverted]:hover) {
-    color: var(--mdc-link-inverted-color-hover);
-  }
+    :host(:active) {
+      color: var(--mdc-link-color-active);
+      box-shadow: none;
+    }
 
-  :host([inverted]:active) {
-    color: var(--mdc-link-inverted-color-active);
-  }
+    :host([inverted]:hover) {
+      color: var(--mdc-link-inverted-color-hover);
+    }
 
-  :host([disabled]) {
-    color: var(--mdc-link-color-disabled);
-    pointer-events: none;
-  }
+    :host([inverted]:active) {
+      color: var(--mdc-link-inverted-color-active);
+    }
 
-  :host([inverted][disabled]) {
-    color: var(--mdc-link-inverted-color-disabled);
-  }
+    :host([disabled]) {
+      color: var(--mdc-link-color-disabled);
+      pointer-events: none;
+    }
 
-  /* based on default linksimple size (large) */
-  :host(:hover),
-  :host(:active),
-  :host([inline]) {
-    font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
-    font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
-    line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
-    text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
-    text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
-  }
+    :host([inverted][disabled]) {
+      color: var(--mdc-link-inverted-color-disabled);
+    }
 
-`, ...hostFocusRingStyles(),
+    /* based on default linksimple size (large) */
+    :host(:hover),
+    :host(:active),
+    :host([inline]) {
+      font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
+      font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
+      line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
+      text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
+      text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
+    }
+  `,
+    ...hostFocusRingStyles(),
 ];
 export default styles;

package/dist/components/list/list.component.js

@@ -57,7 +57,7 @@ class List extends DataAriaLabelMixin(Component) {
      * @returns The index of the target element in the listItems array.
      */
     getCurrentIndex(target) {
-        return this.listItems.findIndex((node) => node === target || node === target.parentElement);
+        return this.listItems.findIndex(node => node === target || node === target.parentElement);
     }
     /**
      * Calculates a new index based on the pressed keyboard key.
@@ -110,14 +110,17 @@ class List extends DataAriaLabelMixin(Component) {
     }
     render() {
         var _a;
-        const headerText = this.headerText ? html `
-      <mdc-text
-        id="${HEADER_ID}"
-        part="header-text"
-        type="${TYPE.BODY_MIDSIZE_BOLD}"
-        tagname="${VALID_TEXT_TAGS.SPAN}"
-      >${this.headerText}</mdc-text>
-    ` : nothing;
+        const headerText = this.headerText
+            ? html `
+          <mdc-text
+            id="${HEADER_ID}"
+            part="header-text"
+            type="${TYPE.BODY_MIDSIZE_BOLD}"
+            tagname="${VALID_TEXT_TAGS.SPAN}"
+            >${this.headerText}</mdc-text
+          >
+        `
+            : nothing;
         return html `
       <div
         role="${this.dataRole}"

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

@@ -184,7 +184,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * @param disabled - Whether to disable or enable the controls.
      */
     disableSlottedChildren(disabled) {
-        [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach((element) => {
+        [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach(element => {
             if (disabled) {
                 element.setAttribute('disabled', '');
             }
@@ -206,20 +206,24 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * @returns A template for the trailing controls slot.
      */
     renderTrailingControls() {
-        return html `<slot name="trailing-controls" 
-    @click=${this.stopEventPropagation}
-    @keyup=${this.stopEventPropagation}
-    @keydown=${this.stopEventPropagation}></slot>`;
+        return html `<slot
+      name="trailing-controls"
+      @click=${this.stopEventPropagation}
+      @keyup=${this.stopEventPropagation}
+      @keydown=${this.stopEventPropagation}
+    ></slot>`;
     }
     /**
      * Renders the leading controls slot.
      * @returns A template for the leading controls slot.
      */
     renderLeadingControls() {
-        return html `<slot name="leading-controls" 
-    @click=${this.stopEventPropagation}
-    @keyup=${this.stopEventPropagation}
-    @keydown=${this.stopEventPropagation}></slot>`;
+        return html `<slot
+      name="leading-controls"
+      @click=${this.stopEventPropagation}
+      @keyup=${this.stopEventPropagation}
+      @keydown=${this.stopEventPropagation}
+    ></slot>`;
     }
     /**
      * Stops the click event from propagating to parent elements. In case of keyboard events,
@@ -229,8 +233,8 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * @param event - The mouse event triggered when a click occurs.
      */
     stopEventPropagation(event) {
-        if ((event instanceof KeyboardEvent && (event.key === KEYS.ENTER || event.key === KEYS.SPACE))
-            || (event instanceof MouseEvent)) {
+        if ((event instanceof KeyboardEvent && (event.key === KEYS.ENTER || event.key === KEYS.SPACE)) ||
+            event instanceof MouseEvent) {
             event.stopPropagation();
         }
     }

package/dist/components/listitem/listitem.styles.js

@@ -20,10 +20,10 @@ const styles = css `
     padding: 0.5rem var(--mdc-listitem-padding-left-and-right);
     width: 100%;
   }
-  :host([variant="inset-rectangle"]) {
+  :host([variant='inset-rectangle']) {
     border-radius: 0.5rem;
   }
-  :host([variant="inset-pill"]) {
+  :host([variant='inset-pill']) {
     border-radius: 3.125rem;
   }
   :host::part(leading-text) {
@@ -58,7 +58,8 @@ const styles = css `
   :host(:active) {
     background-color: var(--mdc-listitem-background-color-active);
   }
-  :host::part(leading), :host::part(trailing) {
+  :host::part(leading),
+  :host::part(trailing) {
     align-items: center;
     column-gap: var(--mdc-listitem-column-gap);
     display: flex;
@@ -67,16 +68,20 @@ const styles = css `
   :host::part(trailing) {
     justify-content: flex-end;
   }
-  :host::part(leading-text-secondary-label), :host::part(leading-text-tertiary-label) {
+  :host::part(leading-text-secondary-label),
+  :host::part(leading-text-tertiary-label) {
     color: var(--mdc-listitem-secondary-label-color);
   }
-  :host::part(leading-text-primary-label), :host::part(trailing-text-side-header), :host::part(trailing-text-subline) {
+  :host::part(leading-text-primary-label),
+  :host::part(trailing-text-side-header),
+  :host::part(trailing-text-subline) {
     color: var(--mdc-listitem-primary-label-color);
   }
   :host::part(trailing-text) {
     text-align: right;
   }
-  ::slotted([slot="leading-controls"]), ::slotted([slot="trailing-controls"]) {
+  ::slotted([slot='leading-controls']),
+  ::slotted([slot='trailing-controls']) {
     align-items: center;
     column-gap: var(--mdc-listitem-column-gap);
     display: flex;

package/dist/components/marker/marker.component.js

@@ -8,8 +8,8 @@ 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 './marker.styles';
 import { Component } from '../../models';
+import styles from './marker.styles';
 import { MARKER_VARIANTS } from './marker.constants';
 /**
  * `mdc-marker`, which is a vertical line and

package/dist/components/marker/marker.styles.js

@@ -4,7 +4,7 @@ const styles = css `
     --mdc-marker-width: 0.25rem;
     --mdc-marker-solid-background-color: var(--mds-color-theme-outline-secondary-normal);
     --mdc-marker-striped-color: var(--mds-color-theme-outline-secondary-normal);
-    --mdc-marker-striped-background-color: transparent; 
+    --mdc-marker-striped-background-color: transparent;
 
     width: var(--mdc-marker-width);
     height: 100%;
@@ -20,7 +20,7 @@ const styles = css `
       135deg,
       var(--mdc-marker-striped-color),
       var(--mdc-marker-striped-color) 0.1875rem,
-      var(--mdc-marker-striped-background-color) 0.1875rem, 
+      var(--mdc-marker-striped-background-color) 0.1875rem,
       var(--mdc-marker-striped-background-color) 0.375rem
     );
   }

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

@@ -2,25 +2,25 @@ import type { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof Component;
 /**
-  * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
-  * with support for nested submenus and keyboard navigation. It serves as a container
-  * for menu items and manages their interaction patterns, including:
-  * - Keyboard navigation (arrow keys, Home, End)
-  * - Menu item activation (Enter/Space)
-  * - Submenu toggling (Right/Left arrow keys)
-  * - Focus management
-  * - Support for both horizontal and vertical orientations
-  * - Integration with MenuPopover for nested menus
-  *
-  * A menubar will contain a set of menu items and their associated popovers.
-  * Each menu item can have a popover for nested menus.
-  *
-  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
-  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
-  *
-  * @tagname mdc-menubar
-  * @slot default - Contains the menu items and their associated popovers
-  */
+ * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * with support for nested submenus and keyboard navigation. It serves as a container
+ * for menu items and manages their interaction patterns, including:
+ * - Keyboard navigation (arrow keys, Home, End)
+ * - Menu item activation (Enter/Space)
+ * - Submenu toggling (Right/Left arrow keys)
+ * - Focus management
+ * - Support for both horizontal and vertical orientations
+ * - Integration with MenuPopover for nested menus
+ *
+ * A menubar will contain a set of menu items and their associated popovers.
+ * Each menu item can have a popover for nested menus.
+ *
+ * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
+ * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
+ *
+ * @tagname mdc-menubar
+ * @slot default - Contains the menu items and their associated popovers
+ */
 declare class MenuBar extends MenuBar_base {
     constructor();
     connectedCallback(): void;

package/dist/components/menubar/menubar.component.js

@@ -4,25 +4,25 @@ import { MenuMixin } from '../../utils/mixins/MenuMixin';
 import { ROLE } from '../../utils/roles';
 import styles from './menubar.styles';
 /**
-  * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
-  * with support for nested submenus and keyboard navigation. It serves as a container
-  * for menu items and manages their interaction patterns, including:
-  * - Keyboard navigation (arrow keys, Home, End)
-  * - Menu item activation (Enter/Space)
-  * - Submenu toggling (Right/Left arrow keys)
-  * - Focus management
-  * - Support for both horizontal and vertical orientations
-  * - Integration with MenuPopover for nested menus
-  *
-  * A menubar will contain a set of menu items and their associated popovers.
-  * Each menu item can have a popover for nested menus.
-  *
-  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
-  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
-  *
-  * @tagname mdc-menubar
-  * @slot default - Contains the menu items and their associated popovers
-  */
+ * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * with support for nested submenus and keyboard navigation. It serves as a container
+ * for menu items and manages their interaction patterns, including:
+ * - Keyboard navigation (arrow keys, Home, End)
+ * - Menu item activation (Enter/Space)
+ * - Submenu toggling (Right/Left arrow keys)
+ * - Focus management
+ * - Support for both horizontal and vertical orientations
+ * - Integration with MenuPopover for nested menus
+ *
+ * A menubar will contain a set of menu items and their associated popovers.
+ * Each menu item can have a popover for nested menus.
+ *
+ * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
+ * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
+ *
+ * @tagname mdc-menubar
+ * @slot default - Contains the menu items and their associated popovers
+ */
 class MenuBar extends MenuMixin(Component) {
     constructor() {
         super();