@api-client/ui 0.4.1 → 0.4.3

package/build/src/md/menu/internal/Menu.styles.js

@@ -0,0 +1,185 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: none;
+    position-area: bottom span-right;
+    position-try: normal flip-block;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :host(:popover-open) {
+    display: block;
+    background-color: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    box-shadow: var(--md-sys-elevation-3);
+  }
+
+  .menu-container {
+    min-width: 200px;
+    padding: 8px 0;
+    outline: none;
+  }
+
+  .menu-divider {
+    height: 1px;
+    background-color: var(--md-sys-color-outline-variant);
+    margin: 8px 0;
+  }
+
+  /* Menu Item Styles */
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 16px;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.2s ease;
+  }
+
+  .menu-item:hover {
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  .menu-item:focus {
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  .menu-item[disabled] {
+    opacity: 0.38;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .menu-item-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 12px;
+  }
+
+  .menu-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--md-sys-color-on-surface);
+    font-size: 20px;
+  }
+
+  .menu-item-label {
+    flex: 1;
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--md-sys-typescale-label-large-font-family-name);
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  }
+
+  .menu-item-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--md-sys-color-on-surface);
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .menu-item-with-submenu {
+    position: relative;
+  }
+
+  .menu-item-with-submenu:hover .menu-item-arrow {
+    color: var(--md-sys-color-primary);
+  }
+
+  /* Sub-menu Styles */
+  .submenu-container {
+    min-width: 200px;
+    max-width: 320px;
+    background-color: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    box-shadow: var(--md-sys-elevation-level3);
+    padding: 8px 0;
+  }
+
+  /* Submenu positioning with Anchor API */
+  ui-sub-menu {
+    display: none;
+  }
+
+  ui-sub-menu:popover-open {
+    display: block;
+    background-color: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    box-shadow: var(--md-sys-elevation-level3);
+    min-width: 200px;
+    max-width: 320px;
+    padding: 8px 0;
+    z-index: 1000;
+  }
+
+  /* Fallback positioning for browsers without anchor positioning */
+  @supports not (anchor-name: --test) {
+    ui-sub-menu:popover-open {
+      position: fixed;
+      transform: translateX(200px);
+    }
+  }
+
+  /* Focus Ring */
+  md-focus-ring {
+    --md-focus-ring-color: var(--md-sys-color-primary);
+    --md-focus-ring-width: 2px;
+  }
+
+  /* Ripple Effect */
+  ui-ripple {
+    --md-ripple-color: var(--md-sys-color-primary);
+    --md-ripple-opacity: 0.12;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 600px) {
+    .menu-container {
+      min-width: 180px;
+      max-width: 280px;
+    }
+
+    .submenu-container {
+      min-width: 180px;
+      max-width: 280px;
+    }
+  }
+
+  /* High Contrast Mode */
+  @media (prefers-contrast: high) {
+    .menu-container {
+      border: 1px solid var(--md-sys-color-outline);
+    }
+
+    .submenu-container {
+      border: 1px solid var(--md-sys-color-outline);
+    }
+
+    .menu-divider {
+      background-color: var(--md-sys-color-outline);
+    }
+  }
+
+  /* Reduced Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item {
+      transition: none;
+    }
+  }
+`;
+//# sourceMappingURL=Menu.styles.js.map

package/build/src/md/menu/internal/Menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: none;\n    position-area: bottom span-right;\n    position-try: normal flip-block;\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n\n  :host(:popover-open) {\n    display: block;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-3);\n  }\n\n  .menu-container {\n    min-width: 200px;\n    padding: 8px 0;\n    outline: none;\n  }\n\n  .menu-divider {\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant);\n    margin: 8px 0;\n  }\n\n  /* Menu Item Styles */\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    cursor: pointer;\n    outline: none;\n    transition: background-color 0.2s ease;\n  }\n\n  .menu-item:hover {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item:focus {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item[disabled] {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .menu-item-content {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n  }\n\n  .menu-item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 20px;\n  }\n\n  .menu-item-label {\n    flex: 1;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-label-large-font-family-name);\n    font-size: var(--md-sys-typescale-label-large-font-size);\n    font-weight: var(--md-sys-typescale-label-large-font-weight);\n    line-height: var(--md-sys-typescale-label-large-line-height);\n    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);\n  }\n\n  .menu-item-arrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 18px;\n    font-weight: 500;\n  }\n\n  .menu-item-with-submenu {\n    position: relative;\n  }\n\n  .menu-item-with-submenu:hover .menu-item-arrow {\n    color: var(--md-sys-color-primary);\n  }\n\n  /* Sub-menu Styles */\n  .submenu-container {\n    min-width: 200px;\n    max-width: 320px;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-level3);\n    padding: 8px 0;\n  }\n\n  /* Submenu positioning with Anchor API */\n  ui-sub-menu {\n    display: none;\n  }\n\n  ui-sub-menu:popover-open {\n    display: block;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-level3);\n    min-width: 200px;\n    max-width: 320px;\n    padding: 8px 0;\n    z-index: 1000;\n  }\n\n  /* Fallback positioning for browsers without anchor positioning */\n  @supports not (anchor-name: --test) {\n    ui-sub-menu:popover-open {\n      position: fixed;\n      transform: translateX(200px);\n    }\n  }\n\n  /* Focus Ring */\n  md-focus-ring {\n    --md-focus-ring-color: var(--md-sys-color-primary);\n    --md-focus-ring-width: 2px;\n  }\n\n  /* Ripple Effect */\n  ui-ripple {\n    --md-ripple-color: var(--md-sys-color-primary);\n    --md-ripple-opacity: 0.12;\n  }\n\n  /* Responsive Design */\n  @media (max-width: 600px) {\n    .menu-container {\n      min-width: 180px;\n      max-width: 280px;\n    }\n\n    .submenu-container {\n      min-width: 180px;\n      max-width: 280px;\n    }\n  }\n\n  /* High Contrast Mode */\n  @media (prefers-contrast: high) {\n    .menu-container {\n      border: 1px solid var(--md-sys-color-outline);\n    }\n\n    .submenu-container {\n      border: 1px solid var(--md-sys-color-outline);\n    }\n\n    .menu-divider {\n      background-color: var(--md-sys-color-outline);\n    }\n  }\n\n  /* Reduced Motion */\n  @media (prefers-reduced-motion: reduce) {\n    .menu-item {\n      transition: none;\n    }\n  }\n`\n"]}

package/build/src/md/menu/internal/MenuItem.d.ts

@@ -0,0 +1,77 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import UiListItem from '../../list/internals/ListItem.js';
+import UiSubMenu from './SubMenu.js';
+import '@material/web/focus/md-focus-ring.js';
+import '../../ripple/ui-ripple.js';
+/**
+ * Material Design 3 Menu Item component.
+ *
+ * @slot - The menu item content (label, icon, etc.)
+ * @fires select - Dispatched when the menu item is selected
+ * @fires submenu-open - Dispatched when a sub-menu is opened
+ */
+export default class UiMenuItem extends UiListItem {
+    /**
+     * The ID of the associated submenu
+     * @attribute
+     */
+    accessor submenu: string | undefined;
+    /**
+     * Whether the menu item has a sub-menu
+     */
+    get hasSubMenu(): boolean;
+    /**
+     * Reference to the sub-menu element
+     */
+    get subMenuElement(): UiSubMenu | null;
+    /**
+     * Whether the sub-menu is open
+     */
+    protected accessor subMenuOpen: boolean;
+    constructor();
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Sets up the connection between this menu item and its submenu
+     */
+    protected setupSubmenuConnection(): void;
+    /**
+     * Updates accessibility attributes
+     */
+    protected updateAccessibility(): void;
+    /**
+     * Handles mouse enter events
+     */
+    protected handleMouseEnter(): void;
+    /**
+     * Handles mouse leave events
+     */
+    protected handleMouseLeave(): void;
+    /**
+     * Handles click events
+     */
+    handleClick(e: MouseEvent): void;
+    /**
+     * Handles menu item click events
+     */
+    protected handleMenuItemClick(e: MouseEvent): void;
+    /**
+     * Opens the sub-menu
+     */
+    openSubMenu(): void;
+    /**
+     * Closes the sub-menu
+     */
+    closeSubMenu(): void;
+    /**
+     * Toggles the sub-menu
+     */
+    toggleSubMenu(): void;
+    /**
+     * Handles sub-menu item selection
+     */
+    protected handleSubMenuSelect(e: CustomEvent): void;
+    render(): TemplateResult;
+    protected renderEnd(): TemplateResult;
+}
+//# sourceMappingURL=MenuItem.d.ts.map

package/build/src/md/menu/internal/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,SAAS,MAAM,cAAc,CAAA;AAIpC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,2BAA2B,CAAA;AAElC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD;;;OAGG;IACyB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAEhE;;OAEG;IACH,IAAI,UAAU,IAAI,OAAO,CAExB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,SAAS,GAAG,IAAI,CAGrC;IAED;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,WAAW,UAAQ;;IAStC,iBAAiB,IAAI,IAAI;cAUf,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASzE;;OAEG;IACH,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAYxC;;OAEG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAUrC;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IASlC;;OAEG;IACa,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAUhD;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAIlD;;OAEG;IACH,WAAW,IAAI,IAAI;IAgBnB;;OAEG;IACH,YAAY,IAAI,IAAI;IAQpB;;OAEG;IACH,aAAa,IAAI,IAAI;IAQrB;;OAEG;IACH,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAW1C,MAAM,IAAI,cAAc;cAcd,SAAS,IAAI,cAAc;CAO/C"}

package/build/src/md/menu/internal/MenuItem.js

@@ -0,0 +1,216 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import UiListItem from '../../list/internals/ListItem.js';
+import { findElementInShadowRoots } from '../../../lib/Dom.js';
+import { nanoid } from 'nanoid';
+import '@material/web/focus/md-focus-ring.js';
+import '../../ripple/ui-ripple.js';
+let UiMenuItem = (() => {
+    let _classSuper = UiListItem;
+    let _submenu_decorators;
+    let _submenu_initializers = [];
+    let _submenu_extraInitializers = [];
+    let _subMenuOpen_decorators;
+    let _subMenuOpen_initializers = [];
+    let _subMenuOpen_extraInitializers = [];
+    return class UiMenuItem extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _submenu_decorators = [property({ type: String })];
+            _subMenuOpen_decorators = [state()];
+            __esDecorate(this, null, _submenu_decorators, { kind: "accessor", name: "submenu", static: false, private: false, access: { has: obj => "submenu" in obj, get: obj => obj.submenu, set: (obj, value) => { obj.submenu = value; } }, metadata: _metadata }, _submenu_initializers, _submenu_extraInitializers);
+            __esDecorate(this, null, _subMenuOpen_decorators, { kind: "accessor", name: "subMenuOpen", static: false, private: false, access: { has: obj => "subMenuOpen" in obj, get: obj => obj.subMenuOpen, set: (obj, value) => { obj.subMenuOpen = value; } }, metadata: _metadata }, _subMenuOpen_initializers, _subMenuOpen_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #submenu_accessor_storage = __runInitializers(this, _submenu_initializers, void 0);
+        /**
+         * The ID of the associated submenu
+         * @attribute
+         */
+        get submenu() { return this.#submenu_accessor_storage; }
+        set submenu(value) { this.#submenu_accessor_storage = value; }
+        /**
+         * Whether the menu item has a sub-menu
+         */
+        get hasSubMenu() {
+            return !!this.submenu && !!this.subMenuElement;
+        }
+        /**
+         * Reference to the sub-menu element
+         */
+        get subMenuElement() {
+            if (!this.submenu)
+                return null;
+            return findElementInShadowRoots(this.submenu, this);
+        }
+        #subMenuOpen_accessor_storage = (__runInitializers(this, _submenu_extraInitializers), __runInitializers(this, _subMenuOpen_initializers, false));
+        /**
+         * Whether the sub-menu is open
+         */
+        get subMenuOpen() { return this.#subMenuOpen_accessor_storage; }
+        set subMenuOpen(value) { this.#subMenuOpen_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _subMenuOpen_extraInitializers);
+            this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+            this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+            this.addEventListener('click', this.handleMenuItemClick.bind(this));
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setAttribute('role', 'menuitem');
+            // Generate ID if not present (needed for submenu anchoring)
+            if (!this.id) {
+                this.id = nanoid(6);
+            }
+        }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('submenu')) {
+                this.updateAccessibility();
+                this.setupSubmenuConnection();
+            }
+        }
+        /**
+         * Sets up the connection between this menu item and its submenu
+         */
+        setupSubmenuConnection() {
+            if (this.subMenuElement) {
+                this.subMenuElement.anchor = this.id;
+                // Find parent menu and set it on the submenu
+                const parentMenu = this.closest('ui-menu, ui-sub-menu');
+                if (parentMenu) {
+                    this.subMenuElement.setParentMenu(parentMenu);
+                }
+            }
+        }
+        /**
+         * Updates accessibility attributes
+         */
+        updateAccessibility() {
+            if (this.hasSubMenu) {
+                this.setAttribute('aria-haspopup', 'true');
+                this.setAttribute('aria-expanded', String(this.subMenuOpen));
+            }
+            else {
+                this.removeAttribute('aria-haspopup');
+                this.removeAttribute('aria-expanded');
+            }
+        }
+        /**
+         * Handles mouse enter events
+         */
+        handleMouseEnter() {
+            if (this.hasSubMenu && !this.subMenuOpen) {
+                this.openSubMenu();
+            }
+        }
+        /**
+         * Handles mouse leave events
+         */
+        handleMouseLeave() {
+            // Close sub-menu after a delay to allow moving to sub-menu
+            setTimeout(() => {
+                if (this.subMenuOpen && !this.matches(':hover') && !this.subMenuElement?.matches(':hover')) {
+                    this.closeSubMenu();
+                }
+            }, 100);
+        }
+        /**
+         * Handles click events
+         */
+        handleClick(e) {
+            if (this.hasSubMenu) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleSubMenu();
+            }
+            else {
+                super.handleClick(e);
+            }
+        }
+        /**
+         * Handles menu item click events
+         */
+        handleMenuItemClick(e) {
+            this.handleClick(e);
+        }
+        /**
+         * Opens the sub-menu
+         */
+        openSubMenu() {
+            if (!this.hasSubMenu || this.subMenuOpen)
+                return;
+            this.subMenuOpen = true;
+            this.updateAccessibility();
+            this.subMenuElement?.show();
+            this.dispatchEvent(new CustomEvent('submenu-open', {
+                detail: { subMenu: this.subMenuElement },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        /**
+         * Closes the sub-menu
+         */
+        closeSubMenu() {
+            if (!this.subMenuOpen)
+                return;
+            this.subMenuOpen = false;
+            this.updateAccessibility();
+            this.subMenuElement?.hide();
+        }
+        /**
+         * Toggles the sub-menu
+         */
+        toggleSubMenu() {
+            if (this.subMenuOpen) {
+                this.closeSubMenu();
+            }
+            else {
+                this.openSubMenu();
+            }
+        }
+        /**
+         * Handles sub-menu item selection
+         */
+        handleSubMenuSelect(e) {
+            // Bubble up the selection event
+            this.dispatchEvent(new CustomEvent('select', {
+                detail: e.detail,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        render() {
+            const classes = classMap({
+                'surface': true,
+                'menu-item': true,
+                'menu-item-with-submenu': this.hasSubMenu,
+                'submenu-open': this.subMenuOpen,
+            });
+            return html `
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <div class=${classes} role="menuitem">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
+    `;
+        }
+        renderEnd() {
+            return html `<div class="end">
+      <slot name="end" @slotchange=${this.handleSlotChange}></slot>
+      <span class="trailing-supporting-text"><slot name="end-text"></slot></span>
+      ${this.hasSubMenu ? html `<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
+    </div>`;
+        }
+    };
+})();
+/**
+ * Material Design 3 Menu Item component.
+ *
+ * @slot - The menu item content (label, icon, etc.)
+ * @fires select - Dispatched when the menu item is selected
+ * @fires submenu-open - Dispatched when a sub-menu is opened
+ */
+export default UiMenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/build/src/md/menu/internal/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\nimport { nanoid } from 'nanoid'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\n\n/**\n * Material Design 3 Menu Item component.\n *\n * @slot - The menu item content (label, icon, etc.)\n * @fires select - Dispatched when the menu item is selected\n * @fires submenu-open - Dispatched when a sub-menu is opened\n */\nexport default class UiMenuItem extends UiListItem {\n  /**\n   * The ID of the associated submenu\n   * @attribute\n   */\n  @property({ type: String }) accessor submenu: string | undefined\n\n  /**\n   * Whether the menu item has a sub-menu\n   */\n  get hasSubMenu(): boolean {\n    return !!this.submenu && !!this.subMenuElement\n  }\n\n  /**\n   * Reference to the sub-menu element\n   */\n  get subMenuElement(): UiSubMenu | null {\n    if (!this.submenu) return null\n    return findElementInShadowRoots(this.submenu, this) as UiSubMenu | null\n  }\n\n  /**\n   * Whether the sub-menu is open\n   */\n  @state() protected accessor subMenuOpen = false\n\n  constructor() {\n    super()\n    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this))\n    this.addEventListener('mouseleave', this.handleMouseLeave.bind(this))\n    this.addEventListener('click', this.handleMenuItemClick.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menuitem')\n\n    // Generate ID if not present (needed for submenu anchoring)\n    if (!this.id) {\n      this.id = nanoid(6)\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('submenu')) {\n      this.updateAccessibility()\n      this.setupSubmenuConnection()\n    }\n  }\n\n  /**\n   * Sets up the connection between this menu item and its submenu\n   */\n  protected setupSubmenuConnection(): void {\n    if (this.subMenuElement) {\n      this.subMenuElement.anchor = this.id\n\n      // Find parent menu and set it on the submenu\n      const parentMenu = this.closest('ui-menu, ui-sub-menu') as UiSubMenu\n      if (parentMenu) {\n        this.subMenuElement.setParentMenu(parentMenu)\n      }\n    }\n  }\n\n  /**\n   * Updates accessibility attributes\n   */\n  protected updateAccessibility(): void {\n    if (this.hasSubMenu) {\n      this.setAttribute('aria-haspopup', 'true')\n      this.setAttribute('aria-expanded', String(this.subMenuOpen))\n    } else {\n      this.removeAttribute('aria-haspopup')\n      this.removeAttribute('aria-expanded')\n    }\n  }\n\n  /**\n   * Handles mouse enter events\n   */\n  protected handleMouseEnter(): void {\n    if (this.hasSubMenu && !this.subMenuOpen) {\n      this.openSubMenu()\n    }\n  }\n\n  /**\n   * Handles mouse leave events\n   */\n  protected handleMouseLeave(): void {\n    // Close sub-menu after a delay to allow moving to sub-menu\n    setTimeout(() => {\n      if (this.subMenuOpen && !this.matches(':hover') && !this.subMenuElement?.matches(':hover')) {\n        this.closeSubMenu()\n      }\n    }, 100)\n  }\n\n  /**\n   * Handles click events\n   */\n  public override handleClick(e: MouseEvent): void {\n    if (this.hasSubMenu) {\n      e.preventDefault()\n      e.stopPropagation()\n      this.toggleSubMenu()\n    } else {\n      super.handleClick(e)\n    }\n  }\n\n  /**\n   * Handles menu item click events\n   */\n  protected handleMenuItemClick(e: MouseEvent): void {\n    this.handleClick(e)\n  }\n\n  /**\n   * Opens the sub-menu\n   */\n  openSubMenu(): void {\n    if (!this.hasSubMenu || this.subMenuOpen) return\n\n    this.subMenuOpen = true\n    this.updateAccessibility()\n    this.subMenuElement?.show()\n\n    this.dispatchEvent(\n      new CustomEvent('submenu-open', {\n        detail: { subMenu: this.subMenuElement },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * Closes the sub-menu\n   */\n  closeSubMenu(): void {\n    if (!this.subMenuOpen) return\n\n    this.subMenuOpen = false\n    this.updateAccessibility()\n    this.subMenuElement?.hide()\n  }\n\n  /**\n   * Toggles the sub-menu\n   */\n  toggleSubMenu(): void {\n    if (this.subMenuOpen) {\n      this.closeSubMenu()\n    } else {\n      this.openSubMenu()\n    }\n  }\n\n  /**\n   * Handles sub-menu item selection\n   */\n  protected handleSubMenuSelect(e: CustomEvent): void {\n    // Bubble up the selection event\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: e.detail,\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'surface': true,\n      'menu-item': true,\n      'menu-item-with-submenu': this.hasSubMenu,\n      'submenu-open': this.subMenuOpen,\n    })\n\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()}\n      <div class=${classes} role=\"menuitem\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n    `\n  }\n\n  protected override renderEnd(): TemplateResult {\n    return html`<div class=\"end\">\n      <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n      <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n      ${this.hasSubMenu ? html`<ui-icon class=\"menu-item-arrow\">arrow_right</ui-icon>` : ''}\n    </div>`\n  }\n}\n"]}

package/build/src/md/menu/internal/MenuItem.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=MenuItem.styles.d.ts.map

package/build/src/md/menu/internal/MenuItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.styles.ts"],"names":[],"mappings":";AAEA,wBA6DC"}

package/build/src/md/menu/internal/MenuItem.styles.js

@@ -0,0 +1,64 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 16px;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.2s ease;
+  }
+
+  .menu-item:hover {
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  .menu-item:focus {
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  .menu-item[disabled] {
+    opacity: 0.38;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .menu-item-with-submenu {
+    position: relative;
+  }
+
+  .menu-item-with-submenu:hover .menu-item-arrow {
+    color: var(--md-sys-color-primary);
+  }
+
+  .menu-item-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--md-sys-color-on-surface);
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  /* Focus Ring */
+  md-focus-ring {
+    --md-focus-ring-color: var(--md-sys-color-primary);
+    --md-focus-ring-width: 2px;
+  }
+
+  /* Ripple Effect */
+  ui-ripple {
+    --md-ripple-color: var(--md-sys-color-primary);
+    --md-ripple-opacity: 0.12;
+  }
+`;
+//# sourceMappingURL=MenuItem.styles.js.map

package/build/src/md/menu/internal/MenuItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    position: relative;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    cursor: pointer;\n    outline: none;\n    transition: background-color 0.2s ease;\n  }\n\n  .menu-item:hover {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item:focus {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item[disabled] {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .menu-item-with-submenu {\n    position: relative;\n  }\n\n  .menu-item-with-submenu:hover .menu-item-arrow {\n    color: var(--md-sys-color-primary);\n  }\n\n  .menu-item-arrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 18px;\n    font-weight: 500;\n  }\n\n  /* Focus Ring */\n  md-focus-ring {\n    --md-focus-ring-color: var(--md-sys-color-primary);\n    --md-focus-ring-width: 2px;\n  }\n\n  /* Ripple Effect */\n  ui-ripple {\n    --md-ripple-color: var(--md-sys-color-primary);\n    --md-ripple-opacity: 0.12;\n  }\n`\n"]}

package/build/src/md/menu/internal/SubMenu.d.ts

@@ -0,0 +1,56 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import Menu from './Menu.js';
+import UiListItem from '../../list/internals/ListItem.js';
+import type { MenuItem } from '../../../index.js';
+/**
+ * Material Design 3 Sub-Menu component.
+ * Extends the main Menu component to provide sub-menu functionality.
+ * Uses Popover API and Anchor Positioning API for modern positioning.
+ *
+ * @slot - The sub-menu items
+ * @fires select - Dispatched when a sub-menu item is selected
+ * @fires close - Dispatched when the sub-menu is closed
+ */
+export default class UiSubMenu extends Menu {
+    /**
+     * The ID of the anchor element (parent menu item)
+     * @attribute
+     */
+    accessor anchor: string | undefined;
+    /**
+     * Reference to the parent menu
+     */
+    parentMenu: Menu | null;
+    /**
+     * Reference to the anchor element
+     */
+    get anchorElement(): MenuItem | null;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Updates anchor positioning using CSS Anchor Positioning API
+     */
+    protected updateAnchorPositioning(): void;
+    /**
+     * Shows the submenu
+     */
+    show(): void;
+    /**
+     * Hides the submenu
+     */
+    hide(): void;
+    /**
+     * Sets the parent menu reference
+     */
+    setParentMenu(menu: Menu): void;
+    /**
+     * Handles selection events - bubbles them up to parent menu
+     */
+    notifySelect(item: UiListItem): boolean;
+    /**
+     * Handles keyboard navigation specific to submenus
+     */
+    handleKeydown(e: KeyboardEvent): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=SubMenu.d.ts.map

package/build/src/md/menu/internal/SubMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/SubMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,IAAI;IACzC;;;OAGG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAE/D;;OAEG;IACH,UAAU,EAAE,IAAI,GAAG,IAAI,CAAO;IAE9B;;OAEG;IACH,IAAI,aAAa,IAAI,QAAQ,GAAG,IAAI,CAGnC;IAEQ,iBAAiB,IAAI,IAAI;cAMf,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQzE;;OAEG;IACH,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAYzC;;OAEG;IACM,IAAI,IAAI,IAAI;IA4BrB;;OAEG;IACM,IAAI,IAAI,IAAI;IAcrB;;OAEG;IACH,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAI/B;;OAEG;IACM,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO;IAahD;;OAEG;IACM,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IA0BrC,MAAM,IAAI,cAAc;CAYlC"}