@api-client/ui 0.4.1 → 0.4.3

package/build/src/md/list/internals/ListItem.js

@@ -4,7 +4,6 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { UiElement } from '../../UiElement.js';
 import { setDisabled } from '../../../lib/disabled.js';
-import { ripple } from '../../effects/rippleDirective.js';
 import '@material/web/focus/md-focus-ring.js';
 import '../../ripple/ui-ripple.js';
 export var ListItemLines;
@@ -218,25 +217,26 @@ let UiListItem = (() => {
             this.requestUpdate();
         }
         render() {
-            const { pressed = false } = this;
             const surfaceClasses = classMap({
                 surface: true,
-                pressed,
             });
             return html `
-      <md-focus-ring part="focus-ring" .control="${this}" inward></md-focus-ring>
-      <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
-        <div class="container"></div>
-        <div class="state"></div>
-        <div class="content">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
-        ${this.renderRipple()}
-      </div>
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
     `;
         }
         renderRipple = (__runInitializers(this, _tabIndex_extraInitializers), () => {
             const { disabled, static: isStatic } = this;
             return html `<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`;
         });
+        renderFocusRing() {
+            return html `<md-focus-ring
+      part="focus-ring"
+      class="focus-ring"
+      .control="${this}"
+      inward
+    ></md-focus-ring>`;
+        }
         renderStart() {
             return html `<div class="start">
       <slot name="start" @slotchange=${this.handleSlotChange}></slot>

package/build/src/md/list/internals/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport { ripple } from '../../effects/rippleDirective.js'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ListItemLines {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n}\n\nexport enum ListItemImage {\n  icon = 'icon',\n  avatar = 'avatar',\n  image = 'image',\n  video = 'video',\n  auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n  @query('ui-ripple') accessor ripple!: UiRipple\n\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * The number of lines to render the list template for.\n   * @default ListItemLines.one\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor lines: ListItemLines\n\n  /**\n   * The type of the list image.\n   * @default ListItemImage.icon\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor image: ListItemImage\n\n  /**\n   * Whether the list item is static and should not be focusable.\n   * The ripple effect will not be applied when `true`.\n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor static = false\n\n  @property({ type: Number, reflect: true }) override accessor tabIndex = -1\n\n  constructor() {\n    super()\n\n    this.lines = ListItemLines.one\n    this.image = ListItemImage.icon\n\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n    if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {\n      this.ripple?.endPress()\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.key !== ' ' && e.key !== 'Enter') return\n    // do not prevent default, so that parent elements can handle the key event\n    this.beginPress({ positionEvent: e })\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.key !== ' ' && e.key !== 'Enter') return\n\n    // do not prevent default, so that parent elements can handle the key event\n    this.endPress({ cancelled: false, actionData: { item: this } })\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    super.beginPress(options)\n    this.ripple.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    super.endPress(options)\n    this.ripple.endPress()\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    this.ripple.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    super.handlePointerLeave(e)\n\n    this.ripple.endHover()\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.setAttribute('tabindex', '0')\n    this.focus()\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive(): boolean {\n    if (this.disabled || this.static) {\n      return false\n    }\n    return this.getAttribute('tabindex') === '0'\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.removeAttribute('tabindex')\n  }\n\n  protected handleSlotChange(): void {\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n    })\n\n    return html`\n      <md-focus-ring part=\"focus-ring\" .control=\"${this as HTMLElement}\" inward></md-focus-ring>\n      <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <div class=\"content\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n        ${this.renderRipple()}\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled, static: isStatic } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled || isStatic}\"></ui-ripple>`\n  }\n\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\">\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`\n  }\n\n  protected 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    </div>`\n  }\n\n  protected renderBody(): TemplateResult {\n    const { lines = ListItemLines.one } = this\n    const hasSupportingText = lines !== ListItemLines.one\n    return html`\n      <div class=\"body\">\n        <span class=\"headline\"><slot></slot></span>\n        ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { setDisabled } from '../../../lib/disabled.js'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ListItemLines {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n}\n\nexport enum ListItemImage {\n  icon = 'icon',\n  avatar = 'avatar',\n  image = 'image',\n  video = 'video',\n  auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n  @query('ui-ripple') accessor ripple!: UiRipple\n\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * The number of lines to render the list template for.\n   * @default ListItemLines.one\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor lines: ListItemLines\n\n  /**\n   * The type of the list image.\n   * @default ListItemImage.icon\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor image: ListItemImage\n\n  /**\n   * Whether the list item is static and should not be focusable.\n   * The ripple effect will not be applied when `true`.\n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor static = false\n\n  @property({ type: Number, reflect: true }) override accessor tabIndex = -1\n\n  constructor() {\n    super()\n\n    this.lines = ListItemLines.one\n    this.image = ListItemImage.icon\n\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n    if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {\n      this.ripple?.endPress()\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.key !== ' ' && e.key !== 'Enter') return\n    // do not prevent default, so that parent elements can handle the key event\n    this.beginPress({ positionEvent: e })\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.key !== ' ' && e.key !== 'Enter') return\n\n    // do not prevent default, so that parent elements can handle the key event\n    this.endPress({ cancelled: false, actionData: { item: this } })\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    super.beginPress(options)\n    this.ripple.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    super.endPress(options)\n    this.ripple.endPress()\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    this.ripple.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    super.handlePointerLeave(e)\n\n    this.ripple.endHover()\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.setAttribute('tabindex', '0')\n    this.focus()\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive(): boolean {\n    if (this.disabled || this.static) {\n      return false\n    }\n    return this.getAttribute('tabindex') === '0'\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.removeAttribute('tabindex')\n  }\n\n  protected handleSlotChange(): void {\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    const surfaceClasses = classMap({\n      surface: true,\n    })\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()}\n      <div class=\"${surfaceClasses}\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled, static: isStatic } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled || isStatic}\"></ui-ripple>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring\n      part=\"focus-ring\"\n      class=\"focus-ring\"\n      .control=\"${this as HTMLElement}\"\n      inward\n    ></md-focus-ring>`\n  }\n\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\">\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`\n  }\n\n  protected 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    </div>`\n  }\n\n  protected renderBody(): TemplateResult {\n    const { lines = ListItemLines.one } = this\n    const hasSupportingText = lines !== ListItemLines.one\n    return html`\n      <div class=\"body\">\n        <span class=\"headline\"><slot></slot></span>\n        ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/list/internals/ListItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBA2MC"}
+{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAyLC"}

package/build/src/md/list/internals/ListItem.styles.js

@@ -33,26 +33,8 @@ export default css `
 
   .surface {
     height: inherit;
-    position: relative;
-
-    display: flex;
-    align-items: center;
-  }
-
-  .surface,
-  .content {
-    width: 100%;
-  }
+    box-sizing: border-box;
 
-  .container {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-
-  .content {
-    position: relative;
-    z-index: 2;
     display: flex;
     align-items: center;
     overflow: hidden;
@@ -63,7 +45,7 @@ export default css `
     z-index: 3;
   }
 
-  :host([image='video']) .content {
+  :host([image='video']) .surface {
     /* The spec says the right padding is 24px but counting from the checkbox check border.
       This does not include spacing presented by the checkbox itself (18 box, 40px state layer)
    */

package/build/src/md/list/internals/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2MjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n    position: relative;\n\n    --md-focus-ring-shape-end-end: 0px;\n    --md-focus-ring-shape-end-start: 0px;\n    --md-focus-ring-shape-start-end: 0px;\n    --md-focus-ring-shape-start-start: 0px;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([lines='two']),\n  :host([lines='one'][image='image']) {\n    height: 72px;\n  }\n\n  :host([lines='three']),\n  :host([lines='one'][image='video']) {\n    height: 88px;\n  }\n\n  .surface {\n    height: inherit;\n    position: relative;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .surface,\n  .content {\n    width: 100%;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  .content {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding: 8px 16px 8px 16px;\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  :host([image='video']) .content {\n    /* The spec says the right padding is 24px but counting from the checkbox check border.\n      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n   */\n    padding: 12px 16px 12px 0px;\n  }\n\n  .headline {\n    color: var(--md-sys-color-on-surface);\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    /* this is to make up to the 24px right padding defined in the spec. */\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host([lines='three']) .supporting-text {\n    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n  }\n\n  :host([lines='three']) .supporting-text ::slotted(*) {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([lines='two']) .supporting-text ::slotted(*) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trailing-supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  :host(.highlight) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host(.select) .state {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host([static]:hover) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n`\n"]}
+{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n    position: relative;\n\n    --md-focus-ring-shape-end-end: 0px;\n    --md-focus-ring-shape-end-start: 0px;\n    --md-focus-ring-shape-start-end: 0px;\n    --md-focus-ring-shape-start-start: 0px;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([lines='two']),\n  :host([lines='one'][image='image']) {\n    height: 72px;\n  }\n\n  :host([lines='three']),\n  :host([lines='one'][image='video']) {\n    height: 88px;\n  }\n\n  .surface {\n    height: inherit;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding: 8px 16px 8px 16px;\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  :host([image='video']) .surface {\n    /* The spec says the right padding is 24px but counting from the checkbox check border.\n      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n   */\n    padding: 12px 16px 12px 0px;\n  }\n\n  .headline {\n    color: var(--md-sys-color-on-surface);\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    /* this is to make up to the 24px right padding defined in the spec. */\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host([lines='three']) .supporting-text {\n    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n  }\n\n  :host([lines='three']) .supporting-text ::slotted(*) {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([lines='two']) .supporting-text ::slotted(*) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trailing-supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  :host(.highlight) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host(.select) .state {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host([static]:hover) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n`\n"]}

package/build/src/md/menu/index.d.ts

@@ -0,0 +1,4 @@
+export { UiMenuElement } from './ui-menu.js';
+export { UiMenuItemElement } from './ui-menu-item.js';
+export { UiSubMenuElement } from './ui-sub-menu.js';
+//# sourceMappingURL=index.d.ts.map

package/build/src/md/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA"}

package/build/src/md/menu/index.js

@@ -0,0 +1,4 @@
+export { UiMenuElement } from './ui-menu.js';
+export { UiMenuItemElement } from './ui-menu-item.js';
+export { UiSubMenuElement } from './ui-sub-menu.js';
+//# sourceMappingURL=index.js.map

package/build/src/md/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/md/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["export { UiMenuElement } from './ui-menu.js'\nexport { UiMenuItemElement } from './ui-menu-item.js'\nexport { UiSubMenuElement } from './ui-sub-menu.js'\n"]}

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

@@ -0,0 +1,76 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import UiList from '../../list/internals/List.js';
+import UiMenuItem from './MenuItem.js';
+import UiSubMenu from './SubMenu.js';
+import UiListItem from '../../list/internals/ListItem.js';
+/**
+ * Material Design 3 Menu component with sub-menu support.
+ * Uses Popover API and Anchor Positioning API for modern positioning.
+ *
+ * @fires select - Dispatched when a menu item is selected
+ * @fires close - Dispatched when the menu is closed
+ */
+export default class Menu extends UiList {
+    /**
+     * Whether the menu is currently open
+     * @attribute
+     */
+    accessor open: boolean;
+    /**
+     * Whether the menu is disabled
+     * @attribute
+     */
+    accessor disabled: boolean;
+    /**
+     * Currently active sub-menu
+     */
+    accessor activeSubMenu: UiSubMenu | null;
+    /**
+     * Assigned menu items from light DOM
+     */
+    protected accessor assignedMenuItems: UiMenuItem[];
+    constructor();
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    togglePopover(force?: boolean): boolean;
+    /**
+     * Shows the menu
+     */
+    show(): void;
+    /**
+     * Hides the menu
+     */
+    hide(): void;
+    /**
+     * Handles beforetoggle event from popover
+     */
+    protected handleBeforeToggle(e: Event): void;
+    /**
+     * Handles keyboard navigation for the menu
+     */
+    handleKeydown(e: KeyboardEvent): void;
+    handleSubMenuSelect(e: CustomEvent): void;
+    /**
+     * Opens the sub-menu for the currently active item
+     */
+    protected openSubMenu(): void;
+    /**
+     * Closes the currently open sub-menu
+     */
+    closeSubMenu(): void;
+    /**
+     * Sets the active sub-menu
+     */
+    setActiveSubMenu(subMenu: UiSubMenu | null): void;
+    notifySelect(item: UiListItem, index?: number): boolean;
+    /**
+     * Handles sub-menu opening
+     */
+    protected handleSubMenuOpen(e: CustomEvent): void;
+    /**
+     * Handles slot changes to update menu items
+     */
+    protected handleSlotChange(): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1D,OAAO,MAAM,MAAM,8BAA8B,CAAA;AACjD,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAGzD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,MAAM;IACtC;;;OAGG;IACyC,QAAQ,CAAC,IAAI,UAAQ;IAEjE;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;OAEG;IACM,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAExD;;OAEG;IACkD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAG,UAAU,EAAE,CAAA;;IAS/F,iBAAiB,IAAI,IAAI;cAYf,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQhE,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO;IAUhD;;OAEG;IACH,IAAI,IAAI,IAAI;IASZ;;OAEG;IACH,IAAI,IAAI,IAAI;IASZ;;OAEG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAQ5C;;OAEG;IACM,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAuB9C,mBAAmB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAIzC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAO7B;;OAEG;IACH,YAAY,IAAI,IAAI;IAQpB;;OAEG;IACH,gBAAgB,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAKxC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO;IAKhE;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAKjD;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAKzB,MAAM,IAAI,cAAc;CAWlC"}

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

@@ -0,0 +1,235 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { property, state, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { nanoid } from 'nanoid';
+import UiList from '../../list/internals/List.js';
+import { setDisabled } from '../../../lib/disabled.js';
+import { bound } from '../../../decorators/bound.js';
+let Menu = (() => {
+    let _classSuper = UiList;
+    let _instanceExtraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _activeSubMenu_decorators;
+    let _activeSubMenu_initializers = [];
+    let _activeSubMenu_extraInitializers = [];
+    let _assignedMenuItems_decorators;
+    let _assignedMenuItems_initializers = [];
+    let _assignedMenuItems_extraInitializers = [];
+    let _handleSubMenuSelect_decorators;
+    return class Menu extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _activeSubMenu_decorators = [state()];
+            _assignedMenuItems_decorators = [queryAssignedElements({ selector: 'ui-menu-item' })];
+            _handleSubMenuSelect_decorators = [bound];
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _activeSubMenu_decorators, { kind: "accessor", name: "activeSubMenu", static: false, private: false, access: { has: obj => "activeSubMenu" in obj, get: obj => obj.activeSubMenu, set: (obj, value) => { obj.activeSubMenu = value; } }, metadata: _metadata }, _activeSubMenu_initializers, _activeSubMenu_extraInitializers);
+            __esDecorate(this, null, _assignedMenuItems_decorators, { kind: "accessor", name: "assignedMenuItems", static: false, private: false, access: { has: obj => "assignedMenuItems" in obj, get: obj => obj.assignedMenuItems, set: (obj, value) => { obj.assignedMenuItems = value; } }, metadata: _metadata }, _assignedMenuItems_initializers, _assignedMenuItems_extraInitializers);
+            __esDecorate(this, null, _handleSubMenuSelect_decorators, { kind: "method", name: "handleSubMenuSelect", static: false, private: false, access: { has: obj => "handleSubMenuSelect" in obj, get: obj => obj.handleSubMenuSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #open_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _open_initializers, false
+        /**
+         * Whether the menu is disabled
+         * @attribute
+         */
+        ));
+        /**
+         * Whether the menu is currently open
+         * @attribute
+         */
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _disabled_initializers, false
+        /**
+         * Currently active sub-menu
+         */
+        ));
+        /**
+         * Whether the menu is disabled
+         * @attribute
+         */
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #activeSubMenu_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _activeSubMenu_initializers, null
+        /**
+         * Assigned menu items from light DOM
+         */
+        ));
+        /**
+         * Currently active sub-menu
+         */
+        get activeSubMenu() { return this.#activeSubMenu_accessor_storage; }
+        set activeSubMenu(value) { this.#activeSubMenu_accessor_storage = value; }
+        #assignedMenuItems_accessor_storage = (__runInitializers(this, _activeSubMenu_extraInitializers), __runInitializers(this, _assignedMenuItems_initializers, void 0));
+        /**
+         * Assigned menu items from light DOM
+         */
+        get assignedMenuItems() { return this.#assignedMenuItems_accessor_storage; }
+        set assignedMenuItems(value) { this.#assignedMenuItems_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _assignedMenuItems_extraInitializers);
+            this.selector = 'ui-menu-item';
+            this.ariaExpanded = 'false';
+            this.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setAttribute('role', 'menu');
+            this.setAttribute('tabindex', '-1');
+            if (!this.hasAttribute('popover')) {
+                this.setAttribute('popover', 'auto');
+            }
+            if (!this.id) {
+                this.id = nanoid();
+            }
+        }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('disabled')) {
+                setDisabled(this, this.disabled);
+            }
+        }
+        togglePopover(force) {
+            this.open = !this.open;
+            this.ariaExpanded = String(this.open);
+            this.tabIndex = this.open ? 0 : -1;
+            if (this.open) {
+                this.focus();
+            }
+            return super.togglePopover(force);
+        }
+        /**
+         * Shows the menu
+         */
+        show() {
+            this.tabIndex = 0; // Make menu focusable
+            this.ariaExpanded = 'true';
+            this.showPopover();
+            this.open = true;
+            this.focus();
+            this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }));
+        }
+        /**
+         * Hides the menu
+         */
+        hide() {
+            this.tabIndex = -1;
+            this.ariaExpanded = 'false';
+            this.hidePopover();
+            this.open = false;
+            this.closeSubMenu();
+            this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }));
+        }
+        /**
+         * Handles beforetoggle event from popover
+         */
+        handleBeforeToggle(e) {
+            const toggleEvent = e;
+            if (toggleEvent.newState === 'closed') {
+                this.open = false;
+                this.closeSubMenu();
+            }
+        }
+        /**
+         * Handles keyboard navigation for the menu
+         */
+        handleKeydown(e) {
+            if (!this.open || e.defaultPrevented)
+                return;
+            switch (e.key) {
+                case 'Escape':
+                    e.preventDefault();
+                    this.hide();
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    this.openSubMenu();
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    this.closeSubMenu();
+                    break;
+                default:
+                    // Let the parent UiList handle other keys
+                    super.handleKeydown(e);
+            }
+        }
+        handleSubMenuSelect(e) {
+            super.notifySelect(e.detail.item, e.detail.index);
+        }
+        /**
+         * Opens the sub-menu for the currently active item
+         */
+        openSubMenu() {
+            const activeItem = this.activeListItem;
+            if (activeItem?.hasSubMenu) {
+                activeItem.openSubMenu();
+            }
+        }
+        /**
+         * Closes the currently open sub-menu
+         */
+        closeSubMenu() {
+            if (this.activeSubMenu) {
+                this.activeSubMenu.removeEventListener('select', this.handleSubMenuSelect);
+                this.activeSubMenu.hide();
+                this.activeSubMenu = null;
+            }
+        }
+        /**
+         * Sets the active sub-menu
+         */
+        setActiveSubMenu(subMenu) {
+            this.activeSubMenu = subMenu;
+            subMenu?.addEventListener('select', this.handleSubMenuSelect);
+        }
+        notifySelect(item, index) {
+            this.hide();
+            return super.notifySelect(item, index);
+        }
+        /**
+         * Handles sub-menu opening
+         */
+        handleSubMenuOpen(e) {
+            const subMenu = e.detail.subMenu;
+            this.setActiveSubMenu(subMenu);
+        }
+        /**
+         * Handles slot changes to update menu items
+         */
+        handleSlotChange() {
+            // Update the items list when slot content changes
+            this.updateItems();
+        }
+        render() {
+            const classes = classMap({
+                'menu-container': true,
+            });
+            return html `
+      <div class=${classes}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+        }
+    };
+})();
+/**
+ * Material Design 3 Menu component with sub-menu support.
+ * Uses Popover API and Anchor Positioning API for modern positioning.
+ *
+ * @fires select - Dispatched when a menu item is selected
+ * @fires close - Dispatched when the menu is closed
+ */
+export default Menu;
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state, queryAssignedElements } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { nanoid } from 'nanoid'\nimport UiList from '../../list/internals/List.js'\nimport UiMenuItem from './MenuItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n * Uses Popover API and Anchor Positioning API for modern positioning.\n *\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n */\nexport default class Menu extends UiList {\n  /**\n   * Whether the menu is currently open\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  /**\n   * Whether the menu is disabled\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Currently active sub-menu\n   */\n  @state() accessor activeSubMenu: UiSubMenu | null = null\n\n  /**\n   * Assigned menu items from light DOM\n   */\n  @queryAssignedElements({ selector: 'ui-menu-item' }) protected accessor assignedMenuItems!: UiMenuItem[]\n\n  constructor() {\n    super()\n    this.selector = 'ui-menu-item'\n    this.ariaExpanded = 'false'\n    this.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menu')\n    this.setAttribute('tabindex', '-1')\n    if (!this.hasAttribute('popover')) {\n      this.setAttribute('popover', 'auto')\n    }\n    if (!this.id) {\n      this.id = nanoid()\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n  }\n\n  override togglePopover(force?: boolean): boolean {\n    this.open = !this.open\n    this.ariaExpanded = String(this.open)\n    this.tabIndex = this.open ? 0 : -1\n    if (this.open) {\n      this.focus()\n    }\n    return super.togglePopover(force)\n  }\n\n  /**\n   * Shows the menu\n   */\n  show(): void {\n    this.tabIndex = 0 // Make menu focusable\n    this.ariaExpanded = 'true'\n    this.showPopover()\n    this.open = true\n    this.focus()\n    this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n  }\n\n  /**\n   * Hides the menu\n   */\n  hide(): void {\n    this.tabIndex = -1\n    this.ariaExpanded = 'false'\n    this.hidePopover()\n    this.open = false\n    this.closeSubMenu()\n    this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n  }\n\n  /**\n   * Handles beforetoggle event from popover\n   */\n  protected handleBeforeToggle(e: Event): void {\n    const toggleEvent = e as ToggleEvent\n    if (toggleEvent.newState === 'closed') {\n      this.open = false\n      this.closeSubMenu()\n    }\n  }\n\n  /**\n   * Handles keyboard navigation for the menu\n   */\n  override handleKeydown(e: KeyboardEvent): void {\n    if (!this.open || e.defaultPrevented) return\n\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault()\n        this.hide()\n        break\n      case 'ArrowRight':\n        e.preventDefault()\n        this.openSubMenu()\n        break\n      case 'ArrowLeft':\n        e.preventDefault()\n        this.closeSubMenu()\n        break\n      default:\n        // Let the parent UiList handle other keys\n        super.handleKeydown(e)\n    }\n  }\n\n  @bound\n  handleSubMenuSelect(e: CustomEvent): void {\n    super.notifySelect(e.detail.item, e.detail.index)\n  }\n\n  /**\n   * Opens the sub-menu for the currently active item\n   */\n  protected openSubMenu(): void {\n    const activeItem = this.activeListItem as UiMenuItem\n    if (activeItem?.hasSubMenu) {\n      activeItem.openSubMenu()\n    }\n  }\n\n  /**\n   * Closes the currently open sub-menu\n   */\n  closeSubMenu(): void {\n    if (this.activeSubMenu) {\n      this.activeSubMenu.removeEventListener('select', this.handleSubMenuSelect as EventListener)\n      this.activeSubMenu.hide()\n      this.activeSubMenu = null\n    }\n  }\n\n  /**\n   * Sets the active sub-menu\n   */\n  setActiveSubMenu(subMenu: UiSubMenu | null): void {\n    this.activeSubMenu = subMenu\n    subMenu?.addEventListener('select', this.handleSubMenuSelect as EventListener)\n  }\n\n  override notifySelect(item: UiListItem, index?: number): boolean {\n    this.hide()\n    return super.notifySelect(item, index)\n  }\n\n  /**\n   * Handles sub-menu opening\n   */\n  protected handleSubMenuOpen(e: CustomEvent): void {\n    const subMenu = e.detail.subMenu\n    this.setActiveSubMenu(subMenu)\n  }\n\n  /**\n   * Handles slot changes to update menu items\n   */\n  protected handleSlotChange(): void {\n    // Update the items list when slot content changes\n    this.updateItems()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'menu-container': true,\n    })\n\n    return html`\n      <div class=${classes}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"]}

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

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

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

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