@api-client/ui 0.5.20 → 0.5.22

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

@@ -7,11 +7,21 @@ import { findElementInShadowRoots } from '../../../lib/Dom.js';
 import { nanoid } from 'nanoid';
 import '@material/web/focus/md-focus-ring.js';
 import '../../ripple/ui-ripple.js';
+import '../../icons/ui-icon.js';
 let UiMenuItem = (() => {
     let _classSuper = UiListItem;
     let _submenu_decorators;
     let _submenu_initializers = [];
     let _submenu_extraInitializers = [];
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _showSelectionIcon_decorators;
+    let _showSelectionIcon_initializers = [];
+    let _showSelectionIcon_extraInitializers = [];
     let _subMenuOpen_decorators;
     let _subMenuOpen_initializers = [];
     let _subMenuOpen_extraInitializers = [];
@@ -19,8 +29,14 @@ let UiMenuItem = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _submenu_decorators = [property({ type: String })];
+            _selected_decorators = [property({ type: Boolean, reflect: true })];
+            _value_decorators = [property({ type: String, reflect: true })];
+            _showSelectionIcon_decorators = [property({ type: Boolean })];
             _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, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _showSelectionIcon_decorators, { kind: "accessor", name: "showSelectionIcon", static: false, private: false, access: { has: obj => "showSelectionIcon" in obj, get: obj => obj.showSelectionIcon, set: (obj, value) => { obj.showSelectionIcon = value; } }, metadata: _metadata }, _showSelectionIcon_initializers, _showSelectionIcon_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 });
         }
@@ -31,6 +47,38 @@ let UiMenuItem = (() => {
          */
         get submenu() { return this.#submenu_accessor_storage; }
         set submenu(value) { this.#submenu_accessor_storage = value; }
+        #selected_accessor_storage = (__runInitializers(this, _submenu_extraInitializers), __runInitializers(this, _selected_initializers, false
+        /**
+         * The value associated with this menu item. Use it to identify value associated with the menu item,
+         * when selected.
+         * @attribute
+         */
+        ));
+        /**
+         * Whether this menu item is selected
+         * @attribute
+         */
+        get selected() { return this.#selected_accessor_storage; }
+        set selected(value) { this.#selected_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _value_initializers, void 0));
+        /**
+         * The value associated with this menu item. Use it to identify value associated with the menu item,
+         * when selected.
+         * @attribute
+         */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #showSelectionIcon_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _showSelectionIcon_initializers, false
+        /**
+         * Whether the menu item has a sub-menu
+         */
+        ));
+        /**
+         * Whether to automatically show a check icon when selected
+         * @attribute
+         */
+        get showSelectionIcon() { return this.#showSelectionIcon_accessor_storage; }
+        set showSelectionIcon(value) { this.#showSelectionIcon_accessor_storage = value; }
         /**
          * Whether the menu item has a sub-menu
          */
@@ -45,7 +93,7 @@ let UiMenuItem = (() => {
                 return null;
             return findElementInShadowRoots(this.submenu, this);
         }
-        #subMenuOpen_accessor_storage = (__runInitializers(this, _submenu_extraInitializers), __runInitializers(this, _subMenuOpen_initializers, false));
+        #subMenuOpen_accessor_storage = (__runInitializers(this, _showSelectionIcon_extraInitializers), __runInitializers(this, _subMenuOpen_initializers, false));
         /**
          * Whether the sub-menu is open
          */
@@ -65,6 +113,8 @@ let UiMenuItem = (() => {
             if (!this.id) {
                 this.id = nanoid(6);
             }
+            // Initialize selection state
+            this.updateSelectionState();
         }
         updated(changedProperties) {
             super.updated(changedProperties);
@@ -72,6 +122,9 @@ let UiMenuItem = (() => {
                 this.updateAccessibility();
                 this.setupSubmenuConnection();
             }
+            if (changedProperties.has('selected')) {
+                this.updateSelectionState();
+            }
         }
         /**
          * Sets up the connection between this menu item and its submenu
@@ -99,6 +152,19 @@ let UiMenuItem = (() => {
                 this.removeAttribute('aria-expanded');
             }
         }
+        /**
+         * Updates the selection state styling
+         */
+        updateSelectionState() {
+            if (this.selected) {
+                this.classList.add('select');
+                this.setAttribute('aria-selected', 'true');
+            }
+            else {
+                this.classList.remove('select');
+                this.setAttribute('aria-selected', 'false');
+            }
+        }
         /**
          * Handles mouse enter events
          */
@@ -201,6 +267,13 @@ let UiMenuItem = (() => {
       <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>`;
+        }
+        renderStart() {
+            const showCheckIcon = this.showSelectionIcon && this.selected;
+            return html `<div class="start">
+      ${showCheckIcon ? html `<ui-icon class="selection-check">check</ui-icon>` : ''}
+      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
     </div>`;
         }
     };

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

@@ -1 +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"]}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAEzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,OAAO,sCAAsC,CAAA;AAC7C,OAAO,2BAA2B,CAAA;AAClC,OAAO,wBAAwB,CAAA;;sBASS,UAAU;;;;;;;;;;;;;;;;iBAA7B,UAAW,SAAQ,WAAU;;;mCAK/C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAM1B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iCAO1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAMzC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAoB3B,KAAK,EAAE;YAvCoB,0KAAS,OAAO,6BAAP,OAAO,yFAAoB;YAMpB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAO1B,oKAAS,KAAK,6BAAL,KAAK,qFAAoB;YAMhD,wMAAS,iBAAiB,6BAAjB,iBAAiB,6GAAQ;YAoBtD,sLAAmB,WAAW,6BAAX,WAAW,iGAAQ;;;QAvCnB,mFAAoC;QAJhE;;;WAGG;QACyB,IAAS,OAAO,6CAAoB;QAApC,IAAS,OAAO,mDAAoB;QAMpB,mIAAoB,KAAK;QAErE;;;;WAIG;WANkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAO1B,uIAAkC;QAL7E;;;;WAIG;QACwC,IAAS,KAAK,2CAAoB;QAAlC,IAAS,KAAK,iDAAoB;QAMhD,mJAA6B,KAAK;QAE/D;;WAEG;WAJ4D;QAJ/D;;;WAGG;QAC0B,IAAS,iBAAiB,uDAAQ;QAAlC,IAAS,iBAAiB,6DAAQ;QAE/D;;WAEG;QACH,IAAI,UAAU;YACZ,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAA;QAChD,CAAC;QAED;;WAEG;QACH,IAAI,cAAc;YAChB,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAA;YAC9B,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAqB,CAAA;QACzE,CAAC;QAKQ,mJAAiC,KAAK,GAAA;QAH/C;;WAEG;QACM,IAAmB,WAAW,iDAAQ;QAAtC,IAAmB,WAAW,uDAAQ;QAE/C;YACE,KAAK,EAAE,CAAA;;YACP,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACrE,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACrE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;SACpE;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YAErC,4DAA4D;YAC5D,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;gBACb,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACrB,CAAC;YAED,6BAA6B;YAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC7B,CAAC;QAEkB,OAAO,CAAC,iBAAuC;YAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;YAEhC,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,mBAAmB,EAAE,CAAA;gBAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAA;YAC/B,CAAC;YAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,oBAAoB,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC;QAED;;WAEG;QACO,sBAAsB;YAC9B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;gBAEpC,6CAA6C;gBAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAc,CAAA;gBACpE,IAAI,UAAU,EAAE,CAAC;oBACf,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;gBAC/C,CAAC;YACH,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB;YAC3B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;gBAC1C,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAA;YAC9D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;gBACrC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;YACvC,CAAC;QACH,CAAC;QAED;;WAEG;QACO,oBAAoB;YAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;gBAC5B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;gBAC/B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;YAC7C,CAAC;QACH,CAAC;QAED;;WAEG;QACO,gBAAgB;YACxB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACzC,IAAI,CAAC,WAAW,EAAE,CAAA;YACpB,CAAC;QACH,CAAC;QAED;;WAEG;QACO,gBAAgB;YACxB,2DAA2D;YAC3D,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC3F,IAAI,CAAC,YAAY,EAAE,CAAA;gBACrB,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;QAED;;WAEG;QACa,WAAW,CAAC,CAAa;YACvC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB,CAAC,CAAa;YACzC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC;QAED;;WAEG;QACH,WAAW;YACT,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;gBAAE,OAAM;YAEhD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAA;YAE3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE;gBACxC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED;;WAEG;QACH,YAAY;YACV,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAM;YAE7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YACxB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAA;QAC7B,CAAC;QAED;;WAEG;QACH,aAAa;YACX,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,YAAY,EAAE,CAAA;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,EAAE,CAAA;YACpB,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB,CAAC,CAAc;YAC1C,gCAAgC;YAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAEQ,MAAM;YACb,MAAM,OAAO,GAAG,QAAQ,CAAC;gBACvB,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,wBAAwB,EAAE,IAAI,CAAC,UAAU;gBACzC,cAAc,EAAE,IAAI,CAAC,WAAW;aACjC,CAAC,CAAA;YAEF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE;mBAClC,OAAO,oBAAoB,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE;KACpG,CAAA;QACH,CAAC;QAEkB,SAAS;YAC1B,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,gBAAgB;;QAElD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,wDAAwD,CAAC,CAAC,CAAC,EAAE;WAChF,CAAA;QACT,CAAC;QAEkB,WAAW;YAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;YAE7D,OAAO,IAAI,CAAA;QACP,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,CAAC,CAAC,CAAC,EAAE;uCAC5C,IAAI,CAAC,gBAAgB;WACjD,CAAA;QACT,CAAC;;;AA5PH;;;;;;GAMG;AACH,0BAsPC","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'\nimport '../../icons/ui-icon.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 this menu item is selected\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * The value associated with this menu item. Use it to identify value associated with the menu item,\n   * when selected.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor value: string | undefined\n\n  /**\n   * Whether to automatically show a check icon when selected\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor showSelectionIcon = false\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    // Initialize selection state\n    this.updateSelectionState()\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    if (changedProperties.has('selected')) {\n      this.updateSelectionState()\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   * Updates the selection state styling\n   */\n  protected updateSelectionState(): void {\n    if (this.selected) {\n      this.classList.add('select')\n      this.setAttribute('aria-selected', 'true')\n    } else {\n      this.classList.remove('select')\n      this.setAttribute('aria-selected', 'false')\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  protected override renderStart(): TemplateResult {\n    const showCheckIcon = this.showSelectionIcon && this.selected\n\n    return html`<div class=\"start\">\n      ${showCheckIcon ? html`<ui-icon class=\"selection-check\">check</ui-icon>` : ''}\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`\n  }\n}\n"]}

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

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

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

@@ -53,6 +53,7 @@ export default css `
   md-focus-ring {
     --md-focus-ring-color: var(--md-sys-color-primary);
     --md-focus-ring-width: 2px;
+    z-index: 2;
   }
 
   /* Ripple Effect */
@@ -60,5 +61,27 @@ export default css `
     --md-ripple-color: var(--md-sys-color-primary);
     --md-ripple-opacity: 0.12;
   }
+
+  /* Selected state */
+  :host(.select) .menu-item,
+  :host([selected]) .menu-item {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host(.select) .menu-item:hover,
+  :host([selected]) .menu-item:hover {
+    background-color: var(--md-sys-color-secondary-container);
+    opacity: 0.92;
+  }
+
+  /* Selection check icon */
+  .selection-check {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
 `;
 //# sourceMappingURL=MenuItem.styles.js.map

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

@@ -1 +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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFjB,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    z-index: 2;\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  /* Selected state */\n  :host(.select) .menu-item,\n  :host([selected]) .menu-item {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host(.select) .menu-item:hover,\n  :host([selected]) .menu-item:hover {\n    background-color: var(--md-sys-color-secondary-container);\n    opacity: 0.92;\n  }\n\n  /* Selection check icon */\n  .selection-check {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    width: 24px;\n    height: 24px;\n    margin-right: 8px;\n  }\n`\n"]}

package/build/src/md/menu/ui-menu-item.d.ts

@@ -4,10 +4,6 @@ import Element from './internal/MenuItem.js';
  * Material Design 3 Menu Item component.
  *
  * @element ui-menu-item
- * @attribute {Object} data - The menu item data object
- * @attribute {boolean} disabled - Whether the menu item is disabled
- * @fires select - Dispatched when the menu item is selected
- * @fires submenu-open - Dispatched when a sub-menu is opened
  */
 export declare class UiMenuItemElement extends Element {
     static styles: CSSResultOrNative[];
@@ -17,4 +13,5 @@ declare global {
         'ui-menu-item': UiMenuItemElement;
     }
 }
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js';
 //# sourceMappingURL=ui-menu-item.d.ts.map

package/build/src/md/menu/ui-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAI5C;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,OAAO;IAC5C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAuB;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAA;KAClC;CACF"}
+{"version":3,"file":"ui-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAI5C;;;;GAIG;AACH,qBACa,iBAAkB,SAAQ,OAAO;IAC5C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAuB;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAA;KAClC;CACF;AAED,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA"}

package/build/src/md/menu/ui-menu-item.js

@@ -7,10 +7,6 @@ import listStyles from '../list/internals/ListItem.styles.js';
  * Material Design 3 Menu Item component.
  *
  * @element ui-menu-item
- * @attribute {Object} data - The menu item data object
- * @attribute {boolean} disabled - Whether the menu item is disabled
- * @fires select - Dispatched when the menu item is selected
- * @fires submenu-open - Dispatched when a sub-menu is opened
  */
 let UiMenuItemElement = (() => {
     let _classDecorators = [customElement('ui-menu-item')];
@@ -34,4 +30,5 @@ let UiMenuItemElement = (() => {
     return UiMenuItemElement = _classThis;
 })();
 export { UiMenuItemElement };
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js';
 //# sourceMappingURL=ui-menu-item.js.map

package/build/src/md/menu/ui-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-menu-item.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu-item.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,OAAO,MAAM,MAAM,+BAA+B,CAAA;AAClD,OAAO,UAAU,MAAM,sCAAsC,CAAA;AAE7D;;;;;;;;GAQG;IAEU,iBAAiB;4BAD7B,aAAa,CAAC,cAAc,CAAC;;;;sBACS,OAAO;iCAAf,SAAQ,WAAO;;;;YAA9C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;;YADvD,uDAAiB;;;;;SAAjB,iBAAiB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/MenuItem.js'\nimport styles from './internal/MenuItem.styles.js'\nimport listStyles from '../list/internals/ListItem.styles.js'\n\n/**\n * Material Design 3 Menu Item component.\n *\n * @element ui-menu-item\n * @attribute {Object} data - The menu item data object\n * @attribute {boolean} disabled - Whether the menu item is disabled\n * @fires select - Dispatched when the menu item is selected\n * @fires submenu-open - Dispatched when a sub-menu is opened\n */\n@customElement('ui-menu-item')\nexport class UiMenuItemElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles, listStyles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-menu-item': UiMenuItemElement\n  }\n}\n"]}
+{"version":3,"file":"ui-menu-item.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu-item.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,OAAO,MAAM,MAAM,+BAA+B,CAAA;AAClD,OAAO,UAAU,MAAM,sCAAsC,CAAA;AAE7D;;;;GAIG;IAEU,iBAAiB;4BAD7B,aAAa,CAAC,cAAc,CAAC;;;;sBACS,OAAO;iCAAf,SAAQ,WAAO;;;;YAA9C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;;YADvD,uDAAiB;;;;;SAAjB,iBAAiB;AAU9B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/MenuItem.js'\nimport styles from './internal/MenuItem.styles.js'\nimport listStyles from '../list/internals/ListItem.styles.js'\n\n/**\n * Material Design 3 Menu Item component.\n *\n * @element ui-menu-item\n */\n@customElement('ui-menu-item')\nexport class UiMenuItemElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles, listStyles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-menu-item': UiMenuItemElement\n  }\n}\n\nexport { ListItemImage, ListItemLines } from '../list/internals/ListItem.js'\n"]}

package/build/src/md/menu/ui-menu.d.ts

@@ -19,4 +19,5 @@ declare global {
         'ui-menu': UiMenuElement;
     }
 }
+export type { UiListItemsChange, UiListSelection } from '../list/internals/List.js';
 //# sourceMappingURL=ui-menu.d.ts.map

package/build/src/md/menu/ui-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-menu.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,oBAAoB,CAAA;AAGxC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF"}
+{"version":3,"file":"ui-menu.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,oBAAoB,CAAA;AAGxC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF;AAED,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA"}

package/build/src/md/menu/ui-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-menu.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,oBAAoB,CAAA;AACxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAE9C;;;;;;;;;;GAUG;IAEU,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/Menu.js'\nimport styles from './internal/Menu.styles.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n *\n * @element ui-menu\n * @attribute {boolean} open - Whether the menu is currently open\n * @attribute {boolean} anchored - Whether the menu should be positioned relative to an anchor element\n * @attribute {boolean} disabled - Whether the menu is disabled\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\n@customElement('ui-menu')\nexport class UiMenuElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-menu': UiMenuElement\n  }\n}\n"]}
+{"version":3,"file":"ui-menu.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,oBAAoB,CAAA;AACxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAE9C;;;;;;;;;;GAUG;IAEU,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/Menu.js'\nimport styles from './internal/Menu.styles.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n *\n * @element ui-menu\n * @attribute {boolean} open - Whether the menu is currently open\n * @attribute {boolean} anchored - Whether the menu should be positioned relative to an anchor element\n * @attribute {boolean} disabled - Whether the menu is disabled\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\n@customElement('ui-menu')\nexport class UiMenuElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-menu': UiMenuElement\n  }\n}\n\nexport type { UiListItemsChange, UiListSelection } from '../list/internals/List.js'\n"]}

package/build/src/md/tabs/ui-tabs.d.ts

@@ -8,4 +8,5 @@ declare global {
         'ui-tabs': UiTabsElement;
     }
 }
+export { TabsPriority, type TabSelectionDetail } from './internals/Tabs.js';
 //# sourceMappingURL=ui-tabs.d.ts.map

package/build/src/md/tabs/ui-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-tabs.d.ts","sourceRoot":"","sources":["../../../../src/md/tabs/ui-tabs.ts"],"names":[],"mappings":"AACA,OAAO,OAAO,MAAM,qBAAqB,CAAA;AAEzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF"}
+{"version":3,"file":"ui-tabs.d.ts","sourceRoot":"","sources":["../../../../src/md/tabs/ui-tabs.ts"],"names":[],"mappings":"AACA,OAAO,OAAO,MAAM,qBAAqB,CAAA;AAEzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA"}

package/build/src/md/tabs/ui-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-tabs.js","sourceRoot":"","sources":["../../../../src/md/tabs/ui-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,MAAM,MAAM,4BAA4B,CAAA;IAIlC,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa","sourcesContent":["import { customElement } from 'lit/decorators.js'\nimport Element from './internals/Tabs.js'\nimport styles from './internals/Tabs.styles.js'\nimport type { CSSResultOrNative } from 'lit'\n\n@customElement('ui-tabs')\nexport class UiTabsElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-tabs': UiTabsElement\n  }\n}\n"]}
+{"version":3,"file":"ui-tabs.js","sourceRoot":"","sources":["../../../../src/md/tabs/ui-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,MAAM,MAAM,4BAA4B,CAAA;IAIlC,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa","sourcesContent":["import { customElement } from 'lit/decorators.js'\nimport Element from './internals/Tabs.js'\nimport styles from './internals/Tabs.styles.js'\nimport type { CSSResultOrNative } from 'lit'\n\n@customElement('ui-tabs')\nexport class UiTabsElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-tabs': UiTabsElement\n  }\n}\n\nexport { TabsPriority, type TabSelectionDetail } from './internals/Tabs.js'\n"]}

package/demo/md/menu/index.ts

@@ -1,6 +1,7 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
 import reactive from '../../../src/decorators/reactive.js'
+import type { UiMenuItemElement } from '../../../src/md/menu/ui-menu-item.js'
 
 import '../../../src/md/menu/ui-menu.js'
 import '../../../src/md/menu/ui-sub-menu.js'
@@ -17,6 +18,11 @@ class ComponentDemoPage extends DemoPage {
   @reactive() accessor nestedCount = 0
   @reactive() accessor overflowMenuOutput = ''
   @reactive() accessor overflowCount = 0
+  @reactive() accessor selectedOption = ''
+  @reactive() accessor iconMenuSelectOutput = ''
+  @reactive() accessor iconMenuSelectedOption = 'Premium'
+  @reactive() accessor autoCheckMenuOutput = ''
+  @reactive() accessor autoCheckSelectedOption = 'High'
 
   handleBasicMenuSelect(e: CustomEvent): void {
     const item = e.detail.item as HTMLElement
@@ -39,8 +45,37 @@ class ComponentDemoPage extends DemoPage {
     this.overflowCount++
   }
 
+  handleSelectionMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as HTMLElement
+    this.selectedOption = item.textContent?.trim() || ''
+  }
+
+  handleIconSelectMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as UiMenuItemElement
+    this.iconMenuSelectedOption = item.value || ''
+    this.iconMenuSelectOutput = `Selected: ${this.iconMenuSelectedOption}`
+  }
+
+  handleAutoCheckMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as HTMLElement
+    this.autoCheckSelectedOption = item.textContent?.trim() || ''
+    this.autoCheckMenuOutput = `Selected: ${this.autoCheckSelectedOption}`
+  }
+
   contentTemplate(): TemplateResult {
-    const { basicMenuOutput, nestedMenuOutput, nestedCount, basicCount, overflowMenuOutput, overflowCount } = this
+    const {
+      basicMenuOutput,
+      nestedMenuOutput,
+      nestedCount,
+      basicCount,
+      overflowMenuOutput,
+      overflowCount,
+      selectedOption,
+      iconMenuSelectOutput,
+      iconMenuSelectedOption,
+      autoCheckMenuOutput,
+      autoCheckSelectedOption,
+    } = this
     return html`
       <a href="../">Back</a>
 
@@ -361,6 +396,77 @@ class ComponentDemoPage extends DemoPage {
               <p>Count: ${nestedCount}</p>`
           : ''}
       </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Selection Menu</h2>
+        <p>A menu that allows selection of options:</p>
+        <ui-button id="selection-menu-trigger" color="filled" popovertarget="selection-menu"
+          >Open Selection Menu</ui-button
+        >
+        <ui-menu id="selection-menu" popover="auto" @select="${this.handleSelectionMenuSelect}">
+          <ui-menu-item data-value="option1" ?selected="${selectedOption === 'Option 1'}">
+            ${selectedOption === 'Option 1' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
+            <span>Option 1</span>
+          </ui-menu-item>
+          <ui-menu-item data-value="option2" ?selected="${selectedOption === 'Option 2'}">
+            ${selectedOption === 'Option 2' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
+            <span>Option 2</span>
+          </ui-menu-item>
+          <ui-menu-item data-value="option3" ?selected="${selectedOption === 'Option 3'}">
+            ${selectedOption === 'Option 3' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
+            <span>Option 3</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${selectedOption ? html`<p>Selected: ${selectedOption}</p>` : ''}
+      </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Menu with Selection and icons</h2>
+        <p>
+          A menu that maintains selection state. Select an option and reopen the menu to see the selection preserved:
+        </p>
+        <ui-button id="single-select-menu-trigger" color="filled" popovertarget="single-select-menu">
+          Select Option: ${iconMenuSelectedOption || 'None'}
+        </ui-button>
+        <ui-menu id="single-select-menu" popover="auto" @select="${this.handleIconSelectMenuSelect}">
+          <ui-menu-item value="premium" showSelectionIcon ?selected="${iconMenuSelectedOption === 'premium'}">
+            <span slot="start"><ui-icon>star</ui-icon></span>
+            <span>Premium</span>
+          </ui-menu-item>
+          <ui-menu-item value="standard" showSelectionIcon ?selected="${iconMenuSelectedOption === 'standard'}">
+            <span slot="start"><ui-icon>account_circle</ui-icon></span>
+            <span>Standard</span>
+          </ui-menu-item>
+          <ui-menu-item value="basic" showSelectionIcon ?selected="${iconMenuSelectedOption === 'basic'}">
+            <span slot="start"><ui-icon>public</ui-icon></span>
+            <span>Basic</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${iconMenuSelectOutput ? html`<p>${iconMenuSelectOutput}</p>` : ''}
+      </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Menu with Auto-Check Icons</h2>
+        <p>
+          A menu that automatically shows check icons for selected items when the
+          <code>show-selection-icon</code> attribute is used:
+        </p>
+        <ui-button id="auto-check-menu-trigger" color="filled" popovertarget="auto-check-menu">
+          Priority: ${autoCheckSelectedOption || 'None'}
+        </ui-button>
+        <ui-menu id="auto-check-menu" popover="auto" @select="${this.handleAutoCheckMenuSelect}">
+          <ui-menu-item showSelectionIcon>
+            <span>Low</span>
+          </ui-menu-item>
+          <ui-menu-item showSelectionIcon selected>
+            <span>High</span>
+          </ui-menu-item>
+          <ui-menu-item showSelectionIcon>
+            <span>Critical</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${autoCheckMenuOutput ? html`<p>${autoCheckMenuOutput}</p>` : ''}
+      </section>
     `
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.20",
+  "version": "0.5.22",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/button/ui-button-group.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-button-group': UiButtonGroupElement
   }
 }
+
+export type { MdGroupType } from './internals/group.js'

package/src/md/button/ui-button.ts

@@ -16,3 +16,6 @@ declare global {
     'ui-button': UiButtonElement
   }
 }
+
+export type { MdButtonColor } from './internals/button.js'
+export type { ButtonType, MdButtonShape, MdButtonSize } from './internals/base.js'

package/src/md/chip/ui-chip.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-chip': UiChipElement
   }
 }
+
+export { ChipType } from './internals/Chip.js'