@material/web 1.0.0-pre.6 → 1.0.0-pre.8

package/list/lib/listitem/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/focus-ring.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {ariaProperty} from '../../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../../focus/strong-focus.js';\nimport {ripple} from '../../../ripple/directive.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {ARIARole} from '../../../types/aria.js';\n\ninterface ListItemSelf {\n  active: boolean;\n  disabled: boolean;\n}\n\n/**\n * The interface of an item that is compatible with md-list. An item that is\n * selectable and disablable.\n */\nexport type ListItem = ListItemSelf&HTMLElement;\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemEl extends LitElement implements ListItem {\n  @ariaProperty\n  // tslint:disable-next-line\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'listitem';\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})\n  override ariaSelected!: 'true'|'false';\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-checked', noAccessor: true})\n  override ariaChecked!: 'true'|'false';\n\n  /**\n   * The primary, headline text of the list item.\n   */\n  @property() headline = '';\n\n  /**\n   * The one-line supporting text below the headline. Set\n   * `multiLineSupportingText` to `true` to support multiple lines in the\n   * supporting text.\n   */\n  @property() supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean}) multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overriden by elements\n   * slotted into the `end` slot.\n   */\n  @property() trailingSupportingText = '';\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The tabindex of the underlying item.\n   *\n   * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number}) itemTabIndex = -1;\n\n  /**\n   * Whether or not the element is actively being interacted with by md-list.\n   * When active, tabindex is set to 0, and in some list item variants (like\n   * md-list-item), focuses the underlying item.\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n  @query('.list-item') protected listItemRoot!: HTMLElement;\n\n  @state() protected showFocusRing = false;\n  @state() protected showRipple = false;\n\n  /**\n   * Only meant to be overriden by subclassing and not by the user. This is\n   * so that we have control over focus on specific variants such as disabling\n   * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.\n   */\n  protected focusOnSelection = true;\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private isFirstUpdate = true;\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('active') && !this.disabled) {\n      if (this.active) {\n        this.itemTabIndex = 0;\n\n        if (this.focusOnSelection) {\n          this.showFocusRing = shouldShowStrongFocus();\n        }\n\n        // Do not reset anything if it's the first render because user could\n        // have set `itemTabIndex` manually.\n      } else if (!this.isFirstUpdate) {\n        this.itemTabIndex = -1;\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    return this.renderListItem(html`\n      <div class=\"content-wrapper\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        ${this.renderRipple()}\n        ${this.renderFocusRing()}\n      </div>`);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content {unkown} the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${this.ariaSelected || nothing}\n          aria-checked=${this.ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          @pointerdown=${this.onPointerdown}\n          @focus=${this.onFocus}\n          @blur=${this.onBlur}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</li>`;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    return this.showRipple ?\n        html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>` :\n        nothing;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring class=\"focus-ring\" .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'with-one-line': this.supportingText === '',\n      'with-two-line':\n          this.supportingText !== '' && !this.multiLineSupportingText,\n      'with-three-line':\n          this.supportingText !== '' && this.multiLineSupportingText,\n      'disabled': this.disabled\n    };\n  }\n\n  /**\n   * The content rendered at the start of the list item.\n   */\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\"><slot name=\"start\"></slot></div>`;\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody(): TemplateResult {\n    const supportingText =\n        this.supportingText !== '' ? this.renderSupportingText() : '';\n\n    return html`<div class=\"body\"\n      ><span class=\"label-text\">${this.headline}</span>${supportingText}</div>`;\n  }\n\n  /**\n   * Renders the one-line supporting text.\n   */\n  protected renderSupportingText(): TemplateResult {\n    return html`<span\n        class=\"supporting-text ${classMap(this.getSupportingTextClasses())}\"\n      >${this.supportingText}</span>`;\n  }\n\n  /**\n   * Gets the classes for the supporting text node\n   */\n  protected getSupportingTextClasses(): ClassInfo {\n    return {'supporting-text--multi-line': this.multiLineSupportingText};\n  }\n\n  /**\n   * The content rendered at the end of the list item.\n   */\n  protected renderEnd(): TemplateResult {\n    const supportingText = this.trailingSupportingText !== '' ?\n        this.renderTrailingSupportingText() :\n        '';\n    return html`<div class=\"end\"\n      ><slot name=\"end\">${supportingText}</slot></div>`;\n  }\n\n  /**\n   * Renders the supporting text at the end of the list item.\n   */\n  protected renderTrailingSupportingText(): TemplateResult {\n    return html`<span class=\"trailing-supporting-text\"\n      >${this.trailingSupportingText}</span>`;\n  }\n\n  protected onPointerdown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected onFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected onBlur() {\n    this.showFocusRing = false;\n  }\n\n  // For easier overriding in menu-item\n  protected onClick(e: Event) {}\n  protected onKeydown(e: KeyboardEvent) {}\n  protected onPointerenter(e: Event) {}\n  protected onPointerleave(e: Event) {}\n\n  override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n\n    // will focus the list item root if it is selected but not on the first\n    // update or else it may cause the page to jump on first load.\n    if (changed.has('active') && !this.isFirstUpdate && this.active &&\n        this.focusOnSelection) {\n      this.focus();\n    }\n\n    this.isFirstUpdate = false;\n  }\n\n  override focus() {\n    this.listItemRoot?.focus?.();\n  }\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/focus-ring.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../../aria/delegate.js';\nimport {ripple} from '../../../ripple/directive.js';\nimport {MdRipple} from '../../../ripple/ripple.js';\nimport {ARIAMixinStrict, ARIARole} from '../../../types/aria.js';\n\ninterface ListItemSelf {\n  active: boolean;\n  disabled: boolean;\n}\n\n/**\n * The interface of an item that is compatible with md-list. An item that is\n * selectable and disablable.\n */\nexport type ListItem = ListItemSelf&HTMLElement;\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemEl extends LitElement implements ListItem {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * The primary, headline text of the list item.\n   */\n  @property() headline = '';\n\n  /**\n   * The one-line supporting text below the headline. Set\n   * `multiLineSupportingText` to `true` to support multiple lines in the\n   * supporting text.\n   */\n  @property() supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean}) multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overriden by elements\n   * slotted into the `end` slot.\n   */\n  @property() trailingSupportingText = '';\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The tabindex of the underlying item.\n   *\n   * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number}) itemTabIndex = -1;\n\n  /**\n   * Whether or not the element is actively being interacted with by md-list.\n   * When active, tabindex is set to 0, and in some list item variants (like\n   * md-list-item), focuses the underlying item.\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n  protected readonly listItemRole: ARIARole = 'listitem';\n\n  @state() private showRipple = false;\n\n  /**\n   * Only meant to be overriden by subclassing and not by the user. This is\n   * so that we have control over focus on specific variants such as disabling\n   * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.\n   */\n  protected focusOnActivation = true;\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private isFirstUpdate = true;\n\n  protected override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('active') && !this.disabled) {\n      if (this.active) {\n        this.itemTabIndex = 0;\n      } else if (!this.isFirstUpdate) {\n        // Do not reset anything if it's the first render because user could\n        // have set `itemTabIndex` manually.\n        this.itemTabIndex = -1;\n      }\n    }\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <div class=\"content-wrapper\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        ${this.renderRipple()}\n        ${this.renderFocusRing()}\n      </div>`);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content {unkown} the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n          id=\"item\"\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.listItemRole}\n          aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n          aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</li>`;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  private renderRipple() {\n    return this.showRipple ?\n        html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>` :\n        nothing;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  private renderFocusRing() {\n    return html`<md-focus-ring class=\"focus-ring\" for=\"item\"></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses() {\n    return {\n      'with-one-line': this.supportingText === '',\n      'with-two-line':\n          this.supportingText !== '' && !this.multiLineSupportingText,\n      'with-three-line':\n          this.supportingText !== '' && this.multiLineSupportingText,\n      'disabled': this.disabled\n    };\n  }\n\n  /**\n   * The content rendered at the start of the list item.\n   */\n  private renderStart() {\n    return html`<div class=\"start\"><slot name=\"start\"></slot></div>`;\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  private renderBody() {\n    const supportingText =\n        this.supportingText !== '' ? this.renderSupportingText() : '';\n\n    return html`<div class=\"body\"\n      ><span class=\"label-text\">${this.headline}</span>${supportingText}</div>`;\n  }\n\n  /**\n   * Renders the one-line supporting text.\n   */\n  private renderSupportingText() {\n    return html`<span\n        class=\"supporting-text ${classMap(this.getSupportingTextClasses())}\"\n      >${this.supportingText}</span>`;\n  }\n\n  /**\n   * Gets the classes for the supporting text node\n   */\n  private getSupportingTextClasses() {\n    return {'supporting-text--multi-line': this.multiLineSupportingText};\n  }\n\n  /**\n   * The content rendered at the end of the list item.\n   */\n  protected renderEnd() {\n    const supportingText = this.trailingSupportingText !== '' ?\n        this.renderTrailingSupportingText() :\n        '';\n    return html`<div class=\"end\"\n      ><slot name=\"end\">${supportingText}</slot></div>`;\n  }\n\n  /**\n   * Renders the supporting text at the end of the list item.\n   */\n  private renderTrailingSupportingText() {\n    return html`<span class=\"trailing-supporting-text\"\n      >${this.trailingSupportingText}</span>`;\n  }\n\n  // For easier overriding in menu-item\n  protected onClick?(event: Event): void;\n  protected onKeydown?(event: KeyboardEvent): void;\n  protected onPointerenter?(event: Event): void;\n  protected onPointerleave?(event: Event): void;\n\n  protected override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n\n    // will focus the list item root if it is selected but not on the first\n    // update or else it may cause the page to jump on first load.\n    if (changed.has('active') && !this.isFirstUpdate && this.active &&\n        this.focusOnActivation) {\n      this.focus();\n    }\n\n    this.isFirstUpdate = false;\n  }\n\n  override focus() {\n    this.listItemRoot?.focus?.();\n  }\n}\n"]}

package/list/lib/listitemlink/list-item-link.js

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -14,16 +14,14 @@ export class ListItemLink extends ListItemEl {
     renderListItem(content) {
         return html `
       <a
+          id="item"
           tabindex=${this.disabled ? -1 : this.itemTabIndex}
-          role=${this.role}
+          role=${this.listItemRole}
           aria-selected=${this.ariaSelected || nothing}
           aria-checked=${this.ariaChecked || nothing}
           class="list-item ${classMap(this.getRenderClasses())}"
           href=${this.href}
           target=${this.target || nothing}
-          @pointerdown=${this.onPointerdown}
-          @focus=${this.onFocus}
-          @blur=${this.onBlur}
           @click=${this.onClick}
           @pointerenter=${this.onPointerenter}
           @pointerleave=${this.onPointerleave}
@@ -32,11 +30,9 @@ export class ListItemLink extends ListItemEl {
     }
 }
 __decorate([
-    property(),
-    __metadata("design:type", String)
+    property()
 ], ListItemLink.prototype, "href", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", String)
+    property()
 ], ListItemLink.prototype, "target", void 0);
 //# sourceMappingURL=list-item-link.js.map

package/list/lib/listitemlink/list-item-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAIpD,gEAAgE;AAChE,MAAM,OAAO,YAAa,SAAQ,UAAU;IAUvB,cAAc,CAAC,OAAgB;QAChD,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY;iBAC1C,IAAI,CAAC,IAAI;0BACA,IAAI,CAAC,YAAY,IAAI,OAAO;yBAC7B,IAAI,CAAC,WAAW,IAAI,OAAO;6BACvB,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBAC7C,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAoB,IAAI,OAAO;yBAC9B,IAAI,CAAC,aAAa;mBACxB,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;mBACV,IAAI,CAAC,OAAO;0BACL,IAAI,CAAC,cAAc;0BACnB,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;YACvB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,OAAO,MAAM,CAAC;IAClD,CAAC;CACF;AAzBC;IAAC,QAAQ,EAAE;;0CAAe;AAK1B;IAAC,QAAQ,EAAE;;4CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ripple} from '../../../ripple/directive.js';\nimport {ListItemEl} from '../listitem/list-item.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemLink extends ListItemEl {\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href!: string;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target!: string;\n  protected override renderListItem(content: unknown) {\n    return html`\n      <a\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.role}\n          aria-selected=${this.ariaSelected || nothing}\n          aria-checked=${this.ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          href=${this.href}\n          target=${this.target as LinkTarget || nothing}\n          @pointerdown=${this.onPointerdown}\n          @focus=${this.onFocus}\n          @blur=${this.onBlur}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</a>`;\n  }\n}"]}
+{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AAEpD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAIpD,gEAAgE;AAChE,MAAM,OAAO,YAAa,SAAQ,UAAU;IAUvB,cAAc,CAAC,OAAgB;QAChD,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY;iBAC1C,IAAI,CAAC,YAAY;0BACP,IAAwB,CAAC,YAAY,IAAI,OAAO;yBACjD,IAAwB,CAAC,WAAW,IAAI,OAAO;6BAC5C,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBAC7C,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAoB,IAAI,OAAO;mBACpC,IAAI,CAAC,OAAO;0BACL,IAAI,CAAC,cAAc;0BACnB,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;YACvB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,OAAO,MAAM,CAAC;IAClD,CAAC;CACF;AAvBa;IAAX,QAAQ,EAAE;0CAAe;AAKd;IAAX,QAAQ,EAAE;4CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ripple} from '../../../ripple/directive.js';\nimport {ARIAMixinStrict} from '../../../types/aria.js';\nimport {ListItemEl} from '../listitem/list-item.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemLink extends ListItemEl {\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href!: string;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target!: string;\n  protected override renderListItem(content: unknown) {\n    return html`\n      <a\n          id=\"item\"\n          tabindex=${this.disabled ? -1 : this.itemTabIndex}\n          role=${this.listItemRole}\n          aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n          aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n          class=\"list-item ${classMap(this.getRenderClasses())}\"\n          href=${this.href}\n          target=${this.target as LinkTarget || nothing}\n          @click=${this.onClick}\n          @pointerenter=${this.onPointerenter}\n          @pointerleave=${this.onPointerleave}\n          @keydown=${this.onKeydown}\n          ${ripple(this.getRipple)}>${content}</a>`;\n  }\n}\n"]}

package/menu/lib/_menu.scss

@@ -17,29 +17,27 @@
 @use '../../tokens';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'menu';
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-menu-values(), $tokens);
 
-@mixin theme($theme) {
-  $theme: theme.validate-theme(tokens.md-comp-menu-values(), $theme);
-  $theme: _resolve-tokens($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
+  @each $token, $value in $tokens {
+    @if $value {
+      --md-menu-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-menu-values();
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-menu-#{$token}, #{$value});
     }
 
     @include md-list.theme(
       (
-        'list-item-container-color': var(--_container-color),
+        'container-color': var(--_container-color),
       )
     );
 
@@ -103,21 +101,3 @@ $_custom-property-prefix: 'menu';
     }
   }
 }
-
-@function _resolve-tokens($tokens) {
-  // removes unused tokens
-  $unused-tokens: ();
-  @each $token in map-keys($tokens) {
-    $index: string.index($token, 'list-item');
-
-    @if $index {
-      $unused-tokens: list.append($unused-tokens, $token);
-    }
-  }
-
-  @each $token in $unused-tokens {
-    $tokens: map.remove($tokens, $token);
-  }
-
-  @return $tokens;
-}

package/menu/lib/menu-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape));min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape: var(--_container-shape);min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
 `;
 //# sourceMappingURL=menu-styles.css.js.map

package/menu/lib/menu-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape));min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}
+{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape: var(--_container-shape);min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}

package/menu/lib/menu.d.ts

@@ -7,11 +7,9 @@ import '../../list/list.js';
 import '../../focus/focus-ring.js';
 import '../../elevation/elevation.js';
 import { LitElement } from 'lit';
-import { MdFocusRing } from '../../focus/focus-ring.js';
-import { List } from '../../list/lib/list.js';
 import { ARIARole } from '../../types/aria.js';
-import { ActivateTypeaheadEvent, DeactivateTypeaheadEvent, MenuItem } from './shared.js';
-import { Corner, SurfacePositionController, SurfacePositionTarget } from './surfacePositionController.js';
+import { MenuItem } from './shared.js';
+import { Corner, SurfacePositionTarget } from './surfacePositionController.js';
 import { TypeaheadController } from './typeaheadController.js';
 export { Corner } from './surfacePositionController.js';
 /**
@@ -29,11 +27,9 @@ export type DefaultFocusState = 'NONE' | 'LIST_ROOT' | 'FIRST_ITEM' | 'LAST_ITEM
  * @fires closed Fired once the menu is closed, after any animations
  */
 export declare abstract class Menu extends LitElement {
-    protected readonly listElement: List | null;
-    protected readonly surfaceEl: HTMLElement | null;
-    protected readonly slotEl: HTMLSlotElement | null;
-    protected readonly focusRing: MdFocusRing;
-    ariaLabel: string;
+    private readonly listElement;
+    private readonly surfaceEl;
+    private readonly slotEl;
     /**
      * The element in which the menu should align to.
      */
@@ -88,7 +84,7 @@ export declare abstract class Menu extends LitElement {
     /**
      * The role of the underlying list element.
      */
-    role: ARIARole;
+    type: ARIARole;
     /**
      * The max time between the keystrokes of the typeahead menu behavior before
      * it clears the typeahead buffer.
@@ -127,17 +123,17 @@ export declare abstract class Menu extends LitElement {
      * The element that should be focused by default once opened.
      */
     defaultFocus: DefaultFocusState;
-    protected typeaheadActive: boolean;
-    protected openCloseAnimationSignal: import("../../motion/animation.js").AnimationSignal;
+    private typeaheadActive;
+    private readonly openCloseAnimationSignal;
     /**
      * Whether the menu is animating upwards or downwards when opening. This is
      * helpful for calculating some animation calculations.
      */
-    protected get openDirection(): 'UP' | 'DOWN';
+    private get openDirection();
     /**
      * The element that was focused before the menu opened.
      */
-    protected lastFocusedElement: HTMLElement | null;
+    private lastFocusedElement;
     /**
      * Handles typeahead navigation through the menu.
      */
@@ -145,75 +141,70 @@ export declare abstract class Menu extends LitElement {
     /**
      * Handles positioning the surface and aligning it to the anchor.
      */
-    protected menuPositionController: SurfacePositionController;
+    private readonly menuPositionController;
     /**
      * The menu items associated with this menu. The items must be `MenuItem`s and
      * have both the `md-menu-item` and `md-list-item` attributes.
      */
     get items(): MenuItem[];
-    render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     /**
      * Renders the positionable surface element and its contents.
      */
-    protected renderSurface(): import("lit-html").TemplateResult<1>;
+    private renderSurface;
     /**
      * Renders the List element and its items
      */
-    protected renderList(): import("lit-html").TemplateResult<1>;
+    private renderList;
     /**
      * Renders the menu items' slot
      */
-    protected renderMenuItems(): import("lit-html").TemplateResult<1>;
+    private renderMenuItems;
     /**
      * Renders the elevation component.
      */
-    protected renderElevation(): import("lit-html").TemplateResult<1>;
+    private renderElevation;
     /**
      * Renders the focus ring component.
      */
-    protected renderFocusRing(): import("lit-html").TemplateResult<1>;
-    protected getSurfaceClasses(): {
-        open: boolean;
-        fixed: boolean;
-        'has-overflow': boolean;
-    };
-    protected handleFocusout(e: FocusEvent): Promise<void>;
-    protected handleListFocus(): void;
-    protected handleListClick(): void;
-    protected handleListKeydown(e: KeyboardEvent): void;
-    protected handleListBlur(): void;
+    private renderFocusRing;
+    private getSurfaceClasses;
+    private handleFocusout;
+    private handleListKeydown;
     /**
      * Saves the last focused element focuses the new element based on
      * `defaultFocus`, and animates open.
      */
-    protected onOpened: () => void;
+    private readonly onOpened;
     /**
      * Animates closed.
      */
-    protected beforeClose: () => Promise<void>;
+    private readonly beforeClose;
     /**
      * Focuses the last focused element.
      */
-    protected onClosed: () => void;
+    private readonly onClosed;
     /**
      * Performs the opening animation:
      *
      * https://direct.googleplex.com/#/spec/295000003+271060003
      */
-    protected animateOpen(): void;
+    private animateOpen;
     /**
      * Performs the closing animation:
      *
      * https://direct.googleplex.com/#/spec/295000003+271060003
      */
-    protected animateClose(): Promise<unknown>;
+    private animateClose;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected onWindowClick: (e: MouseEvent) => void;
-    protected onCloseMenu(e: Event): void;
-    protected onDeactivateItems(e: Event): void;
-    protected handleDeactivateTypeahead(e: DeactivateTypeaheadEvent): void;
-    protected handleActivateTypeahead(e: ActivateTypeaheadEvent): void;
+    private readonly onWindowClick;
+    private onCloseMenu;
+    private onDeactivateItems;
+    private handleDeactivateTypeahead;
+    private handleActivateTypeahead;
+    private handleStayOpenOnFocusout;
+    private handleCloseOnFocusout;
     focus(): void;
     close(): void;
     show(): void;

package/menu/lib/menu.js

@@ -3,19 +3,16 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-// Required for @ariaProperty
-// tslint:disable:no-new-decorators
+var _a;
+import { __decorate } from "tslib";
 import '../../list/list.js';
 import '../../focus/focus-ring.js';
 import '../../elevation/elevation.js';
-import { html, isServer, LitElement } from 'lit';
+import { html, isServer, LitElement, nothing } from 'lit';
 import { eventOptions, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
-import { MdFocusRing } from '../../focus/focus-ring.js';
-import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { List } from '../../list/lib/list.js';
 import { createAnimationSignal, EASING } from '../../motion/animation.js';
 import { isElementInSubtree } from './shared.js';
@@ -105,7 +102,7 @@ export class Menu extends LitElement {
         /**
          * The role of the underlying list element.
          */
-        this.role = 'list';
+        this.type = 'menu';
         /**
          * The max time between the keystrokes of the typeahead menu behavior before
          * it clears the typeahead buffer.
@@ -280,8 +277,8 @@ export class Menu extends LitElement {
           class="menu ${classMap(this.getSurfaceClasses())}"
           style=${styleMap(this.menuPositionController.surfaceStyles)}
           @focusout=${this.handleFocusout}>
-        ${this.renderList()}
         ${this.renderElevation()}
+        ${this.renderList()}
         ${this.renderFocusRing()}
        </div>
      `;
@@ -290,14 +287,14 @@ export class Menu extends LitElement {
      * Renders the List element and its items
      */
     renderList() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `
       <md-list
-          .ariaLabel=${this.ariaLabel}
-          .role=${this.role}
+          id="list"
+          aria-label=${ariaLabel || nothing}
+          type=${this.type}
           listTabIndex=${this.listTabIndex}
-          @focus=${this.handleListFocus}
-          @blur=${this.handleListBlur}
-          @click=${this.handleListClick}
           @keydown=${this.handleListKeydown}>
         ${this.renderMenuItems()}
       </md-list>`;
@@ -310,7 +307,9 @@ export class Menu extends LitElement {
         @close-menu=${this.onCloseMenu}
         @deactivate-items=${this.onDeactivateItems}
         @deactivate-typeahead=${this.handleDeactivateTypeahead}
-        @activate-typeahead=${this.handleActivateTypeahead}></slot>`;
+        @activate-typeahead=${this.handleActivateTypeahead}
+        @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+        @close-on-focusout=${this.handleCloseOnFocusout}></slot>`;
     }
     /**
      * Renders the elevation component.
@@ -322,7 +321,7 @@ export class Menu extends LitElement {
      * Renders the focus ring component.
      */
     renderFocusRing() {
-        return html `<md-focus-ring></md-focus-ring>`;
+        return html `<md-focus-ring for="list"></md-focus-ring>`;
     }
     getSurfaceClasses() {
         return {
@@ -353,22 +352,12 @@ export class Menu extends LitElement {
         // return to previous behavior
         this.skipRestoreFocus = oldRestoreFocus;
     }
-    handleListFocus() {
-        this.focusRing.visible = shouldShowStrongFocus();
-    }
-    handleListClick() {
-        pointerPress();
-        this.focusRing.visible = shouldShowStrongFocus();
-    }
     // Capture so that we can grab the event before it reaches the list item
     // istelf. Specifically useful for the case where typeahead encounters a space
     // and we don't want the menu item to close the menu.
     handleListKeydown(e) {
         this.typeaheadController.onKeydown(e);
     }
-    handleListBlur() {
-        this.focusRing.visible = false;
-    }
     /**
      * Performs the opening animation:
      *
@@ -547,7 +536,7 @@ export class Menu extends LitElement {
             window.removeEventListener('click', this.onWindowClick, { capture: true });
         }
     }
-    onCloseMenu(e) {
+    onCloseMenu() {
         this.close();
     }
     onDeactivateItems(e) {
@@ -555,6 +544,7 @@ export class Menu extends LitElement {
         const items = this.items;
         for (const item of items) {
             item.active = false;
+            item.selected = false;
         }
     }
     handleDeactivateTypeahead(e) {
@@ -569,6 +559,14 @@ export class Menu extends LitElement {
         e.stopPropagation();
         this.typeaheadActive = true;
     }
+    handleStayOpenOnFocusout(e) {
+        e.stopPropagation();
+        this.stayOpenOnFocusout = true;
+    }
+    handleCloseOnFocusout(e) {
+        e.stopPropagation();
+        this.stayOpenOnFocusout = false;
+    }
     focus() {
         this.listElement?.focus();
     }
@@ -582,100 +580,71 @@ export class Menu extends LitElement {
         this.open = true;
     }
 }
+_a = Menu;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    query('md-list'),
-    __metadata("design:type", List)
+    query('md-list')
 ], Menu.prototype, "listElement", void 0);
 __decorate([
-    query('.menu'),
-    __metadata("design:type", HTMLElement)
+    query('.menu')
 ], Menu.prototype, "surfaceEl", void 0);
 __decorate([
-    query('slot'),
-    __metadata("design:type", HTMLSlotElement)
+    query('slot')
 ], Menu.prototype, "slotEl", void 0);
 __decorate([
-    query('md-focus-ring'),
-    __metadata("design:type", MdFocusRing)
-], Menu.prototype, "focusRing", void 0);
-__decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], Menu.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
+    property({ attribute: false })
 ], Menu.prototype, "anchor", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Menu.prototype, "fixed", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Menu.prototype, "quick", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-overflow' }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, attribute: 'has-overflow' })
 ], Menu.prototype, "hasOverflow", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], Menu.prototype, "open", void 0);
 __decorate([
-    property({ type: Number, attribute: 'x-offset' }),
-    __metadata("design:type", Object)
+    property({ type: Number, attribute: 'x-offset' })
 ], Menu.prototype, "xOffset", void 0);
 __decorate([
-    property({ type: Number, attribute: 'y-offset' }),
-    __metadata("design:type", Object)
+    property({ type: Number, attribute: 'y-offset' })
 ], Menu.prototype, "yOffset", void 0);
 __decorate([
-    property({ type: Number, attribute: 'list-tab-index' }),
-    __metadata("design:type", Object)
+    property({ type: Number, attribute: 'list-tab-index' })
 ], Menu.prototype, "listTabIndex", void 0);
 __decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-role', noAccessor: true }),
-    __metadata("design:type", String)
-], Menu.prototype, "role", void 0);
+    property()
+], Menu.prototype, "type", void 0);
 __decorate([
-    property({ type: Number, attribute: 'typeahead-delay' }),
-    __metadata("design:type", Object)
+    property({ type: Number, attribute: 'typeahead-delay' })
 ], Menu.prototype, "typeaheadBufferTime", void 0);
 __decorate([
-    property({ type: String, attribute: 'anchor-corner' }),
-    __metadata("design:type", String)
+    property({ attribute: 'anchor-corner' })
 ], Menu.prototype, "anchorCorner", void 0);
 __decorate([
-    property({ type: String, attribute: 'menu-corner' }),
-    __metadata("design:type", String)
+    property({ attribute: 'menu-corner' })
 ], Menu.prototype, "menuCorner", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'stay-open-on-outside-click' }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
 ], Menu.prototype, "stayOpenOnOutsideClick", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'stay-open-on-focusout' }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, attribute: 'stay-open-on-focusout' })
 ], Menu.prototype, "stayOpenOnFocusout", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'skip-restore-focus' }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, attribute: 'skip-restore-focus' })
 ], Menu.prototype, "skipRestoreFocus", void 0);
 __decorate([
-    property({ type: String, attribute: 'default-focus' }),
-    __metadata("design:type", String)
+    property({ attribute: 'default-focus' })
 ], Menu.prototype, "defaultFocus", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Menu.prototype, "typeaheadActive", void 0);
 __decorate([
-    eventOptions({ capture: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
+    eventOptions({ capture: true })
 ], Menu.prototype, "handleListKeydown", null);
 //# sourceMappingURL=menu.js.map